diff --git a/mobile/app/(tabs)/_layout.tsx b/mobile/app/(tabs)/_layout.tsx
index acbdee433ea88ce8f214506973b40f3ed4a7370f..8a503eb8ab3183d346708fc8f5939cead5aa84a7 100644
--- a/mobile/app/(tabs)/_layout.tsx
+++ b/mobile/app/(tabs)/_layout.tsx
@@ -24,7 +24,6 @@ export default function Layout() {
           color: LIGTHT_THEME.color.white,
         },
         headerTitleAlign: "center",
-        
       }}
     >
       <Tabs.Screen
diff --git a/mobile/app/(tabs)/travel_history.tsx b/mobile/app/(tabs)/travel_history.tsx
index 2416e829975cee925257c510ad938654f0a465b0..3b9c3e213f5acb8301ae9134caf8b24f56885dd5 100644
--- a/mobile/app/(tabs)/travel_history.tsx
+++ b/mobile/app/(tabs)/travel_history.tsx
@@ -1,9 +1,8 @@
 import { View } from "react-native";
+import { TravelHistoryPage } from "../../src/screens/travel_history/travel_history_page";
 
 export default function TravelHistoryScreen() {
   return (
-    <View >
-
-    </View>
+    <TravelHistoryPage/>
   );
 }
\ No newline at end of file
diff --git a/mobile/app/_layout.tsx b/mobile/app/_layout.tsx
index 2ef26b5ef9f38060284b6e8d0a76838285af679b..aaff8dba5e6c2b6451ed525b4ee0440fd6e1b145 100644
--- a/mobile/app/_layout.tsx
+++ b/mobile/app/_layout.tsx
@@ -4,13 +4,16 @@ import { LIGTHT_THEME } from "../src/constants/theme";
 import { AuthContextProvider, useAuth } from "../src/contexts/auth_context";
 import { ActivityIndicator } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { AudioContextProvider } from "../src/contexts/audio_context";
 
 export default function Root() {
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
       <DataContextProvider>
         <AuthContextProvider>
-          <MainLayout />
+          <AudioContextProvider>
+            <MainLayout />
+          </AudioContextProvider>
         </AuthContextProvider>
       </DataContextProvider>
     </GestureHandlerRootView>
@@ -23,10 +26,16 @@ const MainLayout = () => {
   if (isLoading) {
     return <ActivityIndicator />;
   }
-  
+
   return (
-    <Stack initialRouteName="(tabs)" >
-      <Stack.Screen name="(tabs)" options={{ headerShown: false, statusBarColor: LIGTHT_THEME.color.primary }} />
+    <Stack initialRouteName="(tabs)">
+      <Stack.Screen
+        name="(tabs)"
+        options={{
+          headerShown: false,
+          statusBarColor: LIGTHT_THEME.color.primary,
+        }}
+      />
       <Stack.Screen
         name="state"
         options={{
@@ -43,11 +52,9 @@ const MainLayout = () => {
       />
       <Stack.Screen
         name="sign_up"
-        options = {
-          {
-            headerShown: false
-          }
-        }
+        options={{
+          headerShown: false,
+        }}
       />
       <Stack.Screen
         name="profile"
@@ -56,6 +63,25 @@ const MainLayout = () => {
           headerShown: false,
         }}
       />
+      <Stack.Screen
+        name="scan"
+        options={{
+          title: "Scan",
+          statusBarColor: LIGTHT_THEME.color.primary,
+          headerStyle: {
+            backgroundColor: LIGTHT_THEME.color.primary,
+          },
+          headerTitleStyle: {
+            color: LIGTHT_THEME.color.white,
+          },
+          headerTitleAlign: "center",
+          headerTintColor: LIGTHT_THEME.color.white,
+        }}
+      />
+      <Stack.Screen name="travel_history" options={{
+        headerShown: false,
+        statusBarColor: LIGTHT_THEME.color.primary,
+      }}/>
     </Stack>
   );
 };
diff --git a/mobile/app/login.tsx b/mobile/app/login.tsx
index d574b54332899c8146da2303ea23f71130ec3579..f1e466a180bfb91bf97956a2b0ae592dabf0b751 100644
--- a/mobile/app/login.tsx
+++ b/mobile/app/login.tsx
@@ -1,4 +1,4 @@
-import { LoginPage } from "../src/screens/login/login_page";
+import { LoginPage } from "../src/auth/pages/login_page";
 
 const LoginScreen = () => {
   return (
diff --git a/mobile/app/scan.tsx b/mobile/app/scan.tsx
index 7f00020bb6385157fe51d9f21efca1ab05c23bdd..16a0619e430afbc119bb5e75cdd782ad28e60524 100644
--- a/mobile/app/scan.tsx
+++ b/mobile/app/scan.tsx
@@ -1,113 +1,7 @@
-import { View, Text, Button, StyleSheet, Animated } from "react-native";
-import { useQRScanner } from "../src/hooks/useQRScanner";
-import { CameraView } from "expo-camera/next";
-import { BarCodeScanningResult } from "expo-camera";
-import { useEffect, useRef } from "react";
+import ScanPage from "../src/screens/scan/scan_page";
 
 export default function ScanScreen() {
-  const { hasPermission, getPermission, scanning, onQRScanned, qrData } =
-    useQRScanner();
-
-  const qrAnimation = useRef(new Animated.Value(0)).current;
-
-  const startAnimation = () => {
-    Animated.loop(
-      Animated.sequence([
-        Animated.timing(qrAnimation, {
-          toValue: 1,
-          duration: 1000,
-          useNativeDriver: true,
-        }),
-        Animated.timing(qrAnimation, {
-          toValue: 0,
-          duration: 1000,
-          useNativeDriver: true,
-        }),
-      ])
-    ).start();
-  };
-
-  useEffect(() => {
-    return () => {
-      qrAnimation.stopAnimation();
-    };
-  }, []);
-
-  if (!hasPermission) {
-    return (
-      <View>
-        <Text>No permission</Text>
-        <Button title="Request permission" onPress={getPermission} />
-      </View>
-    );
-  }
-
-  if (!scanning) {
-    return (
-      <View>
-        <Text>{qrData}</Text>
-      </View>
-    );
-  }
-
-  startAnimation();
-
   return (
-    <View style={styles.container}>
-      <View style={{borderRadius: 10, overflow: 'hidden'}}>
-        <CameraView
-          style={styles.camera}
-          barcodeScannerSettings={{
-            barcodeTypes: ["qr"],
-          }}
-          onBarcodeScanned={onQRScanned}
-          zoom={0.5}
-        >
-          <View style={styles.square}>
-            <Animated.View
-              style={{
-                width: "100%",
-                height: 2,
-                borderColor: "white",
-                borderWidth: 1,
-                borderRadius: 10,
-                transform: [
-                  {
-                    translateY: qrAnimation.interpolate({
-                      inputRange: [0, 1],
-                      outputRange: [-10, 200],
-                    }),
-                  },
-                ],
-              }}
-            />
-          </View>
-        </CameraView>
-      </View>
-    </View>
+    <ScanPage/>
   );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  camera: {
-    width: 250,
-    aspectRatio: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    borderRadius: 10,
-  },
-  square: {
-    width: 200,
-    aspectRatio: 1,
-    borderWidth: 2,
-    borderColor: "white",
-    borderRadius: 10,
-    overflow: "hidden",
-    backgroundColor: "rgba(0,0,0,0.2)",
-  },
-});
+}
\ No newline at end of file
diff --git a/mobile/app/sign_up.tsx b/mobile/app/sign_up.tsx
index 236776dbd566288ab8011409dccbb8ed64334d12..26e0aa2bf8e6c42a2d7681850d3278f4f074dcb6 100644
--- a/mobile/app/sign_up.tsx
+++ b/mobile/app/sign_up.tsx
@@ -1,6 +1,6 @@
 import { View, StyleSheet, Image, Text, Button } from "react-native";
 import { LIGTHT_THEME } from "../src/constants/theme";
-import { SignUpForm } from "../src/components/sign_up_form/sign_up_form";
+import { SignUpForm } from "../src/auth/components/sign_up_form";
 import { router } from "expo-router";
 const loginImage = require("../assets/login-image.jpg");
 
diff --git a/mobile/app/state/[stateId]/town/[townId]/activity/_layout.tsx b/mobile/app/state/[stateId]/town/[townId]/activity/_layout.tsx
index 496d77698aef63ff9bdd88047237d6ae17fb54c2..e7b5dee516c796975c4633a39ce5f7d2baa845e8 100644
--- a/mobile/app/state/[stateId]/town/[townId]/activity/_layout.tsx
+++ b/mobile/app/state/[stateId]/town/[townId]/activity/_layout.tsx
@@ -1,18 +1,22 @@
 import { Stack } from "expo-router";
+import { LIGTHT_THEME } from "../../../../../../src/constants/theme";
 
 export default function ActivitySelectionScreen() {
-    return (
-        <Stack>
-            <Stack.Screen name="[activityId]/index" options={
-                {
-                    headerShown: false
-                }
-            } />
-            <Stack.Screen name="[activityId]/travel" options={
-                {
-                    headerShown: false
-                }
-            } />
-        </Stack>
-    );
-}
\ No newline at end of file
+  return (
+    <Stack>
+      <Stack.Screen
+        name="[activityId]/index"
+        options={{
+          headerShown: false,
+        }}
+      />
+      <Stack.Screen
+        name="[activityId]/travel"
+        options={{
+          headerShown: false,
+          
+        }}
+      />
+    </Stack>
+  );
+}
diff --git a/mobile/app/travel_history/_layout.tsx b/mobile/app/travel_history/_layout.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0290a74442dd35f1684afd8c8bbe685e54948124
--- /dev/null
+++ b/mobile/app/travel_history/_layout.tsx
@@ -0,0 +1,26 @@
+import { Stack } from "expo-router";
+import { LIGTHT_THEME } from "../../src/constants/theme";
+import { Button } from "react-native";
+import { ShareButton } from "../../src/travel_history/components/share_button";
+
+export default function Layout() {
+  return (
+    <Stack
+      screenOptions={{
+        headerStyle: {
+          backgroundColor: LIGTHT_THEME.color.primary,
+        },
+        headerTitleStyle: {
+          color: LIGTHT_THEME.color.white,
+        },
+        headerTitleAlign: "center",
+        headerTintColor: LIGTHT_THEME.color.white,
+      }}
+    >
+      <Stack.Screen name="details/[id]" options={{
+        title: "Travel Details",
+        headerRight: () => <ShareButton onPress={() => {}}/>
+      }}/>
+    </Stack>
+  );
+}
diff --git a/mobile/app/travel_history/details/[id].tsx b/mobile/app/travel_history/details/[id].tsx
new file mode 100644
index 0000000000000000000000000000000000000000..282857b37a4803b59239ae69fcd4a828b8731af0
--- /dev/null
+++ b/mobile/app/travel_history/details/[id].tsx
@@ -0,0 +1,19 @@
+import { useLocalSearchParams } from "expo-router";
+import { View, Text } from "react-native";
+import { TravelDetailsPage } from "../../../src/screens/travel_details/travel_details_page";
+
+export default function Details() {
+    const { id } = useLocalSearchParams<{ id: string }>();
+
+    if (!id) {
+        return (
+            <View>
+                <Text>Invalid ID</Text>
+            </View>
+        );
+    }
+
+    return (
+        <TravelDetailsPage id={+id} />
+    );
+}
\ No newline at end of file
diff --git a/mobile/package-lock.json b/mobile/package-lock.json
index b8242da5e3e4c2e2bbec9aa7a076062039a1d6b2..fe2af4c1189291025f002901fefac236bb330173 100644
--- a/mobile/package-lock.json
+++ b/mobile/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@gorhom/bottom-sheet": "^4.6.1",
         "@react-native-community/datetimepicker": "7.6.1",
+        "@react-native-community/slider": "4.4.2",
         "axios": "^1.6.8",
         "expo": "~50.0.14",
         "expo-av": "~13.10.6",
@@ -5571,6 +5572,11 @@
         "invariant": "^2.2.4"
       }
     },
+    "node_modules/@react-native-community/slider": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/@react-native-community/slider/-/slider-4.4.2.tgz",
+      "integrity": "sha512-D9bv+3Vd2gairAhnRPAghwccgEmoM7g562pm8i4qB3Esrms5mggF81G3UvCyc0w3jjtFHh8dpQkfEoKiP0NW/Q=="
+    },
     "node_modules/@react-native/assets-registry": {
       "version": "0.73.1",
       "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.73.1.tgz",
diff --git a/mobile/package.json b/mobile/package.json
index 51a98de3c9092e2a63367007f9ff1b0a2280d59e..0a051fa228d99ce1344b55e2254677dbdd4e33bc 100644
--- a/mobile/package.json
+++ b/mobile/package.json
@@ -34,7 +34,8 @@
     "react-native-reanimated": "~3.6.2",
     "react-native-safe-area-context": "4.8.2",
     "react-native-screens": "~3.29.0",
-    "expo-av": "~13.10.6"
+    "expo-av": "~13.10.6",
+    "@react-native-community/slider": "4.4.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
diff --git a/mobile/src/components/login_form/login_form.tsx b/mobile/src/auth/components/login_form.tsx
similarity index 93%
rename from mobile/src/components/login_form/login_form.tsx
rename to mobile/src/auth/components/login_form.tsx
index 1dd04ee7a77ca2ac8f218af683f353086e25587a..0e0b55bac868a186197306b6186f2d24b2e75cc9 100644
--- a/mobile/src/components/login_form/login_form.tsx
+++ b/mobile/src/auth/components/login_form.tsx
@@ -1,9 +1,9 @@
 import { Control, Controller, FieldValues } from "react-hook-form";
 import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { CustomTextInput } from "../text_input/text_input";
+import { CustomTextInput } from "../../common/components/form/text_input";
 import { LIGTHT_THEME } from "../../constants/theme";
-import { LoginFormValues } from "../../hooks/useLoggin";
-import { OrDivision } from "../or_division/or_division";
+import { LoginFormValues } from "../hooks/useLoggin";
+import { OrDivision } from "../../common/components/form/or_division";
 import { LANG } from "../../lang/translations";
 
 interface LoginFormProps {
diff --git a/mobile/src/components/sign_up_form/sign_up_form.tsx b/mobile/src/auth/components/sign_up_form.tsx
similarity index 93%
rename from mobile/src/components/sign_up_form/sign_up_form.tsx
rename to mobile/src/auth/components/sign_up_form.tsx
index 33c0a12a08d7fb2dc62834418b427ec6523562cf..9b91b8e38d60b13752d45f65783be441d99d3e34 100644
--- a/mobile/src/components/sign_up_form/sign_up_form.tsx
+++ b/mobile/src/auth/components/sign_up_form.tsx
@@ -6,12 +6,12 @@ import {
   TouchableOpacity,
   View,
 } from "react-native";
-import { CustomTextInput } from "../text_input/text_input";
+import { CustomTextInput } from "../../common/components/form/text_input";
 import { LIGTHT_THEME } from "../../constants/theme";
-import { useLoggin } from "../../hooks/useLoggin";
-import { OrDivision } from "../or_division/or_division";
-import { useSignUp } from "../../hooks/useSignUp";
-import { DateTextInput } from "../date_text_input/date_text_input";
+import { useLoggin } from "../hooks/useLoggin";
+import { OrDivision } from "../../common/components/form/or_division";
+import { useSignUp } from "../hooks/useSignUp";
+import { DateTextInput } from "../../common/components/form/date_text_input";
 
 export const SignUpForm = () => {
   const { control, onSubmit } = useSignUp();
diff --git a/mobile/src/hooks/useLoggin.ts b/mobile/src/auth/hooks/useLoggin.ts
similarity index 91%
rename from mobile/src/hooks/useLoggin.ts
rename to mobile/src/auth/hooks/useLoggin.ts
index 379452daf03df273422fd5b24b44f58b3047e498..802aefddce8d09c8cd2da3d8c10919c0e17b09ca 100644
--- a/mobile/src/hooks/useLoggin.ts
+++ b/mobile/src/auth/hooks/useLoggin.ts
@@ -1,7 +1,7 @@
 import { set, useForm } from "react-hook-form"
-import { useAuth } from "../contexts/auth_context";
+import { useAuth } from "../../contexts/auth_context";
 import { Navigator, Redirect, router } from "expo-router";
-import { useDataContext } from "../contexts/data_context";
+import { useDataContext } from "../../contexts/data_context";
 
 export type LoginFormValues = {
     email: string;
diff --git a/mobile/src/hooks/useSignUp.ts b/mobile/src/auth/hooks/useSignUp.ts
similarity index 93%
rename from mobile/src/hooks/useSignUp.ts
rename to mobile/src/auth/hooks/useSignUp.ts
index 07c8933347d090b03d5b274ac54e53cc22bbd42c..41dbc8a1b3cce77931d4e99a69b513bb3acc394c 100644
--- a/mobile/src/hooks/useSignUp.ts
+++ b/mobile/src/auth/hooks/useSignUp.ts
@@ -1,6 +1,6 @@
 import { useForm } from "react-hook-form"
-import { useDataContext } from "../contexts/data_context";
-import { useAuth } from "../contexts/auth_context";
+import { useDataContext } from "../../contexts/data_context";
+import { useAuth } from "../../contexts/auth_context";
 import { router } from "expo-router";
 
 interface SignUpForm {
diff --git a/mobile/src/screens/login/login_page.tsx b/mobile/src/auth/pages/login_page.tsx
similarity index 93%
rename from mobile/src/screens/login/login_page.tsx
rename to mobile/src/auth/pages/login_page.tsx
index 68dacfb00cd4ba2f5c6901489092457da1395995..4a3750d40c8c5f4c78a1eedcb9222d6aa98f7d77 100644
--- a/mobile/src/screens/login/login_page.tsx
+++ b/mobile/src/auth/pages/login_page.tsx
@@ -1,6 +1,6 @@
 import { View, Image, StyleSheet, Button } from "react-native";
-import { LoginForm } from "../../components/login_form/login_form";
-import { useLoggin } from "../../hooks/useLoggin";
+import { LoginForm } from "../components/login_form";
+import { useLoggin } from "../hooks/useLoggin";
 import { LIGTHT_THEME } from "../../constants/theme";
 import { router } from "expo-router";
 import { LANG } from "../../lang/translations";
diff --git a/mobile/src/components/animated_background/animated_background.tsx b/mobile/src/common/components/animated_background.tsx
similarity index 100%
rename from mobile/src/components/animated_background/animated_background.tsx
rename to mobile/src/common/components/animated_background.tsx
diff --git a/mobile/src/common/components/audio_player.tsx b/mobile/src/common/components/audio_player.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ad8fe1a72f0cc2fd7d3ad4404c72dc0d3f499791
--- /dev/null
+++ b/mobile/src/common/components/audio_player.tsx
@@ -0,0 +1,77 @@
+import { TouchableOpacity, View, StyleSheet, Text } from "react-native";
+import { FontAwesome, Feather } from "@expo/vector-icons";
+import Slider from "@react-native-community/slider";
+import { millisecondsToHourFormat } from "../../utils/time";
+import { LIGTHT_THEME } from "../../constants/theme";
+import { useAudio } from "../../contexts/audio_context";
+import { useEffect } from "react";
+
+const audio = require("./../../../assets/audio_prueba.mp3");
+
+interface AudioPlayerProps {
+  audioUrl: string;
+  title: string;
+  description: string;
+}
+
+export const AudioPlayer = () => {
+  const { loadAudio, position, togglePlay, isPlaying, duration, onValueChange } =
+    useAudio();
+
+    useEffect(() => {
+        loadAudio(audio);
+    }, []);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.sliderContainer}>
+        <Text style={styles.hour_text}>
+          {millisecondsToHourFormat(position)}
+        </Text>
+        <Slider
+          thumbTintColor="gray"
+          minimumTrackTintColor={LIGTHT_THEME.color.white}
+          minimumValue={0}
+          maximumValue={duration}
+          value={position}
+          onValueChange={onValueChange}
+          style={styles.slider}
+        />
+        <Text style={styles.hour_text}>
+          {millisecondsToHourFormat(duration)}
+        </Text>
+      </View>
+      <TouchableOpacity onPress={togglePlay}>
+        <Feather
+          name={isPlaying ? "pause-circle" : "play-circle"}
+          size={54}
+          color={LIGTHT_THEME.color.white}
+        />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    height: 100,
+    width: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: LIGTHT_THEME.color.primary,
+    gap: 10,
+  },
+  sliderContainer: {
+    width: "100%",
+    display: "flex",
+    flexDirection: "row",
+    paddingHorizontal: 20,
+  },
+  slider: {
+    flex: 1,
+  },
+  hour_text: {
+    color: LIGTHT_THEME.color.white,
+    fontWeight: "bold",
+  },
+});
diff --git a/mobile/src/components/caroussel/caroussel.tsx b/mobile/src/common/components/caroussel/caroussel.tsx
similarity index 93%
rename from mobile/src/components/caroussel/caroussel.tsx
rename to mobile/src/common/components/caroussel/caroussel.tsx
index 6472d3f05900dd8856effef3ba63852c5eb461b5..b78eee7555a84506652f13e3214f9fdd5465727d 100644
--- a/mobile/src/components/caroussel/caroussel.tsx
+++ b/mobile/src/common/components/caroussel/caroussel.tsx
@@ -1,7 +1,7 @@
 import { View, Animated, Text, Dimensions, Image, NativeSyntheticEvent, NativeScrollEvent } from "react-native";
-import { PlaceInfoEntity } from "../../domain/entities/place_info_entity";
+import { PlaceInfoEntity } from "../../../domain/entities/place_info_entity";
 import { useRef } from "react";
-import { StateDataSource } from "../../domain/datasources/state_datasource";
+import { StateDataSource } from "../../../domain/datasources/state_datasource";
 import { CarousselTile } from "./caroussel_tile";
 import { router } from "expo-router";
 
diff --git a/mobile/src/components/caroussel/caroussel_tile.tsx b/mobile/src/common/components/caroussel/caroussel_tile.tsx
similarity index 96%
rename from mobile/src/components/caroussel/caroussel_tile.tsx
rename to mobile/src/common/components/caroussel/caroussel_tile.tsx
index cdaf6e2a046f228753efe7da942fb4962f8834ae..65a61985b1f67f3e6baf10c4c84eb179028374b0 100644
--- a/mobile/src/components/caroussel/caroussel_tile.tsx
+++ b/mobile/src/common/components/caroussel/caroussel_tile.tsx
@@ -7,7 +7,7 @@ import {
   Text,
   TouchableOpacity,
 } from "react-native";
-import { PlaceInfoEntity } from "../../domain/entities/place_info_entity";
+import { PlaceInfoEntity } from "../../../domain/entities/place_info_entity";
 import { Link } from "expo-router";
 
 interface CarousselTileProps {
diff --git a/mobile/src/components/custom_tile_button/custom_tile_button.tsx b/mobile/src/common/components/custom_tile_button.tsx
similarity index 63%
rename from mobile/src/components/custom_tile_button/custom_tile_button.tsx
rename to mobile/src/common/components/custom_tile_button.tsx
index 197cfc3c8f4e544548689f56d01790b98b3aeb53..93719b020358251452cf9f544f17a8d0ed2a2b83 100644
--- a/mobile/src/components/custom_tile_button/custom_tile_button.tsx
+++ b/mobile/src/common/components/custom_tile_button.tsx
@@ -4,8 +4,9 @@ import { MaterialIcons } from "@expo/vector-icons";
 import { LIGTHT_THEME } from "../../constants/theme";
 
 interface CustomTileButtonProps {
-  leadingIcon: ReactNode;
+  leadingIcon?: ReactNode;
   title: string;
+  subtitle?: string;
   onPress?: () => void;
 }
 
@@ -13,12 +14,18 @@ export const CustomTileButton = ({
   title,
   onPress,
   leadingIcon,
+  subtitle
 }: CustomTileButtonProps) => {
   return (
     <TouchableOpacity onPress={onPress} style={styles.account_option}>
       <View style={{ flexDirection: "row", gap: 20, alignItems: "center" }}>
         {leadingIcon}
-        <Text style={styles.title}>{title}</Text>
+        <View style={styles.titleContainer} >
+          <Text style={styles.title} numberOfLines={1} >{title}</Text>
+          {
+            subtitle && <Text style={styles.subtitle} numberOfLines={1} >{subtitle}</Text>
+          }
+        </View>
       </View>
       <MaterialIcons name="keyboard-arrow-right" size={30} color="black" />
     </TouchableOpacity>
@@ -30,7 +37,7 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    height: 55,
+    height: 60,
     paddingHorizontal: 10,
     borderTopWidth: 2,
     borderTopColor: "#ccc",
@@ -38,7 +45,22 @@ const styles = StyleSheet.create({
     borderRadius: 5,
     width: "100%",
   },
+  titleContainer: {
+    height: "100%",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    paddingVertical: 10,
+    maxWidth: "85%",
+
+  },
   title: {
     fontSize: 16,
+    fontWeight: "700",
+  },
+  subtitle: {
+    fontSize: 14,
+    color: "#777",
+    fontWeight: "500",
+    textAlign: "left",
   }
 });
diff --git a/mobile/src/components/date_text_input/date_text_input.tsx b/mobile/src/common/components/form/date_text_input.tsx
similarity index 94%
rename from mobile/src/components/date_text_input/date_text_input.tsx
rename to mobile/src/common/components/form/date_text_input.tsx
index 1e09349452bb0e2efb0e93a061995f8befd5d0f1..dae598e5002489b7babda2d2631a7c4b01cbf1cf 100644
--- a/mobile/src/components/date_text_input/date_text_input.tsx
+++ b/mobile/src/common/components/form/date_text_input.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { CustomTextInput } from "../text_input/text_input";
+import { CustomTextInput } from "./text_input";
 import { TouchableOpacity, View } from "react-native";
 import DateTimePickerModal from "react-native-modal-datetime-picker";
 
diff --git a/mobile/src/components/or_division/or_division.tsx b/mobile/src/common/components/form/or_division.tsx
similarity index 84%
rename from mobile/src/components/or_division/or_division.tsx
rename to mobile/src/common/components/form/or_division.tsx
index af51421b3e6c4dd50e92715efc2fb0d5f018917e..4fd16baa869aa4c73bd89f131ac972cf0482d41d 100644
--- a/mobile/src/components/or_division/or_division.tsx
+++ b/mobile/src/common/components/form/or_division.tsx
@@ -1,6 +1,6 @@
 import { View, Text, StyleSheet } from "react-native";
-import { LIGTHT_THEME } from "../../constants/theme";
-import { LANG } from "../../lang/translations";
+import { LIGTHT_THEME } from "../../../constants/theme";
+import { LANG } from "../../../lang/translations";
 
 export const OrDivision = () => {
   return (
diff --git a/mobile/src/components/text_input/text_input.tsx b/mobile/src/common/components/form/text_input.tsx
similarity index 97%
rename from mobile/src/components/text_input/text_input.tsx
rename to mobile/src/common/components/form/text_input.tsx
index 4a7ad5a93e5c8c8218657255fbd587092e57912c..55e7e733c64b5bd033b88ecdf07d40a1c9e6db11 100644
--- a/mobile/src/components/text_input/text_input.tsx
+++ b/mobile/src/common/components/form/text_input.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
 import { TextInput, Text, StyleSheet, View, Animated, TouchableOpacity } from "react-native";
-import { LIGTHT_THEME } from "../../constants/theme";
+import { LIGTHT_THEME } from "../../../constants/theme";
 
 interface TextInputProps {
   isPassword?: boolean;
diff --git a/mobile/src/components/full_page_loader/full_page_loader.tsx b/mobile/src/common/components/full_page_loader.tsx
similarity index 100%
rename from mobile/src/components/full_page_loader/full_page_loader.tsx
rename to mobile/src/common/components/full_page_loader.tsx
diff --git a/mobile/src/components/audio_player/audio_player.tsx b/mobile/src/components/audio_player/audio_player.tsx
deleted file mode 100644
index ac2c83d11c76a29733d11bc4919f5f311e083fd3..0000000000000000000000000000000000000000
--- a/mobile/src/components/audio_player/audio_player.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { TouchableOpacity, View, StyleSheet } from "react-native";
-import { useAudio } from "../../hooks/useAudio";
-import { FontAwesome } from '@expo/vector-icons';
-
-const audio = require('./../../../assets/audio_prueba.mp3');
-
-interface AudioPlayerProps {
-    audioUrl: string;
-    title: string;
-    description: string;
-}
-
-export const AudioPlayer = ({ audioUrl, title, description }: AudioPlayerProps) => {
-    const { togglePlay, isPlaying } = useAudio({ source: audio });
-
-
-    return  <View style={styles.container}>
-        <TouchableOpacity onPress={togglePlay}>
-            <FontAwesome name={ isPlaying ? 'pause-circle-o' : 'play-circle-o'} size={60} color="black" />
-        </TouchableOpacity>
-    </View>;
-}
-
-const styles = StyleSheet.create({
-    container: {
-        height: 100,
-        width: '100%',
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: 'rgba(0,0,0,0.1)'
-    }
-});
\ No newline at end of file
diff --git a/mobile/src/constants/theme.ts b/mobile/src/constants/theme.ts
index 5946735ba36b4955196517fbcbff5fb6f36d02fc..57b3464216e88921060099970f995e32bc8f2982 100644
--- a/mobile/src/constants/theme.ts
+++ b/mobile/src/constants/theme.ts
@@ -19,7 +19,7 @@ export const LIGTHT_THEME: Theme = {
         primary: "rgb(235, 73, 161)",
         secondary: "gray",
         terciary: "#f0f0f0",
-        background: "rgb(245, 225, 236)",
+        background: "#f5f5f5",
         white: "white",
         black: "black",
     },
diff --git a/mobile/src/contexts/audio_context.tsx b/mobile/src/contexts/audio_context.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..272b76ed488df9525bbae1ab0293845ce8cb21ed
--- /dev/null
+++ b/mobile/src/contexts/audio_context.tsx
@@ -0,0 +1,88 @@
+import { PropsWithChildren, createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { AVPlaybackSource, AVPlaybackStatus, Audio } from "expo-av";
+
+type AudioContextType = {
+    loadAudio: (source?: AVPlaybackSource) => Promise<void>;
+    togglePlay: () => Promise<void>; 
+    isPlaying: boolean; 
+    duration: number; 
+    position: number;
+    onValueChange: (value: number) => void; 
+    onUnmount: () => void;
+}
+
+const AudioContext = createContext(
+    {
+        loadAudio:  async  (source?: AVPlaybackSource) => {},
+        togglePlay: async () => {}, 
+        isPlaying: false, 
+        duration: 0, 
+        position: 0,
+        onValueChange: (value: number) => {}, 
+        onUnmount: () => {}
+    } as AudioContextType
+);
+
+type AudioContextProviderProps = PropsWithChildren<{}>;
+
+export const AudioContextProvider = ({children}: AudioContextProviderProps) => {
+    const soundRef = useRef<Audio.Sound | null>(null);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [duration, setDuration] = useState(0);
+    const [position, setPosition] = useState(0);
+
+    const onPlaybackStatusUpdate = (status: AVPlaybackStatus) => {
+        status.isLoaded && setPosition(status.positionMillis);
+    }
+
+    const onValueChange = (value: number) => {
+        if (soundRef.current) {
+            soundRef.current.setPositionAsync(value);
+        }
+    }
+
+    const loadAudio = async (source?: AVPlaybackSource) => {
+        if (!source) return;
+        const { sound, status } = await Audio.Sound.createAsync(source, {
+            shouldPlay: false
+        });
+        if (status.isLoaded) {
+            sound.setOnPlaybackStatusUpdate(onPlaybackStatusUpdate);
+            setDuration(status.durationMillis || 0);
+            soundRef.current = sound;
+            setIsPlaying(status.isPlaying);
+            console.log('audio loaded');
+        }
+    }
+
+    const togglePlay = async () => {
+        if (soundRef.current) {
+            if (isPlaying) {
+                await soundRef.current.pauseAsync();
+            } else {
+                await soundRef.current.playAsync();
+            }
+            setIsPlaying(!isPlaying);
+        }
+    }
+
+    const onUnmount = () => {
+        if (soundRef.current) {
+            soundRef.current.unloadAsync();
+        }
+    }
+
+    return (
+        <AudioContext.Provider value={{ loadAudio, togglePlay, isPlaying, duration, position, onValueChange, onUnmount}}>
+            {children}
+        </AudioContext.Provider>
+    );
+}
+
+export const useAudio = () => {
+    const context = useContext(AudioContext);
+    if (!context) {
+        throw new Error("useAudio must be used within an AudioContextProvider");
+    }
+    return context;
+}
\ No newline at end of file
diff --git a/mobile/src/contexts/data_context.tsx b/mobile/src/contexts/data_context.tsx
index b5e0584cbd70f9d025ee62f7b90505fdd9b105f0..bc97c5101030b82fd906896b925fcfea90da984d 100644
--- a/mobile/src/contexts/data_context.tsx
+++ b/mobile/src/contexts/data_context.tsx
@@ -9,11 +9,15 @@ import { AuthDatasourceProd } from "../infrastructure/datasource/prod/auth_datas
 import { ActivityRepository } from "../domain/repositories/activity_repository";
 import { ActivityDatasourceDev } from "../infrastructure/datasource/dev/activity_datasource";
 import { ActivityRepositoryDev } from '../infrastructure/repositories/activity_repository';
+import { TravelDatasourceDev } from "../infrastructure/datasource/dev/travel_datasource";
+import { TravelRepositoryImpl } from "../infrastructure/repositories/travel_repository";
+import { TravelRepository } from "../domain/repositories/travel_repository";
 
 type DataContextType = {
     statesRepository: StateRepository | null;
     authRepository: AuthRepository | null;
     activityRepository: ActivityRepository | null;
+    travelRepository: TravelRepository | null;
 };
 
 type DataContextProviderProps = PropsWithChildren<{}>;
@@ -21,7 +25,8 @@ type DataContextProviderProps = PropsWithChildren<{}>;
 const DataContext = createContext<DataContextType>({
     statesRepository: null,
     authRepository: null,
-    activityRepository: null
+    activityRepository: null,
+    travelRepository: null
 });
 
 export const DataContextProvider = ({ children }: DataContextProviderProps) => {
@@ -31,11 +36,14 @@ export const DataContextProvider = ({ children }: DataContextProviderProps) => {
     const authRepository = new AuthRepositoryImpl(authDataSource);
     const activityDataSource = new ActivityDatasourceDev();
     const activityRepository = new ActivityRepositoryDev(activityDataSource);
+    const travelDatasource = new TravelDatasourceDev();
+    const travelRepository = new TravelRepositoryImpl(travelDatasource);
     
     const value = {
         statesRepository,
         authRepository,
-        activityRepository
+        activityRepository,
+        travelRepository
     };
 
     return (
diff --git a/mobile/src/domain/datasources/travel_datasource.ts b/mobile/src/domain/datasources/travel_datasource.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a5b2697ac8a0a3d3ffc8ad0541e7d80a09ee41f3
--- /dev/null
+++ b/mobile/src/domain/datasources/travel_datasource.ts
@@ -0,0 +1,7 @@
+import { TravelDetails } from "../entities/travel_details";
+import { TravelHistory } from "../entities/travel_history";
+
+export interface TravelDataSource {
+    getTravelHistory(): Promise<TravelHistory>;
+    getTravelDetails(id: number): Promise<TravelDetails>;
+}
\ No newline at end of file
diff --git a/mobile/src/domain/entities/travel_details.ts b/mobile/src/domain/entities/travel_details.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8dcbf8a27e88b4eed8e0564ad12521f7f507e387
--- /dev/null
+++ b/mobile/src/domain/entities/travel_details.ts
@@ -0,0 +1,13 @@
+import { PlaceInfoEntity } from "./place_info_entity";
+import { Travel } from "./travel_history";
+
+export interface TravelDetails {
+    travel: Travel;
+    activityList: TravelHistoryActivity[];
+}
+
+export interface TravelHistoryActivity extends PlaceInfoEntity {
+    startDate: Date;
+    endDate: Date;
+    rating: number;
+}
\ No newline at end of file
diff --git a/mobile/src/domain/entities/travel_history.ts b/mobile/src/domain/entities/travel_history.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7a03fb7593872daefa44b1ab6f31ef9f788c6f77
--- /dev/null
+++ b/mobile/src/domain/entities/travel_history.ts
@@ -0,0 +1,12 @@
+export interface TravelHistory {
+    pastTravels: Travel[];
+    activeTravel?: Travel;
+}
+
+export interface Travel {
+    id: number;
+    destination: string;
+    imageUri?: string;
+    startDate: Date;
+    endDate: Date;
+}
\ No newline at end of file
diff --git a/mobile/src/domain/repositories/travel_repository.ts b/mobile/src/domain/repositories/travel_repository.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ea4a79268bedd3e9c7b4f50e0182e12f9ee5fc9e
--- /dev/null
+++ b/mobile/src/domain/repositories/travel_repository.ts
@@ -0,0 +1,7 @@
+import { TravelDetails } from "../entities/travel_details";
+import { TravelHistory } from "../entities/travel_history";
+
+export interface TravelRepository {
+    getTravelHistory(): Promise<TravelHistory>;
+    getTravelDetails(id: number): Promise<TravelDetails>;
+}
\ No newline at end of file
diff --git a/mobile/src/hooks/useAudio.ts b/mobile/src/hooks/useAudio.ts
index b166f2ff28ae65e263dda1068033d4100ae70e1e..ae2e3179c8fcecf3173e27918573c9dab93dfe94 100644
--- a/mobile/src/hooks/useAudio.ts
+++ b/mobile/src/hooks/useAudio.ts
@@ -1,5 +1,7 @@
 import { AVPlaybackSource, AVPlaybackStatus, Audio } from "expo-av";
-import { useEffect, useState } from "react";
+import { useFocusEffect } from "expo-router";
+import { useCallback, useEffect, useState } from "react";
+import { set } from 'react-hook-form';
 
 interface AudioPlayerProps {
     source: AVPlaybackSource;
@@ -8,12 +10,27 @@ interface AudioPlayerProps {
 export const useAudio = ({ source }: AudioPlayerProps) => {
     const [sound, setSound] = useState<Audio.Sound | null>(null);
     const [isPlaying, setIsPlaying] = useState(false);
+    const [duration, setDuration] = useState(0);
+    const [position, setPosition] = useState(0);
+
+    const onPlaybackStatusUpdate = (status: AVPlaybackStatus) => {
+        status.isLoaded && setPosition(status.positionMillis);
+    }
+
+    const onValueChange = (value: number) => {
+        if (sound) {
+            sound.setPositionAsync(value);
+        }
+    }
 
     const loadAudio = async () => {
+        
         const { sound, status } = await Audio.Sound.createAsync(source, {
             shouldPlay: false
         });
         if (status.isLoaded) {
+            sound.setOnPlaybackStatusUpdate(onPlaybackStatusUpdate);
+            setDuration(status.durationMillis || 0);
             setSound(sound);
             setIsPlaying(status.isPlaying);
         }
@@ -30,15 +47,16 @@ export const useAudio = ({ source }: AudioPlayerProps) => {
         }
     }
 
+    const onUnmount = useCallback(() => {
+        sound?.unloadAsync();
+    }, [sound]);
+
     useEffect(() => {
         loadAudio();
         return () => {
-            if (sound) {
-                sound.pauseAsync();
-                sound.unloadAsync();
-            }
+            onUnmount();
         }
-    }, [source]);
+    }, []);
 
-    return { togglePlay, isPlaying };
+    return { togglePlay, isPlaying, duration, position, onValueChange, onUnmount };
 }
\ No newline at end of file
diff --git a/mobile/src/hooks/useGet.ts b/mobile/src/hooks/useGet.ts
index 63644ffef34b05512a94193af24c9cafc1d26d9f..89f089d16be87ce749ed39df432bb5497fbe1f8a 100644
--- a/mobile/src/hooks/useGet.ts
+++ b/mobile/src/hooks/useGet.ts
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { ApiRequestStatus } from "../constants/api_request_states";
 
 export const useGet = <T>(callback: () => Promise<T>) => {
-    const [data, setData] = useState<T>({} as T);
+    const [data, setData] = useState<T | null>(null);
     const [requestStatus, setRequestStatus] = useState(ApiRequestStatus.LOADING);
 
     useEffect(() => {
diff --git a/mobile/src/hooks/useGetActivityInfo.ts b/mobile/src/hooks/useGetActivityInfo.ts
index 3c50756c85a640899be61194734e3c9c81544cae..8f3f747edfcde927f34e3fc1c6e16891f6ffcb9b 100644
--- a/mobile/src/hooks/useGetActivityInfo.ts
+++ b/mobile/src/hooks/useGetActivityInfo.ts
@@ -5,7 +5,7 @@ import { useGet } from "./useGet";
 export const useGetActivityInfo = (activityId: number) => {
     const { statesRepository } = useDataContext();
     const callback = async () =>{
-        return await statesRepository!.getActivityInfo(activityId) || undefined;
+        return await statesRepository!.getActivityInfo(activityId);
     }
     const { data, requestStatus } = useGet<ActivityInfoEntity | undefined>(callback);
     return { activityInfo: data, requestStatus };
diff --git a/mobile/src/hooks/useGetTravelDetails.ts b/mobile/src/hooks/useGetTravelDetails.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cffb20c8acb69d4d25b3668a372115e7a65d1474
--- /dev/null
+++ b/mobile/src/hooks/useGetTravelDetails.ts
@@ -0,0 +1,20 @@
+import { useDataContext } from "../contexts/data_context";
+import { TravelDetails } from "../domain/entities/travel_details";
+import { useGet } from "./useGet";
+
+interface GetTravelDetailsProps {
+    id: number;
+}
+
+export const useGetTravelDetails = ({ id }: GetTravelDetailsProps) => {
+    const { travelRepository } = useDataContext();
+    const callback = async () => {
+        return await travelRepository!.getTravelDetails(id);
+    }
+    const { data, requestStatus } = useGet<TravelDetails>(callback);
+
+    return {
+        data,
+        requestStatus
+    }
+}
\ No newline at end of file
diff --git a/mobile/src/hooks/useGetTravelHistory.ts b/mobile/src/hooks/useGetTravelHistory.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1d73ddf1378a876efb1fbe60be98660f5f43580a
--- /dev/null
+++ b/mobile/src/hooks/useGetTravelHistory.ts
@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+import { useDataContext } from "../contexts/data_context"
+import { Travel, TravelHistory } from "../domain/entities/travel_history";
+import { useGet } from "./useGet";
+
+interface SectionItem {
+    title: string;
+    data: Travel[];
+}
+
+export const useGetTravelHistory = () => {
+    const { travelRepository } = useDataContext();
+    const [preparedData, setPreparedData] = useState<SectionItem[] | null>(null);
+    const callback = () => travelRepository!.getTravelHistory();
+    const { data, requestStatus } = useGet<TravelHistory>(callback);
+    //TODO: Cambiar la destructuración múltiple de pastTravels
+    useEffect(() => {
+        if (data) {
+            const pastTravels = [...data.pastTravels, ...data.pastTravels, ...data.pastTravels, ...data.pastTravels, ...data.pastTravels, ...data.pastTravels,];
+            const activeTravels = data.activeTravel ? [data.activeTravel] : [];
+            const preparedData = [
+                { title: "Active Travels", data: activeTravels },
+                { title: "Past Travels", data: pastTravels },
+            ];
+            setPreparedData(preparedData);
+        }
+    }, [data]);
+
+    return { travelHistory: preparedData, requestStatus };
+}
\ No newline at end of file
diff --git a/mobile/src/hooks/useQRScanner.ts b/mobile/src/hooks/useQRScanner.ts
index a6af09ce986ffaff6e386926298167c92986d290..5aecb0d6c0adffeb179d1d921b565d8cbc3c47b6 100644
--- a/mobile/src/hooks/useQRScanner.ts
+++ b/mobile/src/hooks/useQRScanner.ts
@@ -4,7 +4,11 @@ import { Camera, PermissionResponse } from "expo-camera";
 import { BarCodeScannerResult } from "expo-barcode-scanner";
 import { router } from "expo-router";
 
-export const useQRScanner = () => {
+interface QRScannerHookProps {
+  validator?: (data: string) => boolean;
+}
+
+export const useQRScanner = ({ validator }: QRScannerHookProps) => {
   const [status, requestPermission] = Camera.useCameraPermissions();
   const [hasPermission, setHasPermission] = useState<boolean>(false);
   const [qrData, setQRData] = useState<string | null>(null);
@@ -17,7 +21,9 @@ export const useQRScanner = () => {
   };
 
   const onQRScanned = (data: BarCodeScannerResult) => {
-    console.log(data.data);
+    if (validator && !validator(data.data)) {
+      return;
+    }
     setQRData(data.data);
     setScanning(false);
     router.back();
diff --git a/mobile/src/infrastructure/datasource/dev/travel_datasource.ts b/mobile/src/infrastructure/datasource/dev/travel_datasource.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6526b733e7941753a5de4f8c44df1bdb06c9e41c
--- /dev/null
+++ b/mobile/src/infrastructure/datasource/dev/travel_datasource.ts
@@ -0,0 +1,64 @@
+import { TravelDataSource } from "../../../domain/datasources/travel_datasource";
+import { TravelDetails } from "../../../domain/entities/travel_details";
+import { TravelHistory } from "../../../domain/entities/travel_history";
+
+export class TravelDatasourceDev implements TravelDataSource {
+    getTravelDetails(id: number): Promise<TravelDetails> {
+        return Promise.resolve(travelDetails);
+    }
+    getTravelHistory(): Promise<TravelHistory> {
+        return Promise.resolve(travelHistory);
+    }
+}
+
+const travelHistory: TravelHistory = {
+    pastTravels: [
+        {
+            id: 1,
+            destination: "Jerez",
+            imageUri: 'https://www.lugaresturisticosenmexico.com/wp-content/uploads/2022/04/Jerez-Zacatecas-Pueblo-Magico-2.jpg',
+            startDate: new Date("2020-01-01"),
+            endDate: new Date("2020-01-10")
+        },
+        {
+            id: 2,
+            destination: "Jalpa",
+            imageUri: 'https://www.liderempresarial.com/wp-content/uploads/2022/12/Jalpa-1140x570.jpg',
+            startDate: new Date("2020-02-01"),
+            endDate: new Date("2020-02-10")
+        }
+    ]
+};
+
+const travelDetails: TravelDetails = {
+    travel: travelHistory.pastTravels[0],
+    activityList: [
+        {
+            id: 1,
+            name: "Hotel",
+            imageUri: 'https://www.mexicodesconocido.com.mx/wp-content/uploads/2014/04/aguascalientes_pueblo_magico_calvillo_plaza_principal_ig.jpg',
+            description: "Hotel description",
+            startDate: new Date("2020-01-01"),
+            endDate: new Date("2020-01-10"),
+            rating: 4
+        },
+        {
+            id: 2,
+            name: "Restaurant",
+            imageUri: 'https://www.mexicodesconocido.com.mx/wp-content/uploads/2014/04/aguascalientes_pueblo_magico_calvillo_plaza_principal_ig.jpg',
+            description: "Restaurant description",
+            startDate: new Date("2020-01-01"),
+            endDate: new Date("2020-01-10"),
+            rating: 3
+        },
+        {
+            id: 3,
+            name: "Museum",
+            imageUri: 'https://www.mexicodesconocido.com.mx/wp-content/uploads/2014/04/aguascalientes_pueblo_magico_calvillo_plaza_principal_ig.jpg',
+            description: "Museum description",
+            startDate: new Date("2020-01-01"),
+            endDate: new Date("2020-01-10"),
+            rating: 5
+        }
+    ]
+};
\ No newline at end of file
diff --git a/mobile/src/infrastructure/repositories/travel_repository.ts b/mobile/src/infrastructure/repositories/travel_repository.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4a6fd8a9ec18ce38872d88ccde083ab7f6717e98
--- /dev/null
+++ b/mobile/src/infrastructure/repositories/travel_repository.ts
@@ -0,0 +1,19 @@
+import { TravelDataSource } from "../../domain/datasources/travel_datasource";
+import { TravelDetails } from "../../domain/entities/travel_details";
+import { TravelHistory } from "../../domain/entities/travel_history";
+import { TravelRepository } from "../../domain/repositories/travel_repository";
+
+export class TravelRepositoryImpl implements TravelRepository {
+    private travelDataSource: TravelDataSource;
+
+    constructor(travelDataSource: TravelDataSource) {
+        this.travelDataSource = travelDataSource;
+    }
+    getTravelDetails(id: number): Promise<TravelDetails> {
+        return this.travelDataSource.getTravelDetails(id);
+    }
+
+    getTravelHistory(): Promise<TravelHistory> {
+        return this.travelDataSource.getTravelHistory();
+    }
+}
\ No newline at end of file
diff --git a/mobile/src/screens/account/account_page.tsx b/mobile/src/screens/account/account_page.tsx
index 44dedaea54ecf45d76c96dc9b8e6db9f5d04d15e..205d8ae9220b86a80f14d97185fca86843c53400 100644
--- a/mobile/src/screens/account/account_page.tsx
+++ b/mobile/src/screens/account/account_page.tsx
@@ -13,8 +13,9 @@ import {
   MaterialCommunityIcons,
   FontAwesome,
 } from "@expo/vector-icons";
-import { CustomTileButton } from "../../components/custom_tile_button/custom_tile_button";
+import { CustomTileButton } from "../../common/components/custom_tile_button";
 import { router } from "expo-router";
+import { LIGTHT_THEME } from "../../constants/theme";
 
 //TODO: Add source to CircleAvatar
 const source = require("../../../assets/avatar.png");
@@ -68,7 +69,7 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: "center",
     padding: 20,
-    backgroundColor: "#f5f5f5",
+    backgroundColor: LIGTHT_THEME.color.background,
   },
   profilePhotoContainer: {
     alignItems: "center",
diff --git a/mobile/src/screens/activity_description/activity_description_page.tsx b/mobile/src/screens/activity_description/activity_description_page.tsx
index 2e02b8ac65191459681e6fb4e290f75146c66583..27d92a83ddb046800788885c6088df62b6f928b6 100644
--- a/mobile/src/screens/activity_description/activity_description_page.tsx
+++ b/mobile/src/screens/activity_description/activity_description_page.tsx
@@ -8,7 +8,7 @@ import {
   ScrollView,
   Dimensions,
 } from "react-native";
-import { FullPageLoader } from "../../components/full_page_loader/full_page_loader";
+import { FullPageLoader } from "../../common/components/full_page_loader";
 import { ApiRequestStatus } from "../../constants/api_request_states";
 import { useGetActivityInfo } from "../../hooks/useGetActivityInfo";
 import { router } from "expo-router";
@@ -52,7 +52,7 @@ export const ActivityDescriptionPage = ({
   if (requestStatus === ApiRequestStatus.LOADING) {
     return <FullPageLoader />;
   }
-  if (activityInfo === undefined) {
+  if (activityInfo === undefined || activityInfo === null) {
     return (
       <View>
         <Text>Activity not found</Text>
diff --git a/mobile/src/screens/activity_point/activity_point.tsx b/mobile/src/screens/activity_point/activity_point.tsx
index 6769d6403aa2389ebcfe3464da3888e05ed0db83..feeeac1fc0cfa3ff76d6310a8be1bc257a7a33b4 100644
--- a/mobile/src/screens/activity_point/activity_point.tsx
+++ b/mobile/src/screens/activity_point/activity_point.tsx
@@ -1,9 +1,15 @@
-import { Image, Text, View, StyleSheet } from "react-native";
-import { FullPageLoader } from "../../components/full_page_loader/full_page_loader";
+import { Image, Text, View, StyleSheet, Button, BackHandler } from "react-native";
+import { FullPageLoader } from "../../common/components/full_page_loader";
 import { ApiRequestStatus } from "../../constants/api_request_states";
 import { useGetActivityPoint } from "../../hooks/useGetActivityPoint";
 import { ScrollView } from "react-native-gesture-handler";
-import { AudioPlayer } from "../../components/audio_player/audio_player";
+import { AudioPlayer } from "../../common/components/audio_player";
+import { FloatingBackButton } from "../../components/floating_back_button/floating_back_button";
+import { TouchableOpacity } from "@gorhom/bottom-sheet";
+import { LIGTHT_THEME } from "../../constants/theme";
+import { router, useFocusEffect } from "expo-router";
+import { useAudio } from "../../contexts/audio_context";
+import { useEffect } from "react";
 
 interface ActivityPointScreenProps {
   stateId: number;
@@ -25,6 +31,22 @@ export const ActivityPointScreen = ({
     placeNumber: id,
   });
 
+  const { onUnmount } = useAudio();
+
+  console.log('render')
+
+  useEffect(() => {
+    const backAction = () => {
+      onUnmount();
+      router.back();
+      return true;
+    }
+
+    const backHandler = BackHandler.addEventListener('hardwareBackPress', backAction);
+
+    return () => backHandler.remove();
+  }, []);
+
   if (requestStatus === ApiRequestStatus.LOADING) {
     return <FullPageLoader />;
   }
@@ -32,24 +54,29 @@ export const ActivityPointScreen = ({
   if (requestStatus === ApiRequestStatus.ERROR || !data) {
     return null;
   }
+
   return (
     <View style={styles.container}>
       <View style={styles.placeContainer}>
         <Text style={styles.title}>{data.name}</Text>
-        <View style={{ height: 30 }} />
-        <Image
-          source={{ uri: data.imageUrl }}
-          style={styles.image}
-          resizeMode="contain"
-        />
-        <ScrollView>
-          <Text style={styles.contentText} >{data.content.content}</Text>
+        <View style={styles.imageContainer}>
+          <Image
+            source={{ uri: data.imageUrl }}
+            style={styles.image}
+            resizeMode="contain"
+          />
+        </View>
+        <ScrollView contentContainerStyle={{alignItems: "center", paddingVertical: 20}}>
+          <Text style={styles.contentText}>{data.content.content}</Text>
+          <View style={{ height: 30 }} />
+          {!data.directions && (
+            <TouchableOpacity style={styles.endActivityButton}>
+              <Text style={styles.endActivityButtonText}>End Activity</Text>
+            </TouchableOpacity>
+          )}
         </ScrollView>
       </View>
       <AudioPlayer
-        audioUrl={data.content.speakUrl}
-        title={data.name}
-        description={data.content.content}
       />
     </View>
   );
@@ -65,17 +92,43 @@ const styles = StyleSheet.create({
     flex: 1,
     gap: 20,
     padding: 20,
+    alignItems: "center",
   },
   title: {
     fontSize: 24,
-    fontWeight: "bold",
+    fontWeight: "400",
     textAlign: "center",
   },
   contentText: {
-    fontSize: 16,
+    fontSize: 18,
+    lineHeight: 30,
+    textAlign: "justify",
   },
-  image: {
-    height: 300,
+  imageContainer: {
     width: "100%",
+    height: 300,
+    backgroundColor: "lightgrey",
+    padding: 10,
+    borderRadius: 10,
+    overflow: "hidden",
+    borderWidth: 2,
+  },
+  image: {
+    height: "70%",
+    width: "70%",
   },
+  endActivityButton: {
+    backgroundColor: LIGTHT_THEME.color.primary,
+    padding: 10,
+    borderRadius: 25,
+    alignItems: "center",
+    justifyContent: "center",
+    width: 200,
+    height: 50
+  },
+  endActivityButtonText: {
+    color: LIGTHT_THEME.color.white,
+    fontWeight: "bold",
+    fontSize: 16,
+  }
 });
diff --git a/mobile/src/screens/edit_profile/edit_profile_page.tsx b/mobile/src/screens/edit_profile/edit_profile_page.tsx
index 2f33477271c8af8fdf0278fa5e55ee9e8c201779..abf6867eae2ec261dc6564bee5b400240b32bd29 100644
--- a/mobile/src/screens/edit_profile/edit_profile_page.tsx
+++ b/mobile/src/screens/edit_profile/edit_profile_page.tsx
@@ -2,7 +2,7 @@ import { View, Text, StyleSheet } from "react-native";
 import { useEditProfile } from "../../hooks/useEditProfile";
 import { Controller } from "react-hook-form";
 import { useAuth } from "../../contexts/auth_context";
-import { CustomTextInput } from "../../components/text_input/text_input";
+import { CustomTextInput } from "../../common/components/form/text_input";
 import Checkbox from "expo-checkbox";
 import { useState } from "react";
 import { TouchableOpacity } from "@gorhom/bottom-sheet";
diff --git a/mobile/src/screens/scan/scan_page.tsx b/mobile/src/screens/scan/scan_page.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0570d5223dc9e8fc3b449b2d86a2bcf3d039fe85
--- /dev/null
+++ b/mobile/src/screens/scan/scan_page.tsx
@@ -0,0 +1,107 @@
+import { View, Text, Button, StyleSheet, Animated } from "react-native";
+import { useQRScanner } from "../../hooks/useQRScanner";
+import { CameraView } from "expo-camera/next";
+import { BarCodeScanningResult } from "expo-camera";
+import { useEffect, useRef } from "react";
+import { activityPointRouteValidator } from "../../utils/activity_route";
+
+export default function ScanPage() {
+  const { hasPermission, getPermission, scanning, onQRScanned, qrData } =
+    useQRScanner({validator: activityPointRouteValidator});
+
+  const qrAnimation = useRef(new Animated.Value(0)).current;
+
+  const startAnimation = () => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(qrAnimation, {
+          toValue: 1,
+          duration: 1000,
+          useNativeDriver: true,
+        }),
+        Animated.timing(qrAnimation, {
+          toValue: 0,
+          duration: 1000,
+          useNativeDriver: true,
+        }),
+      ])
+    ).start();
+  };
+
+  useEffect(() => {
+    return () => {
+      qrAnimation.stopAnimation();
+    };
+  }, []);
+
+  if (!hasPermission) {
+    return (
+      <View>
+        <Text>No permission</Text>
+        <Button title="Request permission" onPress={getPermission} />
+      </View>
+    );
+  }
+
+  if (!scanning) {
+    return (
+      <View>
+        <Text>{qrData}</Text>
+      </View>
+    );
+  }
+
+  startAnimation();
+
+  return (
+    <View style={styles.container}>
+        <CameraView
+          style={styles.camera}
+          barcodeScannerSettings={{
+            barcodeTypes: ["qr"],
+          }}
+          onBarcodeScanned={onQRScanned}
+        >
+          <View style={styles.square}>
+            <Animated.View
+              style={{
+                width: "100%",
+                height: 2,
+                borderColor: "white",
+                borderWidth: 1,
+                borderRadius: 10,
+                transform: [
+                  {
+                    translateY: qrAnimation.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [-10, 250],
+                    }),
+                  },
+                ],
+              }}
+            />
+          </View>
+        </CameraView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  camera: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  square: {
+    width: 250,
+    aspectRatio: 1,
+    borderWidth: 5,
+    borderColor: "white",
+    borderRadius: 20,
+    overflow: "hidden",
+    backgroundColor: "rgba(0,0,0,0.2)",
+  },
+});
\ No newline at end of file
diff --git a/mobile/src/screens/state_selection/state_selection_page.tsx b/mobile/src/screens/state_selection/state_selection_page.tsx
index 766836635766a6ce8f48f835de192470a944ae5c..ad625c452f8b527dd415dc55e0692a31540ebd2a 100644
--- a/mobile/src/screens/state_selection/state_selection_page.tsx
+++ b/mobile/src/screens/state_selection/state_selection_page.tsx
@@ -1,11 +1,11 @@
-import { View, ActivityIndicator } from "react-native";
+import { View, ActivityIndicator, Text } from "react-native";
 import { pageStyles } from "../page_styles";
 import { useGetStates } from "../../hooks/useGetStates";
 import { ApiRequestStatus } from "../../constants/api_request_states";
-import { Caroussel } from "../../components/caroussel/caroussel";
+import { Caroussel } from "../../common/components/caroussel/caroussel";
 import { router } from "expo-router";
 import { useAnimatedSelectedIndex } from "../../hooks/useAnimatedSelectedIndex";
-import { AnimatedBackground } from "../../components/animated_background/animated_background";
+import { AnimatedBackground } from "../../common/components/animated_background";
 
 export const StateSelectionPage = () => {
   const { data, requestStatus } = useGetStates();
@@ -20,6 +20,14 @@ export const StateSelectionPage = () => {
     );
   }
 
+  if (requestStatus === ApiRequestStatus.ERROR || !data) {
+    return (
+      <View style={pageStyles.page_container}>
+        <Text>Something went wrong</Text>
+      </View>
+    );
+  }
+
   const handleOnPress = (id: number) => {
     router.push(`/state/${id}`);
   };
diff --git a/mobile/src/screens/town_activities/town_activities_page.tsx b/mobile/src/screens/town_activities/town_activities_page.tsx
index 06956ca365d2d8d35aa4ae2becfa63d372637a44..b057e12a38228004082b74fe0cd02f44c3d00836 100644
--- a/mobile/src/screens/town_activities/town_activities_page.tsx
+++ b/mobile/src/screens/town_activities/town_activities_page.tsx
@@ -7,7 +7,7 @@ import {
   Touchable,
   TouchableOpacity,
 } from "react-native";
-import { FullPageLoader } from "../../components/full_page_loader/full_page_loader";
+import { FullPageLoader } from "../../common/components/full_page_loader";
 import { ApiRequestStatus } from "../../constants/api_request_states";
 import { useGetActivities } from "../../hooks/useGetActivities";
 import { ActivityTile } from "../../components/activity_tile/activity_tile";
@@ -26,6 +26,10 @@ export const TownActivitiesPage = ({ townId, stateId }: TownActivitiesPageProps)
     return <FullPageLoader />;
   }
 
+  if (requestStatus === ApiRequestStatus.ERROR || !activities) {
+    return <Text>Something went wrong</Text>;
+  }
+
   const handleViewActivity = (activityId: number) =>{
     router.push(`/state/${stateId}/town/${townId}/activity/${activityId}/`);
   }
@@ -69,6 +73,7 @@ const styles = StyleSheet.create({
     bottom: 10,
     width: 200,
     height: 50,
+    elevation: 5,
   },
   generate_router_button_text: {
     color: LIGTHT_THEME.color.white,
diff --git a/mobile/src/screens/town_selection/town_selection_page.tsx b/mobile/src/screens/town_selection/town_selection_page.tsx
index 0be191467572cb4a73975574bee9480f535d1159..b8ce396bbfcdca67da65f28978dc3b4228589e0e 100644
--- a/mobile/src/screens/town_selection/town_selection_page.tsx
+++ b/mobile/src/screens/town_selection/town_selection_page.tsx
@@ -2,12 +2,12 @@ import { View, Text, ActivityIndicator, StyleSheet } from "react-native";
 import { pageStyles } from "../page_styles";
 import { useGetStates } from "../../hooks/useGetStates";
 import { ApiRequestStatus } from "../../constants/api_request_states";
-import { Caroussel } from "../../components/caroussel/caroussel";
+import { Caroussel } from "../../common/components/caroussel/caroussel";
 import { useGetTowns } from "../../hooks/useGetTowns";
 import { router } from "expo-router";
 import { useCallback, useState } from "react";
 import { useAnimatedSelectedIndex } from "../../hooks/useAnimatedSelectedIndex";
-import { AnimatedBackground } from "../../components/animated_background/animated_background";
+import { AnimatedBackground } from "../../common/components/animated_background";
 import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet";
 
 interface TownSelectionPageProps {
@@ -29,6 +29,14 @@ export const TownSelectionPage = ({ stateId }: TownSelectionPageProps) => {
     );
   }
 
+  if (requestStatus === ApiRequestStatus.ERROR || !data) {
+    return (
+      <View style={pageStyles.page_container}>
+        <Text>Something went wrong</Text>
+      </View>
+    );
+  }
+
   if (data.length === 0) {
     return (
       <View style={pageStyles.page_container}>
diff --git a/mobile/src/screens/travel_details/travel_details_page.tsx b/mobile/src/screens/travel_details/travel_details_page.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9c42d247df09827ca212cc253f2d5d6c7814b94b
--- /dev/null
+++ b/mobile/src/screens/travel_details/travel_details_page.tsx
@@ -0,0 +1,82 @@
+import {
+  View,
+  Text,
+  StyleSheet,
+  Image,
+  Dimensions,
+} from "react-native";
+import { useGetTravelDetails } from "../../hooks/useGetTravelDetails";
+import { ApiRequestStatus } from "../../constants/api_request_states";
+import { FullPageLoader } from "../../common/components/full_page_loader";
+import { TravelActivityList } from "../../travel_history/components/activity_list";
+
+interface TravelDetailsPageProps {
+  id: number;
+}
+
+export const TravelDetailsPage = ({ id }: TravelDetailsPageProps) => {
+  const { data, requestStatus } = useGetTravelDetails({ id });
+
+  if (requestStatus === ApiRequestStatus.LOADING) {
+    return <FullPageLoader />;
+  }
+
+  if (requestStatus === ApiRequestStatus.ERROR || !data) {
+    return (
+      <View style={styles.container}>
+        <Text>Failed to load travel details</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.imageContainer}>
+        <Image
+          source={{ uri: data.travel.imageUri }}
+          style={styles.image}
+          resizeMode="cover"
+        />
+        <View style={styles.imageTextContainer}>
+          <Text style={styles.destinationText}>{data.travel.destination}</Text>
+          <Text>
+            {data.travel.startDate.toDateString()} -{" "}
+            {data.travel.endDate.toDateString()}
+          </Text>
+          <Text>{`Numero de actividades: ${data.activityList.length}`}</Text>
+        </View>
+      </View>
+      <TravelActivityList activityList={data.activityList} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  imageContainer: {
+    flex: 3,
+    backgroundColor: "black",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  image: {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    opacity: 0.8,
+  },
+  imageTextContainer: {
+    height: "80%",
+    width: "80%",
+    backgroundColor: "rgba(255, 255, 255, 0.8)",
+    borderRadius: 10,
+    padding: 20,
+    gap: 10,
+  },
+  destinationText: {
+    fontSize: 30,
+    fontWeight: "bold",
+  },
+});
diff --git a/mobile/src/screens/travel_history/travel_history_page.tsx b/mobile/src/screens/travel_history/travel_history_page.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..be9c3ee7178b8ec5297755da7b8ac20ba8715cf9
--- /dev/null
+++ b/mobile/src/screens/travel_history/travel_history_page.tsx
@@ -0,0 +1,80 @@
+import { View, Text, FlatList, StyleSheet, SectionList } from "react-native";
+import { useGetTravelHistory } from "../../hooks/useGetTravelHistory";
+import { ApiRequestStatus } from "../../constants/api_request_states";
+import { FullPageLoader } from "../../common/components/full_page_loader";
+import { CustomTileButton } from "../../common/components/custom_tile_button";
+import { LIGTHT_THEME } from "../../constants/theme";
+import { router } from "expo-router";
+
+export const TravelHistoryPage = () => {
+  const { travelHistory, requestStatus } = useGetTravelHistory();
+
+  if (requestStatus === ApiRequestStatus.LOADING) {
+    return <FullPageLoader />;
+  }
+
+  if (requestStatus === ApiRequestStatus.ERROR || !travelHistory) {
+    return (
+      <View>
+        <Text>Error</Text>
+      </View>
+    );
+  }
+
+  const onPress = (id: number) => {
+    router.push(`/travel_history/details/${id}`);
+  };
+
+  return (
+    <SectionList
+      sections={travelHistory}
+      scrollEnabled={true}
+      keyExtractor={(item, index) => item.id.toString() + index}
+      renderItem={({ item }) => (
+        <CustomTileButton
+          title={item.destination}
+          subtitle={`${item.startDate.toDateString()} - ${item.endDate.toDateString()}`}
+          onPress={() => onPress(item.id)}
+        />
+      )}
+      renderSectionHeader={({ section: { title } }) => (
+        <View style={styles.pastTravelsHeaderContainer}>
+          <Text style={styles.pastTravelsHeaderTitle}>{title}</Text>
+        </View>
+      )}
+      style={styles.pastTravelsContainer}
+      ListFooterComponent={<View style={{ height: 50 }} />}
+      ItemSeparatorComponent={() => <View style={{ height: 10 }} />}
+      renderSectionFooter={({section}) => {
+        if (section.data.length === 0) {
+          return (
+            <View style={{ alignItems: "center"}}>
+              <Text>No travels</Text>
+            </View>
+          );
+        }
+        return null;
+      }}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  pastTravelsHeaderContainer: {
+    width: "100%",
+    height: 50,
+    backgroundColor: LIGTHT_THEME.color.background,
+    marginBottom: 15,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  pastTravelsHeaderTitle: {
+    fontSize: 18,
+    fontWeight: "600",
+  },
+  pastTravelsContainer: {
+    flex: 1,
+    backgroundColor: LIGTHT_THEME.color.background,
+    paddingHorizontal: 15,
+  },
+});
diff --git a/mobile/src/travel_history/components/activity_list.tsx b/mobile/src/travel_history/components/activity_list.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5e1849c2747455d2d02fe32bd2880a9e01e448a6
--- /dev/null
+++ b/mobile/src/travel_history/components/activity_list.tsx
@@ -0,0 +1,75 @@
+import { useRef } from "react";
+import {
+  View,
+  Text,
+  FlatList,
+  Dimensions,
+  Animated,
+  StyleSheet,
+} from "react-native";
+import { TravelHistoryActivity } from "../../domain/entities/travel_details";
+import { TravelDetailsTile } from "./travel_details_tile";
+
+const HORIZONTAL_SPACING = 20;
+const VERTICAL_SPACING = 10;
+const ITEM_HEIGHT = 200;
+const FULL_SIZE = ITEM_HEIGHT + VERTICAL_SPACING;
+const ITEM_WIDTH = Dimensions.get("window").width - HORIZONTAL_SPACING * 2;
+
+interface TravelActivityListProps {
+  activityList: TravelHistoryActivity[];
+}
+
+export const TravelActivityList = ({
+  activityList,
+}: TravelActivityListProps) => {
+  const scrollRef = useRef(new Animated.Value(0)).current;
+  return (
+    <View style={styles.detailsContainer}>
+      <Text style={styles.activitiesText}>Actividades</Text>
+      <FlatList
+        data={[...activityList, ...activityList, ...activityList]}
+        style={{ paddingVertical: VERTICAL_SPACING }}
+        ListFooterComponent={<View style={{ height: VERTICAL_SPACING }} />}
+        keyExtractor={(item, index) => index.toString()}
+        onScroll={Animated.event(
+          [{ nativeEvent: { contentOffset: { y: scrollRef } } }],
+          { useNativeDriver: false }
+        )}
+        renderItem={({ item, index }) => {
+          const widthRange = [FULL_SIZE * index, FULL_SIZE * (index + 1.5)];
+          const width = scrollRef.interpolate({
+            inputRange: widthRange,
+            outputRange: [ITEM_WIDTH, 0],
+            extrapolate: "clamp",
+          });
+          const opacityRange = [FULL_SIZE * index, FULL_SIZE * (index + 1)];
+          const opacity = scrollRef.interpolate({
+            inputRange: opacityRange,
+            outputRange: [1, 0],
+            extrapolate: "clamp",
+          });
+
+          return (
+            <TravelDetailsTile item={item} width={width} opacity={opacity} />
+          );
+        }}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  detailsContainer: {
+    flex: 7,
+  },
+  activitiesText: {
+    textAlign: "center",
+    paddingVertical: 10,
+    fontSize: 20,
+    fontWeight: "bold",
+    borderBottomColor: "gray",
+    borderBottomWidth: 1,
+    marginHorizontal: 30,
+  },
+});
diff --git a/mobile/src/travel_history/components/share_button.tsx b/mobile/src/travel_history/components/share_button.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a926510cb20f3765f3a58ad01e15107039fba156
--- /dev/null
+++ b/mobile/src/travel_history/components/share_button.tsx
@@ -0,0 +1,14 @@
+import { TouchableOpacity } from "react-native-gesture-handler";
+import { Feather } from '@expo/vector-icons';
+
+interface ShareButtonProps {
+    onPress: () => void;
+}
+
+export const ShareButton = ({ onPress } : ShareButtonProps) => {
+    return (
+        <TouchableOpacity onPress={onPress}>
+            <Feather name="share-2" size={24} color="white" />
+        </TouchableOpacity>
+    );
+};
\ No newline at end of file
diff --git a/mobile/src/travel_history/components/travel_details_tile.tsx b/mobile/src/travel_history/components/travel_details_tile.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3e9e07f123766ac3c2c0ee7f1f4df9f59a4deb81
--- /dev/null
+++ b/mobile/src/travel_history/components/travel_details_tile.tsx
@@ -0,0 +1,64 @@
+import { Animated, Image, View, Text, StyleSheet } from "react-native";
+import { TravelHistoryActivity } from "../../domain/entities/travel_details";
+import { AntDesign } from "@expo/vector-icons";
+
+interface TravelDetailsTileProps {
+  item: TravelHistoryActivity;
+  width: Animated.AnimatedInterpolation<string | number>;
+  opacity: Animated.AnimatedInterpolation<string | number>,
+}
+
+export const TravelDetailsTile = ({ item, width, opacity }: TravelDetailsTileProps) => {
+  return (
+    <Animated.View style={{ ...styles.activityContainer, width, opacity }}>
+      <Image
+        source={{ uri: item.imageUri }}
+        style={{ flex: 1, height: "100%", borderTopLeftRadius: 2, borderBottomLeftRadius: 2}}
+      />
+      <View style={styles.activityContentContainer}>
+        <Text numberOfLines={1} style={styles.activityTitle}>{item.name}</Text>
+        <Text numberOfLines={1}>{item.startDate.toDateString()} - {item.endDate.toDateString()}</Text>
+        <Text numberOfLines={1}>{item.description}</Text>
+        <View style={styles.ratingContainer}>
+            <Text style={styles.ratingText} numberOfLines={1}>{item.rating.toFixed(1)}</Text>
+            <AntDesign name="star" size={20} color="gold" />
+        </View>
+      </View>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  activityContainer: {
+    height: 200,
+    padding: 10,
+    alignSelf: "center",
+    overflow: "hidden",
+    flexDirection: "row",
+    backgroundColor: "white",
+    elevation: 5,
+    marginBottom: 10,
+    gap: 10,
+    borderRadius: 12,
+  },
+  activityContentContainer: {
+    flex: 1,
+    flexDirection: "column",
+    gap: 10,
+  },
+  activityTitle: {
+    fontSize: 18,
+    fontWeight: "bold",
+  },
+  ratingContainer: {
+    position: "absolute",
+    right: 10,
+    bottom: 10,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 5,
+  },
+  ratingText: {
+    fontSize: 16,
+  },
+});
diff --git a/mobile/src/utils/activity_route.ts b/mobile/src/utils/activity_route.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3280cfe7890c4132053ed6644ac209ba537395cb
--- /dev/null
+++ b/mobile/src/utils/activity_route.ts
@@ -0,0 +1,4 @@
+export const activityPointRouteValidator = (route: string): boolean  => {
+    const pattern = /^\/state\/(\d+)\/town\/(\d+)\/activity\/(\d+)\/travel\?id\=(\d+)$/g;
+    return pattern.test(route);
+}
\ No newline at end of file
diff --git a/mobile/src/utils/time.ts b/mobile/src/utils/time.ts
new file mode 100644
index 0000000000000000000000000000000000000000..43be4fbda34b24886ce9f141fcb4c9f54920b24d
--- /dev/null
+++ b/mobile/src/utils/time.ts
@@ -0,0 +1,16 @@
+export const millisecondsToHourFormat = (milliseconds: number) => {
+    let totalSeconds = Math.floor(milliseconds / 1000);
+    
+    let hours = Math.floor(totalSeconds / 3600);
+    totalSeconds %= 3600;
+    let minutes = Math.floor(totalSeconds / 60);
+    let seconds = totalSeconds % 60;
+
+    const formattedTime = [
+      hours.toString().padStart(2, '0'),
+      minutes.toString().padStart(2, '0'),
+      seconds.toString().padStart(2, '0')
+    ].join(':');
+    
+    return formattedTime;
+  }
\ No newline at end of file