@@ -3,7 +3,6 @@ import MapController from './MapController';
 import MapWrapper from './MapWrapper';
 import useMapStore from '../../stores/useMapStore';
 import Bounds from './Bounds';
-import {Box} from '@mui/material';
 import MapActions from './MapActions';
 
 const TOKEN_FREE_TILES_URL =
@@ -28,9 +27,7 @@ attribution={TOKEN_FREE_TILES_LAYER_ATTRIBUTION}
         />
         <MapController />
         {markers}
-        <Box zIndex={400} position="relative" top={75} left={25}>
-          <MapActions />
-        </Box>
+        <MapActions />
       </MapContainer>
     </MapWrapper>
   );

@@ -5,8 +5,10 @@ type Props = {};
 
 const MapActions = (props: Props) => {
   return (
-    <Box component={Paper} p={1} maxWidth={350}>
-      <SearchField />
+    <Box zIndex={400} position="relative" top={75} left={25} right={25}>
+      <Box component={Paper} p={1} maxWidth={`calc(100vw - 50px)`} width={350}>
+        <SearchField />
+      </Box>
     </Box>
   );
 };

@@ -41,7 +41,7 @@ 
   return (
     <>
       <Button
-        sx={{bgcolor: 'background.paper'}}
+        sx={{bgcolor: 'background.paper', width: {xs: 1, sm: 'auto'}}}
         variant="contained"
         color="inherit"
         onClick={handleClickListItem}

@@ -6,40 +6,68 @@ import {useRouter} from 'next/router';
 import Box from '@mui/material/Box';
 import ShareEvent from '../ShareEvent';
 import SupportCaroster from '../SupportCaroster';
+import {Icon} from '@mui/material';
+import usePermissions from '../../hooks/usePermissions';
 
 interface Props {
   eventName: string;
   title: string;
   isCarosterPlus: string;
   showImage?: boolean;
+  showTravelModal: () => void;
 }
 
-const NoCar = ({eventName, title, isCarosterPlus, showImage}: Props) => {
+const NoCar = ({
+  eventName,
+  title,
+  isCarosterPlus,
+  showImage,
+  showTravelModal,
+}: Props) => {
   const {t} = useTranslation();
   const theme = useTheme();
   const router = useRouter();
   const {uuid} = router.query;
+  const {
+    userPermissions: {canAddTravel},
+  } = usePermissions();
 
   return (
     <Box my={4} mx="auto" pb={16} mt={9} maxWidth="100%" width={340}>
       <Typography variant="h6" align="center" color="textSecondary">
         {title}
       </Typography>
+
       {showImage && (
-        <Box
-          component="img"
-          sx={{
-            display: 'block',
-            margin: '0 auto',
-            width: '100%',
-            height: 'auto',
+        <>
+          {canAddTravel() && (
+            <Box my={4} textAlign="center">
+              <Button
+                onClick={showTravelModal}
+                aria-label="add-car"
+                variant="contained"
+                color="secondary"
+                endIcon={<Icon>add</Icon>}
+              >
+                {t('travel.creation.title')}
+              </Button>
+            </Box>
+          )}
+          <Box
+            component="img"
+            sx={{
+              display: 'block',
+              margin: '0 auto',
+              width: '100%',
+              height: 'auto',
 
-            [theme.breakpoints.down('md')]: {
-              width: '50%',
-            },
-          }}
-          src="/assets/car.png"
-        />
+              [theme.breakpoints.down('md')]: {
+                width: '50%',
+              },
+            }}
+            src="/assets/car.png"
+          />
+        </>
       )}
       <Typography sx={{whiteSpace: 'pre-line', mt: 4}} color="textSecondary">
         {isCarosterPlus

@@ -24,7 +24,7 @@ import {Button, Icon} from '@mui/material';
 import useTravelsStore from '../../stores/travelsStore';
 
 interface Props {
-  toggle: () => void;
+  showTravelModal: () => void;
 }
 
 const TravelColumns = (props: Props) => {
@@ -83,6 +83,7 @@ if (!event || travels?.length === 0)
     return (
       <NoCar
         showImage
+        showTravelModal={props.showTravelModal}
         eventName={event?.name}
         title={t('event.no_travel.title')}
         isCarosterPlus={isCarosterPlus}
@@ -99,15 +100,16 @@ 
   return (
     <>
       {showMap && <Map />}
-      <Box px={3} py={2} display="flex" gap={2}>
+      <Box px={3} py={2} display="flex" gap={2} maxWidth="100%" flexWrap="wrap">
         <FilterByDate dates={dates} buttonFilterContent={buttonFilterContent} />
         {canAddTravel() && (
           <Button
-            onClick={props.toggle}
+            onClick={props.showTravelModal}
             aria-label="add-car"
             variant="contained"
             color="secondary"
             endIcon={<Icon>add</Icon>}
+            sx={{width: {xs: 1, sm: 'auto'}}}
           >
             {t('travel.creation.title')}
           </Button>

@@ -41,7 +41,7 @@ : () => setNewTravelDialog(true);
 
   return (
     <Box>
-      <TravelColumns toggle={addTravelClickHandler} />
+      <TravelColumns showTravelModal={addTravelClickHandler} />
       <NewTravelDialog
         key={selectedVehicle?.id || 'noVehicle'}
         opened={openNewTravelDialog}