btn home pwd

src/App.css

   flex-wrap: wrap;
   flex-direction: row;
 }
+.pwd_info{
+  padding:10px;
+  border-right:1px solid #f1f1f1;
+  display: grid;
+  justify-items: center;
+  align-items: center;
+}
+.btn_pwd{
+  color:white !important;
+  background:var(--main) !important;
+}

src/Components/Home/Candidato.jsx

 import {
   Skeleton, Box, IconButton, TableCell, TableContainer,
   Table, TableRow, Paper, TableBody,
-  Tooltip,
+  Tooltip,Button
 } from '@mui/material';
 import {
   CheckBox as CheckBoxIcon,
     <TableRow >
       <TableCell
         style={{ borderRight: '1px solid #f1f1f1 !important' }}
-        className="home_letter pwd_user_name ">
+        className="home_letter pwd_user_name pwd_info">
         {candi.nombre + " " + candi.apellidos}
       </TableCell>
-      <TableCell className="table_list_test_user home_letter">
+      <TableCell className="table_list_test_user home_letter pwd_info">
         <table>
           <tbody >
             {
   return (
     <div className="data_candidato">
       <Row>
-        <Col onClick={props.onClick}  md="3" sm="12" style={{ padding: 10, borderRight: '1px solid #f1f1f1' }}>
-          <p><b>{password?.toUpperCase()}</b></p>
+
+        <Col className="pwd_info"pwd_name_candi onClick={props.onClick}  md="3" sm="12">
+          <Button className="btn_pwd" variant="contained">
+            <u><p><b style={{color:'white'}}>{password?.toUpperCase()}</b></p></u>
+          </Button>
         </Col>
-        <Col md="9">
+
+        <Col className="pwd_info" md="9">
           <TableContainer style={{ boxShadow: "none" }} component={Paper}>
             <Table size="small" aria-label="a dense table">
               <TableBody>