diff --git a/iut-expo-starter/.expo/packager-info.json b/iut-expo-starter/.expo/packager-info.json
index 765d447b..f76bd557 100644
--- a/iut-expo-starter/.expo/packager-info.json
+++ b/iut-expo-starter/.expo/packager-info.json
@@ -1,5 +1,5 @@
 {
-  "expoServerPort": null,
+  "expoServerPort": 19000,
   "packagerPort": 19000,
   "packagerPid": null,
   "expoServerNgrokUrl": null,
diff --git a/iut-expo-starter/assets/Nuageux.png b/iut-expo-starter/assets/Nuageux.png
new file mode 100644
index 00000000..b370f4e6
Binary files /dev/null and b/iut-expo-starter/assets/Nuageux.png differ
diff --git a/iut-expo-starter/assets/Soleil.png b/iut-expo-starter/assets/Soleil.png
new file mode 100644
index 00000000..219a6594
Binary files /dev/null and b/iut-expo-starter/assets/Soleil.png differ
diff --git a/iut-expo-starter/assets/humidity.png b/iut-expo-starter/assets/humidity.png
new file mode 100644
index 00000000..e5d5390f
Binary files /dev/null and b/iut-expo-starter/assets/humidity.png differ
diff --git a/iut-expo-starter/assets/temperature.png b/iut-expo-starter/assets/temperature.png
new file mode 100644
index 00000000..9644960d
Binary files /dev/null and b/iut-expo-starter/assets/temperature.png differ
diff --git a/iut-expo-starter/components/VilleCompopo.tsx b/iut-expo-starter/components/VilleCompopo.tsx
index 44c6cc42..3117b988 100644
--- a/iut-expo-starter/components/VilleCompopo.tsx
+++ b/iut-expo-starter/components/VilleCompopo.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useSyncExternalStore } from "react";
 import { View, StyleSheet, Text, Button, TouchableHighlight, Image } from "react-native";
-import { City, getCurrentWeather, Weather } from "../data/stub";
+import { City, FAVORITE_CITY_DATA, getCurrentWeather, Weather } from "../data/stub";
 
 
 type VilleProps = {
@@ -19,8 +19,8 @@ const weather = getCurrentWeather(props.city.name);
             <Text>{props.city.latitude} - {props.city.longitude}</Text>
           </View>
             <Text style={styles.temperature}>{weather?.temperature}</Text>
-        <TouchableHighlight /*onPress={() => props.fav = this.city}*/>
-              <Image source={ props.city==props.fav ? require('../assets/yellowstar.png') : require('../assets/blackstar.png')} style={styles.button}/>
+        <TouchableHighlight /*onPress={() => FAVORITE_CITY_DATA = this.city}*/>
+              <Image source={props.city.longitude===FAVORITE_CITY_DATA.longitude && props.city.latitude===FAVORITE_CITY_DATA.latitude ? require('../assets/yellowstar.png') : require('../assets/blackstar.png')} style={styles.button}/>
         </TouchableHighlight>
         </View>
       </View>
diff --git a/iut-expo-starter/screens/CityDetails.tsx b/iut-expo-starter/screens/CityDetails.tsx
index 99c17771..170da2ec 100644
--- a/iut-expo-starter/screens/CityDetails.tsx
+++ b/iut-expo-starter/screens/CityDetails.tsx
@@ -1,8 +1,8 @@
 import React from "react";
-import { View, Text } from "react-native";
+import { View, Text, StyleSheet, TouchableHighlight, Image } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { TopBar } from "../components/TopBar";
-import { getCurrentWeather } from "../data/stub";
+import { FAVORITE_CITY_DATA, getCurrentWeather, WEATHER_DATA } from "../data/stub";
 
 export default function CityDetails({route}){
     const insets = useSafeAreaInsets();
@@ -11,10 +11,87 @@ export default function CityDetails({route}){
     const city = route.params.city;
     const weather = getCurrentWeather(city.name)
 
+    var meteo = getCurrentWeather(city.name);
+
     return (
-        <View style={{alignItems: "center"}}>
+        <View style={{alignItems: "center", backgroundColor: "darksalmon"}}>
             <TopBar/>
-            <Text>{city.name}</Text>
+            <Text style={styles.name}>{city.name}</Text>
+            <View style={styles.place}>
+                <Text style={styles.petitText}>{city.longitude} - {city.latitude}</Text>
+            </View>
+            <TouchableHighlight>
+              <Image style={styles.image} source={ meteo?.weatherType=="Nuageux" ? require('../assets/Nuageux.png') : require('../assets/Soleil.png')}/>
+            </TouchableHighlight>
+            <Text style={styles.weatherType}>{meteo?.weatherType}</Text>
+            <View style={styles.supertruc}>
+                <Image style={styles.petitImage} source={require('../assets/temperature.png')}/>
+                <View style={styles.supertrucencore}>
+                    <Text style={styles.temperature}>{meteo?.temperature}°C</Text>
+                    <Text style={styles.petitTemp}>Ressenti {meteo?.temperatureFeelsLike}°C</Text>
+                </View>
+            </View>
+            <Text style={styles.title}>{meteo?.at}</Text>
+            <Text style={styles.title}>{meteo?.humidity}</Text>
+            <Text style={styles.title}>{meteo?.pressure}</Text>
+            <Text style={styles.title}>{meteo?.visibility}</Text>
+            <Text style={styles.title}>{meteo?.visibility}</Text>
+            <Text style={styles.title}>{meteo?.weatherDescription}</Text>
+            <Text style={styles.title}>{meteo?.windSpeed}</Text>
         </View>
     )
-}
\ No newline at end of file
+}
+
+const styles = StyleSheet.create({
+    name: {
+        marginTop: 30,
+        fontSize: 35,
+        fontWeight: "bold"
+    },
+    place: {
+        marginBottom: 20,
+    },
+    petitText: {
+        fontSize: 15
+    },
+    image: {
+        height: 100,
+        width: 100
+    },
+    title: {
+      fontWeight: "bold",
+      fontSize: 18
+    },
+    temperature: {
+      marginTop: 10,
+      fontSize: 25, 
+      fontWeight: "600"
+    },
+    petitTemp: {
+        fontSize: 16,
+        marginBottom: 35
+    },
+    weatherType: {
+        fontSize: 17,
+        marginBottom: 20
+    },
+    button: {
+      height: 30,
+      width: 30,
+      marginTop: 13,
+      alignSelf: "flex-end",
+      margin: 5
+    },
+    supertruc: {
+        flexDirection: "row"
+    },
+    supertrucencore: {
+        flexDirection: "column"
+    },
+    petitImage: {
+        height: 40,
+        width: 40,
+        marginRight: 7,
+        marginTop: 15
+    }
+  });
\ No newline at end of file