From 656cef9a17daec99d7df16d73000375830eaaf8f Mon Sep 17 00:00:00 2001
From: Melendez <markmelendez2008@outlook.com>
Date: Sat, 27 Dec 2025 22:46:20 +0800
Subject: [PATCH] Android: Optimised the adaptation method for multiple screen
 sizes to accommodate @PreviewScreenSizes.

---
 Android/.idea/compiler.xml                    |   2 +-
 Android/.idea/deploymentTargetSelector.xml    |   4 +-
 Android/.idea/misc.xml                        |   4 +-
 Android/build.gradle.kts                      |  12 +-
 Android/gradle.properties                     |  18 ++-
 Android/gradle/libs.versions.toml             |  94 +++++++++++++
 .../gradle/wrapper/gradle-wrapper.properties  |   4 +-
 Android/mobile/build.gradle.kts               | 124 ++++++++----------
 .../java/com/melendez/known/MainActivity.kt   |  54 +++-----
 .../known/ui/components/CompositionLocals.kt  |   4 +-
 .../known/ui/components/SharedTopBar.kt       |  10 +-
 .../com/melendez/known/ui/components/Tip.kt   |   2 +-
 .../com/melendez/known/ui/screens/Signin.kt   |  17 +--
 .../melendez/known/ui/screens/about/About.kt  |  13 +-
 .../known/ui/screens/about/Credits.kt         |  11 +-
 .../known/ui/screens/add/Inputting.kt         |  27 ++--
 .../known/ui/screens/main/MainScreen.kt       |  21 +--
 .../known/ui/screens/main/inners/Home.kt      |   2 +-
 .../known/ui/screens/main/inners/Me.kt        |   9 +-
 .../known/ui/screens/settings/Settings.kt     |  14 +-
 .../screens/settings/appearance/Appearance.kt |   8 +-
 .../ui/screens/settings/appearance/Dark.kt    |  14 +-
 .../screens/settings/appearance/Language.kt   |  14 +-
 .../com/melendez/known/util/ScreenType.kt     |  38 ++++++
 Android/wear/build.gradle.kts                 |  48 +++----
 25 files changed, 332 insertions(+), 236 deletions(-)
 create mode 100644 Android/gradle/libs.versions.toml
 create mode 100644 Android/mobile/src/main/java/com/melendez/known/util/ScreenType.kt

diff --git a/Android/.idea/compiler.xml b/Android/.idea/compiler.xml
index d390bd5..b589d56 100644
--- a/Android/.idea/compiler.xml
+++ b/Android/.idea/compiler.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="CompilerConfiguration">
-    <bytecodeTargetLevel target="23" />
+    <bytecodeTargetLevel target="17" />
   </component>
 </project>
\ No newline at end of file
diff --git a/Android/.idea/deploymentTargetSelector.xml b/Android/.idea/deploymentTargetSelector.xml
index 8e7242a..1708ff8 100644
--- a/Android/.idea/deploymentTargetSelector.xml
+++ b/Android/.idea/deploymentTargetSelector.xml
@@ -15,10 +15,10 @@
       </SelectionState>
       <SelectionState runConfigName="mobile">
         <option name="selectionMode" value="DROPDOWN" />
-        <DropdownSelection timestamp="2025-06-01T09:13:13.266126200Z">
+        <DropdownSelection timestamp="2025-06-06T15:33:08.406123800Z">
           <Target type="DEFAULT_BOOT">
             <handle>
-              <DeviceId pluginId="PhysicalDevice" identifier="serial=e39fc191" />
+              <DeviceId pluginId="LocalEmulator" identifier="path=C:\Users\Melendez\.android\avd\Pixel_9_Pro_Fold.avd" />
             </handle>
           </Target>
         </DropdownSelection>
diff --git a/Android/.idea/misc.xml b/Android/.idea/misc.xml
index b1aec1c..db1b096 100644
--- a/Android/.idea/misc.xml
+++ b/Android/.idea/misc.xml
@@ -1,8 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ExternalStorageConfigurationManager" enabled="true" />
   <component name="NullableNotNullManager">
     <option name="myDefaultNullable" value="androidx.annotation.Nullable" />
     <option name="myDefaultNotNull" value="androidx.annotation.NonNull" />
+    <option name="myOrdered" value="true" />
     <option name="myNullables">
       <value>
         <list size="15">
@@ -45,7 +47,7 @@
       </value>
     </option>
   </component>
-  <component name="ProjectRootManager" version="2" languageLevel="JDK_23" default="true" project-jdk-name="corretto-23" project-jdk-type="JavaSDK">
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_17" project-jdk-name="corretto-23" project-jdk-type="JavaSDK">
     <output url="file://$PROJECT_DIR$/build/classes" />
   </component>
   <component name="ProjectType">
diff --git a/Android/build.gradle.kts b/Android/build.gradle.kts
index 856a339..97b4955 100644
--- a/Android/build.gradle.kts
+++ b/Android/build.gradle.kts
@@ -1,16 +1,16 @@
 // Top-level build file where you can add configuration options common to all sub-projects/modules.
 plugins {
-    id("com.android.application") version "8.12.0-alpha03" apply false
-    id("org.jetbrains.kotlin.android") version "2.1.20" apply false
-    id("com.google.gms.google-services") version "4.4.2" apply false
-    id("org.jetbrains.kotlin.plugin.compose") version "2.1.20" apply false
-    id("com.google.devtools.ksp") version "2.1.20-1.0.32" apply false
+    id("com.android.application") version "9.1.0-alpha01" apply false
+    id("org.jetbrains.kotlin.android") version "2.3.0" apply false
+    id("org.jetbrains.kotlin.plugin.compose") version "2.3.0" apply false
+    id("com.google.gms.google-services") version "4.4.4" apply false
+    id("com.google.devtools.ksp") version "2.3.4" apply false
 }
 buildscript {
     repositories {
         google()  // Google's Maven repository
     }
     dependencies {
-        classpath("com.google.gms:google-services:4.4.2")
+        classpath(libs.google.services)
     }
 }
diff --git a/Android/gradle.properties b/Android/gradle.properties
index 50ca10b..4b84346 100644
--- a/Android/gradle.properties
+++ b/Android/gradle.properties
@@ -10,5 +10,19 @@ kotlin.code.style=official
 # resources declared in the library itself and none from the library's dependencies,
 # thereby reducing the size of the R class for that library
 android.nonTransitiveRClass=true
-org.gradle.configuration-cache=true
-android.suppressUnsupportedCompileSdk=34
\ No newline at end of file
+# org.gradle.configuration-cache=true
+android.suppressUnsupportedCompileSdk=34
+# KSP classpath snapshot configuration
+ksp.use.kotlin.incremental=false
+ksp.use.kotlin.incremental.java=false
+ksp.use.kotlin.incremental.kapt=false
+android.defaults.buildfeatures.resvalues=true
+android.sdk.defaultTargetSdkToCompileSdkIfUnset=false
+android.enableAppCompileTimeRClass=false
+android.usesSdkInManifest.disallowed=false
+android.uniquePackageNames=false
+android.dependency.useConstraints=true
+android.r8.strictFullModeForKeepRules=false
+android.r8.optimizedResourceShrinking=false
+android.builtInKotlin=false
+android.newDsl=false
\ No newline at end of file
diff --git a/Android/gradle/libs.versions.toml b/Android/gradle/libs.versions.toml
new file mode 100644
index 0000000..d432468
--- /dev/null
+++ b/Android/gradle/libs.versions.toml
@@ -0,0 +1,94 @@
+[versions]
+accompanist = "0.36.0"
+activity = "1.12.2"
+androidxComposeUi = "ui-test-junit4"
+androidxComposeUiX2 = "ui-test-manifest"
+animation = "1.10.0"
+coilCompose = "3.3.0"
+compose = "1.5.6"
+composeBom = "2025.12.01"
+composeUi = "ui-tooling"
+coreKtx = "1.17.0"
+coreSplashscreen = "1.2.0"
+espressoCore = "3.7.0"
+firebaseAnalytics = "23.0.0"
+firebaseAuthKtx = "23.2.1"
+firebaseFirestore = "26.0.2"
+firebaseMessagingKtx = "24.1.2"
+firebaseUiAuth = "10.0.0-beta01"
+generativeai = "0.9.0"
+googleServices = "4.4.4"
+horologist = "0.7.15"
+junit = "1.3.0"
+junitJupiterApi = "6.0.1"
+lifecycle = "2.10.0"
+material = "1.14.0-alpha08"
+material3 = "1.4.0"
+materialIconsExtended = "1.7.8"
+navigationCompose = "2.9.6"
+playServicesAds = "24.9.0"
+playServicesAuth = "21.4.0"
+playServicesWearable = "19.0.0"
+room = "2.8.4"
+runtimeLivedata = "1.10.0"
+tiles = "1.5.0"
+ui = "1.10.0"
+volley = "1.2.1"
+watchfaceComplicationsDataSourceKtx = "1.3.0-beta01"
+
+[libraries]
+accompanist-pager = { group = "com.google.accompanist", name = "accompanist-pager", version.ref = "accompanist" }
+accompanist-pager-indicators = { group = "com.google.accompanist", name = "accompanist-pager-indicators", version.ref = "accompanist" }
+accompanist-swiperefresh = { group = "com.google.accompanist", name = "accompanist-swiperefresh", version.ref = "accompanist" }
+activity-compose = { group = "androidx.activity", name = "activity-compose", version.ref = "activity" }
+activity-ktx = { group = "androidx.activity", name = "activity-ktx", version.ref = "activity" }
+animation = { group = "androidx.compose.animation", name = "animation", version.ref = "animation" }
+coil-compose = { group = "io.coil-kt.coil3", name = "coil-compose", version.ref = "coilCompose" }
+compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "composeBom" }
+compose-foundation = { group = "androidx.wear.compose", name = "compose-foundation", version.ref = "compose" }
+compose-material = { group = "androidx.wear.compose", name = "compose-material", version.ref = "compose" }
+core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
+core-splashscreen = { group = "androidx.core", name = "core-splashscreen", version.ref = "coreSplashscreen" }
+espresso-core = { group = "androidx.test.espresso", name = "espresso-core", version.ref = "espressoCore" }
+firebase-analytics = { group = "com.google.firebase", name = "firebase-analytics", version.ref = "firebaseAnalytics" }
+firebase-auth-ktx = { group = "com.google.firebase", name = "firebase-auth-ktx", version.ref = "firebaseAuthKtx" }
+firebase-firestore = { group = "com.google.firebase", name = "firebase-firestore", version.ref = "firebaseFirestore" }
+firebase-messaging-ktx = { group = "com.google.firebase", name = "firebase-messaging-ktx", version.ref = "firebaseMessagingKtx" }
+firebase-ui-auth = { group = "com.firebaseui", name = "firebase-ui-auth", version.ref = "firebaseUiAuth" }
+generativeai = { group = "com.google.ai.client.generativeai", name = "generativeai", version.ref = "generativeai" }
+google-services = { group = "com.google.gms", name = "google-services", version.ref = "googleServices" }
+horologist-compose-tools = { group = "com.google.android.horologist", name = "horologist-compose-tools", version.ref = "horologist" }
+horologist-tiles = { group = "com.google.android.horologist", name = "horologist-tiles", version.ref = "horologist" }
+junit = { group = "androidx.test.ext", name = "junit", version.ref = "junit" }
+junit-jupiter-api = { group = "org.junit.jupiter", name = "junit-jupiter-api", version.ref = "junitJupiterApi" }
+lifecycle-process = { group = "androidx.lifecycle", name = "lifecycle-process", version.ref = "lifecycle" }
+lifecycle-runtime-compose = { group = "androidx.lifecycle", name = "lifecycle-runtime-compose", version.ref = "lifecycle" }
+lifecycle-runtime-ktx = { group = "androidx.lifecycle", name = "lifecycle-runtime-ktx", version.ref = "lifecycle" }
+lifecycle-viewmodel-compose = { group = "androidx.lifecycle", name = "lifecycle-viewmodel-compose", version.ref = "lifecycle" }
+material = { group = "com.google.android.material", name = "material", version.ref = "material" }
+material-icons-extended = { group = "androidx.compose.material", name = "material-icons-extended", version.ref = "materialIconsExtended" }
+material3 = { group = "androidx.compose.material3", name = "material3", version.ref = "material3" }
+material3-window-size-class1 = { group = "androidx.compose.material3", name = "material3-window-size-class", version.ref = "material3" }
+navigation-compose = { group = "androidx.navigation", name = "navigation-compose", version.ref = "navigationCompose" }
+play-services-ads = { group = "com.google.android.gms", name = "play-services-ads", version.ref = "playServicesAds" }
+play-services-auth = { group = "com.google.android.gms", name = "play-services-auth", version.ref = "playServicesAuth" }
+play-services-wearable = { group = "com.google.android.gms", name = "play-services-wearable", version.ref = "playServicesWearable" }
+room-compiler = { group = "androidx.room", name = "room-compiler", version.ref = "room" }
+room-ktx = { group = "androidx.room", name = "room-ktx", version.ref = "room" }
+room-runtime = { group = "androidx.room", name = "room-runtime", version.ref = "room" }
+runtime-livedata = { group = "androidx.compose.runtime", name = "runtime-livedata", version.ref = "runtimeLivedata" }
+tiles = { group = "androidx.wear.tiles", name = "tiles", version.ref = "tiles" }
+tiles-material = { group = "androidx.wear.tiles", name = "tiles-material", version.ref = "tiles" }
+ui = { group = "androidx.compose.ui", name = "ui", version.ref = "ui" }
+ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics", version.ref = "ui" }
+ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4", version.ref = "ui" }
+ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest", version.ref = "ui" }
+ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling", version.ref = "ui" }
+ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview", version.ref = "ui" }
+volley = { group = "com.android.volley", name = "volley", version.ref = "volley" }
+watchface-complications-data-source-ktx = { group = "androidx.wear.watchface", name = "watchface-complications-data-source-ktx", version.ref = "watchfaceComplicationsDataSourceKtx" }
+
+[plugins]
+androidx-compose-ui = { id = "androidx.compose.ui", version.ref = "composeUi" }
+androidx-compose-uiX2 = { id = "androidx.compose.ui", version.ref = "androidxComposeUiX2" }
+compose-ui = { id = "androidx.compose.ui", version.ref = "androidxComposeUi" }
diff --git a/Android/gradle/wrapper/gradle-wrapper.properties b/Android/gradle/wrapper/gradle-wrapper.properties
index 90980ed..6c74be2 100644
--- a/Android/gradle/wrapper/gradle-wrapper.properties
+++ b/Android/gradle/wrapper/gradle-wrapper.properties
@@ -1,6 +1,6 @@
-#Sat Apr 13 22:27:27 CST 2024
+#Sun Sep 21 11:37:00 CST 2025
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.13-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-9.2.1-bin.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
diff --git a/Android/mobile/build.gradle.kts b/Android/mobile/build.gradle.kts
index 41dbd39..6bdd3b4 100644
--- a/Android/mobile/build.gradle.kts
+++ b/Android/mobile/build.gradle.kts
@@ -38,19 +38,12 @@ android {
             isShrinkResources = false
         }
     }
-    compileOptions {
-        sourceCompatibility = JavaVersion.VERSION_17
-        targetCompatibility = JavaVersion.VERSION_17
-    }
-    kotlinOptions {
-        jvmTarget = "17"
-    }
     buildFeatures {
         compose = true
         buildConfig = true
     }
     composeOptions {
-        kotlinCompilerExtensionVersion = "1.5.0"
+        kotlinCompilerExtensionVersion = "1.5.15"
     }
     packaging {
         resources {
@@ -59,67 +52,60 @@ android {
     }
 }
 
-dependencies {
-
-    val activity = "1.11.0-rc01"
-    val composeBom = "2025.04.01"
-    val ui = "1.9.0-alpha01"
-    val material = "1.4.0-alpha13"
-    val accompanist = "0.36.0"
-    val lifecycle = "2.9.0-rc01"
-    val room = "2.7.1"
-
-    implementation("androidx.core:core-ktx:1.16.0")
-    implementation("io.coil-kt:coil-compose:2.7.0")
-    implementation("com.android.volley:volley:1.2.1")
-    implementation("com.google.ai.client.generativeai:generativeai:0.9.0")
-    implementation("androidx.compose.material:material-icons-extended:1.7.8")
-    implementation("com.google.android.material:material:1.13.0-alpha13")
-    implementation("androidx.navigation:navigation-compose:2.9.0-rc01")
-
-    implementation(platform("com.google.firebase:firebase-bom:33.13.0"))
-    implementation("com.google.firebase:firebase-auth-ktx:23.2.0")
-    implementation("com.google.android.gms:play-services-auth:21.3.0")
-    implementation("com.firebaseui:firebase-ui-auth:9.0.0")
-    implementation("com.google.firebase:firebase-firestore:25.1.4")
-    implementation("com.google.firebase:firebase-messaging-ktx:24.1.1")
-    implementation("com.google.android.gms:play-services-ads:24.2.0")
-    implementation("com.google.firebase:firebase-analytics:22.4.0")
-
-    implementation("androidx.activity:activity-ktx:${activity}")
-    implementation("androidx.activity:activity-compose:${activity}")
-
-    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:$lifecycle")
-    implementation("androidx.lifecycle:lifecycle-runtime-ktx:$lifecycle")
-    implementation("androidx.lifecycle:lifecycle-runtime-compose:$lifecycle")
-    implementation("androidx.lifecycle:lifecycle-process:$lifecycle")
-
-    implementation("androidx.compose.ui:ui:$ui")
-    implementation("androidx.compose.animation:animation:$ui")
-    implementation("androidx.compose.ui:ui-graphics:$ui")
-    implementation("androidx.compose.ui:ui-tooling-preview:$ui")
-    implementation("androidx.compose.runtime:runtime-livedata:$ui")
-
-    implementation("androidx.room:room-runtime:$room")
-    implementation("androidx.room:room-ktx:$room")
-    ksp("androidx.room:room-compiler:$room")
-
-    implementation("androidx.compose.material3:material3:$material")
-    implementation("androidx.compose.material3:material3-window-size-class:$material")
-
-    implementation("com.google.accompanist:accompanist-swiperefresh:$accompanist")
-    implementation("com.google.accompanist:accompanist-pager:$accompanist")
-    implementation("com.google.accompanist:accompanist-pager-indicators:${accompanist}")
-
-    implementation(platform("androidx.compose:compose-bom:$composeBom"))
-
-    androidTestImplementation("androidx.compose.ui:ui-test-junit4:$ui")
-    androidTestImplementation(platform("androidx.compose:compose-bom:$composeBom"))
-    androidTestImplementation("androidx.test.ext:junit:1.2.0-alpha03")
-    androidTestImplementation("androidx.test.espresso:espresso-core:3.6.0-alpha03")
+kotlin {
+    jvmToolchain(17)
+}
 
-    debugImplementation("androidx.compose.ui:ui-tooling:$ui")
-    debugImplementation("androidx.compose.ui:ui-test-manifest:$ui")
+dependencies {
 
-    testImplementation("junit:junit:4.13.2")
+    implementation(libs.core.ktx)
+    implementation(libs.coil.compose)
+    implementation(libs.volley)
+    implementation(libs.generativeai)
+    implementation(libs.material.icons.extended)
+    implementation(libs.material)
+    implementation(libs.navigation.compose)
+
+    implementation(libs.firebase.auth.ktx)
+    implementation(libs.firebase.firestore)
+    implementation(libs.firebase.messaging.ktx)
+    implementation(libs.firebase.analytics)
+    implementation(libs.play.services.auth)
+    implementation(libs.firebase.ui.auth)
+    implementation(libs.play.services.ads)
+
+    implementation(libs.activity.ktx)
+    implementation(libs.activity.compose)
+
+    implementation(libs.lifecycle.viewmodel.compose)
+    implementation(libs.lifecycle.runtime.ktx)
+    implementation(libs.lifecycle.runtime.compose)
+    implementation(libs.lifecycle.process)
+
+    implementation(libs.room.runtime)
+    implementation(libs.room.ktx)
+    ksp(libs.room.compiler)
+
+    implementation(libs.accompanist.swiperefresh)
+    implementation(libs.accompanist.pager)
+    implementation(libs.accompanist.pager.indicators)
+
+    implementation(platform(libs.compose.bom))
+    implementation(libs.ui)
+    implementation(libs.animation)
+    implementation(libs.ui.graphics)
+    implementation(libs.ui.tooling.preview)
+    implementation(libs.runtime.livedata)
+    implementation(libs.material3)
+    implementation(libs.material3.window.size.class1)
+
+    androidTestImplementation(libs.ui.test.junit4)
+    androidTestImplementation(platform(libs.compose.bom))
+    androidTestImplementation(libs.junit)
+    androidTestImplementation(libs.espresso.core)
+
+    debugImplementation(libs.ui.tooling)
+    debugImplementation(libs.ui.test.manifest)
+
+    testImplementation(libs.junit.jupiter.api)
 }
\ No newline at end of file
diff --git a/Android/mobile/src/main/java/com/melendez/known/MainActivity.kt b/Android/mobile/src/main/java/com/melendez/known/MainActivity.kt
index e8f97e3..8cc7358 100644
--- a/Android/mobile/src/main/java/com/melendez/known/MainActivity.kt
+++ b/Android/mobile/src/main/java/com/melendez/known/MainActivity.kt
@@ -30,6 +30,7 @@ import com.melendez.known.ui.components.LocalActivity
 import com.melendez.known.ui.components.LocalDarkTheme
 import com.melendez.known.ui.components.LocalDynamicColorSwitch
 import com.melendez.known.ui.components.LocalPaletteStyleIndex
+import com.melendez.known.ui.components.LocalScreenType
 import com.melendez.known.ui.components.LocalSeedColor
 import com.melendez.known.ui.components.animatedComposable
 import com.melendez.known.ui.screens.Detail
@@ -50,6 +51,7 @@ import com.melendez.known.ui.theme.DEFAULT_SEED_COLOR
 import com.melendez.known.ui.theme.KnownTheme
 import com.melendez.known.util.DarkThemePreference
 import com.melendez.known.util.PreferenceUtil
+import com.melendez.known.util.getUnifiedSizeClass
 
 @OptIn(ExperimentalMaterial3WindowSizeClassApi::class)
 class MainActivity : ComponentActivity() {
@@ -98,7 +100,11 @@ class MainActivity : ComponentActivity() {
 
         setContent {
             val navTotalController = rememberNavController()
-            val widthSizeClass = calculateWindowSizeClass(this).widthSizeClass
+            val windowSizeClass = calculateWindowSizeClass(this)
+            val screenType = getUnifiedSizeClass(
+                windowHeightSizeClass = windowSizeClass.heightSizeClass,
+                windowWidthSizeClass = windowSizeClass.widthSizeClass
+            )
             val viewModelPreferenceUtil: PreferenceUtil = viewModel()
 
 
@@ -123,6 +129,7 @@ class MainActivity : ComponentActivity() {
                 LocalSeedColor provides (settings?.themeColor ?: DEFAULT_SEED_COLOR),
                 LocalDynamicColorSwitch provides (settings?.isDynamicColorEnabled ?: false),
                 LocalPaletteStyleIndex provides (settings?.paletteStyleIndex ?: 0),
+                LocalScreenType provides screenType,
                 LocalTonalPalettes provides if (settings?.themeColor != null && settings.themeColor != 0)
                     Color(settings.themeColor).toTonalPalettes()
                 else
@@ -148,53 +155,29 @@ class MainActivity : ComponentActivity() {
                                 Guide(navTotalController = navTotalController)
                             }
                             animatedComposable(Screens.Main.router) {
-                                MainScreen(
-                                    widthSizeClass = widthSizeClass,
-                                    navTotalController = navTotalController
-                                )
+                                MainScreen(navTotalController = navTotalController)
                             }
                             animatedComposable(Screens.Appearance.router) {
-                                Appearance(
-                                    widthSizeClass = widthSizeClass,
-                                    navTotalController = navTotalController
-                                )
+                                Appearance(navTotalController = navTotalController)
                             }
                             animatedComposable(Screens.Settings.router) {
-                                Settings(
-                                    widthSizeClass = widthSizeClass,
-                                    navTotalController = navTotalController
-                                )
+                                Settings(navTotalController = navTotalController)
                             }
                             animatedComposable(Screens.Dark.router) {
-                                Dark(
-                                    widthSizeClass = widthSizeClass,
-                                    navTotalController = navTotalController
-                                )
+                                Dark(navTotalController = navTotalController)
                             }
                             animatedComposable(Screens.Language.router) {
-                                Language(
-                                    widthSizeClass = widthSizeClass,
-                                    navTotalController = navTotalController
-                                )
+                                Language(navTotalController = navTotalController)
                             }
                             animatedComposable(Screens.DRP.router) { DRP(navTotalController = navTotalController) }
                             animatedComposable(Screens.Inputting.router) {
-                                Inputting(
-                                    widthSizeClass = widthSizeClass,
-                                    navTotalController = navTotalController
-                                )
+                                Inputting(navTotalController = navTotalController)
                             }
                             animatedComposable(Screens.About.router) {
-                                About(
-                                    widthSizeClass = widthSizeClass,
-                                    navTotalController = navTotalController
-                                )
+                                About(navTotalController = navTotalController)
                             }
                             animatedComposable(Screens.Signin.router) {
-                                Signin(
-                                    widthSizeClass = widthSizeClass,
-                                    navTotalController = navTotalController
-                                )
+                                Signin(navTotalController = navTotalController)
                             }
                             animatedComposable(Screens.Detail.router) {
                                 Detail(navTotalController = navTotalController)
@@ -203,10 +186,7 @@ class MainActivity : ComponentActivity() {
                                 Prophets(navTotalController = navTotalController)
                             }
                             animatedComposable(Screens.Credits.router) {
-                                Credits(
-                                    widthSizeClass = widthSizeClass,
-                                    navTotalController = navTotalController
-                                )
+                                Credits(navTotalController = navTotalController)
                             }
                         }
                     }
diff --git a/Android/mobile/src/main/java/com/melendez/known/ui/components/CompositionLocals.kt b/Android/mobile/src/main/java/com/melendez/known/ui/components/CompositionLocals.kt
index 15ce4ef..b0b6180 100644
--- a/Android/mobile/src/main/java/com/melendez/known/ui/components/CompositionLocals.kt
+++ b/Android/mobile/src/main/java/com/melendez/known/ui/components/CompositionLocals.kt
@@ -8,15 +8,17 @@ import androidx.compose.runtime.staticCompositionLocalOf
 import com.melendez.known.ui.theme.DEFAULT_SEED_COLOR
 import com.melendez.known.ui.theme.FixedColorRoles
 import com.melendez.known.util.DarkThemePreference
+import com.melendez.known.util.ScreenType
 
 val LocalActivity = compositionLocalOf<ComponentActivity?> { null }
 val LocalDarkTheme = compositionLocalOf { DarkThemePreference() }
 val LocalSeedColor = compositionLocalOf { DEFAULT_SEED_COLOR }
 val LocalDynamicColorSwitch = compositionLocalOf { false }
 val LocalPaletteStyleIndex = compositionLocalOf { 0 }
+val LocalScreenType = compositionLocalOf<ScreenType> { ScreenType.Compact }
 val LocalFixedColorRoles = staticCompositionLocalOf {
     FixedColorRoles.fromColorSchemes(
         lightColors = lightColorScheme(),
         darkColors = darkColorScheme(),
     )
-}
\ No newline at end of file
+}
diff --git a/Android/mobile/src/main/java/com/melendez/known/ui/components/SharedTopBar.kt b/Android/mobile/src/main/java/com/melendez/known/ui/components/SharedTopBar.kt
index dc00579..1d13de0 100644
--- a/Android/mobile/src/main/java/com/melendez/known/ui/components/SharedTopBar.kt
+++ b/Android/mobile/src/main/java/com/melendez/known/ui/components/SharedTopBar.kt
@@ -14,17 +14,17 @@ import androidx.compose.material3.MediumTopAppBar
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.TopAppBarScrollBehavior
-import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.rememberNavController
 import com.melendez.known.R
+import com.melendez.known.util.ScreenType
 
 @Composable
 fun SharedTopBar(
-    widthSizeClass: WindowWidthSizeClass,
+    screenType: ScreenType,
     navTotalController: NavHostController,
     title: String,
     scrollBehavior: TopAppBarScrollBehavior? = null,
@@ -43,7 +43,7 @@ fun SharedTopBar(
         }
     }
 
-    if (widthSizeClass == WindowWidthSizeClass.Medium) {
+    if (screenType == ScreenType.Medium) {
         MediumTopAppBar(
             title = { Text(text = title) },
             navigationIcon = {
@@ -78,7 +78,7 @@ fun SharedTopBar(
 @Composable
 fun MediumTopBar_Preview() {
     SharedTopBar(
-        widthSizeClass = WindowWidthSizeClass.Medium,
+        screenType = ScreenType.Medium,
         navTotalController = rememberNavController(),
         title = "Title",
         scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
@@ -89,7 +89,7 @@ fun MediumTopBar_Preview() {
 @Composable
 fun LargeTopBar_Preview() {
     SharedTopBar(
-        widthSizeClass = WindowWidthSizeClass.Compact,
+        screenType = ScreenType.Compact,
         navTotalController = rememberNavController(),
         title = "Title",
         scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
diff --git a/Android/mobile/src/main/java/com/melendez/known/ui/components/Tip.kt b/Android/mobile/src/main/java/com/melendez/known/ui/components/Tip.kt
index e8fd756..555a986 100644
--- a/Android/mobile/src/main/java/com/melendez/known/ui/components/Tip.kt
+++ b/Android/mobile/src/main/java/com/melendez/known/ui/components/Tip.kt
@@ -12,7 +12,7 @@ import androidx.compose.runtime.Composable
 @Composable
 fun Tip(text: String, content: @Composable () -> Unit) {
     TooltipBox(
-        positionProvider = TooltipDefaults.rememberTooltipPositionProvider(),
+        positionProvider = TooltipDefaults.rememberPlainTooltipPositionProvider(),
         tooltip = {
             PlainTooltip {
                 Text(text = text)
diff --git a/Android/mobile/src/main/java/com/melendez/known/ui/screens/Signin.kt b/Android/mobile/src/main/java/com/melendez/known/ui/screens/Signin.kt
index 39bec9f..605f8e8 100644
--- a/Android/mobile/src/main/java/com/melendez/known/ui/screens/Signin.kt
+++ b/Android/mobile/src/main/java/com/melendez/known/ui/screens/Signin.kt
@@ -39,7 +39,6 @@ import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.material3.TopAppBarDefaults
-import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
@@ -59,24 +58,28 @@ import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.text.input.PasswordVisualTransformation
 import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewScreenSizes
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.rememberNavController
 import com.google.android.gms.auth.api.signin.GoogleSignIn
 import com.melendez.known.R
+import com.melendez.known.ui.components.LocalScreenType
 import com.melendez.known.ui.components.SharedTopBar
 import com.melendez.known.ui.viewmodel.signin.SignInViewModel
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun Signin(widthSizeClass: WindowWidthSizeClass, navTotalController: NavHostController) {
+fun Signin(navTotalController: NavHostController) {
+
     val viewModel: SignInViewModel = viewModel()
     val isLoading by viewModel.isLoading.collectAsState()
     val isSuccessful by viewModel.isSuccessful.collectAsState()
     val errorMessage by viewModel.errorMessage.collectAsState()
     val context = LocalContext.current
     val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
+    val screenType = LocalScreenType.current
 
     // Whether the registration mode is active
     var isRegisterMode by remember { mutableStateOf(false) }
@@ -120,7 +123,7 @@ fun Signin(widthSizeClass: WindowWidthSizeClass, navTotalController: NavHostCont
     ) {
         SharedTopBar(
             title = stringResource(if (isRegisterMode) R.string.sign_up else R.string.sign_in),
-            widthSizeClass = widthSizeClass,
+            screenType = screenType,
             navTotalController = navTotalController,
             scrollBehavior = scrollBehavior
         )
@@ -370,11 +373,9 @@ fun LoginForm(
     }
 }
 
-@Preview
+@PreviewScreenSizes
+@Preview(device = "id:pixel_9_pro")
 @Composable
 fun SigninPreview() {
-    Signin(
-        widthSizeClass = WindowWidthSizeClass.Compact,
-        navTotalController = rememberNavController()
-    )
+    Signin(navTotalController = rememberNavController())
 }
\ No newline at end of file
diff --git a/Android/mobile/src/main/java/com/melendez/known/ui/screens/about/About.kt b/Android/mobile/src/main/java/com/melendez/known/ui/screens/about/About.kt
index ddfa946..0a7eaed 100644
--- a/Android/mobile/src/main/java/com/melendez/known/ui/screens/about/About.kt
+++ b/Android/mobile/src/main/java/com/melendez/known/ui/screens/about/About.kt
@@ -18,7 +18,6 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.OutlinedButton
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBarDefaults
-import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -34,6 +33,7 @@ import androidx.core.net.toUri
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.rememberNavController
 import com.melendez.known.R
+import com.melendez.known.ui.components.LocalScreenType
 import com.melendez.known.ui.components.PreferenceItem
 import com.melendez.known.ui.components.SharedTopBar
 import com.melendez.known.ui.screens.Screens
@@ -47,13 +47,15 @@ object AboutUrls {
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun About(widthSizeClass: WindowWidthSizeClass, navTotalController: NavHostController) {
+fun About(navTotalController: NavHostController) {
+
     val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
+    val screenType = LocalScreenType.current
 
     Column {
         SharedTopBar(
             title = stringResource(R.string.about),
-            widthSizeClass = widthSizeClass,
+            screenType = screenType,
             navTotalController = navTotalController,
             scrollBehavior = scrollBehavior
         )
@@ -167,8 +169,5 @@ private fun AboutContentPreview() {
 @Preview(device = "spec:parent=pixel_9_pro")
 @Composable
 private fun AboutScreenPreview() {
-    About(
-        widthSizeClass = WindowWidthSizeClass.Compact,
-        navTotalController = rememberNavController()
-    )
+    About(navTotalController = rememberNavController())
 }
diff --git a/Android/mobile/src/main/java/com/melendez/known/ui/screens/about/Credits.kt b/Android/mobile/src/main/java/com/melendez/known/ui/screens/about/Credits.kt
index 6f008ab..886b921 100644
--- a/Android/mobile/src/main/java/com/melendez/known/ui/screens/about/Credits.kt
+++ b/Android/mobile/src/main/java/com/melendez/known/ui/screens/about/Credits.kt
@@ -1,7 +1,6 @@
 package com.melendez.known.ui.screens.about
 
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
@@ -10,7 +9,6 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.TopAppBarDefaults
-import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -27,6 +25,7 @@ import com.junkfood.seal.ui.svg.drawablevectors.coder
 import com.melendez.known.R
 import com.melendez.known.svg.DynamicColorImageVectors
 import com.melendez.known.ui.components.CreditItem
+import com.melendez.known.ui.components.LocalScreenType
 import com.melendez.known.ui.components.SharedTopBar
 
 data class Dependency(
@@ -39,13 +38,15 @@ const val Apache = "Apache License 2.0"
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun Credits(widthSizeClass: WindowWidthSizeClass, navTotalController: NavHostController) {
+fun Credits(navTotalController: NavHostController) {
+
     val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
+    val screenType = LocalScreenType.current
 
     Column {
         SharedTopBar(
             title = stringResource(R.string.credits),
-            widthSizeClass = widthSizeClass,
+            screenType = screenType,
             navTotalController = navTotalController,
             scrollBehavior = scrollBehavior
         )
@@ -226,5 +227,5 @@ private fun Credits_Content(modifier: Modifier = Modifier) {
 @Preview(device = "id:pixel_9_pro")
 @Composable
 private fun Credits_Preview() {
-    Credits(WindowWidthSizeClass.Compact, rememberNavController())
+    Credits(rememberNavController())
 }
\ No newline at end of file
diff --git a/Android/mobile/src/main/java/com/melendez/known/ui/screens/add/Inputting.kt b/Android/mobile/src/main/java/com/melendez/known/ui/screens/add/Inputting.kt
index c7d4e69..e86bc67 100644
--- a/Android/mobile/src/main/java/com/melendez/known/ui/screens/add/Inputting.kt
+++ b/Android/mobile/src/main/java/com/melendez/known/ui/screens/add/Inputting.kt
@@ -34,7 +34,6 @@ import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.material3.TopAppBarDefaults
-import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -54,6 +53,8 @@ import androidx.compose.ui.unit.dp
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.rememberNavController
 import com.melendez.known.R
+import com.melendez.known.ui.components.LocalScreenType
+import com.melendez.known.util.ScreenType
 import kotlin.math.roundToInt
 
 private const val DEFAULT_FULL_MARK = "150"
@@ -61,9 +62,10 @@ private const val HALF_POINT = "5"
 private val NUMBER_PATTERN = Regex("^\\d*\\.?\\d*$")
 
 @Composable
-fun Inputting(widthSizeClass: WindowWidthSizeClass, navTotalController: NavHostController) {
+fun Inputting(navTotalController: NavHostController) {
     var showingDialog by remember { mutableStateOf(false) }
     var examName by rememberSaveable { mutableStateOf("") }
+    val screenType = LocalScreenType.current
 
     if (showingDialog) {
         ExamNameDialog(
@@ -73,26 +75,20 @@ fun Inputting(widthSizeClass: WindowWidthSizeClass, navTotalController: NavHostC
         )
     }
 
-    when (widthSizeClass) {
-        WindowWidthSizeClass.Compact -> Inputting_Compact(
+    when (screenType) {
+        ScreenType.Compact -> Inputting_Compact(
             navTotalController = navTotalController,
             onShowingChange = { showingDialog = it },
             examName = examName
         )
 
-        WindowWidthSizeClass.Medium -> Inputting_Medium(
+        ScreenType.Medium -> Inputting_Medium(
             navTotalController = navTotalController,
             onShowingChange = { showingDialog = it },
             examName = examName
         )
 
-        WindowWidthSizeClass.Expanded -> Inputting_Expanded(
-            navTotalController = navTotalController,
-            onShowingChange = { showingDialog = it },
-            examName = examName
-        )
-
-        else -> Inputting_Compact(
+        ScreenType.Expanded -> Inputting_Expanded(
             navTotalController = navTotalController,
             onShowingChange = { showingDialog = it },
             examName = examName
@@ -512,8 +508,5 @@ private fun Subject_Card_Preview() {
 @Preview(device = "id:pixel_9_pro")
 @Composable
 private fun Inputting_Preview() {
-    Inputting(
-        widthSizeClass = WindowWidthSizeClass.Compact,
-        navTotalController = rememberNavController()
-    )
-}
\ No newline at end of file
+    Inputting(navTotalController = rememberNavController())
+}
diff --git a/Android/mobile/src/main/java/com/melendez/known/ui/screens/main/MainScreen.kt b/Android/mobile/src/main/java/com/melendez/known/ui/screens/main/MainScreen.kt
index 2c9a45a..b28360e 100644
--- a/Android/mobile/src/main/java/com/melendez/known/ui/screens/main/MainScreen.kt
+++ b/Android/mobile/src/main/java/com/melendez/known/ui/screens/main/MainScreen.kt
@@ -26,7 +26,6 @@ import androidx.compose.material3.PermanentNavigationDrawer
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
-import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -36,6 +35,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewScreenSizes
 import androidx.navigation.NavDestination.Companion.hierarchy
 import androidx.navigation.NavGraph.Companion.findStartDestination
 import androidx.navigation.NavHostController
@@ -44,30 +44,33 @@ import androidx.navigation.compose.composable
 import androidx.navigation.compose.currentBackStackEntryAsState
 import androidx.navigation.compose.rememberNavController
 import com.melendez.known.R
+import com.melendez.known.ui.components.LocalScreenType
 import com.melendez.known.ui.screens.main.inners.History
 import com.melendez.known.ui.screens.main.inners.Home
 import com.melendez.known.ui.screens.main.inners.Me
+import com.melendez.known.util.ScreenType
 
 @Composable
-fun MainScreen(widthSizeClass: WindowWidthSizeClass, navTotalController: NavHostController) {
+fun MainScreen(navTotalController: NavHostController) {
 
+    val screenType = LocalScreenType.current
     val navMainController = rememberNavController()
     val screens = listOf(Screens.Home, Screens.History, Screens.Me)
 
-    when (widthSizeClass) {
-        WindowWidthSizeClass.Compact -> Main_Compact(
+    when (screenType) {
+        ScreenType.Compact -> Main_Compact(
             navTotalController = navTotalController,
             navMainController = navMainController,
             screens = screens
         )
 
-        WindowWidthSizeClass.Medium -> Main_Medium(
+        ScreenType.Medium -> Main_Medium(
             navTotalController = navTotalController,
             navMainController = navMainController,
             screens = screens
         )
 
-        WindowWidthSizeClass.Expanded -> Main_Expanded(
+        ScreenType.Expanded -> Main_Expanded(
             navTotalController = navTotalController,
             navMainController = navMainController,
             screens = screens
@@ -270,7 +273,7 @@ fun Main_Medium(
                         )
                     }
                 }
-            ) { paddings ->
+            ) {
                 NavHost(
                     navController = navMainController,
                     startDestination = Screens.Home.router
@@ -398,11 +401,11 @@ fun Main_Expanded(
     }
 }
 
+@PreviewScreenSizes
 @Preview(device = "id:pixel_9_pro")
 @Composable
 fun MainScreen_Preview() {
     MainScreen(
-        widthSizeClass = WindowWidthSizeClass.Compact,
         navTotalController = rememberNavController()
     )
-}
\ No newline at end of file
+}
diff --git a/Android/mobile/src/main/java/com/melendez/known/ui/screens/main/inners/Home.kt b/Android/mobile/src/main/java/com/melendez/known/ui/screens/main/inners/Home.kt
index f96ba6c..230121f 100644
--- a/Android/mobile/src/main/java/com/melendez/known/ui/screens/main/inners/Home.kt
+++ b/Android/mobile/src/main/java/com/melendez/known/ui/screens/main/inners/Home.kt
@@ -22,7 +22,7 @@ import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import coil.compose.rememberAsyncImagePainter
+import coil3.compose.rememberAsyncImagePainter
 import com.melendez.known.R
 
 @OptIn(ExperimentalMaterial3Api::class)
diff --git a/Android/mobile/src/main/java/com/melendez/known/ui/screens/main/inners/Me.kt b/Android/mobile/src/main/java/com/melendez/known/ui/screens/main/inners/Me.kt
index 5d2ffa0..67b9ed8 100644
--- a/Android/mobile/src/main/java/com/melendez/known/ui/screens/main/inners/Me.kt
+++ b/Android/mobile/src/main/java/com/melendez/known/ui/screens/main/inners/Me.kt
@@ -1,6 +1,5 @@
 package com.melendez.known.ui.screens.main.inners
 
-import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -19,7 +18,6 @@ import androidx.compose.material.icons.rounded.Info
 import androidx.compose.material.icons.rounded.Settings
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
-import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
@@ -44,13 +42,13 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.rememberNavController
-import coil.compose.AsyncImage
-import coil.request.ImageRequest
+import coil3.compose.AsyncImage
+import coil3.request.ImageRequest
+import coil3.request.crossfade
 import com.melendez.known.R
 import com.melendez.known.ui.screens.Screens
 import com.melendez.known.util.UserManager
 
-@OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun Me(navTotalController: NavHostController) {
     val isLoggedIn by UserManager.isLoggedIn.collectAsState()
@@ -110,7 +108,6 @@ fun Me_Preview() {
     Me(navTotalController = rememberNavController())
 }
 
-@OptIn(ExperimentalMaterial3ExpressiveApi::class)
 @Composable
 fun AccountCard(isLoggedIn: Boolean, navTotalController: NavHostController) {
 
diff --git a/Android/mobile/src/main/java/com/melendez/known/ui/screens/settings/Settings.kt b/Android/mobile/src/main/java/com/melendez/known/ui/screens/settings/Settings.kt
index 9d93af5..07fdb2d 100644
--- a/Android/mobile/src/main/java/com/melendez/known/ui/screens/settings/Settings.kt
+++ b/Android/mobile/src/main/java/com/melendez/known/ui/screens/settings/Settings.kt
@@ -7,7 +7,6 @@ import androidx.compose.material.icons.rounded.Palette
 import androidx.compose.material.icons.rounded.SettingsApplications
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.TopAppBarDefaults
-import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.input.nestedscroll.nestedScroll
@@ -16,18 +15,22 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.rememberNavController
 import com.melendez.known.R
+import com.melendez.known.ui.components.LocalScreenType
 import com.melendez.known.ui.components.SettingItem
 import com.melendez.known.ui.components.SharedTopBar
 import com.melendez.known.ui.screens.Screens
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun Settings(widthSizeClass: WindowWidthSizeClass, navTotalController: NavHostController) {
+fun Settings(navTotalController: NavHostController) {
+
     val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
+    val screenType = LocalScreenType.current
+
     Column {
         SharedTopBar(
             title = stringResource(R.string.settings),
-            widthSizeClass = widthSizeClass,
+            screenType = screenType,
             navTotalController = navTotalController,
             scrollBehavior = scrollBehavior
         )
@@ -66,8 +69,5 @@ private fun SettingsContent(modifier: Modifier, navTotalController: NavHostContr
 @Preview(device = "id:pixel_9_pro")
 @Composable
 private fun SettingsPreview() {
-    Settings(
-        widthSizeClass = WindowWidthSizeClass.Compact,
-        navTotalController = rememberNavController()
-    )
+    Settings(navTotalController = rememberNavController())
 }
\ No newline at end of file
diff --git a/Android/mobile/src/main/java/com/melendez/known/ui/screens/settings/appearance/Appearance.kt b/Android/mobile/src/main/java/com/melendez/known/ui/screens/settings/appearance/Appearance.kt
index b0a1371..5d88ddb 100644
--- a/Android/mobile/src/main/java/com/melendez/known/ui/screens/settings/appearance/Appearance.kt
+++ b/Android/mobile/src/main/java/com/melendez/known/ui/screens/settings/appearance/Appearance.kt
@@ -33,7 +33,6 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.TopAppBarDefaults
-import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.getValue
@@ -66,6 +65,7 @@ import com.melendez.known.colour.a2
 import com.melendez.known.colour.a3
 import com.melendez.known.ui.components.LocalDynamicColorSwitch
 import com.melendez.known.ui.components.LocalPaletteStyleIndex
+import com.melendez.known.ui.components.LocalScreenType
 import com.melendez.known.ui.components.LocalSeedColor
 import com.melendez.known.ui.components.PreferenceItem
 import com.melendez.known.ui.components.PreferenceSwitch
@@ -89,12 +89,13 @@ private val ColorList =
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun Appearance(widthSizeClass: WindowWidthSizeClass, navTotalController: NavHostController) {
+fun Appearance(navTotalController: NavHostController) {
     val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
+    val screenType = LocalScreenType.current
     Column {
         SharedTopBar(
             title = stringResource(R.string.look_and_feel),
-            widthSizeClass = widthSizeClass,
+            screenType = screenType,
             navTotalController = navTotalController,
             scrollBehavior = scrollBehavior
         )
@@ -369,7 +370,6 @@ fun RowScope.ColorButtonImpl(
 @Composable
 fun Settings_Preview() {
     Appearance(
-        widthSizeClass = WindowWidthSizeClass.Compact,
         navTotalController = rememberNavController()
     )
 }
diff --git a/Android/mobile/src/main/java/com/melendez/known/ui/screens/settings/appearance/Dark.kt b/Android/mobile/src/main/java/com/melendez/known/ui/screens/settings/appearance/Dark.kt
index b3ebc85..7776b02 100644
--- a/Android/mobile/src/main/java/com/melendez/known/ui/screens/settings/appearance/Dark.kt
+++ b/Android/mobile/src/main/java/com/melendez/known/ui/screens/settings/appearance/Dark.kt
@@ -8,7 +8,6 @@ import androidx.compose.material.icons.outlined.Contrast
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Surface
 import androidx.compose.material3.TopAppBarDefaults
-import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.input.nestedscroll.nestedScroll
@@ -19,6 +18,7 @@ import androidx.navigation.NavHostController
 import androidx.navigation.compose.rememberNavController
 import com.melendez.known.R
 import com.melendez.known.ui.components.LocalDarkTheme
+import com.melendez.known.ui.components.LocalScreenType
 import com.melendez.known.ui.components.PreferenceSingleChoiceItem
 import com.melendez.known.ui.components.PreferenceSubtitle
 import com.melendez.known.ui.components.PreferenceSwitchVariant
@@ -30,14 +30,15 @@ import com.melendez.known.util.PreferenceUtil
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun Dark(widthSizeClass: WindowWidthSizeClass, navTotalController: NavHostController) {
+fun Dark(navTotalController: NavHostController) {
 
     val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
+    val screenType = LocalScreenType.current
 
     Column {
         SharedTopBar(
             title = stringResource(R.string.dark_theme),
-            widthSizeClass = widthSizeClass,
+            screenType = screenType,
             navTotalController = navTotalController,
             scrollBehavior = scrollBehavior
         )
@@ -95,8 +96,5 @@ fun Dark_Content(modifier: Modifier) {
 @Preview(device = "id:pixel_9_pro")
 @Composable
 fun Dark_Preview() {
-    Dark(
-        widthSizeClass = WindowWidthSizeClass.Compact,
-        navTotalController = rememberNavController()
-    )
-}
\ No newline at end of file
+    Dark(navTotalController = rememberNavController())
+}
diff --git a/Android/mobile/src/main/java/com/melendez/known/ui/screens/settings/appearance/Language.kt b/Android/mobile/src/main/java/com/melendez/known/ui/screens/settings/appearance/Language.kt
index d99de29..68c3b4b 100644
--- a/Android/mobile/src/main/java/com/melendez/known/ui/screens/settings/appearance/Language.kt
+++ b/Android/mobile/src/main/java/com/melendez/known/ui/screens/settings/appearance/Language.kt
@@ -25,7 +25,6 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBarDefaults
-import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -45,6 +44,7 @@ import androidx.lifecycle.viewmodel.compose.viewModel
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.rememberNavController
 import com.melendez.known.R
+import com.melendez.known.ui.components.LocalScreenType
 import com.melendez.known.ui.components.PreferenceSingleChoiceItem
 import com.melendez.known.ui.components.PreferenceSubtitle
 import com.melendez.known.ui.components.PreferencesHintCard
@@ -59,12 +59,13 @@ const val WEBLATE = "https://weblate.org/zh-hans/"
 @SuppressLint("QueryPermissionsNeeded")
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun Language(widthSizeClass: WindowWidthSizeClass, navTotalController: NavHostController) {
+fun Language(navTotalController: NavHostController) {
 
     val context = LocalContext.current
     val preferenceUtil: PreferenceUtil = viewModel()
 
     val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
+    val screenType = LocalScreenType.current
 
     val preferredLocales = remember {
         val defaultLocaleListCompat = LocaleListCompat.getDefault()
@@ -123,7 +124,7 @@ fun Language(widthSizeClass: WindowWidthSizeClass, navTotalController: NavHostCo
     Column {
         SharedTopBar(
             title = stringResource(R.string.language),
-            widthSizeClass = widthSizeClass,
+            screenType = screenType,
             navTotalController = navTotalController,
             scrollBehavior = scrollBehavior
         )
@@ -265,8 +266,5 @@ fun Language_Content(
 @Preview(device = "id:pixel_9_pro")
 @Composable
 fun Language_Preview() {
-    Language(
-        widthSizeClass = WindowWidthSizeClass.Compact,
-        navTotalController = rememberNavController()
-    )
-}
\ No newline at end of file
+    Language(navTotalController = rememberNavController())
+}
diff --git a/Android/mobile/src/main/java/com/melendez/known/util/ScreenType.kt b/Android/mobile/src/main/java/com/melendez/known/util/ScreenType.kt
new file mode 100644
index 0000000..0210d06
--- /dev/null
+++ b/Android/mobile/src/main/java/com/melendez/known/util/ScreenType.kt
@@ -0,0 +1,38 @@
+package com.melendez.known.util
+
+import androidx.compose.material3.windowsizeclass.WindowHeightSizeClass
+import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
+
+sealed class ScreenType(val name: String) {
+    data object Compact : ScreenType("Compact")
+    data object Medium : ScreenType("Medium")
+    data object Expanded : ScreenType("Expanded")
+}
+
+/**
+ * Determine the unified screen size class based on height and width.
+ * Rules: Width takes priority, with special handling for Expanded width.
+ */
+fun getUnifiedSizeClass(
+    windowHeightSizeClass: WindowHeightSizeClass,
+    windowWidthSizeClass: WindowWidthSizeClass
+): ScreenType {
+    return when (windowWidthSizeClass) {
+        // If width is Compact, always return Compact
+        WindowWidthSizeClass.Compact -> ScreenType.Compact
+
+        // If width is Medium, always return Medium
+        WindowWidthSizeClass.Medium -> ScreenType.Medium
+
+        // If width is Expanded, return Medium only when height is Compact
+        WindowWidthSizeClass.Expanded -> {
+            if (windowHeightSizeClass == WindowHeightSizeClass.Compact) {
+                ScreenType.Medium
+            } else {
+                ScreenType.Expanded
+            }
+        }
+
+        else -> ScreenType.Compact
+    }
+}
\ No newline at end of file
diff --git a/Android/wear/build.gradle.kts b/Android/wear/build.gradle.kts
index 83b7ce4..26927c0 100644
--- a/Android/wear/build.gradle.kts
+++ b/Android/wear/build.gradle.kts
@@ -6,7 +6,7 @@ plugins {
 
 android {
     namespace = "com.melendez.known"
-    compileSdk = 35
+    compileSdk = 36
 
     defaultConfig {
         applicationId = "com.melendez.known"
@@ -33,9 +33,6 @@ android {
         sourceCompatibility = JavaVersion.VERSION_1_8
         targetCompatibility = JavaVersion.VERSION_1_8
     }
-    kotlinOptions {
-        jvmTarget = "1.8"
-    }
     buildFeatures {
         compose = true
     }
@@ -50,31 +47,24 @@ android {
 }
 
 dependencies {
+    implementation(libs.play.services.wearable)
+    implementation(platform(libs.compose.bom))
+    implementation(libs.activity.compose)
+    implementation(libs.core.splashscreen)
+    implementation(libs.ui)
+    implementation(libs.ui.tooling.preview)
+    implementation(libs.material.icons.extended)
+    implementation(libs.compose.material)
+    implementation(libs.compose.foundation)
+    implementation(libs.tiles)
+    implementation(libs.tiles.material)
+    implementation(libs.horologist.compose.tools)
+    implementation(libs.horologist.tiles)
+    implementation(libs.watchface.complications.data.source.ktx)
 
-    val composeBom = "2024.06.00"
-    val compose = "1.4.0-beta03"
-    val ui = "1.7.0-beta04"
-    val material = "1.4.0-alpha05"
-    val horologist = "0.6.22"
-
-    implementation("com.google.android.gms:play-services-wearable:18.2.0")
-    implementation(platform("androidx.compose:compose-bom:$composeBom"))
-    implementation("androidx.activity:activity-compose:1.9.0")
-    implementation("androidx.core:core-splashscreen:1.2.0-alpha01")
-    implementation("androidx.compose.ui:ui:$ui")
-    implementation("androidx.compose.ui:ui-tooling-preview:$ui")
-    implementation("androidx.compose.material:material-icons-extended:$ui")
-    implementation("androidx.wear.compose:compose-material:$compose")
-    implementation("androidx.wear.compose:compose-foundation:$compose")
-    implementation("androidx.wear.tiles:tiles:$material")
-    implementation("androidx.wear.tiles:tiles-material:$material")
-    implementation("com.google.android.horologist:horologist-compose-tools:$horologist")
-    implementation("com.google.android.horologist:horologist-tiles:$horologist")
-    implementation("androidx.wear.watchface:watchface-complications-data-source-ktx:1.3.0-alpha03")
-
-    androidTestImplementation(platform("androidx.compose:compose-bom:$composeBom"))
-    androidTestImplementation("androidx.compose.ui:ui-test-junit4")
+    androidTestImplementation(platform(libs.compose.bom))
+    androidTestImplementation(libs.ui.test.junit4)
 
-    debugImplementation("androidx.compose.ui:ui-tooling")
-    debugImplementation("androidx.compose.ui:ui-test-manifest")
+    debugImplementation(libs.ui.tooling)
+    debugImplementation(libs.ui.test.manifest)
 }
\ No newline at end of file