@@ -1,5 +1,4 @@ 
 import router from 'next/router';
-import { styled } from '@mui/material/styles';
 import Card from '@mui/material/Card';
 import CardActions from '@mui/material/CardActions';
 import CardContent from '@mui/material/CardContent';
@@ -7,24 +6,6 @@ import Typography from '@mui/material/Typography';
 import Button from '@mui/material/Button';
 import {useTranslation} from 'react-i18next';
 import {EventEntity} from '../../generated/graphql';
-
-const PREFIX = 'EventCard';
-
-const classes = {
-  clickable: `${PREFIX}-clickable`,
-  name: `${PREFIX}-name`
-};
-
-const StyledCard = styled(Card)({
-  [`&.${classes.clickable}`]: {
-    cursor: 'pointer',
-  },
-  [`& .${classes.name}`]: {
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-  },
-});
 
 interface Props {
   event: EventEntity;
@@ -33,10 +14,11 @@ 
 const EventCard = ({event}: Props) => {
   const {t} = useTranslation();
 
-
   return (
-    <StyledCard
-      className={classes.clickable}
+    <Card
+      sx={{
+        cursor: 'pointer',
+      }}
       onClick={() =>
         router.push(`/e/${event.attributes.uuid}`, undefined, {shallow: true})
       }
@@ -46,7 +28,11 @@ <Typography
           gutterBottom
           variant="h6"
           component="h3"
-          className={classes.name}
+          sx={{
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+          }}
         >
           {event.attributes.name}
         </Typography>
@@ -60,9 +46,11 @@ {event.attributes.address || t('event.fields.empty')}
         </Typography>
       </CardContent>
       <CardActions>
-        <Button color="primary">{t('dashboard.actions.see_event')}</Button>
+        <Button sx={{p: 0}} color="primary">
+          {t('dashboard.actions.see_event')}
+        </Button>
       </CardActions>
-    </StyledCard>
+    </Card>
   );
 };
 

@@ -1,33 +1,27 @@ 
 import Card from '@mui/material/Card';
-import {styled} from '@mui/material/styles';
+import {theme} from '@mui/material/styles';
 import CardMedia from '@mui/material/CardMedia';
 import CardContent from '@mui/material/CardContent';
 import Layout from './Centered';
 import Logo from '../components/Logo';
 
-const PREFIX = 'CommonConfirm';
-
-const classes = {
-  wrapper: `${PREFIX}-wrapper`,
-};
-
-const StyledLayout = styled(Layout)(({theme}) => ({
-  [`& .${classes.wrapper}`]: {
-    padding: theme.spacing(0, 8),
-    '&:last-child': {
-      paddingBottom: theme.spacing(12),
-    },
-  },
-}));
-
 const CommonConfirm = ({children}) => {
   return (
-    <StyledLayout displayMenu={false}>
+    <Layout displayMenu={false}>
       <Card>
         <CardMedia component={Logo} />
-        <CardContent className={classes.wrapper}>{children}</CardContent>
+        <CardContent
+          sx={{
+            padding: theme.spacing(0, 8),
+            '&:last-child': {
+              paddingBottom: theme.spacing(12),
+            },
+          }}
+        >
+          {children}
+        </CardContent>
       </Card>
-    </StyledLayout>
+    </Layout>
   );
 };
 

@@ -1,11 +1,11 @@ 
 import {ReactNode} from 'react';
+import Box from '@mui/material/Box';
 import {Helmet} from 'react-helmet';
 import useGTM from '../hooks/useGTM';
 import GenericToolbar from '../containers/GenericToolbar';
-import {ActionType} from '../containers/GenericMenu/Action';
-import Box from '@mui/material/Box';
 import Banner from '../components/Banner';
 import useMatomo from '../hooks/useMatomo';
+import {ActionType} from '../containers/GenericMenu/Action';
 
 interface Props {
   children: ReactNode;

@@ -1,5 +1,4 @@ 
 import {PropsWithChildren, useEffect, useState} from 'react';
-import {styled} from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import Box from '@mui/material/Box';
 import {useTheme} from '@mui/material/styles';
@@ -12,25 +11,6 @@ import DrawerMenu from '../containers/DrawerMenu';
 import AddToMyEventDialog from '../containers/AddToMyEventDialog';
 import {Event as EventType, useEventByUuidQuery} from '../generated/graphql';
 
-const PREFIX = 'EventLayout';
-
-const classes = {
-  content: `${PREFIX}-content`,
-};
-
-const StyledLayout = styled(Layout)(({theme}) => ({
-  [`& .${classes.content}`]: {
-    flex: 1,
-    maxWidth: 'calc(100% - 85px)',
-    overflow: 'auto',
-    paddingBottom: theme.spacing(4),
-
-    [theme.breakpoints.down('md')]: {
-      maxWidth: '100%',
-    },
-  },
-}));
-
 const POLL_INTERVAL = 10000;
 
 export type TabComponent = (props: {
@@ -64,7 +44,7 @@ 
   if (!event) return <ErrorPage statusCode={404} title={t`event.not_found`} />;
 
   return (
-    <StyledLayout
+    <Layout
       pageTitle={t('event.title', {title: event.name})}
       menuTitle={t('event.title', {title: event.name})}
       displayMenu={false}
@@ -80,7 +60,19 @@ overflow="hidden"
         flexDirection={isMobile ? 'column-reverse' : 'row'}
       >
         <DrawerMenu />
-        <Box className={classes.content} id="event-content">
+        <Box
+          sx={{
+            flex: 1,
+            maxWidth: 'calc(100% - 85px)',
+            overflow: 'auto',
+            paddingBottom: theme.spacing(4),
+
+            [theme.breakpoints.down('md')]: {
+              maxWidth: '100%',
+            },
+          }}
+          id="event-content"
+        >
           <Tab event={event} />
         </Box>
       </Box>
@@ -89,7 +81,7 @@ event={event}
         open={isAddToMyEvent}
         onClose={() => setIsAddToMyEvent(false)}
       />
-    </StyledLayout>
+    </Layout>
   );
 };
 

@@ -1,19 +1,19 @@ 
 import {useEffect} from 'react';
+import CssBaseline from '@mui/material/CssBaseline';
+import {ThemeProvider, Theme} from '@mui/material/styles';
 import {AppProps} from 'next/app';
+import {I18nextProvider} from 'react-i18next';
 import {ApolloProvider} from '@apollo/client';
-import {ThemeProvider, Theme, StyledEngineProvider} from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
 import {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider';
 import {AdapterMoment} from '@mui/x-date-pickers/AdapterMoment';
 import {SessionProvider} from 'next-auth/react';
 import moment from 'moment';
-import {useApollo} from '../lib/apolloClient';
 import Metas from '../containers/Metas';
 import Toasts from '../components/Toasts';
 import theme from '../theme';
 import useLocale from '../hooks/useLocale';
-import {I18nextProvider} from 'react-i18next';
 import i18n, {initI18Next} from '../lib/i18n';
+import {useApollo} from '../lib/apolloClient';
 
 declare module '@mui/styles/defaultTheme' {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface

@@ -1,15 +1,15 @@ 
 import {useEffect, useMemo} from 'react';
-import {useRouter} from 'next/router';
 import moment from 'moment';
+import {useRouter} from 'next/router';
+import {getSession} from 'next-auth/react';
 import {useTranslation} from 'react-i18next';
-import useProfile from '../hooks/useProfile';
 import LayoutDefault from '../layouts/Default';
 import DashboardEvents from '../containers/DashboardEvents';
 import DashboardEmpty from '../containers/DashboardEmpty';
 import Loading from '../containers/Loading';
 import Fab from '../containers/Fab';
 import pageUtils from '../lib/pageUtils';
-import {getSession} from 'next-auth/react';
+import useProfile from '../hooks/useProfile';
 import useRedirectUrlStore from '../stores/useRedirectUrl';
 
 interface PageProps {
@@ -31,7 +31,10 @@ 
   const pastEvents = useMemo(
     () =>
       events
-        ?.filter(({date}) => date && moment(date).isBefore(moment(), 'day'))
+        ?.filter(
+          ({attributes: {date}}) =>
+            date && moment(date).isBefore(moment(), 'day')
+        )
         .sort(sortDesc),
     [events]
   );
@@ -40,14 +43,15 @@ const futureEvents = useMemo(
     () =>
       events
         ?.filter(
-          ({date}) => date && moment(date).isSameOrAfter(moment(), 'day')
+          ({attributes: {date}}) =>
+            date && moment(date).isSameOrAfter(moment(), 'day')
         )
         .sort(sortDesc),
     [events]
   );
 
   const noDateEvents = useMemo(
-    () => events?.filter(({date}) => !date),
+    () => events?.filter(({attributes: {date}}) => !date),
     [events]
   );
 
@@ -94,7 +98,8 @@ </LayoutDefault>
   );
 };
 
-const sortDesc = ({date: dateA}, {date: dateB}) => dateB.localeCompare(dateA);
+const sortDesc = ({attributes: {date: dateA}}, {attributes: {date: dateB}}) =>
+  dateB.localeCompare(dateA);
 
 export const getServerSideProps = async (context: any) => {
   const session = await getSession(context);