@@ -14,10 +14,12 @@ import moment from 'moment';
 import {useTranslation} from 'react-i18next';
 import useEventStore from '../../stores/useEventStore';
 import useActions from './useActions';
+import useProfile from '../../hooks/useProfile';
 
 const NewTravelDialog = ({open, toggle}) => {
   const {t} = useTranslation();
   const classes = useStyles();
+  const {user} = useProfile();
   const event = useEventStore(s => s.event);
   const actions = useActions({event});
 
@@ -48,6 +50,7 @@ vehicle: {
         name,
         seats,
         phone_number: phone,
+        ...(user ? {user: user.id} : {}),
       },
     };
     await actions.createTravel(travel);

@@ -5,11 +5,11 @@ import {makeStyles} from '@material-ui/core';
 import {useTranslation} from 'react-i18next';
 
 interface Props {
-  toggleNewTravel: () => void;
+  toggle: () => void;
 }
 
 const AddTravel = (props: Props) => {
-  const {toggleNewTravel} = props;
+  const {toggle} = props;
   const classes = useStyles();
   const {t} = useTranslation();
   return (
@@ -19,7 +19,7 @@ classes={{containedSecondary: classes.button}}
         fullWidth
         variant="contained"
         color="primary"
-        onClick={toggleNewTravel}
+        onClick={toggle}
       >
         {t('travel.creation.title')}
       </Button>

@@ -27,7 +27,7 @@ addSelf: boolean;
 }
 
 interface Props {
-  toggleNewTravel: () => void;
+  toggle: () => void;
 }
 
 const TravelColumns = (props: Props) => {

@@ -0,0 +1,52 @@ 
+import {forwardRef} from 'react';
+import {makeStyles} from '@material-ui/core/styles';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import Button from '@material-ui/core/Button';
+import Slide from '@material-ui/core/Slide';
+import {useTranslation} from 'react-i18next';
+
+const VehicleChoiceDialog = ({open, toggle, toggleNewTravel}) => {
+  const {t} = useTranslation();
+  const classes = useStyles();
+
+  return (
+    <Dialog
+      fullWidth
+      maxWidth="sm"
+      open={open}
+      onClose={toggle}
+      TransitionComponent={Transition}
+    >
+      <DialogTitle>{t('travel.vehicle.title')}</DialogTitle>
+      <DialogContent dividers></DialogContent>
+      <DialogActions className={classes.actions}>
+        <Button
+          color="primary"
+          variant="outlined"
+          fullWidth
+          onClick={() => {
+            toggleNewTravel();
+            toggle();
+          }}
+        >
+          {t('travel.vehicle.add')}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+const Transition = forwardRef(function Transition(props, ref) {
+  return <Slide direction="up" ref={ref} {...props} />;
+});
+
+const useStyles = makeStyles(theme => ({
+  actions: {
+    padding: theme.spacing(2, 3),
+  },
+}));
+
+export default VehicleChoiceDialog;

@@ -141,6 +141,10 @@ "actions": {
       "remove_alert": "Are you sure you want to remove this car and add the subscribers to the waiting list?",
       "removed": "The car has been removed"
     },
+    "vehicle": {
+      "add": "Add a new vehicle",
+      "title": "My Vehicles"
+    },
     "passengers": {
       "empty": "Available seat",
       "add": "Add a passenger",

@@ -141,6 +141,10 @@ "actions": {
       "remove_alert": "Voulez-vous vraiment supprimer cette voiture et ajouter les inscrits à la liste d'attente ?",
       "removed": "La voiture a été supprimée"
     },
+    "vehicle": {
+      "add": "Ajouter un nouveau véhicule",
+      "title": "Mes véhicules"
+    },
     "passengers": {
       "empty": "Place disponible",
       "add": "Ajouter un passager",

@@ -1,4 +1,6 @@ 
 import {useState, useReducer, useEffect} from 'react';
+import Box from '@material-ui/core/Box';
+import {makeStyles} from '@material-ui/core/styles';
 import {useTranslation} from 'react-i18next';
 import {initializeApollo} from '../../lib/apolloClient';
 import useToastStore from '../../stores/useToastStore';
@@ -7,10 +9,10 @@ import Layout from '../../layouts/Default';
 import AddToMyEventDialog from '../../containers/AddToMyEventDialog';
 import TravelColumns from '../../containers/TravelColumns';
 import NewTravelDialog from '../../containers/NewTravelDialog';
+import VehicleChoiceDialog from '../../containers/VehicleChoiceDialog';
 import WelcomeDialog from '../../containers/WelcomeDialog';
 import EventBar from '../../containers/EventBar';
 import Loading from '../../containers/Loading';
-import Fab from '../../containers/Fab';
 import OnBoardingTour from '../../containers/OnBoardingTour';
 import {
   useUpdateEventMutation,
@@ -20,6 +22,8 @@ EventByUuidDocument,
   EditEventInput,
 } from '../../generated/graphql';
 import ErrorPage from '../_error';
+import AddTravel from '../../containers/TravelColumns/AddTravel';
+import useProfile from '../../hooks/useProfile';
 
 const POLL_INTERVAL = 10000;
 
@@ -37,7 +41,9 @@ };
 
 const Event = (props: Props) => {
   const {eventUUID} = props;
+  const classes = useStyles();
   const {t} = useTranslation();
+  const {user} = useProfile();
   const addToast = useToastStore(s => s.addToast);
   const setEvent = useEventStore(s => s.setEvent);
   const eventUpdate = useEventStore(s => s.event);
@@ -45,6 +51,7 @@ const setIsEditing = useEventStore(s => s.setIsEditing);
   const [updateEvent] = useUpdateEventMutation();
   const [isAddToMyEvent, setIsAddToMyEvent] = useState(false);
   const [openNewTravel, toggleNewTravel] = useReducer(i => !i, false);
+  const [openVehicleChoice, toggleVehicleChoice] = useReducer(i => !i, false);
   const {data: {eventByUUID: event} = {}} = useEventByUuidQuery({
     pollInterval: POLL_INTERVAL,
     variables: {uuid: eventUUID},
@@ -99,14 +106,16 @@ onAdd={setIsAddToMyEvent}
         onSave={onSave}
         onShare={onShare}
       />
-      <TravelColumns toggleNewTravel={toggleNewTravel} />
-      <Fab
-        color="primary"
-        open={openNewTravel}
-        onClick={toggleNewTravel}
-        aria-label="add-travel"
-      />
+      <TravelColumns toggle={toggleVehicleChoice} />
+      <Box className={classes.bottomRight}>
+        <AddTravel toggle={user ? toggleVehicleChoice : toggleNewTravel} />
+      </Box>
       <NewTravelDialog open={openNewTravel} toggle={toggleNewTravel} />
+      <VehicleChoiceDialog
+        open={openVehicleChoice}
+        toggle={toggleVehicleChoice}
+        toggleNewTravel={toggleNewTravel}
+      />
       <AddToMyEventDialog
         event={event}
         open={isAddToMyEvent}
@@ -139,5 +148,14 @@ },
     },
   };
 }
+
+const useStyles = makeStyles(theme => ({
+  bottomRight: {
+    position: 'absolute',
+    bottom: theme.spacing(1),
+    right: theme.spacing(6),
+    width: 200,
+  },
+}));
 
 export default EventPage;