clean version pre calification

src/App.css

 .question_form{
   grid-column: 1;
   grid-row: 1;
+  min-width: 275;
+  margin: 10px !important; 
+  border-left: 5px solid var(--main);
 }

src/Components/Test/Cleaver/Question.jsx

 
 import { Remove as RemoveIcon, Add as AddIcon } from '@mui/icons-material';
 import {
-  Card,CardContent,Avatar,Checkbox,List,Tooltip,
+  Card,CardContent,Avatar,Checkbox,List,Tooltip,Fade,
   ListItem,ListItemButton,ListItemIcon,ListItemText,
-  CardActions,Button,Fade,Slide
 } from '@mui/material'
 import { deepPurple } from '@mui/material/colors';
 
 }
 
 export function Question({quiz, index, current}) {
-  let { instrucciondepregunta, respuestas,id } = quiz
-  let checked = index ===current;
+  let { instrucciondepregunta, respuestas} = quiz
+  let checked = index === current;
   return (
     <Fade in={checked} unmountOnExit>
-    <Card className="question_form" sx={{ minWidth: 275, margin: '30px !important', borderLeft: '5px solid var(--main)'}}>
-      <CardContent>
-        <div variant="body2">
-          <List>
-            <CheckboxexHeader  group={index} title={instrucciondepregunta}/>
-          </List>
-          <CheckboxesGroup quiz={respuestas} />
-        </div>
-      </CardContent>
-    </Card>
+      <Card className="question_form">
+        <CardContent>
+          <div variant="body2">
+            <List>
+              <CheckboxexHeader  group={index} title={instrucciondepregunta}/>
+            </List>
+            <CheckboxesGroup quiz={respuestas} />
+          </div>
+        </CardContent>
+      </Card>
     </Fade>
   );
 }

src/Components/User.jsx

 
 export function User() {
 
-    const [open, setOpen] = React.useState(false);
+    const [open, setOpen] = React.useState(true);
 
     const isMovil = Size('(max-width:770px)');
     const auth = useAuth();

src/Pages/Pruebas/Cleaver.jsx

 import { Service } from '../../Utils/HTTP'
 import useAuth from '../../Auth/useAuth.js';
 import { Question } from '../../Components/Test/Cleaver/Question.jsx'
-import { Box,Button, Collapse, List, Slide } from '@mui/material'
-import { TransitionGroup } from 'react-transition-group';
-// import * as Scroll from 'react-scroll';
+import { Box,Button } from '@mui/material'
 
 export function Cleaver() {
 
-// var scroll = Scroll.animateScroll;
-
   let auth = useAuth();
   let token = useMemo(() => auth.getToken(), [auth])