diff --git a/web/client/src/sections/install/containers/roles.jsx b/web/client/src/sections/install/containers/roles.jsx
index e38e6ab..34a84d4 100644
--- a/web/client/src/sections/install/containers/roles.jsx
+++ b/web/client/src/sections/install/containers/roles.jsx
@@ -76,22 +76,22 @@ const Roles = (props) => {
                                 return (
                                     <div className='myseparator' key={index} style={{ display: 'flex', alignItems: 'center' }}>
                                         {
-                                            row.correlationProject.length >= 3 ? (
-                                                <Tooltip content={item.pepProjectName}>
-                                                    <div style={{ width: item.pepProjectName.length > 7 ? '112px' : '', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: index > 2 ? 'none' : '', color: item.del ? '#F93920' : '' }}>
-                                                        {item.pepProjectName}
+                                            row?.correlationProject?.length >= 3 ? (
+                                                <Tooltip content={item.pepProjectName || item.name}>
+                                                    <div style={{ width: item?.pepProjectName?.length > 7 || item?.name?.length > 7 ? '112px' : '', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: index > 2 ? 'none' : '', color: item.del ? '#F93920' : '' }}>
+                                                        {item.pepProjectName || item.name}
                                                     </div>
                                                 </Tooltip>
-                                            ) : row.correlationProject.length == 2 ? (
-                                                <Tooltip content={item.pepProjectName}>
-                                                    <div style={{ width: item.pepProjectName.length > 12 ? '173.5px' : '', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', color: item.del ? '#F93920' : '' }}>
-                                                        {item.pepProjectName}
+                                            ) : row?.correlationProject?.length == 2 ? (
+                                                <Tooltip content={item.pepProjectName || item.name}>
+                                                    <div style={{ width: item?.pepProjectName?.length > 12 || item?.name?.length > 12 ? '173.5px' : '', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', color: item.del ? '#F93920' : '' }}>
+                                                        {item.pepProjectName || item.name}
                                                     </div>
                                                 </Tooltip>
                                             ) : (
-                                                <Tooltip content={item.pepProjectName}>
-                                                    <div style={{ width: item.pepProjectName.length > 25 ? '358px' : '', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', color: item.del ? '#F93920' : '' }}>
-                                                        {item.pepProjectName}
+                                                <Tooltip content={item.pepProjectName || item.name}>
+                                                    <div style={{ width: item?.pepProjectName?.length > 25 || item?.name?.length > 25 ? '358px' : '', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', color: item.del ? '#F93920' : '' }}>
+                                                        {item.pepProjectName || item.name}
                                                     </div>
                                                 </Tooltip>
                                             )
@@ -102,14 +102,14 @@ const Roles = (props) => {
                             })
                         }
                         {
-                            row.correlationProject.length > 3 ? (
+                            row?.correlationProject?.length > 3 ? (
                                 <Tooltip content={
                                     <div style={{ display: 'flex', flexWrap: 'wrap', width: '100%' }}>
                                         {
                                             row.correlationProject.map((item, index) => {
                                                 return (
                                                     <div key={index} style={{ color: item.del ? '#F93920' : '' }}>
-                                                        {item.pepProjectName}<span style={{ color: '#FFFFFF' }}>,</span>
+                                                        {item.pepProjectName || item.name}<span style={{ color: '#FFFFFF' }}>,</span>
                                                     </div>
                                                 )
                                             })
@@ -117,7 +117,7 @@ const Roles = (props) => {
                                     </div>
                                 } trigger="click" style={{ lineHeight: 2 }}>
                                     <div style={{ fontSize: 14, color: '#005ABD', marginLeft: 8, cursor: "pointer", }}>
-                                        +{row.correlationProject.length - 3}
+                                        +{row?.correlationProject?.length - 3}
                                     </div>
                                 </Tooltip>
                             ) : ('')