@@ -1,13 +0,0 @@ 
-import React from 'react';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-
-const Section = ({children}) => (
-  <Grid item xs={12}>
-    <Typography gutterBottom variant="h6" component="h3">
-      {children}
-    </Typography>
-  </Grid>
-);
-
-export default Section;

@@ -0,0 +1,30 @@ 
+import React from 'react';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
+import EventCard from './EventCard';
+
+interface Props {
+  label: string;
+  events: object[];
+}
+
+const Section = (props: Props) => {
+  const {label, events} = props;
+  return (
+    <Box mb={8}>
+      <Typography gutterBottom variant="h6" component="h3">
+        {label}
+      </Typography>
+      <Grid container spacing={4}>
+        {events.map(event => (
+          <Grid item xs={12} md={3} lg={4} key={event.id}>
+            <EventCard event={event} />
+          </Grid>
+        ))}
+      </Grid>
+    </Box>
+  );
+};
+
+export default Section;

@@ -1,67 +0,0 @@ 
-import {makeStyles} from '@material-ui/core/styles';
-import Grid from '@material-ui/core/Grid';
-import {useTranslation} from 'react-i18next';
-import EventCard from './EventCard';
-import Section from './Section';
-
-const DashboardEvents = ({
-  futureEvents = [],
-  noDateEvents = [],
-  pastEvents = [],
-}) => {
-  const {t} = useTranslation();
-  const classes = useStyles();
-
-  return (
-    <Grid container className={classes.root} spacing={4}>
-      {futureEvents.length > 0 && (
-        <>
-          <Section>
-            {t('dashboard.sections.future', {
-              count: futureEvents.length,
-            })}
-          </Section>
-          {cardsForEvents(futureEvents)}
-        </>
-      )}
-      {noDateEvents.length > 0 && (
-        <>
-          <Section>
-            {t('dashboard.sections.noDate', {
-              count: noDateEvents.length,
-            })}
-          </Section>
-          {cardsForEvents(noDateEvents)}
-        </>
-      )}
-
-      {pastEvents.length > 0 && (
-        <>
-          <Section>
-            {t('dashboard.sections.past', {count: pastEvents.length})}
-          </Section>
-          {cardsForEvents(pastEvents)}
-        </>
-      )}
-    </Grid>
-  );
-};
-
-const cardsForEvents = events =>
-  events.map(event => (
-    <Grid item xs={12} md={3} lg={4} key={event.id}>
-      <EventCard event={event} />
-    </Grid>
-  ));
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    flexGrow: 1,
-    width: '100%',
-    maxWidth: '90rem',
-    margin: '0 auto',
-    paddingBottom: theme.spacing(10),
-  },
-}));
-
-export default DashboardEvents;

@@ -0,0 +1,42 @@ 
+import {useTranslation} from 'react-i18next';
+import Box from '@material-ui/core/Box';
+import Section from './Section';
+
+const DashboardEvents = ({
+  futureEvents = [],
+  noDateEvents = [],
+  pastEvents = [],
+}) => {
+  const {t} = useTranslation();
+
+  return (
+    <Box p={4}>
+      {futureEvents.length > 0 && (
+        <Section
+          label={t('dashboard.sections.future', {
+            count: futureEvents.length,
+          })}
+          events={futureEvents}
+        />
+      )}
+      {noDateEvents.length > 0 && (
+        <Section
+          label={t('dashboard.sections.noDate', {
+            count: noDateEvents.length,
+          })}
+          events={noDateEvents}
+        />
+      )}
+      {pastEvents.length > 0 && (
+        <Section
+          label={t('dashboard.sections.past', {
+            count: pastEvents.length,
+          })}
+          events={pastEvents}
+        />
+      )}
+    </Box>
+  );
+};
+
+export default DashboardEvents;

@@ -6,10 +6,12 @@ width: '85px',
 
     [theme.breakpoints.down('sm')]: {
       width: '100%',
+      position: 'fixed',
+      bottom: 0,
+      zIndex: 1,
     },
 
     '& .MuiDrawer-paper': {
-      paddingTop: theme.mixins.toolbar.minHeight,
       zIndex: theme.zIndex.appBar - 1,
       width: '84px',
       display: 'flex',

@@ -3,29 +3,34 @@ import Icon from '@material-ui/core/Icon';
 import FabMui from '@material-ui/core/Fab';
 import {makeStyles} from '@material-ui/core/styles';
 
-const Fab = ({open = false, children = null, ...props}) => {
+const Fab = ({children = null, ...props}) => {
   const variant = children ? 'extended' : 'round';
-  const classes = useStyles({open, variant});
+  const classes = useStyles({variant});
 
   return (
-    <div className={classes.container}>
-      <FabMui color="secondary" variant={variant} {...props}>
-        <Icon className={classes.icon}>add</Icon>
-        {children}
-      </FabMui>
-    </div>
+    <FabMui
+      color="secondary"
+      variant={variant}
+      {...props}
+      className={classes.fab}
+    >
+      <Icon className={classes.icon}>add</Icon>
+      {children}
+    </FabMui>
   );
 };
 
 const useStyles = makeStyles(theme => ({
-  container: ({open}) => ({
+  fab: {
     position: 'fixed',
     right: theme.spacing(3),
-    transition: 'all 0.3s ease',
-    bottom: open ? -theme.spacing(8) : theme.spacing(3),
-    transform: open ? 'rotate(45deg)' : '',
-    zIndex: theme.zIndex.speedDial,
-  }),
+    bottom: theme.spacing(3),
+
+    [theme.breakpoints.down('sm')]: {
+      right: theme.spacing(2),
+      bottom: theme.spacing(9),
+    },
+  },
   icon: ({variant}) => ({
     marginRight: variant === 'extended' ? theme.spacing(1) : theme.spacing(0),
   }),

@@ -32,7 +32,7 @@ 
 const useStyles = makeStyles(theme => ({
   arrow: {
     position: 'fixed',
-    zIndex: 20,
+    zIndex: 0,
     width: 40,
     minHeight: '100vh',
     alignItems: 'center',

@@ -113,7 +113,7 @@ };
 
 const useStyles = makeStyles(theme => ({
   container: {
-    paddingLeft: `calc(${theme.spacing(6)}px + 80px)`,
+    paddingLeft: theme.spacing(6),
     paddingRight: theme.spacing(6),
     [theme.breakpoints.down('sm')]: {
       paddingLeft: theme.spacing(),

@@ -5,7 +5,7 @@ 
 const CenteredLayout = ({children, ...props}) => {
   return (
     <DefaultLayout {...props}>
-      <Box pt={12}>
+      <Box pt={12} position="relative">
         <Container maxWidth="sm">{children}</Container>
       </Box>
     </DefaultLayout>

@@ -1,6 +1,6 @@ 
 import {PropsWithChildren, useEffect, useState} from 'react';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
-import {useTheme} from '@material-ui/core/styles';
+import {makeStyles, useTheme} from '@material-ui/core/styles';
 import {useTranslation} from 'react-i18next';
 import ErrorPage from '../pages/_error';
 import useEventStore from '../stores/useEventStore';
@@ -30,6 +30,7 @@ const EventLayout = (props: PropsWithChildren<Props>) => {
   const {eventUUID, Tab} = props;
   const {t} = useTranslation();
   const theme = useTheme();
+  const classes = useStyles();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   const addToast = useToastStore(s => s.addToast);
   const setEvent = useEventStore(s => s.setEvent);
@@ -79,7 +80,7 @@ alignItems="stretch"
         flexDirection={isMobile ? 'column-reverse' : 'row'}
       >
         <DrawerMenu />
-        <Box flex={1}>
+        <Box className={classes.content}>
           <Tab event={event} />
         </Box>
       </Box>
@@ -91,5 +92,16 @@ />
     </Layout>
   );
 };
+
+const useStyles = makeStyles(theme => ({
+  content: {
+    flex: 1,
+    maxWidth: 'calc(100% - 85px)',
+
+    [theme.breakpoints.down('sm')]: {
+      maxWidth: '100%',
+    },
+  },
+}));
 
 export default EventLayout;

@@ -48,11 +48,11 @@ menuTitle={t('event.creation.title')}
       menuActions={menuActions}
       displayMenu={!!profile}
     >
-      <Paper className={null}>
+      <Paper>
         <Logo />
         <CreateEvent />
       </Paper>
-      <LanguagesIcon displayMenu={!!profile}/>
+      {!profile && <LanguagesIcon displayMenu={!!profile} />}
     </Layout>
   );
 };