diff --git a/docs/sample.md b/docs/sample.md
index 423f8508..e3c2e65b 100644
--- a/docs/sample.md
+++ b/docs/sample.md
@@ -18,59 +18,61 @@ This sample demonstrates the following features:
 ```kotlin
 @Composable
 fun App() {
-    val navigator = rememberNavigator()
-    MaterialTheme {
-        NavHost(
-            navigator = navigator,
-            initialRoute = "/home"
-        ) {
-            scene(route = "/home") {
-                val homeViewModel = viewModel {
-                    HomeViewModel()
-                }
-                val name by homeViewModel.name.observeAsState()
-                Column(
-                    modifier = Modifier.fillMaxSize(),
-                    horizontalAlignment = Alignment.CenterHorizontally,
-                    verticalArrangement = Arrangement.Center
-                ) {
-                    Text(
-                        text = "Greet Me!",
-                        style = MaterialTheme.typography.h6
-                    )
-                    Spacer(modifier = Modifier.height(30.dp))
-                    TextField(
-                        value = name,
-                        maxLines = 1,
-                        label = { Text(text = "Enter your name") },
-                        onValueChange = {
-                            homeViewModel.setName(it)
-                        }
-                    )
-                    Spacer(modifier = Modifier.height(30.dp))
-                    Button(
-                        onClick = {
-                            navigator.navigate(route = "/greeting/$name")
-                        }
-                    ) {
-                        Text(text = "GO!")
+    PreComposeApp {
+        val navigator = rememberNavigator()
+        MaterialTheme {
+            NavHost(
+                navigator = navigator,
+                initialRoute = "/home"
+            ) {
+                scene(route = "/home") {
+                    val homeViewModel = viewModel {
+                        HomeViewModel()
                     }
-                }
-            }
-            scene(route = "/greeting/{name}") { backStackEntry ->
-                backStackEntry.path<String>("name")?.let { name ->
+                    val name by homeViewModel.name.observeAsState()
                     Column(
                         modifier = Modifier.fillMaxSize(),
                         horizontalAlignment = Alignment.CenterHorizontally,
                         verticalArrangement = Arrangement.Center
                     ) {
                         Text(
-                            text = name,
+                            text = "Greet Me!",
                             style = MaterialTheme.typography.h6
                         )
                         Spacer(modifier = Modifier.height(30.dp))
-                        Button(onClick = { navigator.goBack() }) {
-                            Text(text = "GO BACK!")
+                        TextField(
+                            value = name,
+                            maxLines = 1,
+                            label = { Text(text = "Enter your name") },
+                            onValueChange = {
+                                homeViewModel.setName(it)
+                            }
+                        )
+                        Spacer(modifier = Modifier.height(30.dp))
+                        Button(
+                            onClick = {
+                                navigator.navigate(route = "/greeting/$name")
+                            }
+                        ) {
+                            Text(text = "GO!")
+                        }
+                    }
+                }
+                scene(route = "/greeting/{name}") { backStackEntry ->
+                    backStackEntry.path<String>("name")?.let { name ->
+                        Column(
+                            modifier = Modifier.fillMaxSize(),
+                            horizontalAlignment = Alignment.CenterHorizontally,
+                            verticalArrangement = Arrangement.Center
+                        ) {
+                            Text(
+                                text = name,
+                                style = MaterialTheme.typography.h6
+                            )
+                            Spacer(modifier = Modifier.height(30.dp))
+                            Button(onClick = { navigator.goBack() }) {
+                                Text(text = "GO BACK!")
+                            }
                         }
                     }
                 }
@@ -93,57 +95,59 @@ class HomeViewModel : ViewModel() {
 ```kotlin
 @Composable
 fun App() {
-    val navigator = rememberNavigator()
-    MaterialTheme {
-        NavHost(
-            navigator = navigator,
-            initialRoute = "/home"
-        ) {
-            scene(route = "/home") {
-                val homeViewModel = viewModel {
-                    HomeViewModel()
-                }
-                val name by homeViewModel.name.collectAsStateWithLifecycle()
-                Column(
-                    modifier = Modifier.fillMaxSize(),
-                    horizontalAlignment = Alignment.CenterHorizontally,
-                    verticalArrangement = Arrangement.Center
-                ) {
-                    Text(
-                        text = "Greet Me!",
-                        style = MaterialTheme.typography.h6
-                    )
-                    Spacer(modifier = Modifier.height(30.dp))
-                    TextField(
-                        value = name,
-                        maxLines = 1,
-                        label = { Text(text = "Enter your name") },
-                        onValueChange = homeViewModel::setName
-                    )
-                    Spacer(modifier = Modifier.height(30.dp))
-                    Button(
-                        onClick = {
-                            navigator.navigate(route = "/greeting/$name")
-                        }
-                    ) {
-                        Text(text = "GO!")
+    PreComposeApp {
+        val navigator = rememberNavigator()
+        MaterialTheme {
+            NavHost(
+                navigator = navigator,
+                initialRoute = "/home"
+            ) {
+                scene(route = "/home") {
+                    val homeViewModel = viewModel {
+                        HomeViewModel()
                     }
-                }
-            }
-            scene(route = "/greeting/{name}") { backStackEntry ->
-                backStackEntry.path<String>("name")?.let { name ->
+                    val name by homeViewModel.name.collectAsStateWithLifecycle()
                     Column(
                         modifier = Modifier.fillMaxSize(),
                         horizontalAlignment = Alignment.CenterHorizontally,
                         verticalArrangement = Arrangement.Center
                     ) {
                         Text(
-                            text = name,
+                            text = "Greet Me!",
                             style = MaterialTheme.typography.h6
                         )
                         Spacer(modifier = Modifier.height(30.dp))
-                        Button(onClick = navigator::goBack) {
-                            Text(text = "GO BACK!")
+                        TextField(
+                            value = name,
+                            maxLines = 1,
+                            label = { Text(text = "Enter your name") },
+                            onValueChange = homeViewModel::setName
+                        )
+                        Spacer(modifier = Modifier.height(30.dp))
+                        Button(
+                            onClick = {
+                                navigator.navigate(route = "/greeting/$name")
+                            }
+                        ) {
+                            Text(text = "GO!")
+                        }
+                    }
+                }
+                scene(route = "/greeting/{name}") { backStackEntry ->
+                    backStackEntry.path<String>("name")?.let { name ->
+                        Column(
+                            modifier = Modifier.fillMaxSize(),
+                            horizontalAlignment = Alignment.CenterHorizontally,
+                            verticalArrangement = Arrangement.Center
+                        ) {
+                            Text(
+                                text = name,
+                                style = MaterialTheme.typography.h6
+                            )
+                            Spacer(modifier = Modifier.height(30.dp))
+                            Button(onClick = navigator::goBack) {
+                                Text(text = "GO BACK!")
+                            }
                         }
                     }
                 }
diff --git a/docs/setup.md b/docs/setup.md
index 1a3e4408..1a9e2df0 100644
--- a/docs/setup.md
+++ b/docs/setup.md
@@ -17,20 +17,17 @@ api("moe.tlaster:precompose:$precompose_version")
 
 // api("moe.tlaster:precompose-koin:$precompose_version") // For Koin intergration
 ```
-## Android
-Change the `androidx.activity.compose.setContent` to `moe.tlaster.precompose.lifecycle.setContent`
 
-## Desktop (JVM)
-Change the `Window` to `moe.tlaster.precompose.PreComposeWindow`
+## Wrap the `App()`
 
-## iOS
-Set the `UIWindow.rootViewController` to `PreComposeApplication`
-
-## Native macOS
-Change the `Window` to `moe.tlaster.precompose.PreComposeWindow`
-
-## Web (Canvas)
-Change the `Window` to `moe.tlaster.precompose.preComposeWindow`
+Wrap your App with `PreComposApp` like this:
+```Kotlin
+fun App() {
+    PreComposeApp {
+        // your apps content gose here
+    }
+}
+```
 
 ## Done!
 That's it! Enjoying the PreCompose! Now you can write all your business logic and ui code in `commonMain`