diff --git a/src/containers/Alerts/Roles/RoleDeleteAlert.js b/src/containers/Alerts/Roles/RoleDeleteAlert.js
index c3b5e1946..ff240ebaa 100644
--- a/src/containers/Alerts/Roles/RoleDeleteAlert.js
+++ b/src/containers/Alerts/Roles/RoleDeleteAlert.js
@@ -5,6 +5,7 @@ import { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 
 import { useDeleteRole } from 'hooks/query';
+import { handleDeleteErrors } from '../../Preferences/Users/Roles/utils';
 
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
@@ -45,7 +46,9 @@ function RoleDeleteAlert({
           response: {
             data: { errors },
           },
-        }) => {},
+        }) => {
+          handleDeleteErrors(errors);
+        },
       )
       .finally(() => {
         closeAlert(name);
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.js b/src/containers/Preferences/Users/Roles/RolesForm/RolesForm.js
index 37f352b2b..5062bb2e4 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 { useHistory } from 'react-router-dom';
 import intl from 'react-intl-universal';
 import { Formik } from 'formik';
-import { defaultTo, sumBy, isEmpty } from 'lodash';
 
 import 'style/pages/Preferences/Roles/Form.scss';
 
@@ -32,6 +32,9 @@ function RolesForm({
   // #withDashboardActions
   changePreferencesPageTitle,
 }) {
+  // History context.
+  const history = useHistory();
+
   const {
     isNewMode,
     createRolePermissionMutate,
@@ -67,6 +70,7 @@ function RolesForm({
         intent: Intent.SUCCESS,
       });
       setSubmitting(false);
+      history.push('/preferences/users');
     };
 
     const onError = (errors) => {
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormPage.js b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormPage.js
index a307d9195..14accbe68 100644
--- a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormPage.js
+++ b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormPage.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useParams } from 'react-router-dom';
 import RolesForm from './RolesForm';
 import { RolesFormProvider } from './RolesFormProvider';
 
@@ -6,8 +7,11 @@ import { RolesFormProvider } from './RolesFormProvider';
  * Roles Form page.
  */
 export default function RolesFormPage() {
+  const { id } = useParams();
+  const idInteger = parseInt(id, 10);
+
   return (
-    <RolesFormProvider roleId={undefined}>
+    <RolesFormProvider roleId={idInteger}>
       <RolesForm />
     </RolesFormProvider>
   );
diff --git a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormProvider.js b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormProvider.js
index 3e8cb2982..2484f0c62 100644
--- a/src/containers/Preferences/Users/Roles/RolesForm/RolesFormProvider.js
+++ b/src/containers/Preferences/Users/Roles/RolesForm/RolesFormProvider.js
@@ -31,8 +31,6 @@ function RolesFormProvider({ roleId, ...props }) {
     isFetching: isPermissionsSchemaFetching,
   } = usePermissionsSchema();
 
-  // const roleId = 6;
-
   const { data: permission, isLoading: isPermissionLoading } =
     useRolePermission(roleId, {
       enabled: !!roleId,
diff --git a/src/containers/Preferences/Users/Roles/RolesLanding/RolesDataTable.js b/src/containers/Preferences/Users/Roles/RolesLanding/RolesDataTable.js
index bfc5ee67a..f4f41ef84 100644
--- a/src/containers/Preferences/Users/Roles/RolesLanding/RolesDataTable.js
+++ b/src/containers/Preferences/Users/Roles/RolesLanding/RolesDataTable.js
@@ -1,4 +1,6 @@
 import React from 'react';
+import { useHistory } from 'react-router-dom';
+
 import intl from 'react-intl-universal';
 
 import { DataTable } from 'components';
@@ -6,6 +8,7 @@ import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 
 import { useRolesTableColumns, ActionsMenu } from './components';
 import withAlertsActions from 'containers/Alert/withAlertActions';
+import { useRolesContext } from './RolesListProvider';
 
 import { compose } from 'utils';
 
@@ -16,23 +19,33 @@ function RolesDataTable({
   // #withAlertsActions
   openAlert,
 }) {
+  // History context.
+  const history = useHistory();
+
   const columns = useRolesTableColumns();
 
+  const { roles, isRolesFetching, isRolesLoading } = useRolesContext();
+
   const handleDeleteRole = ({ id }) => {
     openAlert('role-delete', { roleId: id });
   };
 
-  // const Data = [{ name: 'AH', description: 'Description' }];
+  const handleEditRole = ({ id }) => {
+    history.push(`/preferences/roles/${id}`);
+  };
+
   return (
     <DataTable
       columns={columns}
-      data={[]}
-      // loading={}
-      // progressBarLoading={}
+      data={roles}
+      loading={isRolesLoading}
+      headerLoading={isRolesFetching}
+      progressBarLoading={isRolesFetching}
       TableLoadingRenderer={TableSkeletonRows}
       ContextMenu={ActionsMenu}
       payload={{
         onDeleteRole: handleDeleteRole,
+        onEditRole: handleEditRole,
       }}
     />
   );
diff --git a/src/containers/Preferences/Users/Roles/RolesLanding/RolesListProvider.js b/src/containers/Preferences/Users/Roles/RolesLanding/RolesListProvider.js
index 248b47260..c9b086342 100644
--- a/src/containers/Preferences/Users/Roles/RolesLanding/RolesListProvider.js
+++ b/src/containers/Preferences/Users/Roles/RolesLanding/RolesListProvider.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
-// import {} from 'hooks/query';
+import { useRoles } from 'hooks/query';
 
 const RolesListContext = React.createContext();
 
@@ -9,8 +9,20 @@ const RolesListContext = React.createContext();
  * Roles list provider.
  */
 function RolesListProvider({ ...props }) {
+
+   // fetch roles list.
+  const {
+    data: roles,
+    isFetching: isRolesFetching,
+    isLoading: isRolesLoading,
+  } = useRoles();
+
   // Provider state.
-  const provider = {};
+  const provider = {
+    roles,
+    isRolesFetching,
+    isRolesLoading,
+  };
   return (
     <div
       className={classNames(
diff --git a/src/containers/Preferences/Users/Roles/RolesLanding/components.js b/src/containers/Preferences/Users/Roles/RolesLanding/components.js
index 2ef284188..c1284f19c 100644
--- a/src/containers/Preferences/Users/Roles/RolesLanding/components.js
+++ b/src/containers/Preferences/Users/Roles/RolesLanding/components.js
@@ -8,12 +8,16 @@ import { Icon, If } from 'components';
 /**
  * Context menu of roles.
  */
-export function ActionsMenu({ payload: { onDeleteRole }, row: { original } }) {
+export function ActionsMenu({
+  payload: { onDeleteRole, onEditRole },
+  row: { original },
+}) {
   return (
     <Menu>
       <MenuItem
         icon={<Icon icon="pen-18" />}
         text={intl.get('roles.edit_roles')}
+        onClick={safeCallback(onEditRole, original)}
       />
       <MenuDivider />
       <MenuItem
@@ -38,16 +42,16 @@ export function useRolesTableColumns() {
         Header: intl.get('roles.column.name'),
         accessor: 'name',
         className: 'name',
-        width: '100',
-        disableSortBy: true,
+        width: '80',
+        textOverview: true,
       },
       {
         id: 'description',
         Header: intl.get('roles.column.description'),
         accessor: 'description',
         className: 'description',
-        width: '120',
-        disableSortBy: true,
+        width: '180',
+        textOverview: true,
       },
     ],
     [],
diff --git a/src/hooks/query/roles.js b/src/hooks/query/roles.js
index 7d45fac4e..3d76429d7 100644
--- a/src/hooks/query/roles.js
+++ b/src/hooks/query/roles.js
@@ -5,8 +5,9 @@ import t from './types';
 
 // Common invalidate queries.
 const commonInvalidateQueries = (queryClient) => {
-  queryClient.invalidateQueries(t.ROLES_PERMISSIONS_SCHEMA);
   queryClient.invalidateQueries(t.ROLE);
+  queryClient.invalidateQueries(t.ROLES);
+  queryClient.invalidateQueries(t.ROLES_PERMISSIONS_SCHEMA);
 };
 
 /**
@@ -93,3 +94,18 @@ export function useRolePermission(role_id, props, requestProps) {
     },
   );
 }
+
+/**
+ * Retrieve the roles.
+ */
+export function useRoles(props, query) {
+  return useRequestQuery(
+    [t.ROLES, query],
+    { method: 'get', url: `roles`, params: query },
+    {
+      select: (res) => res.data.roles,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index f7062edce..b8127c3bf 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1470,11 +1470,14 @@
   "list.create":"Create {value}",
   "roles.label":"Roles",
   "roles.column.name":"Name",
-  "roles.column.description":"description",
+  "roles.column.description":"Description",
+  "roles.column.role_name":"Role Name",
   "roles.edit_roles":"Edit Roles",
   "roles.delete_roles":"Delete Roles",
   "roles.label.role_name":"Role Name",
   "roles.label.role_name_":"Role name",
+  "roles.error.role_is_predefined":"Role is predefined, you cannot delete predefined roles.",
+  "roles.error.you_cannot_change_your_own_role":"You cannot change your own role.",
   "sidebar.transactions_locaking":"Transactions Locaking",
   "transactions_locking.dialog.label":"Transactions locking",
   "roles.permission_schema.success_message":"The role has been created successfully.",