diff --git a/classes/class-settings.php b/classes/class-settings.php
index 8684f07..6074913 100644
--- a/classes/class-settings.php
+++ b/classes/class-settings.php
@@ -588,7 +588,18 @@ public static function get_user_roles() {
 		if ( empty( $wp_roles ) ) {
 			$wp_roles = new WP_Roles();
 		}
-		return $wp_roles->get_names();
+
+		$roles            = $wp_roles->get_names();
+		$translated_roles = array();
+
+		foreach ( $roles as $name => $display_name ) {
+			$translated_roles[] = array(
+				'label' => translate_user_role( $display_name ),
+				'value' => $name,
+			);
+		}
+
+		return $translated_roles;
 	}
 
 	/**
diff --git a/src/admin/options/components/permission-user-role/index.js b/src/admin/options/components/permission-user-role/index.js
index 237868d..970a842 100644
--- a/src/admin/options/components/permission-user-role/index.js
+++ b/src/admin/options/components/permission-user-role/index.js
@@ -13,7 +13,7 @@ import { AdminContext } from '../../../index';
 export default function PermissionUserRole() {
 	const { options, setOptions } = useContext( AdminContext );
 
-	const allUserRoles = window.chbeObj.userRoles || {};
+	const userRoles = window.chbeObj.userRoles || {};
 
 	const onChange = ( role ) => {
 		const newPermissionRoles = options.permissionRoles.includes( role )
@@ -32,12 +32,12 @@ export default function PermissionUserRole() {
 		<PanelBody
 			title={ __( 'User roles allowed to use this extension', 'custom-html-block-extension' ) }
 		>
-			{ Object.keys( allUserRoles ).map( ( key ) => (
+			{ userRoles.map( ( role, index ) => (
 				<ToggleControl
-					key={ key }
-					label={ allUserRoles[ key ] }
-					checked={ options.permissionRoles.includes( key ) }
-					onChange={ () => onChange( key ) }
+					key={ index }
+					label={ role.label }
+					checked={ options.permissionRoles.includes( role.value ) }
+					onChange={ () => onChange( role.value ) }
 				/>
 			) ) }
 		</PanelBody>