@@ -6,10 +6,8 @@ TextField,
   InputAdornment,
   Stack,
 } from '@mui/material';
-import {t} from 'i18next';
-
+import {useTranslation} from 'next-i18next';
 import {EventEntity, TripAlertEntity} from '../../generated/graphql';
-
 import PlaceInput from '../PlaceInput';
 import useCreateTripAlert from './useCreateTripAlert';
 
@@ -20,6 +18,8 @@ disabled: boolean;
 }
 
 const AlertsForm = ({event, tripAlertEntity, disabled}: Props) => {
+  const {t} = useTranslation();
+
   const [address, setAddress] = useState(
     tripAlertEntity?.attributes.address || ''
   );

@@ -1,7 +1,7 @@ 
-import React, {useState} from 'react';
+import React from 'react';
 import {Box, FormControlLabel, Typography} from '@mui/material';
 import Toggle from '../../components/Toggle/index';
-import {t} from 'i18next';
+import {useTranslation} from 'next-i18next';
 import {EventEntity} from '../../generated/graphql';
 import useCreateTripAlert from './useCreateTripAlert';
 
@@ -18,6 +18,7 @@ switchChecked,
   disabled,
   handleToggle,
 }: Props) => {
+  const {t} = useTranslation();
   const handleCreateTripAlert = useCreateTripAlert();
 
   const eventId = event.id;

@@ -3,10 +3,11 @@ import {
   SetTripAlertMutationVariables,
   useSetTripAlertMutation,
 } from '../../generated/graphql';
-import {t} from 'i18next';
+import {useTranslation} from 'next-i18next';
 import useToastStore from '../../stores/useToastStore';
 
 const useCreateTripAlert = () => {
+  const {t} = useTranslation();
   const addToast = useToastStore(s => s.addToast);
   const [setTripAlertMutation] = useSetTripAlertMutation();
 

@@ -1,5 +1,5 @@ 
 import {Box, IconButton, Icon, Typography} from '@mui/material';
-import {t} from 'i18next';
+import {useTranslation} from 'next-i18next';
 
 interface DrawerHeaderProps {
   isMobile: boolean;
@@ -7,6 +7,8 @@ onClose: () => void;
 }
 
 const DrawerHeader = ({isMobile, onClose}: DrawerHeaderProps) => {
+  const {t} = useTranslation();
+
   return (
     <Box>
       {!isMobile && (

@@ -29,7 +29,7 @@ const {travel, toggleEditing} = props;
   const theme = useTheme();
   const {t} = useTranslation();
   const {
-    userPermissions: {canEditTravel},
+    userPermissions: {canEditTravel, canSeeTravelDetails},
   } = usePermissions();
   const {setFocusOnTravel} = useMapStore();
   const {userId} = useProfile();
@@ -89,7 +89,7 @@ </Typography>
         )}
       </Typography>
 
-      {!!travel.attributes.phone_number && (
+      {!!travel.attributes.phone_number && canSeeTravelDetails(travel) && (
         <Box sx={{marginTop: 2}}>
           <Typography variant="overline" sx={{color: 'GrayText'}}>
             {t('travel.fields.phone')}

@@ -1,4 +1,4 @@ 
-import { PassengerEntity, TravelEntity } from '../generated/graphql';
+import {PassengerEntity, TravelEntity} from '../generated/graphql';
 import useEventStore from '../stores/useEventStore';
 import useProfile from './useProfile';
 
@@ -9,6 +9,7 @@ canEditWaitingList: () => boolean;
   canSetAlert: () => boolean;
   canAddTravel: () => boolean;
   canEditTravel: (travel: TravelEntity) => boolean;
+  canSeeTravelDetails: (travel: TravelEntity) => boolean;
   canJoinTravels: () => boolean;
   canAddToTravel: () => boolean;
   canDeletePassenger: (passenger: PassengerEntity) => boolean;
@@ -22,15 +23,16 @@ canEditWaitingList: () => false,
   canSetAlert: () => false,
   canAddTravel: () => false,
   canEditTravel: () => false,
+  canSeeTravelDetails: () => false,
   canJoinTravels: () => false,
   canAddToTravel: () => false,
   canDeletePassenger: () => false,
   canSeePassengerDetails: () => false,
 };
 
-const usePermissions = (): { userPermissions: UserPermissions } => {
-  const { event } = useEventStore();
-  const { profile, connected, userId } = useProfile();
+const usePermissions = (): {userPermissions: UserPermissions} => {
+  const {event} = useEventStore();
+  const {profile, connected, userId} = useProfile();
 
   const carosterPlus = event?.enabled_modules?.includes('caroster-plus');
   const userIsAnonymous = !connected;
@@ -43,6 +45,7 @@ canEditEventDetails: () => true,
     canEditWaitingList: () => true,
     canSetAlert: () => true,
     canAddTravel: () => true,
+    canSeeTravelDetails: () => true,
     canEditTravel: () => true,
     canJoinTravels: () => true,
     canAddToTravel: () => true,
@@ -51,10 +54,10 @@ canSeePassengerDetails: () => true,
   };
 
   if (carosterPlus) {
-    if (userIsAnonymous) return { userPermissions: noPermissions };
+    if (userIsAnonymous) return {userPermissions: noPermissions};
     else if (userIsEventCreator || userIsEventAdmin)
       return {
-        userPermissions: { ...allPermissions, canAddToTravel: () => false },
+        userPermissions: {...allPermissions, canAddToTravel: () => false},
       };
     else {
       const carosterPlusPermissions: UserPermissions = {
@@ -64,9 +67,15 @@ const travelCreatorId =
             travel.attributes.user?.data?.id || travel.attributes.user;
           return travelCreatorId === userId;
         },
-        
+
         canJoinTravels: () => true,
         canAddTravel: () => true,
+        canSeeTravelDetails: travel => {
+          const isInPassengersList = travel.attributes.passengers.data?.some(
+            passenger => passenger.attributes.user?.data?.id === userId
+          );
+          return isInPassengersList;
+        },
         canSetAlert: () => true,
         canDeletePassenger: passenger => {
           const travel = event?.travels?.data?.find(travel =>
@@ -79,13 +88,15 @@ const isCurrentPassenger =
             passenger.attributes.user?.data?.id === userId;
           return isTravelCreator || isCurrentPassenger;
         },
-        canSeePassengerDetails: (passenger) => {
-          const travel = event?.travels?.data?.find(travel => travel?.id === passenger.attributes.travel.data?.id)
+        canSeePassengerDetails: passenger => {
+          const travel = event?.travels?.data?.find(
+            travel => travel?.id === passenger.attributes.travel.data?.id
+          );
           const userIsDriver = travel?.attributes.user?.data?.id === userId;
           return userIsDriver || passenger.attributes.user?.data?.id === userId;
-        }
+        },
       };
-      return { userPermissions: carosterPlusPermissions };
+      return {userPermissions: carosterPlusPermissions};
     }
   }
   // Caroster Vanilla permissions
@@ -98,6 +109,7 @@ canDeletePassenger: () => true,
         canEditEventOptions: () => userIsEventCreator,
         canSetAlert: () => false,
         canJoinTravels: () => connected,
+        canSeeTravelDetails: () => true,
       },
     };
 };

@@ -29,6 +29,8 @@ const apolloClient = useApollo(pageProps);
   const {locale} = useLocale();
   useTolgee();
 
+  moment.locale(locale);
+
   useEffect(() => {
     // Remove the server-side injected CSS.
     const jssStyles = document.querySelector('#jss-server-side');