diff --git a/web/client/src/sections/install/containers/roles.jsx b/web/client/src/sections/install/containers/roles.jsx
index 5bb5a4b..2360319 100644
--- a/web/client/src/sections/install/containers/roles.jsx
+++ b/web/client/src/sections/install/containers/roles.jsx
@@ -322,19 +322,33 @@ const Roles = (props) => {
                                         borderRadius: 2, background: "url(/assets/images/install/cardBackground0" + (index + 1) + '.png)',
                                         backgroundSize: "100% 100%", marginRight: 20, marginBottom: 20,
                                     }}>
-
                                         {
                                             item.id ? (
                                                 <div style={{ display: 'flex', marginLeft: 21, }}>
                                                     {
                                                         item.departments?.map((itm, idx) => {
+                                                            let mydepartmentsArr=[]
+                                                            for (let index = 0; index < item.departments.length; index++) {
+                                                                mydepartmentsArr.push(item.departments[index].name)
+                                                            }
                                                             return (
                                                                 <div key={idx} style={{
                                                                     background: '#52A4F6', borderRadius: 2, height: 18, padding: '2px 4px',
                                                                     fontSize: 10, marginTop: 17, width: 'max-content', color: '#FFFFFF',
                                                                     display: 'flex', alignItems: 'center', marginRight: 4,
                                                                 }}>
-                                                                    {itm.name}
+                                                                    {
+                                                                        idx > 2 ? (
+                                                                            <Tooltip content={mydepartmentsArr.join(',')}>
+                                                                                <div style={{ fontSize: 14, cursor: "pointer", }}>
+                                                                                    ...
+                                                                                </div>
+                                                                            </Tooltip>
+
+                                                                        ) : (
+                                                                            itm.name
+                                                                        )
+                                                                    }
                                                                 </div>
                                                             )
                                                         })