diff --git a/app/src/main/java/com/pixelized/biblib/ui/composable/pages/DetailPage.kt b/app/src/main/java/com/pixelized/biblib/ui/composable/pages/DetailPage.kt
index 30dd30a..3d17b17 100644
--- a/app/src/main/java/com/pixelized/biblib/ui/composable/pages/DetailPage.kt
+++ b/app/src/main/java/com/pixelized/biblib/ui/composable/pages/DetailPage.kt
@@ -1,11 +1,6 @@
 package com.pixelized.biblib.ui.composable.pages
 
-import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.ExperimentalAnimationApi
-import androidx.compose.animation.core.MutableTransitionState
-import androidx.compose.animation.core.tween
-import androidx.compose.animation.slideInVertically
-import androidx.compose.animation.slideOutVertically
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
@@ -20,7 +15,7 @@ import androidx.compose.material.icons.filled.Send
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
-import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -40,7 +35,6 @@ import com.pixelized.biblib.ui.composable.common.HtmlText
 import com.pixelized.biblib.ui.composable.common.Image
 import com.pixelized.biblib.ui.data.BookUio
 import com.pixelized.biblib.ui.data.MailUio
-import com.pixelized.biblib.ui.theme.Animation
 import com.pixelized.biblib.ui.theme.BibLibTheme
 import com.pixelized.biblib.ui.theme.Teal200
 import com.pixelized.biblib.ui.viewmodel.book.BooksViewModel
@@ -50,10 +44,11 @@ import com.pixelized.biblib.ui.viewmodel.user.UserViewModel
 import com.pixelized.biblib.utils.BitmapCache
 import com.pixelized.biblib.utils.injection.ServiceLocator
 import com.pixelized.biblib.utils.mock.BookMock
+import kotlinx.coroutines.launch
 
 
 @Composable
-@OptIn(ExperimentalAnimationApi::class)
+@OptIn(ExperimentalMaterialApi::class, ExperimentalAnimationApi::class)
 fun DetailPage(
     booksViewModel: IBooksViewModel = viewModel<BooksViewModel>(),
     userViewModel: IUserViewModel = viewModel<UserViewModel>(),
@@ -65,46 +60,41 @@ fun DetailPage(
             .fillMaxHeight(),
         elevation = 4.dp
     ) {
-        val bottomSheetVisibility = remember { MutableTransitionState(false) }
+        val coroutineScope = rememberCoroutineScope()
+        val sheetState = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)
 
         val book by booksViewModel.getBookDetail(bookId).observeAsState()
         val user by userViewModel.user.observeAsState()
 
-        book?.let {
-            DetailPage(
-                book = it,
-                onSendClick = {
-                    val emailCount = user?.amazonEmails?.size ?: 0
-                    when {
-                        emailCount == 1 -> {
-                            val email: String? = user?.amazonEmails?.firstOrNull()
-                            email?.let { mail -> booksViewModel.send(id = bookId, mail = mail) }
-                        }
-                        emailCount > 1 -> {
-                            bottomSheetVisibility.targetState = true
-                        }
-                        else -> Unit // TODO warning popup, no email.
-                    }
-                }
-            )
-        }
-
-        AnimatedVisibility(
-            visibleState = bottomSheetVisibility,
-            enter = slideInVertically(
-                animationSpec = tween(Animation.MEDIUM_DURATION),
-                initialOffsetY = { it },
-            ),
-            exit = slideOutVertically(
-                animationSpec = tween(Animation.MEDIUM_DURATION),
-                targetOffsetY = { it },
-            ),
+        ModalBottomSheetLayout(
+            sheetState = sheetState,
+            sheetContent = {
+                SendMailBottomSheet(
+                    user?.amazonEmails?.map { MailUio(it) } ?: listOf(),
+                    onItemClick = {
+                        booksViewModel.send(id = bookId, mail = it.mail)
+                    },
+                )
+            },
         ) {
-            SendMailBottomSheet(
-                user?.amazonEmails?.map { MailUio(it) } ?: listOf(),
-                onItemClick = { booksViewModel.send(id = bookId, mail = it.mail) },
-                onOutsideClick = { bottomSheetVisibility.targetState = false }
-            )
+            book?.let {
+                DetailPage(
+                    book = it,
+                    onSendClick = {
+                        val emailCount = user?.amazonEmails?.size ?: 0
+                        when {
+                            emailCount == 1 -> {
+                                val email: String? = user?.amazonEmails?.firstOrNull()
+                                email?.let { mail -> booksViewModel.send(id = bookId, mail = mail) }
+                            }
+                            emailCount > 1 -> {
+                                coroutineScope.launch { sheetState.show() }
+                            }
+                            else -> Unit // TODO warning popup, no email.
+                        }
+                    }
+                )
+            }
         }
     }
 }
@@ -250,34 +240,27 @@ private fun SendMailBottomSheet(
         MailUio("R.Daneel.Olivaw.Kindle@gmailcom"),
     ),
     onItemClick: (MailUio) -> Unit = {},
-    onOutsideClick: () -> Unit = {},
 ) {
     val typography = MaterialTheme.typography
 
-    Box(
-        contentAlignment = Alignment.BottomCenter,
-        modifier = Modifier
-            .fillMaxWidth()
-            .fillMaxHeight()
-            .clickable { onOutsideClick() },
+    Column(
+        modifier = Modifier.fillMaxWidth(),
     ) {
-        Column(
-            modifier = Modifier.background(MaterialTheme.colors.background)
+        Text(
+            modifier = Modifier
+                .padding(horizontal = 16.dp)
+                .padding(top = 8.dp),
+            style = typography.caption,
+            text = "Send this eBook to:",
+        )
+        LazyColumn(
+            modifier = Modifier.fillMaxWidth()
         ) {
-            Text(
-                modifier = Modifier.padding(horizontal = 16.dp).padding(top = 8.dp),
-                style = typography.caption,
-                text = "Send this EBook to:",
-            )
-            LazyColumn(
-                modifier = Modifier.fillMaxWidth()
-            ) {
-                items(data.size) { index: Int ->
-                    SendMailItem(uio = data[index], onClick = onItemClick)
-                }
+            items(data.size) { index: Int ->
+                SendMailItem(uio = data[index], onClick = onItemClick)
             }
-            Spacer(modifier = Modifier.height(16.dp))
         }
+        Spacer(modifier = Modifier.height(16.dp))
     }
 }
 
diff --git a/app/src/main/java/com/pixelized/biblib/ui/viewmodel/book/BooksViewModel.kt b/app/src/main/java/com/pixelized/biblib/ui/viewmodel/book/BooksViewModel.kt
index 533218e..e1c9686 100644
--- a/app/src/main/java/com/pixelized/biblib/ui/viewmodel/book/BooksViewModel.kt
+++ b/app/src/main/java/com/pixelized/biblib/ui/viewmodel/book/BooksViewModel.kt
@@ -84,7 +84,9 @@ class BooksViewModel : ViewModel(), IBooksViewModel {
     }
 
     override fun send(id: Int, mail: String) {
-        // TODO()
+        viewModelScope.launch(Dispatchers.IO) {
+            client.service.send(bookId = id, mail = mail)
+        }
     }
 
     private suspend fun loadNewBooks(): Boolean {