diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.js b/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.js
index 15b326440..349821672 100644
--- a/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.js
+++ b/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { Formik } from 'formik';
-import { mapKeys } from 'lodash';
+import { mapKeys, omit, pick } from 'lodash';
 
 import 'style/pages/Preferences/Roles/Form.scss';
 
@@ -12,6 +12,7 @@ import { AppToaster, FormattedMessage as T } from 'components';
 import { CreateRolesFormSchema, EditRolesFormSchema } from './RolesForm.schema';
 
 import { useRolesFormContext } from './RolesFormProvider';
+import { mapperPermissionSchema } from './utils';
 
 import RolesFormContent from './RolesFormContent';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
@@ -31,7 +32,7 @@ function RolesForm({
   // #withDashboardActions
   changePreferencesPageTitle,
 }) {
-  const { createRoleMutate, editRoleMutate, permissions } =
+  const { createRolePermissionMutate, editRolePermissionMutate, permissions } =
     useRolesFormContext();
 
   // Initial values.
@@ -39,47 +40,29 @@ function RolesForm({
     ...defaultValues,
   };
 
-  const MapperPermissionSchema = (data) => {
-    return data.map(({ role_name, role_description, permissions }) => {
-      const permission = mapKeys(permissions, (value, key) => {
-        // return value;
-      });
-      return {
-        role_name: role_name,
-        role_description: role_description,
-        permissions: [permission],
-      };
-    });
-  };
-
   React.useEffect(() => {
     changePreferencesPageTitle(<T id={'roles.label'} />);
   }, [changePreferencesPageTitle]);
 
-  const handleFormSubmit = (values, { setSubmitting, resetForm }) => {
+  const handleFormSubmit = (values, { setSubmitting }) => {
+    const permission = mapperPermissionSchema(values);
     const form = {
       ...values,
+      permissions: permission,
     };
-
-    // Handle the request success.
+    setSubmitting(true);
     const onSuccess = () => {
       AppToaster.show({
-        message: '',
+        message: intl.get('roles.permisssion_schema.success_message'),
         intent: Intent.SUCCESS,
       });
-    };
-    // Handle the request error.
-    const onError = (
-      {
-        // response: {
-        //   data: { errors },
-        // },
-      },
-    ) => {
       setSubmitting(false);
     };
 
-    createRoleMutate(form).then(onSuccess).catch(onError);
+    const onError = (errors) => {
+      setSubmitting(false);
+    };
+    createRolePermissionMutate(form).then(onSuccess).catch(onError);
   };
 
   return (
@@ -87,8 +70,9 @@ function RolesForm({
       initialValues={initialValues}
       validationSchema={CreateRolesFormSchema}
       onSubmit={handleFormSubmit}
-      component={RolesFormContent}
-    />
+    >
+      <RolesFormContent />
+    </Formik>
   );
 }
 
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.schema.js b/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.schema.js
index dce8eb3cc..ab1012778 100644
--- a/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.schema.js
+++ b/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.schema.js
@@ -3,7 +3,7 @@ import intl from 'react-intl-universal';
 import { DATATYPES_LENGTH } from 'common/dataTypes';
 
 const Schema = Yup.object().shape({
-  role_name: Yup.string().label(intl.get('name')).required(),
+  role_name: Yup.string().required().label(intl.get('roles.label.role_name')),
   role_description: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
 
   permissions: Yup.object().shape({
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormContent.js b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormContent.js
index 539989c6a..84b5684e8 100644
--- a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormContent.js
+++ b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormContent.js
@@ -10,7 +10,7 @@ import {
 } from '@blueprintjs/core';
 import { inputIntent } from 'utils';
 import { FormattedMessage as T, FieldRequiredHint } from 'components';
-
+import { useAutofocus } from 'hooks';
 import { RolesPermissionList } from './components';
 
 /**
@@ -19,7 +19,8 @@ import { RolesPermissionList } from './components';
 export default function RolesFormContent() {
   const history = useHistory();
 
-  const { isSubmitting } = useFormikContext();
+  const { isSubmitting, values } = useFormikContext();
+  const roleNameFieldRef = useAutofocus();
 
   const handleCloseClick = () => {
     history.go(-1);
@@ -35,10 +36,14 @@ export default function RolesFormContent() {
             labelInfo={<FieldRequiredHint />}
             className={'form-group--name'}
             intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'role_name'} />}
+            helperText={<ErrorMessage name="role_name" />}
             inline={true}
           >
-            <InputGroup medium={true} {...field} />
+            <InputGroup
+              medium={true}
+              inputRef={(ref) => (roleNameFieldRef.current = ref)}
+              {...field}
+            />
           </FormGroup>
         )}
       </FastField>
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormFloatingActions.js b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormFloatingActions.js
new file mode 100644
index 000000000..a424c42f3
--- /dev/null
+++ b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormFloatingActions.js
@@ -0,0 +1 @@
+rfc
\ No newline at end of file
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormPage.js b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormPage.js
index a263d2942..d8dafac3a 100644
--- a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormPage.js
+++ b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormPage.js
@@ -1,5 +1,4 @@
 import React from 'react';
-
 import RolesForm from './RolesForm';
 import { RolesFormProvider } from './RolesFormProvider';
 
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormProvider.js b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormProvider.js
index 73f416b51..e2cb74a48 100644
--- a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormProvider.js
+++ b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormProvider.js
@@ -5,8 +5,9 @@ import { CLASSES } from 'common/classes';
 
 import {
   useCreateRolePermissionSchema,
-  useEditRole,
+  useEditRolePermissionSchema,
   usePermissionsSchema,
+  useSaveSettings
 } from 'hooks/query';
 import PreferencesPageLoader from '../../../PreferencesPageLoader';
 
@@ -28,6 +29,9 @@ function RolesFormProvider({ ...props }) {
     isFetching: isPermissionsSchemaFetching,
   } = usePermissionsSchema();
 
+  // Save Organization Settings.
+  const { mutateAsync: saveSettingMutate } = useSaveSettings();
+
   // Provider state.
   const provider = {
     permissionsSchema,
@@ -35,6 +39,7 @@ function RolesFormProvider({ ...props }) {
     isPermissionsSchemaFetching,
     createRolePermissionMutate,
     editRolePermissionMutate,
+    saveSettingMutate
   };
 
   return (
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/utils.js b/src/containers/Preferences/Users/Roles/RolesForm/utils.js
new file mode 100644
index 000000000..4c99ecf5b
--- /dev/null
+++ b/src/containers/Preferences/Users/Roles/RolesForm/utils.js
@@ -0,0 +1,12 @@
+export const mapperPermissionSchema = (data) => {
+  return [data].map(({ permissions }) =>
+    Object.keys(permissions).map((item) => {
+      const [value, key] = item.split('/');
+      return {
+        subject: value,
+        ability: key,
+        value: permissions[item],
+      };
+    }),
+  );
+};
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index 006185a77..62a4c6941 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1473,6 +1473,8 @@
   "roles.column.description":"description",
   "roles.edit_roles":"Edit Roles",
   "roles.delete_roles":"Delete Roles",
+  "roles.label.role_name":"Role name",
   "sidebar.transactions_locaking":"Transactions Locaking",
-  "transactions_locking.dialog.label":"Transactions locking"
+  "transactions_locking.dialog.label":"Transactions locking",
+  "roles.permisssion_schema.success_message":"The given role hsa been created successfully"
 }
\ No newline at end of file