fixed

frontend/src/app/agents/card/Card.jsx

@@ -4,7 +4,7 @@ import styles from "./styles.module.css";
 
 const Card = (props) => {
   return (
-    <div className={styles.cardContainer}>
+    <div className={styles.cardContainer} {...props}>
       <div className={styles.cardDetails}>
         <div className={styles.list}>
           <p>Name</p>

frontend/src/app/agents/page.jsx

@@ -117,7 +117,13 @@ const AgentsPage = () => {
             <MobileSearchBar />
             {isMobile &&
               sampleData.map((data, key) => {
-                return <Card data={data} key={key} />;
+                return (
+                  <Card
+                    data={data}
+                    key={key}
+                    onClick={() => router.push(`/agents/${key}`)}
+                  />
+                );
               })}
           </div>
 

frontend/src/app/credentials/card/Card.jsx

@@ -12,7 +12,7 @@ const Card = (props) => {
         </div>
         <div className={styles.list}>
           <p>Organization ID</p>
-          <p>{props?.data?.organizationId}</p>
+          <p>{props?.data?.organizationID}</p>
         </div>
       </div>
       <div className={styles.cardAction}>

frontend/src/app/roles/add/page.jsx

@@ -71,7 +71,7 @@ const AddRolePage = () => {
                       </div>
                       <div className={addRoleStyle.inputField}>
                         <TextField
-                          placeHolder="Enter role name"
+                          placeHolder="Enter name"
                           {...register("roleName", { required: true })}
                           hasError={!!errors.roleName}
                         />