diff --git a/app/build.gradle b/app/build.gradle
index dd9f2de053..cecf14c2b1 100644
--- a/app/build.gradle
+++ b/app/build.gradle
@@ -99,6 +99,8 @@ dependencies {
     implementation "androidx.constraintlayout:constraintlayout:2.1.2"
     implementation "androidx.viewpager2:viewpager2:1.0.0"
     implementation "androidx.fragment:fragment-ktx:1.4.0"
+    implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
+    implementation "androidx.navigation:navigation-ui-ktx:$nav_version"
     implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk8:$kotlin_version"
     implementation "org.jetbrains.kotlinx:kotlinx-coroutines-core:$kotlin_coroutines_version"
     implementation "org.jetbrains.kotlinx:kotlinx-coroutines-android:$kotlin_coroutines_version"
diff --git a/app/src/main/java/com/osfans/trime/ui/fragments/AboutFragment.kt b/app/src/main/java/com/osfans/trime/ui/fragments/AboutFragment.kt
new file mode 100644
index 0000000000..8be2fa3ecf
--- /dev/null
+++ b/app/src/main/java/com/osfans/trime/ui/fragments/AboutFragment.kt
@@ -0,0 +1,77 @@
+package com.osfans.trime.ui.fragments
+
+import android.content.ClipData
+import android.content.ClipboardManager
+import android.content.Context
+import android.os.Bundle
+import android.webkit.WebView
+import androidx.appcompat.app.AlertDialog
+import androidx.fragment.app.activityViewModels
+import androidx.preference.Preference
+import androidx.preference.PreferenceFragmentCompat
+import androidx.preference.get
+import com.blankj.utilcode.util.ToastUtils
+import com.osfans.trime.BuildConfig
+import com.osfans.trime.R
+import com.osfans.trime.core.Rime
+import com.osfans.trime.ui.main.MainViewModel
+import com.osfans.trime.util.AppVersionUtils.writeLibraryVersionToSummary
+
+class AboutFragment : PreferenceFragmentCompat() {
+    private val viewModel: MainViewModel by activityViewModels()
+
+    override fun onCreatePreferences(savedInstanceState: Bundle?, rootKey: String?) {
+        setPreferencesFromResource(R.xml.about_preference, rootKey)
+        with(preferenceScreen) {
+            get<Preference>("about__changelog")
+                ?.writeLibraryVersionToSummary(BuildConfig.BUILD_VERSION)
+            get<Preference>("about__buildinfo")?.apply {
+                writeLibraryVersionToSummary(BuildConfig.BUILD_INFO)
+                setOnPreferenceClickListener {
+                    val cbm = context.getSystemService(Context.CLIPBOARD_SERVICE) as ClipboardManager
+                    val info = ClipData.newPlainText("BuildInfo", BuildConfig.BUILD_INFO)
+                    cbm.setPrimaryClip(info)
+                    ToastUtils.showLong(R.string.copy_done)
+                    true
+                }
+            }
+            get<Preference>("about__librime_version")
+                ?.writeLibraryVersionToSummary(Rime.get_librime_version())
+            get<Preference>("about__opencc_version")
+                ?.writeLibraryVersionToSummary(Rime.get_opencc_version())
+            get<Preference>("pref_trime_custom_qq")
+                ?.hidden()
+            get<Preference>("about__licensing")?.setOnPreferenceClickListener {
+                val webView = WebView(requireContext())
+                webView.loadUrl("file:///android_asset/license/open_source_license.html")
+                AlertDialog.Builder(requireContext())
+                    .setTitle(R.string.about__licensing_title)
+                    .setView(webView)
+                    .setPositiveButton(android.R.string.ok, null)
+                    .show()
+                true
+            }
+            get<Preference>("about__used_libraries")?.setOnPreferenceClickListener {
+                val webView = WebView(requireContext())
+                webView.loadUrl("file:///android_asset/license/library_licenses.html")
+                AlertDialog.Builder(requireContext())
+                    .setTitle(R.string.about__used_library_dialog_title)
+                    .setView(webView)
+                    .setPositiveButton(android.R.string.ok, null)
+                    .show()
+                true
+            }
+        }
+    }
+
+    override fun onResume() {
+        super.onResume()
+        viewModel.setToolbarTitle(getString(R.string.pref_about))
+    }
+
+    private fun Preference.hidden() {
+        if (this.summary.isBlank() || this.intent.data.toString().isBlank()) {
+            this.isVisible = false
+        }
+    }
+}
diff --git a/app/src/main/java/com/osfans/trime/ui/fragments/ConfFragment.kt b/app/src/main/java/com/osfans/trime/ui/fragments/ConfFragment.kt
index 407347bf5e..6581d36c49 100644
--- a/app/src/main/java/com/osfans/trime/ui/fragments/ConfFragment.kt
+++ b/app/src/main/java/com/osfans/trime/ui/fragments/ConfFragment.kt
@@ -1,19 +1,20 @@
+@file:Suppress("DEPRECATION")
+
 package com.osfans.trime.ui.fragments
 
+import android.app.ProgressDialog
 import android.content.Context
 import android.os.Bundle
-import android.view.Menu
-import androidx.core.view.forEach
 import androidx.fragment.app.activityViewModels
 import androidx.preference.Preference
 import androidx.preference.PreferenceFragmentCompat
 import androidx.preference.SwitchPreferenceCompat
+import androidx.preference.get
 import com.osfans.trime.R
 import com.osfans.trime.data.AppPrefs
 import com.osfans.trime.ui.components.ResetAssetsDialog
 import com.osfans.trime.ui.main.MainViewModel
 import com.osfans.trime.util.RimeUtils
-import com.osfans.trime.util.createLoadingDialog
 import com.osfans.trime.util.formatDateTime
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.MainScope
@@ -22,42 +23,41 @@ import timber.log.Timber
 
 class ConfFragment : PreferenceFragmentCompat(), CoroutineScope by MainScope() {
 
-    private val viewModel : MainViewModel by activityViewModels()
+    private val viewModel: MainViewModel by activityViewModels()
     private val prefs get() = AppPrefs.defaultInstance()
 
     override fun onCreatePreferences(savedInstanceState: Bundle?, rootKey: String?) {
         addPreferencesFromResource(R.xml.conf_preference)
-    }
-
-    override fun onPreferenceTreeClick(preference: Preference?): Boolean {
-        return when (preference?.key) {
-            "conf__synchronize" -> {
-                val progressDialog = createLoadingDialog(requireContext(), R.string.sync_progress)
+        with(preferenceScreen) {
+            get<Preference>("conf_synchronize")?.setOnPreferenceClickListener {
+                val progress = ProgressDialog(context)
+                progress.setMessage(getString(R.string.sync_progress))
+                progress.setCancelable(false)
                 launch {
                     try {
                         RimeUtils.sync(requireContext())
                     } catch (ex: Exception) {
                         Timber.e(ex, "Sync Exception")
                     } finally {
-                        progressDialog.dismiss()
+                        progress.dismiss()
                     }
                 }
                 true
             }
-            "conf__synchronize_background" -> {
+            get<Preference>("conf__synchronize_background")?.setOnPreferenceClickListener {
                 setBackgroundSyncSummary(context)
                 true
             }
-            "conf__reset" -> {
-                ResetAssetsDialog(requireContext()).show()
+            get<Preference>("conf__reset")?.setOnPreferenceClickListener {
+                ResetAssetsDialog(context).show()
                 true
             }
-            else -> super.onPreferenceTreeClick(preference)
         }
     }
 
     override fun onResume() {
         super.onResume()
+        viewModel.setToolbarTitle(getString(R.string.pref_user_data))
         viewModel.disableTopOptionsMenu()
         setBackgroundSyncSummary(context)
     }
diff --git a/app/src/main/java/com/osfans/trime/ui/fragments/KeyboardFragment.kt b/app/src/main/java/com/osfans/trime/ui/fragments/KeyboardFragment.kt
index 57419aaeae..6c0b5e2c4a 100644
--- a/app/src/main/java/com/osfans/trime/ui/fragments/KeyboardFragment.kt
+++ b/app/src/main/java/com/osfans/trime/ui/fragments/KeyboardFragment.kt
@@ -2,8 +2,6 @@ package com.osfans.trime.ui.fragments
 
 import android.content.SharedPreferences
 import android.os.Bundle
-import android.view.Menu
-import androidx.core.view.forEach
 import androidx.fragment.app.activityViewModels
 import androidx.preference.Preference
 import androidx.preference.PreferenceFragmentCompat
@@ -17,7 +15,7 @@ import com.osfans.trime.ui.main.MainViewModel
 class KeyboardFragment :
     PreferenceFragmentCompat(),
     SharedPreferences.OnSharedPreferenceChangeListener {
-    private val viewModel : MainViewModel by activityViewModels()
+    private val viewModel: MainViewModel by activityViewModels()
     override fun onCreatePreferences(savedInstanceState: Bundle?, rootKey: String?) {
         addPreferencesFromResource(R.xml.keyboard_preference)
     }
@@ -57,6 +55,7 @@ class KeyboardFragment :
     }
     override fun onResume() {
         super.onResume()
+        viewModel.setToolbarTitle(getString(R.string.pref_keyboard))
         viewModel.disableTopOptionsMenu()
         preferenceScreen.sharedPreferences.registerOnSharedPreferenceChangeListener(this)
     }
diff --git a/app/src/main/java/com/osfans/trime/ui/fragments/LooksFragment.kt b/app/src/main/java/com/osfans/trime/ui/fragments/LooksFragment.kt
index 9cdb4cff28..07310930d5 100644
--- a/app/src/main/java/com/osfans/trime/ui/fragments/LooksFragment.kt
+++ b/app/src/main/java/com/osfans/trime/ui/fragments/LooksFragment.kt
@@ -1,39 +1,35 @@
 package com.osfans.trime.ui.fragments
 
 import android.os.Bundle
-import android.view.Menu
-import androidx.core.view.forEach
 import androidx.fragment.app.activityViewModels
 import androidx.preference.Preference
 import androidx.preference.PreferenceFragmentCompat
+import androidx.preference.get
 import com.osfans.trime.R
 import com.osfans.trime.ui.components.ColorPickerDialog
 import com.osfans.trime.ui.components.ThemePickerDialog
 import com.osfans.trime.ui.main.MainViewModel
 
 class LooksFragment : PreferenceFragmentCompat() {
-    private val viewModel : MainViewModel by activityViewModels()
+    private val viewModel: MainViewModel by activityViewModels()
 
     override fun onCreatePreferences(savedInstanceState: Bundle?, rootKey: String?) {
         addPreferencesFromResource(R.xml.looks_preference)
-    }
-
-    override fun onResume() {
-        super.onResume()
-        viewModel.disableTopOptionsMenu()
-    }
-
-    override fun onPreferenceTreeClick(preference: Preference?): Boolean {
-        return when (preference?.key) {
-            "looks__selected_theme" -> {
-                ThemePickerDialog(requireContext()).show()
+        with(preferenceScreen) {
+            get<Preference>("looks__selected_theme")?.setOnPreferenceClickListener {
+                ThemePickerDialog(context).show()
                 true
             }
-            "looks__selected_color" -> {
-                ColorPickerDialog(requireContext()).show()
+            get<Preference>("looks__selected_color")?.setOnPreferenceClickListener {
+                ColorPickerDialog(context).show()
                 true
             }
-            else -> super.onPreferenceTreeClick(preference)
         }
     }
+
+    override fun onResume() {
+        super.onResume()
+        viewModel.setToolbarTitle(getString(R.string.pref_theme_and_color))
+        viewModel.disableTopOptionsMenu()
+    }
 }
diff --git a/app/src/main/java/com/osfans/trime/ui/fragments/OtherFragment.kt b/app/src/main/java/com/osfans/trime/ui/fragments/OtherFragment.kt
index ccdcee40f3..c9b725426c 100644
--- a/app/src/main/java/com/osfans/trime/ui/fragments/OtherFragment.kt
+++ b/app/src/main/java/com/osfans/trime/ui/fragments/OtherFragment.kt
@@ -5,9 +5,7 @@ import android.content.Context
 import android.content.SharedPreferences
 import android.content.pm.PackageManager
 import android.os.Bundle
-import android.view.Menu
 import androidx.appcompat.app.AppCompatDelegate
-import androidx.core.view.forEach
 import androidx.fragment.app.activityViewModels
 import androidx.preference.ListPreference
 import androidx.preference.PreferenceFragmentCompat
@@ -20,7 +18,7 @@ import com.osfans.trime.ui.main.MainViewModel
 class OtherFragment :
     PreferenceFragmentCompat(),
     SharedPreferences.OnSharedPreferenceChangeListener {
-    private val viewModel : MainViewModel by activityViewModels()
+    private val viewModel: MainViewModel by activityViewModels()
     private val prefs get() = AppPrefs.defaultInstance()
     override fun onCreatePreferences(savedInstanceState: Bundle?, rootKey: String?) {
         addPreferencesFromResource(R.xml.other_preference)
@@ -67,6 +65,7 @@ class OtherFragment :
 
     override fun onResume() {
         super.onResume()
+        viewModel.setToolbarTitle(getString(R.string.pref_other))
         viewModel.disableTopOptionsMenu()
         preferenceScreen.sharedPreferences.registerOnSharedPreferenceChangeListener(this)
     }
diff --git a/app/src/main/java/com/osfans/trime/ui/fragments/PrefFragment.kt b/app/src/main/java/com/osfans/trime/ui/fragments/PrefFragment.kt
index ec0804a773..4ff8e17e9b 100644
--- a/app/src/main/java/com/osfans/trime/ui/fragments/PrefFragment.kt
+++ b/app/src/main/java/com/osfans/trime/ui/fragments/PrefFragment.kt
@@ -2,19 +2,21 @@ package com.osfans.trime.ui.fragments
 
 import android.os.Bundle
 import androidx.fragment.app.activityViewModels
+import androidx.navigation.fragment.findNavController
 import androidx.preference.Preference
-import androidx.preference.PreferenceCategory
 import androidx.preference.PreferenceFragmentCompat
+import androidx.preference.get
 import com.osfans.trime.R
 import com.osfans.trime.ui.components.SchemaPickerDialog
 import com.osfans.trime.ui.main.MainViewModel
 
 class PrefFragment : PreferenceFragmentCompat() {
 
-    private val viewModel : MainViewModel by activityViewModels()
+    private val viewModel: MainViewModel by activityViewModels()
 
     override fun onResume() {
         super.onResume()
+        viewModel.setToolbarTitle(getString(R.string.trime_app_name))
         viewModel.enableTopOptionsMenu()
     }
 
@@ -24,31 +26,32 @@ class PrefFragment : PreferenceFragmentCompat() {
     }
 
     override fun onCreatePreferences(savedInstanceState: Bundle?, rootKey: String?) {
-        val context = preferenceManager.context
         setPreferencesFromResource(R.xml.prefs, rootKey)
-        val systemCategory = PreferenceCategory(context).apply {
-            setTitle(R.string.system)
-            isIconSpaceReserved = false
-            order = 18
-        }
-        preferenceScreen.addPreference(systemCategory)
-        systemCategory.addPreference(
-            Preference(context).apply {
-                setTitle(R.string.settings__system_toolkit)
-                setIcon(R.drawable.ic_iconpark_toolkit_24)
-                fragment = "com.osfans.trime.ui.fragments.ToolkitFragment"
-                order = 19
+        with(preferenceScreen) {
+            get<Preference>("pref_schemas")?.setOnPreferenceClickListener {
+                SchemaPickerDialog(context).show()
+                true
             }
-        )
-    }
-
-    override fun onPreferenceTreeClick(preference: Preference?): Boolean {
-        return when (preference?.key) {
-            "pref_schemas" -> {
-                SchemaPickerDialog(requireContext()).show()
+            get<Preference>("pref_user_data")?.setOnPreferenceClickListener {
+                findNavController().navigate(R.id.action_prefFragment_to_confFragment)
+                true
+            }
+            get<Preference>("pref_keyboard")?.setOnPreferenceClickListener {
+                findNavController().navigate(R.id.action_prefFragment_to_keyboardFragment)
+                true
+            }
+            get<Preference>("pref_theme_and_color")?.setOnPreferenceClickListener {
+                findNavController().navigate(R.id.action_prefFragment_to_looksFragment)
+                true
+            }
+            get<Preference>("pref_toolkit")?.setOnPreferenceClickListener {
+                findNavController().navigate(R.id.action_prefFragment_to_toolkitFragment)
+                true
+            }
+            get<Preference>("pref_others")?.setOnPreferenceClickListener {
+                findNavController().navigate(R.id.action_prefFragment_to_otherFragment)
                 true
             }
-            else -> super.onPreferenceTreeClick(preference)
         }
     }
 }
diff --git a/app/src/main/java/com/osfans/trime/ui/fragments/ToolkitFragment.kt b/app/src/main/java/com/osfans/trime/ui/fragments/ToolkitFragment.kt
index 5492c267f2..3191f6bf7c 100644
--- a/app/src/main/java/com/osfans/trime/ui/fragments/ToolkitFragment.kt
+++ b/app/src/main/java/com/osfans/trime/ui/fragments/ToolkitFragment.kt
@@ -1,8 +1,6 @@
 package com.osfans.trime.ui.fragments
 
 import android.os.Bundle
-import android.view.Menu
-import androidx.core.view.forEach
 import androidx.fragment.app.activityViewModels
 import androidx.preference.Preference
 import androidx.preference.PreferenceFragmentCompat
@@ -10,10 +8,9 @@ import com.osfans.trime.R
 import com.osfans.trime.ui.main.MainViewModel
 import com.osfans.trime.util.ShortcutUtils
 
-@Suppress("unused")
 class ToolkitFragment : PreferenceFragmentCompat() {
 
-    private val viewModel : MainViewModel by activityViewModels()
+    private val viewModel: MainViewModel by activityViewModels()
 
     override fun onCreatePreferences(savedInstanceState: Bundle?, rootKey: String?) {
         val context = preferenceManager.context
@@ -33,6 +30,7 @@ class ToolkitFragment : PreferenceFragmentCompat() {
 
     override fun onResume() {
         super.onResume()
+        viewModel.setToolbarTitle(getString(R.string.pref_toolkit))
         viewModel.disableTopOptionsMenu()
     }
 }
diff --git a/app/src/main/java/com/osfans/trime/ui/main/AboutActivity.kt b/app/src/main/java/com/osfans/trime/ui/main/AboutActivity.kt
deleted file mode 100644
index 157e5063af..0000000000
--- a/app/src/main/java/com/osfans/trime/ui/main/AboutActivity.kt
+++ /dev/null
@@ -1,132 +0,0 @@
-package com.osfans.trime.ui.main
-
-import android.content.ClipboardManager
-import android.content.Context
-import android.os.Bundle
-import android.view.MenuItem
-import android.webkit.WebView
-import android.widget.Toast
-import androidx.appcompat.app.AlertDialog
-import androidx.appcompat.app.AppCompatActivity
-import androidx.appcompat.widget.Toolbar
-import androidx.fragment.app.Fragment
-import androidx.preference.Preference
-import androidx.preference.PreferenceFragmentCompat
-import com.osfans.trime.BuildConfig
-import com.osfans.trime.R
-import com.osfans.trime.core.Rime
-import com.osfans.trime.databinding.AboutActivityBinding
-import com.osfans.trime.util.AppVersionUtils.writeLibraryVersionToSummary
-
-class AboutActivity : AppCompatActivity() {
-    lateinit var binding: AboutActivityBinding
-    override fun onCreate(savedInstanceState: Bundle?) {
-        super.onCreate(savedInstanceState)
-        binding = AboutActivityBinding.inflate(layoutInflater)
-        setContentView(binding.root)
-
-        val toolbar = findViewById<Toolbar>(R.id.toolbar)
-        setSupportActionBar(toolbar)
-
-        if (savedInstanceState == null) {
-            loadFragment(AboutFragment())
-        } else {
-            title = savedInstanceState.getCharSequence(FRAGMENT_TAG)
-        }
-        supportFragmentManager.addOnBackStackChangedListener {
-            if (supportFragmentManager.backStackEntryCount == 0) {
-                setTitle(R.string.settings__about_title)
-            }
-        }
-
-        supportActionBar?.setDisplayHomeAsUpEnabled(true)
-    }
-
-    override fun onSaveInstanceState(outState: Bundle) {
-        super.onSaveInstanceState(outState)
-        outState.putCharSequence(FRAGMENT_TAG, title)
-    }
-
-    override fun onSupportNavigateUp(): Boolean {
-        if (supportFragmentManager.popBackStackImmediate()) {
-            return true
-        }
-        return super.onSupportNavigateUp()
-    }
-
-    private fun loadFragment(fragment: Fragment) {
-        supportFragmentManager
-            .beginTransaction()
-            .replace(binding.about.id, fragment, FRAGMENT_TAG)
-            .commit()
-    }
-
-    override fun onOptionsItemSelected(item: MenuItem): Boolean {
-        return when (item.itemId) {
-            android.R.id.home -> {
-                onBackPressed()
-                true
-            }
-            else -> super.onOptionsItemSelected(item)
-        }
-    }
-
-    class AboutFragment : PreferenceFragmentCompat() {
-        override fun onCreatePreferences(savedInstanceState: Bundle?, rootKey: String?) {
-            setPreferencesFromResource(R.xml.about_preference, rootKey)
-            findPreference<Preference>("about__changelog")
-                ?.writeLibraryVersionToSummary(BuildConfig.BUILD_VERSION)
-
-            findPreference<Preference>("about__buildinfo")
-                ?.writeLibraryVersionToSummary(BuildConfig.BUILD_INFO)
-
-            findPreference<Preference>("about__librime_version")
-                ?.writeLibraryVersionToSummary(Rime.get_librime_version())
-
-            findPreference<Preference>("about__opencc_version")
-                ?.writeLibraryVersionToSummary(Rime.get_opencc_version())
-
-            findPreference<Preference>("pref_trime_custom_qq")
-                ?.hidden()
-        }
-
-        override fun onPreferenceTreeClick(preference: Preference?): Boolean {
-            return when (preference?.key) {
-                "about__licensing" -> {
-                    val webView = WebView(requireContext())
-                    webView.loadUrl("file:///android_asset/license/open_source_license.html")
-                    AlertDialog.Builder(requireContext())
-                        .setTitle(R.string.about__licensing_title)
-                        .setView(webView)
-                        .setPositiveButton(android.R.string.ok, null)
-                        .show()
-                    true
-                }
-                "about__used_libraries" -> {
-                    val webView = WebView(requireContext())
-                    webView.loadUrl("file:///android_asset/license/library_licenses.html")
-                    AlertDialog.Builder(requireContext())
-                        .setTitle(R.string.about__used_library_dialog_title)
-                        .setView(webView)
-                        .setPositiveButton(android.R.string.ok, null)
-                        .show()
-                    true
-                }
-
-                "about__buildinfo" -> {
-                    val cbm = context?.getSystemService(Context.CLIPBOARD_SERVICE) as ClipboardManager
-                    cbm.text = BuildConfig.BUILD_INFO
-                    Toast.makeText(context, R.string.copy_done, Toast.LENGTH_LONG).show()
-                    true
-                }
-                else -> super.onPreferenceTreeClick(preference)
-            }
-        }
-    }
-}
-
-private fun Preference.hidden() {
-    if (this.summary.isBlank() || this.intent.data.toString().isBlank()) {
-        this.setVisible(false)
-    }
-}
diff --git a/app/src/main/java/com/osfans/trime/ui/main/PrefMainActivity.kt b/app/src/main/java/com/osfans/trime/ui/main/PrefMainActivity.kt
index 69b9bb1c0f..61bcf23fac 100644
--- a/app/src/main/java/com/osfans/trime/ui/main/PrefMainActivity.kt
+++ b/app/src/main/java/com/osfans/trime/ui/main/PrefMainActivity.kt
@@ -16,16 +16,15 @@ import androidx.appcompat.app.AppCompatActivity
 import androidx.appcompat.app.AppCompatDelegate
 import androidx.core.app.ActivityCompat
 import androidx.core.view.forEach
-import androidx.fragment.app.Fragment
-import androidx.preference.Preference
-import androidx.preference.PreferenceFragmentCompat
+import androidx.navigation.fragment.NavHostFragment
+import androidx.navigation.ui.AppBarConfiguration
+import androidx.navigation.ui.setupWithNavController
 import com.blankj.utilcode.util.BarUtils
 import com.blankj.utilcode.util.ToastUtils
 import com.osfans.trime.R
 import com.osfans.trime.data.AppPrefs
-import com.osfans.trime.databinding.PrefActivityBinding
+import com.osfans.trime.databinding.ActivityPrefBinding
 import com.osfans.trime.ime.core.Trime
-import com.osfans.trime.ui.fragments.PrefFragment
 import com.osfans.trime.ui.setup.SetupActivity
 import com.osfans.trime.util.RimeUtils
 import com.osfans.trime.util.createLoadingDialog
@@ -35,18 +34,26 @@ import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
 import timber.log.Timber
 
-internal const val FRAGMENT_TAG = "FRAGMENT_TAG"
-const val PERMISSION_REQUEST_EXTERNAL_STORAGE = 0
-
 class PrefMainActivity :
     AppCompatActivity(),
-    PreferenceFragmentCompat.OnPreferenceStartFragmentCallback,
     ActivityCompat.OnRequestPermissionsResultCallback,
     CoroutineScope by MainScope() {
-    private val viewModel : MainViewModel by viewModels()
+    private val viewModel: MainViewModel by viewModels()
     private val prefs get() = AppPrefs.defaultInstance()
 
-    lateinit var binding: PrefActivityBinding
+    private lateinit var navHostFragment: NavHostFragment
+
+    private fun onNavigateUpListener(): Boolean {
+        val navController = navHostFragment.navController
+        return when (navController.currentDestination?.id) {
+            R.id.prefFragment -> {
+                // "minimize" the app, don't exit activity
+                moveTaskToBack(false)
+                true
+            }
+            else -> onSupportNavigateUp()
+        }
+    }
 
     override fun onCreate(savedInstanceState: Bundle?) {
         prefs.sync()
@@ -59,7 +66,7 @@ class PrefMainActivity :
         AppCompatDelegate.setDefaultNightMode(uiMode)
 
         super.onCreate(savedInstanceState)
-        binding = PrefActivityBinding.inflate(layoutInflater)
+        val binding = ActivityPrefBinding.inflate(layoutInflater)
         if (VERSION.SDK_INT >= VERSION_CODES.M) {
             BarUtils.setNavBarColor(
                 this,
@@ -73,7 +80,13 @@ class PrefMainActivity :
             )
         setContentView(binding.root)
         setSupportActionBar(binding.toolbar.toolbar)
-
+        val appBarConfiguration = AppBarConfiguration(
+            topLevelDestinationIds = setOf(),
+            fallbackOnNavigateUpListener = ::onNavigateUpListener
+        )
+        navHostFragment =
+            supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
+        binding.toolbar.toolbar.setupWithNavController(navHostFragment.navController, appBarConfiguration)
         viewModel.toolbarTitle.observe(this) {
             binding.toolbar.toolbar.title = it
         }
@@ -83,17 +96,6 @@ class PrefMainActivity :
             }
         }
 
-        if (savedInstanceState == null) {
-            loadFragment(PrefFragment())
-        } else {
-            title = savedInstanceState.getCharSequence(FRAGMENT_TAG)
-        }
-        supportFragmentManager.addOnBackStackChangedListener {
-            if (supportFragmentManager.backStackEntryCount == 0) {
-                setTitle(R.string.trime_app_name)
-            }
-        }
-
         supportActionBar?.setDisplayHomeAsUpEnabled(true)
         if (SetupActivity.shouldSetup()) {
             startActivity(Intent(this, SetupActivity::class.java))
@@ -102,48 +104,6 @@ class PrefMainActivity :
         requestAlertWindowPermission()
     }
 
-    override fun onSaveInstanceState(outState: Bundle) {
-        super.onSaveInstanceState(outState)
-        outState.putCharSequence(FRAGMENT_TAG, title)
-    }
-
-    override fun onSupportNavigateUp(): Boolean {
-        if (supportFragmentManager.popBackStackImmediate()) {
-            return true
-        }
-        return super.onSupportNavigateUp()
-    }
-
-    override fun onPreferenceStartFragment(
-        caller: PreferenceFragmentCompat,
-        pref: Preference
-    ): Boolean {
-        // Instantiate the new Fragment
-        val args = pref.extras
-        val fragment = supportFragmentManager.fragmentFactory.instantiate(
-            classLoader,
-            pref.fragment
-        ).apply {
-            arguments = args
-            @Suppress("DEPRECATION")
-            setTargetFragment(caller, 0)
-        }
-        // Replace the existing Fragment with the new Fragment
-        supportFragmentManager.beginTransaction()
-            .replace(R.id.preference, fragment)
-            .addToBackStack(null)
-            .commit()
-        title = pref.title
-        return true
-    }
-
-    private fun loadFragment(fragment: Fragment) {
-        supportFragmentManager
-            .beginTransaction()
-            .replace(binding.preference.id, fragment, FRAGMENT_TAG)
-            .commit()
-    }
-
     override fun onRequestPermissionsResult(
         requestCode: Int,
         permissions: Array<out String>,
@@ -175,10 +135,6 @@ class PrefMainActivity :
 
     override fun onOptionsItemSelected(item: MenuItem): Boolean {
         return when (item.itemId) {
-            android.R.id.home -> {
-                onBackPressed()
-                true
-            }
             R.id.preference__menu_deploy -> {
                 val progressDialog = createLoadingDialog(this, R.string.deploy_progress)
                 progressDialog.show()
@@ -195,7 +151,7 @@ class PrefMainActivity :
                 true
             }
             R.id.preference__menu_about -> {
-                startActivity(Intent(this, AboutActivity::class.java))
+                navHostFragment.navController.navigate(R.id.action_prefFragment_to_aboutFragment)
                 true
             }
             else -> super.onOptionsItemSelected(item)
@@ -260,4 +216,8 @@ class PrefMainActivity :
             }
         }
     }
+
+    companion object {
+        private const val PERMISSION_REQUEST_EXTERNAL_STORAGE = 0
+    }
 }
diff --git a/app/src/main/res/drawable/ic_baseline_settings_24.xml b/app/src/main/res/drawable/ic_baseline_settings_24.xml
deleted file mode 100644
index 35339f60d0..0000000000
--- a/app/src/main/res/drawable/ic_baseline_settings_24.xml
+++ /dev/null
@@ -1,11 +0,0 @@
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="24dp"
-    android:height="24dp"
-    android:viewportWidth="24"
-    android:viewportHeight="24"
-    android:tint="?attr/colorControlNormal"
-    android:alpha="0.8">
-  <path
-      android:fillColor="@android:color/white"
-      android:pathData="M19.14,12.94c0.04,-0.3 0.06,-0.61 0.06,-0.94c0,-0.32 -0.02,-0.64 -0.07,-0.94l2.03,-1.58c0.18,-0.14 0.23,-0.41 0.12,-0.61l-1.92,-3.32c-0.12,-0.22 -0.37,-0.29 -0.59,-0.22l-2.39,0.96c-0.5,-0.38 -1.03,-0.7 -1.62,-0.94L14.4,2.81c-0.04,-0.24 -0.24,-0.41 -0.48,-0.41h-3.84c-0.24,0 -0.43,0.17 -0.47,0.41L9.25,5.35C8.66,5.59 8.12,5.92 7.63,6.29L5.24,5.33c-0.22,-0.08 -0.47,0 -0.59,0.22L2.74,8.87C2.62,9.08 2.66,9.34 2.86,9.48l2.03,1.58C4.84,11.36 4.8,11.69 4.8,12s0.02,0.64 0.07,0.94l-2.03,1.58c-0.18,0.14 -0.23,0.41 -0.12,0.61l1.92,3.32c0.12,0.22 0.37,0.29 0.59,0.22l2.39,-0.96c0.5,0.38 1.03,0.7 1.62,0.94l0.36,2.54c0.05,0.24 0.24,0.41 0.48,0.41h3.84c0.24,0 0.44,-0.17 0.47,-0.41l0.36,-2.54c0.59,-0.24 1.13,-0.56 1.62,-0.94l2.39,0.96c0.22,0.08 0.47,0 0.59,-0.22l1.92,-3.32c0.12,-0.22 0.07,-0.47 -0.12,-0.61L19.14,12.94zM12,15.6c-1.98,0 -3.6,-1.62 -3.6,-3.6s1.62,-3.6 3.6,-3.6s3.6,1.62 3.6,3.6S13.98,15.6 12,15.6z"/>
-</vector>
diff --git a/app/src/main/res/drawable/ic_baseline_snippet_folder_24.xml b/app/src/main/res/drawable/ic_baseline_snippet_folder_24.xml
new file mode 100644
index 0000000000..46c6c81970
--- /dev/null
+++ b/app/src/main/res/drawable/ic_baseline_snippet_folder_24.xml
@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:alpha="0.8"
+    android:tint="?attr/colorControlNormal"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M15.88,10.5l1.62,1.62v3.38l-3,0v-5H15.88zM22,8v10c0,1.1 -0.9,2 -2,2H4c-1.1,0 -2,-0.9 -2,-2L2.01,6C2.01,4.9 2.9,4 4,4h6l2,2h8C21.1,6 22,6.9 22,8zM19,11.5L16.5,9H13v8l6,0V11.5z" />
+</vector>
diff --git a/app/src/main/res/layout/pref_activity.xml b/app/src/main/res/layout/activity_pref.xml
similarity index 51%
rename from app/src/main/res/layout/pref_activity.xml
rename to app/src/main/res/layout/activity_pref.xml
index f4c60b4369..5b24df2e21 100644
--- a/app/src/main/res/layout/pref_activity.xml
+++ b/app/src/main/res/layout/activity_pref.xml
@@ -1,13 +1,17 @@
 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
     android:orientation="vertical"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
 
     <include android:id="@+id/toolbar" layout="@layout/toolbar" />
 
-    <FrameLayout
-        android:id="@+id/preference"
+    <androidx.fragment.app.FragmentContainerView
+        android:id="@+id/nav_host_fragment"
+        android:name="androidx.navigation.fragment.NavHostFragment"
         android:layout_width="match_parent"
-        android:layout_height="match_parent" />
+        android:layout_height="match_parent"
+        app:defaultNavHost="true"
+        app:navGraph="@navigation/pref_nav" />
 </LinearLayout>
\ No newline at end of file
diff --git a/app/src/main/res/navigation/pref_nav.xml b/app/src/main/res/navigation/pref_nav.xml
new file mode 100644
index 0000000000..6b4f88c77d
--- /dev/null
+++ b/app/src/main/res/navigation/pref_nav.xml
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="utf-8"?>
+<navigation xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:id="@+id/pref_nav"
+    app:startDestination="@id/prefFragment">
+
+    <fragment
+        android:id="@+id/prefFragment"
+        android:name="com.osfans.trime.ui.fragments.PrefFragment"
+        android:label="PrefFragment" >
+        <action
+            android:id="@+id/action_prefFragment_to_confFragment"
+            app:destination="@id/confFragment" />
+        <action
+            android:id="@+id/action_prefFragment_to_keyboardFragment"
+            app:destination="@id/keyboardFragment" />
+        <action
+            android:id="@+id/action_prefFragment_to_looksFragment"
+            app:destination="@id/looksFragment" />
+        <action
+            android:id="@+id/action_prefFragment_to_otherFragment"
+            app:destination="@id/otherFragment" />
+        <action
+            android:id="@+id/action_prefFragment_to_toolkitFragment"
+            app:destination="@id/toolkitFragment" />
+        <action
+            android:id="@+id/action_prefFragment_to_aboutFragment"
+            app:destination="@id/aboutFragment" />
+    </fragment>
+    <fragment
+        android:id="@+id/confFragment"
+        android:name="com.osfans.trime.ui.fragments.ConfFragment"
+        android:label="ConfFragment" />
+    <fragment
+        android:id="@+id/keyboardFragment"
+        android:name="com.osfans.trime.ui.fragments.KeyboardFragment"
+        android:label="KeyboardFragment" />
+    <fragment
+        android:id="@+id/looksFragment"
+        android:name="com.osfans.trime.ui.fragments.LooksFragment"
+        android:label="LooksFragment" />
+    <fragment
+        android:id="@+id/otherFragment"
+        android:name="com.osfans.trime.ui.fragments.OtherFragment"
+        android:label="OtherFragment" />
+    <fragment
+        android:id="@+id/toolkitFragment"
+        android:name="com.osfans.trime.ui.fragments.ToolkitFragment"
+        android:label="ToolkitFragment" />
+    <fragment
+        android:id="@+id/aboutFragment"
+        android:name="com.osfans.trime.ui.fragments.AboutFragment"
+        android:label="AboutFragment" />
+</navigation>
\ No newline at end of file
diff --git a/app/src/main/res/values-zh-rCN/strings.xml b/app/src/main/res/values-zh-rCN/strings.xml
index 471bb55851..486314d03a 100644
--- a/app/src/main/res/values-zh-rCN/strings.xml
+++ b/app/src/main/res/values-zh-rCN/strings.xml
@@ -231,7 +231,7 @@
         <item name="50">50</item>
         <item name="100">100</item>
     </string-array>
-    <string name="settings__system_toolkit">工具箱</string>
+    <string name="pref_toolkit">工具箱</string>
     <string name="system">系统</string>
     <string name="export">导出</string>
     <string name="clear">清除</string>
@@ -240,4 +240,9 @@
     <string name="app_crash">应用程序崩溃了</string>
     <string name="exception_logcat_created">Logcat 进程已创建</string>
     <string name="app_crash_message">抱歉，但我们提供了日志以供调查。</string>
+    <string name="pref_keyboard">键盘</string>
+    <string name="pref_about">关于</string>
+    <string name="pref_theme_and_color">主题与配色</string>
+    <string name="pref_user_data">用户数据</string>
+    <string name="pref_user_data_summary">用于管理您的数据的设置</string>
 </resources>
diff --git a/app/src/main/res/values-zh-rTW/strings.xml b/app/src/main/res/values-zh-rTW/strings.xml
index ebedcfad60..ca31eb1462 100644
--- a/app/src/main/res/values-zh-rTW/strings.xml
+++ b/app/src/main/res/values-zh-rTW/strings.xml
@@ -239,6 +239,11 @@
     <string name="real_time_logs">即時紀錄檔</string>
     <string name="clear">清除</string>
     <string name="system">系統</string>
-    <string name="settings__system_toolkit">工具箱</string>
+    <string name="pref_toolkit">工具箱</string>
     <string name="exception_logcat_created">Logcat 行程已建立</string>
+    <string name="pref_about">關於</string>
+    <string name="pref_theme_and_color">主題與配色</string>
+    <string name="pref_user_data">使用者資料</string>
+    <string name="pref_user_data_summary">用於管理你的資料的設定</string>
+    <string name="pref_keyboard">鍵盤設定</string>
 </resources>
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 4103b39643..ef7910e4a7 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -242,6 +242,13 @@
     <string name="clear">Clear</string>
     <string name="export">Export</string>
     <string name="system">System</string>
-    <string name="settings__system_toolkit">Toolkit</string>
+    <string name="pref_toolkit">Toolkit</string>
     <string name="reset__asset_is_null_or_empty">This path points to a empty directory or null pointer.</string>
+    <string name="pref_user_data">User Data</string>
+    <string name="pref_user_data_summary">Settings to manage your data</string>
+    <string name="pref_keyboard">Keyboard</string>
+    <string name="pref_theme_and_color"><![CDATA[Theme & Color]]></string>
+    <string name="pref_about">About</string>
+    <string name="storage">Storage</string>
+    <string name="maintenance">Maintenance</string>
 </resources>
diff --git a/app/src/main/res/xml/conf_preference.xml b/app/src/main/res/xml/conf_preference.xml
index 608f50f907..4c3b734579 100644
--- a/app/src/main/res/xml/conf_preference.xml
+++ b/app/src/main/res/xml/conf_preference.xml
@@ -1,33 +1,36 @@
 <?xml version="1.0" encoding="utf-8"?>
 <PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:key="settings__configuration_title"
-    android:title="@string/settings__configuration_title">
+    xmlns:app="http://schemas.android.com/apk/res-auto">
 
-    <EditTextPreference android:key="conf__shared_data_dir"
-        app:iconSpaceReserved="false"
-        android:title="@string/conf__shared_data_dir_title"
-        app:useSimpleSummaryProvider="true"/>
+    <PreferenceCategory android:title="@string/storage"
+        app:iconSpaceReserved="false" >
+        <EditTextPreference android:key="conf__shared_data_dir"
+            app:iconSpaceReserved="false"
+            android:title="@string/conf__shared_data_dir_title"
+            app:useSimpleSummaryProvider="true"/>
 
-    <EditTextPreference android:key="conf__user_data_dir"
-        app:iconSpaceReserved="false"
-        android:title="@string/conf__user_data_dir_title"
-        android:defaultValue="@string/conf__default_user_data_dir"
-        app:useSimpleSummaryProvider="true"/>
+        <EditTextPreference android:key="conf__user_data_dir"
+            app:iconSpaceReserved="false"
+            android:title="@string/conf__user_data_dir_title"
+            app:useSimpleSummaryProvider="true"/>
+    </PreferenceCategory>
 
-    <Preference android:key="conf__synchronize"
-        app:iconSpaceReserved="false"
-        android:title="@string/conf__synchronize_title"
-        android:summary="@string/conf__synchronize_summary"/>
+    <PreferenceCategory android:title="@string/maintenance"
+        app:iconSpaceReserved="false" >
+        <Preference android:key="conf__synchronize"
+            app:iconSpaceReserved="false"
+            android:title="@string/conf__synchronize_title"
+            android:summary="@string/conf__synchronize_summary"/>
 
-    <SwitchPreferenceCompat android:key="conf__synchronize_background"
-        app:iconSpaceReserved="false"
-        android:title="@string/conf__synchronize_background_title"
-        android:summary="@string/conf__synchronize_background_summary"
-        android:persistent="true" />
+        <SwitchPreferenceCompat android:key="conf__synchronize_background"
+            app:iconSpaceReserved="false"
+            android:title="@string/conf__synchronize_background_title"
+            android:summary="@string/conf__synchronize_background_summary"
+            android:persistent="true" />
 
-    <Preference android:key="conf__reset"
-        app:iconSpaceReserved="false"
-        android:title="@string/conf__reset_title"
-        android:summary="@string/conf__reset_summary"/>
-</PreferenceScreen>
\ No newline at end of file
+        <Preference android:key="conf__reset"
+            app:iconSpaceReserved="false"
+            android:title="@string/conf__reset_title"
+            android:summary="@string/conf__reset_summary"/>
+    </PreferenceCategory>
+</PreferenceScreen>
diff --git a/app/src/main/res/xml/prefs.xml b/app/src/main/res/xml/prefs.xml
index 648e037554..069dfdcc2e 100644
--- a/app/src/main/res/xml/prefs.xml
+++ b/app/src/main/res/xml/prefs.xml
@@ -24,44 +24,29 @@
     android:title="@string/trime_app_name">
 
     <Preference android:key="pref_schemas"
-        android:order="4"
         android:title="@string/pref_schemas"
         app:icon="@drawable/ic_pref_schema"
         android:summary="@string/pref_schemas_summary"/>
 
-    <Preference android:key="pref_keyboard"
-        android:order="5"
-        android:title="@string/settings__keyboard_preferences_title"
-        app:icon="@drawable/ic_baseline_keyboard_24"
-        android:fragment="com.osfans.trime.ui.fragments.KeyboardFragment"/>
+    <Preference android:key="pref_user_data"
+        android:title="@string/pref_user_data"
+        app:icon="@drawable/ic_baseline_snippet_folder_24"
+        android:summary="@string/pref_user_data_summary"/>
 
-    <Preference android:key="pref_keyboard_appearance"
-        android:order="6"
-        android:title="@string/pref_keyboard_appearance"
-        app:icon="@drawable/ic_pref_theme_color"
-        android:fragment="com.osfans.trime.ui.fragments.LooksFragment"/>
+    <Preference android:key="pref_keyboard"
+        android:title="@string/pref_keyboard"
+        app:icon="@drawable/ic_baseline_keyboard_24" />
 
-    <Preference android:key="pref_input"
-        android:order="8"
-        android:title="@string/settings__configuration_title"
-        app:icon="@drawable/ic_baseline_settings_24"
-        android:fragment="com.osfans.trime.ui.fragments.ConfFragment"/>
+    <Preference android:key="pref_theme_and_color"
+        android:title="@string/pref_theme_and_color"
+        app:icon="@drawable/ic_pref_theme_color" />
 
-    <!-- <Preference android:key="pref_deploy" android:order="16"
-        android:title="@string/pref_deploy" android:summary="@string/pref_deploy_summary"/> -->
+    <Preference android:key="pref_toolkit"
+        android:title="@string/pref_toolkit"
+        app:icon="@drawable/ic_iconpark_toolkit_24" />
 
-    <Preference android:key="pref_other"
-        android:order="17"
+    <Preference android:key="pref_others"
         android:title="@string/pref_other"
-        app:icon="@drawable/ic_pref_other"
-        android:fragment="com.osfans.trime.ui.fragments.OtherFragment"/>
-
-    <!-- <PreferenceScreen android:key="pref_help" android:order="32" android:title="@string/pref_help">
-
-    </PreferenceScreen> -->
-
-    <!-- <PreferenceScreen android:key="pref_about" android:order="64" android:title="@string/pref_about">
-
-    </PreferenceScreen> -->
+        app:icon="@drawable/ic_pref_other" />
 
 </PreferenceScreen>
diff --git a/build.gradle b/build.gradle
index c640fc4e6e..0292726470 100644
--- a/build.gradle
+++ b/build.gradle
@@ -9,6 +9,7 @@
 buildscript {
     ext.kotlin_version = '1.6.10'
     ext.kotlin_coroutines_version = '1.6.0'
+    ext.nav_version = '2.4.2'
 
     /**
      * The repositories block configures the repositories Gradle uses to