@@ -8,15 +8,28 @@ 
 const Logo = () => {
   const classes = useStyles();
   return (
-    <a href={LOGO_URL}>
-      <img src={LogoUrl} alt="Caroster" className={classes.logo} />
-    </a>
+    <div className={classes.layout}>
+      <a href={LOGO_URL} className={classes.link}>
+        <img src={LogoUrl} alt="Caroster" className={classes.logo} />
+      </a>
+    </div>
   );
 };
 
 const useStyles = makeStyles(theme => ({
+  layout: {
+    display: 'flex',
+    justifyContent: 'center',
+    paddingTop: '1rem',
+    paddingBottom: '1rem',
+  },
+  link: {
+    width: '75%',
+  },
   logo: {
+    display: 'block',
     width: '100%',
+    height: 'auto',
   },
 }));
 export default Logo;

@@ -12,6 +12,8 @@ const {t} = useTranslation();
   return (
     <div className={classes.header}>
       <IconButton
+        size="small"
+        color="primary"
         className={classes.editBtn}
         onClick={toggleEditing}
         id="EditCarBtn"
@@ -64,6 +66,7 @@ editBtn: {
     position: 'absolute',
     top: 0,
     right: 0,
+    margin: theme.spacing(1),
     zIndex: theme.zIndex.speedDial,
   },
   section: {

@@ -175,8 +175,8 @@ </div>
       </form>
       <div className={classes.actions}>
         <Button
-          color="secondary"
           variant="outlined"
+          color="primary"
           onClick={toggleRemoving}
           id="CarRemove"
         >

@@ -9,7 +9,13 @@ const classes = useStyles();
   const {t} = useTranslation();
   return (
     <Container maxWidth="sm" className={classes.container}>
-      <Button variant="contained" onClick={toggleNewCar}>
+      <Button
+        fullWidth
+        variant="contained"
+        color="primary"
+        onClick={toggleNewCar}
+        classes={{containedPrimary: classes.button}}
+      >
         {t('car.creation.title')}
       </Button>
     </Container>
@@ -20,6 +26,11 @@ const useStyles = makeStyles(theme => ({
   container: {
     display: 'flex',
     justifyContent: 'center',
+  },
+  button: {
+    backgroundColor: theme.palette.background.paper,
+    color: theme.palette.text.primary,
+    '&:hover': {color: theme.palette.primary.contrastText},
   },
 }));
 

@@ -69,7 +69,7 @@ [strapi.stores.cars, event]
   );
 
   return (
-    <Slider {...settings}>
+    <Slider className={classes.slider} {...settings}>
       <Container maxWidth="sm" className={classes.slide}>
         <WaitingList />
       </Container>
@@ -87,10 +87,16 @@ );
 };
 
 const useStyles = makeStyles(theme => ({
+  slider: {
+    padding: theme.spacing(1),
+  },
   slide: {
-    height: `calc(100vh - ${theme.mixins.toolbar.minHeight}px)`,
+    height: `calc(100vh - ${theme.mixins.toolbar.minHeight}px - ${theme.spacing(
+      2
+    )})`,
     outline: 'none',
     padding: theme.spacing(2),
+    marginBottom: theme.spacing(10),
   },
 }));
 

@@ -1,103 +1,29 @@ 
-import React, {useReducer} from 'react';
+import React from 'react';
 import Icon from '@material-ui/core/Icon';
 import Fab from '@material-ui/core/Fab';
 import {makeStyles} from '@material-ui/core/styles';
-import {useTranslation} from 'react-i18next';
-import {useEvent} from '../../contexts/Event';
-import {useToast} from '../../contexts/Toast';
 
-const EventFab = ({toggleNewCar}) => {
-  const {t} = useTranslation();
-  const [open, toggleOpen] = useReducer(i => !i, false);
+const EventFab = ({toggleNewCar, open}) => {
   const classes = useStyles({open});
-  const {event} = useEvent();
-  const {addToast} = useToast();
-
-  const onShare = async () => {
-    if (!event) return null;
-    // If navigator as share capability
-    if (!!navigator.share)
-      return await navigator.share({
-        title: `Caroster ${event.name}`,
-        url: `${window.location.href}`,
-      });
-    // Else copy URL in clipboard
-    else if (!!navigator.clipboard) {
-      await navigator.clipboard.writeText(window.location.href);
-      addToast(t('event.actions.copied'));
-      return true;
-    }
-  };
 
   return (
-    <>
-      <div className={classes.fabContainer}>
-        <Fab aria-label="more" onClick={toggleOpen}>
-          <Icon>add</Icon>
-        </Fab>
-      </div>
-      <div
-        className={classes.actionContainer}
-        onClick={toggleOpen}
-        role="dialog"
-      >
-        <Fab
-          color="primary"
-          aria-label="share"
-          variant="extended"
-          className={classes.extendedFab}
-          onClick={onShare}
-        >
-          <Icon className={classes.extendedIcon}>share</Icon>
-          Partager
-        </Fab>
-        <Fab
-          color="secondary"
-          aria-label="add-car"
-          variant="extended"
-          className={classes.extendedFab}
-          onClick={toggleNewCar}
-        >
-          <Icon className={classes.extendedIcon}>directions_car</Icon>
-          Ajouter
-        </Fab>
-      </div>
-    </>
+    <div className={classes.container}>
+      <Fab color="secondary" aria-label="add-car" onClick={toggleNewCar}>
+        <Icon>add</Icon>
+      </Fab>
+    </div>
   );
 };
 
 const useStyles = makeStyles(theme => ({
-  fabContainer: ({open}) => ({
+  container: ({open}) => ({
     position: 'fixed',
-    bottom: open ? '-4rem' : theme.spacing(2),
-    right: theme.spacing(2),
+    bottom: open ? -theme.spacing(8) : theme.spacing(3),
+    right: theme.spacing(3),
     transition: 'all 0.3s ease',
     transform: open ? 'rotate(45deg)' : '',
     zIndex: theme.zIndex.speedDial,
-    '& .MuiFab-root': {
-      backgroundColor: theme.palette.accent.yellow,
-    },
   }),
-  actionContainer: ({open}) => ({
-    position: 'fixed',
-    bottom: open ? 0 : '-100vh',
-    left: 0,
-    right: 0,
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'flex-end',
-    transition: 'all 0.3s ease',
-    height: '100vh',
-  }),
-  extendedIcon: {
-    marginRight: theme.spacing(2),
-  },
-  extendedFab: {
-    width: '11rem',
-    marginLeft: 'auto',
-    marginRight: 'auto',
-    marginBottom: theme.spacing(2),
-  },
 }));
 
 export default EventFab;

@@ -6,14 +6,14 @@ import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import Button from '@material-ui/core/Button';
 import Slide from '@material-ui/core/Slide';
-import moment from 'moment';
-import {useStrapi} from 'strapi-react-context';
-import {useTranslation} from 'react-i18next';
 import TextField from '@material-ui/core/TextField';
 import Slider from '@material-ui/core/Slider';
 import Typography from '@material-ui/core/Typography';
-import {makeStyles} from '@material-ui/core/styles';
 import {DateTimePicker} from '@material-ui/pickers';
+import {makeStyles} from '@material-ui/core/styles';
+import moment from 'moment';
+import {useTranslation} from 'react-i18next';
+import {useStrapi} from 'strapi-react-context';
 import {useToast} from '../../contexts/Toast';
 import {useEvent} from '../../contexts/Event';
 
@@ -95,14 +95,25 @@ onChange={e => setName(e.target.value)}
               id="NewCarName"
               name="name"
             />
+            <DateTimePicker
+              label={t('event.creation.date')}
+              value={date}
+              onChange={setDate}
+              className={classes.picker}
+              fullWidth
+              format="LLLL"
+              disablePast
+              id="NewCarDateTime"
+              name="date"
+            />
             <Typography variant="caption">{t('car.creation.seats')}</Typography>
             <Slider
               value={seats}
               onChange={(e, value) => setSeats(value)}
               step={1}
-              marks={marks}
               min={1}
               max={marks.length}
+              marks={marks}
               valueLabelDisplay="auto"
             />
             <TextField
@@ -110,24 +121,11 @@ className={classes.textField}
               label={t('car.creation.meeting')}
               fullWidth
               margin="dense"
-              multiline
-              rows={2}
               value={meeting}
               onChange={e => setMeeting(e.target.value)}
               id="NewCarMeeting"
               name="meeting"
             />
-            <DateTimePicker
-              label={t('event.creation.date')}
-              value={date}
-              onChange={setDate}
-              className={classes.textField}
-              fullWidth
-              format="LLLL"
-              disablePast
-              id="NewCarDateTime"
-              name="date"
-            />
             <TextField
               className={classes.textField}
               label={t('car.creation.phone')}
@@ -144,7 +142,7 @@ label={t('car.creation.notes')}
               fullWidth
               margin="dense"
               multiline
-              rows={2}
+              rows={4}
               value={details}
               onChange={e => setDetails(e.target.value)}
               id="NewCarDetails"
@@ -153,10 +151,16 @@ />
           </DialogContentText>
         </DialogContent>
         <DialogActions>
-          <Button id="NewCarCancel" onClick={toggle} tabIndex={-1}>
+          <Button
+            color="primary"
+            id="NewCarCancel"
+            onClick={toggle}
+            tabIndex={-1}
+          >
             {t('generic.cancel')}
           </Button>
           <Button
+            color="primary"
             variant="contained"
             type="submit"
             disabled={!canCreate}
@@ -172,7 +176,12 @@ );
 };
 
 const useStyles = makeStyles(theme => ({
-  textField: {marginBottom: theme.spacing(2)},
+  textField: {
+    marginBottom: theme.spacing(2),
+  },
+  picker: {
+    marginBottom: theme.spacing(3),
+  },
 }));
 
 export default NewCarDialog;

@@ -33,7 +33,13 @@ label={t('car.passengers.add')}
           id="NewPassenger"
           name="passenger"
         />
-        <IconButton edge="end" size="small" disabled={!name} onClick={onSave}>
+        <IconButton
+          color="primary"
+          edge="end"
+          size="small"
+          disabled={!name}
+          onClick={onSave}
+        >
           <Icon>check</Icon>
         </IconButton>
       </Box>

@@ -1,5 +1,6 @@ 
 import React from 'react';
 import Box from '@material-ui/core/Box';
+import Icon from '@material-ui/core/Icon';
 import Typography from '@material-ui/core/Typography';
 import {makeStyles} from '@material-ui/core/styles';
 import {useTranslation} from 'react-i18next';
@@ -23,6 +24,9 @@ px={2}
       py={1}
       minHeight={46}
     >
+      <Icon color="disabled" className={classes.icon}>
+        person
+      </Icon>
       <Typography variant="body2">{t('car.passengers.empty')}</Typography>
     </Box>
   );
@@ -31,6 +35,9 @@ 
 const useStyles = makeStyles(theme => ({
   name: {
     flexGrow: 1,
+  },
+  icon: {
+    marginRight: theme.spacing(2),
   },
 }));
 

@@ -37,8 +37,9 @@ key={index}
             passenger={passenger}
             button={
               <IconButton
+                size="small"
+                color="primary"
                 edge="end"
-                size="small"
                 onClick={() => onClick(index)}
               >
                 <Icon>{icon}</Icon>

@@ -81,7 +81,12 @@ return (
     <>
       <Paper className={classes.root}>
         <div className={classes.header}>
-          <IconButton className={classes.editBtn} onClick={onEdit}>
+          <IconButton
+            size="small"
+            color="primary"
+            className={classes.editBtn}
+            onClick={onEdit}
+          >
             {isEditing ? <Icon>check</Icon> : <Icon>edit</Icon>}
           </IconButton>
           <Typography variant="h5">{t('passenger.title')}</Typography>
@@ -128,6 +133,7 @@ editBtn: {
     position: 'absolute',
     top: 0,
     right: 0,
+    margin: theme.spacing(1),
     zIndex: theme.zIndex.speedDial,
   },
 }));

@@ -24,7 +24,7 @@ {children}
       <Snackbar
         anchorOrigin={{
           vertical: 'bottom',
-          horizontal: 'right',
+          horizontal: 'left',
         }}
         autoHideDuration={6000}
         open={toasts && toasts.length > 0}

@@ -17,7 +17,7 @@ },
     "creation": {
       "event_name": "Nom de l'événement",
       "creator_email": "Votre e-mail",
-      "date": "Date de l'événement",
+      "date": "Départ",
       "address": "Adresse de l'événement",
       "next": "Suivant",
       "tos": "J'accepte les conditions générales d'utilisation"

@@ -44,34 +44,65 @@ addToast(t('event.errors.cant_update'));
     }
   };
 
+  const onShare = async () => {
+    if (!event) return null;
+    // If navigator as share capability
+    if (!!navigator.share)
+      return await navigator.share({
+        title: `Caroster ${event.name}`,
+        url: `${window.location.href}`,
+      });
+    // Else copy URL in clipboard
+    else if (!!navigator.clipboard) {
+      await navigator.clipboard.writeText(window.location.href);
+      addToast(t('event.actions.copied'));
+      return true;
+    }
+  };
+
   if (!event) return <Loading />;
 
   return (
     <Layout>
       <AppBar
         position="static"
+        color="primary"
         className={classes.appbar}
         id={(isEditing && 'EditEvent') || (detailsOpen && 'Details') || 'Menu'}
       >
         <Toolbar>
           <Typography
             variant="h6"
+            noWrap
             className={classes.name}
             id="MenuHeaderTitle"
           >
             {event.name}
           </Typography>
           {!detailsOpen && (
-            <IconButton
-              edge="end"
-              id="MenuMoreInfo"
-              onClick={e => setAnchorEl(e.currentTarget)}
-            >
-              <Icon className={classes.barIcon}>more_vert</Icon>
-            </IconButton>
+            <>
+              <IconButton
+                color="inherit"
+                edge="end"
+                id="ShareBtn"
+                onClick={onShare}
+                className={classes.shareIcon}
+              >
+                <Icon>share</Icon>
+              </IconButton>
+              <IconButton
+                color="inherit"
+                edge="end"
+                id="MenuMoreInfo"
+                onClick={e => setAnchorEl(e.currentTarget)}
+              >
+                <Icon>more_vert</Icon>
+              </IconButton>
+            </>
           )}
           {detailsOpen && !isEditing && (
             <IconButton
+              color="inherit"
               edge="end"
               id="DetailsEditBtn"
               onClick={e => setIsEditing(true)}
@@ -80,7 +111,12 @@ <Icon className={classes.barIcon}>edit</Icon>
             </IconButton>
           )}
           {detailsOpen && isEditing && (
-            <IconButton edge="end" id="EditEventSubmit" onClick={onEventSave}>
+            <IconButton
+              color="inherit"
+              edge="end"
+              id="EditEventSubmit"
+              onClick={onEventSave}
+            >
               <Icon className={classes.barIcon}>done</Icon>
             </IconButton>
           )}
@@ -113,25 +149,27 @@ <EventDetails toggleDetails={toggleDetails} />
         </Container>
       </AppBar>
       <CarColumns toggleNewCar={toggleNewCar} />
-      <EventFab toggleNewCar={toggleNewCar} />
+      <EventFab toggleNewCar={toggleNewCar} open={openNewCar} />
       <NewCarDialog open={openNewCar} toggle={toggleNewCar} />
     </Layout>
   );
 };
 
 const useStyles = makeStyles(theme => ({
-  container: {padding: theme.spacing(2)},
+  container: {
+    padding: theme.spacing(2),
+  },
   appbar: ({detailsOpen}) => ({
-    transition: 'height 0.3s ease',
     overflow: 'hidden',
     height: detailsOpen ? '100vh' : theme.mixins.toolbar.minHeight,
+    transition: 'height 0.3s ease',
     zIndex: theme.zIndex.appBar,
   }),
   name: {
     flexGrow: 1,
   },
-  barIcon: {
-    color: 'white',
+  shareIcon: {
+    marginRight: theme.spacing(2),
   },
 }));
 

@@ -3,22 +3,26 @@ 
 export default createMuiTheme({
   palette: {
     primary: {
-      main: 'rgba(0,0,0,0.78)',
+      main: '#009688',
     },
     secondary: {
-      main: '#007CE7',
-    },
-    accent: {
-      yellow: '#FFD11D',
-      blue: '#0A12FF',
-      red: '#FF2200',
-      purple: '#251479',
+      main: '#ffde03',
     },
     background: {
       default: '#f4f4ff',
     },
-    text: {
-      primary: '#006C6B',
+  },
+  mixins: {
+    toolbar: {
+      minHeight: 64,
+    },
+  },
+  overrides: {
+    MuiAppBar: {
+      colorPrimary: {
+        backgroundColor: 'rgba(0,0,0,0.78)',
+        color: 'white',
+      },
     },
   },
 });