@@ -1,37 +1,23 @@ 
 import Link from 'next/link';
-import { styled } from '@mui/material/styles';
+import { useTheme } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import CardActions from '@mui/material/CardActions';
 import {useTranslation} from 'react-i18next';
-const PREFIX = 'SignUpActions';
-
-const classes = {
-  actions: `${PREFIX}-actions`
-};
-
-const StyledCardActions = styled(CardActions)((
-  {
-    theme
-  }
-) => ({
-  [`&.${classes.actions}`]: {
-    justifyContent: 'center',
-    marginBottom: theme.spacing(2),
-  }
-}));
 
 const SignUpActions = () => {
+  const theme = useTheme()
   const {t} = useTranslation();
 
 
   return (
-    <StyledCardActions className={classes.actions}>
+    <CardActions sx={{justifyContent: 'center',
+    marginBottom: theme.spacing(2)}}>
       <Link href="/auth/login" passHref>
         <Button id="SignUpLogin" variant="text">
           {t('signup.login')}
         </Button>
       </Link>
-    </StyledCardActions>
+    </CardActions>
   );
 };
 

@@ -140,8 +140,8 @@ type="password"
           />
         </Box>
         <FormControlLabel
-          sx={{width: '100%', margin: theme.spacing(2, 0)}}
-          componentsProps={{typography: {align: 'center', variant: 'body2'}}}
+          sx={{width: '100%', margin: theme.spacing(2, 0), padding: theme.spacing(0, 4)}}
+          componentsProps={{typography: {align: 'left', variant: 'body2'}}}
           control={
             <Checkbox
               sx={{padding: 0, marginRight: theme.spacing(2)}}

@@ -38,7 +38,7 @@ try {
       await signIn('credentials', {
         email,
         password,
-        callbackUrl: '/',
+        callbackUrl: '/dashboard',
       });
       saveStoredEvents(); // TODO Check it's correctly executed after sign-in
     } catch (error) {
@@ -67,7 +67,7 @@ <Typography variant="h6" align="center">
           {t('signin.title')}
         </Typography>
         {error && (
-          <FormHelperText error={true}>
+          <FormHelperText error={true} sx={{padding: theme.spacing(0, 6)}}>
             {t(`signin.errors.${error}`)}
           </FormHelperText>
         )}

@@ -4,7 +4,7 @@ import IconButton from '@mui/material/IconButton';
 import Icon from '@mui/material/Icon';
 import Box from '@mui/material/Box';
 import Link from '@mui/material/Link';
-import { useTheme } from '@mui/material/styles';
+import {useTheme} from '@mui/material/styles';
 import {useTranslation} from 'react-i18next';
 import getMapsLink from '../../lib/getMapsLink';
 import {Travel} from '../../generated/graphql';
@@ -16,7 +16,7 @@ }
 
 const Header = (props: Props) => {
   const {travel, toggleEditing} = props;
-  const theme = useTheme()
+  const theme = useTheme();
   const {t} = useTranslation();
 
   return (
@@ -24,11 +24,7 @@ <Box sx={{padding: theme.spacing(2)}}>
       <IconButton
         size="small"
         color="primary"
-        sx={{position: 'absolute',
-        top: 0,
-        right: 0,
-        margin: theme.spacing(1),
-        zIndex: theme.zIndex.speedDial}}
+        sx={{position: 'absolute', top: 0, right: 0, margin: theme.spacing(1)}}
         onClick={toggleEditing}
         id="EditTravelBtn"
       >
@@ -43,7 +39,7 @@ <Typography variant="h5" id="TravelName">
         {travel.vehicleName}
       </Typography>
       {!!travel.phone_number && (
-        <Box sx={{marginTop: theme.spacing(2),}}>
+        <Box sx={{marginTop: theme.spacing(2)}}>
           <Typography variant="subtitle2">
             {t('travel.fields.phone')}
           </Typography>
@@ -53,7 +49,7 @@ </Typography>
         </Box>
       )}
       {!!travel.meeting && (
-        <Box sx={{marginTop: theme.spacing(2),}}>
+        <Box sx={{marginTop: theme.spacing(2)}}>
           <Typography variant="subtitle2">
             {t('travel.fields.meeting_point')}
           </Typography>
@@ -70,7 +66,7 @@ </Typography>
         </Box>
       )}
       {!!travel.details && (
-        <Box sx={{marginTop: theme.spacing(2),}}>
+        <Box sx={{marginTop: theme.spacing(2)}}>
           <Typography variant="subtitle2">
             {t('travel.fields.details')}
           </Typography>

@@ -79,7 +79,6 @@ position: 'absolute',
             top: 0,
             right: 0,
             margin: theme.spacing(1),
-            zIndex: theme.zIndex.speedDial,
           }}
         >
           <Icon>done</Icon>

@@ -1,5 +1,4 @@ 
 import {useMemo, useReducer} from 'react';
-import { styled } from '@mui/material/styles';
 import Divider from '@mui/material/Divider';
 import Paper from '@mui/material/Paper';
 import {Travel as TravelType} from '../../generated/graphql';
@@ -11,22 +10,6 @@ import Header from './Header';
 import useActions from './useActions';
 import useProfile from '../../hooks/useProfile';
 
-const PREFIX = 'Travel';
-
-const classes = {
-  root: `${PREFIX}-root`
-};
-
-const StyledPaper = styled(Paper)((
-  {
-    theme
-  }
-) => ({
-  [`&.${classes.root}`]: {
-    position: 'relative',
-  }
-}));
-
 interface Props {
   travel: TravelType & {id: string};
   getAddPassengerFunction: (addSelf: boolean) => () => void;
@@ -52,32 +35,34 @@ return !isInTravel;
   }, [travel, userId]);
 
   return (
-    <StyledPaper className={classes.root}>
+    <Paper sx={{position: 'relative'}}>
       {isEditing ? (
         <HeaderEditing travel={travel} toggleEditing={toggleEditing} />
       ) : (
         <Header travel={travel} toggleEditing={toggleEditing} />
       )}
-      <Divider />
-      <AddPassengerButtons
-        getOnClickFunction={props.getAddPassengerFunction}
-        canAddSelf={canAddSelf}
-        variant="travel"
-        disabled={disableNewPassengers}
-      />
-      <Divider />
       {!isEditing && (
-        <PassengersList
-          passengers={travel.passengers.data}
-          places={travel?.seats}
-          onClick={actions.sendPassengerToWaitingList}
-          isTravel
-          Button={({onClick}: {onClick: () => void}) => (
-            <ClearButton icon="close" onClick={onClick} tabIndex={-1} />
-          )}
-        />
+        <>
+          <Divider />
+          <AddPassengerButtons
+            getOnClickFunction={props.getAddPassengerFunction}
+            canAddSelf={canAddSelf}
+            variant="travel"
+            disabled={disableNewPassengers}
+          />
+          <Divider />
+          <PassengersList
+            passengers={travel.passengers.data}
+            places={travel?.seats}
+            onClick={actions.sendPassengerToWaitingList}
+            isTravel
+            Button={({onClick}: {onClick: () => void}) => (
+              <ClearButton icon="close" onClick={onClick} tabIndex={-1} />
+            )}
+          />
+        </>
       )}
-    </StyledPaper>
+    </Paper>
   );
 };
 

@@ -54,8 +54,8 @@ 
   return (
     <Box
       sx={{
-        paddingLeft: theme.spacing(2),
-        paddingRight: theme.spacing(2),
+        paddingLeft: theme.spacing(1),
+        paddingRight: theme.spacing(1),
         [theme.breakpoints.down('md')]: {
           paddingLeft: theme.spacing(),
           paddingRight: theme.spacing(),
@@ -96,7 +96,7 @@ eventName={event?.name}
           title={t('event.no_travel.title')}
         />
       )) || (
-        <Masonry columns={{xl: 4, lg: 3, md: 2, sm: 2, xs: 1}} spacing={1}>
+        <Masonry columns={{xl: 4, lg: 3, md: 2, sm: 2, xs: 1}} spacing={0}>
           {sortedTravels?.map(({id, attributes}) => {
             const travel = {id, ...attributes};
             return (

@@ -1,5 +1,5 @@ 
 import Typography from '@mui/material/Typography';
-import { styled } from '@mui/material/styles';
+import {useTheme} from '@mui/material/styles';
 import Icon from '@mui/material/Icon';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
@@ -13,40 +13,8 @@ import {useUpdateMeMutation} from '../../../generated/graphql';
 import useRedirectUrlStore from '../../../stores/useRedirectUrl';
 import router from 'next/router';
 
-const PREFIX = 'Confirm';
-
-const classes = {
-  margins: `${PREFIX}-margins`,
-  newsletter: `${PREFIX}-newsletter`,
-  checkbox: `${PREFIX}-checkbox`,
-  center: `${PREFIX}-center`
-};
-
-const StyledCommonConfirm = styled(CommonConfirm)((
-  {
-    theme
-  }
-) => ({
-  [`& .${classes.margins}`]: {
-    margin: theme.spacing(5, 0),
-  },
-
-  [`& .${classes.newsletter}`]: {
-    width: '100%',
-    margin: theme.spacing(2, 0),
-  },
-
-  [`& .${classes.checkbox}`]: {
-    padding: 0,
-    marginRight: theme.spacing(2),
-  },
-
-  [`& .${classes.center}`]: {
-    textAlign: 'center',
-  }
-}));
-
 const Confirm = () => {
+  const theme = useTheme();
   const {t} = useTranslation();
 
   const [newsletterConsent, setNewsletterConsent] = useState(false);
@@ -59,21 +27,21 @@ router.push(callbackUrl);
   };
 
   return (
-    <StyledCommonConfirm>
-      <Typography variant="overline" component="h5" align="center">
+    <CommonConfirm>
+      <Typography variant="h6" align="center">
         {t('signup.create')}
       </Typography>
-      <Typography variant="h5" component="h2" align="center">
+      <Typography variant="h5" align="center">
         {t('confirm.google.title')}
       </Typography>
-      <Typography align="center" className={classes.margins} component="div">
+      <Typography align="center" sx={{margin: theme.spacing(5, 0)}}>
         <Icon fontSize="large">mail</Icon>
       </Typography>
       <FormControlLabel
-        className={classes.newsletter}
+        sx={{width: '100%', margin: theme.spacing(2, 0)}}
         control={
           <Checkbox
-            className={classes.checkbox}
+            sx={{padding: 0, marginRight: theme.spacing(2)}}
             color="primary"
             value={newsletterConsent}
             onChange={({target: {checked = false}}) =>
@@ -83,12 +51,12 @@ />
         }
         label={t('signup.newsletter.consent')}
       />
-      <Box className={classes.center}>
+      <Box sx={{textAlign: 'center'}}>
         <Button variant="contained" color="secondary" onClick={onSubmit}>
           {t('generic.confirm')}
         </Button>
       </Box>
-    </StyledCommonConfirm>
+    </CommonConfirm>
   );
 };
 

@@ -1,28 +1,16 @@ 
 import Typography from '@mui/material/Typography';
-import {styled, useTheme} from '@mui/material/styles';
+import {useTheme} from '@mui/material/styles';
 import Icon from '@mui/material/Icon';
 import {useTranslation} from 'react-i18next';
 import CommonConfirm from '../../../layouts/ConfirmLayout';
 import pageUtils from '../../../lib/pageUtils';
 
-const PREFIX = 'Confirm';
-
-const classes = {
-  margins: `${PREFIX}-margins`,
-};
-
-const StyledCommonConfirm = styled(CommonConfirm)(({theme}) => ({
-  [`& .${classes.margins}`]: {
-    margin: theme.spacing(5, 0),
-  },
-}));
-
 const Confirm = () => {
   const {t} = useTranslation();
   const theme = useTheme();
 
   return (
-    <StyledCommonConfirm>
+    <CommonConfirm>
       <Typography variant="subtitle1" align="center">
         {t('confirm.creating')}
       </Typography>
@@ -42,7 +30,7 @@ align="center"
       >
         {t('confirm.text')}
       </Typography>
-    </StyledCommonConfirm>
+    </CommonConfirm>
   );
 };
 

@@ -1,14 +1,14 @@ 
 import CardMedia from '@mui/material/CardMedia';
 import Card from '@mui/material/Card';
+import Typography from '@mui/material/Typography';
+import { useTheme } from '@mui/material/styles';
+import {getSession} from 'next-auth/react';
 import {useTranslation} from 'react-i18next';
 import Layout from '../../layouts/Centered';
 import Logo from '../../components/Logo';
 import SignInForm from '../../containers/SignInForm';
 import LanguagesIcon from '../../containers/Languages/Icon';
-import {getSession} from 'next-auth/react';
 import pageUtils from '../../lib/pageUtils';
-import Typography from '@mui/material/Typography';
-import theme from '../../theme';
 
 interface PageProps {
   error?: string;
@@ -17,6 +17,7 @@ }
 
 const Login = (props: PageProps) => {
   const {emailConfirmation} = props;
+  const theme = useTheme();
   const {t} = useTranslation();
 
   return (

@@ -1,18 +1,18 @@ 
 import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import Divider from '@mui/material/Divider';
+import Button from '@mui/material/Button';
+import Link from 'next/link';
 import {useTheme} from '@mui/material/styles';
 import CardMedia from '@mui/material/CardMedia';
 import {useTranslation} from 'react-i18next';
 import Layout from '../../../layouts/Centered';
 import Logo from '../../../components/Logo';
 import LanguagesIcon from '../../../containers/Languages/Icon';
-import CardContent from '@mui/material/CardContent';
 import SignUpActions from '../../../containers/MailSignUpForm/SignupActions';
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-import Divider from '@mui/material/Divider';
-import Button from '@mui/material/Button';
 import LoginGoogle from '../../../containers/LoginGoogle';
-import Link from 'next/link';
 import Markdown from '../../../components/Markdown';
 
 const MailSignup = () => {
@@ -32,7 +32,7 @@ width: '100%',
             padding: theme.spacing(0, 6),
           }}
         >
-          <Typography variant="overline" component="h5" align="center">
+          <Typography variant="h6" align="center">
             {t('signup.create')}
           </Typography>
           <Box
@@ -62,13 +62,14 @@ <Box
             sx={{
               width: '100%',
               textAlign: 'center',
-              margin: theme.spacing(10, 0, 2, 0),
+              margin: theme.spacing(5, 0, 2, 0),
             }}
           >
             <Markdown
               sx={{
+                marginBottom: theme.spacing(5), 
                 '& a': {
-                  color: 'inherit',
+                  color: theme.palette.primary.main,
                 },
               }}
               variant="body1"

@@ -46,7 +46,7 @@ xs: 0,
       sm: 720,
       md: 960,
       lg: 1280,
-      xl: 1920,
+      xl: 1680,
     },
   },
 };