diff --git a/.idea/misc.xml b/.idea/misc.xml
index e2f6ad4..cbbbc13 100644
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@@ -134,6 +134,8 @@
         <entry key="../../../../../layout/compose-model-1620504542890.xml" value="0.46511627906976744" />
         <entry key="../../../../../layout/compose-model-1620504644429.xml" value="0.3796844181459566" />
         <entry key="../../../../../layout/compose-model-1620505978232.xml" value="0.46511627906976744" />
+        <entry key="../../../../../layout/compose-model-1620506082418.xml" value="0.28125" />
+        <entry key="../../../../../layout/compose-model-1620506090849.xml" value="0.23514851485148514" />
         <entry key="app/src/main/res/drawable-v24/ic_launcher_foreground.xml" value="0.2898148148148148" />
         <entry key="app/src/main/res/drawable/ic_baseline_local_library_24.xml" value="0.25462962962962965" />
         <entry key="app/src/main/res/drawable/ic_google.xml" value="0.2962962962962963" />
diff --git a/app/src/main/java/com/pixelized/biblib/ui/composable/screen/MainScreenComposable.kt b/app/src/main/java/com/pixelized/biblib/ui/composable/screen/MainScreenComposable.kt
index 197b5be..dca3b75 100644
--- a/app/src/main/java/com/pixelized/biblib/ui/composable/screen/MainScreenComposable.kt
+++ b/app/src/main/java/com/pixelized/biblib/ui/composable/screen/MainScreenComposable.kt
@@ -1,13 +1,11 @@
 package com.pixelized.biblib.ui.composable.screen
 
-import androidx.compose.animation.Crossfade
+import androidx.compose.animation.*
 import androidx.compose.material.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.sharp.ArrowBack
 import androidx.compose.material.icons.sharp.LocalLibrary
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.getValue
+import androidx.compose.runtime.*
 import androidx.compose.runtime.livedata.observeAsState
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
@@ -44,6 +42,7 @@ fun MainScreenComposablePreview() {
     }
 }
 
+@OptIn(ExperimentalAnimationApi::class)
 @Composable
 fun MainScreenComposable(
     navigation: INavigation = viewModel<NavigationViewModel>()
@@ -57,11 +56,24 @@ fun MainScreenComposable(
     Scaffold(
         topBar = { ToolbarComposable(navigation) },
     ) {
-        Crossfade(targetState = page) {
-            when (it) {
-                is Page.HomePage -> HomePageComposable(navigation)
-                is Page.Detail -> DetailPageComposable(it.book)
-            }
+        AnimatedVisibility(
+            visible = page is Page.HomePage,
+            initiallyVisible = true,
+            enter = slideInHorizontally(initialOffsetX = { width -> -width }),
+            exit = slideOutHorizontally(targetOffsetX = { width -> -width }),
+        ) {
+            HomePageComposable(navigation)
+        }
+        AnimatedVisibility(
+            visible = page is Page.Detail,
+            initiallyVisible = false,
+            enter = slideInHorizontally(initialOffsetX = { width -> width }),
+            exit = slideOutHorizontally(targetOffsetX = { width -> width }),
+        ) {
+            // small trick to display the detail page during animation exit.
+            var currentPage by remember { mutableStateOf<Page.Detail?>(null) }
+            currentPage = page as? Page.Detail ?: currentPage
+            currentPage?.let { DetailPageComposable(it.book) }
         }
     }
 }