diff --git a/app/build.gradle.kts b/app/build.gradle.kts
index ddf8687..ab8eaea 100644
--- a/app/build.gradle.kts
+++ b/app/build.gradle.kts
@@ -104,6 +104,7 @@ dependencies {
     implementation("androidx.core:core-ktx:1.13.1")
     implementation("androidx.activity:activity-compose:1.9.2")
     implementation(platform("androidx.compose:compose-bom:2024.09.01"))
+    implementation("androidx.compose.material3:material3:1.3.1")
     implementation("androidx.compose.material:material")
     implementation("androidx.compose.material:material-icons-extended")
     implementation("androidx.compose.ui:ui")
diff --git a/app/src/main/java/org/fcitx/fcitx5/android/updater/MainActivity.kt b/app/src/main/java/org/fcitx/fcitx5/android/updater/MainActivity.kt
index cd2709f..ec459bd 100644
--- a/app/src/main/java/org/fcitx/fcitx5/android/updater/MainActivity.kt
+++ b/app/src/main/java/org/fcitx/fcitx5/android/updater/MainActivity.kt
@@ -5,14 +5,12 @@ import android.os.Bundle
 import android.widget.Toast
 import androidx.activity.ComponentActivity
 import androidx.activity.SystemBarStyle
-import androidx.activity.compose.BackHandler
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
 import androidx.activity.result.ActivityResultLauncher
 import androidx.activity.result.contract.ActivityResultContracts.CreateDocument
 import androidx.activity.result.contract.ActivityResultContracts.StartActivityForResult
 import androidx.activity.viewModels
-import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -27,24 +25,11 @@ import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.statusBars
 import androidx.compose.foundation.layout.windowInsetsBottomHeight
 import androidx.compose.foundation.layout.windowInsetsPadding
-import androidx.compose.foundation.layout.windowInsetsTopHeight
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.AppBarDefaults
-import androidx.compose.material.CircularProgressIndicator
-import androidx.compose.material.DrawerDefaults
 import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material.Icon
-import androidx.compose.material.IconButton
-import androidx.compose.material.ListItem
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Scaffold
-import androidx.compose.material.Surface
-import androidx.compose.material.Text
-import androidx.compose.material.TopAppBar
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.LibraryBooks
 import androidx.compose.material.icons.filled.Book
@@ -52,11 +37,25 @@ import androidx.compose.material.icons.filled.Extension
 import androidx.compose.material.icons.filled.Keyboard
 import androidx.compose.material.icons.filled.Menu
 import androidx.compose.material.icons.filled.SystemUpdate
-import androidx.compose.material.primarySurface
 import androidx.compose.material.pullrefresh.PullRefreshIndicator
 import androidx.compose.material.pullrefresh.pullRefresh
 import androidx.compose.material.pullrefresh.rememberPullRefreshState
-import androidx.compose.material.rememberScaffoldState
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.DrawerDefaults
+import androidx.compose.material3.DrawerValue
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ModalDrawerSheet
+import androidx.compose.material3.ModalNavigationDrawer
+import androidx.compose.material3.NavigationDrawerItem
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.material3.rememberDrawerState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.LaunchedEffect
@@ -66,7 +65,6 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.StrokeCap
 import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.res.painterResource
@@ -74,6 +72,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.lifecycleScope
+import androidx.navigation.NavGraph.Companion.findStartDestination
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
@@ -128,7 +127,7 @@ class MainActivity : ComponentActivity() {
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
-        enableEdgeToEdge(statusBarStyle = SystemBarStyle.dark(0))
+        enableEdgeToEdge()
         intentLauncher = registerForActivityResult(StartActivityForResult()) {
             viewModel.versions.value.forEach {
                 it.value.refreshIfInstalledChanged()
@@ -177,7 +176,8 @@ class MainActivity : ComponentActivity() {
     }
 }
 
-@OptIn(ExperimentalMaterialApi::class)
+
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun MainScreen(
     viewModels: Map<String, VersionViewModel>,
@@ -185,84 +185,97 @@ fun MainScreen(
 ) {
     val navController = rememberNavController()
     val navBackStackEntry by navController.currentBackStackEntryAsState()
-    val scaffoldState = rememberScaffoldState()
     val scope = rememberCoroutineScope()
-    val scrimColor = Color.Black.copy(DrawerDefaults.ScrimOpacity)
-    Scaffold(
-        scaffoldState = scaffoldState,
-        modifier = Modifier
-            .windowInsetsPadding(WindowInsets.navigationBars.only(WindowInsetsSides.Horizontal)),
-        topBar = {
-            TopAppBar(
-                title = { Text(stringResource(R.string.app_name)) },
-                backgroundColor = MaterialTheme.colors.primarySurface,
-                windowInsets = AppBarDefaults.topAppBarWindowInsets,
-                navigationIcon = {
-                    IconButton(onClick = { scope.launch { scaffoldState.drawerState.open() } }) {
-                        Icon(imageVector = Icons.Default.Menu, contentDescription = null)
+    val scrimColor = DrawerDefaults.scrimColor
+    val drawerState = rememberDrawerState(DrawerValue.Closed)
+
+    ModalNavigationDrawer(
+        drawerState = drawerState,
+        drawerContent = {
+            ModalDrawerSheet(
+                content = {
+                    Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
+                        viewModels.forEach { (name, _) ->
+                            val selected = navBackStackEntry?.destination?.route == name
+                            val color =
+                                if (selected) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.onSurface
+                            val icon = when {
+                                name == "fcitx5-android" -> Icons.Default.Keyboard
+                                name == "fcitx5-android-updater" -> Icons.Default.SystemUpdate
+                                name.startsWith("pinyin-") -> Icons.AutoMirrored.Filled.LibraryBooks
+                                name.startsWith("tables-") -> Icons.Default.Book
+                                else -> Icons.Default.Extension
+                            }
+                            NavigationDrawerItem(
+                                modifier = Modifier
+                                    .clickable {
+                                        scope.launch {
+                                            drawerState.close()
+                                        }
+                                        navController.navigate(name) {
+                                            popUpTo(0)
+                                        }
+                                    },
+
+                                icon = {
+                                    Icon(
+                                        icon,
+                                        contentDescription = "Navigate to $name",
+                                        tint = color
+                                    )
+                                },
+                                label = {
+                                    Text(
+                                        text = name.removePrefix("fcitx5-android-"),
+                                        color = color,
+                                        fontWeight = FontWeight.SemiBold,
+                                    )
+                                },
+                                selected = selected,
+                                onClick = {
+                                    scope.launch { drawerState.close() }
+                                    navController.navigate(name) {
+                                        popUpTo(navController.graph.findStartDestination().id) {
+                                            saveState = true
+                                        }
+                                        launchSingleTop = true
+                                        restoreState = true
+                                    }
+                                    // clear navigation stack before navigation
+                                }
+                            )
+                        }
                     }
                 }
+
             )
         },
-        drawerScrimColor = scrimColor,
-        drawerContent = {
-            Box {
-                Box(
-                    modifier = Modifier
-                        .align(Alignment.TopCenter)
-                        .fillMaxWidth()
-                        .windowInsetsTopHeight(WindowInsets.statusBars)
-                        .background(scrimColor)
-                )
-                Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
-                    Spacer(Modifier.windowInsetsTopHeight(WindowInsets.statusBars))
-                    viewModels.forEach { (name, _) ->
-                        val selected = navBackStackEntry?.destination?.route == name
-                        val color =
-                            if (selected) MaterialTheme.colors.primary else MaterialTheme.colors.onSurface
-                        val icon = when {
-                            name == "fcitx5-android" -> Icons.Default.Keyboard
-                            name == "fcitx5-android-updater" -> Icons.Default.SystemUpdate
-                            name.startsWith("pinyin-") -> Icons.AutoMirrored.Filled.LibraryBooks
-                            name.startsWith("tables-") -> Icons.Default.Book
-                            else -> Icons.Default.Extension
-                        }
-                        ListItem(
-                            modifier = Modifier.clickable {
-                                scope.launch {
-                                    scaffoldState.drawerState.close()
-                                }
-                                navController.navigate(name) {
-                                    // clear navigation stack before navigation
-                                    popUpTo(0)
-                                }
-                            },
-                            icon = { Icon(icon, contentDescription = null, tint = color) },
-                            text = {
-                                Text(
-                                    text = name.removePrefix("fcitx5-android-"),
-                                    color = color,
-                                    fontWeight = FontWeight.SemiBold,
+        scrimColor = scrimColor,
+        gesturesEnabled = true,
+        content = {
+            Scaffold(
+                topBar = {
+                    TopAppBar(
+                        title = { Text(stringResource(R.string.app_name)) },
+                        windowInsets = TopAppBarDefaults.windowInsets,
+                        navigationIcon = {
+                            IconButton(onClick = { scope.launch { drawerState.open() } }) {
+                                Icon(
+                                    imageVector = Icons.Default.Menu,
+                                    contentDescription = null
                                 )
                             }
-                        )
-                    }
-                    Spacer(
-                        Modifier
-                            .padding(bottom = 16.dp)
-                            .windowInsetsBottomHeight(WindowInsets.navigationBars)
+                        }
+
                     )
+                },
+                content = { paddingValues ->
+                    content(paddingValues, navController, viewModels)
                 }
-            }
-        }
-    ) { paddingValues ->
-        content(paddingValues, navController, viewModels)
-    }
-    BackHandler(enabled = scaffoldState.drawerState.isOpen) {
-        scope.launch {
-            scaffoldState.drawerState.close()
+
+            )
         }
-    }
+    )
 }
 
 @Composable
@@ -299,7 +312,8 @@ fun NavScreen(
     }
 }
 
-val LocalVersionViewModel = compositionLocalOf<VersionViewModel> { error("No view model") }
+val LocalVersionViewModel =
+    compositionLocalOf<VersionViewModel> { error("No view model") }
 
 @Composable
 fun versionViewModel() = LocalVersionViewModel.current
@@ -314,7 +328,8 @@ fun VersionScreen(viewModel: VersionViewModel) {
             }
         }
         val refreshing by viewModel.isRefreshing.collectAsState()
-        val pullRefreshState = rememberPullRefreshState(refreshing, { viewModel.refresh() })
+        val pullRefreshState =
+            rememberPullRefreshState(refreshing, { viewModel.refresh() })
         val urlHandler = LocalUriHandler.current
         Box(
             Modifier
@@ -328,23 +343,26 @@ fun VersionScreen(viewModel: VersionViewModel) {
                         .clickable {
                             urlHandler.openUri(viewModel.url)
                         },
-                    elevation = 2.dp
+                    shadowElevation = 2.dp
                 ) {
                     Row(
-                        modifier = Modifier.padding(horizontal = 16.dp, vertical = 14.dp),
+                        modifier = Modifier.padding(
+                            horizontal = 16.dp,
+                            vertical = 14.dp
+                        ),
                         verticalAlignment = Alignment.CenterVertically
                     ) {
                         Icon(
                             painter = painterResource(R.drawable.github_mark),
                             contentDescription = "GitHub Logo",
                             modifier = Modifier.size(18.dp),
-                            tint = MaterialTheme.colors.onSurface
+                            tint = MaterialTheme.colorScheme.onSurface
                         )
                         Text(
                             text = viewModel.name,
                             modifier = Modifier.padding(start = 10.dp),
                             fontWeight = FontWeight.SemiBold,
-                            style = MaterialTheme.typography.body1
+                            style = MaterialTheme.typography.bodyLarge
                         )
                     }
                 }
@@ -362,7 +380,11 @@ fun VersionScreen(viewModel: VersionViewModel) {
                         .windowInsetsBottomHeight(WindowInsets.navigationBars)
                 )
             }
-            PullRefreshIndicator(refreshing, pullRefreshState, Modifier.align(Alignment.TopCenter))
+            PullRefreshIndicator(
+                refreshing,
+                pullRefreshState,
+                Modifier.align(Alignment.TopCenter)
+            )
         }
     }
 }
diff --git a/app/src/main/java/org/fcitx/fcitx5/android/updater/ui/components/VersionCard.kt b/app/src/main/java/org/fcitx/fcitx5/android/updater/ui/components/VersionCard.kt
index 7e8ae77..479fdbd 100644
--- a/app/src/main/java/org/fcitx/fcitx5/android/updater/ui/components/VersionCard.kt
+++ b/app/src/main/java/org/fcitx/fcitx5/android/updater/ui/components/VersionCard.kt
@@ -6,8 +6,8 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.ContentAlpha
 import androidx.compose.material.LocalContentAlpha
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Text
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Modifier
@@ -28,7 +28,7 @@ fun VersionCard(version: VersionUi) {
             val (title, size, menu, action) = createRefs()
             Text(
                 text = version.versionName,
-                style = MaterialTheme.typography.body1,
+                style = MaterialTheme.typography.bodyLarge,
                 modifier = Modifier.constrainAs(title) {
                     top.linkTo(parent.top)
                     start.linkTo(parent.start)
@@ -37,7 +37,7 @@ fun VersionCard(version: VersionUi) {
             CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
                 Text(
                     text = String.format(Locale.ROOT, "%.2f MiB", version.size),
-                    style = MaterialTheme.typography.body2,
+                    style = MaterialTheme.typography.bodyMedium,
                     modifier = Modifier
                         .padding(bottom = 8.dp)
                         .constrainAs(size) {
diff --git a/app/src/main/java/org/fcitx/fcitx5/android/updater/ui/components/VersionCardAction.kt b/app/src/main/java/org/fcitx/fcitx5/android/updater/ui/components/VersionCardAction.kt
index 521f31f..3464d2e 100644
--- a/app/src/main/java/org/fcitx/fcitx5/android/updater/ui/components/VersionCardAction.kt
+++ b/app/src/main/java/org/fcitx/fcitx5/android/updater/ui/components/VersionCardAction.kt
@@ -1,12 +1,13 @@
 package org.fcitx.fcitx5.android.updater.ui.components
 
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.material.ContentAlpha
-import androidx.compose.material.LinearProgressIndicator
+import androidx.compose.material3.LinearProgressIndicator
 import androidx.compose.material.LocalContentAlpha
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Text
-import androidx.compose.material.TextButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.collectAsState
@@ -70,7 +71,11 @@ fun VersionCardActionLocal(
                 top.linkTo(parent.top)
                 end.linkTo(parent.end)
             },
-            content = { Text(stringResource(R.string.install)) }
+            content = {
+                Column {
+                    Text(stringResource(R.string.install)) }
+                }
+
         )
     }
 }
@@ -126,10 +131,13 @@ fun VersionCardActionRemote(
                         text = "${(progress * 100).toInt()}%",
                         modifier = progressTextModifier,
                         textAlign = TextAlign.End,
-                        style = MaterialTheme.typography.body2
+                        style = MaterialTheme.typography.bodyMedium
                     )
                 }
-                LinearProgressIndicator(progress = progress, modifier = progressBarModifier)
+                LinearProgressIndicator(
+                    progress = { progress },
+                    modifier = progressBarModifier,
+                )
             }
             is RemoteVersionUiState.Idle -> {
                 val operable = (state as RemoteVersionUiState.Idle).operable
@@ -152,10 +160,13 @@ fun VersionCardActionRemote(
                         text = "${(progress * 100).toInt()}%",
                         modifier = progressTextModifier,
                         textAlign = TextAlign.End,
-                        style = MaterialTheme.typography.body2
+                        style = MaterialTheme.typography.bodyMedium
                     )
                 }
-                LinearProgressIndicator(progress = progress, modifier = progressBarModifier)
+                LinearProgressIndicator(
+                    progress = { progress },
+                    modifier = progressBarModifier,
+                )
             }
             RemoteVersionUiState.Pending -> {
                 TextButton(
@@ -166,7 +177,7 @@ fun VersionCardActionRemote(
                 Text(
                     text = "",
                     modifier = progressTextModifier,
-                    style = MaterialTheme.typography.body2
+                    style = MaterialTheme.typography.bodyMedium
                 )
                 LinearProgressIndicator(modifier = progressBarModifier)
             }
@@ -179,7 +190,7 @@ fun VersionCardActionRemote(
                 Text(
                     text = "",
                     modifier = progressTextModifier,
-                    style = MaterialTheme.typography.body2
+                    style = MaterialTheme.typography.bodyMedium
                 )
                 LinearProgressIndicator(modifier = progressBarModifier)
             }
diff --git a/app/src/main/java/org/fcitx/fcitx5/android/updater/ui/components/VersionCardMenu.kt b/app/src/main/java/org/fcitx/fcitx5/android/updater/ui/components/VersionCardMenu.kt
index f096127..7fb8886 100644
--- a/app/src/main/java/org/fcitx/fcitx5/android/updater/ui/components/VersionCardMenu.kt
+++ b/app/src/main/java/org/fcitx/fcitx5/android/updater/ui/components/VersionCardMenu.kt
@@ -5,12 +5,12 @@ import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.size
 import androidx.compose.material.ContentAlpha
-import androidx.compose.material.DropdownMenu
-import androidx.compose.material.DropdownMenuItem
-import androidx.compose.material.Icon
-import androidx.compose.material.IconButton
+import androidx.compose.material3.DropdownMenu
+import androidx.compose.material3.DropdownMenuItem
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 import androidx.compose.material.LocalContentAlpha
-import androidx.compose.material.Text
+import androidx.compose.material3.Text
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.MoreVert
 import androidx.compose.runtime.Composable
@@ -83,10 +83,9 @@ fun VersionCardMenuInstalled(version: VersionUi.Installed, dismissMenu: () -> Un
             onClick = {
                 dismissMenu()
                 viewModel.exportInstalled()
-            }
-        ) {
-            Text(stringResource(R.string.export))
-        }
+            },
+            text = { Text(stringResource(R.string.export)) }
+        )
     }
 }
 
@@ -97,18 +96,20 @@ fun VersionCardMenuLocal(version: VersionUi.Local, dismissMenu: () -> Unit) {
         onClick = {
             dismissMenu()
             viewModel.share(version)
+        },
+        text = {
+            Text(stringResource(R.string.share))
         }
-    ) {
-        Text(stringResource(R.string.share))
-    }
+    )
     DropdownMenuItem(
         onClick = {
             dismissMenu()
             viewModel.export(version)
+        },
+        text =  {
+            Text(stringResource(R.string.export))
         }
-    ) {
-        Text(stringResource(R.string.export))
-    }
+    )
     val remoteUrl by remember { mutableStateOf(viewModel.getRemoteUrl(version)) }
     remoteUrl?.let {
         val clipboardManager = LocalClipboardManager.current
@@ -116,19 +117,21 @@ fun VersionCardMenuLocal(version: VersionUi.Local, dismissMenu: () -> Unit) {
             onClick = {
                 dismissMenu()
                 clipboardManager.setText(AnnotatedString(it))
+            },
+            text = {
+                Text(stringResource(R.string.copy_url))
             }
-        ) {
-            Text(stringResource(R.string.copy_url))
-        }
+        )
     }
     DropdownMenuItem(
         onClick = {
             dismissMenu()
             viewModel.delete(version)
+        },
+        text = {
+            Text(stringResource(R.string.delete_apk))
         }
-    ) {
-        Text(stringResource(R.string.delete_apk))
-    }
+    )
 }
 
 @Composable
@@ -143,10 +146,11 @@ fun VersionCardMenuRemote(version: VersionUi.Remote, dismissMenu: () -> Unit) {
                 onClick = {
                     dismissMenu()
                     viewModel.cancelDownload(version)
+                },
+                text = {
+                    Text(stringResource(R.string.cancel))
                 }
-            ) {
-                Text(stringResource(R.string.cancel))
-            }
+            )
         }
         is RemoteVersionUiState.Idle -> {
         }
@@ -155,10 +159,11 @@ fun VersionCardMenuRemote(version: VersionUi.Remote, dismissMenu: () -> Unit) {
                 onClick = {
                     dismissMenu()
                     viewModel.cancelDownload(version)
+                },
+                text = {
+                    Text(stringResource(R.string.cancel))
                 }
-            ) {
-                Text(stringResource(R.string.cancel))
-            }
+            )
         }
         RemoteVersionUiState.Pending -> {
         }
@@ -170,8 +175,9 @@ fun VersionCardMenuRemote(version: VersionUi.Remote, dismissMenu: () -> Unit) {
         onClick = {
             dismissMenu()
             clipboardManager.setText(AnnotatedString(version.downloadUrl))
+        },
+        text = {
+            Text(stringResource(R.string.copy_url))
         }
-    ) {
-        Text(stringResource(R.string.copy_url))
-    }
+    )
 }
diff --git a/app/src/main/java/org/fcitx/fcitx5/android/updater/ui/components/Versions.kt b/app/src/main/java/org/fcitx/fcitx5/android/updater/ui/components/Versions.kt
index 19d1d5e..d5a7470 100644
--- a/app/src/main/java/org/fcitx/fcitx5/android/updater/ui/components/Versions.kt
+++ b/app/src/main/java/org/fcitx/fcitx5/android/updater/ui/components/Versions.kt
@@ -2,10 +2,10 @@ package org.fcitx.fcitx5.android.updater.ui.components
 
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material.Divider
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Surface
-import androidx.compose.material.Text
+import androidx.compose.material3.Divider
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
@@ -17,12 +17,12 @@ fun Versions(name: String, versions: List<VersionUi>) {
         Text(
             text = name,
             modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp),
-            style = MaterialTheme.typography.h6
+            style = MaterialTheme.typography.titleLarge
         )
-        Surface(elevation = 2.dp) {
+        Surface( shadowElevation = 2.dp) {
             Column {
                 val last = versions.size - 1
-                val dividerColor = MaterialTheme.colors.onSurface.copy(alpha = 0.06f)
+                val dividerColor = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.06f)
                 versions.forEachIndexed { index, version ->
                     VersionCard(version)
                     if (index != last) Divider(color = dividerColor)
diff --git a/app/src/main/java/org/fcitx/fcitx5/android/updater/ui/theme/Theme.kt b/app/src/main/java/org/fcitx/fcitx5/android/updater/ui/theme/Theme.kt
index 4565f42..2e69f00 100644
--- a/app/src/main/java/org/fcitx/fcitx5/android/updater/ui/theme/Theme.kt
+++ b/app/src/main/java/org/fcitx/fcitx5/android/updater/ui/theme/Theme.kt
@@ -1,40 +1,44 @@
 package org.fcitx.fcitx5.android.updater.ui.theme
 
+import android.os.Build
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Shapes
-import androidx.compose.material.Typography
-import androidx.compose.material.darkColors
-import androidx.compose.material.lightColors
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Shapes
+import androidx.compose.material3.Typography
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.dynamicDarkColorScheme
+import androidx.compose.material3.dynamicLightColorScheme
+import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 
-private val DarkColors = darkColors(
+private val DarkColors = darkColorScheme(
     primary = Purple200,
-    primaryVariant = Purple700,
+    //primaryVariant = Purple700,
     secondary = Teal200
 )
 
-private val LightColors = lightColors(
+private val LightColors = lightColorScheme(
     primary = Purple500,
-    primaryVariant = Purple700,
+    // primaryVariant = Purple700,
     secondary = Teal200
 )
 
 val DenseTypography = Typography(
-    body1 = TextStyle(
+    bodyLarge = TextStyle(
         fontSize = 16.sp,
         fontWeight = FontWeight.Normal
     ),
-    body2 = TextStyle(
+    bodyMedium = TextStyle(
         fontSize = 14.sp,
         fontWeight = FontWeight.Normal
     ),
-    button = TextStyle(
+    labelLarge = TextStyle(
         fontSize = 14.sp,
         fontWeight = FontWeight.Medium,
         letterSpacing = 0.sp
@@ -52,8 +56,17 @@ fun Fcitx5ForAndroidUpdaterTheme(
     darkTheme: Boolean = isSystemInDarkTheme(),
     content: @Composable () -> Unit
 ) {
+    val context = LocalContext.current
+    val colors = when {
+        (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) -> {
+            if (darkTheme) dynamicDarkColorScheme(context)
+            else dynamicLightColorScheme(context)
+        }
+        darkTheme -> DarkColors
+        else -> LightColors
+    }
     MaterialTheme(
-        colors = if (darkTheme) DarkColors else LightColors,
+        colorScheme = colors,
         typography = DenseTypography,
         shapes = SharpShapes,
         content = content