Few things:

- Speed up the fade animation a tad bit
- Added a back arrow in the scan screen
- Improved a bit the placeholder of the battles screen, since it'd throw out the transition animation.

app/src/main/java/com/github/nacabaro/vbhelper/navigation/AppNavigation.kt

@@ -1,5 +1,10 @@
 package com.github.nacabaro.vbhelper.navigation
 
+import androidx.compose.animation.AnimatedContentTransitionScope
+import androidx.compose.animation.ExitTransition
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
@@ -51,11 +56,24 @@ fun AppNavigation(
         NavHost(
             navController = navController,
             startDestination = NavigationItems.Home.route,
+            enterTransition = {
+                fadeIn(
+                    animationSpec = tween(200)
+                )
+            },
+            exitTransition = {
+                fadeOut(
+                    animationSpec = tween(200)
+                )
+            },
             modifier = Modifier
                 .padding(contentPadding)
+
         ) {
             composable(NavigationItems.Battles.route) {
-                BattlesScreen()
+                BattlesScreen(
+                    navController = navController
+                )
             }
             composable(NavigationItems.Home.route) {
                 HomeScreen(

app/src/main/java/com/github/nacabaro/vbhelper/screens/BattlesScreen.kt

@@ -1,9 +1,38 @@
 package com.github.nacabaro.vbhelper.screens
 
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.navigation.NavController
+import com.github.nacabaro.vbhelper.components.TopBanner
+import com.github.nacabaro.vbhelper.navigation.NavigationItems
 
 @Composable
-fun BattlesScreen() {
-    Text("Battles Screen")
+fun BattlesScreen(
+    navController: NavController
+) {
+    Scaffold (
+        topBar = {
+            TopBanner(
+                text = "Online battles"
+            )
+        }
+    ) { contentPadding ->
+        Column(
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center,
+            modifier = Modifier
+                .padding(top = contentPadding.calculateTopPadding())
+                .fillMaxSize()
+        ) {
+            Text("Coming soon")
+        }
+    }
 }

app/src/main/java/com/github/nacabaro/vbhelper/screens/scanScreen/ScanScreen.kt

@@ -184,7 +184,8 @@ fun ScanScreen(
                         }
                     }
                 }
-            }
+            },
+            navController = navController
         )
     }
 }
@@ -193,9 +194,17 @@ fun ScanScreen(
 fun ChooseConnectOption(
     onClickRead: (() -> Unit)? = null,
     onClickWrite: (() -> Unit)? = null,
+    navController: NavController
 ) {
     Scaffold(
-        topBar = { TopBanner(text = "Scan a Vital Bracelet") }
+        topBar = {
+            TopBanner(
+                text = "Scan a Vital Bracelet",
+                onBackClick = {
+                    navController.popBackStack()
+                }
+            )
+        }
     ) { contentPadding ->
         Column(
             verticalArrangement = Arrangement.Center,