@@ -1,14 +1,17 @@ 
-import {Button, ButtonGroup} from '@mui/material';
+import {Button, ButtonGroup, useMediaQuery} from '@mui/material';
 import {useTranslation} from 'react-i18next';
 import useEventStore from '../../stores/useEventStore';
 import Link from 'next/link';
 import {useRouter} from 'next/router';
+import {useTheme} from '@mui/styles';
 
 type Props = {};
 
 const LinkedEventSwitch = (props: Props) => {
   const {t} = useTranslation();
   const router = useRouter();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
   const loadedEvent = useEventStore(s => s.event);
   const linkedEvent = loadedEvent?.linkedEvent?.data?.attributes;
 
@@ -18,19 +21,25 @@ const goEvent = loadedEvent.isReturnEvent ? linkedEvent : loadedEvent;
   const returnEvent = loadedEvent.isReturnEvent ? loadedEvent : linkedEvent;
 
   return (
-    <ButtonGroup variant="contained">
-      <Link href={router.asPath.replace(loadedEvent.uuid, goEvent.uuid)}>
+    <ButtonGroup variant="contained" fullWidth={isMobile}>
+      <Link
+        href={router.asPath.replace(loadedEvent.uuid, goEvent.uuid)}
+        style={{width: isMobile && '100%'}}
+      >
         <Button
           color={loadedEvent.isReturnEvent ? 'inherit' : 'secondary'}
-          sx={{color: 'black'}}
+          sx={{color: 'rgba(0, 0, 0, 0.87)'}}
         >
           {t`event.linked.goEvent`} ({goEvent.travels?.data?.length || 0})
         </Button>
       </Link>
-      <Link href={router.asPath.replace(loadedEvent.uuid, returnEvent.uuid)}>
+      <Link
+        href={router.asPath.replace(loadedEvent.uuid, returnEvent.uuid)}
+        style={{width: isMobile && '100%'}}
+      >
         <Button
           color={!loadedEvent.isReturnEvent ? 'inherit' : 'secondary'}
-          sx={{color: 'black'}}
+          sx={{color: 'rgba(0, 0, 0, 0.87)'}}
         >
           {t`event.linked.returnEvent`} (
           {returnEvent?.travels?.data?.length || 0})

@@ -13,7 +13,7 @@ import useActions from './useActions';
 import UserIcon from './UserIcon';
 import DrawerNotification from '../DrawerNotification';
 import useProfile from '../../hooks/useProfile';
-import {Chip} from '@mui/material';
+import {Chip, useMediaQuery} from '@mui/material';
 import LinkedEventSwitch from './LinkedEventSwitch';
 
 const EventBar = ({event, onAdd, goBack, title}) => {
@@ -23,6 +23,7 @@ const {share} = useShare();
   const [anchorEl, setAnchorEl] = useState(null);
   const menuActions = useActions({onAdd, eventId: event?.id});
   const isCarosterPlusEvent = event?.enabled_modules?.includes('caroster-plus');
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
 
   return (
     <AppBar
@@ -76,7 +77,7 @@ variant="outlined"
               sx={{color: 'white', borderColor: 'white'}}
             />
           )}
-          <LinkedEventSwitch />
+          {!isMobile && <LinkedEventSwitch />}
         </Box>
         <>
           <IconButton
@@ -110,6 +111,7 @@ actions={menuActions}
           />
         </>
       </Toolbar>
+      {isMobile && <LinkedEventSwitch />}
     </AppBar>
   );
 };

@@ -1,11 +1,20 @@ 
-import {Box, Paper} from '@mui/material';
+import {Box, Paper, useMediaQuery} from '@mui/material';
 import SearchField from './SearchField';
+import {useTheme} from '@mui/styles';
 
 type Props = {};
 
 const MapActions = (props: Props) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
   return (
-    <Box zIndex={400} position="relative" top={75} left={25} right={25}>
+    <Box
+      zIndex={400}
+      position="relative"
+      top={isMobile ? 120 : 100}
+      left={25}
+      right={25}
+    >
       <Box component={Paper} p={1} maxWidth={`calc(100vw - 50px)`} width={350}>
         <SearchField />
       </Box>

@@ -33,7 +33,7 @@ userPermissions: {canAddTravel},
   } = usePermissions();
 
   return (
-    <Box my={4} mx="auto" pb={16} mt={9} maxWidth="100%" width={340}>
+    <Box my={4} mx="auto" pb={16} mt={15} maxWidth="100%" width={340}>
       <Typography variant="h6" align="center" color="textSecondary">
         {title}
       </Typography>

@@ -20,7 +20,7 @@ import usePermissions from '../../hooks/usePermissions';
 import useDisplayTravels from './useDisplayTravels';
 import useDisplayMarkers from './useDisplayMarkers';
 import FilterByDate from './FilterByDate';
-import {Button, Icon} from '@mui/material';
+import {Button, Icon, useMediaQuery} from '@mui/material';
 import useTravelsStore from '../../stores/useTravelsStore';
 
 interface Props {
@@ -38,6 +38,7 @@ const {profile, userId} = useProfile();
   const {
     userPermissions: {canAddTravel},
   } = usePermissions();
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
 
   const [selectedTravel, setSelectedTravel] = useState<TravelEntity>();
   const [mapEnabled, toggleMap] = useReducer(i => !i, true);
@@ -105,7 +106,7 @@ {showMap && <Map />}
       <Box
         px={3}
         pb={2}
-        pt={showMap ? 2 : 10}
+        pt={showMap ? 2 : isMobile ? 15 : 10}
         display="flex"
         gap={2}
         maxWidth="100%"