diff --git a/client/src/components/Preferences/PreferencesTopbar.js b/client/src/components/Preferences/PreferencesTopbar.js
index 212a69324..48f4ea08c 100644
--- a/client/src/components/Preferences/PreferencesTopbar.js
+++ b/client/src/components/Preferences/PreferencesTopbar.js
@@ -3,25 +3,26 @@ import { Route, Switch } from 'react-router-dom';
 import DashboardTopbarUser from 'components/Dashboard/TopbarUser';
 import UsersActions from 'containers/Preferences/Users/UsersActions';
 import CurrenciesActions from 'containers/Preferences/Currencies/CurrenciesActions';
+import { compose } from 'utils';
+import { connect } from 'react-redux';
 
-
-export default function PreferencesTopbar() {
+function PreferencesTopbar({ pageTitle }) {
   return (
     <div class="dashboard__preferences-topbar">
-      <h2>Accounts</h2>
-
+      {/* <h2>Accounts</h2> */}
+      <div class="dashboard__title">
+        <h2>{pageTitle}</h2>
+      </div>
       <div class="preferences__topbar-actions">
         <Route pathname="/preferences">
           <Switch>
-            <Route
-              exact
-              path={'/preferences/users'}
-              component={UsersActions} />
+            <Route exact path={'/preferences/users'} component={UsersActions} />
 
             <Route
               exact
               path={'/preferences/currencies'}
-              component={CurrenciesActions} />
+              component={CurrenciesActions}
+            />
           </Switch>
         </Route>
       </div>
@@ -31,4 +32,10 @@ export default function PreferencesTopbar() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
+
+const mapStateToProps = (state) => ({
+  pageTitle: state.dashboard.preferencesPageTitle,
+});
+
+export default compose(connect(mapStateToProps))(PreferencesTopbar);
diff --git a/client/src/connectors/Dashboard.connector.js b/client/src/connectors/Dashboard.connector.js
index 6c3ce2bf9..2be19910d 100644
--- a/client/src/connectors/Dashboard.connector.js
+++ b/client/src/connectors/Dashboard.connector.js
@@ -1,27 +1,34 @@
-
 import { connect } from 'react-redux';
 import t from 'store/types';
 
 const mapActionsToProps = (dispatch) => ({
-  changePageTitle: (pageTitle) => dispatch({
-    type: t.CHANGE_DASHBOARD_PAGE_TITLE, pageTitle
-  }),
+  changePageTitle: (pageTitle) =>
+    dispatch({
+      type: t.CHANGE_DASHBOARD_PAGE_TITLE,
+      pageTitle,
+    }),
 
-  changePageSubtitle: (pageSubtitle) => dispatch({
-    type: t.ALTER_DASHBOARD_PAGE_SUBTITLE, pageSubtitle,
-  }),
+  changePageSubtitle: (pageSubtitle) =>
+    dispatch({
+      type: t.ALTER_DASHBOARD_PAGE_SUBTITLE,
+      pageSubtitle,
+    }),
 
-  setTopbarEditView: (id) => dispatch({
-    type: t.SET_TOPBAR_EDIT_VIEW, id,
-  }),
+  setTopbarEditView: (id) =>
+    dispatch({
+      type: t.SET_TOPBAR_EDIT_VIEW,
+      id,
+    }),
 
-  setDashboardRequestLoading: () => dispatch({
-    type: t.SET_DASHBOARD_REQUEST_LOADING,
-  }),
+  setDashboardRequestLoading: () =>
+    dispatch({
+      type: t.SET_DASHBOARD_REQUEST_LOADING,
+    }),
 
-  setDashboardRequestCompleted: () => dispatch({
-    type: t.SET_DASHBOARD_REQUEST_COMPLETED,
-  }),
+  setDashboardRequestCompleted: () =>
+    dispatch({
+      type: t.SET_DASHBOARD_REQUEST_COMPLETED,
+    }),
 });
 
-export default connect(null, mapActionsToProps);
\ No newline at end of file
+export default connect(null, mapActionsToProps);
diff --git a/client/src/containers/Accounting/MakeJournalEntriesForm.js b/client/src/containers/Accounting/MakeJournalEntriesForm.js
index 0aa08f529..ee7936e6d 100644
--- a/client/src/containers/Accounting/MakeJournalEntriesForm.js
+++ b/client/src/containers/Accounting/MakeJournalEntriesForm.js
@@ -1,6 +1,12 @@
-import React, {useMemo, useState, useEffect, useRef, useCallback} from 'react';
+import React, {
+  useMemo,
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+} from 'react';
 import * as Yup from 'yup';
-import { useFormik } from "formik";
+import { useFormik } from 'formik';
 import moment from 'moment';
 import { Intent } from '@blueprintjs/core';
 import { useIntl } from 'react-intl';
@@ -20,8 +26,7 @@ import Dragzone from 'components/Dragzone';
 import MediaConnect from 'connectors/Media.connect';
 
 import useMedia from 'hooks/useMedia';
-import {compose} from 'utils';
-
+import { compose } from 'utils';
 
 function MakeJournalEntriesForm({
   // #withMedia
@@ -39,10 +44,16 @@ function MakeJournalEntriesForm({
   manualJournalId,
   manualJournal,
   onFormSubmit,
-  onCancelForm, 
+  onCancelForm,
 }) {
   const { formatMessage } = useIntl();
-  const { setFiles, saveMedia, deletedFiles, setDeletedFiles, deleteMedia } = useMedia({
+  const {
+    setFiles,
+    saveMedia,
+    deletedFiles,
+    setDeletedFiles,
+    deleteMedia,
+  } = useMedia({
     saveCallback: requestSubmitMedia,
     deleteCallback: requestDeleteMedia,
   });
@@ -51,79 +62,95 @@ function MakeJournalEntriesForm({
   }, []);
 
   const savedMediaIds = useRef([]);
-  const clearSavedMediaIds = () => { savedMediaIds.current = []; }
+  const clearSavedMediaIds = () => {
+    savedMediaIds.current = [];
+  };
 
   useEffect(() => {
     if (manualJournal && manualJournal.id) {
-      changePageTitle(formatMessage({id:'edit_journal'}));
+      changePageTitle(formatMessage({ id: 'edit_journal' }));
       changePageSubtitle(`No. ${manualJournal.journal_number}`);
     } else {
-      changePageTitle(formatMessage({id:'new_journal'}));  
+      changePageTitle(formatMessage({ id: 'new_journal' }));
     }
-  }, [changePageTitle, changePageSubtitle, manualJournal,formatMessage]);
+  }, [changePageTitle, changePageSubtitle, manualJournal, formatMessage]);
 
   const validationSchema = Yup.object().shape({
-    journal_number: Yup.string().required().label(formatMessage({id:'journal_number_'})),
-    date: Yup.date().required().label(formatMessage({id:'date'})),
+    journal_number: Yup.string()
+      .required()
+      .label(formatMessage({ id: 'journal_number_' })),
+    date: Yup.date().label(formatMessage({ id: 'date' })),
     reference: Yup.string(),
     description: Yup.string(),
     entries: Yup.array().of(
       Yup.object().shape({
         credit: Yup.number().nullable(),
         debit: Yup.number().nullable(),
-        account_id: Yup.number().nullable().when(['credit', 'debit'], {
-          is: (credit, debit) => credit || debit,
-          then: Yup.number().required(),
-        }),
+        account_id: Yup.number()
+          .nullable()
+          .when(['credit', 'debit'], {
+            is: (credit, debit) => credit || debit,
+            then: Yup.number().required(),
+          }),
         note: Yup.string().nullable(),
       }),
-    )
+    ),
   });
 
-  const saveInvokeSubmit = useCallback((payload) => {
-    onFormSubmit && onFormSubmit(payload)
-  }, [onFormSubmit]);
+  const saveInvokeSubmit = useCallback(
+    (payload) => {
+      onFormSubmit && onFormSubmit(payload);
+    },
+    [onFormSubmit],
+  );
 
   const [payload, setPayload] = useState({});
 
-  const defaultEntry = useMemo(() => ({
-    account_id: null,
-    credit: 0,
-    debit: 0,
-    note: '',
-  }), []);
+  const defaultEntry = useMemo(
+    () => ({
+      account_id: null,
+      credit: 0,
+      debit: 0,
+      note: '',
+    }),
+    [],
+  );
 
-  const defaultInitialValues = useMemo(() => ({
-    journal_number: '',
-    date: moment(new Date()).format('YYYY-MM-DD'),
-    description: '',
-    reference: '',
-    entries: [
-      defaultEntry,
-      defaultEntry,
-      defaultEntry,
-      defaultEntry,
-    ],
-  }), [defaultEntry]);
+  const defaultInitialValues = useMemo(
+    () => ({
+      journal_number: '',
+      date: moment(new Date()).format('YYYY-MM-DD'),
+      description: '',
+      reference: '',
+      entries: [defaultEntry, defaultEntry, defaultEntry, defaultEntry],
+    }),
+    [defaultEntry],
+  );
 
-  const initialValues = useMemo(() => ({
-    ...(manualJournal) ? {
-      ...pick(manualJournal, Object.keys(defaultInitialValues)),
-      entries: manualJournal.entries.map((entry) => ({
-        ...pick(entry, Object.keys(defaultEntry)),
-      })),
-    } : {
-      ...defaultInitialValues,
-    }
-  }), [manualJournal, defaultInitialValues, defaultEntry]);
+  const initialValues = useMemo(
+    () => ({
+      ...(manualJournal
+        ? {
+            ...pick(manualJournal, Object.keys(defaultInitialValues)),
+            entries: manualJournal.entries.map((entry) => ({
+              ...pick(entry, Object.keys(defaultEntry)),
+            })),
+          }
+        : {
+            ...defaultInitialValues,
+          }),
+    }),
+    [manualJournal, defaultInitialValues, defaultEntry],
+  );
 
   const initialAttachmentFiles = useMemo(() => {
     return manualJournal && manualJournal.media
       ? manualJournal.media.map((attach) => ({
-        preview: attach.attachment_file,
-        uploaded: true,
-        metadata: { ...attach },
-      })) : [];
+          preview: attach.attachment_file,
+          uploaded: true,
+          metadata: { ...attach },
+        }))
+      : [];
   }, [manualJournal]);
 
   const formik = useFormik({
@@ -133,113 +160,136 @@ function MakeJournalEntriesForm({
       ...initialValues,
     },
     onSubmit: async (values, { setErrors, setSubmitting, resetForm }) => {
-      const entries = values.entries.filter((entry) => (
-        (entry.credit || entry.debit)
-      ));
+      const entries = values.entries.filter(
+        (entry) => entry.credit || entry.debit,
+      );
       const getTotal = (type = 'credit') => {
         return entries.reduce((total, item) => {
           return item[type] ? item[type] + total : total;
         }, 0);
-      }
+      };
       const totalCredit = getTotal('credit');
       const totalDebit = getTotal('debit');
 
       // Validate the total credit should be eqials total debit.
       if (totalCredit !== totalDebit) {
         AppToaster.show({
-          message: formatMessage({id:'credit_and_debit_not_equal'}),
+          message: formatMessage({ id: 'credit_and_debit_not_equal' }),
         });
         setSubmitting(false);
         return;
       }
       const form = { ...values, status: payload.publish, entries };
 
-      const saveJournal = (mediaIds) => new Promise((resolve, reject) => {
-        const requestForm = { ...form, media_ids: mediaIds };
+      const saveJournal = (mediaIds) =>
+        new Promise((resolve, reject) => {
+          const requestForm = { ...form, media_ids: mediaIds };
 
-        if (manualJournal && manualJournal.id) {
-          requestEditManualJournal(manualJournal.id, requestForm)
-            .then((response) => {
-              AppToaster.show({
-                message: formatMessage({
-                  id: 'the_journal_has_been_successfully_edited',
-                }, {
-                  number: values.journal_number,
-                }),
-                intent: Intent.SUCCESS,
-              }); 
-              setSubmitting(false);
-              saveInvokeSubmit({ action: 'update', ...payload });
-              clearSavedMediaIds([]);
-              resetForm();
-              resolve(response);
-            }).catch((errors) => {
-              if (errors.find(e => e.type === 'JOURNAL.NUMBER.ALREADY.EXISTS')) {
-                setErrors({
-                  journal_number: formatMessage({ id: 'journal_number_is_already_used' }),
+          if (manualJournal && manualJournal.id) {
+            requestEditManualJournal(manualJournal.id, requestForm)
+              .then((response) => {
+                AppToaster.show({
+                  message: formatMessage(
+                    {
+                      id: 'the_journal_has_been_successfully_edited',
+                    },
+                    {
+                      number: values.journal_number,
+                    },
+                  ),
+                  intent: Intent.SUCCESS,
                 });
-              }
-              setSubmitting(false);
-            });
-        } else {
-          requestMakeJournalEntries(requestForm)
-            .then((response) => {
-              AppToaster.show({
-                message: formatMessage({
-                  id: 'the_journal_has_been_successfully_created',
-                }, {
-                  number: values.journal_number,
-                }),
-                intent: Intent.SUCCESS,
+                setSubmitting(false);
+                saveInvokeSubmit({ action: 'update', ...payload });
+                clearSavedMediaIds([]);
+                resetForm();
+                resolve(response);
+              })
+              .catch((errors) => {
+                if (
+                  errors.find((e) => e.type === 'JOURNAL.NUMBER.ALREADY.EXISTS')
+                ) {
+                  setErrors({
+                    journal_number: formatMessage({
+                      id: 'journal_number_is_already_used',
+                    }),
+                  });
+                }
+                setSubmitting(false);
               });
-              setSubmitting(false);
-              saveInvokeSubmit({ action: 'new', ...payload });
-              clearSavedMediaIds();
-              resetForm();
-              resolve(response);
-            }).catch((errors) => {
-              if (errors.find(e => e.type === 'JOURNAL.NUMBER.ALREADY.EXISTS')) {
-                setErrors({
-                  journal_number: formatMessage({ id: 'journal_number_is_already_used' }),
+          } else {
+            requestMakeJournalEntries(requestForm)
+              .then((response) => {
+                AppToaster.show({
+                  message: formatMessage(
+                    {
+                      id: 'the_journal_has_been_successfully_created',
+                    },
+                    {
+                      number: values.journal_number,
+                    },
+                  ),
+                  intent: Intent.SUCCESS,
                 });
-              }
-              setSubmitting(false);
-            });
-        }
-      });
+                setSubmitting(false);
+                saveInvokeSubmit({ action: 'new', ...payload });
+                clearSavedMediaIds();
+                resetForm();
+                resolve(response);
+              })
+              .catch((errors) => {
+                if (
+                  errors.find((e) => e.type === 'JOURNAL.NUMBER.ALREADY.EXISTS')
+                ) {
+                  setErrors({
+                    journal_number: formatMessage({
+                      id: 'journal_number_is_already_used',
+                    }),
+                  });
+                }
+                setSubmitting(false);
+              });
+          }
+        });
 
-      Promise.all([
-        saveMedia(),
-        deleteMedia(),
-      ]).then(([savedMediaResponses]) => {
-        const mediaIds = savedMediaResponses.map(res => res.data.media.id);
-        savedMediaIds.current = mediaIds;
+      Promise.all([saveMedia(), deleteMedia()])
+        .then(([savedMediaResponses]) => {
+          const mediaIds = savedMediaResponses.map((res) => res.data.media.id);
+          savedMediaIds.current = mediaIds;
 
-        return savedMediaResponses;
-      }).then(() => {
-        return saveJournal(savedMediaIds.current);
-      });
+          return savedMediaResponses;
+        })
+        .then(() => {
+          return saveJournal(savedMediaIds.current);
+        });
     },
   });
 
-  const handleSubmitClick = useCallback((payload) => {
-    setPayload(payload);
-    formik.handleSubmit();
-  }, [setPayload, formik]);
+  const handleSubmitClick = useCallback(
+    (payload) => {
+      setPayload(payload);
+      formik.handleSubmit();
+    },
+    [setPayload, formik],
+  );
 
-  const handleCancelClick = useCallback((payload) => {
-    onCancelForm && onCancelForm(payload); 
-  }, [onCancelForm]);
+  const handleCancelClick = useCallback(
+    (payload) => {
+      onCancelForm && onCancelForm(payload);
+    },
+    [onCancelForm],
+  );
 
-  const handleDeleteFile = useCallback((_deletedFiles) => {
-    _deletedFiles.forEach((deletedFile) => {
-      if (deletedFile.uploaded && deletedFile.metadata.id) {
-        setDeletedFiles([
-          ...deletedFiles, deletedFile.metadata.id,
-        ]);
-      }
-    });
-  }, [setDeletedFiles, deletedFiles]);  
+  const handleDeleteFile = useCallback(
+    (_deletedFiles) => {
+      _deletedFiles.forEach((deletedFile) => {
+        if (deletedFile.uploaded && deletedFile.metadata.id) {
+          setDeletedFiles([...deletedFiles, deletedFile.metadata.id]);
+        }
+      });
+    },
+    [setDeletedFiles, deletedFiles],
+  );
 
   return (
     <div class="make-journal-entries">
@@ -249,19 +299,22 @@ function MakeJournalEntriesForm({
         <MakeJournalEntriesTable
           initialValues={initialValues}
           formik={formik}
-          defaultRow={defaultEntry} />
+          defaultRow={defaultEntry}
+        />
 
         <MakeJournalEntriesFooter
           formik={formik}
           onSubmitClick={handleSubmitClick}
-          onCancelClick={handleCancelClick} />
+          onCancelClick={handleCancelClick}
+        />
       </form>
 
       <Dragzone
         initialFiles={initialAttachmentFiles}
         onDrop={handleDropFiles}
         onDeleteFile={handleDeleteFile}
-        hint={'Attachments: Maxiumum size: 20MB'} />
+        hint={'Attachments: Maxiumum size: 20MB'}
+      />
     </div>
   );
 }
@@ -272,4 +325,4 @@ export default compose(
   withAccountsActions,
   withDashboardActions,
   MediaConnect,
-)(MakeJournalEntriesForm);
\ No newline at end of file
+)(MakeJournalEntriesForm);
diff --git a/client/src/containers/Accounting/MakeJournalEntriesHeader.js b/client/src/containers/Accounting/MakeJournalEntriesHeader.js
index 7b4d4d839..c73a58bd1 100644
--- a/client/src/containers/Accounting/MakeJournalEntriesHeader.js
+++ b/client/src/containers/Accounting/MakeJournalEntriesHeader.js
@@ -54,7 +54,7 @@ export default function MakeJournalEntriesHeader({
             minimal={true}>
 
             <DateInput
-              {...momentFormatter('YYYY/MM/DD')}
+              {...momentFormatter('YYYY-MM-DD')}
               defaultValue={new Date()}
               onChange={handleDateChange}
               popoverProps={{ position: Position.BOTTOM }} />
diff --git a/client/src/containers/Currencies/withCurrencies.js b/client/src/containers/Currencies/withCurrencies.js
index f672e6470..bc721acda 100644
--- a/client/src/containers/Currencies/withCurrencies.js
+++ b/client/src/containers/Currencies/withCurrencies.js
@@ -5,6 +5,7 @@ export default (mapState) => {
     const mapped = {
       currencies: state.currencies.data,
       currenciesList: Object.values(state.currencies.data),
+      currenciesLoading:state.currencies.loading,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };
diff --git a/client/src/containers/Dashboard/withDashboard.js b/client/src/containers/Dashboard/withDashboard.js
index 6c3ce2bf9..83b1ab0e8 100644
--- a/client/src/containers/Dashboard/withDashboard.js
+++ b/client/src/containers/Dashboard/withDashboard.js
@@ -10,7 +10,11 @@ const mapActionsToProps = (dispatch) => ({
   changePageSubtitle: (pageSubtitle) => dispatch({
     type: t.ALTER_DASHBOARD_PAGE_SUBTITLE, pageSubtitle,
   }),
-
+  changePreferencesPageTitle: (pageTitle) =>
+    dispatch({
+      type: 'CHANGE_PREFERENCES_PAGE_TITLE',
+      pageTitle,
+    }),
   setTopbarEditView: (id) => dispatch({
     type: t.SET_TOPBAR_EDIT_VIEW, id,
   }),
diff --git a/client/src/containers/Dialogs/AccountFormDialog.js b/client/src/containers/Dialogs/AccountFormDialog.js
index c68516872..8f9e16b60 100644
--- a/client/src/containers/Dialogs/AccountFormDialog.js
+++ b/client/src/containers/Dialogs/AccountFormDialog.js
@@ -28,8 +28,7 @@ import Icon from 'components/Icon';
 import ErrorMessage from 'components/ErrorMessage';
 import { fetchAccountTypes } from 'store/accounts/accounts.actions';
 
-
-import {ListSelect} from 'components';
+import { ListSelect } from 'components';
 
 function AccountFormDialog({
   name,
@@ -52,15 +51,18 @@ function AccountFormDialog({
 
   // #withDialog
   closeDialog,
-}) { 
+}) {
   const { formatMessage } = useIntl();
   const accountFormValidationSchema = Yup.object().shape({
-    name: Yup.string().required().label(formatMessage({id:'account_name_'})),
+    name: Yup.string()
+      .required()
+      .label(formatMessage({ id: 'account_name_' })),
     code: Yup.number(),
     account_type_id: Yup.string()
       .nullable()
-      .required().label(formatMessage({id:'account_type_id'})),
-    description: Yup.string().trim()
+      .required()
+      .label(formatMessage({ id: 'account_type_id' })),
+    description: Yup.string().trim(),
   });
 
   const initialValues = useMemo(
@@ -69,14 +71,14 @@ function AccountFormDialog({
       name: '',
       description: '',
     }),
-    []
+    [],
   );
 
   const [selectedAccountType, setSelectedAccountType] = useState(null);
   const [selectedSubaccount, setSelectedSubaccount] = useState(
     payload.action === 'new_child'
       ? accounts.find((a) => a.id === payload.id)
-      : null
+      : null,
   );
 
   const transformApiErrors = (errors) => {
@@ -96,48 +98,67 @@ function AccountFormDialog({
     validationSchema: accountFormValidationSchema,
     onSubmit: (values, { setSubmitting, setErrors }) => {
       const exclude = ['subaccount'];
-      const toastAccountName = (values.code) ? `${values.code} - ${values.name}` : values.name;
+      const toastAccountName = values.code
+        ? `${values.code} - ${values.name}`
+        : values.name;
 
       if (payload.action === 'edit') {
         requestEditAccount({
           payload: payload.id,
-          form: { ...omit(values, [...exclude, 'account_type_id']) }
+          form: { ...omit(values, [...exclude, 'account_type_id']) },
         }).then((response) => {
           closeDialog(name);
           AppToaster.show({
-            message: formatMessage({
-              id: 'service_has_been_successful_edited',
-            }, {
-              name: toastAccountName,
-              service: formatMessage({ id: 'account' }),
-            }),
+            message: formatMessage(
+              {
+                id: 'service_has_been_successful_edited',
+              },
+              {
+                name: toastAccountName,
+                service: formatMessage({ id: 'account' }),
+              },
+            ),
             intent: Intent.SUCCESS,
           });
         });
       } else {
-        requestSubmitAccount({ form: { ...omit(values, exclude) } }).then((response) => {
-          closeDialog(name);
-          AppToaster.show({
-            message: formatMessage({
-              id: 'service_has_been_successful_created',  
-            }, {
-              name: toastAccountName,
-              service: formatMessage({ id: 'account' }),
-            }),
-            intent: Intent.SUCCESS,
-            position: Position.BOTTOM,
-          });
-        });
+        requestSubmitAccount({ form: { ...omit(values, exclude) } }).then(
+          (response) => {
+            closeDialog(name);
+            AppToaster.show({
+              message: formatMessage(
+                {
+                  id: 'service_has_been_successful_created',
+                },
+                {
+                  name: toastAccountName,
+                  service: formatMessage({ id: 'account' }),
+                },
+              ),
+              intent: Intent.SUCCESS,
+              position: Position.BOTTOM,
+            });
+          },
+        );
       }
     },
   });
   const { errors, values, touched } = useMemo(() => formik, [formik]);
 
+  // const filteredAccounts = accounts.filter(
+  //   (account) => account.accountTypeId === formik.values.account_type_id,
+  // );
+
+  const filteredAccounts = accounts.filter((account) => {
+    return account.account_type_id === values.account_type_id;
+  });
+  console.log(filteredAccounts, 'ERR');
+  console.log(accounts,'ER/u');
   // Set default account type.
   useEffect(() => {
     if (account && account.account_type_id) {
       const defaultType = accountsTypes.find(
-        (t) => t.id === account.account_type_id
+        (t) => t.id === account.account_type_id,
       );
 
       defaultType && setSelectedAccountType(defaultType);
@@ -187,7 +208,7 @@ function AccountFormDialog({
         );
       }
     },
-    []
+    [],
   );
 
   // Handles dialog close.
@@ -199,7 +220,7 @@ function AccountFormDialog({
   const fetchAccountsList = useQuery(
     'accounts-list',
     () => requestFetchAccounts(),
-    { manual: true }
+    { manual: true },
   );
 
   // Fetches accounts types.
@@ -208,14 +229,14 @@ function AccountFormDialog({
     async () => {
       await requestFetchAccountTypes();
     },
-    { manual: true }
+    { manual: true },
   );
 
   // Fetch the given account id on edit mode.
   const fetchAccount = useQuery(
     payload.action === 'edit' && ['account', payload.id],
     (key, id) => requestFetchAccount(id),
-    { manual: true }
+    { manual: true },
   );
 
   const isFetching =
@@ -228,13 +249,13 @@ function AccountFormDialog({
     fetchAccountsList.refetch();
     fetchAccountsTypes.refetch();
     fetchAccount.refetch();
-  }, [ fetchAccount, fetchAccountsList, fetchAccountsTypes]);
+  }, [fetchAccount, fetchAccountsList, fetchAccountsTypes]);
 
   const onChangeAccountType = useCallback(
     (accountType) => {
       formik.setFieldValue('account_type_id', accountType.id);
     },
-    [formik]
+    [formik],
   );
 
   // Handles change sub-account.
@@ -243,7 +264,7 @@ function AccountFormDialog({
       setSelectedSubaccount(account);
       formik.setFieldValue('parent_account_id', account.id);
     },
-    [setSelectedSubaccount, formik]
+    [setSelectedSubaccount, formik],
   );
 
   const onDialogClosed = useCallback(() => {
@@ -252,22 +273,28 @@ function AccountFormDialog({
     setSelectedAccountType(null);
   }, [formik]);
 
-  const infoIcon = useMemo(() => <Icon icon='info-circle' iconSize={12} />, []);
+  const infoIcon = useMemo(() => <Icon icon="info-circle" iconSize={12} />, []);
 
   const subAccountLabel = useMemo(() => {
     return (
       <span>
-        <T id={'sub_account'}/> <Icon icon='info-circle' iconSize={12} />
+        <T id={'sub_account'} /> <Icon icon="info-circle" iconSize={12} />
       </span>
     );
   }, []);
 
-  const requiredSpan = useMemo(() => <span class='required'>*</span>, []);
+  const requiredSpan = useMemo(() => <span class="required">*</span>, []);
 
   return (
     <Dialog
       name={name}
-      title={payload.action === 'edit' ? <T id={'edit_account'}/> : <T id={'new_account'}/>}
+      title={
+        payload.action === 'edit' ? (
+          <T id={'edit_account'} />
+        ) : (
+          <T id={'new_account'} />
+        )
+      }
       className={{
         'dialog--loading': isFetching,
         'dialog--account-form': true,
@@ -283,41 +310,40 @@ function AccountFormDialog({
       <form onSubmit={formik.handleSubmit}>
         <div className={Classes.DIALOG_BODY}>
           <FormGroup
-            label={<T id={'account_type'}/>}
+            label={<T id={'account_type'} />}
             labelInfo={requiredSpan}
             className={classNames(
               'form-group--account-type',
               'form-group--select-list',
-              Classes.FILL
+              Classes.FILL,
             )}
             inline={true}
-            helperText={<ErrorMessage name='account_type_id' {...formik} />}
+            helperText={<ErrorMessage name="account_type_id" {...formik} />}
             intent={
               errors.account_type_id && touched.account_type_id && Intent.DANGER
             }
           >
             <ListSelect
               items={accountsTypes}
-              noResults={<MenuItem disabled={true} text='No results.' />}
+              noResults={<MenuItem disabled={true} text="No results." />}
               itemRenderer={accountTypeItem}
               itemPredicate={filterAccountTypeItems}
               popoverProps={{ minimal: true }}
               onItemSelect={onChangeAccountType}
-
               selectedItem={formik.values.account_type_id}
               selectedItemProp={'id'}
-              
               defaultText={<T id={'select_account_type'} />}
               labelProp={'name'}
-              buttonProps={{ disabled: payload.action === 'edit' }} />
+              buttonProps={{ disabled: payload.action === 'edit' }}
+            />
           </FormGroup>
 
           <FormGroup
-            label={<T id={'account_name'}/>}
+            label={<T id={'account_name'} />}
             labelInfo={requiredSpan}
             className={'form-group--account-name'}
             intent={errors.name && touched.name && Intent.DANGER}
-            helperText={<ErrorMessage name='name' {...formik} />}
+            helperText={<ErrorMessage name="name" {...formik} />}
             inline={true}
           >
             <InputGroup
@@ -328,10 +354,10 @@ function AccountFormDialog({
           </FormGroup>
 
           <FormGroup
-            label={<T id={'account_code'}/>}
+            label={<T id={'account_code'} />}
             className={'form-group--account-code'}
             intent={errors.code && touched.code && Intent.DANGER}
-            helperText={<ErrorMessage name='code' {...formik} />}
+            helperText={<ErrorMessage name="code" {...formik} />}
             inline={true}
             labelInfo={infoIcon}
           >
@@ -356,37 +382,31 @@ function AccountFormDialog({
 
           {values.subaccount && (
             <FormGroup
-              label={<T id={'parent_account'}/>}
+              label={<T id={'parent_account'} />}
               className={classNames(
                 'form-group--parent-account',
                 'form-group--select-list',
-                Classes.FILL
+                Classes.FILL,
               )}
               inline={true}
             >
-              <Select
-                items={accounts}
-                noResults={<MenuItem disabled={true} text='No results.' />}
+              <ListSelect
+                items={filteredAccounts}
+                noResults={<MenuItem disabled={true} text="No results." />}
                 itemRenderer={accountItem}
                 itemPredicate={filterAccountsPredicater}
                 popoverProps={{ minimal: true }}
                 onItemSelect={onChangeSubaccount}
-                {...formik.getFieldProps('parent_account_id')}
-              >
-                <Button
-                  rightIcon='caret-down'
-                  text={
-                    selectedSubaccount
-                      ? selectedSubaccount.name
-                      : <T id={'select_parent_account'}/>
-                  }
-                />
-              </Select>
+                selectedItem={formik.values.parent_account_id}
+                selectedItemProp={'id'}
+                defaultText={<T id={'select_parent_account'} />}
+                labelProp={'name'}
+              />
             </FormGroup>
           )}
 
           <FormGroup
-            label={<T id={'description'}/>}
+            label={<T id={'description'} />}
             className={'form-group--description'}
             intent={formik.errors.description && Intent.DANGER}
             helperText={formik.errors.description && formik.errors.credential}
@@ -402,13 +422,19 @@ function AccountFormDialog({
 
         <div className={Classes.DIALOG_FOOTER}>
           <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-            <Button onClick={handleClose}><T id={'close'}/></Button>
+            <Button onClick={handleClose}>
+              <T id={'close'} />
+            </Button>
             <Button
               intent={Intent.PRIMARY}
               disabled={formik.isSubmitting}
-              type='submit'
+              type="submit"
             >
-              {payload.action === 'edit' ? <T id={'edit'}/> : <T id={'submit'}/>}
+              {payload.action === 'edit' ? (
+                <T id={'edit'} />
+              ) : (
+                <T id={'submit'} />
+              )}
             </Button>
           </div>
         </div>
diff --git a/client/src/containers/Dialogs/CurrencyDialog.js b/client/src/containers/Dialogs/CurrencyDialog.js
index 1bd8ed1a2..e43224f98 100644
--- a/client/src/containers/Dialogs/CurrencyDialog.js
+++ b/client/src/containers/Dialogs/CurrencyDialog.js
@@ -9,11 +9,10 @@ import {
 import * as Yup from 'yup';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { useFormik } from 'formik';
-import { useQuery } from 'react-query';
+import { useQuery, queryCache } from 'react-query';
 import { connect } from 'react-redux';
 import { pick } from 'lodash';
 
-
 import AppToaster from 'components/AppToaster';
 import Dialog from 'components/Dialog';
 import DialogReduxConnect from 'components/DialogReduxConnect';
@@ -27,8 +26,6 @@ import withCurrenciesActions from 'containers/Currencies/withCurrenciesActions';
 
 import { compose } from 'utils';
 
-
-
 function CurrencyDialog({
   name,
   payload,
@@ -46,18 +43,28 @@ function CurrencyDialog({
   requestSubmitCurrencies,
   requestEditCurrency,
 }) {
-  const {formatMessage} = useIntl();
+  const { formatMessage } = useIntl();
+
+    const fetchCurrencies = useQuery('currencies', () =>
+    requestFetchCurrencies(),
+  );
 
   const validationSchema = Yup.object().shape({
-    currency_name: Yup.string().required().label(formatMessage({id:'currency_name_'})),
+    currency_name: Yup.string()
+      .required()
+      .label(formatMessage({ id: 'currency_name_' })),
     currency_code: Yup.string()
       .max(4)
-      .required().label(formatMessage({id:'currency_code_'})),
+      .required()
+      .label(formatMessage({ id: 'currency_code_' })),
   });
-  const initialValues = useMemo(() => ({
-    currency_name: '',
-    currency_code: '',
-  }), []);
+  const initialValues = useMemo(
+    () => ({
+      currency_name: '',
+      currency_code: '',
+    }),
+    [],
+  );
 
   const {
     errors,
@@ -75,29 +82,37 @@ function CurrencyDialog({
     validationSchema: validationSchema,
     onSubmit: (values, { setSubmitting }) => {
       if (payload.action === 'edit') {
-        requestEditCurrency(currency.id, values).then((response) => {
-          closeDialog(name);
-          AppToaster.show({
-            message: formatMessage({id:'the_currency_has_been_successfully_edited'}),
-            intent: Intent.SUCCESS,
+        requestEditCurrency(currency.id, values)
+          .then((response) => {
+            closeDialog(name);
+            AppToaster.show({
+              message: formatMessage({
+                id: 'the_currency_has_been_successfully_edited',
+              }),
+              intent: Intent.SUCCESS,
+            });
+            setSubmitting(false);
+            queryCache.refetchQueries('currencies', { force: true });
+          })
+          .catch((error) => {
+            setSubmitting(false);
           });
-          setSubmitting(false);
-        })
-        .catch((error) => {
-          setSubmitting(false);
-        });
       } else {
-        requestSubmitCurrencies(values).then((response) => {
-          closeDialog(name);
-          AppToaster.show({
-            message: formatMessage({id:'the_currency_has_been_successfully_created'}),
-            intent: Intent.SUCCESS,
+        requestSubmitCurrencies(values)
+          .then((response) => {
+            closeDialog(name);
+            AppToaster.show({
+              message: formatMessage({
+                id: 'the_currency_has_been_successfully_created',
+              }),
+              intent: Intent.SUCCESS,
+            });
+            setSubmitting(false);
+            queryCache.refetchQueries('currencies', { force: true });
+          })
+          .catch((error) => {
+            setSubmitting(false);
           });
-          setSubmitting(false);
-        })
-        .catch((error) => {
-          setSubmitting(false);
-        });
       }
     },
   });
@@ -106,10 +121,6 @@ function CurrencyDialog({
     closeDialog(name);
   }, [name, closeDialog]);
 
-  const fetchCurrencies = useQuery('currencies',
-    () => { requestFetchCurrencies(); },
-    { manual: true });
-
   const onDialogOpening = useCallback(() => {
     fetchCurrencies.refetch();
   }, [fetchCurrencies]);
@@ -117,19 +128,25 @@ function CurrencyDialog({
   const onDialogClosed = useCallback(() => {
     resetForm();
     closeDialog(name);
-  }, [closeDialog, name,resetForm]);
+  }, [closeDialog, name, resetForm]);
 
   const requiredSpan = useMemo(() => <span className={'required'}>*</span>, []);
 
   return (
     <Dialog
       name={name}
-      title={payload.action === 'edit' ? <T id={'edit_currency'}/> : <T id={'new_currency'}/>}
+      title={
+        payload.action === 'edit' ? (
+          <T id={'edit_currency'} />
+        ) : (
+          <T id={'new_currency'} />
+        )
+      }
       className={classNames(
         {
           'dialog--loading': fetchCurrencies.isFetching,
         },
-        'dialog--currency-form'
+        'dialog--currency-form',
       )}
       isOpen={isOpen}
       onClosed={onDialogClosed}
@@ -140,31 +157,43 @@ function CurrencyDialog({
       <form onSubmit={handleSubmit}>
         <div className={Classes.DIALOG_BODY}>
           <FormGroup
-            label={<T id={'currency_name'}/>}
+            label={<T id={'currency_name'} />}
             labelInfo={requiredSpan}
             className={'form-group--currency-name'}
-            intent={(errors.currency_name && touched.currency_name) && Intent.DANGER}
-            helperText={<ErrorMessage name='currency_name' {...{errors, touched}} />}
+            intent={
+              errors.currency_name && touched.currency_name && Intent.DANGER
+            }
+            helperText={
+              <ErrorMessage name="currency_name" {...{ errors, touched }} />
+            }
             inline={true}
           >
             <InputGroup
               medium={true}
-              intent={(errors.currency_name && touched.currency_name) && Intent.DANGER}
+              intent={
+                errors.currency_name && touched.currency_name && Intent.DANGER
+              }
               {...getFieldProps('currency_name')}
             />
           </FormGroup>
 
           <FormGroup
-            label={<T id={'currency_code'}/>}
+            label={<T id={'currency_code'} />}
             labelInfo={requiredSpan}
             className={'form-group--currency-code'}
-            intent={(errors.currency_code && touched.currency_code) && Intent.DANGER}
-            helperText={<ErrorMessage name='currency_code' {...{errors, touched}} />}
+            intent={
+              errors.currency_code && touched.currency_code && Intent.DANGER
+            }
+            helperText={
+              <ErrorMessage name="currency_code" {...{ errors, touched }} />
+            }
             inline={true}
           >
             <InputGroup
               medium={true}
-              intent={(errors.currency_code && touched.currency_code) && Intent.DANGER}
+              intent={
+                errors.currency_code && touched.currency_code && Intent.DANGER
+              }
               {...getFieldProps('currency_code')}
             />
           </FormGroup>
@@ -172,9 +201,19 @@ function CurrencyDialog({
 
         <div className={Classes.DIALOG_FOOTER}>
           <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-            <Button onClick={handleClose}><T id={'cancel'} /></Button>
-            <Button intent={Intent.PRIMARY} type='submit' disabled={isSubmitting}>
-              {payload.action === 'edit' ? <T id={'edit'} /> : <T id={'submit'} /> }
+            <Button onClick={handleClose}>
+              <T id={'cancel'} />
+            </Button>
+            <Button
+              intent={Intent.PRIMARY}
+              type="submit"
+              disabled={isSubmitting}
+            >
+              {payload.action === 'edit' ? (
+                <T id={'edit'} />
+              ) : (
+                <T id={'submit'} />
+              )}
             </Button>
           </div>
         </div>
@@ -190,8 +229,8 @@ const mapStateToProps = (state, props) => {
     name: 'currency-form',
     payload: { action: 'new', currencyCode: null, ...dialogPayload },
     currencyCode: dialogPayload?.currencyCode || null,
-  }
-}
+  };
+};
 
 const withCurrencyFormDialog = connect(mapStateToProps);
 
diff --git a/client/src/containers/Dialogs/ExchangeRateDialog.js b/client/src/containers/Dialogs/ExchangeRateDialog.js
index 810faabb2..4df64e802 100644
--- a/client/src/containers/Dialogs/ExchangeRateDialog.js
+++ b/client/src/containers/Dialogs/ExchangeRateDialog.js
@@ -12,20 +12,19 @@ import { pick } from 'lodash';
 import * as Yup from 'yup';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { useFormik } from 'formik';
-import { Select } from '@blueprintjs/select';
-import { useQuery } from 'react-query';
+import { useQuery, queryCache } from 'react-query';
 import moment from 'moment';
 import { DateInput } from '@blueprintjs/datetime';
 import { momentFormatter } from 'utils';
 
 import AppToaster from 'components/AppToaster';
+
 import Dialog from 'components/Dialog';
 import ErrorMessage from 'components/ErrorMessage';
 import classNames from 'classnames';
-
+import { ListSelect } from 'components';
 import withExchangeRatesDialog from './ExchangeRateDialog.container';
 
-
 function ExchangeRateDialog({
   name,
   payload,
@@ -43,24 +42,37 @@ function ExchangeRateDialog({
   requestEditExchangeRate,
   requestFetchCurrencies,
   editExchangeRate,
-
 }) {
   const { formatMessage } = useIntl();
   const [selectedItems, setSelectedItems] = useState({});
 
   const validationSchema = Yup.object().shape({
-    exchange_rate: Yup.number().required().label(formatMessage({id:'exchange_rate_'})),
-    currency_code: Yup.string().max(3).required(formatMessage({id:'currency_code_'})),
-    date: Yup.date().required().label(formatMessage({id:'date'})),
+    exchange_rate: Yup.number()
+      .required()
+      .label(formatMessage({ id: 'exchange_rate_' })),
+    currency_code: Yup.string()
+      .max(3)
+      .required(formatMessage({ id: 'currency_code_' })),
+    date: Yup.date()
+      .required()
+      .label(formatMessage({ id: 'date' })),
   });
 
-  const initialValues = useMemo(() => ({
-    exchange_rate: '',
-    currency_code: '',
-    date: moment(new Date()).format('YYYY-MM-DD'),
-  }), []);
+  const initialValues = useMemo(
+    () => ({
+      exchange_rate: '',
+      currency_code: '',
+      date: moment(new Date()).format('YYYY-MM-DD'),
+    }),
+    [],
+  );
+
+  const fetchExchangeRatesDialog = useQuery('exchange-rates-dialog', () =>
+    requestFetchExchangeRates(),
+  );
 
   const {
+    values,
     touched,
     errors,
     isSubmitting,
@@ -75,15 +87,19 @@ function ExchangeRateDialog({
       ...(payload.action === 'edit' &&
         pick(editExchangeRate, Object.keys(initialValues))),
     },
-    onSubmit: (values, { setSubmitting }) => {
+    onSubmit: (values, { setSubmitting, setErrors }) => {
       if (payload.action === 'edit') {
         requestEditExchangeRate(payload.id, values)
           .then((response) => {
             closeDialog(name);
             AppToaster.show({
-              message: formatMessage({id:'the_exchange_rate_has_been_successfully_edited'})
+              message: formatMessage({
+                id: 'the_exchange_rate_has_been_successfully_edited',
+              }),
+              intent: Intent.SUCCESS,
             });
             setSubmitting(false);
+            queryCache.removeQueries('exchange-rates-dialog', { force: true });
           })
           .catch((error) => {
             setSubmitting(false);
@@ -93,30 +109,40 @@ function ExchangeRateDialog({
           .then((response) => {
             closeDialog(name);
             AppToaster.show({
-              message: formatMessage({id:'the_exchange_rate_has_been_successfully_created'})
+              message: formatMessage({
+                id: 'the_exchange_rate_has_been_successfully_created',
+              }),
+              intent: Intent.SUCCESS,
             });
             setSubmitting(false);
+            queryCache.refetchQueries('exchange-rates-table', { force: true });
           })
-          .catch((error) => {
-            setSubmitting(false);
+          .catch((errors) => {
+            if (
+              errors.find((e) => e.type === 'EXCHANGE.RATE.DATE.PERIOD.DEFINED')
+            ) {
+              setErrors({
+                exchange_rate: formatMessage({
+                  id:
+                    'there_is_exchange_rate_in_this_date_with_the_same_currency',
+                }),
+              });
+            }
           });
       }
     },
   });
 
-  const requiredSpan = useMemo(() => <span class='required'>*</span>, []);
+  const requiredSpan = useMemo(() => <span class="required">*</span>, []);
 
   const handleClose = useCallback(() => {
     closeDialog(name);
   }, [name, closeDialog]);
 
-  const fetchExchangeRatesDialog = useQuery('exchange-rates-dialog',
-    () => requestFetchExchangeRates());
-
   const onDialogClosed = useCallback(() => {
     resetForm();
     closeDialog(name);
-  }, [closeDialog, name,resetForm]);
+  }, [closeDialog, name, resetForm]);
 
   const onDialogOpening = useCallback(() => {
     fetchExchangeRatesDialog.refetch();
@@ -127,7 +153,7 @@ function ExchangeRateDialog({
       const formatted = moment(date).format('YYYY-MM-DD');
       setFieldValue('date', formatted);
     },
-    [setFieldValue]
+    [setFieldValue],
   );
 
   const onItemsSelect = useCallback(
@@ -140,19 +166,19 @@ function ExchangeRateDialog({
         setFieldValue(filedName, filed.currency_code);
       };
     },
-    [setFieldValue, selectedItems]
+    [setFieldValue, selectedItems],
   );
 
-  const filterCurrencyCode = (query, currency_code, _index, exactMatch) => {
-    const normalizedTitle = currency_code.currency_code.toLowerCase();
+  const filterCurrencyCode = (query, currency, _index, exactMatch) => {
+    const normalizedTitle = currency.currency_code.toLowerCase();
     const normalizedQuery = query.toLowerCase();
 
     if (exactMatch) {
       return normalizedTitle === normalizedQuery;
     } else {
       return (
-        `${currency_code.currency_code} ${normalizedTitle}`.indexOf(
-          normalizedQuery
+        `${currency.currency_code} ${normalizedTitle}`.indexOf(
+          normalizedQuery,
         ) >= 0
       );
     }
@@ -169,20 +195,19 @@ function ExchangeRateDialog({
     );
   }, []);
 
-  const getSelectedItemLabel = useCallback((fieldName, defaultLabel) => {
-    return typeof selectedItems[fieldName] !== 'undefined'
-      ? selectedItems[fieldName].currency_code
-      : defaultLabel;
-  }, [selectedItems]);
-
   return (
     <Dialog
       name={name}
-      title={payload.action === 'edit'
-        ? <T id={'edit_exchange_rate'}/> : <T id={'new_exchange_rate'}/>}
+      title={
+        payload.action === 'edit' ? (
+          <T id={'edit_exchange_rate'} />
+        ) : (
+          <T id={'new_exchange_rate'} />
+        )
+      }
       className={classNames(
-        {'dialog--loading': fetchExchangeRatesDialog.isFetching},
-        'dialog--exchangeRate-form'
+        { 'dialog--loading': fetchExchangeRatesDialog.isFetching },
+        'dialog--exchangeRate-form',
       )}
       isOpen={isOpen}
       onClosed={onDialogClosed}
@@ -193,11 +218,11 @@ function ExchangeRateDialog({
       <form onSubmit={handleSubmit}>
         <div className={Classes.DIALOG_BODY}>
           <FormGroup
-            label={<T id={'date'}/>}
+            label={<T id={'date'} />}
             inline={true}
             labelInfo={requiredSpan}
             intent={errors.date && touched.date && Intent.DANGER}
-            helperText={<ErrorMessage name='date' {...{errors, touched}} />}
+            helperText={<ErrorMessage name="date" {...{ errors, touched }} />}
           >
             <DateInput
               fill={true}
@@ -205,56 +230,71 @@ function ExchangeRateDialog({
               defaultValue={new Date()}
               onChange={handleDateChange}
               popoverProps={{ position: Position.BOTTOM }}
-              // disabled={payload.action === 'edit'}
+              disabled={payload.action === 'edit'}
             />
           </FormGroup>
 
           <FormGroup
-            label={<T id={'exchange_rate'}/>}
+            label={<T id={'exchange_rate'} />}
             labelInfo={requiredSpan}
-            intent={errors.exchange_rate && touched.exchange_rate && Intent.DANGER}
-            helperText={<ErrorMessage name='exchange_rate' {...{errors, touched}} />}
+            intent={
+              errors.exchange_rate && touched.exchange_rate && Intent.DANGER
+            }
+            helperText={
+              <ErrorMessage name="exchange_rate" {...{ errors, touched }} />
+            }
             inline={true}
           >
             <InputGroup
               medium={true}
-              intent={errors.exchange_rate && touched.exchange_rate && Intent.DANGER}
+              intent={
+                errors.exchange_rate && touched.exchange_rate && Intent.DANGER
+              }
               {...getFieldProps('exchange_rate')}
             />
           </FormGroup>
 
           <FormGroup
-            label={<T id={'currency_code'}/>}
+            label={<T id={'currency_code'} />}
             labelInfo={requiredSpan}
             className={classNames('form-group--select-list', Classes.FILL)}
             inline={true}
-            intent={(errors.currency_code && touched.currency_code) && Intent.DANGER}
-            helperText={<ErrorMessage name='currency_code' {...{errors, touched}} />}
+            intent={
+              errors.currency_code && touched.currency_code && Intent.DANGER
+            }
+            helperText={
+              <ErrorMessage name="currency_code" {...{ errors, touched }} />
+            }
           >
-            <Select
+            <ListSelect
               items={currenciesList}
-              noResults={<MenuItem disabled={true} text='No results.' />}
+              noResults={<MenuItem disabled={true} text="No results." />}
               itemRenderer={currencyCodeRenderer}
               itemPredicate={filterCurrencyCode}
               popoverProps={{ minimal: true }}
               onItemSelect={onItemsSelect('currency_code')}
-            >
-              <Button
-                rightIcon='caret-down'
-                fill={true}
-                text={getSelectedItemLabel(
-                  'currency_code',
-                  'select Currency Code'
-                )}
-              />
-            </Select>
+              selectedItem={values.currency_code}
+              selectedItemProp={'currency_code'}
+              defaultText={<T id={'select_currency_code'} />}
+              labelProp={'currency_code'}
+            />
           </FormGroup>
         </div>
         <div className={Classes.DIALOG_FOOTER}>
           <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-            <Button onClick={handleClose}><T id={'close'}/></Button>
-            <Button intent={Intent.PRIMARY} type='submit' disabled={isSubmitting}>
-            {payload.action === 'edit' ? <T id={'edit'}/> : <T id={'submit'}/>}
+            <Button onClick={handleClose}>
+              <T id={'close'} />
+            </Button>
+            <Button
+              intent={Intent.PRIMARY}
+              type="submit"
+              disabled={isSubmitting}
+            >
+              {payload.action === 'edit' ? (
+                <T id={'edit'} />
+              ) : (
+                <T id={'submit'} />
+              )}
             </Button>
           </div>
         </div>
diff --git a/client/src/containers/Dialogs/InviteUserDialog.js b/client/src/containers/Dialogs/InviteUserDialog.js
index 999473e3e..920a913ee 100644
--- a/client/src/containers/Dialogs/InviteUserDialog.js
+++ b/client/src/containers/Dialogs/InviteUserDialog.js
@@ -41,12 +41,19 @@ function InviteUserDialog({
   }, false);
 
   const validationSchema = Yup.object().shape({
-    first_name: Yup.string().required().label(formatMessage({id:'first_name_'})),
-    last_name: Yup.string().required().label(formatMessage({id:'last_name_'})),
+    first_name: Yup.string()
+      .required()
+      .label(formatMessage({ id: 'first_name_' })),
+    last_name: Yup.string()
+      .required()
+      .label(formatMessage({ id: 'last_name_' })),
     email: Yup.string()
       .email()
-      .required().label(formatMessage({id:'email'})),
-    phone_number: Yup.number().required().label(formatMessage({id:'phone_number_'})),
+      .required()
+      .label(formatMessage({ id: 'email' })),
+    phone_number: Yup.number()
+      .required()
+      .label(formatMessage({ id: 'phone_number_' })),
   });
 
   const initialValues = useMemo(
@@ -56,7 +63,7 @@ function InviteUserDialog({
       email: '',
       phone_number: '',
     }),
-    []
+    [],
   );
 
   const formik = useFormik({
@@ -65,7 +72,7 @@ function InviteUserDialog({
       ...(payload.action === 'edit' &&
         pick(
           objectKeysTransform(payload.user, snakeCase),
-          Object.keys(initialValues)
+          Object.keys(initialValues),
         )),
     },
     validationSchema,
@@ -78,10 +85,13 @@ function InviteUserDialog({
           .then((response) => {
             closeDialog(name);
             AppToaster.show({
-              message: formatMessage({id:'the_user_details_has_been_updated'}),
+              message: formatMessage({
+                id: 'the_user_details_has_been_updated',
+              }),
+              intent: Intent.SUCCESS,
             });
             setSubmitting(false);
-            queryCache.refetchQueries('users-table',{force:true})
+            queryCache.refetchQueries('users-table', { force: true });
           })
           .catch((error) => {
             setSubmitting(false);
@@ -99,10 +109,10 @@ function InviteUserDialog({
     formik.resetForm();
   }, [formik.resetForm]);
 
- // Handles dialog close.
- const handleClose = useCallback(() => {
-  closeDialog(name);
-}, [closeDialog, name]);
+  // Handles dialog close.
+  const handleClose = useCallback(() => {
+    closeDialog(name);
+  }, [closeDialog, name]);
 
   return (
     <Dialog
@@ -126,7 +136,7 @@ function InviteUserDialog({
             label={<T id={'first_name'} />}
             className={'form-group--first-name'}
             intent={errors.first_name && touched.first_name && Intent.DANGER}
-            helperText={<ErrorMessage name='first_name' {...formik} />}
+            helperText={<ErrorMessage name="first_name" {...formik} />}
             inline={true}
           >
             <InputGroup
@@ -139,7 +149,7 @@ function InviteUserDialog({
             label={<T id={'last_name'} />}
             className={'form-group--last-name'}
             intent={errors.last_name && touched.last_name && Intent.DANGER}
-            helperText={<ErrorMessage name='last_name' {...formik} />}
+            helperText={<ErrorMessage name="last_name" {...formik} />}
             inline={true}
           >
             <InputGroup
@@ -152,7 +162,7 @@ function InviteUserDialog({
             label={<T id={'email'} />}
             className={'form-group--email'}
             intent={errors.email && touched.email && Intent.DANGER}
-            helperText={<ErrorMessage name='email' {...formik} />}
+            helperText={<ErrorMessage name="email" {...formik} />}
             inline={true}
           >
             <InputGroup
@@ -168,7 +178,7 @@ function InviteUserDialog({
             intent={
               errors.phone_number && touched.phone_number && Intent.DANGER
             }
-            helperText={<ErrorMessage name='phone_number' {...formik} />}
+            helperText={<ErrorMessage name="phone_number" {...formik} />}
             inline={true}
           >
             <InputGroup
@@ -182,9 +192,15 @@ function InviteUserDialog({
 
         <div className={Classes.DIALOG_FOOTER}>
           <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-            <Button onClick={handleClose}><T id={'close'}/></Button>
-            <Button intent={Intent.PRIMARY} type='submit' disabled={formik.isSubmitting} >
-              {payload.action === 'edit' ? <T id={'edit'}/> : ''}
+            <Button onClick={handleClose}>
+              <T id={'close'} />
+            </Button>
+            <Button
+              intent={Intent.PRIMARY}
+              type="submit"
+              disabled={formik.isSubmitting}
+            >
+              {payload.action === 'edit' ? <T id={'edit'} /> : ''}
             </Button>
           </div>
         </div>
@@ -195,5 +211,5 @@ function InviteUserDialog({
 
 export default compose(
   UserListDialogConnect,
-  DialogReduxConnect
+  DialogReduxConnect,
 )(InviteUserDialog);
diff --git a/client/src/containers/Dialogs/ItemCategoryDialog.js b/client/src/containers/Dialogs/ItemCategoryDialog.js
index 0dd751053..de9547d85 100644
--- a/client/src/containers/Dialogs/ItemCategoryDialog.js
+++ b/client/src/containers/Dialogs/ItemCategoryDialog.js
@@ -6,7 +6,7 @@ import {
   InputGroup,
   Intent,
   TextArea,
-  MenuItem
+  MenuItem,
 } from '@blueprintjs/core';
 import { Select } from '@blueprintjs/select';
 import { pick } from 'lodash';
@@ -16,10 +16,11 @@ import { useFormik } from 'formik';
 import { compose } from 'utils';
 import { useQuery, queryCache } from 'react-query';
 import classNames from 'classnames';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 
 import AppToaster from 'components/AppToaster';
 import ErrorMessage from 'components/ErrorMessage';
+import { ListSelect } from 'components';
 
 import Dialog from 'components/Dialog';
 import DialogConnect from 'connectors/Dialog.connector';
@@ -32,7 +33,6 @@ import withItemCategoriesActions from 'containers/Items/withItemCategoriesAction
 
 import Icon from 'components/Icon';
 
-
 function ItemCategoryDialog({
   name,
   payload,
@@ -57,23 +57,30 @@ function ItemCategoryDialog({
   const [selectedParentCategory, setParentCategory] = useState(null);
   const { formatMessage } = useIntl();
 
-  const fetchList = useQuery(['items-categories-list'],
-    () => requestFetchItemCategories());
+  const fetchList = useQuery(['items-categories-list'], () =>
+    requestFetchItemCategories(),
+  );
 
   const validationSchema = Yup.object().shape({
-    name: Yup.string().required().label(formatMessage({id:'category_name_'})),
+    name: Yup.string()
+      .required()
+      .label(formatMessage({ id: 'category_name_' })),
     parent_category_id: Yup.string().nullable(),
-    description: Yup.string().trim()
+    description: Yup.string().trim(),
   });
 
-  const initialValues = useMemo(() => ({
-    name: '',
-    description: '',
-    parent_category_id: null
-  }), []);
+  const initialValues = useMemo(
+    () => ({
+      name: '',
+      description: '',
+      parent_category_id: null,
+    }),
+    [],
+  );
 
   // Formik
   const {
+    values,
     errors,
     touched,
     setFieldValue,
@@ -85,24 +92,28 @@ function ItemCategoryDialog({
     enableReinitialize: true,
     initialValues: {
       ...(payload.action === 'edit' &&
-        pick(itemCategory, Object.keys(initialValues)))
+        pick(itemCategory, Object.keys(initialValues))),
     },
     validationSchema,
     onSubmit: (values, { setSubmitting }) => {
       if (payload.action === 'edit') {
-        requestEditItemCategory(payload.id, values).then(response => {
-          closeDialog(name);
-          AppToaster.show({
-            message: formatMessage({
-              id: 'the_item_category_has_been_successfully_edited',
-            }),
-            intent: Intent.SUCCESS,
+        requestEditItemCategory(payload.id, values)
+          .then((response) => {
+            closeDialog(name);
+            AppToaster.show({
+              message: formatMessage({
+                id: 'the_item_category_has_been_successfully_edited',
+              }),
+              intent: Intent.SUCCESS,
+            });
+            setSubmitting(false);
+            queryCache.refetchQueries('items-categories-table', {
+              force: true,
+            });
+          })
+          .catch((error) => {
+            setSubmitting(false);
           });
-          setSubmitting(false);
-          queryCache.refetchQueries('items-categories-table', { force: true });
-        }).catch((error) => {
-          setSubmitting(false);
-        });
       } else {
         requestSubmitItemCategory(values)
           .then((response) => {
@@ -114,60 +125,84 @@ function ItemCategoryDialog({
               intent: Intent.SUCCESS,
             });
             setSubmitting(false);
-            queryCache.refetchQueries('items-categories-table', { force: true });
+            queryCache.refetchQueries('items-categories-table', {
+              force: true,
+            });
           })
           .catch((error) => {
             setSubmitting(false);
           });
       }
-    }
+    },
   });
 
-  const filterItemCategory = useCallback((query, category, _index, exactMatch) => {
-    const normalizedTitle = category.name.toLowerCase();
-    const normalizedQuery = query.toLowerCase();
+  const filterItemCategory = useCallback(
+    (query, category, _index, exactMatch) => {
+      const normalizedTitle = category.name.toLowerCase();
+      const normalizedQuery = query.toLowerCase();
 
-    if (exactMatch) {
-      return normalizedTitle === normalizedQuery;
-    } else {
-      return normalizedTitle.indexOf(normalizedQuery) >= 0;
-    }
-  }, []);
+      if (exactMatch) {
+        return normalizedTitle === normalizedQuery;
+      } else {
+        return normalizedTitle.indexOf(normalizedQuery) >= 0;
+      }
+    },
+    [],
+  );
 
-  const parentCategoryItem = useCallback((category, { handleClick, modifiers, query }) => {
-    return (
-      <MenuItem text={category.name} key={category.id} onClick={handleClick} />
-    );
-  }, []);
+  const parentCategoryItem = useCallback(
+    (category, { handleClick, modifiers, query }) => {
+      return (
+        <MenuItem
+          text={category.name}
+          key={category.id}
+          onClick={handleClick}
+        />
+      );
+    },
+    [],
+  );
 
   // Handle the dialog closing.
-  const handleClose = useCallback(() => { closeDialog(name); }, [name, closeDialog]);
+  const handleClose = useCallback(() => {
+    closeDialog(name);
+  }, [name, closeDialog]);
 
   // Handle the dialog opening.
   const onDialogOpening = useCallback(() => {
     fetchList.refetch();
   }, [fetchList]);
 
-  const onChangeParentCategory = useCallback((parentCategory) => {
-    setParentCategory(parentCategory);
-    setFieldValue('parent_category_id', parentCategory.id);
-  }, [setFieldValue]);
+  const onChangeParentCategory = useCallback(
+    (parentCategory) => {
+      setParentCategory(parentCategory);
+      setFieldValue('parent_category_id', parentCategory.id);
+    },
+    [setFieldValue],
+  );
 
   const onDialogClosed = useCallback(() => {
     resetForm();
     closeDialog(name);
   }, [resetForm, closeDialog, name]);
 
-  const requiredSpan = useMemo(() => (<span class="required">*</span>), []);
-  const infoIcon = useMemo(() => (<Icon icon="info-circle" iconSize={12} />), []);
+  const requiredSpan = useMemo(() => <span class="required">*</span>, []);
+  const infoIcon = useMemo(() => <Icon icon="info-circle" iconSize={12} />, []);
 
   return (
     <Dialog
       name={name}
-      title={payload.action === 'edit' ? <T id={'edit_category'}/> : <T id={'new_category'}/>}
-      className={classNames({
-        'dialog--loading': fetchList.isFetching,
-      },
+      title={
+        payload.action === 'edit' ? (
+          <T id={'edit_category'} />
+        ) : (
+          <T id={'new_category'} />
+        )
+      }
+      className={classNames(
+        {
+          'dialog--loading': fetchList.isFetching,
+        },
         'dialog--category-form',
       )}
       isOpen={isOpen}
@@ -179,22 +214,22 @@ function ItemCategoryDialog({
       <form onSubmit={handleSubmit}>
         <div className={Classes.DIALOG_BODY}>
           <FormGroup
-            label={<T id={'category_name'}/>}
+            label={<T id={'category_name'} />}
             labelInfo={requiredSpan}
             className={'form-group--category-name'}
-            intent={(errors.name && touched.name) && Intent.DANGER}
-            helperText={(<ErrorMessage name="name" {...{ errors, touched }} />)}
+            intent={errors.name && touched.name && Intent.DANGER}
+            helperText={<ErrorMessage name="name" {...{ errors, touched }} />}
             inline={true}
           >
             <InputGroup
               medium={true}
-              intent={(errors.name && touched.name) && Intent.DANGER}
+              intent={errors.name && touched.name && Intent.DANGER}
               {...getFieldProps('name')}
             />
           </FormGroup>
 
           <FormGroup
-            label={<T id={'parent_category'}/>}
+            label={<T id={'parent_category'} />}
             labelInfo={infoIcon}
             className={classNames(
               'form-group--select-list',
@@ -202,29 +237,39 @@ function ItemCategoryDialog({
               Classes.FILL,
             )}
             inline={true}
-            helperText={(<ErrorMessage name="parent_category_id" {...{errors, touched}} />)}
-            intent={(errors.parent_category_id && touched.parent_category_id) && Intent.DANGER}
+            helperText={
+              <ErrorMessage
+                name="parent_category_id"
+                {...{ errors, touched }}
+              />
+            }
+            intent={
+              errors.parent_category_id &&
+              touched.parent_category_id &&
+              Intent.DANGER
+            }
           >
-            <Select
+            <ListSelect
               items={categoriesList}
-              noResults={<MenuItem disabled={true} text='No results.' />}
+              noResults={<MenuItem disabled={true} text="No results." />}
               itemRenderer={parentCategoryItem}
               itemPredicate={filterItemCategory}
               popoverProps={{ minimal: true }}
               onItemSelect={onChangeParentCategory}
-            >
-              <Button
-                text={selectedParentCategory
-                  ? selectedParentCategory.name : 'Select Parent Category'}
-              />
-            </Select>
+              selectedItem={values.parent_category_id}
+              selectedItemProp={'id'}
+              defaultText={<T id={'select_parent_category'} />}
+              labelProp={'name'}
+            />
           </FormGroup>
 
           <FormGroup
-            label={<T id={'description'}/>}
+            label={<T id={'description'} />}
             className={'form-group--description'}
-            intent={(errors.description && touched.description) && Intent.DANGER}
-            helperText={(<ErrorMessage name="description" {...{errors, touched}} />)}
+            intent={errors.description && touched.description && Intent.DANGER}
+            helperText={
+              <ErrorMessage name="description" {...{ errors, touched }} />
+            }
             inline={true}
           >
             <TextArea
@@ -237,9 +282,19 @@ function ItemCategoryDialog({
 
         <div className={Classes.DIALOG_FOOTER}>
           <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-            <Button onClick={handleClose}><T id={'close'}/></Button>
-            <Button intent={Intent.PRIMARY} type='submit' disabled={isSubmitting}>
-              {payload.action === 'edit' ? <T id={'edit'}/> : <T id={'submit'}/>}
+            <Button onClick={handleClose}>
+              <T id={'close'} />
+            </Button>
+            <Button
+              intent={Intent.PRIMARY}
+              type="submit"
+              disabled={isSubmitting}
+            >
+              {payload.action === 'edit' ? (
+                <T id={'edit'} />
+              ) : (
+                <T id={'submit'} />
+              )}
             </Button>
           </div>
         </div>
@@ -248,26 +303,25 @@ function ItemCategoryDialog({
   );
 }
 
-
 const mapStateToProps = (state, props) => {
   const dialogPayload = getDialogPayload(state, 'item-category-form');
 
   return {
     name: 'item-category-form',
-    payload: {action: 'new', id: null, ...dialogPayload},
+    payload: { action: 'new', id: null, ...dialogPayload },
     itemCategoryId: dialogPayload?.id || null,
   };
 };
 
 const withItemCategoryDialog = connect(mapStateToProps);
 
-export default compose( 
+export default compose(
   withItemCategoryDialog,
   DialogConnect,
   DialogReduxConnect,
   withItemCategoryDetail,
   withItemCategories(({ categoriesList }) => ({
-    categoriesList
+    categoriesList,
   })),
-  withItemCategoriesActions 
+  withItemCategoriesActions,
 )(ItemCategoryDialog);
diff --git a/client/src/containers/Dialogs/UserFormDialog.js b/client/src/containers/Dialogs/UserFormDialog.js
index ab24e3de2..a293e1002 100644
--- a/client/src/containers/Dialogs/UserFormDialog.js
+++ b/client/src/containers/Dialogs/UserFormDialog.js
@@ -13,6 +13,7 @@ import {
 import { objectKeysTransform } from 'utils';
 import { pick, snakeCase } from 'lodash';
 import classNames from 'classnames';
+import { queryCache, useQuery } from 'react-query';
 
 import AppToaster from 'components/AppToaster';
 import DialogReduxConnect from 'components/DialogReduxConnect';
@@ -30,12 +31,17 @@ function UserFormDialog({
   closeDialog,
 }) {
   const { formatMessage } = useIntl();
-  const fetchHook = useAsync(async () => {
-    await Promise.all([
-      ...(payload.action === 'edit' ? [requestFetchUser(payload.user.id)] : []),
-    ]);
-  }, false);
-
+  // const fetchHook = useAsync(async () => {
+  //   await Promise.all([
+  //     ...(payload.action === 'edit' ? [requestFetchUser(payload.user.id)] : []),
+  //   ]);
+  // }, false);
+ 
+    const fetchHook = useQuery(
+      payload.action === 'edit' && ['user-invite-table', payload.user.id],
+      (key, id) => requestFetchUser(id),
+      { manual: true }
+    );
   const validationSchema = Yup.object().shape({
     email: Yup.string()
       .email()
@@ -63,23 +69,30 @@ function UserFormDialog({
     enableReinitialize: true,
     initialValues,
     validationSchema,
-    onSubmit: (values) => {
+    onSubmit: (values,{setSubmitting}) => {
       const form = { ...values };
 
       requestSubmitInvite(form).then((response) => {
+        closeDialog(name);
         AppToaster.show({
           message: formatMessage({
             id: 'teammate_invited_to_organization_account',
           }),
           intent: Intent.SUCCESS,
         });
-        closeDialog(name);
-      });
+        setSubmitting(false);
+        queryCache.refetchQueries('users-table', { force: true });
+      }).catch((errors)=>{
+        setSubmitting(false)
+      })
     },
   });
-  const onDialogOpening = () => {
-    fetchHook.execute();
-  };
+
+  // Handle the dialog opening.
+const onDialogOpening =useCallback(()=>{
+fetchHook.refetch();
+},[fetchHook]);
+
 
   const onDialogClosed = useCallback(() => {
     resetForm();
@@ -104,6 +117,7 @@ function UserFormDialog({
         'dialog--loading': fetchHook.pending,
         'dialog--invite-form': true,
       })}
+      //
       autoFocus={true}
       canEscapeKeyClose={true}
       isOpen={isOpen}
diff --git a/client/src/containers/ExchangeRates/ExchangeRate.js b/client/src/containers/ExchangeRates/ExchangeRate.js
index aa9296931..af1a45e3b 100644
--- a/client/src/containers/ExchangeRates/ExchangeRate.js
+++ b/client/src/containers/ExchangeRates/ExchangeRate.js
@@ -1,8 +1,12 @@
-import React, { useEffect, useState, useCallback,useMemo } from 'react';
-import { useQuery } from 'react-query';
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
+import { useQuery, queryCache } from 'react-query';
 import { useParams } from 'react-router-dom';
 import { Alert, Intent } from '@blueprintjs/core';
-import { FormattedMessage as T, useIntl, FormattedHTMLMessage } from 'react-intl';
+import {
+  FormattedMessage as T,
+  useIntl,
+  FormattedHTMLMessage,
+} from 'react-intl';
 import AppToaster from 'components/AppToaster';
 
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
@@ -10,13 +14,13 @@ import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import ExchangeRateTable from './ExchangeRateTable';
 import ExchangeRateActionsBar from './ExchangeRateActionsBar';
 
+import withDialog from 'connectors/Dialog.connector';
 import withDashboardActions from 'containers/Dashboard/withDashboard';
 import withResourceActions from 'containers/Resources/withResourcesActions';
 import withExchangeRatesActions from 'containers/ExchangeRates/withExchangeRatesActions';
 
 import { compose } from 'utils';
 
-
 function ExchangeRate({
   // #withDashboard
   changePageTitle,
@@ -29,45 +33,56 @@ function ExchangeRate({
   requestDeleteExchangeRate,
   addExchangeRatesTableQueries,
   requestDeleteBulkExchangeRates,
-
+  // #withDialog
+  openDialog,
 }) {
   const { id } = useParams();
   const [deleteExchangeRate, setDeleteExchangeRate] = useState(false);
   const [selectedRows, setSelectedRows] = useState([]);
   const { formatMessage } = useIntl();
   const [bulkDelete, setBulkDelete] = useState(false);
+  const [filter, setFilter] = useState({});
 
-   const fetchExchangeRates = useQuery('exchange-rates-table',
-    () => requestFetchExchangeRates());
-
+  const fetchExchangeRates = useQuery('exchange-rates-table', () =>
+    requestFetchExchangeRates(),
+  );
 
   useEffect(() => {
     id
-      ? changePageTitle(formatMessage({id:'exchange_rate_details'}))
-      : changePageTitle(formatMessage({id:'exchange_rate_list'}));
-  }, [id, changePageTitle,formatMessage]);
+      ? changePageTitle(formatMessage({ id: 'exchange_rate_details' }))
+      : changePageTitle(formatMessage({ id: 'exchange_rate_list' }));
+  }, [id, changePageTitle, formatMessage]);
 
   const handelDeleteExchangeRate = useCallback(
     (exchange_rate) => {
       setDeleteExchangeRate(exchange_rate);
     },
-    [setDeleteExchangeRate]
+    [setDeleteExchangeRate],
   );
 
-  const handelEditExchangeRate = (exchange_rate) => {};
+  const handelEditExchangeRate = (exchange_rate) => {
+    openDialog('exchangeRate-form', { action: 'edit', id: exchange_rate.id });
+  };
 
   const handelCancelExchangeRateDelete = useCallback(() => {
     setDeleteExchangeRate(false);
   }, [setDeleteExchangeRate]);
 
   const handelConfirmExchangeRateDelete = useCallback(() => {
-    requestDeleteExchangeRate(deleteExchangeRate.id).then(() => {
-      setDeleteExchangeRate(false);
-      AppToaster.show({
-        message: formatMessage({id:'the_exchange_rate_has_been_successfully_deleted'}),
+    requestDeleteExchangeRate(deleteExchangeRate.id)
+      .then(() => {
+        setDeleteExchangeRate(false);
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_exchange_rates_has_been_successfully_deleted',
+          }),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch(() => {
+        setDeleteExchangeRate(false);
       });
-    });
-  }, [deleteExchangeRate, requestDeleteExchangeRate,formatMessage]);
+  }, [deleteExchangeRate, requestDeleteExchangeRate, formatMessage]);
 
   // Handle fetch data of Exchange_rates datatable.
   const handleFetchData = useCallback(
@@ -81,58 +96,58 @@ function ExchangeRate({
           : {}),
       });
     },
-    [addExchangeRatesTableQueries]
+    [addExchangeRatesTableQueries],
   );
 
+  // Handle selected rows change.
   const handleSelectedRowsChange = useCallback(
     (exchange_rates) => {
       setSelectedRows(exchange_rates);
     },
-    [setSelectedRows]
+    [setSelectedRows],
   );
 
- // Handle Exchange Rates bulk delete.
- const handleBulkDelete = useCallback(
-  (exchangeRates) => {
-    setBulkDelete(exchangeRates);
-  },
-  [setBulkDelete]
-);
+  // Handle Exchange Rates bulk delete.
+  const handleBulkDelete = useCallback(
+    (exchangeRatesIds) => {
+      setBulkDelete(exchangeRatesIds);
+    },
+    [setBulkDelete],
+  );
 
- //Handel cancel itemCategories bulk delete.
- const handleCancelBulkDelete =useCallback(()=>{
-  setBulkDelete(false)
-},[])
+  //Handel cancel itemCategories bulk delete.
+  const handleCancelBulkDelete = useCallback(() => {
+    setBulkDelete(false);
+  }, []);
 
-// handle confirm Exchange Rates bulk delete.
-const handleConfirmBulkDelete = useCallback(() => {
-  requestDeleteBulkExchangeRates(bulkDelete)
-    .then(() => {
-      setBulkDelete(false);
-      AppToaster.show({
-        message: formatMessage({
-          id: 'the_exchange_rates_has_been_successfully_deleted',
-        }),
-        intent: Intent.SUCCESS,
+  // handle confirm Exchange Rates bulk delete.
+  const handleConfirmBulkDelete = useCallback(() => {
+    requestDeleteBulkExchangeRates(bulkDelete)
+      .then(() => {
+        setBulkDelete(false);
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_exchange_rates_has_been_successfully_deleted',
+          }),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((errors) => {
+        setBulkDelete(false);
       });
-    })
-    .catch((errors) => {
-      setBulkDelete(false);
-    });
-}, [requestDeleteBulkExchangeRates, bulkDelete,formatMessage]);
-
+  }, [requestDeleteBulkExchangeRates, bulkDelete, formatMessage]);
 
   // Calculates the data table selected rows count.
-  const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [selectedRows]);
-
+  const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [
+    selectedRows,
+  ]);
 
   return (
-    <DashboardInsider>
+    <DashboardInsider loading={fetchExchangeRates.isFetching}>
       <ExchangeRateActionsBar
         onDeleteExchangeRate={handelDeleteExchangeRate}
         selectedRows={selectedRows}
         onBulkDelete={handleBulkDelete}
-
       />
       <DashboardPageContent>
         <ExchangeRateTable
@@ -143,33 +158,38 @@ const handleConfirmBulkDelete = useCallback(() => {
         />
         <Alert
           cancelButtonText={<T id={'cancel'} />}
-          confirmButtonText={<T id={'move_to_trash'} />}
-          icon='trash'
+          confirmButtonText={<T id={'delete'} />}
+          icon="trash"
           intent={Intent.DANGER}
           isOpen={deleteExchangeRate}
           onCancel={handelCancelExchangeRateDelete}
           onConfirm={handelConfirmExchangeRateDelete}
         >
           <p>
-            <FormattedHTMLMessage id={'once_delete_this_exchange_rate_you_will_able_to_restore_it'}/>
+            <FormattedHTMLMessage
+              id={'once_delete_this_exchange_rate_you_will_able_to_restore_it'}
+            />
           </p>
         </Alert>
         <Alert
-        cancelButtonText={<T id={'cancel'} />}
-        confirmButtonText={`${formatMessage({id:'delete'})} (${selectedRowsCount})`}
-        icon='trash'
-        intent={Intent.DANGER}
-        isOpen={bulkDelete}
-        onCancel={handleCancelBulkDelete}
-        onConfirm={handleConfirmBulkDelete}
-      >
-        <p>
-          <FormattedHTMLMessage
-            id={'once_delete_these_exchange_rates_you_will_not_able_restore_them'}
-          />
-        </p>
-      </Alert>
-
+          cancelButtonText={<T id={'cancel'} />}
+          confirmButtonText={`${formatMessage({
+            id: 'delete',
+          })} (${selectedRowsCount})`}
+          icon="trash"
+          intent={Intent.DANGER}
+          isOpen={bulkDelete}
+          onCancel={handleCancelBulkDelete}
+          onConfirm={handleConfirmBulkDelete}
+        >
+          <p>
+            <FormattedHTMLMessage
+              id={
+                'once_delete_these_exchange_rates_you_will_not_able_restore_them'
+              }
+            />
+          </p>
+        </Alert>
       </DashboardPageContent>
     </DashboardInsider>
   );
@@ -178,5 +198,6 @@ const handleConfirmBulkDelete = useCallback(() => {
 export default compose(
   withExchangeRatesActions,
   withResourceActions,
-  withDashboardActions
+  withDashboardActions,
+  withDialog,
 )(ExchangeRate);
diff --git a/client/src/containers/ExchangeRates/ExchangeRateActionsBar.js b/client/src/containers/ExchangeRates/ExchangeRateActionsBar.js
index 26018a16f..1a32b2876 100644
--- a/client/src/containers/ExchangeRates/ExchangeRateActionsBar.js
+++ b/client/src/containers/ExchangeRates/ExchangeRateActionsBar.js
@@ -11,7 +11,7 @@ import {
 import classNames from 'classnames';
 import Icon from 'components/Icon';
 import { connect } from 'react-redux';
-
+import { If } from 'components';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import withDialog from 'connectors/Dialog.connector';
 
@@ -19,8 +19,7 @@ import FilterDropdown from 'components/FilterDropdown';
 import withResourceDetail from 'containers/Resources/withResourceDetails';
 
 import { compose } from 'utils';
-import { FormattedMessage as T ,useIntl } from 'react-intl';
-
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 function ExchangeRateActionsBar({
   // #withDialog.
@@ -28,15 +27,15 @@ function ExchangeRateActionsBar({
 
   // #withResourceDetail
   resourceFields,
-  
+
   // #ownProps
   selectedRows = [],
   onDeleteExchangeRate,
   onFilterChanged,
-  onBulkDelete
+  onBulkDelete,
 }) {
   const [filterCount, setFilterCount] = useState(0);
-const {formatMessage} =useIntl()
+  const { formatMessage } = useIntl();
 
   const onClickNewExchangeRate = () => {
     openDialog('exchangeRate-form', {});
@@ -51,27 +50,20 @@ const {formatMessage} =useIntl()
     },
   });
 
-  // const handelDeleteExchangeRate = useCallback(
-  //   (exchangeRate) => {
-  //     onDeleteExchangeRate(exchangeRate);
-  //   },
-  //   [selectedRows, onDeleteExchangeRate]
-  // );
-
   const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
     selectedRows,
   ]);
 
-  const handelBulkDelete =useCallback(()=>{
-    onBulkDelete && onBulkDelete(selectedRows.map(r=>r.id));
-  },[onBulkDelete,selectedRows])
+  const handelBulkDelete = useCallback(() => {
+    onBulkDelete && onBulkDelete(selectedRows.map((r) => r.id));
+  }, [onBulkDelete, selectedRows]);
 
   return (
     <DashboardActionsBar>
       <NavbarGroup>
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon='plus' />}
+          icon={<Icon icon="plus" />}
           text={<T id={'new_exchange_rate'} />}
           onClick={onClickNewExchangeRate}
         />
@@ -87,29 +79,30 @@ const {formatMessage} =useIntl()
               filterCount <= 0 ? (
                 <T id={'filter'} />
               ) : (
-                `${filterCount} ${formatMessage({id:'filters_applied'})}`
+                `${filterCount} ${formatMessage({ id: 'filters_applied' })}`
               )
             }
-            icon={<Icon icon='filter' />}
+            icon={<Icon icon="filter" />}
           />
         </Popover>
-        {hasSelectedRows && (
+        <If condition={hasSelectedRows}>
           <Button
             className={Classes.MINIMAL}
-            icon={<Icon icon='trash' iconSize={15} />}
+            icon={<Icon icon="trash" iconSize={15} />}
             text={<T id={'delete'} />}
             intent={Intent.DANGER}
             onClick={handelBulkDelete}
           />
-        )}
+        </If>
+
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon='file-import' />}
+          icon={<Icon icon="file-import" />}
           text={<T id={'import'} />}
         />
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon='file-export' />}
+          icon={<Icon icon="file-export" />}
           text={<T id={'export'} />}
         />
       </NavbarGroup>
@@ -128,5 +121,5 @@ export default compose(
   withDialog,
   withResourceDetail(({ resourceFields }) => ({
     resourceFields,
-  }))
+  })),
 )(ExchangeRateActionsBar);
diff --git a/client/src/containers/ExchangeRates/ExchangeRateTable.js b/client/src/containers/ExchangeRates/ExchangeRateTable.js
index f044939f2..5a545f167 100644
--- a/client/src/containers/ExchangeRates/ExchangeRateTable.js
+++ b/client/src/containers/ExchangeRates/ExchangeRateTable.js
@@ -1,16 +1,15 @@
-import React, { useCallback, useMemo,useState } from 'react';
+import React, { useCallback, useMemo, useState, useEffect } from 'react';
 import Icon from 'components/Icon';
 import DialogConnect from 'connectors/Dialog.connector';
 import DataTable from 'components/DataTable';
-import { Button, Popover, Menu, MenuItem, Position } from '@blueprintjs/core';
+import { Button, Popover, Menu, MenuItem, Position,Intent } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
-
+import LoadingIndicator from 'components/LoadingIndicator';
 import withExchangeRatesActions from 'containers/ExchangeRates/withExchangeRatesActions';
 import withExchangeRates from 'containers/ExchangeRates/withExchangeRates';
 
 import { compose } from 'utils';
 
-
 function ExchangeRateTable({
   // #withExchangeRates
   exchangeRatesList,
@@ -25,7 +24,6 @@ function ExchangeRateTable({
   onEditExchangeRate,
   onSelectedRowsChange,
 }) {
-
   const [initialMount, setInitialMount] = useState(false);
   const { formatMessage } = useIntl();
 
@@ -47,69 +45,81 @@ function ExchangeRateTable({
         />
         <MenuItem
           text={<T id={'delete_exchange_rate'} />}
+          intent={Intent.DANGER}
           onClick={handleDeleteExchangeRate(ExchangeRate)}
         />
       </Menu>
     ),
-    [handelEditExchangeRate, handleDeleteExchangeRate]
+    [handelEditExchangeRate, handleDeleteExchangeRate],
   );
 
-  const columns = useMemo(() => [
-    {
-      id: 'date',
-      Header: formatMessage({ id: 'date' }),
-      // accessor: 'date',
-      width: 150,
-    },
-    {
-      id: 'currency_code',
-      Header: formatMessage({ id: 'currency_code' }),
-      accessor: 'currency_code',
-      className: 'currency_code',
-      width: 150,
-    },
-    {
-      id: 'exchange_rate',
-      Header: formatMessage({ id: 'exchange_rate' }),
-      accessor: 'exchange_rate',
-      className: 'exchange_rate',
-      width: 150,
-    },
-    {
-      id: 'actions',
-      Header: '',
-      Cell: ({ cell }) => (
-        <Popover
-          content={actionMenuList(cell.row.original)}
-          position={Position.RIGHT_BOTTOM}
-        >
-          <Button icon={<Icon icon='ellipsis-h' />} />
-        </Popover>
-      ),
-      className: 'actions',
-      width: 50,
-      disableResizing: false,
-    },
-  ], [actionMenuList,formatMessage]);
+  const columns = useMemo(
+    () => [
+      {
+        id: 'date',
+        Header: formatMessage({ id: 'date' }),
+        // accessor: 'date',
+        width: 150,
+      },
+      {
+        id: 'currency_code',
+        Header: formatMessage({ id: 'currency_code' }),
+        accessor: 'currency_code',
+        className: 'currency_code',
+        width: 150,
+      },
+      {
+        id: 'exchange_rate',
+        Header: formatMessage({ id: 'exchange_rate' }),
+        accessor: 'exchange_rate',
+        className: 'exchange_rate',
+        width: 150,
+      },
+      {
+        id: 'actions',
+        Header: '',
+        Cell: ({ cell }) => (
+          <Popover
+            content={actionMenuList(cell.row.original)}
+            position={Position.RIGHT_BOTTOM}
+          >
+            <Button icon={<Icon icon="ellipsis-h" />} />
+          </Popover>
+        ),
+        className: 'actions',
+        width: 50,
+        disableResizing: false,
+      },
+    ],
+    [actionMenuList, formatMessage],
+  );
 
-  const selectionColumn = useMemo(() => ({
-    minWidth: 42,
-    width: 42,
-    maxWidth: 42,
-  }), []);
+  const selectionColumn = useMemo(
+    () => ({
+      minWidth: 42,
+      width: 42,
+      maxWidth: 42,
+    }),
+    [],
+  );
 
   const handelFetchData = useCallback(
     (...params) => {
       onFetchData && onFetchData(...params);
     },
-    [onFetchData]
+    [onFetchData],
   );
 
-  const handelSelectedRowsChange = useCallback((selectRows) => {
-    onSelectedRowsChange && onSelectedRowsChange(selectRows.map((c) => c.original));
-  }, [onSelectedRowsChange]);
+  const handelSelectedRowsChange = useCallback(
+    (selectRows) => {
+      onSelectedRowsChange &&
+        onSelectedRowsChange(selectRows.map((c) => c.original));
+    },
+    [onSelectedRowsChange],
+  );
 
   return (
+    <LoadingIndicator loading={loading} mount={false}>
     <DataTable
       columns={columns}
       data={exchangeRatesList}
@@ -122,14 +132,15 @@ function ExchangeRateTable({
       onSelectedRowsChange={handelSelectedRowsChange}
       spinnerProps={{ size: 30 }}
     />
+    </LoadingIndicator>
   );
 }
 
 export default compose(
   DialogConnect,
   withExchangeRatesActions,
-  withExchangeRates(({ exchangeRatesList ,exchangeRatesLoading }) => ({
+  withExchangeRates(({ exchangeRatesList, exchangeRatesLoading }) => ({
     exchangeRatesList,
-    exchangeRatesLoading
-  }))
+    exchangeRatesLoading,
+  })),
 )(ExchangeRateTable);
diff --git a/client/src/containers/Items/ItemCategoriesList.js b/client/src/containers/Items/ItemCategoriesList.js
index c3df219e0..a4bb178b4 100644
--- a/client/src/containers/Items/ItemCategoriesList.js
+++ b/client/src/containers/Items/ItemCategoriesList.js
@@ -183,7 +183,7 @@ const ItemCategoryList = ({
       >
         <p>
           <FormattedHTMLMessage
-            id={'once_delete_these_item_categories_you_will_not_able_restore_them'}
+            id={'once_delete_these_items_you_will_not_able_restore_them'}
           />
         </p>
       </Alert>
diff --git a/client/src/containers/Items/ItemCategoriesTable.js b/client/src/containers/Items/ItemCategoriesTable.js
index eda8dec87..70d195df4 100644
--- a/client/src/containers/Items/ItemCategoriesTable.js
+++ b/client/src/containers/Items/ItemCategoriesTable.js
@@ -5,6 +5,7 @@ import {
   Menu,
   MenuItem,
   Position,
+  Intent
 } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 
@@ -37,6 +38,7 @@ const ItemsCategoryList = ({
         onClick={() => handelEditCategory(category)} />
       <MenuItem
         text={<T id={'delete_category'}/>}
+        intent={Intent.DANGER}
         onClick={() => handleDeleteCategory(category)}
       />
     </Menu>
diff --git a/client/src/containers/Preferences/Currencies/CurrenciesList.js b/client/src/containers/Preferences/Currencies/CurrenciesList.js
index dcb257bed..bb53822ea 100644
--- a/client/src/containers/Preferences/Currencies/CurrenciesList.js
+++ b/client/src/containers/Preferences/Currencies/CurrenciesList.js
@@ -1,4 +1,4 @@
-import React, { useCallback, useState, useMemo } from 'react';
+import React, { useCallback, useState, useMemo, useEffect } from 'react';
 import {
   Button,
   Popover,
@@ -8,7 +8,7 @@ import {
   Alert,
   Intent,
 } from '@blueprintjs/core';
-import { useQuery } from 'react-query';
+import { useQuery, queryCache } from 'react-query';
 
 import Icon from 'components/Icon';
 import { compose } from 'utils';
@@ -18,133 +18,165 @@ import LoadingIndicator from 'components/LoadingIndicator';
 import DataTable from 'components/DataTable';
 import AppToaster from 'components/AppToaster';
 
-import withDashboard from 'connectors/Dashboard.connector';
+import withDashboard from 'containers/Dashboard/withDashboard';
+
 import withCurrencies from 'containers/Currencies/withCurrencies';
 import withCurrenciesActions from 'containers/Currencies/withCurrenciesActions';
-import { FormattedMessage as T, useIntl } from 'react-intl';
-
+import {
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+  useIntl,
+} from 'react-intl';
 
 function CurrenciesList({
   // #withCurrencies
-  currenciesList,
 
+  currenciesList,
+  currenciesLoading,
   // #withCurrenciesActions
   requestDeleteCurrency,
   requestFetchCurrencies,
 
   // #withDialog
   openDialog,
+  changePreferencesPageTitle,
+
+  // #ownProps
   onFetchData,
 }) {
   const [deleteCurrencyState, setDeleteCurrencyState] = useState(false);
-  const { formatMessage } = useIntl()
-  const fetchCurrencies = useQuery(['currencies-table'],
-    () => requestFetchCurrencies());
+  const [tableLoading, setTableLoading] = useState(false);
+  const [initialMount, setInitialMount] = useState(false);
 
-  // const handleEditCurrency = (currency) => {
-  //   openDialog('currency-form', {
-  //     action: 'edit',
-  //     currencyCode: currency.currency_code,
-  //   });
-  // };
-  const handleEditCurrency =useCallback((currency)=>{
-    openDialog('currency-form', {
-          action: 'edit',
-          currencyCode: currency.currency_code,
-        });
-  },[openDialog])
+  const { formatMessage } = useIntl();
 
+  const fetchCurrencies = useQuery('currencies-table', () =>
+    requestFetchCurrencies(),
+  );
 
-  // const onDeleteCurrency = (currency) => {
-  //   setDeleteCurrencyState(currency);
-  // };
+  useEffect(() => {
+    changePreferencesPageTitle(formatMessage({ id: 'currencies' }));
+  }, [changePreferencesPageTitle, formatMessage]);
 
-  const onDeleteCurrency =useCallback((currency)=>{setDeleteCurrencyState(currency);},[])
+  const handleEditCurrency = useCallback(
+    (currency) => {
+      openDialog('currency-form', {
+        action: 'edit',
+        currencyCode: currency.currency_code,
+      });
+    },
+    [openDialog],
+  );
+
+  const onDeleteCurrency = useCallback((currency) => {
+    setDeleteCurrencyState(currency);
+  }, []);
   const handleCancelCurrencyDelete = () => {
     setDeleteCurrencyState(false);
   };
 
-  const handleConfirmCurrencyDelete = useCallback(() => {
-    requestDeleteCurrency(deleteCurrencyState.currency_code).then(
-      (response) => {
-        setDeleteCurrencyState(false);
-        AppToaster.show({
-          message: formatMessage({id:'the_currency_has_been_successfully_deleted'}),
+  const handleConfirmCurrencyDelete = useCallback(
+    (refetch) => {
+      requestDeleteCurrency(deleteCurrencyState.currency_code)
+        .then((response) => {
+          setDeleteCurrencyState(false);
+          AppToaster.show({
+            message: formatMessage({
+              id: 'the_currency_has_been_successfully_deleted',
+            }),
+            intent: Intent.SUCCESS,
+          });
+        })
+        .catch((errors) => {
+          setDeleteCurrencyState(false);
         });
-      }
-    );
-  }, [requestDeleteCurrency,deleteCurrencyState,formatMessage]);
-
-  const actionMenuList = useCallback((currency) => (
-    <Menu>
-      <MenuItem
-        text={<T id={'edit_currency'} />}
-        onClick={() => handleEditCurrency(currency)} />
-
-      <MenuItem
-        text={<T id={'delete_currency'} />}
-        onClick={() => onDeleteCurrency(currency)}
-      />
-    </Menu>
-  ), [handleEditCurrency,onDeleteCurrency]);
-
-  const columns = useMemo(() => [
-    {
-      Header: formatMessage({id:'currency_name'}),
-      accessor: 'currency_name',
-      width: 100,
     },
-    {
-      Header: formatMessage({id:'currency_code'}),
-      accessor: 'currency_code',
-      className: 'currency_code',
-      width: 100,
-    },
-    {
-      Header: 'Currency sign',
-      width: 50,
-    },
-    {
-      id: 'actions',
-      Header: '',
-      Cell: ({ cell }) => (
-        <Popover
-          content={actionMenuList(cell.row.original)}
-          position={Position.RIGHT_TOP}
-        >
-          <Button icon={<Icon icon='ellipsis-h' />} />
-        </Popover>
-      ),
-      className: 'actions',
-      width: 50,
-    },
-  ], [actionMenuList,formatMessage]);
+    [deleteCurrencyState, requestDeleteCurrency, formatMessage],
+  );
 
-  const handleDatatableFetchData = useCallback(() => {
+  const actionMenuList = useCallback(
+    (currency) => (
+      <Menu>
+        <MenuItem
+          text={<T id={'edit_currency'} />}
+          onClick={() => handleEditCurrency(currency)}
+        />
+
+        <MenuItem
+          text={<T id={'delete_currency'} />}
+          onClick={() => onDeleteCurrency(currency)}
+          intent={Intent.DANGER}
+        />
+      </Menu>
+    ),
+    [handleEditCurrency, onDeleteCurrency],
+  );
+
+  const columns = useMemo(
+    () => [
+      {
+        Header: formatMessage({ id: 'currency_name' }),
+        accessor: 'currency_name',
+        width: 150,
+      },
+      {
+        Header: formatMessage({ id: 'currency_code' }),
+        accessor: 'currency_code',
+        className: 'currency_code',
+        width: 120,
+      },
+      {
+        Header: 'Currency sign',
+        width: 120,
+      },
+      {
+        id: 'actions',
+        Header: '',
+        Cell: ({ cell }) => (
+          <Popover
+            content={actionMenuList(cell.row.original)}
+            position={Position.RIGHT_TOP}
+          >
+            <Button icon={<Icon icon="ellipsis-h" />} />
+          </Popover>
+        ),
+        className: 'actions',
+        width: 50,
+      },
+    ],
+    [actionMenuList, formatMessage],
+  );
+
+  const handleDataTableFetchData = useCallback(() => {
     onFetchData && onFetchData();
-  }, [onFetchData]);
+  }, []);
 
   return (
-    <LoadingIndicator>
+    <LoadingIndicator loading={fetchCurrencies.isFetching}>
       <DataTable
+        noInitialFetch={true}
         columns={columns}
         data={currenciesList}
-        loading={fetchCurrencies.isFetching}
+        onFetchData={handleDataTableFetchData()}
+        loading={currenciesLoading && !initialMount}
         selectionColumn={false}
+        manualSortBy={true}
+        expandable={false}
       />
 
       <Alert
-        cancelButtonText={<T id={'cancel'}/>}
-        confirmButtonText={<T id={'move_to_trash'}/>}
-        icon='trash'
+        cancelButtonText={<T id={'cancel'} />}
+        confirmButtonText={<T id={'delete'} />}
+        icon="trash"
         intent={Intent.DANGER}
         isOpen={deleteCurrencyState}
         onCancel={handleCancelCurrencyDelete}
         onConfirm={handleConfirmCurrencyDelete}
       >
         <p>
-          Are you sure you want to move <b>filename</b> to Trash? You will be
-          able to restore it later, but it will become private to you.
+          <FormattedHTMLMessage
+            id={'once_delete_this_currency_you_will_able_to_restore_it'}
+          />
         </p>
       </Alert>
     </LoadingIndicator>
@@ -152,10 +184,10 @@ function CurrenciesList({
 }
 
 export default compose(
+  DialogConnect,
+  withDashboard,
   withCurrencies(({ currenciesList }) => ({
     currenciesList,
   })),
   withCurrenciesActions,
-  DialogConnect,
-  withDashboard
 )(CurrenciesList);
diff --git a/client/src/containers/Preferences/General/General.js b/client/src/containers/Preferences/General/General.js
index a7d739359..6ceadd041 100644
--- a/client/src/containers/Preferences/General/General.js
+++ b/client/src/containers/Preferences/General/General.js
@@ -1,4 +1,4 @@
-import React, { useState} from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
 import {
@@ -8,81 +8,153 @@ import {
   Intent,
   MenuItem,
   Classes,
+  Spinner,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { TimezonePicker } from '@blueprintjs/timezone';
-import { Select } from '@blueprintjs/select';
-import { useQuery } from 'react-query';
+import { useQuery, queryCache } from 'react-query';
 import { FormattedMessage as T, useIntl } from 'react-intl';
+import moment from 'moment';
 
 import { compose, optionsMapToArray } from 'utils';
 
 import ErrorMessage from 'components/ErrorMessage';
 import AppToaster from 'components/AppToaster';
+import { ListSelect } from 'components';
+import { If } from 'components';
 
+import withDashboard from 'containers/Dashboard/withDashboard';
 import withSettings from 'containers/Settings/withSettings';
 import withSettingsActions from 'containers/Settings/withSettingsActions';
 
-
 function GeneralPreferences({
   // #withSettings
   organizationSettings,
 
+  //# withDashboard
+  changePreferencesPageTitle,
+
   // #withSettingsActions
   requestSubmitOptions,
   requestFetchOptions,
 }) {
-  const {formatMessage} = useIntl();
+  const { formatMessage } = useIntl();
   const [selectedItems, setSelectedItems] = useState({});
   const [timeZone, setTimeZone] = useState('');
 
-  const fetchHook = useQuery(['settings'],
-    () => { requestFetchOptions(); });
+  const fetchHook = useQuery(
+    ['settings'],
+    () => {
+      requestFetchOptions();
+    },
+    { manual: true },
+  );
 
-  const businessLocation = [
-    { id: 218, name: 'LIBYA', code: 'LY' },
-    { id: 380, name: 'UKRAINE', code: 'UA' },
-    { id: 212, name: 'Morocco', code: 'MA' },
-  ];
+  useEffect(() => {
+    changePreferencesPageTitle(formatMessage({ id: 'general' }));
+  }, [changePreferencesPageTitle, formatMessage]);
+
+  const businessLocation = [{ id: 218, name: 'LIBYA', value: 'libya' }];
   const languagesDisplay = [
-    { id: 0, name: 'EN', label: 'English' },
-    { id: 1, name: 'Arb', label: 'Arabic' },
+    { id: 0, name: 'English', value: 'EN' },
+    { id: 1, name: 'Arabic', value: 'Arab  ' },
   ];
   const currencies = [
-    { id: 0, name: 'US Dollar', code: 'USD' },
-    { id: 1, name: 'Euro', code: 'EUR' },
-    { id: 2, name: 'Libyan Dinar	', code: 'LYD' },
+    { id: 0, name: 'US Dollar', value: 'USD' },
+    { id: 1, name: 'Euro', value: 'EUR' },
+    { id: 1, name: 'Libyan Dinar	', value: 'LYD' },
   ];
+
   const fiscalYear = [
-    { id: 0, name: 'January-July', label: 'January-July' },
-    { id: 1, name: 'August-December', label: 'August-December' },
+    { id: 0, name: 'January - December', value: 'january' },
+    { id: 1, name: 'February - January', value: 'february' },
+    { id: 2, name: 'March - February', value: 'March' },
+    { id: 3, name: 'April - March', value: 'april' },
+    { id: 4, name: 'May - April', value: 'may' },
+    { id: 5, name: 'June - May', value: 'june' },
+    { id: 6, name: 'July - June', value: 'july' },
+    { id: 7, name: 'August - July', value: 'August' },
+    { id: 8, name: 'September - August', value: 'september' },
+    { id: 9, name: 'October - September', value: 'october' },
+    { id: 10, name: 'November - October', value: 'november' },
+    { id: 11, name: 'December - November', value: 'December' },
   ];
+
   const dateFormat = [
-    { id: 1, name: '04/11/2020', format: 'MM-DD-YY' },
-    { id: 3, name: '2020/03/21', format: 'YY/MM/DD' },
-    { id: 4, name: 'Apr 11, 2020', format: 'MMMM yyyy' },
-    { id: 6, name: 'Saturday, Apr 11, 2020', format: 'EEEE, MMM d, yyyy' },
+    {
+      id: 1,
+      name: 'MM/DD/YY',
+      label: `${moment().format('MM/DD/YYYY')}`,
+      value: 'mm/dd/yy',
+    },
+    {
+      id: 2,
+      name: 'DD/MM/YY',
+      label: `${moment().format('DD/MM/YYYY')}`,
+      value: 'dd/mm/yy',
+    },
+    {
+      id: 3,
+      name: 'YY/MM/DD',
+      label: `${moment().format('YYYY/MM/DD')}`,
+      value: 'yy/mm/dd',
+    },
+    {
+      id: 4,
+      name: 'MM-DD-YY',
+      label: `${moment().format('MM-DD-YYYY')}`,
+      value: 'mm-dd-yy',
+    },
+    {
+      id: 5,
+      name: 'DD-MM-YY',
+      label: `${moment().format('DD-MM-YYYY')}`,
+      value: 'dd-mm-yy',
+    },
+    {
+      id: 6,
+      name: 'YY-MM-DD',
+      label: `${moment().format('YYYY-MM-DD')}`,
+      value: 'yy-mm-dd',
+    },
   ];
 
   const validationSchema = Yup.object().shape({
-    name: Yup.string().required().label(formatMessage({id:'organization_name_'})),
-    industry: Yup.string().required().label(formatMessage({id:'organization_industry_'})),
-    location: Yup.string().required().label(formatMessage({id:'location'})),
-    base_currency: Yup.string().required(
-      formatMessage({ id: 'required' })
-    ),
-    fiscal_year: Yup.string().required().label(formatMessage({id:'base_currency_'})),
-    language: Yup.string().required().label(formatMessage({id:'language'})),
-    // time_zone: Yup.object().required()..label(formatMessage({id:''})),
-    date_format: Yup.date().required().label(formatMessage({id:'date_format_'})),
+    name: Yup.string()
+      .required()
+      .label(formatMessage({ id: 'organization_name_' })),
+    industry: Yup.string()
+      .required()
+      .label(formatMessage({ id: 'organization_industry_' })),
+    location: Yup.string()
+      .required()
+      .label(formatMessage({ id: 'location' })),
+    base_currency: Yup.string().required(formatMessage({ id: 'required' })),
+    fiscal_year: Yup.string()
+      .required()
+      .label(formatMessage({ id: 'base_currency_' })),
+    language: Yup.string()
+      .required()
+      .label(formatMessage({ id: 'language' })),
+    // time_zone: Yup.string()
+    //   .required()
+    //   .label(formatMessage({ id: 'time_zone' })),
+    date_format: Yup.string()
+      .required()
+      .label(formatMessage({ id: 'date_format_' })),
   });
 
+  const query = queryCache.refetchQueries('settings');
+
   const {
+    values,
     errors,
     touched,
     setFieldValue,
     getFieldProps,
     handleSubmit,
+    resetForm,
+    isSubmitting,
   } = useFormik({
     enableReinitialize: true,
     initialValues: {
@@ -93,13 +165,17 @@ function GeneralPreferences({
       const options = optionsMapToArray(values).map((option) => {
         return { key: option.key, ...option, group: 'organization' };
       });
-
       requestSubmitOptions({ options })
         .then((response) => {
           AppToaster.show({
-            message: 'The_Options_has_been_Submit',
+            message: formatMessage({
+              id: 'the_options_has_been_successfully_created',
+            }),
+            intent: Intent.SUCCESS,
           });
           setSubmitting(false);
+          resetForm();
+          queryCache.refetchQueries('settings', { force: true });
         })
         .catch((error) => {
           setSubmitting(false);
@@ -112,7 +188,6 @@ function GeneralPreferences({
       className={'preferences-menu'}
       key={item.id}
       text={item.name}
-      label={item.code}
       onClick={handleClick}
     />
   );
@@ -122,7 +197,7 @@ function GeneralPreferences({
       className={'preferences-menu'}
       key={item.id}
       text={item.name}
-      label={item.code}
+      label={item.value}
       onClick={handleClick}
     />
   );
@@ -140,7 +215,6 @@ function GeneralPreferences({
       className={'preferences-menu'}
       key={item.id}
       text={item.name}
-      label={item.label}
       onClick={handleClick}
     />
   );
@@ -149,8 +223,8 @@ function GeneralPreferences({
     <MenuItem
       className={'preferences-menu'}
       key={item.id}
-      text={item.format}
-      label={item.name}
+      text={item.name}
+      label={item.label}
       onClick={handleClick}
     />
   );
@@ -161,218 +235,228 @@ function GeneralPreferences({
         ...selectedItems,
         [filedName]: filed,
       });
-      setFieldValue(filedName, filed.name);
+      setFieldValue(filedName, filed.value);
     };
   };
 
-  const getSelectedItemLabel = (filedName, defaultLabel) => {
-    return typeof selectedItems[filedName] !== 'undefined'
-      ? selectedItems[filedName].name
-      : defaultLabel;
+  const filterItems = (query, item, _index, exactMatch) => {
+    const normalizedTitle = item.name.toLowerCase();
+    const normalizedQuery = query.toLowerCase();
+
+    if (exactMatch) {
+      return normalizedTitle === normalizedQuery;
+    } else {
+      return normalizedTitle.indexOf(normalizedQuery) >= 0;
+    }
   };
 
   const handleTimezoneChange = (timezone) => setTimeZone(timezone);
 
   return (
-    <div className='preferences__inside-content--general'>
+    <div
+      className={classNames({
+        'preferences__inside-content--general': true,
+        preferences__loading: fetchHook.pending,
+      })}
+    >
       <form onSubmit={handleSubmit}>
         <FormGroup
-          label={<T id={'organization_name'}/>}
+          label={<T id={'organization_name'} />}
           inline={true}
-          intent={(errors.name && touched.name) && Intent.DANGER}
-          helperText={<ErrorMessage name='name' {...{errors, touched}} />}
+          intent={errors.name && touched.name && Intent.DANGER}
+          helperText={<ErrorMessage name="name" {...{ errors, touched }} />}
         >
           <InputGroup
             medium={'true'}
-            intent={(errors.name && touched.name) && Intent.DANGER}
+            intent={errors.name && touched.name && Intent.DANGER}
             {...getFieldProps('name')}
           />
         </FormGroup>
 
         <FormGroup
-          label={<T id={'organization_industry'}/>}
+          label={<T id={'organization_industry'} />}
           inline={true}
-          intent={(errors.industry && touched.industry) && Intent.DANGER}
-          helperText={<ErrorMessage name='industry' {...{errors, touched}} />}
+          intent={errors.industry && touched.industry && Intent.DANGER}
+          helperText={<ErrorMessage name="industry" {...{ errors, touched }} />}
         >
           <InputGroup
             medium={'true'}
-            intent={(errors.industry && touched.industry) && Intent.DANGER}
+            intent={errors.industry && touched.industry && Intent.DANGER}
             {...getFieldProps('industry')}
           />
         </FormGroup>
 
         <FormGroup
-          label={<T id={'business_location'}/>}
+          label={<T id={'business_location'} />}
           className={classNames(
             'form-group--business-location',
             'form-group--select-list',
-            Classes.FILL
+            Classes.FILL,
           )}
           inline={true}
-          helperText={<ErrorMessage name='location' {...{errors, touched}} />}
-          intent={(errors.location && touched.location) && Intent.DANGER}
+          helperText={<ErrorMessage name="location" {...{ errors, touched }} />}
+          intent={errors.location && touched.location && Intent.DANGER}
         >
-          <Select
+          <ListSelect
             items={businessLocation}
-            noResults={<MenuItem disabled={true} text='No result.' />}
+            noResults={<MenuItem disabled={true} text="No result." />}
             itemRenderer={businessLocationItem}
             popoverProps={{ minimal: true }}
             onItemSelect={onItemsSelect('location')}
-          >
-            <Button
-              fill={true}
-              rightIcon='caret-down'
-              text={getSelectedItemLabel(
-                'location',
-                organizationSettings.location
-              )}
-            />
-          </Select>
+            selectedItem={values.location}
+            selectedItemProp={'value'}
+            defaultText={<T id={'select_business_location'} />}
+            labelProp={'name'}
+          />
         </FormGroup>
 
         <FormGroup
-          label={<T id={'base_currency'}/>}
+          label={<T id={'base_currency'} />}
           className={classNames(
             'form-group--base-currency',
             'form-group--select-list',
-            Classes.FILL
+            Classes.LOADING,
+            Classes.FILL,
           )}
           inline={true}
-          helperText={<ErrorMessage name='base_currency' {...{ errors, touched }} />}
-          intent={(errors.base_currency && touched.base_currency) && Intent.DANGER}
+          helperText={
+            <ErrorMessage name="base_currency" {...{ errors, touched }} />
+          }
+          intent={
+            errors.base_currency && touched.base_currency && Intent.DANGER
+          }
         >
-          <Select
+          <ListSelect
             items={currencies}
-            noResults={<MenuItem disabled={true} text='No result.' />}
+            noResults={<MenuItem disabled={true} text="No result." />}
             itemRenderer={currencyItem}
             popoverProps={{ minimal: true }}
             onItemSelect={onItemsSelect('base_currency')}
-          >
-            <Button
-              fill={true}
-              rightIcon='caret-down'
-              text={getSelectedItemLabel(
-                'base_currency',
-                organizationSettings.base_currency
-              )}
-            />
-          </Select>
+            itemPredicate={filterItems}
+            selectedItem={values.base_currency}
+            selectedItemProp={'value'}
+            defaultText={<T id={'select_base_currency'} />}
+            labelProp={'name'}
+          />
         </FormGroup>
 
         <FormGroup
-          label={<T id={'fiscal_year'}/>}
+          label={<T id={'fiscal_year'} />}
           className={classNames(
             'form-group--fiscal-year',
             'form-group--select-list',
-            Classes.FILL
+            Classes.FILL,
           )}
           inline={true}
-          helperText={<ErrorMessage name='fiscal_year' {...{errors, touched}} />}
-          intent={(errors.fiscal_year && touched.fiscal_year) && Intent.DANGER}
+          helperText={
+            <ErrorMessage name="fiscal_year" {...{ errors, touched }} />
+          }
+          intent={errors.fiscal_year && touched.fiscal_year && Intent.DANGER}
         >
-          <Select
+          <ListSelect
             items={fiscalYear}
-            noResults={<MenuItem disabled={true} text='No result.' />}
+            noResults={<MenuItem disabled={true} text="No result." />}
             itemRenderer={fiscalYearItem}
             popoverProps={{ minimal: true }}
             onItemSelect={onItemsSelect('fiscal_year')}
-          >
-            <Button
-              fill={true}
-              rightIcon='caret-down'
-              text={getSelectedItemLabel(
-                'fiscal_year',
-                organizationSettings.fiscal_year
-              )}
-            />
-          </Select>
+            itemPredicate={filterItems}
+            selectedItem={values.fiscal_year}
+            selectedItemProp={'value'}
+            defaultText={<T id={'select_fiscal_year'} />}
+            labelProp={'name'}
+          />
         </FormGroup>
 
         <FormGroup
-          label={<T id={'language'}/>}
+          label={<T id={'language'} />}
           inline={true}
           className={classNames(
             'form-group--language',
             'form-group--select-list',
-            Classes.FILL
+            Classes.FILL,
           )}
-          intent={(errors.language && touched.language) && Intent.DANGER}
-          helperText={<ErrorMessage name='language' {...{errors, touched}} />}
+          intent={errors.language && touched.language && Intent.DANGER}
+          helperText={<ErrorMessage name="language" {...{ errors, touched }} />}
         >
-          <Select
+          <ListSelect
             items={languagesDisplay}
-            noResults={<MenuItem disabled={true} text='No results.' />}
+            noResults={<MenuItem disabled={true} text="No results." />}
             itemRenderer={languageItem}
             popoverProps={{ minimal: true }}
             onItemSelect={onItemsSelect('language')}
-          >
-            <Button
-              rightIcon='caret-down'
-              text={getSelectedItemLabel(
-                'language',
-                organizationSettings.language
-              )}
-            />
-          </Select>
+            itemPredicate={filterItems}
+            selectedItem={values.language}
+            selectedItemProp={'value'}
+            defaultText={<T id={'select_language'} />}
+            labelProp={'name'}
+          />
         </FormGroup>
         <FormGroup
-          label={<T id={'time_zone'}/>}
+          label={<T id={'time_zone'} />}
           inline={true}
           className={classNames(
             'form-group--time-zone',
             'form-group--select-list',
-            Classes.FILL
+            Classes.FILL,
           )}
-          intent={(errors.time_zone && touched.time_zone) && Intent.DANGER}
-          helperText={<ErrorMessage name='time_zone' {...{errors, touched}} />}
+          intent={errors.time_zone && touched.time_zone && Intent.DANGER}
+          helperText={
+            <ErrorMessage name="time_zone" {...{ errors, touched }} />
+          }
         >
           <TimezonePicker
             value={timeZone}
             onChange={handleTimezoneChange}
-            showLocalTimezone={true}
-            valueDisplayFormat='composite'
+            valueDisplayFormat="composite"
+            placeholder={<T id={'select_time_zone'} />}
           />
         </FormGroup>
         <FormGroup
-          label={<T id={'date_format'}/>}
+          label={<T id={'date_format'} />}
           inline={true}
           className={classNames(
             'form-group--language',
             'form-group--select-list',
-            Classes.FILL
+            Classes.FILL,
           )}
-          intent={(errors.date_format && touched.date_format) && Intent.DANGER}
-          helperText={<ErrorMessage name='date_format' {...{errors, touched}} />}
+          intent={errors.date_format && touched.date_format && Intent.DANGER}
+          helperText={
+            <ErrorMessage name="date_format" {...{ errors, touched }} />
+          }
         >
-          <Select
+          <ListSelect
             items={dateFormat}
-            noResults={<MenuItem disabled={true} text='No result.' />}
+            noResults={<MenuItem disabled={true} text="No result." />}
             itemRenderer={date_format}
             popoverProp={{ minimal: true }}
             onItemSelect={onItemsSelect('date_format')}
-          >
-            <Button
-              rightIcon='caret-down'
-              text={getSelectedItemLabel(
-                'date_format',
-                organizationSettings.date_format
-              )}
-            />
-          </Select>
+            itemPredicate={filterItems}
+            selectedItem={values.date_format}
+            selectedItemProp={'value'}
+            defaultText={<T id={'select_date_format'} />}
+            labelProp={'name'}
+          />
         </FormGroup>
 
         <div className={'preferences__floating-footer '}>
           <Button
             className={'preferences-button'}
             intent={Intent.PRIMARY}
-            type='submit'
+            type="submit"
+            loading={isSubmitting}
           >
-            <T id={'save'}/>
+            <T id={'save'} />
+          </Button>
+          <Button onClick={'handleClose'}>
+            <T id={'close'} />
           </Button>
-          <Button onClick={'handleClose'}><T id={'close'}/></Button>
         </div>
       </form>
+      <If condition={fetchHook.isFetching || isSubmitting}>
+        <div className={'preferences__loading-overlay'}>
+          <Spinner size={40} />
+        </div>
+      </If>
     </div>
   );
 }
@@ -380,4 +464,5 @@ function GeneralPreferences({
 export default compose(
   withSettings,
   withSettingsActions,
+  withDashboard,
 )(GeneralPreferences);
diff --git a/client/src/containers/Preferences/Users/UsersActions.js b/client/src/containers/Preferences/Users/UsersActions.js
index 14b030f90..1f08180eb 100644
--- a/client/src/containers/Preferences/Users/UsersActions.js
+++ b/client/src/containers/Preferences/Users/UsersActions.js
@@ -16,7 +16,7 @@ function UsersActions({
   }, [openDialog]);
 
   return (
-    <div claass="preferences-actions">
+    <div className="preferences-actions">
       <Button
         icon={<Icon icon='plus' iconSize={12} />}
         onClick={onClickNewUser}
diff --git a/client/src/containers/Preferences/Users/UsersList.js b/client/src/containers/Preferences/Users/UsersList.js
index 8556797da..df7654158 100644
--- a/client/src/containers/Preferences/Users/UsersList.js
+++ b/client/src/containers/Preferences/Users/UsersList.js
@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import { queryCache, useQuery } from 'react-query';
 import DataTable from 'components/DataTable';
 import {
@@ -21,6 +21,7 @@ import {
 
 import Icon from 'components/Icon';
 import LoadingIndicator from 'components/LoadingIndicator';
+import { If } from 'components';
 
 import AppToaster from 'components/AppToaster';
 
@@ -34,7 +35,7 @@ import { compose } from 'utils';
 function UsersListPreferences({
   // #withDialog
   openDialog,
-  closeDialog,
+  changePreferencesPageTitle,
 
   // #withUsers
   usersList,
@@ -52,9 +53,14 @@ function UsersListPreferences({
   const { formatMessage } = useIntl();
   const fetchUsers = useQuery('users-table', () => requestFetchUsers());
 
-  const onInactiveUser = (user) => {
+  useEffect(() => {
+    changePreferencesPageTitle(formatMessage({ id: 'users' }));
+  }, [changePreferencesPageTitle, formatMessage]);
+
+
+  const onInactiveUser = useCallback((user) => {
     setInactiveUserState(user);
-  };
+  }, []);
 
   // Handle cancel inactive user alert
   const handleCancelInactiveUser = useCallback(() => {
@@ -63,38 +69,42 @@ function UsersListPreferences({
 
   // handel confirm user activation
   const handleConfirmUserActive = useCallback(() => {
-    requestInactiveUser(inactiveUserState.id).then(() => {
-      setInactiveUserState(false);
-      AppToaster.show({
-        message: formatMessage({
-          id: 'the_user_has_been_successfully_inactivated',
-        }),
+    requestInactiveUser(inactiveUserState.id)
+      .then(() => {
+        setInactiveUserState(false);
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_user_has_been_successfully_inactivated',
+          }),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.refetchQueries('users-table', { force: true });
+      })
+      .catch((error) => {
+        setInactiveUserState(false);
       });
-    });
-  }, [
-    inactiveUserState,
-    requestInactiveUser,
-    requestFetchUsers,
-    formatMessage,
-  ]);
+  }, [inactiveUserState, requestInactiveUser, formatMessage]);
 
-  const onDeleteUser = (user) => {
+  const onDeleteUser = useCallback((user) => {
     setDeleteUserState(user);
-  };
+  }, []);
 
   const handleCancelUserDelete = () => {
     setDeleteUserState(false);
   };
 
-  const onEditUser = (user) => () => {
-    const form = Object.keys(user).reduce((obj, key) => {
-      const camelKey = snakeCase(key);
-      obj[camelKey] = user[key];
-      return obj;
-    }, {});
+  const onEditUser = useCallback(
+    (user) => () => {
+      const form = Object.keys(user).reduce((obj, key) => {
+        const camelKey = snakeCase(key);
+        obj[camelKey] = user[key];
+        return obj;
+      }, {});
 
-    openDialog('userList-form', { action: 'edit', user: form });
-  };
+      openDialog('userList-form', { action: 'edit', user: form });
+    },
+    [openDialog],
+  );
 
   // Handle confirm User delete
 
@@ -121,19 +131,24 @@ function UsersListPreferences({
   const actionMenuList = useCallback(
     (user) => (
       <Menu>
-        <MenuItem text={<T id={'edit_user'} />} onClick={onEditUser(user)} />
-        <MenuDivider />
-        <MenuItem
-          text={<T id={'inactivate_user'} />}
-          onClick={() => onInactiveUser(user)}
-        />
+        <If condition={user.invite_accepted_at}>
+          <MenuItem text={<T id={'edit_user'} />} onClick={onEditUser(user)} />
+          <MenuDivider />
+
+          <MenuItem
+            text={<T id={'inactivate_user'} />}
+            onClick={() => onInactiveUser(user)}
+          />
+        </If>
+
         <MenuItem
           text={<T id={'delete_user'} />}
           onClick={() => onDeleteUser(user)}
+          intent={Intent.DANGER}
         />
       </Menu>
     ),
-    [],
+    [onInactiveUser, onDeleteUser, onEditUser],
   );
 
   const columns = useMemo(
@@ -160,7 +175,11 @@ function UsersListPreferences({
         id: 'status',
         Header: 'Status',
         accessor: (user) =>
-          user.active ? (
+          !user.invite_accepted_at ? (
+            <Tag minimal={true}>
+              <T id={'inviting'} />
+            </Tag>
+          ) : user.active ? (
             <Tag intent={Intent.SUCCESS} minimal={true}>
               <T id={'activate'} />
             </Tag>
@@ -193,7 +212,7 @@ function UsersListPreferences({
 
   const handelDataTableFetchData = useCallback(() => {
     onFetchData && onFetchData();
-  }, []);
+  }, [onFetchData]);
 
   return (
     <LoadingIndicator>
diff --git a/client/src/lang/en/index.js b/client/src/lang/en/index.js
index 50f8aaf9f..ecc94c517 100644
--- a/client/src/lang/en/index.js
+++ b/client/src/lang/en/index.js
@@ -283,8 +283,7 @@ export default {
     'The exchange rate has been successfully edited',
   the_exchange_rate_has_been_successfully_created:
     'The exchange rate has been successfully created',
-  the_exchange_rate_has_been_successfully_deleted:
-    'The  exchange rate has been successfully deleted.',
+
   the_user_details_has_been_updated: 'The user details has been updated',
   the_category_has_been_successfully_created:
     'The category has been successfully created.',
@@ -329,6 +328,7 @@ export default {
   journal_sheet: 'Journal Sheet',
   run_report: 'Run Report',
   num: 'Num.',
+  inviting: 'INVITING',
   acc_code: 'Acc. Code',
   display_report_columns: 'Display report columns',
   select_display_columns_by: 'Select display columns by...',
@@ -337,7 +337,25 @@ export default {
     'The currency has been successfully edited',
   the_currency_has_been_successfully_created:
     'The currency has been successfully created',
-
+  the_currency_has_been_successfully_deleted:
+    'The currency has been successfully deleted',
+  once_delete_this_currency_you_will_able_to_restore_it: `Once you delete this currency, you won\'t be able to restore it later. Are you sure you want to delete this currency?`,
+  once_delete_this_exchange_rate_you_will_able_to_restore_it: `Once you delete this exchange rate, you won\'t be able to restore it later. Are you sure you want to delete this exchange rate?`,
+  once_delete_these_exchange_rates_you_will_not_able_restore_them: `Once you delete these exchange rates, you won't be able to retrieve them later. Are you sure you want to delete them?`,
+  once_delete_this_item_category_you_will_able_to_restore_it: `Once you delete this item, you won\'t be able to restore it later. Are you sure you want to delete this item?`,
+  select_business_location: 'Select Business Location',
+  select_base_currency: 'Select Base Currency',
+  select_fiscal_year: 'Select Fiscal Year',
+  select_language: 'Select Language',
+  select_date_format: 'Select Date Format',
+  select_time_zone: 'Select Time Zone',
+  select_currency_code: 'Select Currency Code',
+  select_parent_category: 'Select Parent Category',
+  the_options_has_been_successfully_created:
+    'The options has been successfully created',
+  there_is_exchange_rate_in_this_date_with_the_same_currency:
+    'There is exchange rate in this date with the same currency.',
+    the_exchange_rates_has_been_successfully_deleted:'The exchange rates has been successfully deleted',
   // Name Labels
   expense_account_id: 'Expense account',
   payment_account_id: 'Payment account',
@@ -363,14 +381,20 @@ export default {
   date_format_: 'Date format',
   category_name_: 'Category name',
   view_name_: 'View name',
+  time_zone: 'Time zone',
+  location: 'Location',
   the_items_has_been_successfully_deleted:
     'The items have been successfully deleted.',
   once_delete_these_items_you_will_not_able_restore_them:
     "Once you delete these items, you won't be able to retrieve them later. Are you sure you want to delete them?",
   ops_something_went_wrong: 'Something went wrong! Please try again.',
   session_expired: 'Session Expired!',
-  this_report_does_not_contain_any_data_between_date_period: 'This report does not contain any data between date period.',
-  welcome_organization_account_has_been_created: '👋 Welcome, You organization account has been created, Sign in now!',
-  the_phone_number_already_used_in_another_account: 'he phone number is already used in another account',
-  the_email_already_used_in_another_account: 'The email is already used in another account',
+  this_report_does_not_contain_any_data_between_date_period:
+    'This report does not contain any data between date period.',
+  welcome_organization_account_has_been_created:
+    '👋 Welcome, You organization account has been created, Sign in now!',
+  the_phone_number_already_used_in_another_account:
+    'he phone number is already used in another account',
+  the_email_already_used_in_another_account:
+    'The email is already used in another account',
 };
diff --git a/client/src/store/ExchangeRate/exchange.actions.js b/client/src/store/ExchangeRate/exchange.actions.js
index 403a5bce8..d8dad485b 100644
--- a/client/src/store/ExchangeRate/exchange.actions.js
+++ b/client/src/store/ExchangeRate/exchange.actions.js
@@ -33,13 +33,34 @@ export const fetchExchangeRates = () => {
 };
 
 export const submitExchangeRate = ({ form }) => {
-  return (dispatch) => {
-    return ApiService.post('exchange_rates', form);
-  };
+  return (dispatch) =>
+    new Promise((resolve, reject) => {
+      ApiService.post('exchange_rates', form).then((response) => {
+        resolve(response);
+      }).catch((error)=>{
+        const {response} = error
+        const {data} = response;
+        reject(data?.errors)
+      })
+    });
 };
 
+// export const deleteExchangeRate = (id) => {
+//   return (dispatch) => ApiService.delete(`exchange_rates/${id}`);
+// }
+
 export const deleteExchangeRate = (id) => {
-  return (dispatch) => ApiService.delete(`exchange_rates/${id}`);
+  return (dispatch) =>
+    new Promise((resolve, reject) => {
+      ApiService.delete(`exchange_rates/${id}`)
+        .then((response) => {
+          dispatch({ type: t.EXCHANGE_RATE_DELETE, id });
+          resolve(response);
+        })
+        .catch((error) => {
+          reject(error.response.data.errors || []);
+        });
+    });
 };
 
 export const editExchangeRate = (id, form) => {
@@ -59,23 +80,24 @@ export const editExchangeRate = (id, form) => {
           if (errors) {
             dispatch({ type: t.CLEAR_EXCHANGE_RATE_FORM_ERRORS, errors });
           }
-          reject(error);
+          reject(data?.errors);
         });
     });
 };
 
-
-
 export const deleteBulkExchangeRates = ({ ids }) => {
-  return dispatch => new Promise((resolve, reject) => {
-    ApiService.delete(`exchange_rates/bulk`, { params: { ids }}).then((response) => {
-      dispatch({
-        type: t.EXCHANGE_RATES_BULK_DELETE,
-        payload: { ids }
-      });
-      resolve(response);
-    }).catch((error) => {
-      reject(error);
+  return (dispatch) =>
+    new Promise((resolve, reject) => {
+      ApiService.delete(`exchange_rates/bulk`, { params: { ids } })
+        .then((response) => {
+          dispatch({
+            type: t.EXCHANGE_RATES_BULK_DELETE,
+            payload: { ids },
+          });
+          resolve(response);
+        })
+        .catch((error) => {
+          reject(error);
+        });
     });
-  });
-};
\ No newline at end of file
+};
diff --git a/client/src/store/ExchangeRate/exchange.reducer.js b/client/src/store/ExchangeRate/exchange.reducer.js
index a6e78a85f..0d8f26010 100644
--- a/client/src/store/ExchangeRate/exchange.reducer.js
+++ b/client/src/store/ExchangeRate/exchange.reducer.js
@@ -21,17 +21,17 @@ export default createReducer(initialState, {
     state.loading = action.loading;
   },
 
-  [t.EXCHANGE_RATES_BULK_DELETE]:(state,action)=>{
-
-    const {ids} =action.payload;
-    const {exchange_rate} = {...state.exchangeRates};
-    ids.forEach((id)=>{
-      if(typeof exchange_rate[id] !=='undefined'){
-        delete exchange_rate[id]
+  [t.EXCHANGE_RATES_BULK_DELETE]: (state, action) => {
+    const { ids } = action.payload;
+    ids.forEach((id) => {
+      if (typeof state.exchangeRates[id] !== 'undefined') {
+        delete state.exchangeRates[id];
       }
     });
-    state.exchangeRates =exchange_rate
-  }
-
+  },
+  [t.EXCHANGE_RATE_DELETE]: (state, action) => {
+    if (typeof state.exchangeRates[action.id] !== 'undefined') {
+      delete state.exchangeRates[action.id];
+    }
+  },
 });
-
diff --git a/client/src/store/currencies/currencies.actions.js b/client/src/store/currencies/currencies.actions.js
index cda57f59f..434358aa4 100644
--- a/client/src/store/currencies/currencies.actions.js
+++ b/client/src/store/currencies/currencies.actions.js
@@ -8,7 +8,17 @@ export const submitCurrencies = ({ form }) => {
 };
 
 export const deleteCurrency = ({ currency_code }) => {
-  return (dispatch) => ApiService.delete(`currencies/${currency_code}`);
+  return (dispatch) =>
+    new Promise((resolve, reject) => {
+      ApiService.delete(`currencies/${currency_code}`)
+        .then((response) => {
+          dispatch({ type: t.CURRENCY_CODE_DELETE, currency_code });
+          resolve(response);
+        })
+        .catch((error) => {
+          reject(error.response.data.errors || []);
+        });
+    });
 };
 
 export const editCurrency = ({ id, form }) => {
@@ -36,12 +46,20 @@ export const editCurrency = ({ id, form }) => {
 export const fetchCurrencies = () => {
   return (dispatch) =>
     new Promise((resolve, reject) => {
+      dispatch({
+        type: t.CURRENCIES_TABLE_LOADING,
+        loading: true,
+      });
       ApiService.get('currencies')
         .then((response) => {
           dispatch({
             type: t.CURRENCIES_REGISTERED_SET,
             currencies: response.data.currencies,
           });
+          dispatch({
+            type: t.CURRENCIES_TABLE_LOADING,
+            loading: false,
+          });
           resolve(response);
         })
         .catch((error) => {
diff --git a/client/src/store/currencies/currencies.reducer.js b/client/src/store/currencies/currencies.reducer.js
index 99873e7b2..92119e61a 100644
--- a/client/src/store/currencies/currencies.reducer.js
+++ b/client/src/store/currencies/currencies.reducer.js
@@ -17,4 +17,12 @@ export default createReducer(initialState, {
       ..._currencies,
     };
   },
+  [t.CURRENCIES_TABLE_LOADING]: (state, action) => {
+    state.loading = action.loading;
+  },
+  [t.CURRENCY_CODE_DELETE]: (state, action) => {
+    if (typeof state.data[action.currency_code] !== 'undefined') {
+      delete state.data[action.currency_code];
+    }
+  },
 });
diff --git a/client/src/store/currencies/currencies.types.js b/client/src/store/currencies/currencies.types.js
index 44d79fd96..2b0684a24 100644
--- a/client/src/store/currencies/currencies.types.js
+++ b/client/src/store/currencies/currencies.types.js
@@ -1,4 +1,6 @@
 export default {
   CURRENCIES_REGISTERED_SET: 'CURRENCIES_REGISTERED_SET',
   CLEAR_CURRENCY_FORM_ERRORS: 'CLEAR_CURRENCY_FORM_ERRORS',
+  CURRENCIES_TABLE_LOADING: 'CURRENCIES_TABLE_LOADING',
+  CURRENCY_CODE_DELETE: 'CURRENCY_CODE_DELETE',
 };
diff --git a/client/src/store/itemCategories/itemsCategory.reducer.js b/client/src/store/itemCategories/itemsCategory.reducer.js
index 306d181c2..9eba40ca8 100644
--- a/client/src/store/itemCategories/itemsCategory.reducer.js
+++ b/client/src/store/itemCategories/itemsCategory.reducer.js
@@ -10,18 +10,16 @@ export default createReducer(initialState, {
   [t.ITEMS_CATEGORY_LIST_SET]: (state, action) => {
     const _categories = {};
 
-    action.categories.forEach(category => {
+    action.categories.forEach((category) => {
       _categories[category.id] = category;
     });
     state.categories = {
       ...state.categories,
-      ..._categories
+      ..._categories,
     };
   },
 
-  [t.ITEM_CATEGORIES_TABLE_SET]: (state, action) => {
-
-  },
+  [t.ITEM_CATEGORIES_TABLE_SET]: (state, action) => {},
 
   [t.CATEGORY_DELETE]: (state, action) => {
     const { id } = action.payload;
@@ -31,21 +29,19 @@ export default createReducer(initialState, {
     }
   },
 
-  [t.ITEM_CATEGORIES_TABLE_LOADING]: (state, action ) => {
+  [t.ITEM_CATEGORIES_TABLE_LOADING]: (state, action) => {
     const { loading } = action.payload;
     state.loading = !!loading;
   },
-  [t.ITEM_CATEGORIES_BULK_DELETE]:(state,action)=>{
-    const {ids} =action.payload;
-    const {categories} = {...state.categories};
-    ids.forEach((id)=>{
+  [t.ITEM_CATEGORIES_BULK_DELETE]: (state, action) => {
+    const { ids } = action.payload;
 
-      if(typeof categories[id] !=='undefined'){
-        delete categories[id]
+    ids.forEach((id) => {
+      if (typeof state.categories[id] !== 'undefined') {
+        delete state.categories[id];
       }
     });
-    state.categories =categories
-  }
+  },
 });
 
 export const getCategoryId = (state, id) => {
diff --git a/client/src/style/pages/preferences.scss b/client/src/style/pages/preferences.scss
index 415baece4..23815afe4 100644
--- a/client/src/style/pages/preferences.scss
+++ b/client/src/style/pages/preferences.scss
@@ -12,7 +12,7 @@
 
   &__inside-content {
     .#{$ns}-tab-list {
-      border-bottom: 1px solid #E5E5E5;
+      border-bottom: 1px solid #e5e5e5;
       padding-left: 15px;
       padding-right: 15px;
       align-items: baseline;
@@ -25,27 +25,40 @@
     }
   }
 
-  &__tabs-extra-actions{
+  &__tabs-extra-actions {
     margin-left: auto;
   }
 
-  &__topbar-actions{
+  &__topbar-actions {
     margin-left: auto;
     padding-right: 15px;
     margin-right: 15px;
     border-right: 1px solid #e5e5e5;
 
-    .bp3-button + .bp3-button{
+    .bp3-button + .bp3-button {
       margin-left: 10px;
     }
   }
 
   &-menu {
-    width: 374px;
+    width: 448px;
   }
+
+
   &-button {
     margin-right: 10px;
   }
+
+  &__loading-overlay{
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(252, 253, 255, 0.5);
+    display: flex;
+    justify-content: center;
+  }
   &__floating-footer {
     position: fixed;
     bottom: 0;
@@ -95,7 +108,7 @@
       color: #333;
 
       &:hover,
-      &.#{$ns}-active{
+      &.#{$ns}-active {
         background-color: #ebf1f5;
         color: #333;
       }
@@ -106,30 +119,57 @@
 //  Preference
 //---------------------------------
 .preferences__inside-content--general {
+  &:not(.preferences--loading){
+    margin-bottom: 25px;
+  }
+
   .bp3-form-group {
     margin: 25px 20px 20px;
     .bp3-label {
       min-width: 140px;
     }
     .bp3-form-content {
-      width: 384px;
+      width: 55%;
+      .bp3-input-group .bp3-input {
+        position: relative;
+        // width:580px;
+        width: 120%;
+      }
     }
   }
+  .form-group--time-zone {
+    .bp3-menu {
+      max-height: 300px;
+      max-width: 400px;
+      overflow: auto;
+      padding: 0;
+    }
+    .bp3-text-muted {
+      color: #000000;
+    }
+    .bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
+      background: #fff;
+      box-shadow: 0 0 0 transparent;
+      border: 1px solid #ced4da;
+      padding: 8px;
+    }
+  }
+
+  .preferences-page__loading-overlay{
+    background: rgba(252, 253, 255, 0.9);
+  }
 }
 
-
 // Users/Roles List.
 // ---------------------------------
-.preferences__inside-content--users-roles{
-  
-  .bigcapital-datatable{
-
+.preferences__inside-content--users-roles {
+  .bigcapital-datatable {
     .table .th,
-    .table .td{
+    .table .td {
       padding: 0.8rem 0.5rem;
     }
-    .td.status{
+    .td.status {
       text-transform: uppercase;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/client/src/utils.js b/client/src/utils.js
index a70822108..1c432ad5a 100644
--- a/client/src/utils.js
+++ b/client/src/utils.js
@@ -53,7 +53,8 @@ export const momentFormatter = (format) => {
   return {
     formatDate: date => moment(date).format(format),
     parseDate: str => moment(str, format).toDate(),
-    placeholder: `${format} (moment)`,
+    // placeholder: `${format} (moment)`,
+    placeholder: `${format}`,
   };
 }