diff --git a/mobile/app.json b/mobile/app.json
index 69fc5a602dda22f61f9f4077ebdbaddc04690f80..384972acebb6dcf4953420af816652e47ae7ad93 100644
--- a/mobile/app.json
+++ b/mobile/app.json
@@ -6,7 +6,7 @@
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
-    "userInterfaceStyle": "light",
+    "userInterfaceStyle": "automatic",
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",
@@ -29,6 +29,26 @@
       "favicon": "./assets/favicon.png"
     },
     "plugins": [
+      [
+        "expo-screen-orientation",
+        {
+          "initialOrientation": "DEFAULT"
+        }
+      ],
+      [
+        "expo-camera",
+        {
+          "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera",
+          "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone",
+          "recordAudioAndroid": true
+        }
+      ],
+      [
+        "expo-image-picker",
+        {
+          "photosPermission": "The app accesses your photos to let you share them with your friends."
+        }
+      ],
       "expo-router",
       "expo-secure-store"
     ],
diff --git a/mobile/app/(tabs)/_layout.tsx b/mobile/app/(tabs)/_layout.tsx
index 55ed70f32f84cf80dee8f4a668bb71c3dfa6f51c..acbdee433ea88ce8f214506973b40f3ed4a7370f 100644
--- a/mobile/app/(tabs)/_layout.tsx
+++ b/mobile/app/(tabs)/_layout.tsx
@@ -17,7 +17,14 @@ export default function Layout() {
       screenOptions={{
         tabBarActiveTintColor: LIGTHT_THEME.color.primary,
         tabBarInactiveTintColor: LIGTHT_THEME.color.secondary,
+        headerStyle: {
+          backgroundColor: LIGTHT_THEME.color.primary,
+        },
+        headerTitleStyle: {
+          color: LIGTHT_THEME.color.white,
+        },
         headerTitleAlign: "center",
+        
       }}
     >
       <Tabs.Screen
diff --git a/mobile/app/_layout.tsx b/mobile/app/_layout.tsx
index 0f888a4299603b9843ed97d426e166150d8f127c..2ef26b5ef9f38060284b6e8d0a76838285af679b 100644
--- a/mobile/app/_layout.tsx
+++ b/mobile/app/_layout.tsx
@@ -3,13 +3,18 @@ import { DataContextProvider } from "../src/contexts/data_context";
 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";
 
 export default function Root() {
-  return <DataContextProvider>
-    <AuthContextProvider>
-      <MainLayout />
-    </AuthContextProvider>
-  </DataContextProvider>;
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <DataContextProvider>
+        <AuthContextProvider>
+          <MainLayout />
+        </AuthContextProvider>
+      </DataContextProvider>
+    </GestureHandlerRootView>
+  );
 }
 
 const MainLayout = () => {
@@ -20,12 +25,12 @@ const MainLayout = () => {
   }
   
   return (
-    <Stack initialRouteName="(tabs)" screenOptions={{}}>
-      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+    <Stack initialRouteName="(tabs)" >
+      <Stack.Screen name="(tabs)" options={{ headerShown: false, statusBarColor: LIGTHT_THEME.color.primary }} />
       <Stack.Screen
-        name="(modal)/[id]"
+        name="state"
         options={{
-          title: "Select town",
+          headerShown: false,
           statusBarColor: LIGTHT_THEME.color.primary,
         }}
       />
@@ -44,6 +49,13 @@ const MainLayout = () => {
           }
         }
       />
+      <Stack.Screen
+        name="profile"
+        options={{
+          title: "Profile",
+          headerShown: false,
+        }}
+      />
     </Stack>
   );
 };
diff --git a/mobile/app/profile/_layout.tsx b/mobile/app/profile/_layout.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d6a99319a4d2db87a8c7b53d196892a6852c11c1
--- /dev/null
+++ b/mobile/app/profile/_layout.tsx
@@ -0,0 +1,12 @@
+import { Stack } from "expo-router";
+
+export default function Layout() {
+    return (
+        <Stack>
+            <Stack.Screen name="edit" options={{
+                title: "Edit Profile",
+                headerShown: true,
+            }}/>
+        </Stack>
+    );
+}
\ No newline at end of file
diff --git a/mobile/app/profile/edit.tsx b/mobile/app/profile/edit.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..bc3f55f0a3511544351b63c271acc630009e881a
--- /dev/null
+++ b/mobile/app/profile/edit.tsx
@@ -0,0 +1,7 @@
+import { EditProfilePage } from "../../src/screens/edit_profile/edit_profile_page";
+
+export default function EditProfileScreen() {
+    return (
+        <EditProfilePage />
+    );
+}
\ No newline at end of file
diff --git a/mobile/app/scan.tsx b/mobile/app/scan.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7f00020bb6385157fe51d9f21efca1ab05c23bdd
--- /dev/null
+++ b/mobile/app/scan.tsx
@@ -0,0 +1,113 @@
+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";
+
+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>
+  );
+}
+
+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)",
+  },
+});
diff --git a/mobile/app/state/[id]/activity.tsx b/mobile/app/state/[id]/activity.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9840959f65c3decafa7bbb7efe9385be7d38bee3
--- /dev/null
+++ b/mobile/app/state/[id]/activity.tsx
@@ -0,0 +1,19 @@
+import { useLocalSearchParams } from "expo-router";
+import { View, Text } from "react-native";
+import { ActivityDescriptionPage } from "../../../src/screens/activity_description/activity_description_page";
+
+export default function ActivityScreen() {
+    const { id, townId, activityId } = useLocalSearchParams<{ id: string, townId: string, activityId: string }>();
+
+    if (!townId || !id || !activityId) {
+        return (
+            <View>
+                <Text>Invalid activity id</Text>
+            </View>
+        );
+    }
+    
+    return (
+        <ActivityDescriptionPage activityId={+activityId} />
+    );
+}
\ No newline at end of file
diff --git a/mobile/app/state/[id]/town.tsx b/mobile/app/state/[id]/town.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7670240241e4221ef87cfbf25703f438b16d6931
--- /dev/null
+++ b/mobile/app/state/[id]/town.tsx
@@ -0,0 +1,18 @@
+import { useLocalSearchParams } from "expo-router";
+import { View, Text } from "react-native";
+import { TownActivitiesPage } from "../../../src/screens/town_activities/town_activities_page";
+
+export default function TownScreen() {
+    const { id, townId } = useLocalSearchParams<{ id: string, townId: string }>();
+    console.log(id, townId);
+    if (!townId || !id) {
+        return (
+            <View>
+                <Text>Invalid town id</Text>
+            </View>
+        );
+    }
+    return (
+        <TownActivitiesPage townId={+townId} stateId={+id}/>
+    );
+}
\ No newline at end of file
diff --git a/mobile/app/state/_layout.tsx b/mobile/app/state/_layout.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c7d8879b0cee1c68036c501cca550d843a9c485c
--- /dev/null
+++ b/mobile/app/state/_layout.tsx
@@ -0,0 +1,34 @@
+import { Stack } from "expo-router";
+import { View } from "react-native";
+import { LIGTHT_THEME } from "../../src/constants/theme";
+
+
+export default function Layout() {
+    return (
+        <Stack
+            initialRouteName="index"
+            screenOptions={{
+                headerStyle: {
+                  backgroundColor: LIGTHT_THEME.color.primary,
+                },
+                headerTitleStyle: {
+                  color: LIGTHT_THEME.color.white,
+                },
+                headerTintColor: LIGTHT_THEME.color.white,
+              }}
+        >
+            <Stack.Screen name="index" options={{
+                title: "Select Town",
+            }}/>
+            <Stack.Screen name="[id]/town" options={{
+                title: "Town Activities",
+            }}/>
+            <Stack.Screen name="[id]/activity" options={{
+                headerShown: false,
+            }}/>
+            {/* <Stack.Screen name="town" options={{
+                title: "Town",
+            }}/> */}
+        </Stack>
+    ); 
+}
\ No newline at end of file
diff --git a/mobile/app/(modal)/[id].tsx b/mobile/app/state/index.tsx
similarity index 92%
rename from mobile/app/(modal)/[id].tsx
rename to mobile/app/state/index.tsx
index 10b634af72befe858588698ddb01065b09a4cb95..fca093757f569f60c3e8840602251c9ee49327ee 100644
--- a/mobile/app/(modal)/[id].tsx
+++ b/mobile/app/state/index.tsx
@@ -5,11 +5,13 @@ import { FullPageLoader } from "../../src/components/full_page_loader/full_page_
 
 export default function Main () {
     const { id } = useLocalSearchParams<{ id: string }>();
+    console.log(id);
     if (!id) {
         return (
             <FullPageLoader/>
         );
     }
+    console.log(id);
     return (
         <TownSelectionPage stateId={+id}/>
     );
diff --git a/mobile/babel.config.js b/mobile/babel.config.js
index dab49a2fa5b67f42c24ae66b6d661c6a750e4dde..6dbdb013bb230199496e0838aef62ba7584ef86e 100644
--- a/mobile/babel.config.js
+++ b/mobile/babel.config.js
@@ -2,6 +2,6 @@ module.exports = function(api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
-    plugins: ["nativewind/babel"],
+    plugins: ["nativewind/babel", 'react-native-reanimated/plugin'],
   };
 };
\ No newline at end of file
diff --git a/mobile/package-lock.json b/mobile/package-lock.json
index 0afd893fe98cdbe613a7878777e5d4b05b85f0b1..764d18dfadc74a474f2a281d7f7f3682833b8c89 100644
--- a/mobile/package-lock.json
+++ b/mobile/package-lock.json
@@ -8,17 +8,27 @@
       "name": "mobile",
       "version": "1.0.0",
       "dependencies": {
+        "@gorhom/bottom-sheet": "^4.6.1",
+        "@react-native-community/datetimepicker": "7.6.1",
         "axios": "^1.6.8",
         "expo": "~50.0.14",
+        "expo-barcode-scanner": "~12.9.3",
+        "expo-camera": "~14.1.1",
+        "expo-checkbox": "~2.7.0",
         "expo-constants": "~15.4.5",
+        "expo-image-picker": "~14.7.1",
         "expo-linking": "~6.2.2",
         "expo-router": "~3.4.8",
+        "expo-screen-orientation": "~6.4.1",
         "expo-secure-store": "~12.8.1",
         "expo-status-bar": "~1.11.1",
         "nativewind": "^2.0.11",
         "react": "18.2.0",
         "react-hook-form": "^7.51.2",
         "react-native": "0.73.6",
+        "react-native-gesture-handler": "~2.14.0",
+        "react-native-modal-datetime-picker": "^17.1.0",
+        "react-native-reanimated": "~3.6.2",
         "react-native-safe-area-context": "4.8.2",
         "react-native-screens": "~3.29.0"
       },
@@ -1382,6 +1392,20 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-transform-object-assign": {
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.24.1.tgz",
+      "integrity": "sha512-I1kctor9iKtupb7jv7FyjApHCuKLBKCblVAeHVK9PB6FW7GI0ac6RtobC3MwwJy8CZ1JxuhQmnbrsqI5G8hAIg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/plugin-transform-object-rest-spread": {
       "version": "7.24.0",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.24.0.tgz",
@@ -2029,6 +2053,17 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@egjs/hammerjs": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
+      "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
+      "dependencies": {
+        "@types/hammerjs": "^2.0.36"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/@expo/bunyan": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@expo/bunyan/-/bunyan-4.0.0.tgz",
@@ -3383,6 +3418,43 @@
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
       "integrity": "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw=="
     },
+    "node_modules/@gorhom/bottom-sheet": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@gorhom/bottom-sheet/-/bottom-sheet-4.6.1.tgz",
+      "integrity": "sha512-sXqsYqX1/rAbmCC5fb9o6hwSF3KXriC0EGUGvLlhFvjaEEMBrRKFTNndiluRK1HmpUzazVaYdTm/lLkSiA2ooQ==",
+      "dependencies": {
+        "@gorhom/portal": "1.0.14",
+        "invariant": "^2.2.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-native": "*",
+        "react": "*",
+        "react-native": "*",
+        "react-native-gesture-handler": ">=1.10.1",
+        "react-native-reanimated": ">=2.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@gorhom/portal": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/@gorhom/portal/-/portal-1.0.14.tgz",
+      "integrity": "sha512-MXyL4xvCjmgaORr/rtryDNFy3kU4qUbKlwtQqqsygd0xX3mhKjOLn6mQK8wfu0RkoE0pBE0nAasRoHua+/QZ7A==",
+      "dependencies": {
+        "nanoid": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/@graphql-typed-document-node/core": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.2.0.tgz",
@@ -5488,6 +5560,14 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
+    "node_modules/@react-native-community/datetimepicker": {
+      "version": "7.6.1",
+      "resolved": "https://registry.npmjs.org/@react-native-community/datetimepicker/-/datetimepicker-7.6.1.tgz",
+      "integrity": "sha512-g66Q2Kd9Uw3eRL7kkrTsGhi+eXxNoPDRFYH6z78sZQuYjPkUQgJDDMUYgBmaBsQx/fKMtemPrCj1ulGmyi0OSw==",
+      "dependencies": {
+        "invariant": "^2.2.4"
+      }
+    },
     "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",
@@ -6178,6 +6258,11 @@
       "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
       "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q=="
     },
+    "node_modules/@types/hammerjs": {
+      "version": "2.0.45",
+      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.45.tgz",
+      "integrity": "sha512-qkcUlZmX6c4J8q45taBKTL3p+LbITgyx7qhlPYOdOHZB7B31K0mXbP5YA7i7SgDeEGuI9MnumiKPEMrxg8j3KQ=="
+    },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
@@ -6216,13 +6301,13 @@
       "version": "15.7.11",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
       "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/react": {
       "version": "18.2.64",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.64.tgz",
       "integrity": "sha512-MlmPvHgjj2p3vZaxbQgFUQFvD8QiZwACfGqEdDSWou5yISWxDQ4/74nCAwsUiX7UFLKZz3BbVSPj+YxeoGGCfg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -6233,7 +6318,7 @@
       "version": "0.16.8",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
       "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/stack-utils": {
       "version": "2.0.3",
@@ -7629,7 +7714,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/dag-map": {
       "version": "1.0.2",
@@ -8097,6 +8182,33 @@
         "md5-file": "^3.2.3"
       }
     },
+    "node_modules/expo-barcode-scanner": {
+      "version": "12.9.3",
+      "resolved": "https://registry.npmjs.org/expo-barcode-scanner/-/expo-barcode-scanner-12.9.3.tgz",
+      "integrity": "sha512-I3zaKSINRMHbTc7sHIq14ug3fHkCsW4rweJF12yk0kHaympI2wxVgIo2DhzeZaYG1Ylkuj5aiKen3NuwDk1FSA==",
+      "dependencies": {
+        "expo-image-loader": "~4.6.0"
+      },
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
+    "node_modules/expo-camera": {
+      "version": "14.1.1",
+      "resolved": "https://registry.npmjs.org/expo-camera/-/expo-camera-14.1.1.tgz",
+      "integrity": "sha512-ANxQYy2P9qXxRoLWs7Gs3y7NM7OpYr7Q1H6kmQwJxHjjuJSc2qhwhY10I138d0fzB0h0p8NF1ezqIrqWct5AvQ==",
+      "dependencies": {
+        "invariant": "^2.2.4"
+      },
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
+    "node_modules/expo-checkbox": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/expo-checkbox/-/expo-checkbox-2.7.0.tgz",
+      "integrity": "sha512-1wYgoOZ9pBg64PPPULbdD7jEVFX354dpJdUZRmkrO/7ybI668qO4r4+9777CUQ+2JoZEEJBBQzN6UiAl0Uodkg=="
+    },
     "node_modules/expo-constants": {
       "version": "15.4.5",
       "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-15.4.5.tgz",
@@ -8127,6 +8239,25 @@
         "expo": "*"
       }
     },
+    "node_modules/expo-image-loader": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/expo-image-loader/-/expo-image-loader-4.6.0.tgz",
+      "integrity": "sha512-RHQTDak7/KyhWUxikn2yNzXL7i2cs16cMp6gEAgkHOjVhoCJQoOJ0Ljrt4cKQ3IowxgCuOrAgSUzGkqs7omj8Q==",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
+    "node_modules/expo-image-picker": {
+      "version": "14.7.1",
+      "resolved": "https://registry.npmjs.org/expo-image-picker/-/expo-image-picker-14.7.1.tgz",
+      "integrity": "sha512-ILQVOJgI3aEzrDmCFGDPtpAepYkn8mot8G7vfQ51BfFdQbzL6N3Wm1fS/ofdWlAZJl/qT2DwaIh5xYmf3SyGZA==",
+      "dependencies": {
+        "expo-image-loader": "~4.6.0"
+      },
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-keep-awake": {
       "version": "12.8.2",
       "resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-12.8.2.tgz",
@@ -8302,6 +8433,14 @@
         }
       }
     },
+    "node_modules/expo-screen-orientation": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/expo-screen-orientation/-/expo-screen-orientation-6.4.1.tgz",
+      "integrity": "sha512-VM0C9ORNL1aT6Dr2OUeryzV519n0FjtXI2m+HlijOMi1QT2bPg4tBkCd7HLgywU4dZ1Esa46ewUudmk+fOqmMQ==",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-secure-store": {
       "version": "12.8.1",
       "resolved": "https://registry.npmjs.org/expo-secure-store/-/expo-secure-store-12.8.1.tgz",
@@ -8875,6 +9014,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/hosted-git-info": {
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
@@ -12462,6 +12614,55 @@
         "react": "18.2.0"
       }
     },
+    "node_modules/react-native-gesture-handler": {
+      "version": "2.14.1",
+      "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.14.1.tgz",
+      "integrity": "sha512-YiM1BApV4aKeuwsM6O4C2ufwewYEKk6VMXOt0YqEZFMwABBFWhXLySFZYjBSNRU2USGppJbfHP1q1DfFQpKhdA==",
+      "dependencies": {
+        "@egjs/hammerjs": "^2.0.17",
+        "hoist-non-react-statics": "^3.3.0",
+        "invariant": "^2.2.4",
+        "lodash": "^4.17.21",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-modal-datetime-picker": {
+      "version": "17.1.0",
+      "resolved": "https://registry.npmjs.org/react-native-modal-datetime-picker/-/react-native-modal-datetime-picker-17.1.0.tgz",
+      "integrity": "sha512-jfTwfaCLtBffYbQ+pOGFLM+J5HmUh3vb9rT0JrrQPjxzecdc8pNYreB1c96+mVuq8bDCvaCdIeuEsslTqLJL0Q==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "@react-native-community/datetimepicker": ">=6.7.0",
+        "react-native": ">=0.65.0"
+      }
+    },
+    "node_modules/react-native-reanimated": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.6.3.tgz",
+      "integrity": "sha512-2KkkPozoIvDbJcHuf8qeyoLROXQxizSi+2CTCkuNVkVZOxxY4B0Omvgq61aOQhSZUh/649x1YHoAaTyGMGDJUw==",
+      "dependencies": {
+        "@babel/plugin-transform-object-assign": "^7.16.7",
+        "@babel/preset-typescript": "^7.16.7",
+        "convert-source-map": "^2.0.0",
+        "invariant": "^2.2.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0-0",
+        "@babel/plugin-proposal-optional-chaining": "^7.0.0-0",
+        "@babel/plugin-transform-arrow-functions": "^7.0.0-0",
+        "@babel/plugin-transform-shorthand-properties": "^7.0.0-0",
+        "@babel/plugin-transform-template-literals": "^7.0.0-0",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-safe-area-context": {
       "version": "4.8.2",
       "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.8.2.tgz",
diff --git a/mobile/package.json b/mobile/package.json
index e503a600fbdbf85fbacb3571e12eeb06c7c92926..567cd1d5d9c08096fcf5be276fb99a84335ef4c3 100644
--- a/mobile/package.json
+++ b/mobile/package.json
@@ -9,19 +9,29 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@gorhom/bottom-sheet": "^4.6.1",
+    "@react-native-community/datetimepicker": "7.6.1",
     "axios": "^1.6.8",
     "expo": "~50.0.14",
+    "expo-barcode-scanner": "~12.9.3",
+    "expo-camera": "~14.1.1",
+    "expo-checkbox": "~2.7.0",
     "expo-constants": "~15.4.5",
     "expo-linking": "~6.2.2",
     "expo-router": "~3.4.8",
+    "expo-screen-orientation": "~6.4.1",
     "expo-secure-store": "~12.8.1",
     "expo-status-bar": "~1.11.1",
     "nativewind": "^2.0.11",
     "react": "18.2.0",
     "react-hook-form": "^7.51.2",
     "react-native": "0.73.6",
+    "react-native-gesture-handler": "~2.14.0",
+    "react-native-modal-datetime-picker": "^17.1.0",
+    "react-native-reanimated": "~3.6.2",
     "react-native-safe-area-context": "4.8.2",
-    "react-native-screens": "~3.29.0"
+    "react-native-screens": "~3.29.0",
+    "expo-image-picker": "~14.7.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
diff --git a/mobile/src/components/activity_bottom_sheet/activity_bottom_sheet.tsx b/mobile/src/components/activity_bottom_sheet/activity_bottom_sheet.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d3c9cba62c47c5356a22c8702640c762a640efd9
--- /dev/null
+++ b/mobile/src/components/activity_bottom_sheet/activity_bottom_sheet.tsx
@@ -0,0 +1,127 @@
+import { useRef, useState } from "react";
+import BottomSheet, {
+    BottomSheetFlatList,
+  BottomSheetScrollView,
+  BottomSheetView,
+} from "@gorhom/bottom-sheet";
+import {
+  Text,
+  StyleSheet,
+  ScrollView,
+  View,
+  TouchableOpacity,
+} from "react-native";
+import { ActivityInfoEntity } from "../../domain/entities/activity_info_entity";
+import { LIGTHT_THEME } from "../../constants/theme";
+import { router } from "expo-router";
+
+interface ActivityBottomSheetProps {
+  startSnapPoint: number;
+  snapPoints: string[];
+  onSnapPointChange?: (index: number) => void;
+  activity: ActivityInfoEntity;
+}
+
+export const ActivityBottomSheet = ({
+  activity,
+  startSnapPoint,
+  snapPoints,
+  onSnapPointChange,
+}: ActivityBottomSheetProps) => {
+  const sheetRef = useRef<BottomSheet>(null);
+  const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false);
+
+  return (
+    <BottomSheet
+      ref={sheetRef}
+      index={startSnapPoint}
+      onChange={onSnapPointChange}
+      snapPoints={snapPoints}
+    >
+      <BottomSheetScrollView style={{ height: "100%", padding: 10 }} scrollToOverflowEnabled nestedScrollEnabled>
+        <View style={styles.activity_name_container}>
+        <Text style={styles.name_text}>{activity.name}</Text>
+        <TouchableOpacity onPress={
+          () => {
+            router.push('/scan')
+          }}
+          style={styles.do_activity_button}>
+          <Text style={styles.do_activity_text}>Do Activity</Text>
+        </TouchableOpacity>
+        </View>
+        {
+            activity.tags && (
+                <BottomSheetFlatList
+                style={{marginTop: 20, paddingVertical: 10}}
+                    horizontal
+                    data={[...activity.tags, "tag1", "tag2", "tag3", "tag4", "tag5"]}
+                    showsHorizontalScrollIndicator={false}
+                    keyExtractor={(item) => item}
+                    ItemSeparatorComponent={() => <View style={{width: 10}} />}
+                    renderItem={({ item }) => (
+                        <View style={{height: 40, borderRadius: 15, backgroundColor: 'violet', paddingHorizontal: 10, justifyContent: 'center'}}>
+                            <Text>{item}</Text>
+                        </View>
+                    )}
+                />
+            )
+        }
+        <View style={styles.description_container}>
+          <Text style={styles.description_text}>Description</Text>
+          <Text numberOfLines={!isDescriptionExpanded ? 5 : undefined}>
+            {activity.description}
+          </Text>
+          <TouchableOpacity
+            onPress={() => setIsDescriptionExpanded(!isDescriptionExpanded)}
+          >
+            <Text style={styles.show_more_text}>
+              {isDescriptionExpanded ? "Show less" : "Show more..."}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </BottomSheetScrollView>
+    </BottomSheet>
+  );
+};
+
+const styles = StyleSheet.create({
+  activity_info_container: {
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    borderWidth: 5,
+    padding: 20,
+  },
+  activity_name_container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  },
+  name_text: {
+    fontSize: 24,
+    fontWeight: "bold",
+  },
+  do_activity_button: {
+    height: 40,
+    elevation: 5,
+    backgroundColor: LIGTHT_THEME.color.primary,
+    padding: 10,
+    borderRadius: 20,
+    justifyContent : 'center',
+    alignItems: 'center',
+    paddingHorizontal: 20
+  },
+  do_activity_text: {
+    color: LIGTHT_THEME.color.white,
+    fontWeight: "bold",
+  },
+  description_container: {
+    marginTop: 20,
+    gap: 5,
+  },
+  description_text: {
+    fontSize: 18,
+    fontWeight: "bold",
+  },
+  show_more_text: {
+    fontWeight: "600",
+  },
+});
diff --git a/mobile/src/components/activity_tile/activity_tile.tsx b/mobile/src/components/activity_tile/activity_tile.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7474be9ca946dfd2a77447eb5c546054ffc7a2a4
--- /dev/null
+++ b/mobile/src/components/activity_tile/activity_tile.tsx
@@ -0,0 +1,47 @@
+import { View, Text, StyleSheet, Image, TouchableOpacity } from "react-native";
+import { ActivityInfoEntity } from "../../domain/entities/activity_info_entity";
+import { LIGTHT_THEME } from "../../constants/theme";
+
+interface ActivityTileProps {
+  activity: ActivityInfoEntity;
+  onPress?: (id: number) => void;
+}
+
+export const ActivityTile = ({ activity, onPress }: ActivityTileProps) => {
+  return (
+    <TouchableOpacity onPress={() => {
+      onPress && onPress(activity.id);
+    }} activeOpacity={0.7} style={styles.container}>
+      <View>
+        <Image
+          source={{ uri: activity.imageUri }}
+          style={{ width: "100%", height: 200 }}
+        />
+      </View>
+      <View style={styles.info_container}>
+        <Text style={styles.activity_name} >{activity.name}</Text>
+        <Text>{activity.location}</Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    height: 300,
+    width: "100%",
+    backgroundColor: LIGTHT_THEME.color.white,
+    elevation: 5,
+    borderWidth: 1,
+    borderRadius: 10,
+    overflow: "hidden",
+  },
+  info_container: {
+    padding: 10,
+    gap: 5,
+  },
+  activity_name: {
+    fontSize: 18,
+    fontWeight: "bold",
+  },
+});
diff --git a/mobile/src/components/animated_background/animated_background.tsx b/mobile/src/components/animated_background/animated_background.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7c208a9eb3827e4690e671af31cabf456eee19b9
--- /dev/null
+++ b/mobile/src/components/animated_background/animated_background.tsx
@@ -0,0 +1,51 @@
+import { Animated, Image, View } from "react-native";
+import { PlaceInfoEntity } from "../../domain/entities/place_info_entity";
+import { useAnimatedSelectedIndex } from "../../hooks/useAnimatedSelectedIndex";
+
+interface AnimatedBackgroundProps {
+    imageUri?: string;
+    backgroundImageAnimation: Animated.Value;
+};
+
+export const AnimatedBackground = ({ imageUri, backgroundImageAnimation }: AnimatedBackgroundProps) => {
+  return (
+    <Animated.View
+      style={{
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        opacity: backgroundImageAnimation.interpolate({
+          inputRange: [-300, 0],
+          outputRange: [0, 1],
+        })
+      }}
+    >
+      <Image
+        source={{
+          uri: imageUri,
+        }}
+        style={{
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          resizeMode: "cover",
+        }}
+        onLayout={() => {
+          Animated.timing(backgroundImageAnimation, {
+            toValue: 0,
+            duration: 500,
+            useNativeDriver: true,
+          }).start();
+        }}
+      />
+      <View
+        style={{
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          backgroundColor: "rgba(0, 0, 0, 0.4)",
+        }}
+      />
+    </Animated.View>
+  );
+};
diff --git a/mobile/src/components/caroussel/caroussel.tsx b/mobile/src/components/caroussel/caroussel.tsx
index acd257b4d73f543d985b8feef8de62f10d154f09..6472d3f05900dd8856effef3ba63852c5eb461b5 100644
--- a/mobile/src/components/caroussel/caroussel.tsx
+++ b/mobile/src/components/caroussel/caroussel.tsx
@@ -1,17 +1,20 @@
-import { View, Animated, Text, Dimensions, Image } from "react-native";
+import { View, Animated, Text, Dimensions, Image, NativeSyntheticEvent, NativeScrollEvent } from "react-native";
 import { PlaceInfoEntity } from "../../domain/entities/place_info_entity";
 import { useRef } from "react";
 import { StateDataSource } from "../../domain/datasources/state_datasource";
 import { CarousselTile } from "./caroussel_tile";
+import { router } from "expo-router";
 
 interface CarousselProps {
   data: PlaceInfoEntity[];
+  onPress?: (id: number) => void;
+  onIndexChange?: (index: number) => void;
 }
 
 const ITEM_WIDTH = Dimensions.get("window").width * 0.7;
 const BLANK_ITEM_WIDTH = Dimensions.get("window").width * 0.15;
 
-export const Caroussel = ({ data }: CarousselProps) => {
+export const Caroussel = ({ data, onPress, onIndexChange }: CarousselProps) => {
   const scrollX = useRef(new Animated.Value(0)).current;
   const finalData = [
     {
@@ -24,6 +27,14 @@ export const Caroussel = ({ data }: CarousselProps) => {
       name: "empty-right",
     },
   ];
+
+  scrollX.addListener(({ value }) => {
+    const index = Math.round(value / ITEM_WIDTH);
+    if (index < 0 || index >= data.length) {
+      return;
+    }
+    onIndexChange && onIndexChange(index);
+  });
   return (
     <Animated.FlatList
       data={finalData}
@@ -35,15 +46,13 @@ export const Caroussel = ({ data }: CarousselProps) => {
 
       bounces={false}
       snapToInterval={ITEM_WIDTH}
-      onScroll={Animated.event(
-        [{ nativeEvent: { contentOffset: { x: scrollX } } }],
-        { useNativeDriver: true }
-      )}
+      onScroll={Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }], {
+        useNativeDriver: true,
+      })}
       renderItem={({ item, index }) => {
         if (item.id === -1 || item.id === -2) {
           return <View style={{ width: BLANK_ITEM_WIDTH }} />;
         }
-        console.log(item);
         const inputRange = [
           (index - 2) * ITEM_WIDTH,
           (index - 1) * ITEM_WIDTH,
@@ -69,6 +78,12 @@ export const Caroussel = ({ data }: CarousselProps) => {
             scale={scale}
             translateY={translateY}
             item={item}
+            onPress={() => {
+              if (item.id !== -1 && item.id !== -2) {
+                onPress && onPress(item.id);
+              }
+            }
+            }
           />
         );
       }}
diff --git a/mobile/src/components/caroussel/caroussel_tile.tsx b/mobile/src/components/caroussel/caroussel_tile.tsx
index 49739be6f8e07142b4be7af22cef717678223f7a..cdaf6e2a046f228753efe7da942fb4962f8834ae 100644
--- a/mobile/src/components/caroussel/caroussel_tile.tsx
+++ b/mobile/src/components/caroussel/caroussel_tile.tsx
@@ -1,71 +1,77 @@
 import { memo } from "react";
-import { Animated, Dimensions, Image, Text, TouchableOpacity } from "react-native";
+import {
+  Animated,
+  Dimensions,
+  Image,
+  Pressable,
+  Text,
+  TouchableOpacity,
+} from "react-native";
 import { PlaceInfoEntity } from "../../domain/entities/place_info_entity";
 import { Link } from "expo-router";
 
 interface CarousselTileProps {
-    onPress?: () => void;
-    item: PlaceInfoEntity;
-    translateY: Animated.AnimatedInterpolation<number>;
-    scale: Animated.AnimatedInterpolation<number>;
-    opacity: Animated.AnimatedInterpolation<number>;
+  onPress?: () => void;
+  item: PlaceInfoEntity;
+  translateY: Animated.AnimatedInterpolation<number>;
+  scale: Animated.AnimatedInterpolation<number>;
+  opacity: Animated.AnimatedInterpolation<number>;
 }
 
 const ITEM_WIDTH = Dimensions.get("window").width * 0.7;
 const BLANK_ITEM_WIDTH = Dimensions.get("window").width * 0.15;
 const ITEM_HEIGHT = Dimensions.get("window").height * 0.7;
 
-export const CarousselTile = memo(({ translateY, scale, opacity, item }: CarousselTileProps) => {
-  console.log('render');
+export const CarousselTile = memo(
+  ({ translateY, scale, opacity, item, onPress }: CarousselTileProps) => {
     return (
-        <Link href={{
-          pathname: "/(modal)/[id]",
-          params: { id: item.id },
-        }}>
+      <Pressable onPress={onPress}>
+        <Animated.View
+          style={{
+            width: ITEM_WIDTH,
+            height: ITEM_HEIGHT,
+            padding: 10,
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
           <Animated.View
             style={{
-              width: ITEM_WIDTH,
-              height: ITEM_HEIGHT,
-              padding: 10,
+              transform: [{ translateY }, { scale }],
+              opacity,
+              height: "90%",
+              width: "100%",
+              overflow: "hidden",
+              borderRadius: 20,
               alignItems: "center",
               justifyContent: "center",
+              elevation: 10,
+              borderWidth: 7,
+              borderColor: "white",
             }}
           >
-            <Animated.View
+            <Animated.Image
+              source={{ uri: item.imageUri }}
               style={{
-                transform: [{ translateY }, { scale }],
-                opacity,
-                height: "90%",
                 width: "100%",
-                overflow: "hidden",
-                borderRadius: 20,
-                alignItems: "center",
-                justifyContent: "center",
-                elevation: 10,
-                borderWidth: 3,
+                height: "100%",
+              }}
+            />
+            <Text
+              style={{
+                position: "absolute",
+                top: 10,
+                color: "white",
+                fontSize: 20,
+                fontWeight: "bold",
+                textAlign: "center",
               }}
             >
-              <Animated.Image
-                source={{ uri: item.imageUri }}
-                style={{
-                  width: "100%",
-                  height: "100%",
-                }}
-              />
-              <Text
-                style={{
-                    position: "absolute",
-                    top: 10,
-                    color: "white",
-                  fontSize: 20,
-                  fontWeight: "bold",
-                  textAlign: "center",
-                }}
-              >
-                {item.name}
-              </Text>
-            </Animated.View>
+              {item.name}
+            </Text>
           </Animated.View>
-        </Link>
+        </Animated.View>
+      </Pressable>
     );
-});
+  }
+);
diff --git a/mobile/src/components/custom_tile_button/custom_tile_button.tsx b/mobile/src/components/custom_tile_button/custom_tile_button.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..197cfc3c8f4e544548689f56d01790b98b3aeb53
--- /dev/null
+++ b/mobile/src/components/custom_tile_button/custom_tile_button.tsx
@@ -0,0 +1,44 @@
+import { ReactNode } from "react";
+import { TouchableOpacity, View, Text, StyleSheet } from "react-native";
+import { MaterialIcons } from "@expo/vector-icons";
+import { LIGTHT_THEME } from "../../constants/theme";
+
+interface CustomTileButtonProps {
+  leadingIcon: ReactNode;
+  title: string;
+  onPress?: () => void;
+}
+
+export const CustomTileButton = ({
+  title,
+  onPress,
+  leadingIcon,
+}: 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>
+      <MaterialIcons name="keyboard-arrow-right" size={30} color="black" />
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  account_option: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    height: 55,
+    paddingHorizontal: 10,
+    borderTopWidth: 2,
+    borderTopColor: "#ccc",
+    backgroundColor: LIGTHT_THEME.color.white,
+    borderRadius: 5,
+    width: "100%",
+  },
+  title: {
+    fontSize: 16,
+  }
+});
diff --git a/mobile/src/components/date_text_input/date_text_input.tsx b/mobile/src/components/date_text_input/date_text_input.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1e09349452bb0e2efb0e93a061995f8befd5d0f1
--- /dev/null
+++ b/mobile/src/components/date_text_input/date_text_input.tsx
@@ -0,0 +1,42 @@
+import { useEffect, useState } from "react";
+import { CustomTextInput } from "../text_input/text_input";
+import { TouchableOpacity, View } from "react-native";
+import DateTimePickerModal from "react-native-modal-datetime-picker";
+
+interface DateInputProps {
+  label: string;
+  onChangeText: (text: string) => void;
+  value: string;
+  onBlur?: () => void;
+  errors?: string;
+}
+
+export const DateTextInput = ({label, onChangeText, value, onBlur, errors}: DateInputProps) => {
+  const [isVisible, setIsVisible] = useState(false);
+  useEffect(() => {
+    console.log(isVisible);
+  }, [isVisible]);
+  return (
+    <TouchableOpacity onPress={() => setIsVisible(true)}>
+      <CustomTextInput
+        label={label}
+        value={value}
+        onChangeText={() => {}}
+        onBlur={onBlur}
+        errors={errors}
+        editable={false}
+      />
+      <DateTimePickerModal
+        mode="date"
+        onConfirm={(data) => {
+          onChangeText(data.toDateString());
+          setIsVisible(false);
+        }}
+        onCancel={() => {
+          setIsVisible(false);
+        }}
+        isVisible={isVisible}
+      />
+    </TouchableOpacity>
+  );
+};
diff --git a/mobile/src/components/floating_back_button/floating_back_button.tsx b/mobile/src/components/floating_back_button/floating_back_button.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..068fca404dd37d4e2534f77ec36c1061941dbca0
--- /dev/null
+++ b/mobile/src/components/floating_back_button/floating_back_button.tsx
@@ -0,0 +1,34 @@
+import { TouchableOpacity, StyleSheet } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { router } from "expo-router";
+
+export const FloatingBackButton = () => {
+  if (!router.canGoBack()) {
+    return null;
+  }
+  const handleBack = () => {
+    router.back();
+  };
+  return (
+    <TouchableOpacity style={styles.back_button} onPress={handleBack}>
+      <Ionicons name="arrow-back-outline" size={30} />
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  back_button: {
+    position: "absolute",
+    top: 15,
+    left: 10,
+    height: 40,
+    width: 40,
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 25,
+    backgroundColor: "white",
+    borderWidth: 2,
+    elevation: 5,
+    zIndex: 1,
+  },
+});
diff --git a/mobile/src/components/sign_up_form/sign_up_form.tsx b/mobile/src/components/sign_up_form/sign_up_form.tsx
index edf7ed1e340b320159598092bf5d406de2b1e946..b22fb9a185fa85bdd64eb44401553ddbe18de7fa 100644
--- a/mobile/src/components/sign_up_form/sign_up_form.tsx
+++ b/mobile/src/components/sign_up_form/sign_up_form.tsx
@@ -10,9 +10,11 @@ import { CustomTextInput } from "../text_input/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";
 
 export const SignUpForm = () => {
-  const { control } = useForm();
+  const { control, onSubmit } = useSignUp();
   return (
     <ScrollView contentContainerStyle={styles.loginScroll}>
       <Text style={styles.title}>Sign Up</Text>
@@ -116,8 +118,21 @@ export const SignUpForm = () => {
         )}
         rules={{ required: "Confirm password is required" }}
       />
+      <Controller
+        control={control}
+        name="dateOfBirth"
+        render={({ field: { onChange, value } }) => (
+          <DateTextInput
+            label="Date of Birth"
+            value={value}
+            onChangeText={onChange}
+          />
+        )}
+        defaultValue=" "
+
+      />
       <View style={{ height: "3%" }} />
-      <TouchableOpacity style={styles.submitBtn}>
+      <TouchableOpacity style={styles.submitBtn} onPress={onSubmit}>
         <Text style={styles.submitBtnText}>Sign Up</Text>
       </TouchableOpacity>
 
diff --git a/mobile/src/components/text_input/text_input.tsx b/mobile/src/components/text_input/text_input.tsx
index 419401d5b559a58de80c2b7b98a33cd000b51294..4a7ad5a93e5c8c8218657255fbd587092e57912c 100644
--- a/mobile/src/components/text_input/text_input.tsx
+++ b/mobile/src/components/text_input/text_input.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { TextInput, Text, StyleSheet, View, Animated } from "react-native";
+import { TextInput, Text, StyleSheet, View, Animated, TouchableOpacity } from "react-native";
 import { LIGTHT_THEME } from "../../constants/theme";
 
 interface TextInputProps {
@@ -10,11 +10,13 @@ interface TextInputProps {
   onBlur?: () => void;
   errors?: string;
   type?: any;
+  editable?: boolean;
 }
 
 export const CustomTextInput = (props: TextInputProps) => {
-  const { isPassword, label, type, onBlur, errors, ...rest } = props;
-  const labelFocusAnimation = useRef(new Animated.Value(0)).current;
+  const { isPassword, label, type, onBlur, errors, value, editable,...rest } = props;
+  const labelFocusAnimation = useRef(new Animated.Value(value.length > 0 ? 1 : 0)).current;
+  const inputRef = useRef<TextInput>(null);
 
   const handleFocus = () => {
     Animated.timing(labelFocusAnimation, {
@@ -36,8 +38,8 @@ export const CustomTextInput = (props: TextInputProps) => {
   };
 
   return (
-    <View>
-      <View style={styles.container}>
+    <View style={styles.main_container}>
+      <View style={styles.container} >
         <Animated.Text
           style={{
             ...styles.label,
@@ -51,6 +53,9 @@ export const CustomTextInput = (props: TextInputProps) => {
         </Animated.Text>
         <TextInput
           {...rest}
+          editable={editable}
+          ref={inputRef}
+          value={value}
           textContentType={type}
           onFocus={handleFocus}
           onBlur={handleBlur}
@@ -67,6 +72,9 @@ export const CustomTextInput = (props: TextInputProps) => {
 };
 
 const styles = StyleSheet.create({
+  main_container: {
+    width: "100%",
+  },
   container: {
     width: "100%",
     borderWidth: 1,
diff --git a/mobile/src/constants/api.ts b/mobile/src/constants/api.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8b1c50f9244e867331d02adfe0989a028dc48825
--- /dev/null
+++ b/mobile/src/constants/api.ts
@@ -0,0 +1 @@
+export const API_URL = 'http://192.168.1.83:3005';
\ No newline at end of file
diff --git a/mobile/src/constants/theme.ts b/mobile/src/constants/theme.ts
index 83bdb23dde7c722ddc1c54cb246040c1de6d1c42..5946735ba36b4955196517fbcbff5fb6f36d02fc 100644
--- a/mobile/src/constants/theme.ts
+++ b/mobile/src/constants/theme.ts
@@ -16,10 +16,10 @@ interface Theme {
 
 export const LIGTHT_THEME: Theme = {
     color: {
-        primary: "tomato",
+        primary: "rgb(235, 73, 161)",
         secondary: "gray",
         terciary: "#f0f0f0",
-        background: "#f0f0f0",
+        background: "rgb(245, 225, 236)",
         white: "white",
         black: "black",
     },
diff --git a/mobile/src/contexts/auth_context.tsx b/mobile/src/contexts/auth_context.tsx
index 098f7e6e19128255dd8cca0663dbe27a2c01a9c4..76b32f710032df05b7bb50e590f5f26d2d529012 100644
--- a/mobile/src/contexts/auth_context.tsx
+++ b/mobile/src/contexts/auth_context.tsx
@@ -48,7 +48,7 @@ export const AuthContextProvider = ({children}: AuthContextProviderProps) => {
         await SecureStore.deleteItemAsync("user");
         await SecureStore.deleteItemAsync("token");
         setUser(null);
-        delete axios.defaults.headers.common["Authorization"];
+        axios.defaults.headers.common["Authorization"] = null;
     }
 
     useEffect(() => {
diff --git a/mobile/src/contexts/data_context.tsx b/mobile/src/contexts/data_context.tsx
index e50f526241b603ee1ad064af98b42b872cd14342..8ec516ce6050a56eb1fd1b005f74dd5ae39f56ac 100644
--- a/mobile/src/contexts/data_context.tsx
+++ b/mobile/src/contexts/data_context.tsx
@@ -1,24 +1,34 @@
 import { createContext, PropsWithChildren, useContext } from "react";
 import { StateRepository } from "../domain/repositories/state_repository";
 import { StateRepositoryImpl } from "../infrastructure/repositories/state_repository";
-import { StateDataSourceImpl } from "../infrastructure/datasource/state_datasource";
+import { StateDataSourceDev } from "../infrastructure/datasource/dev/state_datasource";
+import { AuthRepository } from "../domain/repositories/auth_repository";
+import { AuthDataSourceDev } from "../infrastructure/datasource/dev/auth_datasource";
+import { AuthRepositoryImpl } from "../infrastructure/repositories/auth_repository";
+import { AuthDatasourceProd } from "../infrastructure/datasource/prod/auth_datasource";
 
 type DataContextType = {
     statesRepository: StateRepository | null;
+    authRepository: AuthRepository | null;
 };
 
 type DataContextProviderProps = PropsWithChildren<{}>;
 
 const DataContext = createContext<DataContextType>({
-    statesRepository: null
+    statesRepository: null,
+    authRepository: null
 });
 
 export const DataContextProvider = ({ children }: DataContextProviderProps) => {
-    const statesDataSource = new StateDataSourceImpl();
+    const statesDataSource = new StateDataSourceDev();
     const statesRepository = new StateRepositoryImpl(statesDataSource);
+    const authDataSource = new AuthDataSourceDev();
+    const authRepository = new AuthRepositoryImpl(authDataSource);
+
     
     const value = {
-        statesRepository
+        statesRepository,
+        authRepository
     };
 
     return (
diff --git a/mobile/src/domain/datasources/auth_datasource.ts b/mobile/src/domain/datasources/auth_datasource.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c573f2518e8dd316fe7e9e3f271b9871463b0ea3
--- /dev/null
+++ b/mobile/src/domain/datasources/auth_datasource.ts
@@ -0,0 +1,8 @@
+import { LoginInfoEntity } from "../entities/login_info_entity";
+import { RegisterInfoEntity } from "../entities/register_info";
+import { UserInfoEntity } from "../entities/user_info_entity";
+
+export interface AuthDataSource {
+    login: (email: string, password: string) => Promise<LoginInfoEntity>;
+    register: (user: RegisterInfoEntity) => Promise<LoginInfoEntity>;
+}
\ No newline at end of file
diff --git a/mobile/src/domain/datasources/state_datasource.ts b/mobile/src/domain/datasources/state_datasource.ts
index 313fdd77cae1525ad32d4af0460bf6f8ba3cb0aa..548186a9184680cf92ca80d87b09f4d64c73a512 100644
--- a/mobile/src/domain/datasources/state_datasource.ts
+++ b/mobile/src/domain/datasources/state_datasource.ts
@@ -1,7 +1,10 @@
+import { ActivityInfoEntity } from "../entities/activity_info_entity";
 import { StateEntity } from "../entities/state_entity";
 import { TownEntity } from "../entities/town_entity";
 
 export interface StateDataSource {
     getStates(): Promise<StateEntity[]>;
     getTowns(stateId: number): Promise<TownEntity[]>;
+    getTownActivities(townId: number): Promise<ActivityInfoEntity[]>;
+    getActivityInfo(activityId: number): Promise<ActivityInfoEntity | undefined>;
 }
\ No newline at end of file
diff --git a/mobile/src/domain/entities/activity_info_entity.ts b/mobile/src/domain/entities/activity_info_entity.ts
new file mode 100644
index 0000000000000000000000000000000000000000..26e1468bdf101ccc0d9a3556d749422b5c1862fa
--- /dev/null
+++ b/mobile/src/domain/entities/activity_info_entity.ts
@@ -0,0 +1,8 @@
+import { PlaceInfoEntity } from "./place_info_entity";
+
+export interface ActivityInfoEntity extends PlaceInfoEntity {
+    available: string;
+    townId: number;
+    location: string;
+    tags?: string[];
+}
\ No newline at end of file
diff --git a/mobile/src/domain/entities/login_info_entity.ts b/mobile/src/domain/entities/login_info_entity.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b57d144859dd5f380f78b6c30d882991396583e8
--- /dev/null
+++ b/mobile/src/domain/entities/login_info_entity.ts
@@ -0,0 +1,6 @@
+import { UserInfoEntity } from "./user_info_entity";
+
+export interface LoginInfoEntity {
+    user: UserInfoEntity;
+    token: string;
+}
\ No newline at end of file
diff --git a/mobile/src/domain/entities/register_info.ts b/mobile/src/domain/entities/register_info.ts
new file mode 100644
index 0000000000000000000000000000000000000000..15c05f67af12057918fa85a17f8191b7554b5a2d
--- /dev/null
+++ b/mobile/src/domain/entities/register_info.ts
@@ -0,0 +1,8 @@
+export interface RegisterInfoEntity {
+    name: string;
+    lastName: string;
+    email: string;
+    password: string;
+    confirmPassword: string;
+    birthdate: string;
+} 
\ No newline at end of file
diff --git a/mobile/src/domain/entities/user_info_entity.ts b/mobile/src/domain/entities/user_info_entity.ts
index 3482cd5683d2c5b392152cd096f60638f02ef8e1..c527930ac384f21b8912cfbc19742f6f8777b565 100644
--- a/mobile/src/domain/entities/user_info_entity.ts
+++ b/mobile/src/domain/entities/user_info_entity.ts
@@ -3,5 +3,5 @@ export interface UserInfoEntity {
     name: string;
     lastName: string;
     email: string;
-    birthDate: string;
+    birthDate?: Date;
 }
\ No newline at end of file
diff --git a/mobile/src/domain/repositories/auth_repository.ts b/mobile/src/domain/repositories/auth_repository.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3dbf840f0a0495c647547f0b9fb7b7ca0612c494
--- /dev/null
+++ b/mobile/src/domain/repositories/auth_repository.ts
@@ -0,0 +1,8 @@
+import { LoginInfoEntity } from "../entities/login_info_entity";
+import { RegisterInfoEntity } from "../entities/register_info";
+import { UserInfoEntity } from '../entities/user_info_entity';
+
+export interface AuthRepository {
+    login: (email: string, password: string) => Promise<LoginInfoEntity>;
+    register: (user: RegisterInfoEntity) => Promise<LoginInfoEntity>;
+}
\ No newline at end of file
diff --git a/mobile/src/domain/repositories/state_repository.ts b/mobile/src/domain/repositories/state_repository.ts
index d0d8578e6c010a66666c8c4d731fed352d10b0d4..9c1450899f05e6cc62c777a4765f702de205f6e8 100644
--- a/mobile/src/domain/repositories/state_repository.ts
+++ b/mobile/src/domain/repositories/state_repository.ts
@@ -1,7 +1,10 @@
+import { ActivityInfoEntity } from "../entities/activity_info_entity";
 import { StateEntity } from "../entities/state_entity";
 import { TownEntity } from "../entities/town_entity";
 
 export interface StateRepository {
     getStates(): Promise<StateEntity[]>;
     getTowns(stateId: number): Promise<TownEntity[]>;
+    getTownActivities(townId: number): Promise<ActivityInfoEntity[]>;
+    getActivityInfo(activityId: number): Promise<ActivityInfoEntity | undefined>;
 }
\ No newline at end of file
diff --git a/mobile/src/hooks/useAnimatedSelectedIndex.ts b/mobile/src/hooks/useAnimatedSelectedIndex.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4f56c218173cc032ae861133406ee887351b5355
--- /dev/null
+++ b/mobile/src/hooks/useAnimatedSelectedIndex.ts
@@ -0,0 +1,33 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Animated } from "react-native";
+
+export const useAnimatedSelectedIndex = (startMilliseconds: number = 500, endMilliseconds: number = 500) => {
+  const selectedState = useRef(0);
+  const [selectedStateIndex, setSelectedStateIndex] = useState(0);
+
+  const backgroundImageAnimation = useRef(new Animated.Value(-300)).current;
+
+  const onIndexChange = useCallback((index: number) => {
+    if (index !== selectedState.current) {
+      console.log("Index changed to: ", index);
+      selectedState.current = index;
+      Animated.timing(backgroundImageAnimation, {
+        toValue: -300,
+        duration: endMilliseconds,
+        useNativeDriver: true,
+      }).start(() => {
+        setSelectedStateIndex(index);
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    Animated.timing(backgroundImageAnimation, {
+      toValue: 0,
+      duration: startMilliseconds,
+      useNativeDriver: true,
+    }).start();
+  }, [selectedStateIndex]);
+
+  return { onIndexChange, selectedStateIndex, backgroundImageAnimation };
+};
diff --git a/mobile/src/hooks/useEditProfile.ts b/mobile/src/hooks/useEditProfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0efe1bbc570d51197dbe5e1d59abc4bc00a88816
--- /dev/null
+++ b/mobile/src/hooks/useEditProfile.ts
@@ -0,0 +1,50 @@
+import { useState } from "react";
+import { set, useForm } from "react-hook-form";
+import * as ImagePicker from "expo-image-picker";
+
+export type EditProfileFormValues = {
+  name: string;
+  lastName: string;
+  profileImage?: File | null;
+};
+
+export const useEditProfile = () => {
+  const { control, handleSubmit, setValue } = useForm<EditProfileFormValues>();
+  const [profileImage, setProfileImage] = useState<string | null>(null);
+
+  const pickProfileImage = async () => {
+    const permissions = await ImagePicker.requestMediaLibraryPermissionsAsync();
+    if (!permissions.granted) {
+      return;
+    }
+    let result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.All,
+      allowsEditing: true,
+      aspect: [1, 1],
+      quality: 1,
+    });
+
+    if (!result.canceled) {
+      console.log(result.assets[0].uri);
+      setProfileImage(result.assets[0].uri);
+    }
+  };
+
+  const onValidSubmit = async (data: EditProfileFormValues) => {
+    if (profileImage) {
+      data.profileImage = new File([profileImage], "profileImage");
+      setValue("profileImage", data.profileImage);
+    }
+    //TODO: Send data to the server
+    console.log(data);
+  };
+
+  const onInvalidSubmit = (errors: any) => {
+    console.log(errors);
+  };
+
+  const onSubmit = async () => {
+    await handleSubmit(onValidSubmit, onInvalidSubmit)();
+  };
+  return { onSubmit, control, pickProfileImage, profileImage };
+};
diff --git a/mobile/src/hooks/useGetList.ts b/mobile/src/hooks/useGet.ts
similarity index 85%
rename from mobile/src/hooks/useGetList.ts
rename to mobile/src/hooks/useGet.ts
index 803ddc96096f0b1ef9efb8e9d592d0575f82ccd1..63644ffef34b05512a94193af24c9cafc1d26d9f 100644
--- a/mobile/src/hooks/useGetList.ts
+++ b/mobile/src/hooks/useGet.ts
@@ -1,8 +1,8 @@
 import { useEffect, useState } from "react";
 import { ApiRequestStatus } from "../constants/api_request_states";
 
-export const useGetList = <T>(callback: () => Promise<T[]>) => {
-    const [data, setData] = useState<T[]>([]);
+export const useGet = <T>(callback: () => Promise<T>) => {
+    const [data, setData] = useState<T>({} as T);
     const [requestStatus, setRequestStatus] = useState(ApiRequestStatus.LOADING);
 
     useEffect(() => {
diff --git a/mobile/src/hooks/useGetActivities.ts b/mobile/src/hooks/useGetActivities.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a71737b30984d99dc06fd78c6c06942f4db31859
--- /dev/null
+++ b/mobile/src/hooks/useGetActivities.ts
@@ -0,0 +1,12 @@
+import { useDataContext } from "../contexts/data_context";
+import { ActivityInfoEntity } from "../domain/entities/activity_info_entity";
+import { useGet } from "./useGet"
+
+export const useGetActivities = (townId: number) => {
+    const { statesRepository } = useDataContext();
+    const callback = async () =>{
+        return await statesRepository?.getTownActivities(townId) || [];
+    }
+    const { data, requestStatus } = useGet<ActivityInfoEntity[]>(callback);
+    return { activities: data, requestStatus };
+}
\ No newline at end of file
diff --git a/mobile/src/hooks/useGetActivityInfo.ts b/mobile/src/hooks/useGetActivityInfo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3c50756c85a640899be61194734e3c9c81544cae
--- /dev/null
+++ b/mobile/src/hooks/useGetActivityInfo.ts
@@ -0,0 +1,12 @@
+import { useDataContext } from "../contexts/data_context";
+import { ActivityInfoEntity } from "../domain/entities/activity_info_entity";
+import { useGet } from "./useGet";
+
+export const useGetActivityInfo = (activityId: number) => {
+    const { statesRepository } = useDataContext();
+    const callback = async () =>{
+        return await statesRepository!.getActivityInfo(activityId) || undefined;
+    }
+    const { data, requestStatus } = useGet<ActivityInfoEntity | undefined>(callback);
+    return { activityInfo: data, requestStatus };
+}
\ No newline at end of file
diff --git a/mobile/src/hooks/useGetStates.ts b/mobile/src/hooks/useGetStates.ts
index 719e1f556105cc40b5be14bfc09726b6cdc3c09f..788aeefcc8d20457e90a473f7476ddcd446e705c 100644
--- a/mobile/src/hooks/useGetStates.ts
+++ b/mobile/src/hooks/useGetStates.ts
@@ -1,6 +1,6 @@
 import { useDataContext } from "../contexts/data_context";
 import { StateEntity } from '../domain/entities/state_entity';
-import { useGetList } from "./useGetList"
+import { useGet } from "./useGet"
 
 export const useGetStates = () => {
     const { statesRepository } = useDataContext();
@@ -8,7 +8,7 @@ export const useGetStates = () => {
     const callback = async () =>{
         return await statesRepository?.getStates() || [];
     }
-    const { requestStatus, data } = useGetList<StateEntity>(callback);
+    const { requestStatus, data } = useGet<StateEntity[]>(callback);
 
     return { requestStatus, data };
 }
\ No newline at end of file
diff --git a/mobile/src/hooks/useGetTowns.ts b/mobile/src/hooks/useGetTowns.ts
index 867f795e750ca88e32e9c60dceb023c9faf053c3..19b233bbb193326015d279d09d1c1935ae5ea62e 100644
--- a/mobile/src/hooks/useGetTowns.ts
+++ b/mobile/src/hooks/useGetTowns.ts
@@ -1,7 +1,7 @@
 import { useDataContext } from "../contexts/data_context";
 import { StateEntity } from '../domain/entities/state_entity';
 import { TownEntity } from "../domain/entities/town_entity";
-import { useGetList } from "./useGetList"
+import { useGet } from "./useGet"
 
 export const useGetTowns = (stateId: number) => {
     const { statesRepository } = useDataContext();
@@ -9,7 +9,7 @@ export const useGetTowns = (stateId: number) => {
     const callback = async () =>{
         return await statesRepository?.getTowns(stateId) || [];
     }
-    const { requestStatus, data } = useGetList<TownEntity>(callback);
+    const { requestStatus, data } = useGet<TownEntity[]>(callback);
 
     return { requestStatus, data };
 }
\ No newline at end of file
diff --git a/mobile/src/hooks/useLoggin.ts b/mobile/src/hooks/useLoggin.ts
index bc6472635d249d2313851ab864e78354daff73bc..8154a496b7d5d642682dc6108ee488bb7de74bc6 100644
--- a/mobile/src/hooks/useLoggin.ts
+++ b/mobile/src/hooks/useLoggin.ts
@@ -1,6 +1,7 @@
 import { useForm } from "react-hook-form"
 import { useAuth } from "../contexts/auth_context";
 import { Navigator, Redirect, router } from "expo-router";
+import { useDataContext } from "../contexts/data_context";
 
 export type LoginFormValues = {
     email: string;
@@ -9,17 +10,17 @@ export type LoginFormValues = {
 
 export const useLoggin = () => {
     const { control, handleSubmit, formState: { errors } } = useForm<LoginFormValues>();
+    const { authRepository } = useDataContext();
     const { login } = useAuth();
 
     const validSubmit = async (data: LoginFormValues) => {
-        await login({
-            id: 1,
-            email: data.email,
-            name: 'John',
-            lastName: 'Doe',
-            birthDate: '1990-01-01'
-        }, 'hola');
-        router.replace('/(tabs)');
+        try {
+            const { user, token } = await authRepository!.login(data.email, data.password);
+            await login(user, token);
+            router.replace('/(tabs)');
+        } catch (error) {
+            console.log(error);
+        }
     }
 
     const invalidSubmit = (errors: any) => {
diff --git a/mobile/src/hooks/useQRScanner.ts b/mobile/src/hooks/useQRScanner.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ab550480ca2546488464b47ccddc1e9bc3dae227
--- /dev/null
+++ b/mobile/src/hooks/useQRScanner.ts
@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import * as SecureStore from "expo-secure-store";
+import { Camera, PermissionResponse } from "expo-camera";
+import { BarCodeScannerResult } from "expo-barcode-scanner";
+
+export const useQRScanner = () => {
+  const [status, requestPermission] = Camera.useCameraPermissions();
+  const [hasPermission, setHasPermission] = useState<boolean>(false);
+  const [qrData, setQRData] = useState<string | null>(null);
+  const [scanning, setScanning] = useState<boolean>(qrData === null);
+  const getPermission = async () => {
+    const permission = await requestPermission();
+    if (permission.granted) {
+      setHasPermission(true);
+    }
+  };
+
+  const onQRScanned = (data: BarCodeScannerResult) => {
+    console.log(data.data);
+    setQRData(data.data);
+    setScanning(false);
+  };
+  useEffect(() => {
+    if (status?.granted) {
+      setHasPermission(true);
+    }
+  }, [status]);
+  return { hasPermission, getPermission, scanning, qrData, onQRScanned};
+};
diff --git a/mobile/src/hooks/useRotationEnabled.ts b/mobile/src/hooks/useRotationEnabled.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0841e114084d4bf9a48aca64e4d20de7218f68a0
--- /dev/null
+++ b/mobile/src/hooks/useRotationEnabled.ts
@@ -0,0 +1,14 @@
+import { useEffect } from "react";
+import * as ScreenOrientation from "expo-screen-orientation";
+
+export const useRotationEnabled = () => {
+  useEffect(() => {
+    const lock = async () => {
+      await ScreenOrientation.unlockAsync();
+    };
+    lock();
+    return () => {
+      ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT);
+    };
+  }, []);
+};
diff --git a/mobile/src/hooks/useScreenOrientation.ts b/mobile/src/hooks/useScreenOrientation.ts
new file mode 100644
index 0000000000000000000000000000000000000000..687484c1778f5041481f77f6f5e424df58cd1da7
--- /dev/null
+++ b/mobile/src/hooks/useScreenOrientation.ts
@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+import * as ScreenOrientation from "expo-screen-orientation";
+
+export const useScreenOrientation = () => {
+  const [isPortrait, setIsPortrait] = useState<boolean>(true);
+  useEffect(() => {
+    const listener = ScreenOrientation.addOrientationChangeListener((event) => {
+      if (
+        event.orientationInfo.orientation ===
+        ScreenOrientation.Orientation.PORTRAIT_UP
+      ) {
+        setIsPortrait(true);
+      } else {
+        setIsPortrait(false);
+      }
+    });
+    return () => {
+      ScreenOrientation.removeOrientationChangeListener(listener);
+    };
+  }, []);
+  return { isPortrait };
+};
diff --git a/mobile/src/hooks/useSignUp.ts b/mobile/src/hooks/useSignUp.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fde3786b616646bfa28b0711e91fd702b9292ffa
--- /dev/null
+++ b/mobile/src/hooks/useSignUp.ts
@@ -0,0 +1,51 @@
+import { useForm } from "react-hook-form"
+import { useDataContext } from "../contexts/data_context";
+import { useAuth } from "../contexts/auth_context";
+import { router } from "expo-router";
+
+interface SignUpForm {
+    name: string;
+    lastName: string;
+    email: string;
+    password: string;
+    confirmPassword: string;
+    dateOfBirth: string;
+}
+
+export const useSignUp = () => {
+    const { control, setError, handleSubmit } = useForm<SignUpForm>();
+    const { authRepository } = useDataContext();
+    const { login } = useAuth();
+
+    const validSubmit = async (data: SignUpForm) => {
+        try {
+            if (data.password !== data.confirmPassword) {
+                setError("confirmPassword", { type: "manual", message: "Passwords don't match" });
+                return;
+            }
+            const userToRegister = {
+                name: data.name,
+                lastName: data.lastName,
+                email: data.email,
+                password: data.password,
+                confirmPassword: data.confirmPassword,
+                birthdate: data.dateOfBirth
+            }
+            const { user, token } = await authRepository!.register(userToRegister);
+            await login(user, token);
+            router.replace("/(tabs)");
+        } catch (error) {
+            console.log(error);
+        }
+    }
+
+    const invalidSubmit = (errors: any) => {
+        console.log(errors);
+    }
+
+    const onSubmit = async () => {
+        await handleSubmit(validSubmit, invalidSubmit)();
+    }
+
+    return { control, onSubmit };
+}
\ No newline at end of file
diff --git a/mobile/src/infrastructure/datasource/dev/auth_datasource.ts b/mobile/src/infrastructure/datasource/dev/auth_datasource.ts
new file mode 100644
index 0000000000000000000000000000000000000000..63f9b8e29e000177af20d71ba0f0e6f0e5fbe7b2
--- /dev/null
+++ b/mobile/src/infrastructure/datasource/dev/auth_datasource.ts
@@ -0,0 +1,33 @@
+import { AuthDataSource } from '../../../domain/datasources/auth_datasource';
+import { LoginInfoEntity } from '../../../domain/entities/login_info_entity';
+import { RegisterInfoEntity } from '../../../domain/entities/register_info';
+import { UserInfoEntity } from '../../../domain/entities/user_info_entity';
+export class AuthDataSourceDev implements AuthDataSource {
+    async login(email: string, password: string): Promise<LoginInfoEntity>{
+        return new Promise((resolve) => {
+            resolve({
+                user: {
+                    id: 1,
+                    email: email,
+                    name: 'John',
+                    lastName: 'Doe',
+                    birthDate: new Date('1990-01-01'),
+                },
+                token: 'token'
+            })});
+    }
+    async register(user: RegisterInfoEntity): Promise<LoginInfoEntity>{
+        return new Promise((resolve) => {
+            resolve({
+                user: {
+                    id: 1,
+                    email: user.email,
+                    name: user.name,
+                    lastName: user.lastName,
+                    birthDate: new Date('1990-01-01'),
+                },
+                token: 'token'
+            })});
+    }
+    
+}
diff --git a/mobile/src/infrastructure/datasource/dev/state_datasource.ts b/mobile/src/infrastructure/datasource/dev/state_datasource.ts
new file mode 100644
index 0000000000000000000000000000000000000000..555dda5c4589f81f4fef7513bae498a95e405332
--- /dev/null
+++ b/mobile/src/infrastructure/datasource/dev/state_datasource.ts
@@ -0,0 +1,97 @@
+import { StateDataSource } from '../../../domain/datasources/state_datasource';
+import { ActivityInfoEntity } from '../../../domain/entities/activity_info_entity';
+import { StateEntity } from '../../../domain/entities/state_entity';
+import { TownEntity } from '../../../domain/entities/town_entity';
+
+export class StateDataSourceDev implements StateDataSource {
+    getTowns(stateId: number): Promise<TownEntity[]> {
+        return new Promise((resolve) => {
+            resolve(towns.filter(town => town.stateId === stateId));
+        });
+    }
+    getStates(): Promise<StateEntity[]> {
+        return new Promise((resolve) => {
+            resolve(states);
+        });
+    }
+    getTownActivities(townId: number): Promise<ActivityInfoEntity[]> {
+        return new Promise((resolve) => {
+            resolve(activities.filter(activity => activity.townId === townId));
+        });
+    }
+    getActivityInfo(activityId: number): Promise<ActivityInfoEntity | undefined> {
+        return new Promise((resolve) => {
+            resolve(activities.find(activity => activity.id === activityId));
+        });
+    }
+}
+
+const states: StateEntity[] = [
+    {
+        id: 1, 
+        name: 'Zacatecas',
+        imageUri: 'https://www.mexicodesconocido.com.mx/wp-content/uploads/2010/07/Catedral-_Plaza-de-armas-scaled.jpg'
+    },
+    {
+        id: 2, 
+        name: 'Aguascalientes',
+        imageUri: 'https://www.gob.mx/cms/uploads/article/main_image/103003/fundacion-ags.jpg'
+    },
+    {
+        id: 3, 
+        name: 'Durango',
+        imageUri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Panoramica_plaza_de_armas_Durango.jpg/288px-Panoramica_plaza_de_armas_Durango.jpg'
+    }
+];
+
+// Towns es una lista de pueblos mágicos de cada estado
+const towns: TownEntity[] = [
+    {
+        id: 1,
+        name: 'Jerez',
+        imageUri: 'https://www.lugaresturisticosenmexico.com/wp-content/uploads/2022/04/Jerez-Zacatecas-Pueblo-Magico-2.jpg',
+        description: 'Jerez es un municipio del estado de Zacatecas, México. Es uno de los 58 municipios del estado y su cabecera es la ciudad de Jerez de García Salinas. Jerez es conocido por su arquitectura colonial y su gastronomía.',
+        stateId: 1,
+    },
+    {
+        id: 2,
+        name: 'Calvillo',
+        imageUri: 'https://www.mexicodesconocido.com.mx/wp-content/uploads/2014/04/aguascalientes_pueblo_magico_calvillo_plaza_principal_ig.jpg',
+        stateId: 2,
+    },
+    {
+        id: 3,
+        name: 'Mapimí',
+        imageUri: 'https://www.debate.com.mx/__export/1689796560699/sites/debate/img/2023/07/19/mapimx.jpg_759710130.jpg',
+        stateId: 3,
+    },
+    {
+        id: 4,
+        name: 'Jalpa',
+        imageUri: 'https://www.liderempresarial.com/wp-content/uploads/2022/12/Jalpa-1140x570.jpg',
+        stateId: 1,
+    }
+];
+
+// Activities es una lista de actividades turísticas de cada pueblo mágico
+
+const activities: ActivityInfoEntity[] = [
+    {
+        id: 1,
+        name: 'Feria de la primavera',
+        description: 'Feria de la primavera en Jerez',
+        townId: 1,
+        available: 'Primavera',
+        location: 'Jerez, Zacatecas',
+        imageUri: 'https://www.liderempresarial.com/wp-content/uploads/2022/03/Feria-de-Primavera-Jerez-2022-1024x1024.jpg'
+    },
+    {
+        id: 2,
+        name: 'Feria de la tostada',
+        description: 'Feria de la tostada en Jerez',
+        townId: 1,
+        available: 'Septiembre',
+        location: 'Jerez, Zacatecas',
+        imageUri: 'https://www.liderempresarial.com/wp-content/uploads/2022/08/WhatsApp-Image-2022-08-03-at-4.14.35-PM-856x570.jpeg'
+    }
+]
\ No newline at end of file
diff --git a/mobile/src/infrastructure/datasource/prod/auth_datasource.ts b/mobile/src/infrastructure/datasource/prod/auth_datasource.ts
new file mode 100644
index 0000000000000000000000000000000000000000..123b1890563fe7a2615bef292439cca4262239dd
--- /dev/null
+++ b/mobile/src/infrastructure/datasource/prod/auth_datasource.ts
@@ -0,0 +1,47 @@
+import axios from "axios";
+import { AuthDataSource } from "../../../domain/datasources/auth_datasource";
+import { LoginInfoEntity } from "../../../domain/entities/login_info_entity";
+import { RegisterInfoEntity } from "../../../domain/entities/register_info";
+import { userRegisterEntityToUserRegisterModel } from "../../utils/prod/user_util";
+import { API_URL } from "../../../constants/api";
+import { LoginUserModel } from "../../models/prod/login_user_model";
+import { UserInfoEntity } from "../../../domain/entities/user_info_entity";
+
+export class AuthDatasourceProd implements AuthDataSource {
+    login: (email: string, password: string) => Promise<LoginInfoEntity> = async (email, password) => {
+        const loginInfo: LoginUserModel = {
+            email,
+            password
+        };
+        //TODO: Hacer el login info model y el user info model cuando se termine la documentación
+        const { data, status } = await axios.post<{ token: string, user: UserInfoEntity }>(`${API_URL}/user/signin`, loginInfo);
+        if (status !== 200) {
+            throw new Error("Error logging in");
+        }
+        const loginResponse: LoginInfoEntity = {
+            token: data.token,
+            user: data.user
+        }
+        return loginResponse;
+    };
+
+    register: (user: RegisterInfoEntity) => Promise<LoginInfoEntity> = async (user) => {
+        const newUser = userRegisterEntityToUserRegisterModel(user);
+        const { data, status } = await axios.post<{ token: string }>(`${API_URL}/user/signup`, newUser);
+        //TODO: Falta regresar el id del usuario
+        if (status !== 201) {
+            throw new Error("Error registering user");
+        }
+        const registeredUser: LoginInfoEntity = {
+            token: data.token,
+            user: {
+                id: 1,
+                email: newUser.email,
+                name: newUser.name,
+                lastName: newUser.lastName,
+                birthDate: new Date(newUser.birthDate)
+            }
+        }
+        return registeredUser;
+    };
+}
\ No newline at end of file
diff --git a/mobile/src/infrastructure/datasource/state_datasource.ts b/mobile/src/infrastructure/datasource/state_datasource.ts
deleted file mode 100644
index c3e70c3649bd65b31ab04263640aa5db2e898b66..0000000000000000000000000000000000000000
--- a/mobile/src/infrastructure/datasource/state_datasource.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { StateDataSource } from '../../domain/datasources/state_datasource';
-import { StateEntity } from '../../domain/entities/state_entity';
-import { TownEntity } from '../../domain/entities/town_entity';
-
-export class StateDataSourceImpl implements StateDataSource {
-    getTowns(stateId: number): Promise<TownEntity[]> {
-        return new Promise((resolve) => {
-            resolve(towns.filter(town => town.stateId === stateId));
-        });
-    }
-    getStates(): Promise<StateEntity[]> {
-        return new Promise((resolve) => {
-            resolve(states);
-        });
-    }
-}
-
-const states: StateEntity[] = [
-    {
-        id: 1,
-        name: 'Zacatecas',
-        imageUri: 'https://www.mexicodesconocido.com.mx/wp-content/uploads/2010/07/Catedral-_Plaza-de-armas-scaled.jpg',
-        description: 'Zacatecas es una ciudad colonial que se encuentra en el centro de México. Es conocida por su arquitectura barroca, como la catedral del siglo XVIII, que se encuentra en la plaza principal, la Plaza de Armas. El Palacio de Gobierno, que data del siglo XVIII, alberga murales históricos de José Clemente Orozco. El Museo Rafael Coronel, ubicado en un antiguo convento, exhibe una colección de máscaras mexicanas. El Cerro de la Bufa, un cerro cercano, ofrece vistas panorámicas de la ciudad.'
-    },
-    {
-        id: 2,
-        name: 'San Miguel de Allende',
-        imageUri: 'https://www.mexicodesconocido.com.mx/wp-content/uploads/2010/07/Catedral-_Plaza-de-armas-scaled.jpg',
-        description: 'San Miguel de Allende es una ciudad colonial en el estado de Guanajuato, en el centro de México. Es conocida por su arquitectura barroca, sus iglesias bien conservadas y sus plazas pintorescas. El Santuario de Atotonilco, a 14 km al norte, es un importante lugar de peregrinación con frescos y esculturas religiosas. La ciudad también alberga el Museo Histórico de San Miguel de Allende, que exhibe arte y arte popular mexicano.'
-    },
-    {
-        id: 3,
-        name: 'San Miguel de Allende',
-        imageUri: 'https://www.mexicodesconocido.com.mx/wp-content/uploads/2010/07/Catedral-_Plaza-de-armas-scaled.jpg',
-        description: 'San Miguel de Allende es una ciudad colonial en el estado de Guanajuato, en el centro de México. Es conocida por su arquitectura barroca, sus iglesias bien conservadas y sus plazas pintorescas. El Santuario de Atotonilco, a 14 km al norte, es un importante lugar de peregrinación con frescos y esculturas religiosas. La ciudad también alberga el Museo Histórico de San Miguel de Allende, que exhibe arte y arte popular mexicano.'
-    },
-    {
-        id: 4,
-        name: 'San Miguel de Allende',
-        imageUri: 'https://www.mexicodesconocido.com.mx/wp-content/uploads/2010/07/Catedral-_Plaza-de-armas-scaled.jpg',
-        description: 'San Miguel de Allende es una ciudad colonial en el estado de Guanajuato, en el centro de México. Es conocida por su arquitectura barroca, sus iglesias bien conservadas y sus plazas pintorescas. El Santuario de Atotonilco, a 14 km al norte, es un importante lugar de peregrinación con frescos y esculturas religiosas. La ciudad también alberga el Museo Histórico de San Miguel de Allende, que exhibe arte y arte popular mexicano.'
-    }
-];
-
-const towns: TownEntity[] = [
-    {
-        id: 1,
-        name: 'Zacatecas',
-        imageUri: 'https://www.mexicodesconocido.com.mx/wp-content/uploads/2010/07/Catedral-_Plaza-de-armas-scaled.jpg',
-        stateId: 1
-    },
-    {
-        id: 2,
-        name: 'Guanajuato',
-        imageUri: 'https://www.mexicodesconocido.com.mx/wp-content/uploads/2010/07/Catedral-_Plaza-de-armas-scaled.jpg',
-        stateId: 1
-    },
-    {
-        id: 3,
-        name: 'San Miguel de Allende',
-        imageUri: 'https://www.mexicodesconocido.com.mx/wp-content/uploads/2010/07/Catedral-_Plaza-de-armas-scaled.jpg',
-        stateId: 1
-    },
-    {
-        id: 4,
-        name: 'Guanajuato',
-        imageUri: 'https://www.mexicodesconocido.com.mx/wp-content/uploads/2010/07/Catedral-_Plaza-de-armas-scaled.jpg',
-        stateId: 1
-    }
-];
\ No newline at end of file
diff --git a/mobile/src/infrastructure/models/prod/login_user_model.ts b/mobile/src/infrastructure/models/prod/login_user_model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..657cc5e6d80edc69362feae33d7d41f4b42e8917
--- /dev/null
+++ b/mobile/src/infrastructure/models/prod/login_user_model.ts
@@ -0,0 +1,4 @@
+export interface LoginUserModel {
+    email: string;
+    password: string;
+}
\ No newline at end of file
diff --git a/mobile/src/infrastructure/models/prod/register_user_model.ts b/mobile/src/infrastructure/models/prod/register_user_model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..259450eb1a7e51ab9310e9ef9602d9a651cf082e
--- /dev/null
+++ b/mobile/src/infrastructure/models/prod/register_user_model.ts
@@ -0,0 +1,7 @@
+export interface RegisterUserModel {
+    email: string;
+    password: string;
+    name: string;
+    lastName: string;
+    birthDate: string;
+}
\ No newline at end of file
diff --git a/mobile/src/infrastructure/repositories/auth_repository.ts b/mobile/src/infrastructure/repositories/auth_repository.ts
new file mode 100644
index 0000000000000000000000000000000000000000..21ec1df1fdad8f05dc2af79446c499da144f7238
--- /dev/null
+++ b/mobile/src/infrastructure/repositories/auth_repository.ts
@@ -0,0 +1,14 @@
+import { AuthDataSource } from '../../domain/datasources/auth_datasource';
+import { RegisterInfoEntity } from '../../domain/entities/register_info';
+import { UserInfoEntity } from '../../domain/entities/user_info_entity';
+import { AuthRepository } from '../../domain/repositories/auth_repository';
+export class AuthRepositoryImpl implements AuthRepository {
+    constructor(private authDataSource: AuthDataSource) {
+    }
+    async login(email: string, password: string) {
+        return await this.authDataSource.login(email, password);
+    }
+    async register(user: RegisterInfoEntity) {
+        return await this.authDataSource.register(user);
+    }
+}
\ No newline at end of file
diff --git a/mobile/src/infrastructure/repositories/state_repository.ts b/mobile/src/infrastructure/repositories/state_repository.ts
index 721f23034f086d31a4c20722d97201e9b159199d..87ab8568b44b27e1338202d3a0977292e2cdf484 100644
--- a/mobile/src/infrastructure/repositories/state_repository.ts
+++ b/mobile/src/infrastructure/repositories/state_repository.ts
@@ -1,4 +1,5 @@
 import { StateDataSource } from "../../domain/datasources/state_datasource";
+import { ActivityInfoEntity } from "../../domain/entities/activity_info_entity";
 import { StateEntity } from "../../domain/entities/state_entity";
 import { TownEntity } from "../../domain/entities/town_entity";
 import { StateRepository } from "../../domain/repositories/state_repository";
@@ -13,5 +14,10 @@ export class StateRepositoryImpl implements StateRepository {
     getStates(): Promise<StateEntity[]> {
         return this.datasource.getStates();
     }
-
+    getTownActivities(townId: number): Promise<ActivityInfoEntity[]> {
+        return this.datasource.getTownActivities(townId);
+    }
+    getActivityInfo(activityId: number): Promise<ActivityInfoEntity | undefined> {
+        return this.datasource.getActivityInfo(activityId);
+    }
 }
\ No newline at end of file
diff --git a/mobile/src/infrastructure/utils/prod/user_util.ts b/mobile/src/infrastructure/utils/prod/user_util.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5ba2220c8a6b9817a046c20304946164d9888d37
--- /dev/null
+++ b/mobile/src/infrastructure/utils/prod/user_util.ts
@@ -0,0 +1,12 @@
+import { RegisterInfoEntity } from "../../../domain/entities/register_info";
+import { RegisterUserModel } from "../../models/prod/register_user_model";
+
+export const userRegisterEntityToUserRegisterModel: (user: RegisterInfoEntity) => RegisterUserModel = (user) => {
+    return {
+        email: user.email,
+        password: user.password,
+        name: user.name,
+        lastName: user.lastName,
+        birthDate: user.birthdate
+    }
+}
\ 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 586d2a4f28161fe2bdb7ef8893b33d7a564170c8..44dedaea54ecf45d76c96dc9b8e6db9f5d04d15e 100644
--- a/mobile/src/screens/account/account_page.tsx
+++ b/mobile/src/screens/account/account_page.tsx
@@ -8,9 +8,13 @@ import {
 } from "react-native";
 import { useAuth } from "../../contexts/auth_context";
 import { CircleAvatar } from "../../components/circle_avatar/circle_avatar";
-import { MaterialIcons } from "@expo/vector-icons";
-import { LIGTHT_THEME } from "../../constants/theme";
-import { ReactNode } from "react";
+import {
+  MaterialIcons,
+  MaterialCommunityIcons,
+  FontAwesome,
+} from "@expo/vector-icons";
+import { CustomTileButton } from "../../components/custom_tile_button/custom_tile_button";
+import { router } from "expo-router";
 
 //TODO: Add source to CircleAvatar
 const source = require("../../../assets/avatar.png");
@@ -21,37 +25,41 @@ export const AccountPage = () => {
     <View style={styles.container}>
       <View style={styles.profilePhotoContainer}>
         <CircleAvatar size={120} source={source} />
-        <Text>{user?.name + " " + user?.lastName}</Text>
+        <Text style={styles.user_name}>
+          {user?.name + " " + user?.lastName}
+        </Text>
       </View>
-      <View style={{ height: 30 }}/>
-      <CustomTileButton
-        title="Logout"
-        onPress={logout}
-        leadingIcon={<MaterialIcons name="logout" size={24} color="black" />}
-      />
-    </View>
-  );
-};
-
-interface CustomTileButtonProps {
-  leadingIcon: ReactNode;
-  title: string;
-  onPress: () => void;
-}
 
-const CustomTileButton = ({
-  title,
-  onPress,
-  leadingIcon,
-}: CustomTileButtonProps) => {
-  return (
-    <TouchableOpacity onPress={onPress} style={styles.account_option}>
-      <View style={{ flexDirection: "row", gap: 20, alignItems: "center" }}>
-        {leadingIcon}
-        <Text>{title}</Text>
+      <View
+        style={{
+          flex: 2
+        }}
+      >
+        {/* <CustomTileButton
+          title="Edit user data"
+          leadingIcon={
+            <MaterialCommunityIcons
+              name="account-edit"
+              size={24}
+              color="black"
+            />
+          }
+          onPress={() => router.push("/profile/edit")}
+        />
+        <CustomTileButton
+          title="Change my tastes"
+          leadingIcon={<FontAwesome name="edit" size={24} color="black" />}
+        /> */}
+          
       </View>
-      <MaterialIcons name="keyboard-arrow-right" size={30} color="black" />
-    </TouchableOpacity>
+      <CustomTileButton
+            title="Logout"
+            onPress={logout}
+            leadingIcon={
+              <MaterialIcons name="logout" size={24} color="black" />
+            }
+          />
+    </View>
   );
 };
 
@@ -60,22 +68,16 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: "center",
     padding: 20,
-    gap: 5,
     backgroundColor: "#f5f5f5",
   },
-  account_option: {
-    flexDirection: "row",
+  profilePhotoContainer: {
     alignItems: "center",
-    justifyContent: "space-between",
-    height: 50,
-    paddingHorizontal: 10,
-    borderTopWidth: 1,
-    borderTopColor: "#ccc",
-    backgroundColor: LIGTHT_THEME.color.white,
-    borderRadius: 5,
+    justifyContent: "center",
     width: "100%",
+    flex: 1
+  },
+  user_name: {
+    fontSize: 18,
+    fontWeight: "bold",
   },
-  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
new file mode 100644
index 0000000000000000000000000000000000000000..2e02b8ac65191459681e6fb4e290f75146c66583
--- /dev/null
+++ b/mobile/src/screens/activity_description/activity_description_page.tsx
@@ -0,0 +1,128 @@
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Image,
+  Animated,
+  ScrollView,
+  Dimensions,
+} from "react-native";
+import { FullPageLoader } from "../../components/full_page_loader/full_page_loader";
+import { ApiRequestStatus } from "../../constants/api_request_states";
+import { useGetActivityInfo } from "../../hooks/useGetActivityInfo";
+import { router } from "expo-router";
+import { Ionicons } from "@expo/vector-icons";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { ActivityBottomSheet } from "../../components/activity_bottom_sheet/activity_bottom_sheet";
+import * as ScreenOrientation from "expo-screen-orientation";
+import { LIGTHT_THEME } from "../../constants/theme";
+import { useScreenOrientation } from "../../hooks/useScreenOrientation";
+import { useRotationEnabled } from "../../hooks/useRotationEnabled";
+import { FloatingBackButton } from "../../components/floating_back_button/floating_back_button";
+interface ActivityDescriptionPageProps {
+  activityId: number;
+}
+
+const startSnapPoint = 2;
+const revertedSnapPoints = [0.9, 0.5, 0.3];
+const snapPoints = ["10%", "50%", "70%"];
+const heigth = Dimensions.get("window").height;
+
+export const ActivityDescriptionPage = ({
+  activityId,
+}: ActivityDescriptionPageProps) => {
+  const { isPortrait } = useScreenOrientation();
+  const { activityInfo, requestStatus } = useGetActivityInfo(activityId);
+  useRotationEnabled();
+
+  const animationRef = useRef(
+    new Animated.Value(heigth * revertedSnapPoints[startSnapPoint])
+  ).current;
+
+  useEffect(() => {
+    Animated.timing(animationRef, {
+      toValue:
+        Dimensions.get("window").height * revertedSnapPoints[startSnapPoint],
+      duration: 100,
+      useNativeDriver: false,
+    }).start();
+  }, [isPortrait]);
+
+  if (requestStatus === ApiRequestStatus.LOADING) {
+    return <FullPageLoader />;
+  }
+  if (activityInfo === undefined) {
+    return (
+      <View>
+        <Text>Activity not found</Text>
+      </View>
+    );
+  }
+
+  const handleSnapPointChange = (index: number) => {
+    Animated.timing(animationRef, {
+      toValue: heigth * revertedSnapPoints[index],
+      duration: 100,
+      useNativeDriver: false,
+    }).start();
+  };
+
+  //TODO: Check if description is available
+  if (!activityInfo.description) {
+    activityInfo.description = "No description available";
+  }
+
+  return (
+    <View style={styles.container}>
+      <FloatingBackButton />
+      <Animated.Image
+        source={{ uri: activityInfo.imageUri }}
+        style={{
+          height: isPortrait ? animationRef : "100%",
+          width: "100%",
+        }}
+        resizeMode="contain"
+      />
+      {isPortrait && (
+        <ActivityBottomSheet
+          activity={activityInfo}
+          startSnapPoint={startSnapPoint}
+          snapPoints={snapPoints}
+          onSnapPointChange={handleSnapPointChange}
+        />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    height: "100%",
+    width: "100%",
+    backgroundColor: LIGTHT_THEME.color.black,
+    alignItems: "center",
+    justifyContent: "flex-start",
+  },
+  activity_info_container: {
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    borderWidth: 5,
+    padding: 20,
+  },
+  name_text: {
+    fontSize: 24,
+    fontWeight: "bold",
+  },
+  description_container: {
+    marginTop: 10,
+    gap: 5,
+  },
+  description_text: {
+    fontSize: 18,
+    fontWeight: "bold",
+  },
+  show_more_text: {
+    fontWeight: "600",
+  },
+});
diff --git a/mobile/src/screens/edit_profile/edit_profile_page.tsx b/mobile/src/screens/edit_profile/edit_profile_page.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2f33477271c8af8fdf0278fa5e55ee9e8c201779
--- /dev/null
+++ b/mobile/src/screens/edit_profile/edit_profile_page.tsx
@@ -0,0 +1,105 @@
+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 Checkbox from "expo-checkbox";
+import { useState } from "react";
+import { TouchableOpacity } from "@gorhom/bottom-sheet";
+import { LIGTHT_THEME } from "../../constants/theme";
+import { CircleAvatar } from "../../components/circle_avatar/circle_avatar";
+import { MaterialIcons } from "@expo/vector-icons";
+import { ScrollView } from "react-native-gesture-handler";
+//TODO: delete this line and import the correct CircleAvatar component
+const avatarSource = require("../../../assets/avatar.png");
+
+export const EditProfilePage = () => {
+  const { user } = useAuth();
+  const { onSubmit, control, pickProfileImage, profileImage } =
+    useEditProfile();
+
+  const { name, lastName } = user!;
+
+  return (
+    <ScrollView
+      contentContainerStyle={{
+        alignItems: "center",
+        gap: 20,
+        padding: 20,
+        backgroundColor: LIGTHT_THEME.color.white,
+      }}
+    >
+      <TouchableOpacity onPress={pickProfileImage}>
+        <CircleAvatar
+          source={profileImage ? { uri: profileImage } : avatarSource}
+          size={100}
+        />
+        <MaterialIcons
+          name="add-photo-alternate"
+          size={40}
+          color={LIGTHT_THEME.color.primary}
+          style={{
+            position: "absolute",
+            bottom: -10,
+            right: -10,
+          }}
+        />
+      </TouchableOpacity>
+      <View style={{ height: 30 }} />
+      <Controller
+        control={control}
+        name="name"
+        render={({
+          field: { onChange, onBlur, value },
+          formState: { errors },
+        }) => (
+          <CustomTextInput
+            onChangeText={onChange}
+            onBlur={onBlur}
+            value={value}
+            label="Name"
+            errors={errors.name?.message}
+          />
+        )}
+        rules={{ required: "Name is required" }}
+        defaultValue={name}
+      />
+      <Controller
+        control={control}
+        name="lastName"
+        render={({
+          field: { onChange, onBlur, value },
+          formState: { errors },
+        }) => (
+          <CustomTextInput
+            onChangeText={onChange}
+            onBlur={onBlur}
+            value={value}
+            label="Last name"
+            errors={errors.lastName?.message}
+          />
+        )}
+        rules={{ required: "Last name is required" }}
+        defaultValue={lastName}
+      />
+      <TouchableOpacity onPress={onSubmit} style={styles.saveBtn}>
+        <Text style={styles.saveBtnText}>Save</Text>
+      </TouchableOpacity>
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  saveBtn: {
+    backgroundColor: LIGTHT_THEME.color.primary,
+    height: 40,
+    width: 100,
+    padding: 10,
+    borderRadius: 20,
+    alignItems: "center",
+  },
+  saveBtnText: {
+    color: "white",
+    fontWeight: "bold",
+  },
+});
diff --git a/mobile/src/screens/page_styles.tsx b/mobile/src/screens/page_styles.tsx
index b0093309848447cf964c1eee735e150615d9b2ff..badaa1137b46064d182de6bf178e1faa9b51c119 100644
--- a/mobile/src/screens/page_styles.tsx
+++ b/mobile/src/screens/page_styles.tsx
@@ -1,10 +1,11 @@
 import { StyleSheet } from "react-native"
+import { LIGTHT_THEME } from "../constants/theme";
 
 export const pageStyles = StyleSheet.create({
     page_container: {
         flex: 1,
         alignItems: 'center',
         justifyContent: 'center',
-        backgroundColor: '#f5f5f5'
+        backgroundColor: LIGTHT_THEME.color.background
     }
 });
\ 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 b0d4497e8c7c7658b67725104730bfeee618c282..0e7bca163c1e422938a23be44aba436b7dae16e7 100644
--- a/mobile/src/screens/state_selection/state_selection_page.tsx
+++ b/mobile/src/screens/state_selection/state_selection_page.tsx
@@ -1,21 +1,40 @@
-import { View, Text, ActivityIndicator } from "react-native";
-import { pageStyles } from '../page_styles';
+import { View, ActivityIndicator } 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 { router } from "expo-router";
+import { useAnimatedSelectedIndex } from "../../hooks/useAnimatedSelectedIndex";
+import { AnimatedBackground } from "../../components/animated_background/animated_background";
 
 export const StateSelectionPage = () => {
-    const { data, requestStatus } = useGetStates();
-    if (requestStatus === ApiRequestStatus.LOADING) {
-        return (
-            <View style={pageStyles.page_container}>
-                <ActivityIndicator size="large" color="#0000ff" />
-            </View>
-        );
-    }
+  const { data, requestStatus } = useGetStates();
+  const { selectedStateIndex, onIndexChange, backgroundImageAnimation } =
+    useAnimatedSelectedIndex(200, 200);
+
+  if (requestStatus === ApiRequestStatus.LOADING) {
     return (
-        <View style={pageStyles.page_container}>
-            <Caroussel data={data} />   
-        </View>
+      <View style={pageStyles.page_container}>
+        <ActivityIndicator size="large" color="#0000ff" />
+      </View>
     );
-}
\ No newline at end of file
+  }
+
+  const handleOnPress = (id: number) => {
+    router.push(`/state?id=${id}`);
+  };
+
+  return (
+    <View style={pageStyles.page_container}>
+      <AnimatedBackground
+        imageUri={data[selectedStateIndex].imageUri}
+        backgroundImageAnimation={backgroundImageAnimation}
+      />
+      <Caroussel
+        data={data}
+        onPress={handleOnPress}
+        onIndexChange={onIndexChange}
+      />
+    </View>
+  );
+};
diff --git a/mobile/src/screens/town_activities/town_activities_page.tsx b/mobile/src/screens/town_activities/town_activities_page.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ff96af23ede2bdff1fe1635dcc7b694db05dd757
--- /dev/null
+++ b/mobile/src/screens/town_activities/town_activities_page.tsx
@@ -0,0 +1,76 @@
+import {
+  View,
+  Text,
+  FlatList,
+  Button,
+  StyleSheet,
+  Touchable,
+  TouchableOpacity,
+} from "react-native";
+import { FullPageLoader } from "../../components/full_page_loader/full_page_loader";
+import { ApiRequestStatus } from "../../constants/api_request_states";
+import { useGetActivities } from "../../hooks/useGetActivities";
+import { ActivityTile } from "../../components/activity_tile/activity_tile";
+import { LIGTHT_THEME } from "../../constants/theme";
+import { router } from "expo-router";
+
+interface TownActivitiesPageProps {
+  townId: number;
+  stateId: number;
+}
+
+export const TownActivitiesPage = ({ townId, stateId }: TownActivitiesPageProps) => {
+  const { activities, requestStatus } = useGetActivities(townId);
+
+  if (requestStatus === ApiRequestStatus.LOADING) {
+    return <FullPageLoader />;
+  }
+
+  const handleViewActivity = (activityId: number) =>{
+    router.push(`/state/${stateId}/activity?townId=${townId}&activityId=${activityId}`);
+  }
+
+  return (
+    <View style={styles.container}>
+      <FlatList
+        data={activities}
+        style={styles.activities_container}
+        renderItem={({ item }) => <ActivityTile onPress={handleViewActivity} activity={item} />}
+        ItemSeparatorComponent={() => <View style={{ height: 10 }} />}
+        ListFooterComponent={() => <View style={{ height: 70 }} />}
+        keyExtractor={(item) => item.id.toString()}
+      />
+      <TouchableOpacity
+        style={styles.generate_route_button}
+        activeOpacity={0.8}
+      >
+        <Text style={styles.generate_router_button_text}>Generate Route</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    padding: 10,
+  },
+  activities_container: {
+    flex: 1,
+    width: "100%",
+  },
+  generate_route_button: {
+    position: "absolute",
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: LIGTHT_THEME.color.primary,
+    borderRadius: 25,
+    bottom: 10,
+    width: 200,
+    height: 50,
+  },
+  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 24fff6353b6453601706661d66891ba7680e6d2b..aea752eebe98f79ac9563ed8615df5487696bd2a 100644
--- a/mobile/src/screens/town_selection/town_selection_page.tsx
+++ b/mobile/src/screens/town_selection/town_selection_page.tsx
@@ -1,26 +1,80 @@
-import { View, Text, ActivityIndicator } from "react-native";
-import { pageStyles } from '../page_styles';
+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 { 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 BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet";
 
 interface TownSelectionPageProps {
-    stateId: number;
-};
+  stateId: number;
+}
+
+const snapPoints = ["15%", "50%"];
 
 export const TownSelectionPage = ({ stateId }: TownSelectionPageProps) => {
-    const { data, requestStatus } = useGetTowns(stateId);
-    if (requestStatus === ApiRequestStatus.LOADING) {
-        return (
-            <View style={pageStyles.page_container}>
-                <ActivityIndicator size="large" color="#0000ff" />
-            </View>
-        );
-    }
+  const { data, requestStatus } = useGetTowns(stateId);
+  const { selectedStateIndex, onIndexChange, backgroundImageAnimation } =
+    useAnimatedSelectedIndex(200, 200);
+
+  if (requestStatus === ApiRequestStatus.LOADING) {
+    return (
+      <View style={pageStyles.page_container}>
+        <ActivityIndicator size="large" color="#0000ff" />
+      </View>
+    );
+  }
+
+  if (data.length === 0) {
     return (
-        <View style={pageStyles.page_container}>
-            <Caroussel data={data} />   
-        </View>
+      <View style={pageStyles.page_container}>
+        <Text>No towns found</Text>
+      </View>
     );
-}
\ No newline at end of file
+  }
+
+  const handleTownSelection = (townId: number) => {
+    router.push(`/state/${stateId}/town?townId=${townId}`);
+  };
+
+  return (
+    <View style={pageStyles.page_container}>
+      <AnimatedBackground
+        imageUri={data[selectedStateIndex].imageUri}
+        backgroundImageAnimation={backgroundImageAnimation}
+      />
+      <Caroussel
+        data={data}
+        onPress={handleTownSelection}
+        onIndexChange={onIndexChange}
+      />
+      {data[selectedStateIndex].description && (
+        <BottomSheet snapPoints={snapPoints}>
+          <BottomSheetView style={styles.container}>
+            <Text style={styles.description_text}>Description</Text>
+            <Text>{data[selectedStateIndex].description}</Text>
+          </BottomSheetView>
+        </BottomSheet>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 20,
+    gap: 20,
+  },
+  description_text: {
+    fontSize: 20,
+    fontWeight: "bold",
+  },
+  description_content_text: {
+    fontSize: 16,
+  },
+});