diff --git a/frontend/src/app/roles/page.jsx b/frontend/src/app/roles/page.jsx
index f6cbeb5..0f58e61 100644
--- a/frontend/src/app/roles/page.jsx
+++ b/frontend/src/app/roles/page.jsx
@@ -11,26 +11,31 @@ const RolesPage = () => {
 
   const sampleData = [
     {
+      id: 1,
       name: "organization-owner",
       orgId: "67160a5ae69144ff19aafb86",
       permissions: "35 Permissions",
     },
     {
+      id: 2,
       name: "organization-owner",
       orgId: "67160a5ae69144ff19aafb86",
       permissions: "35 Permissions",
     },
     {
+      id: 3,
       name: "organization-owner",
       orgId: "67160a5ae69144ff19aafb86",
       permissions: "35 Permissions",
     },
     {
+      id: 4,
       name: "organization-owner",
       orgId: "67160a5ae69144ff19aafb86",
       permissions: "35 Permissions",
     },
     {
+      id: 5,
       name: "organization-owner",
       orgId: "67160a5ae69144ff19aafb86",
       permissions: "35 Permissions",
@@ -53,16 +58,16 @@ const RolesPage = () => {
                 </tr>
               </thead>
               <tbody className={styles.tableBody}>
-                {sampleData.map((data, role) => {
+                {sampleData.map((role, index) => {
                   //role or user?
                   return (
                     <tr
-                      key={role}
+                      key={role.id}
                       onClick={() => router.push(`/roles/${role.id}`)}
                     >
-                      <td>{data.name}</td>
-                      <td>{data.orgId}</td>
-                      <td>{data.permissions}</td>
+                      <td>{role.name}</td>
+                      <td>{role.orgId}</td>
+                      <td>{role.permissions}</td>
                       <td>
                         <div className={styles.tableActions}>
                           <button className={styles.viewBtn}>