diff --git a/src/containers/Alerts/Roles/RoleDeleteAlert.js b/src/containers/Alerts/Roles/RoleDeleteAlert.js
new file mode 100644
index 000000000..cf2788959
--- /dev/null
+++ b/src/containers/Alerts/Roles/RoleDeleteAlert.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormattedMessage as T, FormattedHTMLMessage } from 'components';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+import { useDeleteRole } from 'hooks/query';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Role delete alert.
+ */
+function RoleDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { roleId },
+}) {
+  const { mutateAsync: deleteRole, isLoading } = useDeleteRole();
+
+  // Handle cancel delete role alert.
+  const handleCancelDelete = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm delete role.
+  const handleConfirmDeleteRole = () => {
+    deleteRole(roleId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('roles.permission_schema.delete.alert_message'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch(
+        ({
+          response: {
+            data: { errors },
+          },
+        }) => {},
+      )
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelDelete}
+      onConfirm={handleConfirmDeleteRole}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={
+            'roles.permission_schema.once_delete_this_role_you_will_able_to_restore_it'
+          }
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(RoleDeleteAlert);
diff --git a/src/containers/Preferences/Users/Roles/RolesAlerts.js b/src/containers/Preferences/Users/Roles/RolesAlerts.js
new file mode 100644
index 000000000..2f96cd32b
--- /dev/null
+++ b/src/containers/Preferences/Users/Roles/RolesAlerts.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+import RoleDeleteAlert from '../../../Alerts/Roles/RoleDeleteAlert';
+
+export default [{ name: 'role-delete', component: RoleDeleteAlert }];
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.js b/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.js
index 349821672..a6c139c96 100644
--- a/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.js
+++ b/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.js
@@ -17,7 +17,7 @@ import { mapperPermissionSchema } from './utils';
 import RolesFormContent from './RolesFormContent';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 
-import { compose } from 'utils';
+import { compose, transformToForm } from 'utils';
 
 const defaultValues = {
   role_name: '',
@@ -32,12 +32,18 @@ function RolesForm({
   // #withDashboardActions
   changePreferencesPageTitle,
 }) {
-  const { createRolePermissionMutate, editRolePermissionMutate, permissions } =
-    useRolesFormContext();
+  const {
+    isNewMode,
+    createRolePermissionMutate,
+    editRolePermissionMutate,
+    permissionSchema,
+    roleId,
+  } = useRolesFormContext();
 
   // Initial values.
   const initialValues = {
     ...defaultValues,
+    // ...transformToForm(permissionSchema, defaultValues),
   };
 
   React.useEffect(() => {
@@ -53,7 +59,11 @@ function RolesForm({
     setSubmitting(true);
     const onSuccess = () => {
       AppToaster.show({
-        message: intl.get('roles.permisssion_schema.success_message'),
+        message: intl.get(
+          isNewMode
+            ? 'roles.permission_schema.success_message'
+            : 'roles.permission_schema.upload_message',
+        ),
         intent: Intent.SUCCESS,
       });
       setSubmitting(false);
@@ -62,13 +72,17 @@ function RolesForm({
     const onError = (errors) => {
       setSubmitting(false);
     };
-    createRolePermissionMutate(form).then(onSuccess).catch(onError);
+    if (isNewMode) {
+      createRolePermissionMutate(form).then(onSuccess).catch(onError);
+    } else {
+      editRolePermissionMutate([roleId, form]).then(onSuccess).catch(onError);
+    }
   };
 
   return (
     <Formik
       initialValues={initialValues}
-      validationSchema={CreateRolesFormSchema}
+      validationSchema={isNewMode ? CreateRolesFormSchema : EditRolesFormSchema}
       onSubmit={handleFormSubmit}
     >
       <RolesFormContent />
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormContent.js b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormContent.js
index 968befeef..8b96093b7 100644
--- a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormContent.js
+++ b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormContent.js
@@ -25,7 +25,7 @@ export default function RolesFormContent() {
   const handleCloseClick = () => {
     history.go(-1);
   };
-  console.log(values, 'XX');
+  console.log(values, 'EE');
   return (
     <Form>
       {/* ----------  name ----------  */}
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormProvider.js b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormProvider.js
index e2cb74a48..04154598d 100644
--- a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormProvider.js
+++ b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormProvider.js
@@ -1,15 +1,16 @@
 import React from 'react';
-import { flatMap, map } from 'lodash';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
+import _ from 'lodash';
 
 import {
   useCreateRolePermissionSchema,
   useEditRolePermissionSchema,
   usePermissionsSchema,
-  useSaveSettings
+  useRolePermission,
 } from 'hooks/query';
 import PreferencesPageLoader from '../../../PreferencesPageLoader';
+import { mapperPermissionSchema } from './utils';
 
 const RolesFormContext = React.createContext();
 
@@ -20,6 +21,7 @@ function RolesFormProvider({ ...props }) {
   // Create and edit roles mutations.
   const { mutateAsync: createRolePermissionMutate } =
     useCreateRolePermissionSchema();
+
   const { mutateAsync: editRolePermissionMutate } =
     useEditRolePermissionSchema();
 
@@ -29,17 +31,25 @@ function RolesFormProvider({ ...props }) {
     isFetching: isPermissionsSchemaFetching,
   } = usePermissionsSchema();
 
-  // Save Organization Settings.
-  const { mutateAsync: saveSettingMutate } = useSaveSettings();
+  const roleId = 6;
+
+  const { data: permissionSchema, isLoading: isPermissionLoading } =
+    useRolePermission(roleId, {
+      enabled: !!roleId,
+    });
+
+  const isNewMode = !roleId;
 
   // Provider state.
   const provider = {
+    isNewMode,
+    roleId,
     permissionsSchema,
+    permissionSchema,
     isPermissionsSchemaLoading,
     isPermissionsSchemaFetching,
     createRolePermissionMutate,
     editRolePermissionMutate,
-    saveSettingMutate
   };
 
   return (
@@ -50,7 +60,7 @@ function RolesFormProvider({ ...props }) {
       )}
     >
       <div className={classNames(CLASSES.CARD)}>
-        {isPermissionsSchemaLoading ? (
+        {isPermissionsSchemaLoading || isPermissionLoading ? (
           <PreferencesPageLoader />
         ) : (
           <RolesFormContext.Provider value={provider} {...props} />
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/components.js b/src/containers/Preferences/Users/Roles/RolesForm/components.js
index f7ef4bbd6..75b7921df 100644
--- a/src/containers/Preferences/Users/Roles/RolesForm/components.js
+++ b/src/containers/Preferences/Users/Roles/RolesForm/components.js
@@ -33,7 +33,7 @@ const AbilitiesList = ({ subject, abilities }) => {
       {abilities?.map(({ key, label }) => (
         <FastField name={`permissions.${subject}/${key}`} type="checkbox">
           {({ form: { setFieldValue, values }, field }) => (
-            <Checkbox inline={true} label={label} name={subject} {...field} />
+            <Checkbox inline={true} label={label} {...field} />
           )}
         </FastField>
       ))}
@@ -46,7 +46,7 @@ const ExtraAbilitiesList = ({ subject, extraAbilities }) => {
     <AbilitieList>
       <FastField name={`permissions.${subject}/${key}`} type="checkbox">
         {({ form: { setFieldValue, values }, field }) => (
-          <Checkbox inline={true} label={label} name={subject} {...field} />
+          <Checkbox inline={true} label={label} {...field} />
         )}
       </FastField>
     </AbilitieList>
diff --git a/src/hooks/query/roles.js b/src/hooks/query/roles.js
index af514238c..2b34e0036 100644
--- a/src/hooks/query/roles.js
+++ b/src/hooks/query/roles.js
@@ -75,3 +75,19 @@ export function usePermissionsSchema(query, props) {
     },
   );
 }
+
+/**
+ * Retrieve the role permisstion schema.
+ * @param {number} role_id - role id.
+ */
+export function useRolePermission(role_id, props, requestProps) {
+  return useRequestQuery(
+    [t.ROLE, role_id],
+    { method: 'get', url: `roles/${role_id}`, ...requestProps },
+    {
+      select: (res) => res.data.role,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index 45c048bdd..d0f36932d 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1476,5 +1476,8 @@
   "roles.label.role_name":"Role name",
   "sidebar.transactions_locaking":"Transactions Locaking",
   "transactions_locking.dialog.label":"Transactions locking",
-  "roles.permisssion_schema.success_message":"The role has been created successfully."
+  "roles.permissions_schema.success_message":"The role has been created successfully.",
+  "roles.permission_schema.upload_message":"The given role hsa been updated successfully.",
+  "roles.permission_schema.delete.alert_message":"The given role has been deleted successfully.",
+  "roles.permission_schema.once_delete_this_role_you_will_able_to_restore_it":""
 }
\ No newline at end of file
diff --git a/src/routes/preferences.js b/src/routes/preferences.js
index 1c7021654..9fc454ddd 100644
--- a/src/routes/preferences.js
+++ b/src/routes/preferences.js
@@ -26,6 +26,11 @@ export default [
     component: Roles,
     exact: true,
   },
+  {
+    path: `${BASE_URL}/roles/:id`,
+    component: Roles,
+    exact: true,
+  },
   {
     path: `${BASE_URL}/currencies`,
     component: Currencies,