some features

src/App.css

+:root {
+  --main: #fd4b4b;
+  --second: #2ec5d3;
+}
 .App {
     text-align: center;
 }
     flex-direction: row;
     padding : 90px;
     max-height : 175px;
+    margin-bottom:20px
 }
 .MuiFormControl{
     border : 1px solid #eceff1;
     font-size:14px;
 }
 
+#login_btn_fn:hover{
+    background-color: var(--second)
+}

src/Components/Home/Candidato.jsx

 import { Skeleton, Box } from '@mui/material';
 import React from 'react'
-const big_as = 50
+const big_as = 70
 
 export function Candidato (props) {
     let { password,puesto,DPI, aplicacion,pendientes } = props.user
 
 export function Preview() {
     return(
-        <Box sx={{ width: '100%'}}>
-            <Skeleton height={big_as} animation="wave" />
-            <Skeleton height={big_as} animation="wave" />
-            <Skeleton height={big_as} animation="wave" />
+        <Box sx={{ width: '100%' }}>
             <Skeleton height={big_as} animation="wave" />
             <Skeleton height={big_as} animation="wave" />
             <Skeleton height={big_as} animation="wave" />

src/Components/Home/Candidatos.js

                 <Row style={{ padding : 5 }}>
                     <Col>
                         <Stack style={{ display : 'flex', flexDirection : 'row', alignItems: 'baseline'  }} spacing={2}>
-                            <Typography style={{ paddingTop : 15, paddingRight : 10 }}>Page: {page}</Typography>
+                            <Typography style={{ paddingTop : 15, paddingRight : 10 }}>Página: {page}</Typography>
                             <Pagination 
-                                siblingCount={5} 
+                                siblingCount={1} 
+                                boundaryCount={1}
                                 shape='rounded' 
                                 count={users.length} 
                                 page={page} 
-                                onChange={changePage} />
+                                onChange={changePage} 
+                            />
                         </Stack>
                     </Col>
                 </Row>

src/Css/all.css

     flex-direction : row;
     align-items: center;
     background: #d7d7d7;
-    /* padding: 10px; */
+    padding-top: 10px;
+    padding-bottom: 10px;
     border: 1px solid #dcdcdc;
-    /* height : 45px; */
+    height : 53px;
 }
 .header_historial p{
     /* margin: 0!important; */

src/Pages/Login.jsx

                                 label="Recordarme"
                             />
                             <Button
+                                id="login_btn_fn"
                                 type="submit"
                                 fullWidth
                                 variant="contained"
-                                sx={{ mt: 3, mb: 2, bgcolor :'#fd4b4b'  }}
+                                sx={{ mt: 3, mb: 2, bgcolor :'var(--main)'  }}
                             >
                                 Ingresar
                             </Button>