diff --git a/Android/VeraxApplication/app/src/main/java/com/example/veraxapplication/MainActivity.kt b/Android/VeraxApplication/app/src/main/java/com/example/veraxapplication/MainActivity.kt
index 2b35a23..4096109 100644
--- a/Android/VeraxApplication/app/src/main/java/com/example/veraxapplication/MainActivity.kt
+++ b/Android/VeraxApplication/app/src/main/java/com/example/veraxapplication/MainActivity.kt
@@ -58,11 +58,6 @@ fun VeraxContent() {
     var theme = listOf("Economique", "Culture", "Politique", "Faits divers")
 
 
-
-    TopBarVerax(articles = articlesApi, theme = theme)
-
-
-
-    VeraxNavHost()
+    TopBarVerax(articles = articlesApi, theme = theme, articlesStub= articles)
 
 }
diff --git a/Android/VeraxApplication/app/src/main/java/com/example/veraxapplication/modele/articles/StubArticles.kt b/Android/VeraxApplication/app/src/main/java/com/example/veraxapplication/modele/articles/StubArticles.kt
index 61d61eb..872bd9e 100644
--- a/Android/VeraxApplication/app/src/main/java/com/example/veraxapplication/modele/articles/StubArticles.kt
+++ b/Android/VeraxApplication/app/src/main/java/com/example/veraxapplication/modele/articles/StubArticles.kt
@@ -26,11 +26,11 @@ class StubArticles() : IArticlesDataManager {
             "Thinkerview est une chaîne passionnante chaîne youtube d'interview-débat.",
             "3",
             "02/09/2024",
-            "Tony",
+            "Siwa",
             "Politique",
-            "12",
-            "https://cdn.discordapp.com/attachments/1150826798549049554/1219554341388816437/stub1.webp?ex=660bb97d&is=65f9447d&hm=3e1e8d3372ae897fa4e2aa1ec730d976d74b35fce96cb8d78d6f9239e2836564&"
-        )
+            "https://cdn.discordapp.com/attachments/1150826798549049554/1219554341388816437/stub1.webp?ex=660bb97d&is=65f9447d&hm=3e1e8d3372ae897fa4e2aa1ec730d976d74b35fce96cb8d78d6f9239e2836564&",
+            "12"
+            )
         article1.remplirArticle(contenuMap["article1"])
         lArticles!!.add(article1)
 
@@ -41,10 +41,10 @@ class StubArticles() : IArticlesDataManager {
             "Revenons sur les différentes controverses à ce sujet.",
             "7",
             "02/09/2024",
-            "Tony",
+            "Siwa",
             "Politique",
-            "12",
-            "https://cdn.discordapp.com/attachments/1150826798549049554/1219555874339815454/stub2.webp?ex=660bbaea&is=65f945ea&hm=80aef945e8410b18395c716fdd19265608f7b1263731192d5c69f807fce9e944&"
+            "https://cdn.discordapp.com/attachments/1150826798549049554/1219555874339815454/stub2.webp?ex=660bbaea&is=65f945ea&hm=80aef945e8410b18395c716fdd19265608f7b1263731192d5c69f807fce9e944&",
+            "12"
         )
         article2.remplirArticle(contenuMap["article5"])
         lArticles!!.add(article2)
@@ -56,11 +56,10 @@ class StubArticles() : IArticlesDataManager {
             "Pour réfuter la fausse croyance que la Terre est plate, il est essentiel de s'appuyer sur des preuves scientifiques et des observations historiques. ",
             "5",
             "02/09/2024",
-            "Tony",
+            "Siwa",
             "Politique",
-            "12",
-
-            "https://cdn.discordapp.com/attachments/1150826798549049554/1219547864196317225/stub1.webp?ex=660bb374&is=65f93e74&hm=a9e5dd48faa3ae68c358309af8949c46dfd4dea9c4d6e3d845d707784e5341cf&"
+            "https://cdn.discordapp.com/attachments/1150826798549049554/1219547864196317225/stub1.webp?ex=660bb374&is=65f93e74&hm=a9e5dd48faa3ae68c358309af8949c46dfd4dea9c4d6e3d845d707784e5341cf&",
+            "12"
         )
         article3.remplirArticle(contenuMap["article4"])
         lArticles!!.add(article3)
@@ -72,10 +71,10 @@ class StubArticles() : IArticlesDataManager {
             "Explorons les progrès remarquables dans le domaine de l'IA, les secteurs qu'elle révolutionne, et les implications éthiques majeures qu'elle soulève.",
             "9",
             "02/09/2024",
-            "Tony",
+            "Luthen",
             "Politique",
-            "12",
-            "https://cdn.discordapp.com/attachments/1150826798549049554/1219560686254817290/stub1.webp?ex=660bbf65&is=65f94a65&hm=021bd8c90c89347f31373468cc7a03ae15f1d3f9988a5b4325149c6df938d7bb&"
+            "https://cdn.discordapp.com/attachments/1150826798549049554/1219560686254817290/stub1.webp?ex=660bbf65&is=65f94a65&hm=021bd8c90c89347f31373468cc7a03ae15f1d3f9988a5b4325149c6df938d7bb&",
+            "12"
         )
         article4.remplirArticle(contenuMap["article6"])
         lArticles!!.add(article4)
diff --git a/Android/VeraxApplication/app/src/main/java/com/example/veraxapplication/navigation/VeraxNavHost.kt b/Android/VeraxApplication/app/src/main/java/com/example/veraxapplication/navigation/VeraxNavHost.kt
index 97003c4..bf696b8 100644
--- a/Android/VeraxApplication/app/src/main/java/com/example/veraxapplication/navigation/VeraxNavHost.kt
+++ b/Android/VeraxApplication/app/src/main/java/com/example/veraxapplication/navigation/VeraxNavHost.kt
@@ -1,22 +1,44 @@
 package com.example.veraxapplication.navigation
 
 import androidx.compose.runtime.Composable
+import androidx.navigation.NavHostController
+import androidx.navigation.NavType
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
-import com.example.veraxapplication.MainActivity
+import androidx.navigation.navArgument
+import com.example.veraxapplication.modele.articles.Article
+import com.example.veraxapplication.ui.article.AffichageLesArticles
+import com.example.veraxapplication.ui.article.AfficherArticle
 
 @Composable
-fun VeraxNavHost() {
+fun VeraxNavHost(articles : List<Article>, navController: NavHostController, articlesStub: List<Article>) {
 
-    val navController = rememberNavController()
 
     NavHost(
         navController = navController,
         startDestination = "accueil"
     ){
         composable(route="accueil"){
+            AffichageLesArticles(
+                articles = articles,
+                goToArticle = {
+                    navController.navigate("article/${it.id}")
+                }
+            )
+        }
 
+        composable(
+            route="article/{articleid}",
+            arguments= listOf(navArgument("articleid"){ type= NavType.IntType})
+        ){
+            it.arguments?.getInt("articleid")?.let { articleid ->
+                articlesStub.find { it.id == articleid }?.let {
+                    AfficherArticle(
+                        e = it
+                    )
+                }
+            }
         }
     }
 
diff --git a/Android/VeraxApplication/app/src/main/java/com/example/veraxapplication/ui/article/Article.kt b/Android/VeraxApplication/app/src/main/java/com/example/veraxapplication/ui/article/Article.kt
index 20697f4..c9a44fe 100644
--- a/Android/VeraxApplication/app/src/main/java/com/example/veraxapplication/ui/article/Article.kt
+++ b/Android/VeraxApplication/app/src/main/java/com/example/veraxapplication/ui/article/Article.kt
@@ -37,40 +37,40 @@ import com.example.veraxapplication.modele.articles.contenus.ContenuParagraphe
 import com.example.veraxapplication.ui.theme.Salmon
 
 @Composable
-fun AffichageLesArticles(articles : List<Article>){
+fun AffichageLesArticles(articles : List<Article>, goToArticle: (Article) -> Unit){
     Column(modifier = Modifier.verticalScroll(rememberScrollState())){
         for(article in articles){
-            Box (Modifier.clickable { /*faut je regarde la doc*/ }){
-                AffichageUnArticleInfo(e = article)
+            Box {
+                AffichageUnArticleInfo(e = article, goToArticle)
             }
-
         }
     }
 }
 
 @Composable
-fun AffichageUnArticleInfo(e : Article){
+fun AffichageUnArticleInfo(e : Article, goToArticle: (Article) -> Unit){
     Column(modifier = Modifier
         .padding(7.dp)
         .border(width = 1.dp, color = Color.Black, shape = RoundedCornerShape(10.dp))
         .padding(5.dp)) {
-        /*DisplayTitle(title = e.Title)
-        DisplayHeader(author = e.Author, description = e.Description, lectureTime = e.LectureTime)
-        DisplayImage(image = e.Image)
-        DisplayContentArticle(content = e.Content)*/
-
-
 
         Text(text = e.titre, fontFamily = FontFamily.Serif, fontSize = 30.sp)
 
-        DisplayHeader(author = e.auteur, description = e.description , lectureTime = e.temps)
-
-        var imageURl = e.imagePrincipale
-        Log.d("ImageLoad", "URL de l'image reçue de l'API : $imageURl")
-        
+        Box(modifier = Modifier
+            .padding(15.dp)
+            .border(width = 1.dp, color = Color.Black, shape = RoundedCornerShape(10.dp))
+            .clip(RoundedCornerShape(10.dp))
+            .background(Salmon)
+        ) {
+            Column (modifier = Modifier.padding(15.dp)) {
+                Text(text = "Auteur : "+e.auteur, fontSize = 17.sp)
+                Text(text = "Description : "+e.description, fontSize = 17.sp)
+                Text(text = "Temps de lecture : "+e.temps+" minutes", fontSize = 17.sp)
+            }
+        }
         Image(
             painter = rememberImagePainter(
-                data = imageURl
+                data = e.imagePrincipale
             ),
             contentScale = ContentScale.Crop,
             contentDescription = null,
@@ -79,15 +79,16 @@ fun AffichageUnArticleInfo(e : Article){
                 .align(Alignment.CenterHorizontally)
                 .padding(5.dp, 35.dp)
         )
-        
-        Button(onClick = { /*TODO*/ },
+
+
+        Button(onClick = { goToArticle(e)},
             colors = ButtonDefaults.buttonColors(
-            containerColor = Salmon,
-            contentColor = Color.Black
-        ),
+                containerColor = Salmon,
+                contentColor = Color.Black
+            ),
             border = BorderStroke(1.dp, Color.Black),
-                    modifier = Modifier
-            .align(Alignment.CenterHorizontally)
+            modifier = Modifier
+                .align(Alignment.CenterHorizontally)
         ) {
             Text(text = "Voir plus")
         }
@@ -107,25 +108,23 @@ fun AfficherArticle(e : Article){
         // Affichage des informations de l'article
         DisplayHeader(author = e.auteur, description = e.description, lectureTime = e.temps)
 
-        Text(text = "coucou")
 
-/*
+
         Image(
-            painter = rememberImagePainter(data = e.imagePrincipale),
-            contentScale = ContentScale.FillHeight,
+            painter = rememberImagePainter(
+                data = e.imagePrincipale
+            ),
+            contentScale = ContentScale.Crop,
             contentDescription = null,
             modifier = Modifier
                 .size(350.dp)
+                .align(Alignment.CenterHorizontally)
                 .padding(5.dp, 35.dp)
-                .fillMaxWidth()
-                .wrapContentWidth(Alignment.CenterHorizontally)
-        )*/
+        )
         
 
         // Affichage contenus
-        //DisplayContenu(e.lContenus)
-        
-        
+        DisplayContenu(e.lContenus)
 
     }
 }
diff --git a/Android/VeraxApplication/app/src/main/java/com/example/veraxapplication/ui/topBar/TopBarVerax.kt b/Android/VeraxApplication/app/src/main/java/com/example/veraxapplication/ui/topBar/TopBarVerax.kt
index f91a239..b1aabc1 100644
--- a/Android/VeraxApplication/app/src/main/java/com/example/veraxapplication/ui/topBar/TopBarVerax.kt
+++ b/Android/VeraxApplication/app/src/main/java/com/example/veraxapplication/ui/topBar/TopBarVerax.kt
@@ -5,12 +5,13 @@ import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.ArrowBack
+import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material.icons.filled.Menu
 import androidx.compose.material3.CenterAlignedTopAppBar
 import androidx.compose.material3.DropdownMenu
@@ -32,18 +33,25 @@ import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.navigation.compose.currentBackStackEntryAsState
+import androidx.navigation.compose.rememberNavController
 import com.example.veraxapplication.R
 import com.example.veraxapplication.modele.articles.Article
-import com.example.veraxapplication.ui.article.AffichageLesArticles
+import com.example.veraxapplication.navigation.VeraxNavHost
 import com.example.veraxapplication.ui.theme.Orange
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun TopBarVerax(theme: List<String>, articles: List<Article>) {
+fun TopBarVerax(theme: List<String>, articles: List<Article>, articlesStub : List<Article>) {
     var leMenu by remember {
         mutableStateOf(false)
     }
-    Row() {
+
+    val navController = rememberNavController()
+
+    val navBackStackEntry by navController.currentBackStackEntryAsState()
+
+    Row( modifier = Modifier.background(Color.Blue).fillMaxSize()) {
         Scaffold(
             topBar = {
                 CenterAlignedTopAppBar(
@@ -58,14 +66,16 @@ fun TopBarVerax(theme: List<String>, articles: List<Article>) {
                             modifier = Modifier.fillMaxWidth()
                         )
                     },
-                    navigationIcon = {
-                        IconButton(onClick = { /* action() */ }) {
+                    navigationIcon = { if (navBackStackEntry?.destination?.route != "accueil"){
+                        IconButton(onClick = { navController.popBackStack() }) {
                             Icon(
-                                imageVector = Icons.Filled.ArrowBack,
+                                imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                                 contentDescription = "Retour",
                                 Modifier.size(30.dp)
                             )
                         }
+                    }
+
                     },
                     actions = {
                         IconButton(onClick = { leMenu = !leMenu }) {
@@ -78,7 +88,11 @@ fun TopBarVerax(theme: List<String>, articles: List<Article>) {
                         DropdownMenu(
                             expanded = leMenu, onDismissRequest = { leMenu = false },
                             modifier = Modifier
-                                .border(width = 1.dp, color = Color.Black, shape = RoundedCornerShape(10.dp))
+                                .border(
+                                    width = 1.dp,
+                                    color = Color.Black,
+                                    shape = RoundedCornerShape(10.dp)
+                                )
                                 .background(Orange)
                         ) {
                             theme.sorted().forEach {
@@ -125,8 +139,10 @@ fun TopBarVerax(theme: List<String>, articles: List<Article>) {
                 verticalArrangement = Arrangement.spacedBy(16.dp),
             ) {
 
-                AffichageLesArticles(articles = articles)
-                // AfficherArticle(articles.get(0));
+                // AffichageLesArticles(articles = articles)
+                // AfficherArticle(articles.get(0))
+
+                VeraxNavHost(articles = articles, navController, articlesStub= articlesStub)
 
 
             }