diff --git a/src/components/confirm-dialog/ConfirmDialog.tsx b/src/components/confirm-dialog/ConfirmDialog.tsx
index d212a17101..9ec7a7da5b 100644
--- a/src/components/confirm-dialog/ConfirmDialog.tsx
+++ b/src/components/confirm-dialog/ConfirmDialog.tsx
@@ -79,7 +79,7 @@ export const ConfirmDialogModal = ({
         <Button
           id="modal-cancel"
           key="cancel"
-          variant={ButtonVariant.secondary}
+          variant={ButtonVariant.link}
           onClick={() => {
             if (onCancel) onCancel();
             toggleDialog();
diff --git a/src/realm-roles/RealmRoleForm.tsx b/src/realm-roles/RealmRoleForm.tsx
index a343315fe5..ae1f12a675 100644
--- a/src/realm-roles/RealmRoleForm.tsx
+++ b/src/realm-roles/RealmRoleForm.tsx
@@ -87,4 +87,4 @@ export const RealmRoleForm = ({
       </ActionGroup>
     </FormAccess>
   );
-};
+};
\ No newline at end of file
diff --git a/src/realm-roles/RealmRolesSection.tsx b/src/realm-roles/RealmRolesSection.tsx
index 75e4c35a2f..f53cbb45ab 100644
--- a/src/realm-roles/RealmRolesSection.tsx
+++ b/src/realm-roles/RealmRolesSection.tsx
@@ -71,6 +71,26 @@ export const RealmRolesSection = () => {
     },
   });
 
+  // const [toggleAssociatedRoleDialog, associatedRolesList] = useConfirmDialog({
+  //   titleKey: "roles:associatedRolesModalTitle",
+  //   messageKey: t("roles:roleDeleteConfirmDialog", {
+  //     selectedRoleName: selectedRole ? selectedRole!.name : "",
+  //   }),
+  //   continueButtonLabel: t("Add"),
+  //   continueButtonVariant: ButtonVariant.danger,
+  //   onConfirm: async () => {
+  //     try {
+  //       await adminClient.roles.delById({
+  //         id: selectedRole!.id!,
+  //       });
+  //       setSelectedRole(undefined);
+  //       addAlert(t("roleDeletedSuccess"), AlertVariant.success);
+  //     } catch (error) {
+  //       addAlert(`${t("roleDeleteError")} ${error}`, AlertVariant.danger);
+  //     }
+  //   },
+  // });
+
   const goToCreate = () => history.push(`${url}/add-role`);
   return (
     <>
@@ -90,12 +110,12 @@ export const RealmRolesSection = () => {
           }
           actions={[
             {
-              title: t("common:Delete"),
+              title: t("addAssociatedRolesText"),
               onRowClick: (role) => {
                 setSelectedRole(role);
                 toggleDeleteDialog();
               },
-            },
+            }
           ]}
           columns={[
             {
diff --git a/src/realm-roles/messages.json b/src/realm-roles/messages.json
index e962946d2c..86fc1d0fec 100644
--- a/src/realm-roles/messages.json
+++ b/src/realm-roles/messages.json
@@ -1,8 +1,12 @@
 {
   "roles": {
     "attributes": "Attributes",
+    "add": "Add",
     "addAttributeText": "Add an attribute",
     "deleteAttributeText": "Delete an attribute",
+    "addAssociatedRolesText": "Add associated roles",
+    "addAssociatedRolesSuccess": "Associated roles have been added",
+    "associatedRolesModalTitle": "Add roles to {{name}}",
     "title": "Realm roles",
     "createRole": "Create role",
     "importRole": "Import role",
@@ -24,7 +28,7 @@
     "roleCreateError": "Could not create role: {{error}}",
     "roleImportSuccess": "Role import successful",
     "roleDeleteConfirm": "Delete role?",
-    "roleDeleteConfirmDialog": "This action will permanently delete the role {{selectedRoleName}} and cannot be undone.",
+    "roleDeleteConfirmDialog": "This action will permanently delete the role {{name}} and cannot be undone.",
     "roleDeletedSuccess": "The role has been deleted",
     "roleDeleteError": "Could not delete role:",
     "roleSaveSuccess": "The role has been saved",