From 373092af16ae3a08e4acd0ed23cbec7072a724c0 Mon Sep 17 00:00:00 2001
From: Viktor De Pasquale <info@depasquale.wiki>
Date: Fri, 31 Jan 2020 19:37:45 +0100
Subject: [PATCH] Updated homepage layout

The updated layout has extended features such as reboot (not implemented yet), more details with not text ellipsis and easy extendability with further parameters, detail or whatever
More improvements to homescreen to come in upcoming commits.
---
 .../java/com/topjohnwu/magisk/core/Info.kt    |   1 +
 .../topjohnwu/magisk/ui/home/HomeViewModel.kt |  26 +-
 app/src/main/res/layout/fragment_home_md2.xml | 672 +-----------------
 .../main/res/layout/include_home_device.xml   | 246 +++++++
 .../main/res/layout/include_home_magisk.xml   | 308 ++++++++
 .../main/res/layout/include_home_manager.xml  | 337 +++++++++
 .../main/res/layout/item_developer_link.xml   |  23 +-
 app/src/main/res/values/strings.xml           |  10 +
 app/src/main/res/values/styles_view_md2.xml   |  58 ++
 9 files changed, 998 insertions(+), 683 deletions(-)
 create mode 100644 app/src/main/res/layout/include_home_device.xml
 create mode 100644 app/src/main/res/layout/include_home_magisk.xml
 create mode 100644 app/src/main/res/layout/include_home_manager.xml

diff --git a/app/src/main/java/com/topjohnwu/magisk/core/Info.kt b/app/src/main/java/com/topjohnwu/magisk/core/Info.kt
index c4a9c7061..7b28983e7 100644
--- a/app/src/main/java/com/topjohnwu/magisk/core/Info.kt
+++ b/app/src/main/java/com/topjohnwu/magisk/core/Info.kt
@@ -21,6 +21,7 @@ object Info {
     @JvmStatic
     val env by envRef              // Local
     var remote = UpdateInfo()      // Remote
+    @JvmStatic
     var stub: DynAPK.Data? = null  // Stub
 
     @JvmStatic
diff --git a/app/src/main/java/com/topjohnwu/magisk/ui/home/HomeViewModel.kt b/app/src/main/java/com/topjohnwu/magisk/ui/home/HomeViewModel.kt
index 1fd23463a..e06e63274 100644
--- a/app/src/main/java/com/topjohnwu/magisk/ui/home/HomeViewModel.kt
+++ b/app/src/main/java/com/topjohnwu/magisk/ui/home/HomeViewModel.kt
@@ -41,6 +41,11 @@ class HomeViewModel(
 
     val stateMagisk = KObservableField(MagiskState.LOADING)
     val stateManager = KObservableField(MagiskState.LOADING)
+    val stateVersionMagisk = KObservableField("")
+    val stateCodeMagisk = KObservableField(0)
+    val stateVersionManager = KObservableField("")
+    val stateCodeManager = KObservableField(0)
+    val stateCodeStub = KObservableField(0)
     val stateTextMagisk = Observer(stateMagisk) {
         when (stateMagisk.value) {
             MagiskState.NOT_INSTALLED -> R.string.installed_error.res()
@@ -59,8 +64,6 @@ class HomeViewModel(
     }
     val statePackageManager = packageName
     val statePackageOriginal = statePackageManager == BuildConfig.APPLICATION_ID
-    val stateVersionUpdateMagisk = KObservableField("")
-    val stateVersionUpdateManager = KObservableField("")
 
     val stateMagiskProgress = KObservableField(0)
     val stateManagerProgress = KObservableField(0)
@@ -110,21 +113,12 @@ class HomeViewModel(
             else -> MagiskState.UP_TO_DATE
         }
 
-        stateVersionUpdateMagisk.value = when {
-            info.magisk.isObsolete -> "%s > %s".format(
-                Info.env.magiskVersionString.clipVersion(info.magisk.version),
-                info.magisk.version.clipVersion(Info.env.magiskVersionString)
-            )
-            else -> ""
-        }
+        stateVersionMagisk.value = info.magisk.version
+        stateVersionManager.value = info.app.version
 
-        stateVersionUpdateManager.value = when {
-            info.app.isObsolete -> "%s > %s".format(
-                BuildConfig.VERSION_NAME.clipVersion(info.app.version),
-                info.app.version.clipVersion(BuildConfig.VERSION_NAME)
-            )
-            else -> ""
-        }
+        stateCodeMagisk.value = info.magisk.versionCode
+        stateCodeManager.value = info.app.versionCode
+        stateCodeStub.value = info.stub.versionCode
 
         ensureEnv()
     }
diff --git a/app/src/main/res/layout/fragment_home_md2.xml b/app/src/main/res/layout/fragment_home_md2.xml
index ae16d4c06..7baf550ab 100644
--- a/app/src/main/res/layout/fragment_home_md2.xml
+++ b/app/src/main/res/layout/fragment_home_md2.xml
@@ -5,22 +5,6 @@
 
     <data>
 
-        <import type="android.os.Build" />
-
-        <import type="com.topjohnwu.magisk.core.Info" />
-
-        <import type="com.topjohnwu.magisk.core.InfoKt" />
-
-        <import type="com.topjohnwu.magisk.core.Config" />
-
-        <import type="com.topjohnwu.magisk.BuildConfig" />
-
-        <import type="com.topjohnwu.magisk.ui.home.MagiskState" />
-
-        <import type="com.topjohnwu.magisk.extensions.XAndroidKt" />
-
-        <import type="com.topjohnwu.magisk.extensions.XSUKt" />
-
         <variable
             name="viewModel"
             type="com.topjohnwu.magisk.ui.home.HomeViewModel" />
@@ -83,641 +67,31 @@
 
             </com.google.android.material.card.MaterialCardView>
 
-            <androidx.constraintlayout.widget.ConstraintLayout
+            <include
+                android:id="@+id/home_device_wrapper"
+                layout="@layout/include_home_device"
+                viewModel="@{viewModel}"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:clipToPadding="false">
-
-                <com.google.android.material.card.MaterialCardView
-                    android:id="@+id/home_device_wrapper"
-                    style="@style/WidgetFoundation.Card.Variant"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_gravity="center"
-                    android:layout_marginStart="@dimen/l1"
-                    android:layout_marginEnd="@dimen/l1"
-                    app:layout_constrainedWidth="true"
-                    app:layout_constraintEnd_toEndOf="parent"
-                    app:layout_constraintStart_toStartOf="parent"
-                    app:layout_constraintTop_toTopOf="parent">
-
-                    <androidx.constraintlayout.widget.ConstraintLayout
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:background="@drawable/bg_card"
-                        android:orientation="horizontal">
-
-                        <androidx.constraintlayout.widget.ConstraintLayout
-                            android:id="@+id/home_device_overview"
-                            android:layout_width="wrap_content"
-                            android:layout_height="match_parent"
-                            app:layout_constraintBottom_toBottomOf="parent"
-                            app:layout_constraintStart_toStartOf="parent"
-                            app:layout_constraintTop_toTopOf="parent">
-
-                            <androidx.appcompat.widget.AppCompatImageView
-                                android:id="@+id/home_device_icon"
-                                style="@style/WidgetFoundation.Icon.Primary"
-                                android:layout_marginStart="@dimen/l_50"
-                                android:layout_marginTop="@dimen/l1"
-                                android:layout_marginBottom="@dimen/l1"
-                                android:background="@null"
-                                android:padding="@dimen/l_50"
-                                app:layout_constraintBottom_toBottomOf="parent"
-                                app:layout_constraintStart_toStartOf="parent"
-                                app:layout_constraintTop_toTopOf="parent"
-                                app:srcCompat="@drawable/ic_device"
-                                app:tint="@color/color_primary_error_transient" />
-
-                            <androidx.appcompat.widget.AppCompatTextView
-                                android:id="@+id/home_device_title"
-                                android:layout_width="wrap_content"
-                                android:layout_height="wrap_content"
-                                android:layout_marginStart="@dimen/l_50"
-                                android:layout_marginEnd="@dimen/l1"
-                                android:gravity="start|center_vertical"
-                                android:text="@{Build.MANUFACTURER}"
-                                android:textAppearance="@style/AppearanceFoundation.Title"
-                                app:layout_constrainedWidth="true"
-                                app:layout_constraintBottom_toTopOf="@+id/home_device_product"
-                                app:layout_constraintEnd_toEndOf="parent"
-                                app:layout_constraintHorizontal_bias="0"
-                                app:layout_constraintStart_toEndOf="@+id/home_device_icon"
-                                app:layout_constraintTop_toTopOf="@+id/home_device_icon"
-                                app:layout_constraintVertical_chainStyle="packed"
-                                tools:text="Google" />
-
-                            <androidx.appcompat.widget.AppCompatTextView
-                                android:id="@+id/home_device_product"
-                                android:layout_width="wrap_content"
-                                android:layout_height="wrap_content"
-                                android:text="@{Build.DEVICE ?? Build.PRODUCT}"
-                                android:textAppearance="@style/AppearanceFoundation.Caption.Variant"
-                                app:layout_constraintBottom_toTopOf="@+id/home_device_board"
-                                app:layout_constraintEnd_toEndOf="@+id/home_device_title"
-                                app:layout_constraintHorizontal_bias="0"
-                                app:layout_constraintStart_toStartOf="@+id/home_device_title"
-                                app:layout_constraintTop_toBottomOf="@+id/home_device_title"
-                                tools:text="Pixel 4" />
-
-                            <androidx.appcompat.widget.AppCompatTextView
-                                android:id="@+id/home_device_board"
-                                android:layout_width="wrap_content"
-                                android:layout_height="wrap_content"
-                                android:text="@{Build.BOARD}"
-                                android:textAppearance="@style/AppearanceFoundation.Caption.Variant"
-                                app:layout_constraintBottom_toBottomOf="@+id/home_device_icon"
-                                app:layout_constraintEnd_toEndOf="@+id/home_device_title"
-                                app:layout_constraintHorizontal_bias="0"
-                                app:layout_constraintStart_toStartOf="@+id/home_device_title"
-                                app:layout_constraintTop_toBottomOf="@+id/home_device_product"
-                                tools:text="flame" />
-
-                        </androidx.constraintlayout.widget.ConstraintLayout>
-
-                        <androidx.constraintlayout.widget.ConstraintLayout
-                            android:id="@+id/home_device_details"
-                            android:layout_width="wrap_content"
-                            android:layout_height="wrap_content"
-                            android:padding="@dimen/l1"
-                            app:layout_constraintBottom_toBottomOf="parent"
-                            app:layout_constraintStart_toEndOf="@+id/home_device_overview"
-                            app:layout_constraintTop_toTopOf="parent">
-
-                            <androidx.appcompat.widget.AppCompatTextView
-                                android:id="@+id/home_device_extra_version_title"
-                                style="@style/W.Home.Extra.Title"
-                                android:text="@string/home_device_system"
-                                app:layout_constraintStart_toStartOf="parent"
-                                app:layout_constraintTop_toTopOf="parent" />
-
-                            <androidx.appcompat.widget.AppCompatTextView
-                                android:id="@+id/home_device_extra_version_value"
-                                style="@style/W.Home.Extra.Value"
-                                android:text="@{Build.VERSION.RELEASE}"
-                                app:layout_constraintBottom_toBottomOf="@+id/home_device_extra_version_title"
-                                app:layout_constraintEnd_toEndOf="parent"
-                                app:layout_constraintStart_toEndOf="@+id/home_device_extra_version_title"
-                                app:layout_constraintTop_toTopOf="@+id/home_device_extra_version_title"
-                                tools:text="10" />
-
-                            <androidx.appcompat.widget.AppCompatTextView
-                                android:id="@+id/home_device_extra_build_style_title"
-                                style="@style/W.Home.Extra.Title"
-                                android:text="@string/home_device_build_style"
-                                app:layout_constraintStart_toStartOf="parent"
-                                app:layout_constraintTop_toBottomOf="@+id/home_device_extra_version_title" />
-
-                            <androidx.appcompat.widget.AppCompatTextView
-                                android:id="@+id/home_device_extra_build_style_value"
-                                style="@style/W.Home.Extra.Value"
-                                android:text="@{XAndroidKt.isAB ? @string/yes : @string/no}"
-                                app:layout_constraintBottom_toBottomOf="@+id/home_device_extra_build_style_title"
-                                app:layout_constraintEnd_toEndOf="parent"
-                                app:layout_constraintStart_toEndOf="@+id/home_device_extra_build_style_title"
-                                app:layout_constraintTop_toTopOf="@+id/home_device_extra_build_style_title"
-                                tools:text="Yes" />
-
-                            <androidx.appcompat.widget.AppCompatTextView
-                                android:id="@+id/home_device_extra_build_type_title"
-                                style="@style/W.Home.Extra.Title"
-                                android:text="@string/home_device_build_type"
-                                app:layout_constraintStart_toStartOf="parent"
-                                app:layout_constraintTop_toBottomOf="@+id/home_device_extra_build_style_title" />
-
-                            <androidx.appcompat.widget.AppCompatTextView
-                                android:id="@+id/home_device_extra_build_type_value"
-                                style="@style/W.Home.Extra.Value"
-                                android:text="@{XAndroidKt.isSAR ? @string/yes : @string/no}"
-                                app:layout_constraintBottom_toBottomOf="@+id/home_device_extra_build_type_title"
-                                app:layout_constraintEnd_toEndOf="parent"
-                                app:layout_constraintStart_toEndOf="@+id/home_device_extra_build_type_title"
-                                app:layout_constraintTop_toTopOf="@+id/home_device_extra_build_type_title"
-                                tools:text="Yes" />
-
-                            <!--todo(topjohnwu) Add device info here-->
-                            <!--Copy & paste "..._title" and "..._value"-->
-                            <!--Change ids to match "home_device_extra_*info-type*_value" or "..._title"-->
-                            <!--Fix constraints by replacing ids (views are always bound to "title")-->
-
-                            <androidx.constraintlayout.widget.Group
-                                goneUnless="@{XSUKt.hasRoot}"
-                                android:layout_width="wrap_content"
-                                android:layout_height="wrap_content"
-                                app:constraint_referenced_ids="home_device_extra_build_style_title,home_device_extra_build_style_value,home_device_extra_build_type_title,home_device_extra_build_type_value"
-                                tools:visibility="gone" />
-
-                            <!--todo(topjohnwu) If info requires root add id to this group-->
-
-                        </androidx.constraintlayout.widget.ConstraintLayout>
-
-                    </androidx.constraintlayout.widget.ConstraintLayout>
-
-                </com.google.android.material.card.MaterialCardView>
-
-                <com.google.android.material.card.MaterialCardView
-                    android:id="@+id/home_magisk_wrapper"
-                    style="@style/WidgetFoundation.Card.Variant"
-                    android:layout_width="0dp"
-                    android:layout_height="wrap_content"
-                    android:layout_marginStart="@dimen/l1"
-                    android:layout_marginTop="@dimen/l1"
-                    android:layout_marginEnd="@dimen/l_50"
-                    app:layout_constrainedWidth="true"
-                    app:layout_constraintEnd_toStartOf="@+id/home_magisk_buttons"
-                    app:layout_constraintHorizontal_chainStyle="packed"
-                    app:layout_constraintStart_toStartOf="parent"
-                    app:layout_constraintTop_toBottomOf="@+id/home_device_wrapper"
-                    app:layout_constraintWidth_max="400dp">
-
-                    <androidx.constraintlayout.widget.ConstraintLayout
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        android:background="@drawable/bg_card"
-                        android:orientation="vertical">
-
-                        <androidx.constraintlayout.widget.ConstraintLayout
-                            android:layout_width="0dp"
-                            android:layout_height="wrap_content"
-                            android:animateLayoutChanges="true"
-                            android:paddingStart="@dimen/l_50"
-                            android:paddingTop="@dimen/l1"
-                            android:paddingBottom="@dimen/l1"
-                            app:layout_constraintBottom_toBottomOf="parent"
-                            app:layout_constraintEnd_toStartOf="@+id/home_magisk_info"
-                            app:layout_constraintStart_toStartOf="parent"
-                            app:layout_constraintTop_toTopOf="parent">
-
-                            <androidx.appcompat.widget.AppCompatImageView
-                                android:id="@+id/home_magisk_icon"
-                                style="@style/WidgetFoundation.Icon.Primary"
-                                android:background="@null"
-                                android:padding="@dimen/l_25"
-                                app:layout_constraintBottom_toBottomOf="parent"
-                                app:layout_constraintStart_toStartOf="parent"
-                                app:layout_constraintTop_toTopOf="parent"
-                                app:srcCompat="@drawable/ic_magisk_delete" />
-
-                            <androidx.appcompat.widget.AppCompatTextView
-                                android:id="@+id/home_magisk_title"
-                                android:layout_width="0dp"
-                                android:layout_height="wrap_content"
-                                android:layout_marginStart="@dimen/l_50"
-                                android:gravity="start|center_vertical"
-                                android:text="@string/magisk"
-                                android:textAppearance="@style/AppearanceFoundation.Title"
-                                app:layout_constrainedWidth="true"
-                                app:layout_constraintBottom_toTopOf="@+id/home_magisk_status"
-                                app:layout_constraintEnd_toEndOf="parent"
-                                app:layout_constraintStart_toEndOf="@+id/home_magisk_icon"
-                                app:layout_constraintTop_toTopOf="@+id/home_magisk_icon"
-                                app:layout_constraintVertical_chainStyle="packed" />
-
-                            <androidx.appcompat.widget.AppCompatTextView
-                                android:id="@+id/home_magisk_status"
-                                gone="@{viewModel.stateTextMagisk.empty}"
-                                android:layout_width="0dp"
-                                android:layout_height="wrap_content"
-                                android:text="@{viewModel.stateTextMagisk}"
-                                android:textAppearance="@style/AppearanceFoundation.Caption.Variant"
-                                app:layout_constrainedWidth="true"
-                                app:layout_constraintBottom_toTopOf="@+id/home_magisk_version"
-                                app:layout_constraintEnd_toEndOf="@+id/home_magisk_title"
-                                app:layout_constraintStart_toStartOf="@+id/home_magisk_title"
-                                app:layout_constraintTop_toBottomOf="@+id/home_magisk_title"
-                                tools:text="@string/up_to_date" />
-
-                            <androidx.appcompat.widget.AppCompatTextView
-                                android:id="@+id/home_magisk_version"
-                                gone="@{viewModel.stateVersionUpdateMagisk.empty}"
-                                android:layout_width="0dp"
-                                android:layout_height="wrap_content"
-                                android:text="@{viewModel.stateVersionUpdateMagisk}"
-                                android:textAppearance="@style/AppearanceFoundation.Caption.Variant"
-                                app:layout_constrainedWidth="true"
-                                app:layout_constraintBottom_toBottomOf="@+id/home_magisk_icon"
-                                app:layout_constraintEnd_toEndOf="@+id/home_magisk_title"
-                                app:layout_constraintStart_toStartOf="@+id/home_magisk_title"
-                                tools:visibility="gone"
-                                app:layout_constraintTop_toBottomOf="@+id/home_magisk_status" />
-
-                        </androidx.constraintlayout.widget.ConstraintLayout>
-
-                        <androidx.constraintlayout.widget.ConstraintLayout
-                            android:id="@+id/home_magisk_info"
-                            android:layout_width="wrap_content"
-                            android:layout_height="wrap_content"
-                            android:clipToPadding="false"
-                            android:padding="@dimen/l1"
-                            app:layout_constraintBottom_toBottomOf="parent"
-                            app:layout_constraintEnd_toEndOf="parent"
-                            app:layout_constraintTop_toTopOf="parent"
-                            app:layout_constraintWidth_max="150dp">
-
-                            <androidx.appcompat.widget.AppCompatTextView
-                                android:id="@+id/home_magisk_extra_version_title"
-                                style="@style/W.Home.Extra.Title"
-                                android:text="@string/home_extra_version"
-                                app:layout_constraintStart_toStartOf="parent"
-                                app:layout_constraintTop_toTopOf="parent" />
-
-                            <androidx.appcompat.widget.AppCompatTextView
-                                android:id="@+id/home_magisk_extra_version_value"
-                                style="@style/W.Home.Extra.Value"
-                                android:text="@{Info.env.magiskVersionString}"
-                                app:layout_constraintBottom_toBottomOf="@+id/home_magisk_extra_version_title"
-                                app:layout_constraintEnd_toEndOf="parent"
-                                app:layout_constraintStart_toEndOf="@+id/home_magisk_extra_version_title"
-                                app:layout_constraintTop_toTopOf="@+id/home_magisk_extra_version_title"
-                                tools:text="20.1" />
-
-                            <androidx.appcompat.widget.AppCompatTextView
-                                android:id="@+id/home_magisk_extra_code_title"
-                                style="@style/W.Home.Extra.Title"
-                                android:text="@string/home_extra_code"
-                                app:layout_constraintStart_toStartOf="parent"
-                                app:layout_constraintTop_toBottomOf="@+id/home_magisk_extra_version_title" />
-
-                            <androidx.appcompat.widget.AppCompatTextView
-                                android:id="@+id/home_magisk_extra_code_value"
-                                style="@style/W.Home.Extra.Value"
-                                android:text="@{Integer.toString(Info.env.magiskVersionCode)}"
-                                app:layout_constraintBottom_toBottomOf="@+id/home_magisk_extra_code_title"
-                                app:layout_constraintEnd_toEndOf="parent"
-                                app:layout_constraintStart_toEndOf="@+id/home_magisk_extra_code_title"
-                                app:layout_constraintTop_toTopOf="@+id/home_magisk_extra_code_title"
-                                tools:text="12345" />
-
-                            <androidx.appcompat.widget.AppCompatTextView
-                                android:id="@+id/home_magisk_extra_mode_title"
-                                style="@style/W.Home.Extra.Title"
-                                android:text="@string/home_extra_mode"
-                                app:layout_constraintStart_toStartOf="parent"
-                                app:layout_constraintTop_toBottomOf="@+id/home_magisk_extra_code_title" />
-
-                            <androidx.appcompat.widget.AppCompatTextView
-                                android:id="@+id/home_magisk_extra_mode_value"
-                                style="@style/W.Home.Extra.Value"
-                                android:text="@{Config.coreOnly ? @string/home_extra_mode_safe : @string/home_extra_mode_normal}"
-                                app:layout_constraintBottom_toBottomOf="@+id/home_magisk_extra_mode_title"
-                                app:layout_constraintEnd_toEndOf="parent"
-                                app:layout_constraintStart_toEndOf="@+id/home_magisk_extra_mode_title"
-                                app:layout_constraintTop_toTopOf="@+id/home_magisk_extra_mode_title"
-                                tools:text="Normal" />
-
-                            <androidx.appcompat.widget.AppCompatTextView
-                                android:id="@+id/home_magisk_extra_connection_title"
-                                style="@style/W.Home.Extra.Title"
-                                android:text="@string/home_extra_connection"
-                                app:layout_constraintStart_toStartOf="parent"
-                                app:layout_constraintTop_toBottomOf="@+id/home_magisk_extra_mode_title" />
-
-                            <!--todo(topjohnwu) fix connection type-->
-                            <!--don't forget to bind verbose values to proper resources-->
-
-                            <androidx.appcompat.widget.AppCompatTextView
-                                android:id="@+id/home_magisk_extra_connection_value"
-                                style="@style/W.Home.Extra.Value"
-                                app:layout_constraintBottom_toBottomOf="@+id/home_magisk_extra_connection_title"
-                                app:layout_constraintEnd_toEndOf="parent"
-                                app:layout_constraintStart_toEndOf="@+id/home_magisk_extra_connection_title"
-                                app:layout_constraintTop_toTopOf="@+id/home_magisk_extra_connection_title"
-                                tools:text="Normal" />
-
-                            <androidx.constraintlayout.widget.Group
-                                gone="@{Info.env.magiskVersionCode &lt; 0}"
-                                android:layout_width="wrap_content"
-                                android:layout_height="wrap_content"
-                                app:constraint_referenced_ids="home_magisk_extra_version_title,home_magisk_extra_version_value,home_magisk_extra_code_title,home_magisk_extra_code_value,home_magisk_extra_mode_title,home_magisk_extra_mode_value,home_magisk_extra_connection_title,home_magisk_extra_connection_value" />
-
-                        </androidx.constraintlayout.widget.ConstraintLayout>
-
-                    </androidx.constraintlayout.widget.ConstraintLayout>
-
-                    <ProgressBar
-                        style="@style/WidgetFoundation.ProgressBar"
-                        gone="@{viewModel.stateMagiskProgress == 0 || viewModel.stateMagiskProgress == 100}"
-                        android:layout_width="match_parent"
-                        android:layout_gravity="bottom"
-                        android:max="100"
-                        android:progress="@{viewModel.stateMagiskProgress}" />
-
-                </com.google.android.material.card.MaterialCardView>
-
-                <FrameLayout
-                    android:id="@+id/home_magisk_buttons"
-                    gone="@{viewModel.stateMagisk == MagiskState.LOADING || !viewModel.isConnected}"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_marginEnd="@dimen/l_50"
-                    android:animateLayoutChanges="true"
-                    app:layout_constraintBottom_toBottomOf="@+id/home_magisk_wrapper"
-                    app:layout_constraintEnd_toEndOf="parent"
-                    app:layout_constraintHorizontal_chainStyle="packed"
-                    app:layout_constraintStart_toEndOf="@+id/home_magisk_wrapper"
-                    app:layout_constraintTop_toTopOf="@+id/home_magisk_wrapper"
-                    app:layout_constraintVertical_bias=".5">
-
-                    <com.google.android.material.floatingactionbutton.FloatingActionButton
-                        gone="@{viewModel.stateMagisk != MagiskState.OBSOLETE}"
-                        isEnabled="@{viewModel.stateManager == MagiskState.UP_TO_DATE &amp;&amp; (viewModel.stateMagiskProgress == 0 || viewModel.stateMagiskProgress == 100)}"
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:layout_gravity="center"
-                        android:onClick="@{() -> viewModel.onMagiskPressed()}"
-                        android:text="@string/update"
-                        app:backgroundTint="?colorPrimary"
-                        app:elevation="0dp"
-                        app:fabSize="mini"
-                        app:srcCompat="@drawable/ic_update_md2"
-                        app:tint="?colorOnPrimary"
-                        tools:visibility="gone" />
-
-                    <com.google.android.material.floatingactionbutton.FloatingActionButton
-                        gone="@{viewModel.stateMagisk == MagiskState.OBSOLETE}"
-                        isEnabled="@{viewModel.stateManager == MagiskState.UP_TO_DATE &amp;&amp; (viewModel.stateMagiskProgress == 0 || viewModel.stateMagiskProgress == 100)}"
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:layout_gravity="center"
-                        android:onClick="@{() -> viewModel.onMagiskPressed()}"
-                        android:text="@string/install"
-                        app:backgroundTint="?colorSurface"
-                        app:elevation="0dp"
-                        app:fabSize="mini"
-                        app:srcCompat="@drawable/ic_install"
-                        app:tint="?colorPrimary" />
-
-                </FrameLayout>
-
-                <com.google.android.material.card.MaterialCardView
-                    android:id="@+id/home_manager_wrapper"
-                    style="@style/WidgetFoundation.Card.Variant"
-                    android:layout_width="0dp"
-                    android:layout_height="wrap_content"
-                    android:layout_marginStart="@dimen/l1"
-                    android:layout_marginTop="@dimen/l1"
-                    android:layout_marginEnd="@dimen/l_50"
-                    app:layout_constrainedWidth="true"
-                    app:layout_constraintEnd_toStartOf="@+id/home_manager_buttons"
-                    app:layout_constraintHorizontal_chainStyle="packed"
-                    app:layout_constraintStart_toStartOf="parent"
-                    app:layout_constraintTop_toBottomOf="@+id/home_magisk_wrapper"
-                    app:layout_constraintWidth_max="400dp">
-
-                    <androidx.constraintlayout.widget.ConstraintLayout
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        android:background="@drawable/bg_card"
-                        android:orientation="vertical">
-
-                        <androidx.constraintlayout.widget.ConstraintLayout
-                            android:layout_width="0dp"
-                            android:layout_height="wrap_content"
-                            android:paddingStart="@dimen/l_50"
-                            android:paddingTop="@dimen/l1"
-                            android:paddingBottom="@dimen/l1"
-                            app:layout_constraintBottom_toBottomOf="parent"
-                            app:layout_constraintEnd_toStartOf="@+id/home_manager_info"
-                            app:layout_constraintStart_toStartOf="parent"
-                            app:layout_constraintTop_toTopOf="parent">
-
-                            <androidx.appcompat.widget.AppCompatImageView
-                                android:id="@+id/home_manager_icon"
-                                style="@style/WidgetFoundation.Icon.Primary"
-                                android:background="@null"
-                                android:padding="@dimen/l_50"
-                                app:layout_constraintBottom_toBottomOf="parent"
-                                app:layout_constraintStart_toStartOf="parent"
-                                app:layout_constraintTop_toTopOf="parent"
-                                app:srcCompat="@drawable/ic_manager" />
-
-                            <androidx.appcompat.widget.AppCompatTextView
-                                android:id="@+id/home_manager_title"
-                                android:layout_width="0dp"
-                                android:layout_height="wrap_content"
-                                android:layout_marginStart="@dimen/l_50"
-                                android:gravity="start|center_vertical"
-                                android:text="@{viewModel.stateHideManagerName}"
-                                android:textAppearance="@style/AppearanceFoundation.Title"
-                                app:layout_constrainedWidth="true"
-                                app:layout_constraintBottom_toTopOf="@+id/home_manager_status"
-                                app:layout_constraintEnd_toEndOf="parent"
-                                app:layout_constraintStart_toEndOf="@+id/home_manager_icon"
-                                app:layout_constraintTop_toTopOf="@+id/home_manager_icon"
-                                app:layout_constraintVertical_chainStyle="packed"
-                                tools:text="@string/manager" />
-
-                            <androidx.appcompat.widget.AppCompatTextView
-                                android:id="@+id/home_manager_status"
-                                gone="@{viewModel.stateTextManager.empty}"
-                                android:layout_width="0dp"
-                                android:layout_height="wrap_content"
-                                android:text="@{viewModel.stateTextManager}"
-                                android:textAppearance="@style/AppearanceFoundation.Caption.Variant"
-                                app:layout_constrainedWidth="true"
-                                app:layout_constraintBottom_toTopOf="@+id/home_manager_version"
-                                app:layout_constraintEnd_toEndOf="@+id/home_manager_title"
-                                app:layout_constraintStart_toStartOf="@+id/home_manager_title"
-                                app:layout_constraintTop_toBottomOf="@+id/home_manager_title"
-                                tools:text="@string/obsolete" />
-
-                            <androidx.appcompat.widget.AppCompatTextView
-                                android:id="@+id/home_manager_version"
-                                gone="@{viewModel.stateVersionUpdateManager.empty}"
-                                android:layout_width="0dp"
-                                android:layout_height="wrap_content"
-                                android:text="@{viewModel.stateVersionUpdateManager}"
-                                android:textAppearance="@style/AppearanceFoundation.Caption.Variant"
-                                app:layout_constrainedWidth="true"
-                                app:layout_constraintBottom_toBottomOf="@+id/home_manager_icon"
-                                app:layout_constraintEnd_toEndOf="@+id/home_manager_title"
-                                app:layout_constraintStart_toStartOf="@+id/home_manager_title"
-                                app:layout_constraintTop_toBottomOf="@+id/home_manager_status"
-                                tools:text="10.0.0 > 10.0.1" />
-
-                        </androidx.constraintlayout.widget.ConstraintLayout>
-
-                        <androidx.constraintlayout.widget.ConstraintLayout
-                            android:id="@+id/home_manager_info"
-                            android:layout_width="wrap_content"
-                            android:layout_height="wrap_content"
-                            android:clipToPadding="false"
-                            android:padding="@dimen/l1"
-                            app:layout_constrainedWidth="true"
-                            app:layout_constraintBottom_toBottomOf="parent"
-                            app:layout_constraintEnd_toEndOf="parent"
-                            app:layout_constraintTop_toTopOf="parent"
-                            app:layout_constraintWidth_max="150dp">
-
-                            <androidx.appcompat.widget.AppCompatTextView
-                                android:id="@+id/home_manager_extra_version_title"
-                                style="@style/W.Home.Extra.Title"
-                                android:text="@string/home_extra_version"
-                                app:layout_constraintStart_toStartOf="parent"
-                                app:layout_constraintTop_toTopOf="parent" />
-
-                            <androidx.appcompat.widget.AppCompatTextView
-                                android:id="@+id/home_manager_extra_version_value"
-                                style="@style/W.Home.Extra.Value"
-                                android:text="@{BuildConfig.VERSION_NAME}"
-                                app:layout_constraintBottom_toBottomOf="@+id/home_manager_extra_version_title"
-                                app:layout_constraintEnd_toEndOf="parent"
-                                app:layout_constraintStart_toEndOf="@+id/home_manager_extra_version_title"
-                                app:layout_constraintTop_toTopOf="@+id/home_manager_extra_version_title"
-                                tools:text="8.0.0" />
-
-                            <androidx.appcompat.widget.AppCompatTextView
-                                android:id="@+id/home_manager_extra_code_title"
-                                style="@style/W.Home.Extra.Title"
-                                android:text="@string/home_extra_code"
-                                app:layout_constraintStart_toStartOf="parent"
-                                app:layout_constraintTop_toBottomOf="@+id/home_manager_extra_version_title" />
-
-                            <androidx.appcompat.widget.AppCompatTextView
-                                android:id="@+id/home_manager_extra_code_value"
-                                style="@style/W.Home.Extra.Value"
-                                android:text="@{Integer.toString(BuildConfig.VERSION_CODE)}"
-                                app:layout_constraintBottom_toBottomOf="@+id/home_manager_extra_code_title"
-                                app:layout_constraintEnd_toEndOf="parent"
-                                app:layout_constraintStart_toEndOf="@+id/home_manager_extra_code_title"
-                                app:layout_constraintTop_toTopOf="@+id/home_manager_extra_code_title"
-                                tools:text="12345" />
-
-                            <androidx.appcompat.widget.AppCompatTextView
-                                android:id="@+id/home_manager_extra_mode_title"
-                                style="@style/W.Home.Extra.Title"
-                                android:text="@string/home_extra_mode"
-                                app:layout_constraintStart_toStartOf="parent"
-                                app:layout_constraintTop_toBottomOf="@+id/home_manager_extra_code_title" />
-
-                            <androidx.appcompat.widget.AppCompatTextView
-                                android:id="@+id/home_manager_extra_mode_value"
-                                style="@style/W.Home.Extra.Value"
-                                android:text="@{InfoKt.isRunningAsStub ? @string/home_extra_mode_stub : @string/home_extra_mode_normal}"
-                                app:layout_constraintBottom_toBottomOf="@+id/home_manager_extra_mode_title"
-                                app:layout_constraintEnd_toEndOf="parent"
-                                app:layout_constraintStart_toEndOf="@+id/home_manager_extra_mode_title"
-                                app:layout_constraintTop_toTopOf="@+id/home_manager_extra_mode_title"
-                                tools:text="@string/home_extra_mode_stub" />
-
-                            <androidx.appcompat.widget.AppCompatTextView
-                                android:id="@+id/home_manager_extra_package_title"
-                                style="@style/W.Home.Extra.Title"
-                                android:text="@string/home_extra_package"
-                                app:layout_constraintStart_toStartOf="parent"
-                                app:layout_constraintTop_toBottomOf="@+id/home_manager_extra_mode_title" />
-
-                            <androidx.appcompat.widget.AppCompatTextView
-                                android:id="@+id/home_manager_extra_package_value"
-                                style="@style/W.Home.Extra.Value"
-                                android:text="@{viewModel.statePackageManager}"
-                                app:layout_constraintBottom_toBottomOf="@+id/home_manager_extra_package_title"
-                                app:layout_constraintEnd_toEndOf="parent"
-                                app:layout_constraintStart_toEndOf="@+id/home_manager_extra_package_title"
-                                app:layout_constraintTop_toTopOf="@+id/home_manager_extra_package_title"
-                                tools:text="com.soqspa.xmclaeixl" />
-
-                            <androidx.constraintlayout.widget.Group
-                                gone="@{viewModel.statePackageOriginal}"
-                                android:layout_width="wrap_content"
-                                android:layout_height="wrap_content"
-                                app:constraint_referenced_ids="home_manager_extra_package_title,home_manager_extra_package_value" />
-
-                        </androidx.constraintlayout.widget.ConstraintLayout>
-
-                    </androidx.constraintlayout.widget.ConstraintLayout>
-
-                    <ProgressBar
-                        style="@style/WidgetFoundation.ProgressBar"
-                        gone="@{viewModel.stateManagerProgress == 0 || viewModel.stateManagerProgress == 100}"
-                        android:layout_width="match_parent"
-                        android:layout_gravity="bottom"
-                        android:max="100"
-                        android:progress="@{viewModel.stateManagerProgress}" />
-
-                </com.google.android.material.card.MaterialCardView>
-
-                <FrameLayout
-                    android:id="@+id/home_manager_buttons"
-                    gone="@{viewModel.stateManager == MagiskState.LOADING || !viewModel.isConnected}"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_marginEnd="@dimen/l_50"
-                    app:layout_constraintBottom_toBottomOf="@+id/home_manager_wrapper"
-                    app:layout_constraintEnd_toEndOf="parent"
-                    app:layout_constraintHorizontal_chainStyle="packed"
-                    app:layout_constraintStart_toEndOf="@+id/home_manager_wrapper"
-                    app:layout_constraintTop_toTopOf="@+id/home_manager_wrapper"
-                    app:layout_constraintVertical_bias=".5">
-
-                    <com.google.android.material.floatingactionbutton.FloatingActionButton
-                        gone="@{viewModel.stateManager != MagiskState.OBSOLETE}"
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:layout_gravity="center"
-                        android:onClick="@{() -> viewModel.onManagerPressed()}"
-                        app:backgroundTint="?colorPrimary"
-                        app:elevation="0dp"
-                        app:fabSize="mini"
-                        app:srcCompat="@drawable/ic_update_md2"
-                        app:tint="?colorOnPrimary" />
-
-                    <com.google.android.material.floatingactionbutton.FloatingActionButton
-                        gone="@{viewModel.stateManager == MagiskState.OBSOLETE}"
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:layout_gravity="center"
-                        android:onClick="@{() -> viewModel.onManagerPressed()}"
-                        app:backgroundTint="?colorSurface"
-                        app:elevation="0dp"
-                        app:fabSize="mini"
-                        app:srcCompat="@drawable/ic_install"
-                        app:tint="?colorPrimary"
-                        tools:visibility="gone" />
-
-                </FrameLayout>
-
-            </androidx.constraintlayout.widget.ConstraintLayout>
+                app:layout_constraintTop_toTopOf="parent" />
+
+            <include
+                android:id="@+id/home_magisk_wrapper"
+                layout="@layout/include_home_magisk"
+                viewModel="@{viewModel}"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="@dimen/l_50"
+                app:layout_constraintTop_toBottomOf="@+id/home_device_wrapper" />
+
+            <include
+                android:id="@+id/home_manager_wrapper"
+                layout="@layout/include_home_manager"
+                viewModel="@{viewModel}"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="@dimen/l_50"
+                app:layout_constraintTop_toBottomOf="@+id/home_magisk_wrapper" />
 
             <com.google.android.material.card.MaterialCardView
                 style="@style/WidgetFoundation.Card"
diff --git a/app/src/main/res/layout/include_home_device.xml b/app/src/main/res/layout/include_home_device.xml
new file mode 100644
index 000000000..34845ee97
--- /dev/null
+++ b/app/src/main/res/layout/include_home_device.xml
@@ -0,0 +1,246 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <data>
+
+        <import type="android.os.Build" />
+
+        <import type="com.topjohnwu.magisk.extensions.XAndroidKt" />
+
+        <import type="com.topjohnwu.magisk.extensions.XSUKt" />
+
+        <variable
+            name="viewModel"
+            type="com.topjohnwu.magisk.ui.home.HomeViewModel" />
+
+    </data>
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        tools:layout_gravity="center">
+
+        <androidx.appcompat.widget.AppCompatImageView
+            android:id="@+id/home_device_icon"
+            style="@style/WidgetFoundation.Icon.Primary"
+            android:layout_marginStart="@dimen/l1"
+            android:padding="@dimen/l_50"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            app:srcCompat="@drawable/ic_device" />
+
+        <androidx.appcompat.widget.AppCompatTextView
+            android:id="@+id/home_device_title"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="@dimen/l1"
+            android:text="@string/home_device_title"
+            android:textAppearance="@style/AppearanceFoundation.Title"
+            app:layout_constraintBottom_toBottomOf="@+id/home_device_icon"
+            app:layout_constraintEnd_toStartOf="@+id/home_device_action_reboot"
+            app:layout_constraintStart_toEndOf="@+id/home_device_icon"
+            app:layout_constraintTop_toTopOf="parent" />
+
+        <!--todo (diareuse) add dropdown menu so users can choose which reboot they want -->
+        <com.google.android.material.button.MaterialButton
+            android:id="@+id/home_device_action_reboot"
+            style="@style/WidgetFoundation.Button.Text"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginEnd="@dimen/l_50"
+            android:text="@string/reboot"
+            android:textAllCaps="false"
+            app:icon="@drawable/ic_restart"
+            app:layout_constraintBottom_toBottomOf="@+id/home_device_title"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toTopOf="@+id/home_device_title" />
+
+        <androidx.constraintlayout.widget.Barrier
+            android:id="@+id/home_device_title_barrier"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            app:barrierDirection="bottom"
+            app:constraint_referenced_ids="home_device_action_reboot,home_device_title,home_device_icon" />
+
+        <HorizontalScrollView
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:fadingEdgeLength="@dimen/l1"
+            android:paddingStart="@dimen/l1"
+            android:paddingTop="@dimen/l_50"
+            android:paddingEnd="@dimen/l1"
+            android:requiresFadingEdge="horizontal"
+            android:scrollbars="none"
+            app:layout_constraintTop_toBottomOf="@+id/home_device_title_barrier">
+
+            <LinearLayout
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:orientation="horizontal">
+
+                <com.google.android.material.card.MaterialCardView
+                    style="@style/W.Home.Card.First"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content">
+
+                    <androidx.constraintlayout.widget.ConstraintLayout
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content">
+
+                        <androidx.appcompat.widget.AppCompatTextView
+                            android:id="@+id/home_device_info_title"
+                            style="@style/W.Home.Title"
+                            android:text="@string/home_device_info_title"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toTopOf="parent" />
+
+                        <View
+                            style="@style/W.Home.Section"
+                            app:layout_constraintBottom_toBottomOf="parent"
+                            app:layout_constraintEnd_toEndOf="parent"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toBottomOf="@+id/home_device_info_title" />
+
+                        <LinearLayout
+                            android:id="@+id/home_device_info_manufacturer"
+                            style="@style/W.Home.Item.Top"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toBottomOf="@+id/home_device_info_title">
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent"
+                                android:text="@string/home_device_extra_manufacturer" />
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent.Right"
+                                android:text="@{Build.MANUFACTURER}"
+                                tools:text="Google" />
+
+                        </LinearLayout>
+
+                        <LinearLayout
+                            android:id="@+id/home_device_info_product"
+                            style="@style/W.Home.Item"
+                            app:layout_constraintStart_toStartOf="@+id/home_device_info_manufacturer"
+                            app:layout_constraintTop_toBottomOf="@+id/home_device_info_manufacturer">
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent"
+                                android:text="@string/home_device_extra_model" />
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent.Right"
+                                android:text="@{Build.DEVICE ?? Build.PRODUCT}"
+                                tools:text="Pixel 4" />
+
+                        </LinearLayout>
+
+                        <LinearLayout
+                            android:id="@+id/home_device_info_board"
+                            style="@style/W.Home.Item"
+                            app:layout_constraintStart_toStartOf="@+id/home_device_info_product"
+                            app:layout_constraintTop_toBottomOf="@+id/home_device_info_product">
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent"
+                                android:text="@string/home_device_extra_board" />
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent.Right"
+                                android:text="@{Build.BOARD}"
+                                tools:text="flame" />
+
+                        </LinearLayout>
+
+                        <LinearLayout
+                            android:id="@+id/home_device_info_version"
+                            style="@style/W.Home.Item.Bottom"
+                            app:layout_constraintStart_toStartOf="@+id/home_device_info_board"
+                            app:layout_constraintTop_toBottomOf="@+id/home_device_info_board">
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent"
+                                android:text="@string/home_device_system" />
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent.Right"
+                                android:text="@{Build.VERSION.RELEASE}"
+                                tools:text="10" />
+
+                        </LinearLayout>
+
+                    </androidx.constraintlayout.widget.ConstraintLayout>
+
+                </com.google.android.material.card.MaterialCardView>
+
+                <com.google.android.material.card.MaterialCardView
+                    style="@style/W.Home.Card"
+                    goneUnless="@{XSUKt.hasRoot}"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content">
+
+                    <androidx.constraintlayout.widget.ConstraintLayout
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content">
+
+                        <androidx.appcompat.widget.AppCompatTextView
+                            android:id="@+id/home_device_details_title"
+                            style="@style/W.Home.Title"
+                            android:text="@string/home_details_title"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toTopOf="parent" />
+
+                        <View
+                            style="@style/W.Home.Section"
+                            app:layout_constraintBottom_toBottomOf="parent"
+                            app:layout_constraintEnd_toEndOf="parent"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toBottomOf="@+id/home_device_details_title" />
+
+                        <LinearLayout
+                            android:id="@+id/home_device_details_ab"
+                            style="@style/W.Home.Item.Top"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toBottomOf="@+id/home_device_details_title">
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent"
+                                android:text="@string/home_device_build_style" />
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent.Right"
+                                android:text="@{XAndroidKt.isAB ? @string/yes : @string/no}"
+                                tools:text="Google" />
+
+                        </LinearLayout>
+
+                        <LinearLayout
+                            android:id="@+id/home_device_details_sar"
+                            style="@style/W.Home.Item.Bottom"
+                            app:layout_constraintStart_toStartOf="@+id/home_device_details_ab"
+                            app:layout_constraintTop_toBottomOf="@+id/home_device_details_ab">
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent"
+                                android:text="@string/home_device_build_type" />
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent.Right"
+                                android:text="@{XAndroidKt.isSAR ? @string/yes : @string/no}"
+                                tools:text="Pixel 4" />
+
+                        </LinearLayout>
+
+                    </androidx.constraintlayout.widget.ConstraintLayout>
+
+                </com.google.android.material.card.MaterialCardView>
+
+            </LinearLayout>
+
+        </HorizontalScrollView>
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+
+</layout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/include_home_magisk.xml b/app/src/main/res/layout/include_home_magisk.xml
new file mode 100644
index 000000000..665136729
--- /dev/null
+++ b/app/src/main/res/layout/include_home_magisk.xml
@@ -0,0 +1,308 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <data>
+
+        <import type="com.topjohnwu.magisk.core.Info" />
+
+        <import type="com.topjohnwu.magisk.core.InfoKt" />
+
+        <import type="com.topjohnwu.magisk.core.Config" />
+
+        <import type="com.topjohnwu.magisk.ui.home.MagiskState" />
+
+        <variable
+            name="viewModel"
+            type="com.topjohnwu.magisk.ui.home.HomeViewModel" />
+
+    </data>
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        tools:layout_gravity="center">
+
+        <androidx.appcompat.widget.AppCompatImageView
+            android:id="@+id/home_magisk_icon"
+            style="@style/WidgetFoundation.Icon.Primary"
+            android:layout_marginStart="@dimen/l1"
+            android:padding="@dimen/l_25"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            app:srcCompat="@drawable/ic_magisk" />
+
+        <androidx.appcompat.widget.AppCompatTextView
+            android:id="@+id/home_magisk_title"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="@dimen/l1"
+            android:text="@string/magisk"
+            android:textAppearance="@style/AppearanceFoundation.Title"
+            app:layout_constraintBottom_toBottomOf="@+id/home_magisk_icon"
+            app:layout_constraintEnd_toStartOf="@+id/home_magisk_action"
+            app:layout_constraintStart_toEndOf="@+id/home_magisk_icon"
+            app:layout_constraintTop_toTopOf="parent" />
+
+        <FrameLayout
+            android:id="@+id/home_magisk_action"
+            gone="@{viewModel.stateMagisk == MagiskState.LOADING || !viewModel.isConnected}"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            app:layout_constraintBottom_toBottomOf="@+id/home_magisk_title"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toTopOf="@+id/home_magisk_title">
+
+            <com.google.android.material.button.MaterialButton
+                style="@style/WidgetFoundation.Button"
+                gone="@{viewModel.stateMagisk != MagiskState.OBSOLETE}"
+                isEnabled="@{viewModel.stateManager == MagiskState.UP_TO_DATE &amp;&amp; (viewModel.stateMagiskProgress == 0 || viewModel.stateMagiskProgress == 100)}"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginEnd="@dimen/l_50"
+                android:onClick="@{() -> viewModel.onMagiskPressed()}"
+                android:text="@string/update"
+                android:textAllCaps="false"
+                app:icon="@drawable/ic_update_md2" />
+
+            <com.google.android.material.button.MaterialButton
+                style="@style/WidgetFoundation.Button.Text"
+                gone="@{viewModel.stateMagisk == MagiskState.OBSOLETE}"
+                isEnabled="@{viewModel.stateManager == MagiskState.UP_TO_DATE &amp;&amp; (viewModel.stateMagiskProgress == 0 || viewModel.stateMagiskProgress == 100)}"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginEnd="@dimen/l_50"
+                android:onClick="@{() -> viewModel.onMagiskPressed()}"
+                android:text="@string/install"
+                android:textAllCaps="false"
+                app:icon="@drawable/ic_install" />
+
+        </FrameLayout>
+
+        <androidx.constraintlayout.widget.Barrier
+            android:id="@+id/home_magisk_title_barrier"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            app:barrierDirection="bottom"
+            app:constraint_referenced_ids="home_magisk_action,home_magisk_title,home_magisk_icon" />
+
+        <HorizontalScrollView
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:fadingEdgeLength="@dimen/l1"
+            android:paddingStart="@dimen/l1"
+            android:paddingTop="@dimen/l_50"
+            android:paddingEnd="@dimen/l1"
+            android:requiresFadingEdge="horizontal"
+            android:scrollbars="none"
+            app:layout_constraintTop_toBottomOf="@+id/home_magisk_title_barrier">
+
+            <LinearLayout
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:orientation="horizontal">
+
+                <com.google.android.material.card.MaterialCardView
+                    style="@style/W.Home.Card.First"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content">
+
+                    <androidx.constraintlayout.widget.ConstraintLayout
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content">
+
+                        <androidx.appcompat.widget.AppCompatTextView
+                            android:id="@+id/home_magisk_remote_title"
+                            style="@style/W.Home.Title"
+                            android:text="@string/module_section_remote"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toTopOf="parent" />
+
+                        <View
+                            style="@style/W.Home.Section"
+                            app:layout_constraintBottom_toBottomOf="parent"
+                            app:layout_constraintEnd_toEndOf="parent"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toBottomOf="@+id/home_magisk_remote_title" />
+
+                        <LinearLayout
+                            android:id="@+id/home_magisk_remote_version"
+                            style="@style/W.Home.Item.Top"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toBottomOf="@+id/home_magisk_remote_title">
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent"
+                                android:text="@string/home_extra_version" />
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent.Right"
+                                android:text="@{viewModel.stateVersionMagisk}"
+                                tools:text="20.1" />
+
+                        </LinearLayout>
+
+                        <LinearLayout
+                            android:id="@+id/home_magisk_remote_version_code"
+                            style="@style/W.Home.Item.Bottom"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toBottomOf="@+id/home_magisk_remote_version">
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent"
+                                android:text="@string/home_extra_code" />
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent.Right"
+                                android:text="@{Integer.toString(viewModel.stateCodeMagisk)}"
+                                tools:text="12345" />
+
+                        </LinearLayout>
+
+                    </androidx.constraintlayout.widget.ConstraintLayout>
+
+                    <ProgressBar
+                        style="@style/WidgetFoundation.ProgressBar"
+                        gone="@{viewModel.stateMagiskProgress == 0 || viewModel.stateMagiskProgress == 100}"
+                        android:layout_width="match_parent"
+                        android:layout_gravity="bottom"
+                        android:max="100"
+                        android:progress="@{viewModel.stateMagiskProgress}" />
+
+                </com.google.android.material.card.MaterialCardView>
+
+                <com.google.android.material.card.MaterialCardView
+                    style="@style/W.Home.Card"
+                    gone="@{Info.env.magiskVersionCode &lt; 0}"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content">
+
+                    <androidx.constraintlayout.widget.ConstraintLayout
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content">
+
+                        <androidx.appcompat.widget.AppCompatTextView
+                            android:id="@+id/home_magisk_internal_title"
+                            style="@style/W.Home.Title"
+                            android:text="@string/installed"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toTopOf="parent" />
+
+                        <View
+                            style="@style/W.Home.Section"
+                            app:layout_constraintBottom_toBottomOf="parent"
+                            app:layout_constraintEnd_toEndOf="parent"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toBottomOf="@+id/home_magisk_internal_title" />
+
+                        <LinearLayout
+                            android:id="@+id/home_magisk_internal_version"
+                            style="@style/W.Home.Item.Top"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toBottomOf="@+id/home_magisk_internal_title">
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent"
+                                android:text="@string/home_extra_version" />
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent.Right"
+                                android:text="@{Info.env.magiskVersionString}"
+                                tools:text="20.1" />
+
+                        </LinearLayout>
+
+                        <LinearLayout
+                            android:id="@+id/home_magisk_internal_version_code"
+                            style="@style/W.Home.Item.Bottom"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toBottomOf="@+id/home_magisk_internal_version">
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent"
+                                android:text="@string/home_extra_code" />
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent.Right"
+                                android:text="@{Integer.toString(Info.env.magiskVersionCode)}"
+                                tools:text="12345" />
+
+                        </LinearLayout>
+
+                    </androidx.constraintlayout.widget.ConstraintLayout>
+
+                </com.google.android.material.card.MaterialCardView>
+
+                <com.google.android.material.card.MaterialCardView
+                    style="@style/W.Home.Card"
+                    gone="@{Info.env.magiskVersionCode &lt; 0}"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content">
+
+                    <androidx.constraintlayout.widget.ConstraintLayout
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content">
+
+                        <androidx.appcompat.widget.AppCompatTextView
+                            android:id="@+id/home_magisk_details_title"
+                            style="@style/W.Home.Title"
+                            android:text="@string/home_details_title"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toTopOf="parent" />
+
+                        <View
+                            style="@style/W.Home.Section"
+                            app:layout_constraintBottom_toBottomOf="parent"
+                            app:layout_constraintEnd_toEndOf="parent"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toBottomOf="@+id/home_magisk_details_title" />
+
+                        <LinearLayout
+                            android:id="@+id/home_magisk_internal_mode"
+                            style="@style/W.Home.Item.Top"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toBottomOf="@+id/home_magisk_details_title">
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent"
+                                android:text="@string/home_extra_mode" />
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent.Right"
+                                android:text="@{Config.coreOnly ? @string/home_extra_mode_safe : @string/home_extra_mode_normal}"
+                                tools:text="Normal" />
+
+                        </LinearLayout>
+
+                        <LinearLayout
+                            android:id="@+id/home_magisk_internal_connection"
+                            style="@style/W.Home.Item.Bottom"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toBottomOf="@+id/home_magisk_internal_mode">
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent"
+                                android:text="@string/home_extra_connection" />
+
+                            <!--todo(topjohnwu) fix connection type-->
+                            <!--don't forget to bind verbose values to proper resources-->
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                android:id="@+id/home_magisk_extra_connection_value"
+                                style="@style/W.Home.ItemContent.Right"
+                                tools:text="Normal" />
+
+                        </LinearLayout>
+
+                    </androidx.constraintlayout.widget.ConstraintLayout>
+
+                </com.google.android.material.card.MaterialCardView>
+
+            </LinearLayout>
+
+        </HorizontalScrollView>
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+
+</layout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/include_home_manager.xml b/app/src/main/res/layout/include_home_manager.xml
new file mode 100644
index 000000000..e06839c3d
--- /dev/null
+++ b/app/src/main/res/layout/include_home_manager.xml
@@ -0,0 +1,337 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <data>
+
+        <import type="com.topjohnwu.magisk.core.Info" />
+
+        <import type="com.topjohnwu.magisk.BuildConfig" />
+
+        <import type="com.topjohnwu.magisk.core.InfoKt" />
+
+        <import type="com.topjohnwu.magisk.ui.home.MagiskState" />
+
+        <variable
+            name="viewModel"
+            type="com.topjohnwu.magisk.ui.home.HomeViewModel" />
+
+    </data>
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        tools:layout_gravity="center">
+
+        <androidx.appcompat.widget.AppCompatImageView
+            android:id="@+id/home_manager_icon"
+            style="@style/WidgetFoundation.Icon.Primary"
+            android:layout_marginStart="@dimen/l1"
+            android:padding="@dimen/l_50"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            app:srcCompat="@drawable/ic_manager" />
+
+        <androidx.appcompat.widget.AppCompatTextView
+            android:id="@+id/home_manager_title"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="@dimen/l1"
+            android:text="@{viewModel.stateHideManagerName}"
+            android:textAppearance="@style/AppearanceFoundation.Title"
+            app:layout_constraintBottom_toBottomOf="@+id/home_manager_icon"
+            app:layout_constraintEnd_toStartOf="@+id/home_manager_action"
+            app:layout_constraintStart_toEndOf="@+id/home_manager_icon"
+            app:layout_constraintTop_toTopOf="parent"
+            tools:text="@string/manager" />
+
+        <FrameLayout
+            android:id="@+id/home_manager_action"
+            gone="@{viewModel.stateMagisk == MagiskState.LOADING || !viewModel.isConnected}"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            app:layout_constraintBottom_toBottomOf="@+id/home_manager_title"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toTopOf="@+id/home_manager_title">
+
+            <com.google.android.material.button.MaterialButton
+                style="@style/WidgetFoundation.Button"
+                gone="@{viewModel.stateManager != MagiskState.OBSOLETE}"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginEnd="@dimen/l_50"
+                android:onClick="@{() -> viewModel.onManagerPressed()}"
+                android:text="@string/update"
+                android:textAllCaps="false"
+                app:icon="@drawable/ic_update_md2" />
+
+            <com.google.android.material.button.MaterialButton
+                style="@style/WidgetFoundation.Button.Text"
+                gone="@{viewModel.stateManager == MagiskState.OBSOLETE}"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginEnd="@dimen/l_50"
+                android:onClick="@{() -> viewModel.onManagerPressed()}"
+                android:text="@string/install"
+                android:textAllCaps="false"
+                app:icon="@drawable/ic_install" />
+
+        </FrameLayout>
+
+        <androidx.constraintlayout.widget.Barrier
+            android:id="@+id/home_manager_title_barrier"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            app:barrierDirection="bottom"
+            app:constraint_referenced_ids="home_manager_action,home_manager_title,home_manager_icon" />
+
+        <HorizontalScrollView
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:fadingEdgeLength="@dimen/l1"
+            android:paddingStart="@dimen/l1"
+            android:paddingTop="@dimen/l_50"
+            android:paddingEnd="@dimen/l1"
+            android:requiresFadingEdge="horizontal"
+            android:scrollbars="none"
+            app:layout_constraintTop_toBottomOf="@+id/home_manager_title_barrier">
+
+            <LinearLayout
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:orientation="horizontal">
+
+                <com.google.android.material.card.MaterialCardView
+                    style="@style/W.Home.Card.First"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content">
+
+                    <androidx.constraintlayout.widget.ConstraintLayout
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content">
+
+                        <androidx.appcompat.widget.AppCompatTextView
+                            android:id="@+id/home_manager_remote_title"
+                            style="@style/W.Home.Title"
+                            android:text="@string/module_section_remote"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toTopOf="parent" />
+
+                        <View
+                            style="@style/W.Home.Section"
+                            app:layout_constraintBottom_toBottomOf="parent"
+                            app:layout_constraintEnd_toEndOf="parent"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toBottomOf="@+id/home_manager_remote_title" />
+
+                        <LinearLayout
+                            android:id="@+id/home_manager_remote_version"
+                            style="@style/W.Home.Item.Top"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toBottomOf="@+id/home_manager_remote_title">
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent"
+                                android:text="@string/home_extra_version" />
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent.Right"
+                                android:text="@{viewModel.stateVersionManager}"
+                                tools:text="20.1" />
+
+                        </LinearLayout>
+
+                        <LinearLayout
+                            android:id="@+id/home_manager_remote_version_code"
+                            style="@style/W.Home.Item"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toBottomOf="@+id/home_manager_remote_version">
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent"
+                                android:text="@string/home_extra_code" />
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent.Right"
+                                android:text="@{Integer.toString(viewModel.stateCodeManager)}"
+                                tools:text="12345" />
+
+                        </LinearLayout>
+
+                        <LinearLayout
+                            android:id="@+id/home_manager_remote_stub_version_code"
+                            style="@style/W.Home.Item.Bottom"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toBottomOf="@+id/home_manager_remote_version_code">
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent"
+                                android:text="@string/home_extra_stub" />
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent.Right"
+                                android:text="@{Integer.toString(viewModel.stateCodeStub)}"
+                                tools:text="5" />
+
+                        </LinearLayout>
+
+                    </androidx.constraintlayout.widget.ConstraintLayout>
+
+                    <ProgressBar
+                        style="@style/WidgetFoundation.ProgressBar"
+                        gone="@{viewModel.stateManagerProgress == 0 || viewModel.stateManagerProgress == 100}"
+                        android:layout_width="match_parent"
+                        android:layout_gravity="bottom"
+                        android:max="100"
+                        android:progress="@{viewModel.stateManagerProgress}" />
+
+                </com.google.android.material.card.MaterialCardView>
+
+                <com.google.android.material.card.MaterialCardView
+                    style="@style/W.Home.Card"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content">
+
+                    <androidx.constraintlayout.widget.ConstraintLayout
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content">
+
+                        <androidx.appcompat.widget.AppCompatTextView
+                            android:id="@+id/home_manager_internal_title"
+                            style="@style/W.Home.Title"
+                            android:text="@string/installed"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toTopOf="parent" />
+
+                        <View
+                            style="@style/W.Home.Section"
+                            app:layout_constraintBottom_toBottomOf="parent"
+                            app:layout_constraintEnd_toEndOf="parent"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toBottomOf="@+id/home_manager_internal_title" />
+
+                        <LinearLayout
+                            android:id="@+id/home_manager_internal_version"
+                            style="@style/W.Home.Item.Top"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toBottomOf="@+id/home_manager_internal_title">
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent"
+                                android:text="@string/home_extra_version" />
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent.Right"
+                                android:text="@{BuildConfig.VERSION_NAME}"
+                                tools:text="20.1" />
+
+                        </LinearLayout>
+
+                        <LinearLayout
+                            android:id="@+id/home_manager_internal_version_code"
+                            style="@style/W.Home.Item"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toBottomOf="@+id/home_manager_internal_version">
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent"
+                                android:text="@string/home_extra_code" />
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent.Right"
+                                android:text="@{Integer.toString(BuildConfig.VERSION_CODE)}"
+                                tools:text="12345" />
+
+                        </LinearLayout>
+
+                        <LinearLayout
+                            android:id="@+id/home_manager_internal_stub_version_code"
+                            style="@style/W.Home.Item.Bottom"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toBottomOf="@+id/home_manager_internal_version_code">
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent"
+                                android:text="@string/home_extra_stub" />
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent.Right"
+                                android:text="@{Info.stub != null ? Integer.toString(Info.stub.version) : @string/home_extra_stub_na}"
+                                tools:text="5" />
+                        </LinearLayout>
+
+                    </androidx.constraintlayout.widget.ConstraintLayout>
+
+                </com.google.android.material.card.MaterialCardView>
+
+                <com.google.android.material.card.MaterialCardView
+                    style="@style/W.Home.Card"
+                    gone="@{Info.env.magiskVersionCode &lt; 0}"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content">
+
+                    <androidx.constraintlayout.widget.ConstraintLayout
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content">
+
+                        <androidx.appcompat.widget.AppCompatTextView
+                            android:id="@+id/home_manager_details_title"
+                            style="@style/W.Home.Title"
+                            android:text="@string/home_details_title"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toTopOf="parent" />
+
+                        <View
+                            style="@style/W.Home.Section"
+                            app:layout_constraintBottom_toBottomOf="parent"
+                            app:layout_constraintEnd_toEndOf="parent"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toBottomOf="@+id/home_manager_details_title" />
+
+                        <LinearLayout
+                            android:id="@+id/home_manager_internal_mode"
+                            style="@style/W.Home.Item.Top"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toBottomOf="@+id/home_manager_details_title">
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent"
+                                android:text="@string/home_extra_mode" />
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent.Right"
+                                android:text="@{InfoKt.isRunningAsStub ? @string/home_extra_mode_stub : @string/home_extra_mode_normal}"
+                                tools:text="Normal" />
+
+                        </LinearLayout>
+
+                        <LinearLayout
+                            android:id="@+id/home_manager_internal_connection"
+                            style="@style/W.Home.Item.Bottom"
+                            app:layout_constraintStart_toStartOf="parent"
+                            app:layout_constraintTop_toBottomOf="@+id/home_manager_internal_mode">
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                style="@style/W.Home.ItemContent"
+                                android:text="@string/home_extra_package" />
+
+                            <androidx.appcompat.widget.AppCompatTextView
+                                android:id="@+id/home_manager_extra_connection_value"
+                                style="@style/W.Home.ItemContent.Right"
+                                android:text="@{viewModel.statePackageManager}"
+                                tools:text="com.topjohnwu.magisk" />
+
+                        </LinearLayout>
+
+                    </androidx.constraintlayout.widget.ConstraintLayout>
+
+                </com.google.android.material.card.MaterialCardView>
+
+            </LinearLayout>
+
+        </HorizontalScrollView>
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+
+</layout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/item_developer_link.xml b/app/src/main/res/layout/item_developer_link.xml
index 41c6cee0a..09c66dba1 100644
--- a/app/src/main/res/layout/item_developer_link.xml
+++ b/app/src/main/res/layout/item_developer_link.xml
@@ -15,10 +15,11 @@
 
     </data>
 
-    <androidx.constraintlayout.widget.ConstraintLayout
+    <FrameLayout
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:background="?selectableItemBackground"
+        android:background="?selectableItemBackgroundBorderless"
+        android:minWidth="60dp"
         android:onClick="@{() -> viewModel.onLinkPressed(item.link)}"
         android:padding="@dimen/l_50"
         tools:layout_gravity="center">
@@ -26,25 +27,11 @@
         <androidx.appcompat.widget.AppCompatImageView
             android:id="@+id/developer_link"
             style="@style/WidgetFoundation.Image.Small"
-            app:layout_constraintEnd_toStartOf="@+id/developer_more"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="parent"
-            app:layout_constraintBottom_toBottomOf="parent"
+            android:layout_gravity="center"
             app:srcCompat="@{item.icon}"
             app:tint="?colorOnPrimary"
             tools:srcCompat="@drawable/ic_paypal" />
 
-        <androidx.appcompat.widget.AppCompatImageView
-            android:id="@+id/developer_more"
-            style="@style/WidgetFoundation.Image.Small"
-            android:layout_height="14sp"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintBottom_toBottomOf="@+id/developer_link"
-            app:layout_constraintStart_toEndOf="@+id/developer_link"
-            app:layout_constraintTop_toTopOf="@+id/developer_link"
-            app:srcCompat="@drawable/ic_more"
-            app:tint="?colorOnPrimary" />
-
-    </androidx.constraintlayout.widget.ConstraintLayout>
+    </FrameLayout>
 
 </layout>
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index e0e2cbd0f..c00bbcb01 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -28,6 +28,12 @@
     <string name="home_item_source">Source</string>
     <string name="home_support_content">Magisk is, and always will be, free and open-source. You can however show us that you care by sending a small donation.</string>
 
+    <string name="home_device_title">Your device</string>
+    <string name="home_device_info_title">Info</string>
+    <string name="home_device_extra_manufacturer">Manufacturer</string>
+    <string name="home_device_extra_model">Model</string>
+    <string name="home_device_extra_board">Board</string>
+
     <string name="home_device_security">Security</string>
     <string name="home_device_system">System</string>
     <string name="home_device_build_style">A/B</string>
@@ -45,6 +51,10 @@
     <string name="home_extra_mode_normal">Normal</string>
     <string name="home_extra_mode_safe">Safe</string>
     <string name="home_extra_mode_stub">Dynamic</string>
+    <string name="home_extra_stub">Stub</string>
+    <string name="home_extra_stub_na">N/A</string>
+
+    <string name="home_details_title">Details</string>
 
     <string name="invalid_update_channel">Invalid Update Channel</string>
     <string name="safetyNet_api_error">SafetyNet API Error</string>
diff --git a/app/src/main/res/values/styles_view_md2.xml b/app/src/main/res/values/styles_view_md2.xml
index 040e369e6..585552bd2 100644
--- a/app/src/main/res/values/styles_view_md2.xml
+++ b/app/src/main/res/values/styles_view_md2.xml
@@ -7,8 +7,10 @@
 
     <style name="W.Home" />
 
+    <!--remove-->
     <style name="W.Home.Extra" />
 
+    <!--remove-->
     <style name="W.Home.Extra.Title">
         <item name="android:layout_width">wrap_content</item>
         <item name="android:layout_height">wrap_content</item>
@@ -16,6 +18,7 @@
         <item name="android:singleLine">true</item>
     </style>
 
+    <!--remove-->
     <style name="W.Home.Extra.Value">
         <item name="android:layout_width">wrap_content</item>
         <item name="android:layout_height">wrap_content</item>
@@ -28,6 +31,61 @@
         <item name="android:singleLine">true</item>
     </style>
 
+    <style name="W.Home.Card" parent="WidgetFoundation.Card">
+        <item name="android:layout_marginStart">@dimen/l1</item>
+        <item name="android:focusable">true</item>
+    </style>
+
+    <style name="W.Home.Card.First">
+        <item name="android:layout_marginStart">0dp</item>
+    </style>
+
+    <style name="W.Home.Title">
+        <item name="android:layout_width">wrap_content</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:paddingStart">@dimen/l1</item>
+        <item name="android:paddingEnd">@dimen/l1</item>
+        <item name="android:textAppearance">@style/AppearanceFoundation.Body</item>
+        <item name="android:textStyle">bold</item>
+        <item name="android:paddingTop">@dimen/l_50</item>
+        <item name="android:paddingBottom">@dimen/l_50</item>
+    </style>
+
+    <style name="W.Home.Section">
+        <item name="android:layout_width">0dp</item>
+        <item name="android:layout_height">0dp</item>
+        <item name="android:background">?colorSurface</item>
+        <item name="android:alpha">.5</item>
+    </style>
+
+    <style name="W.Home.Item">
+        <item name="android:layout_width">wrap_content</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:orientation">horizontal</item>
+        <item name="android:paddingStart">@dimen/l1</item>
+        <item name="android:paddingEnd">@dimen/l1</item>
+    </style>
+
+    <style name="W.Home.Item.Top">
+        <item name="android:paddingTop">@dimen/l_75</item>
+    </style>
+
+    <style name="W.Home.Item.Bottom">
+        <item name="android:paddingBottom">@dimen/l_75</item>
+    </style>
+
+    <style name="W.Home.ItemContent">
+        <item name="android:layout_width">wrap_content</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:includeFontPadding">false</item>
+        <item name="android:textAppearance">@style/AppearanceFoundation.Caption</item>
+    </style>
+
+    <style name="W.Home.ItemContent.Right">
+        <item name="android:layout_marginStart">@dimen/l_50</item>
+        <item name="android:textStyle">bold</item>
+    </style>
+
     <!--endregion-->
 
     <!--region Themes-->