diff --git a/Dockerfile b/Dockerfile
index 0e3f3ca6..3d4861c6 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,9 +1,9 @@
-FROM openjdk:11-jdk-slim AS build
+FROM openjdk:17-jdk-slim AS build
 COPY . .
 RUN chmod +x ./gradlew
 RUN ./gradlew server:shadowJar
 
-FROM openjdk:11-jdk-slim
+FROM openjdk:17-jdk-slim
 
 ARG POSTGRES_PORT
 ARG POSTGRES_DB
diff --git a/android-app/build.gradle.kts b/android-app/build.gradle.kts
index 6db6d261..15725d51 100644
--- a/android-app/build.gradle.kts
+++ b/android-app/build.gradle.kts
@@ -22,35 +22,35 @@ android {
     }
     buildTypes {
         getByName("release") {
-            signingConfig
             isMinifyEnabled = true
             proguardFiles(getDefaultProguardFile("proguard-android-optimize.txt"), "proguard-rules.pro")
         }
     }
     compileOptions {
-        sourceCompatibility = JavaVersion.VERSION_11
-        targetCompatibility = JavaVersion.VERSION_11
+        sourceCompatibility = JavaVersion.VERSION_17
+        targetCompatibility = JavaVersion.VERSION_17
     }
     tasks.withType<KotlinCompile> {
         kotlinOptions {
-            jvmTarget = "11"
+            jvmTarget = "17"
         }
     }
 }
 
 kotlin {
-    android()
+    jvmToolchain(17)
+
+    androidTarget()
+
     sourceSets {
-        named("androidMain") {
-            dependencies {
-                implementation(project(":shared"))
-                implementation(project(":shared-client"))
-                implementation(Dependencies.androidXActivity)
-                implementation(Dependencies.androidXActivityCompose)
-                implementation(Dependencies.androidGoogleMaterial)
-                implementation(Dependencies.essentyInstanceKeeper)
-                implementation(Dependencies.decompose)
-            }
+        androidMain.dependencies {
+            implementation(project(":shared"))
+            implementation(project(":shared-client"))
+            implementation(Dependencies.androidXActivity)
+            implementation(Dependencies.androidXActivityCompose)
+            implementation(Dependencies.decompose)
+            implementation("androidx.appcompat:appcompat:1.6.1")
+            implementation("androidx.appcompat:appcompat-resources:1.6.1")
         }
     }
 }
diff --git a/android-app/src/androidMain/kotlin/ml/dev/kotlin/minigames/activity/MainActivity.kt b/android-app/src/androidMain/kotlin/ml/dev/kotlin/minigames/activity/MainActivity.kt
index 4026602f..699680b2 100644
--- a/android-app/src/androidMain/kotlin/ml/dev/kotlin/minigames/activity/MainActivity.kt
+++ b/android-app/src/androidMain/kotlin/ml/dev/kotlin/minigames/activity/MainActivity.kt
@@ -2,14 +2,17 @@ package ml.dev.kotlin.minigames.activity
 
 import android.os.Bundle
 import androidx.activity.ComponentActivity
-import com.arkivanov.essenty.backpressed.BackPressedHandler
+import com.arkivanov.decompose.defaultComponentContext
+import ml.dev.kotlin.minigames.shared.component.MiniGamesAppComponentContext
+import ml.dev.kotlin.minigames.shared.component.MiniGamesAppComponentImpl
 import ml.dev.kotlin.minigames.shared.setMainAndroidApp
 
 class MainActivity : ComponentActivity() {
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
-        val backPressedHandler = BackPressedHandler(onBackPressedDispatcher)
-        setMainAndroidApp(backPressedHandler)
+        val appContext = MiniGamesAppComponentContext(applicationContext, window)
+        val component = MiniGamesAppComponentImpl(appContext, defaultComponentContext())
+        setMainAndroidApp(component)
     }
 }
diff --git a/android-app/src/androidMain/res/values/themes.xml b/android-app/src/androidMain/res/values/themes.xml
index b5d6ced8..6ed03479 100644
--- a/android-app/src/androidMain/res/values/themes.xml
+++ b/android-app/src/androidMain/res/values/themes.xml
@@ -1,17 +1,8 @@
-<resources xmlns:tools="http://schemas.android.com/tools">
+<resources>
 
-    <style name="Theme.MiniGames" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
+    <style name="Theme.MiniGames" parent="Theme.AppCompat.DayNight.DarkActionBar">
 
-        <item name="colorPrimary">@color/PrimaryColor</item>
-        <item name="colorPrimaryVariant">@color/PrimaryVariantColor</item>
-        <item name="colorOnPrimary">@color/OnPrimaryColor</item>
-
-        <item name="colorSecondary">@color/SecondaryColor</item>
-        <item name="colorSecondaryVariant">@color/SecondaryVariantColor</item>
-        <item name="colorOnSecondary">@color/OnSecondaryColor</item>
-        <item name="colorOnBackground">@color/OnBackgroundColor</item>
-
-        <item name="android:statusBarColor" tools:targetApi="l">@color/BackgroundColor</item>
+        <item name="android:statusBarColor">@color/BackgroundColor</item>
     </style>
 
     <style name="Theme.MiniGames.NoActionBar">
diff --git a/build-src/gradle.properties b/build-src/gradle.properties
index e7a7aee9..83fe953d 100644
--- a/build-src/gradle.properties
+++ b/build-src/gradle.properties
@@ -1,3 +1,3 @@
 kotlin.code.style=official
 org.gradle.jvmargs=-Xmx3g -Dfile.encoding=UTF-8
-systemProp.kotlinVersion=1.7.20
+systemProp.kotlinVersion=1.9.21
diff --git a/build-src/src/main/kotlin/BuildSrcPlugin.kt b/build-src/src/main/kotlin/BuildSrcPlugin.kt
index 5fe3109e..7c567f64 100644
--- a/build-src/src/main/kotlin/BuildSrcPlugin.kt
+++ b/build-src/src/main/kotlin/BuildSrcPlugin.kt
@@ -1,6 +1,5 @@
 import org.gradle.api.Plugin
 import org.gradle.api.Project
-import org.gradle.api.internal.artifacts.dependencies.DefaultExternalModuleDependency
 import org.gradle.api.tasks.JavaExec
 import java.io.File
 import java.lang.System.getenv
@@ -17,12 +16,6 @@ class BuildSrcPlugin : Plugin<Project> {
     }
 }
 
-fun Project.kapt(dependency: String) {
-    val (group, name, version) = dependency.split(":")
-    val moduleDependency = DefaultExternalModuleDependency(group, name, version)
-    configurations.getByName("kapt").dependencies.add(moduleDependency)
-}
-
 private fun currentScopeEnvFile(): File =
     File(ENV_FILE).takeIf { it.exists() } ?: File(FROM_XCODE_ENV_FILE)
 
diff --git a/build-src/src/main/kotlin/Constants.kt b/build-src/src/main/kotlin/Constants.kt
index 034b121b..3dbf00ea 100644
--- a/build-src/src/main/kotlin/Constants.kt
+++ b/build-src/src/main/kotlin/Constants.kt
@@ -1,9 +1,9 @@
 object Constants {
 
     object Android {
-        const val minSdk = 21
-        const val compileSdk = 33
-        const val targetSdk = 33
+        const val minSdk = 34
+        const val compileSdk = 34
+        const val targetSdk = 34
     }
 
     object iOS {
diff --git a/build-src/src/main/kotlin/Dependencies.kt b/build-src/src/main/kotlin/Dependencies.kt
index b0227e76..37d1a1c5 100644
--- a/build-src/src/main/kotlin/Dependencies.kt
+++ b/build-src/src/main/kotlin/Dependencies.kt
@@ -4,16 +4,15 @@ object Dependencies {
         val kotlinVersion by System.getProperties()
         val composeVersion by System.getProperties()
         val parcelizeDarwinVersion by System.getProperties()
-        const val ktor = "2.3.0"
-        const val exposed = "0.41.1" // Keep this version compatible with the version of exposed used by krush
-        const val krush = "1.2.0"
+        const val ktor = "2.3.7"
+        const val exposed = "0.45.0"
         const val simpleMail = "1.3.3"
-        const val decompose = "0.5.0"
-        const val essenty = "0.2.2"
-        const val multiplatformSettings = "1.0.0"
+        const val decompose = "3.0.0-alpha03"
+        const val multiplatformSettings = "1.1.1"
+        const val coroutines = "1.7.3"
     }
 
-    val kotlinxSerialization = "org.jetbrains.kotlinx:kotlinx-serialization-cbor:1.5.0"
+    val kotlinxSerialization = "org.jetbrains.kotlinx:kotlinx-serialization-cbor:1.6.2"
     val kotlinxAtomicFu = "org.jetbrains.kotlinx:atomicfu:0.20.2"
     val kotlinxDateTime = "org.jetbrains.kotlinx:kotlinx-datetime:0.4.0"
     val uuid = "com.benasher44:uuid:0.7.0"
@@ -48,17 +47,16 @@ object Dependencies {
     val multiplatformSettingsCoroutines = "com.russhwolf:multiplatform-settings-coroutines:${Version.multiplatformSettings}"
     val multiplatformSettingsDatastore = "com.russhwolf:multiplatform-settings-datastore:${Version.multiplatformSettings}"
 
-    val androidGoogleMaterial = "com.google.android.material:material:1.4.0"
+    val kotlinxCoroutinesSwing = "org.jetbrains.kotlinx:kotlinx-coroutines-swing:${Version.coroutines}"
+    val kotlinxCoroutinesAndroid = "org.jetbrains.kotlinx:kotlinx-coroutines-android:${Version.coroutines}"
+
     val androidXDataStorePreferences = "androidx.datastore:datastore-preferences:1.0.0"
     val androidXActivity = "androidx.activity:activity:1.4.0"
     val androidXActivityCompose = "androidx.activity:activity-compose:1.4.0"
 
     val decompose = "com.arkivanov.decompose:decompose:${Version.decompose}"
+    val decomposeExtensions = "com.arkivanov.decompose:extensions-compose:${Version.decompose}"
 
-    val essentyParcelable = "com.arkivanov.essenty:parcelable:${Version.essenty}"
-    val essentyLifecycle = "com.arkivanov.essenty:lifecycle:${Version.essenty}"
-    val essentyStateKeeper = "com.arkivanov.essenty:state-keeper:${Version.essenty}"
-    val essentyInstanceKeeper = "com.arkivanov.essenty:instance-keeper:${Version.essenty}"
     val parcelizeDarwinRuntime = "com.arkivanov.parcelize.darwin:runtime:${Version.parcelizeDarwinVersion}"
 
     val exposedCore = "org.jetbrains.exposed:exposed-core:${Version.exposed}"
@@ -66,9 +64,5 @@ object Dependencies {
     val exposedJdbc = "org.jetbrains.exposed:exposed-jdbc:${Version.exposed}"
     val exposedJavaTime = "org.jetbrains.exposed:exposed-java-time:${Version.exposed}"
 
-    val postgresSqlDriver = "org.postgresql:postgresql:42.3.0"
-
-    val krushAnnotationProcessor = "pl.touk.krush:krush-annotation-processor:${Version.krush}"
-    val krushRuntime = "pl.touk.krush:krush-runtime:${Version.krush}"
-    val krushRuntimePostgresql = "pl.touk.krush:krush-runtime-postgresql:${Version.krush}"
+    val postgresSqlDriver = "org.postgresql:postgresql:42.7.1"
 }
diff --git a/desktop-app/build.gradle.kts b/desktop-app/build.gradle.kts
index 25a12c14..3321ac68 100644
--- a/desktop-app/build.gradle.kts
+++ b/desktop-app/build.gradle.kts
@@ -7,15 +7,15 @@ plugins {
 }
 
 kotlin {
-    jvm("desktop")
+    jvmToolchain(17)
+
+    jvm()
+
     sourceSets {
-        named("desktopMain") {
-            dependencies {
-                implementation(project(":shared-client"))
-                implementation(compose.desktop.common)
-                implementation(compose.desktop.currentOs)
-                implementation(Dependencies.essentyInstanceKeeper)
-            }
+        jvmMain.dependencies {
+            implementation(project(":shared-client"))
+            implementation(compose.desktop.common)
+            implementation(compose.desktop.currentOs)
         }
     }
 }
@@ -32,17 +32,17 @@ compose.desktop {
             windows {
                 menu = true
                 upgradeUuid = "e60c3562-48f8-47db-91d9-ca54dfa92f35"
-                iconFile.set(projectDir.resolve("src/desktopMain/resources/ic_launcher.ico"))
+                iconFile.set(projectDir.resolve("src/jvmMain/resources/ic_launcher.ico"))
             }
 
             linux {
-                iconFile.set(projectDir.resolve("src/desktopMain/resources/ic_launcher.png"))
+                iconFile.set(projectDir.resolve("src/jvmMain/resources/ic_launcher.png"))
             }
 
             macOS {
                 bundleID = "ml.dev.kotlin.minigames.app"
                 appStore = false
-                iconFile.set(projectDir.resolve("src/desktopMain/resources/ic_launcher.icns"))
+                iconFile.set(projectDir.resolve("src/jvmMain/resources/ic_launcher.icns"))
                 signing {
                     sign.set(false)
                 }
diff --git a/desktop-app/src/desktopMain/kotlin/ml/dev/kotlin/minigames/app/MainApp.kt b/desktop-app/src/jvmMain/kotlin/ml/dev/kotlin/minigames/app/MainApp.kt
similarity index 100%
rename from desktop-app/src/desktopMain/kotlin/ml/dev/kotlin/minigames/app/MainApp.kt
rename to desktop-app/src/jvmMain/kotlin/ml/dev/kotlin/minigames/app/MainApp.kt
diff --git a/desktop-app/src/desktopMain/resources/ic_launcher.icns b/desktop-app/src/jvmMain/resources/ic_launcher.icns
similarity index 100%
rename from desktop-app/src/desktopMain/resources/ic_launcher.icns
rename to desktop-app/src/jvmMain/resources/ic_launcher.icns
diff --git a/desktop-app/src/desktopMain/resources/ic_launcher.ico b/desktop-app/src/jvmMain/resources/ic_launcher.ico
similarity index 100%
rename from desktop-app/src/desktopMain/resources/ic_launcher.ico
rename to desktop-app/src/jvmMain/resources/ic_launcher.ico
diff --git a/desktop-app/src/desktopMain/resources/ic_launcher.png b/desktop-app/src/jvmMain/resources/ic_launcher.png
similarity index 100%
rename from desktop-app/src/desktopMain/resources/ic_launcher.png
rename to desktop-app/src/jvmMain/resources/ic_launcher.png
diff --git a/gradle.properties b/gradle.properties
index 49c21d59..d2e239bb 100644
--- a/gradle.properties
+++ b/gradle.properties
@@ -11,16 +11,17 @@ org.jetbrains.compose.experimental.macos.enabled=true
 org.jetbrains.compose.experimental.uikit.enabled=true
 
 kotlin.native.cocoapods.generate.wrapper=true
-kotlin.native.cacheKind=none
+#kotlin.native.cacheKind=none
 kotlin.native.useEmbeddableCompilerJar=true
 kotlin.native.binary.memoryModel=experimental
 kotlin.mpp.androidSourceSetLayoutVersion=2
 kotlin.mpp.stability.nowarn=true
 kotlin.mpp.enableCInteropCommonization=true
 
-systemProp.kotlinVersion=1.8.20
-systemProp.composeVersion=1.4.0
-systemProp.agpVersion=7.4.2
-systemProp.buildkonfigVersion=0.11.0
-systemProp.shadowVersion=7.0.0
-systemProp.parcelizeDarwinVersion=0.1.3
+systemProp.kotlinVersion=1.9.21
+systemProp.composeVersion=1.6.0-alpha01
+systemProp.agpVersion=8.2.0
+systemProp.buildkonfigVersion=0.15.1
+systemProp.shadowVersion=7.1.2
+systemProp.parcelizeDarwinVersion=0.2.3
+systemProp.foojayResolverVersion=0.7.0
diff --git a/gradle/wrapper/gradle-wrapper.jar b/gradle/wrapper/gradle-wrapper.jar
index 943f0cbf..033e24c4 100644
Binary files a/gradle/wrapper/gradle-wrapper.jar and b/gradle/wrapper/gradle-wrapper.jar differ
diff --git a/gradle/wrapper/gradle-wrapper.properties b/gradle/wrapper/gradle-wrapper.properties
index 50832291..9f4197d5 100644
--- a/gradle/wrapper/gradle-wrapper.properties
+++ b/gradle/wrapper/gradle-wrapper.properties
@@ -1,6 +1,7 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-7.6.1-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.2.1-bin.zip
 networkTimeout=10000
+validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
diff --git a/gradlew b/gradlew
index 65dcd68d..fcb6fca1 100755
--- a/gradlew
+++ b/gradlew
@@ -85,9 +85,6 @@ done
 APP_BASE_NAME=${0##*/}
 APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit
 
-# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
-
 # Use the maximum available, or set MAX_FD != -1 to use that value.
 MAX_FD=maximum
 
@@ -133,10 +130,13 @@ location of your Java installation."
     fi
 else
     JAVACMD=java
-    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+    if ! command -v java >/dev/null 2>&1
+    then
+        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
 
 Please set the JAVA_HOME variable in your environment to match the
 location of your Java installation."
+    fi
 fi
 
 # Increase the maximum file descriptors if we can.
@@ -144,7 +144,7 @@ if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
     case $MAX_FD in #(
       max*)
         # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
-        # shellcheck disable=SC3045 
+        # shellcheck disable=SC3045
         MAX_FD=$( ulimit -H -n ) ||
             warn "Could not query maximum file descriptor limit"
     esac
@@ -152,7 +152,7 @@ if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
       '' | soft) :;; #(
       *)
         # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
-        # shellcheck disable=SC3045 
+        # shellcheck disable=SC3045
         ulimit -n "$MAX_FD" ||
             warn "Could not set maximum file descriptor limit to $MAX_FD"
     esac
@@ -197,6 +197,10 @@ if "$cygwin" || "$msys" ; then
     done
 fi
 
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
 # Collect all arguments for the java command;
 #   * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of
 #     shell script including quotes and variable substitutions, so put them in
diff --git a/server/build.gradle.kts b/server/build.gradle.kts
index ef8314e7..ba1041f9 100644
--- a/server/build.gradle.kts
+++ b/server/build.gradle.kts
@@ -3,7 +3,6 @@ import org.jetbrains.kotlin.gradle.tasks.KotlinCompile
 
 plugins {
     kotlin("multiplatform")
-    kotlin("kapt")
     id("org.gradle.java")
     id("com.github.johnrengelman.shadow")
     id("build-src-plugin")
@@ -14,57 +13,49 @@ version = VERSION
 
 kotlin {
     jvm()
-    sourceSets {
-        named("jvmMain") {
-            kotlin.srcDir("${buildDir.absolutePath}/generated/source/kaptKotlin/main/")
-
-            dependencies {
-                implementation(project(":shared"))
 
-                implementation(Dependencies.ktorServerCore)
-                implementation(Dependencies.ktorServerNetty)
-                implementation(Dependencies.ktorServerSerialization)
-                implementation(Dependencies.ktorServerWebsockets)
-                implementation(Dependencies.ktorServerContentNegotiation)
-                implementation(Dependencies.ktorServerAuth)
-                implementation(Dependencies.ktorServerAuthJwt)
-                implementation(Dependencies.ktorServerHtmlBuilder)
-                implementation(Dependencies.logbackClassic)
+    sourceSets {
+        jvmMain.dependencies {
+            implementation(project(":shared"))
 
-                implementation(Dependencies.simpleMailCore)
-                implementation(Dependencies.simpleMailClient)
+            implementation(Dependencies.ktorServerCore)
+            implementation(Dependencies.ktorServerNetty)
+            implementation(Dependencies.ktorServerSerialization)
+            implementation(Dependencies.ktorServerWebsockets)
+            implementation(Dependencies.ktorServerContentNegotiation)
+            implementation(Dependencies.ktorServerAuth)
+            implementation(Dependencies.ktorServerAuthJwt)
+            implementation(Dependencies.ktorServerHtmlBuilder)
+            implementation(Dependencies.logbackClassic)
 
-                implementation(Dependencies.bCrypt)
+            implementation(Dependencies.simpleMailCore)
+            implementation(Dependencies.simpleMailClient)
 
-                implementation(Dependencies.exposedCore)
-                implementation(Dependencies.exposedDao)
-                implementation(Dependencies.exposedJdbc)
-                implementation(Dependencies.exposedJavaTime)
-                implementation(Dependencies.postgresSqlDriver)
+            implementation(Dependencies.bCrypt)
 
-                api(Dependencies.krushAnnotationProcessor)
-                api(Dependencies.krushRuntime)
-                api(Dependencies.krushRuntimePostgresql)
-                kapt(Dependencies.krushAnnotationProcessor)
-            }
+            implementation(Dependencies.exposedCore)
+            implementation(Dependencies.exposedDao)
+            implementation(Dependencies.exposedJdbc)
+            implementation(Dependencies.exposedJavaTime)
+            implementation(Dependencies.postgresSqlDriver)
         }
     }
 }
 
 java {
-    sourceCompatibility = JavaVersion.VERSION_11
-    targetCompatibility = JavaVersion.VERSION_11
+    sourceCompatibility = JavaVersion.VERSION_17
+    targetCompatibility = JavaVersion.VERSION_17
 }
 
 tasks.withType<KotlinCompile> {
     kotlinOptions {
-        jvmTarget = "11"
+        jvmTarget = "17"
     }
 }
 
 tasks.withType<JavaCompile> {
-    sourceCompatibility = "${JavaVersion.VERSION_11}"
-    targetCompatibility = "${JavaVersion.VERSION_11}"
+    sourceCompatibility = "${JavaVersion.VERSION_17}"
+    targetCompatibility = "${JavaVersion.VERSION_17}"
 }
 
 val shadowJarTasks = tasks.withType<ShadowJar> {
diff --git a/server/src/jvmMain/kotlin/ml/dev/kotlin/minigames/db/DbSettings.kt b/server/src/jvmMain/kotlin/ml/dev/kotlin/minigames/db/DbSettings.kt
index dc987167..cd826ccc 100644
--- a/server/src/jvmMain/kotlin/ml/dev/kotlin/minigames/db/DbSettings.kt
+++ b/server/src/jvmMain/kotlin/ml/dev/kotlin/minigames/db/DbSettings.kt
@@ -24,11 +24,10 @@ object DbSettings {
 
 fun <T> txn(
     transactionIsolation: Int = DbSettings.db.transactionManager.defaultIsolationLevel,
-    repetitionAttempts: Int = DbSettings.db.transactionManager.defaultRepetitionAttempts,
     readOnly: Boolean = false,
     logger: SqlLogger? = DbSettings.defaultLogger,
-    statement: Transaction.() -> T
-): T = transaction(transactionIsolation, repetitionAttempts, readOnly, DbSettings.db) {
+    statement: Transaction.() -> T,
+): T = transaction(transactionIsolation, readOnly, DbSettings.db) {
     logger?.let { addLogger(it) }
     statement()
 }
@@ -37,7 +36,7 @@ suspend fun <T> suspendedTxn(
     context: CoroutineDispatcher? = null,
     transactionIsolation: Int = DbSettings.db.transactionManager.defaultIsolationLevel,
     logger: SqlLogger? = DbSettings.defaultLogger,
-    statement: Transaction.() -> T
+    statement: Transaction.() -> T,
 ): T = newSuspendedTransaction(context, DbSettings.db, transactionIsolation) {
     logger?.let { addLogger(it) }
     statement()
diff --git a/server/src/jvmMain/kotlin/ml/dev/kotlin/minigames/db/model/BaseUUID.kt b/server/src/jvmMain/kotlin/ml/dev/kotlin/minigames/db/model/BaseUUID.kt
new file mode 100644
index 00000000..8a2b3356
--- /dev/null
+++ b/server/src/jvmMain/kotlin/ml/dev/kotlin/minigames/db/model/BaseUUID.kt
@@ -0,0 +1,31 @@
+package ml.dev.kotlin.minigames.db.model
+
+import org.jetbrains.exposed.dao.*
+import org.jetbrains.exposed.dao.id.EntityID
+import org.jetbrains.exposed.dao.id.UUIDTable
+import org.jetbrains.exposed.sql.javatime.timestamp
+import java.time.Instant
+import java.util.*
+
+abstract class BaseUUIDTable(name: String) : UUIDTable(name) {
+    val createdAt = timestamp("created_at").clientDefault(Instant::now)
+    val updatedAt = timestamp("updated_at").nullable()
+}
+
+abstract class BaseUUIDEntity(id: EntityID<UUID>, table: BaseUUIDTable) : UUIDEntity(id) {
+    val createdAt by table.createdAt
+    var updatedAt by table.updatedAt
+}
+
+abstract class BaseUUIDEntityClass<E : BaseUUIDEntity>(table: BaseUUIDTable) : UUIDEntityClass<E>(table) {
+    init {
+        EntityHook.subscribe { action ->
+            if (action.changeType == EntityChangeType.Updated) {
+                try {
+                    action.toEntity(this)?.updatedAt = Instant.now()
+                } catch (_: Exception) {
+                }
+            }
+        }
+    }
+}
diff --git a/server/src/jvmMain/kotlin/ml/dev/kotlin/minigames/db/model/User.kt b/server/src/jvmMain/kotlin/ml/dev/kotlin/minigames/db/model/User.kt
new file mode 100644
index 00000000..adff2ae0
--- /dev/null
+++ b/server/src/jvmMain/kotlin/ml/dev/kotlin/minigames/db/model/User.kt
@@ -0,0 +1,31 @@
+package ml.dev.kotlin.minigames.db.model
+
+import org.jetbrains.exposed.dao.id.EntityID
+import org.jetbrains.exposed.sql.ResultRow
+import java.util.*
+
+object UsersTable : BaseUUIDTable("users") {
+    val email = text("email").uniqueIndex()
+    val username = text("username").uniqueIndex()
+    val passwordHash = text("password_hash").index()
+    val confirmed = bool("confirmed").default(false)
+    val confirmHash = text("confirm_hash")
+}
+
+class UserEntity(id: EntityID<UUID>) : BaseUUIDEntity(id, UsersTable) {
+    companion object : BaseUUIDEntityClass<UserEntity>(UsersTable)
+
+    var email by UsersTable.email
+    var username by UsersTable.username
+    var passwordHash by UsersTable.passwordHash
+    var confirmed by UsersTable.confirmed
+    var confirmHash by UsersTable.confirmHash
+}
+
+fun ResultRow.toUserEntity() = UserEntity(this[UsersTable.id]).also {
+    it.email = this[UsersTable.email]
+    it.username = this[UsersTable.username]
+    it.passwordHash = this[UsersTable.passwordHash]
+    it.confirmed = this[UsersTable.confirmed]
+    it.confirmHash = this[UsersTable.confirmHash]
+}
diff --git a/server/src/jvmMain/kotlin/ml/dev/kotlin/minigames/db/model/UserEntity.kt b/server/src/jvmMain/kotlin/ml/dev/kotlin/minigames/db/model/UserEntity.kt
deleted file mode 100644
index e79b33b3..00000000
--- a/server/src/jvmMain/kotlin/ml/dev/kotlin/minigames/db/model/UserEntity.kt
+++ /dev/null
@@ -1,20 +0,0 @@
-package ml.dev.kotlin.minigames.db.model
-
-import ml.dev.kotlin.minigames.util.sha256
-import java.time.ZonedDateTime
-import java.util.*
-import javax.persistence.Entity
-import javax.persistence.Id
-import javax.persistence.Table
-
-@Entity
-@Table(name = "users")
-data class UserEntity(
-    val email: String,
-    val username: String,
-    val passwordHash: String,
-    val confirmed: Boolean,
-    val confirmHash: String = UUID.randomUUID().toString().sha256(),
-    val createdAt: ZonedDateTime = ZonedDateTime.now(),
-    @Id val id: UUID = UUID.randomUUID(),
-)
diff --git a/server/src/jvmMain/kotlin/ml/dev/kotlin/minigames/server/Server.kt b/server/src/jvmMain/kotlin/ml/dev/kotlin/minigames/server/Server.kt
index c5825a63..6627427e 100644
--- a/server/src/jvmMain/kotlin/ml/dev/kotlin/minigames/server/Server.kt
+++ b/server/src/jvmMain/kotlin/ml/dev/kotlin/minigames/server/Server.kt
@@ -3,7 +3,7 @@ package ml.dev.kotlin.minigames.server
 import io.ktor.server.application.*
 import io.ktor.server.engine.*
 import io.ktor.server.netty.*
-import ml.dev.kotlin.minigames.db.model.UserEntityTable
+import ml.dev.kotlin.minigames.db.model.UsersTable
 import ml.dev.kotlin.minigames.db.txn
 import ml.dev.kotlin.minigames.server.routes.gameSockets
 import ml.dev.kotlin.minigames.server.routes.userRoutes
@@ -14,7 +14,7 @@ import org.jetbrains.exposed.sql.SchemaUtils.createMissingTablesAndColumns
 
 fun main() {
     try {
-        txn { createMissingTablesAndColumns(UserEntityTable) }
+        txn { createMissingTablesAndColumns(UsersTable) }
 
         embeddedServer(
             factory = Netty,
diff --git a/server/src/jvmMain/kotlin/ml/dev/kotlin/minigames/server/routes/GameRoutes.kt b/server/src/jvmMain/kotlin/ml/dev/kotlin/minigames/server/routes/GameRoutes.kt
index 3906d431..fef568ba 100644
--- a/server/src/jvmMain/kotlin/ml/dev/kotlin/minigames/server/routes/GameRoutes.kt
+++ b/server/src/jvmMain/kotlin/ml/dev/kotlin/minigames/server/routes/GameRoutes.kt
@@ -35,7 +35,7 @@ fun Application.gameSockets() = routing {
 @KtorDsl
 private fun Route.authJwtGameHandlerWebSockets(
     gamePathSource: (String) -> GamePath,
-    handler: GameHandler
+    handler: GameHandler,
 ) {
     val gamePath = gamePathSource("{$SERVER_NAME}")
     authJwtWebSocket(gamePath.statePath, handler::handleState)
diff --git a/server/src/jvmMain/kotlin/ml/dev/kotlin/minigames/service/GameService.kt b/server/src/jvmMain/kotlin/ml/dev/kotlin/minigames/service/GameService.kt
index 3f5e3b5f..044cbd3b 100644
--- a/server/src/jvmMain/kotlin/ml/dev/kotlin/minigames/service/GameService.kt
+++ b/server/src/jvmMain/kotlin/ml/dev/kotlin/minigames/service/GameService.kt
@@ -95,12 +95,12 @@ class GameService(
         is UserActionClientMessage -> updateGameState(
             serverName = serverName,
             byUser = username,
-            forUser = msg.username,
+            forUser = msg.forUsername,
             action = msg.action
         )?.let { gameState ->
             val message = UserActionServerMessage(action = msg.action, timestamp = now())
             val connections = serverDataConnections.safeGet(serverName)
-            connections.forEach { if (it.username == username) it.sendSerialized(message) }
+            connections.forEach { if (it.username == msg.forUsername) it.sendSerialized(message) }
             sendAllUpdatedGameState(serverName, gameState)
         }
 
@@ -198,11 +198,6 @@ class GameService(
         }
 }
 
-data class UserAtServer(
-    val username: Username,
-    val serverName: GameServerName,
-)
-
 sealed class GameConnection(
     protected val session: WebSocketSession,
     val username: Username,
@@ -253,7 +248,7 @@ private class GameServerLocks {
 }
 
 private sealed interface GameStateUpdateResult {
-    object Unapproved : GameStateUpdateResult
+    data object Unapproved : GameStateUpdateResult
 
     @JvmInline
     value class Updated(val gameState: GameState) : GameStateUpdateResult
diff --git a/server/src/jvmMain/kotlin/ml/dev/kotlin/minigames/service/UserService.kt b/server/src/jvmMain/kotlin/ml/dev/kotlin/minigames/service/UserService.kt
index 13846a3c..c4fd6efb 100644
--- a/server/src/jvmMain/kotlin/ml/dev/kotlin/minigames/service/UserService.kt
+++ b/server/src/jvmMain/kotlin/ml/dev/kotlin/minigames/service/UserService.kt
@@ -2,9 +2,7 @@ package ml.dev.kotlin.minigames.service
 
 import at.favre.lib.crypto.bcrypt.BCrypt
 import ml.dev.kotlin.minigames.db.model.UserEntity
-import ml.dev.kotlin.minigames.db.model.UserEntityTable
-import ml.dev.kotlin.minigames.db.model.insert
-import ml.dev.kotlin.minigames.db.model.toUserEntity
+import ml.dev.kotlin.minigames.db.model.UsersTable
 import ml.dev.kotlin.minigames.db.suspendedTxn
 import ml.dev.kotlin.minigames.shared.api.USER_CONFIRM_GET
 import ml.dev.kotlin.minigames.shared.model.UserCreate
@@ -15,8 +13,8 @@ import ml.dev.kotlin.minigames.shared.util.Res
 import ml.dev.kotlin.minigames.shared.util.err
 import ml.dev.kotlin.minigames.shared.util.ok
 import ml.dev.kotlin.minigames.util.envVar
-import org.jetbrains.exposed.sql.select
-import org.jetbrains.exposed.sql.update
+import ml.dev.kotlin.minigames.util.sha256
+import java.util.*
 
 object UserService {
 
@@ -29,7 +27,7 @@ object UserService {
     private val HOST_EMAIL_VERIFY = envVar<String>("HOST_EMAIL_VERIFY")
 
     suspend fun loginUser(userLogin: UserLogin): Res<UserError, UserEntity> = suspendedTxn {
-        UserEntityTable.select { UserEntityTable.username eq userLogin.username }.singleOrNull()?.toUserEntity()
+        UserEntity.find { UsersTable.username eq userLogin.username }.singleOrNull()
     }?.let {
         val passwordMatch = userLogin.password matchesHash it.passwordHash
         when {
@@ -40,18 +38,22 @@ object UserService {
     } ?: UserError(userLogin.username, Reason.NotExists).err()
 
     suspend fun createUser(userCreate: UserCreate): Res<UserError, UserEntity> = suspendedTxn {
-        val existingUserName = UserEntityTable.select {
-            UserEntityTable.username eq userCreate.username
-        }.singleOrNull()?.toUserEntity()
+        val existingUserName = UserEntity.find {
+            UsersTable.username eq userCreate.username
+        }.singleOrNull()
 
-        val existingUserEmail = UserEntityTable.select {
-            UserEntityTable.email eq userCreate.email
-        }.singleOrNull()?.toUserEntity()
+        val existingUserEmail = UserEntity.find {
+            UsersTable.email eq userCreate.email
+        }.singleOrNull()
 
         when {
-            existingUserName == null && existingUserEmail == null -> UserEntityTable.insert(with(userCreate) {
-                UserEntity(email, username, password.bcrypt(), confirmed = !REQUIRE_EMAIL_VERIFY)
-            }).ok()
+            existingUserName == null && existingUserEmail == null -> UserEntity.new {
+                this.email = userCreate.email
+                this.username = userCreate.username
+                this.passwordHash = userCreate.password.bcrypt()
+                this.confirmed = !REQUIRE_EMAIL_VERIFY
+                this.confirmHash = UUID.randomUUID().toString().sha256()
+            }.ok()
 
             existingUserEmail != null && !existingUserEmail.confirmed ->
                 UserError(userCreate.username, Reason.NotConfirmed).err()
@@ -61,10 +63,9 @@ object UserService {
     }
 
     suspend fun confirmUser(confirmHash: String): Boolean = suspendedTxn {
-        UserEntityTable.update(where = { UserEntityTable.confirmHash eq confirmHash }) { it[confirmed] = true }
-        UserEntityTable.select {
-            UserEntityTable.confirmHash eq confirmHash
-        }.singleOrNull()?.toUserEntity()?.confirmed == true
+        UserEntity.find { UsersTable.confirmHash eq confirmHash }.apply {
+            forEach { it.confirmed = true }
+        }.empty().not()
     }
 
     suspend fun sendConfirmationEmail(userEntity: UserEntity) {
diff --git a/server/src/jvmMain/kotlin/ml/dev/kotlin/minigames/util/RoutesUtil.kt b/server/src/jvmMain/kotlin/ml/dev/kotlin/minigames/util/RoutesUtil.kt
index 06aaca9f..d85d0b16 100644
--- a/server/src/jvmMain/kotlin/ml/dev/kotlin/minigames/util/RoutesUtil.kt
+++ b/server/src/jvmMain/kotlin/ml/dev/kotlin/minigames/util/RoutesUtil.kt
@@ -21,7 +21,7 @@ inline fun RoutesCtx.log(): Logger = this.application.environment.log
 @KtorDsl
 inline fun <reified R : Any> Route.authJwtPost(
     path: String,
-    crossinline body: suspend RoutesCtx.(R, Jwt.User) -> Unit
+    crossinline body: suspend RoutesCtx.(R, Jwt.User) -> Unit,
 ): Route = authenticate(Jwt.CONFIG) {
     post(path) {
         val principal = call.principal<Jwt.User>()
@@ -33,7 +33,7 @@ inline fun <reified R : Any> Route.authJwtPost(
 @KtorDsl
 inline fun Route.authJwtGet(
     path: String,
-    crossinline body: suspend RoutesCtx.(Jwt.User) -> Unit
+    crossinline body: suspend RoutesCtx.(Jwt.User) -> Unit,
 ): Route = authenticate(Jwt.CONFIG) {
     get(path) {
         val principal = call.principal<Jwt.User>()
@@ -45,7 +45,7 @@ inline fun Route.authJwtGet(
 @KtorDsl
 fun Route.authJwtWebSocket(
     path: String,
-    handler: suspend (DefaultWebSocketServerSession, Jwt.User) -> Unit
+    handler: suspend (DefaultWebSocketServerSession, Jwt.User) -> Unit,
 ): Route = authenticate(Jwt.CONFIG) {
     webSocket(path) {
         val principal = call.principal<Jwt.User>()
diff --git a/settings.gradle.kts b/settings.gradle.kts
index 71bfc98d..ec48bc36 100644
--- a/settings.gradle.kts
+++ b/settings.gradle.kts
@@ -27,6 +27,11 @@ pluginManagement {
     }
 }
 
+plugins {
+    val foojayResolverVersion: String by System.getProperties()
+    id("org.gradle.toolchains.foojay-resolver-convention") version foojayResolverVersion
+}
+
 rootProject.name = "mini-games"
 
 includeBuild("build-src")
diff --git a/shared-client/build.gradle.kts b/shared-client/build.gradle.kts
index 2c6604ae..55963195 100644
--- a/shared-client/build.gradle.kts
+++ b/shared-client/build.gradle.kts
@@ -1,7 +1,6 @@
-@file:Suppress("OPT_IN_IS_NOT_ENABLED")
-
 import com.codingfeline.buildkonfig.compiler.FieldSpec.Type.STRING
 import com.codingfeline.buildkonfig.gradle.TargetConfigDsl
+import org.jetbrains.kotlin.gradle.ExperimentalKotlinGradlePluginApi
 import org.jetbrains.kotlin.gradle.plugin.mpp.KotlinNativeTarget
 
 plugins {
@@ -17,13 +16,20 @@ plugins {
 }
 
 kotlin {
-    android()
+    jvmToolchain(17)
+
+    androidTarget()
 
     iosX64()
     iosArm64()
     iosSimulatorArm64()
 
-    jvm("desktop")
+    jvm()
+
+    @OptIn(ExperimentalKotlinGradlePluginApi::class)
+    compilerOptions {
+        freeCompilerArgs.add("-Xexpect-actual-classes")
+    }
 
     cocoapods {
         homepage = "https://github.com/avan1235/mini-games"
@@ -35,56 +41,44 @@ kotlin {
             isStatic = true
             baseName = "shared_client"
         }
-        extraSpecAttributes["resources"] = "['src/commonMain/res/**', 'src/iosMain/res/**']"
     }
 
     sourceSets {
-        val commonMain by named("commonMain") {
-            dependencies {
-                implementation(project(":shared"))
-
-                api(compose.runtime)
-                api(compose.foundation)
-                api(compose.material)
-                api(compose.material3)
-                api(compose.materialIconsExtended)
-                api(compose.ui)
-                api(compose.animation)
-                api(compose.animationGraphics)
-
-                @OptIn(org.jetbrains.compose.ExperimentalComposeLibrary::class)
-                implementation(compose.components.resources)
-
-                implementation(Dependencies.decompose)
-
-                implementation(Dependencies.essentyLifecycle)
-                implementation(Dependencies.essentyStateKeeper)
-                implementation(Dependencies.essentyParcelable)
-                implementation(Dependencies.essentyInstanceKeeper)
-
-                implementation(Dependencies.kotlinxSerialization)
-                implementation(Dependencies.ktorClientCore)
-                implementation(Dependencies.ktorClientWebsockets)
-                implementation(Dependencies.ktorClientSerialization)
-                implementation(Dependencies.ktorClientContentNegotiation)
-
-                implementation(Dependencies.napierLogger)
-                implementation(Dependencies.multiplatformSettings)
-                implementation(Dependencies.multiplatformSettingsCoroutines)
-
-                implementation(Dependencies.kotlinxAtomicFu)
-            }
+        commonMain.dependencies {
+            implementation(project(":shared"))
+
+            api(compose.runtime)
+            api(compose.foundation)
+            api(compose.material3)
+            api(compose.materialIconsExtended)
+            api(compose.ui)
+            api(compose.animation)
+            api(compose.animationGraphics)
+
+            @OptIn(org.jetbrains.compose.ExperimentalComposeLibrary::class)
+            implementation(compose.components.resources)
+
+            implementation(Dependencies.decompose)
+            implementation(Dependencies.decomposeExtensions)
+
+            implementation(Dependencies.kotlinxSerialization)
+            implementation(Dependencies.ktorClientCore)
+            implementation(Dependencies.ktorClientWebsockets)
+            implementation(Dependencies.ktorClientSerialization)
+            implementation(Dependencies.ktorClientContentNegotiation)
+
+            implementation(Dependencies.napierLogger)
+            implementation(Dependencies.multiplatformSettings)
+            implementation(Dependencies.multiplatformSettingsCoroutines)
+
+            implementation(Dependencies.kotlinxAtomicFu)
         }
-        named("androidMain") {
-            dependsOn(commonMain)
-
+        androidMain {
             resources.srcDirs("src/commonMain/res")
 
             dependencies {
                 implementation(Dependencies.androidXActivity)
                 implementation(Dependencies.androidXActivityCompose)
-                implementation(Dependencies.androidGoogleMaterial)
-                implementation(Dependencies.essentyInstanceKeeper)
                 implementation(Dependencies.decompose)
 
                 implementation(Dependencies.ktorClientAndroid)
@@ -93,37 +87,26 @@ kotlin {
                 implementation(Dependencies.multiplatformSettings)
                 implementation(Dependencies.multiplatformSettingsCoroutines)
                 implementation(Dependencies.multiplatformSettingsDatastore)
+                implementation(Dependencies.kotlinxCoroutinesAndroid)
             }
         }
-        named("desktopMain") {
-            dependsOn(commonMain)
-
+        jvmMain {
             resources.srcDirs("src/commonMain/res")
 
             dependencies {
                 implementation(compose.desktop.common)
                 implementation(compose.desktop.currentOs)
-                implementation(Dependencies.essentyInstanceKeeper)
 
                 implementation(Dependencies.ktorClientDesktop)
                 implementation(Dependencies.multiplatformSettings)
                 implementation(Dependencies.multiplatformSettingsCoroutines)
+                implementation(Dependencies.kotlinxCoroutinesSwing)
             }
         }
 
-        val iosX64Main by getting
-        val iosArm64Main by getting
-        val iosSimulatorArm64Main by getting
-
-        val iosMain by creating {
-            dependsOn(commonMain)
-
+        iosMain {
             resources.srcDirs("src/commonMain/res")
 
-            iosX64Main.dependsOn(this)
-            iosArm64Main.dependsOn(this)
-            iosSimulatorArm64Main.dependsOn(this)
-
             dependencies {
                 implementation(Dependencies.ktorClientDarwin)
                 implementation(Dependencies.parcelizeDarwinRuntime)
@@ -147,10 +130,16 @@ buildkonfig {
         create("android") {
             buildConfigField<String>("ANDROID_CLIENT_API_HOST")
         }
-        create("ios") {
-            buildConfigField<String>("IOS_CLIENT_API_HOST")
+        listOf(
+            "iosX64",
+            "iosArm64",
+            "iosSimulatorArm64",
+        ).forEach {
+            create(it) {
+                buildConfigField<String>("IOS_CLIENT_API_HOST")
+            }
         }
-        create("desktop") {
+        create("jvm") {
             buildConfigField<String>("DESKTOP_CLIENT_API_HOST")
         }
     }
@@ -162,14 +151,13 @@ android {
 
     defaultConfig {
         minSdk = Constants.Android.minSdk
-        targetSdk = Constants.Android.targetSdk
     }
 
     sourceSets {
         named("main") {
             res.srcDirs(
-                    "src/androidMain/res",
-                    "src/commonMain/res",
+                "src/androidMain/res",
+                "src/commonMain/res",
             )
         }
     }
diff --git a/shared-client/src/androidMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ViewModelContext.kt b/shared-client/src/androidMain/kotlin/ml/dev/kotlin/minigames/shared/component/MiniGamesAppComponentContext.kt
similarity index 61%
rename from shared-client/src/androidMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ViewModelContext.kt
rename to shared-client/src/androidMain/kotlin/ml/dev/kotlin/minigames/shared/component/MiniGamesAppComponentContext.kt
index 21f20fed..ba670c70 100644
--- a/shared-client/src/androidMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ViewModelContext.kt
+++ b/shared-client/src/androidMain/kotlin/ml/dev/kotlin/minigames/shared/component/MiniGamesAppComponentContext.kt
@@ -1,17 +1,18 @@
-package ml.dev.kotlin.minigames.shared.viewmodel
+package ml.dev.kotlin.minigames.shared.component
 
 import android.content.Context
 import android.view.Window
 import android.view.WindowManager
-import com.arkivanov.essenty.instancekeeper.InstanceKeeper
+import androidx.compose.material3.SnackbarHostState
 
-actual class ViewModelContext(
-    actual val keeper: InstanceKeeper,
-    val androidContext: Context,
+actual class MiniGamesAppComponentContext(
+    val applicationContext: Context,
     val window: Window,
 ) {
     @Suppress("DEPRECATION")
     actual fun adjustResize(): Unit = window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE)
 
     actual fun adjustPan(): Unit = window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN)
-}
+
+    actual val snackbarHostState = SnackbarHostState()
+}
\ No newline at end of file
diff --git a/shared-client/src/androidMain/kotlin/ml/dev/kotlin/minigames/shared/main.android.kt b/shared-client/src/androidMain/kotlin/ml/dev/kotlin/minigames/shared/main.android.kt
index a3fccad5..5b9334bc 100644
--- a/shared-client/src/androidMain/kotlin/ml/dev/kotlin/minigames/shared/main.android.kt
+++ b/shared-client/src/androidMain/kotlin/ml/dev/kotlin/minigames/shared/main.android.kt
@@ -8,23 +8,15 @@ import android.content.pm.ActivityInfo
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.ui.platform.LocalContext
-import com.arkivanov.essenty.backpressed.BackPressedHandler
-import com.arkivanov.essenty.instancekeeper.InstanceKeeper
-import ml.dev.kotlin.minigames.shared.ui.util.LocalBackPressedHandler
-import ml.dev.kotlin.minigames.shared.viewmodel.ViewModelContext
+import ml.dev.kotlin.minigames.shared.component.MiniGamesAppComponent
 
 fun ComponentActivity.setMainAndroidApp(
-    backPressedHandler: BackPressedHandler,
+    component: MiniGamesAppComponent,
 ): Unit = setContent {
     LockScreenPortraitOrientation()
-    CompositionLocalProvider(LocalBackPressedHandler provides backPressedHandler) {
-        val keeper = InstanceKeeper(viewModelStore)
-        val context = ViewModelContext(keeper, LocalContext.current, window)
-        MiniGamesApp(context)
-    }
+    MiniGamesApp(component)
 }
 
 @SuppressLint("SourceLockedOrientationActivity")
diff --git a/shared-client/src/androidMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/DropdownMenuParts.kt b/shared-client/src/androidMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/DropdownMenuParts.kt
index 256578bc..c286bbf0 100644
--- a/shared-client/src/androidMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/DropdownMenuParts.kt
+++ b/shared-client/src/androidMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/DropdownMenuParts.kt
@@ -9,8 +9,8 @@ internal actual fun DropdownMenu(
     expanded: Boolean,
     onDismissRequest: () -> Unit,
     modifier: Modifier,
-    content: @Composable ColumnScope.() -> Unit
-): Unit = androidx.compose.material.DropdownMenu(
+    content: @Composable ColumnScope.() -> Unit,
+): Unit = androidx.compose.material3.DropdownMenu(
     expanded = expanded,
     onDismissRequest = onDismissRequest,
     modifier = modifier,
@@ -20,8 +20,8 @@ internal actual fun DropdownMenu(
 @Composable
 internal actual fun DropdownMenuItem(
     onClick: () -> Unit,
-    content: @Composable () -> Unit
-): Unit = androidx.compose.material.DropdownMenuItem(
+    content: @Composable () -> Unit,
+): Unit = androidx.compose.material3.DropdownMenuItem(
     onClick = onClick,
-    content = { content() },
+    text = { content() },
 )
diff --git a/shared-client/src/androidMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ViewModelSettings.kt b/shared-client/src/androidMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ViewModelSettings.kt
index e41d4c44..6b6cbeee 100644
--- a/shared-client/src/androidMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ViewModelSettings.kt
+++ b/shared-client/src/androidMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ViewModelSettings.kt
@@ -8,11 +8,12 @@ import com.russhwolf.settings.ExperimentalSettingsApi
 import com.russhwolf.settings.ExperimentalSettingsImplementation
 import com.russhwolf.settings.coroutines.SuspendSettings
 import com.russhwolf.settings.datastore.DataStoreSettings
+import ml.dev.kotlin.minigames.shared.component.MiniGamesAppComponentContext
 
 private val Context.USER_LOGIN_DATA_STORE: DataStore<Preferences> by preferencesDataStore("user_settings")
 
 @OptIn(ExperimentalSettingsApi::class, ExperimentalSettingsImplementation::class)
-internal actual fun getUserSettings(context: ViewModelContext): SuspendSettings =
-    with(context.androidContext) {
+internal actual fun getUserSettings(context: MiniGamesAppComponentContext): SuspendSettings =
+    with(context.applicationContext) {
         DataStoreSettings(USER_LOGIN_DATA_STORE)
     }
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/MiniGamesApp.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/MiniGamesApp.kt
index 62a1c715..e6d1fcd0 100644
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/MiniGamesApp.kt
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/MiniGamesApp.kt
@@ -1,29 +1,65 @@
 package ml.dev.kotlin.minigames.shared
 
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Surface
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.SnackbarHost
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.arkivanov.decompose.extensions.compose.stack.Children
+import com.arkivanov.decompose.extensions.compose.stack.animation.slide
+import com.arkivanov.decompose.extensions.compose.stack.animation.stackAnimation
 import io.github.aakira.napier.DebugAntilog
 import io.github.aakira.napier.Napier
-import ml.dev.kotlin.minigames.shared.ui.MiniGamesRoutes
-import ml.dev.kotlin.minigames.shared.ui.screen.ToastScreen
+import ml.dev.kotlin.minigames.shared.component.MiniGamesAppComponent
+import ml.dev.kotlin.minigames.shared.component.MiniGamesAppComponent.Child
+import ml.dev.kotlin.minigames.shared.component.MiniGamesAppComponent.Child.Game
+import ml.dev.kotlin.minigames.shared.ui.component.bird.BirdGamePlay
+import ml.dev.kotlin.minigames.shared.ui.component.set.SetGamePlay
+import ml.dev.kotlin.minigames.shared.ui.component.snake.SnakeGamePlay
+import ml.dev.kotlin.minigames.shared.ui.screen.GameScreen
+import ml.dev.kotlin.minigames.shared.ui.screen.LogInScreen
+import ml.dev.kotlin.minigames.shared.ui.screen.RegisterScreen
 import ml.dev.kotlin.minigames.shared.ui.theme.Theme
-import ml.dev.kotlin.minigames.shared.viewmodel.ViewModelContext
 
 @Composable
-internal fun MiniGamesApp(context: ViewModelContext) {
+internal fun MiniGamesApp(component: MiniGamesAppComponent) {
     Napier.base(DebugAntilog())
-
     Theme {
-        Surface(
-            modifier = Modifier
-                .fillMaxSize()
-                .background(MaterialTheme.colors.surface)
+        Scaffold(
+            snackbarHost = {
+                SnackbarHost(
+                    modifier = Modifier.padding(bottom = 72.dp),
+                    hostState = component.snackbarHostState
+                )
+            },
+            modifier = Modifier.fillMaxSize()
         ) {
-            ToastScreen { MiniGamesRoutes(context) }
+            Children(
+                stack = component.stack,
+                modifier = Modifier.fillMaxSize(),
+                animation = stackAnimation(slide())
+            ) { child ->
+                when (val instance = child.instance) {
+                    is Game -> when (instance) {
+                        is Game.Bird -> GameScreen(instance.component) { snapshot, stateMessages ->
+                            BirdGamePlay(instance.component, snapshot, stateMessages)
+                        }
+
+                        is Game.Set -> GameScreen(instance.component) { snapshot, stateMessages ->
+                            SetGamePlay(instance.component, snapshot, stateMessages)
+                        }
+
+                        is Game.Snake -> GameScreen(instance.component) { snapshot, stateMessages ->
+                            SnakeGamePlay(instance.component, snapshot, stateMessages)
+                        }
+                    }
+
+                    is Child.LogIn -> LogInScreen(instance.component)
+                    is Child.Register -> RegisterScreen(instance.component)
+                }
+            }
         }
     }
 }
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/AbstractComponent.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/AbstractComponent.kt
new file mode 100644
index 00000000..95a79a76
--- /dev/null
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/AbstractComponent.kt
@@ -0,0 +1,105 @@
+package ml.dev.kotlin.minigames.shared.component
+
+import androidx.compose.material3.SnackbarDuration
+import com.arkivanov.decompose.ComponentContext
+import com.arkivanov.decompose.value.Value
+import com.arkivanov.essenty.lifecycle.Lifecycle
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.flow.SharingStarted
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.stateIn
+import kotlinx.coroutines.launch
+import ml.dev.kotlin.minigames.shared.ui.util.coroutineScope
+import kotlin.coroutines.CoroutineContext
+import kotlinx.coroutines.flow.combine as coroutinesFlowCombine
+import kotlinx.coroutines.flow.map as coroutinesFlowMap
+import ml.dev.kotlin.minigames.shared.ui.util.asValue as asValueUtil
+
+interface Component {
+    val appContext: MiniGamesAppComponentContext
+
+    fun toast(
+        message: String,
+        actionLabel: String? = null,
+        withDismissAction: Boolean = false,
+        duration: SnackbarDuration = if (actionLabel == null) SnackbarDuration.Short else SnackbarDuration.Indefinite,
+    )
+}
+
+abstract class AbstractComponent(
+    final override val appContext: MiniGamesAppComponentContext,
+    componentContext: ComponentContext,
+) : ComponentContext by componentContext, Component {
+
+    protected val scope: CoroutineScope = coroutineScope(Dispatchers.Main.immediate)
+
+    override fun toast(
+        message: String,
+        actionLabel: String?,
+        withDismissAction: Boolean,
+        duration: SnackbarDuration,
+    ) {
+        scope.launch {
+            appContext.snackbarHostState.showSnackbar(message, actionLabel, withDismissAction, duration)
+        }
+    }
+
+    protected fun <T, M> StateFlow<T>.map(
+        coroutineScope: CoroutineScope = scope,
+        mapper: (value: T) -> M,
+    ): StateFlow<M> =
+        coroutinesFlowMap(mapper)
+            .stateIn(
+                coroutineScope,
+                SharingStarted.Eagerly,
+                mapper(value),
+            )
+
+    protected fun <T1, T2, R> combine(
+        flow1: StateFlow<T1>,
+        flow2: StateFlow<T2>,
+        coroutineScope: CoroutineScope = scope,
+        transform: (T1, T2) -> R,
+    ): StateFlow<R> =
+        coroutinesFlowCombine(flow1, flow2, transform)
+            .stateIn(
+                coroutineScope,
+                SharingStarted.Eagerly,
+                transform(flow1.value, flow2.value)
+            )
+
+    protected fun <T1, T2, T3, R> combine(
+        flow1: StateFlow<T1>,
+        flow2: StateFlow<T2>,
+        flow3: StateFlow<T3>,
+        coroutineScope: CoroutineScope = scope,
+        transform: (T1, T2, T3) -> R,
+    ): StateFlow<R> =
+        coroutinesFlowCombine(flow1, flow2, flow3, transform)
+            .stateIn(
+                coroutineScope,
+                SharingStarted.Eagerly,
+                transform(flow1.value, flow2.value, flow3.value)
+            )
+
+    protected fun <T1, T2, T3, T4, R> combine(
+        flow1: StateFlow<T1>,
+        flow2: StateFlow<T2>,
+        flow3: StateFlow<T3>,
+        flow4: StateFlow<T4>,
+        coroutineScope: CoroutineScope = scope,
+        transform: (T1, T2, T3, T4) -> R,
+    ): StateFlow<R> =
+        coroutinesFlowCombine(flow1, flow2, flow3, flow4, transform)
+            .stateIn(
+                coroutineScope,
+                SharingStarted.Eagerly,
+                transform(flow1.value, flow2.value, flow3.value, flow4.value)
+            )
+
+    protected fun <T : Any> StateFlow<T>.asValue(
+        lifecycle: Lifecycle = this@AbstractComponent.lifecycle,
+        context: CoroutineContext = Dispatchers.Main.immediate,
+    ): Value<T> = asValueUtil(lifecycle, context)
+}
\ No newline at end of file
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/BirdComponent.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/BirdComponent.kt
new file mode 100644
index 00000000..c04465b5
--- /dev/null
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/BirdComponent.kt
@@ -0,0 +1,39 @@
+package ml.dev.kotlin.minigames.shared.component
+
+import com.arkivanov.decompose.ComponentContext
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.launch
+import ml.dev.kotlin.minigames.shared.api.BIRD_GAME_WEBSOCKET
+import ml.dev.kotlin.minigames.shared.model.BirdGameSnapshot
+import ml.dev.kotlin.minigames.shared.model.BirdGameUpdate
+import ml.dev.kotlin.minigames.shared.model.GameStateUpdateClientMessage
+import ml.dev.kotlin.minigames.shared.util.now
+import ml.dev.kotlin.minigames.shared.websocket.client.GameAccessData
+import ml.dev.kotlin.minigames.shared.websocket.client.GameClient
+
+interface BirdComponent : GameComponent<BirdGameSnapshot> {
+
+    fun emitFly(stateMessages: MutableStateFlow<GameStateUpdateClientMessage?>)
+}
+
+internal class BirdComponentImpl(
+    appContext: MiniGamesAppComponentContext,
+    componentContext: ComponentContext,
+    gameAccessData: GameAccessData,
+    onCloseGame: (String?) -> Unit,
+) : AbstractGameComponent<BirdGameSnapshot>(
+    appContext,
+    componentContext,
+    gameAccessData,
+    onCloseGame
+), BirdComponent {
+
+    override val client: GameClient = GameClient(BIRD_GAME_WEBSOCKET)
+
+    override fun emitFly(stateMessages: MutableStateFlow<GameStateUpdateClientMessage?>) {
+        scope.launch {
+            val message = GameStateUpdateClientMessage(BirdGameUpdate, timestamp = now())
+            stateMessages.emit(message)
+        }
+    }
+}
\ No newline at end of file
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/ChatComponent.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/ChatComponent.kt
new file mode 100644
index 00000000..c9d65bfe
--- /dev/null
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/ChatComponent.kt
@@ -0,0 +1,69 @@
+package ml.dev.kotlin.minigames.shared.component
+
+import androidx.compose.ui.text.input.TextFieldValue
+import com.arkivanov.decompose.ComponentContext
+import com.arkivanov.decompose.value.Value
+import io.github.aakira.napier.Napier
+import kotlinx.coroutines.flow.MutableSharedFlow
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.update
+import kotlinx.coroutines.launch
+import ml.dev.kotlin.minigames.shared.model.GameDataClientMessage
+import ml.dev.kotlin.minigames.shared.model.SendMessageClientMessage
+import ml.dev.kotlin.minigames.shared.model.UserMessage
+import ml.dev.kotlin.minigames.shared.model.Username
+import ml.dev.kotlin.minigames.shared.util.now
+
+interface ChatComponent : CountingComponent {
+    val username: Username
+    val messages: Value<List<UserMessage>>
+
+    val userMessageText: Value<TextFieldValue>
+    fun onUserMessageTextChange(text: TextFieldValue)
+
+    fun addMessage(message: UserMessage)
+
+    fun send(clientMessages: MutableSharedFlow<GameDataClientMessage>)
+}
+
+class ChatComponentImpl(
+    appContext: MiniGamesAppComponentContext,
+    componentContext: ComponentContext,
+    countPredicate: () -> Boolean,
+    override val username: Username,
+) : AbstractCountingComponent(appContext, componentContext, countPredicate), ChatComponent {
+    private val _messages: MutableStateFlow<List<UserMessage>> = MutableStateFlow(emptyList())
+    override val messages: Value<List<UserMessage>> = _messages.asValue()
+
+    private val _userMessageText: MutableStateFlow<TextFieldValue> = MutableStateFlow(TextFieldValue())
+    override val userMessageText: Value<TextFieldValue> = _userMessageText.asValue()
+
+    override fun onUserMessageTextChange(text: TextFieldValue) {
+        Napier.d { "onUserMessageTextChange: ${text.text}" }
+        _userMessageText.value = text
+    }
+
+    override fun addMessage(message: UserMessage) {
+        countNew()
+        _messages.update {
+            val idx = it.binarySearch(message, USER_MESSAGES_COMPARATOR)
+            if (idx < 0) it.toMutableList().apply { add(-idx - 1, message) } else it
+        }
+
+    }
+
+    override fun send(clientMessages: MutableSharedFlow<GameDataClientMessage>) {
+        val userMessageText = _userMessageText.value
+        if (userMessageText.text.isBlank()) return
+        val timestamp = now()
+        val userMessage = UserMessage(userMessageText.text, username, timestamp)
+        val message = SendMessageClientMessage(userMessage, timestamp)
+        scope.launch {
+            clientMessages.emit(message)
+            _userMessageText.value = TextFieldValue()
+        }
+    }
+}
+
+private val USER_MESSAGES_COMPARATOR: Comparator<UserMessage> =
+    Comparator { a, b -> a.timestamp.compareTo(b.timestamp) }
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/CountingComponent.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/CountingComponent.kt
new file mode 100644
index 00000000..f1b7952e
--- /dev/null
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/CountingComponent.kt
@@ -0,0 +1,32 @@
+package ml.dev.kotlin.minigames.shared.component
+
+import com.arkivanov.decompose.ComponentContext
+import com.arkivanov.decompose.value.Value
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.update
+
+interface CountingComponent : Component {
+    val count: Value<Int>
+
+    fun clearNewCount()
+}
+
+abstract class AbstractCountingComponent(
+    appContext: MiniGamesAppComponentContext,
+    componentContext: ComponentContext,
+    private val countPredicate: () -> Boolean,
+) : AbstractComponent(appContext, componentContext), CountingComponent {
+
+    private val _count: MutableStateFlow<Int> = MutableStateFlow(0)
+    override val count: Value<Int> = _count.asValue()
+
+    protected fun countNew() {
+        val isCountValid = countPredicate()
+        if (!isCountValid) return
+        _count.update { it + 1 }
+    }
+
+    override fun clearNewCount() {
+        _count.update { 0 }
+    }
+}
\ No newline at end of file
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/GameComponent.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/GameComponent.kt
new file mode 100644
index 00000000..36cc7a0b
--- /dev/null
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/GameComponent.kt
@@ -0,0 +1,112 @@
+package ml.dev.kotlin.minigames.shared.component
+
+import com.arkivanov.decompose.ComponentContext
+import kotlinx.coroutines.flow.MutableSharedFlow
+import kotlinx.coroutines.launch
+import ml.dev.kotlin.minigames.shared.model.*
+import ml.dev.kotlin.minigames.shared.util.now
+import ml.dev.kotlin.minigames.shared.viewmodel.CONNECT_ERROR_MESSAGE
+import ml.dev.kotlin.minigames.shared.viewmodel.RECEIVE_ERROR_MESSAGE
+import ml.dev.kotlin.minigames.shared.viewmodel.SEND_ERROR_MESSAGE
+import ml.dev.kotlin.minigames.shared.websocket.client.GameAccessData
+import ml.dev.kotlin.minigames.shared.websocket.client.GameClient
+
+interface GameComponent<Snapshot : GameSnapshot> : Component, ComponentContext {
+    val client: GameClient
+    val gameAccessData: GameAccessData
+    val username: Username get() = gameAccessData.userLogin.username
+
+    fun closeGame()
+
+    fun onErrorLogin()
+
+    fun onErrorReceive(e: Exception)
+
+    fun onErrorSend(e: Exception)
+
+    fun points(snapshot: Snapshot): Int
+
+    fun points(forUser: Username, snapshot: Snapshot): Int
+
+    fun userRole(snapshot: Snapshot): UserRole
+
+    fun canEditUser(username: Username, snapshot: Snapshot): Boolean
+
+    fun heartBeat(): HeartBeatClientMessage
+
+    fun approve(
+        username: Username,
+        clientMessages: MutableSharedFlow<GameDataClientMessage>,
+    )
+
+    fun discard(
+        username: Username,
+        clientMessages: MutableSharedFlow<GameDataClientMessage>,
+    )
+}
+
+abstract class AbstractGameComponent<Snapshot : GameSnapshot>(
+    appContext: MiniGamesAppComponentContext,
+    componentContext: ComponentContext,
+    override val gameAccessData: GameAccessData,
+    private val onCloseGame: (String?) -> Unit,
+) : AbstractComponent(appContext, componentContext), GameComponent<Snapshot> {
+
+    override fun closeGame() {
+        onCloseGame(null)
+    }
+
+    override fun onErrorLogin() {
+        onCloseGame(CONNECT_ERROR_MESSAGE)
+    }
+
+    override fun onErrorReceive(e: Exception) {
+        onCloseGame(RECEIVE_ERROR_MESSAGE)
+    }
+
+    override fun onErrorSend(e: Exception) {
+        onCloseGame(SEND_ERROR_MESSAGE)
+    }
+
+    override fun points(snapshot: Snapshot): Int = points(username, snapshot)
+
+    override fun points(forUser: Username, snapshot: Snapshot): Int = snapshot.points[forUser] ?: 0
+
+    override fun userRole(snapshot: Snapshot): UserRole = snapshot.users[username]?.role ?: DEFAULT_USER.role
+
+    override fun canEditUser(username: Username, snapshot: Snapshot): Boolean =
+        userRole(snapshot) == UserRole.Admin && username != this.username
+
+    override fun heartBeat(): HeartBeatClientMessage = HeartBeatClientMessage(timestamp = now())
+
+    override fun approve(
+        username: Username,
+        clientMessages: MutableSharedFlow<GameDataClientMessage>,
+    ) {
+        toast("Approving $username")
+        userAction(username, UserAction.Approve, clientMessages)
+    }
+
+    override fun discard(
+        username: Username,
+        clientMessages: MutableSharedFlow<GameDataClientMessage>,
+    ) {
+        toast("Discarding $username")
+        userAction(username, UserAction.Discard, clientMessages)
+    }
+
+    private fun userAction(
+        username: Username,
+        action: UserAction,
+        clientMessages: MutableSharedFlow<GameDataClientMessage>,
+    ) {
+        scope.launch {
+            val message = UserActionClientMessage(username, action, timestamp = now())
+            clientMessages.emit(message)
+        }
+    }
+}
+
+const val HEARTBEAT_DELAY_MILLIS: Long = 30_000
+
+private val DEFAULT_USER: UserData = UserData.player()
\ No newline at end of file
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/LogInComponent.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/LogInComponent.kt
new file mode 100644
index 00000000..f4ab2999
--- /dev/null
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/LogInComponent.kt
@@ -0,0 +1,189 @@
+package ml.dev.kotlin.minigames.shared.component
+
+import com.arkivanov.decompose.ComponentContext
+import com.arkivanov.decompose.value.Value
+import com.russhwolf.settings.ExperimentalSettingsApi
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.launch
+import ml.dev.kotlin.minigames.shared.model.UserLogin
+import ml.dev.kotlin.minigames.shared.rest.client.UserClient
+import ml.dev.kotlin.minigames.shared.ui.util.set
+import ml.dev.kotlin.minigames.shared.util.on
+import ml.dev.kotlin.minigames.shared.viewmodel.CONNECT_ERROR_MESSAGE
+import ml.dev.kotlin.minigames.shared.viewmodel.getUserSettings
+import ml.dev.kotlin.minigames.shared.viewmodel.message
+import kotlin.random.Random
+
+interface LogInComponent : Component {
+    val serverName: Value<String>
+    fun onServerNameChanged(serverName: String)
+
+    val username: Value<String>
+    fun onUsernameChanged(username: String)
+
+    val password: Value<String>
+    fun onPasswordChanged(password: String)
+
+    val serverNameError: Value<Boolean>
+    fun onServerNameErrorChanged(error: Boolean)
+
+    val usernameError: Value<Boolean>
+    fun onUsernameErrorChanged(error: Boolean)
+
+    val passwordError: Value<Boolean>
+    fun onPasswordErrorChanged(error: Boolean)
+
+    val game: Value<Game>
+    fun onGameChanged(game: Game)
+
+    val rememberUserLogin: Value<Boolean>
+    fun onRememberUserLoginChanged(remember: Boolean)
+
+    fun loginUser(onError: () -> Unit)
+
+    fun verifyInputFields(): Boolean
+
+    fun navigatePlayGame()
+
+    fun navigateRegister()
+
+    fun shuffleGameName()
+}
+
+internal class LogInComponentImpl(
+    appContext: MiniGamesAppComponentContext,
+    private val componentContext: ComponentContext,
+    private val onNavigateRegister: () -> Unit,
+    private val onNavigatePlayGame: (game: Game, serverName: String, username: String, password: String) -> Unit,
+) : AbstractComponent(appContext, componentContext), LogInComponent {
+    private val client: UserClient = UserClient()
+
+    private val _serverName: MutableStateFlow<String> = MutableStateFlow("")
+    override val serverName: Value<String> = _serverName.asValue()
+    override fun onServerNameChanged(serverName: String) {
+        _serverName.value = serverName
+    }
+
+    private val _username: MutableStateFlow<String> = MutableStateFlow("")
+    override val username: Value<String> = _username.asValue()
+    override fun onUsernameChanged(username: String) {
+        _username.value = username
+    }
+
+    private val _password: MutableStateFlow<String> = MutableStateFlow("")
+    override val password: Value<String> = _password.asValue()
+    override fun onPasswordChanged(password: String) {
+        _password.value = password
+    }
+
+    private val _serverNameError: MutableStateFlow<Boolean> = MutableStateFlow(false)
+    override val serverNameError: Value<Boolean> = _serverNameError.asValue()
+    override fun onServerNameErrorChanged(error: Boolean) {
+        _serverNameError.value = error
+    }
+
+    private val _usernameError: MutableStateFlow<Boolean> = MutableStateFlow(false)
+    override val usernameError: Value<Boolean> = _usernameError.asValue()
+    override fun onUsernameErrorChanged(error: Boolean) {
+        _usernameError.value = error
+    }
+
+    private val _passwordError: MutableStateFlow<Boolean> = MutableStateFlow(false)
+    override val passwordError: Value<Boolean> = _passwordError.asValue()
+    override fun onPasswordErrorChanged(error: Boolean) {
+        _passwordError.value = error
+    }
+
+    private val _game: MutableStateFlow<Game> = MutableStateFlow(Game.entries.first())
+    override val game: Value<Game> = _game.asValue()
+    override fun onGameChanged(game: Game) {
+        _game.value = game
+    }
+
+    private val _rememberUserLogin: MutableStateFlow<Boolean> = MutableStateFlow(false)
+    override val rememberUserLogin: Value<Boolean> = _rememberUserLogin.asValue()
+    override fun onRememberUserLoginChanged(remember: Boolean) {
+        _rememberUserLogin.value = remember
+    }
+
+    private val userLogin: UserLogin get() = UserLogin(username.value, password.value)
+
+    private val storableServerName: String?
+        get() = serverName.value.takeIf { shouldStoreServerName(it) }
+
+    init {
+        scope.launch {
+            loadLoginScreenData()
+            if (storableServerName == null) shuffleGameName()
+        }
+    }
+
+    override fun navigateRegister() {
+        onNavigateRegister()
+    }
+
+    override fun verifyInputFields(): Boolean = when {
+        _serverName.value.isEmpty() -> true.set(_serverNameError).let { false }
+        _username.value.isEmpty() -> true.set(_usernameError).let { false }
+        _password.value.isEmpty() -> true.set(_passwordError).let { false }
+        else -> false.set(_serverNameError, _usernameError, _passwordError).let { true }
+    }
+
+    override fun navigatePlayGame() {
+        scope.launch(Dispatchers.Main) {
+            onNavigatePlayGame(_game.value, _serverName.value, _username.value, _password.value)
+        }
+    }
+
+    override fun shuffleGameName() {
+        _serverName.value = _game.value.name + "-" + Random.nextInt(0, 1000)
+    }
+
+    override fun loginUser(onError: () -> Unit) {
+        scope.launch {
+            storeLoginScreenData()
+            client.loginUser(userLogin).on(
+                ok = {
+                    toast("Logged in")
+                    navigatePlayGame()
+                },
+                err = {
+                    toast(it.reason.message())
+                    onError()
+                },
+                empty = {
+                    toast(CONNECT_ERROR_MESSAGE)
+                    onError()
+                }
+            )
+        }
+    }
+
+    @OptIn(ExperimentalSettingsApi::class)
+    private suspend fun loadLoginScreenData(): Unit = getUserSettings(appContext).run {
+        getStringOrNull(USERNAME_KEY)?.let { _username.value = it }
+        getStringOrNull(PASSWORD_KEY)?.let { _password.value = it }
+        getStringOrNull(SERVER_NAME_KEY)?.let { _serverName.value = it }
+        getBooleanOrNull(REMEMBER_KEY)?.let { _rememberUserLogin.value = it }
+    }
+
+    @OptIn(ExperimentalSettingsApi::class)
+    private suspend fun storeLoginScreenData(): Unit = getUserSettings(appContext).run {
+        putString(USERNAME_KEY, if (rememberUserLogin.value) username.value else "")
+        putString(PASSWORD_KEY, if (rememberUserLogin.value) password.value else "")
+        putString(SERVER_NAME_KEY, storableServerName ?: "")
+        putBoolean(REMEMBER_KEY, rememberUserLogin.value)
+    }
+}
+
+private fun shouldStoreServerName(name: String): Boolean {
+    if (name.isBlank()) return false
+
+    return Game.entries.all { !name.startsWith("${it.name}-") }
+}
+
+private const val SERVER_NAME_KEY: String = "serverName"
+private const val REMEMBER_KEY: String = "remember"
+private const val USERNAME_KEY: String = "username"
+private const val PASSWORD_KEY: String = "password"
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/MiniGamesAppComponent.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/MiniGamesAppComponent.kt
new file mode 100644
index 00000000..ff8b3fc5
--- /dev/null
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/MiniGamesAppComponent.kt
@@ -0,0 +1,148 @@
+package ml.dev.kotlin.minigames.shared.component
+
+import androidx.compose.material3.SnackbarHostState
+import com.arkivanov.decompose.ComponentContext
+import com.arkivanov.decompose.router.stack.*
+import com.arkivanov.decompose.value.Value
+import kotlinx.serialization.Serializable
+import ml.dev.kotlin.minigames.shared.component.MiniGamesAppComponent.Child
+import ml.dev.kotlin.minigames.shared.model.UserLogin
+import ml.dev.kotlin.minigames.shared.model.Username
+import ml.dev.kotlin.minigames.shared.util.Named
+import ml.dev.kotlin.minigames.shared.websocket.client.GameAccessData
+
+interface MiniGamesAppComponent : Component {
+
+    val stack: Value<ChildStack<*, Child>>
+
+    val snackbarHostState: SnackbarHostState
+
+    fun onBackClicked(toIndex: Int)
+
+    sealed interface Child {
+        class LogIn(val component: LogInComponent) : Child
+        class Register(val component: RegisterComponent) : Child
+        sealed interface Game : Child {
+            val component: GameComponent<*>
+
+            class Snake(override val component: SnakeComponent) : Game
+            class Set(override val component: SetComponent) : Game
+            class Bird(override val component: BirdComponent) : Game
+        }
+    }
+}
+
+class MiniGamesAppComponentImpl(
+    appContext: MiniGamesAppComponentContext,
+    componentContext: ComponentContext,
+) : AbstractComponent(appContext, componentContext), MiniGamesAppComponent {
+
+    private val navigation: StackNavigation<Config> = StackNavigation()
+
+    private val navigationPopAndToastMessage: (String?) -> Unit
+        get() = { message -> navigation.pop { message?.let(::toast) } }
+
+    override val stack: Value<ChildStack<*, Child>> = childStack(
+        source = navigation,
+        serializer = Config.serializer(),
+        initialConfiguration = Config.LogIn,
+        handleBackButton = true,
+        childFactory = ::child,
+    )
+
+    override val snackbarHostState: SnackbarHostState = appContext.snackbarHostState
+
+    private fun child(config: Config, childComponentContext: ComponentContext): Child = when (config) {
+        is Config.LogIn -> Child.LogIn(
+            LogInComponentImpl(
+                appContext = appContext,
+                componentContext = childComponentContext,
+                onNavigateRegister = { navigation.push(Config.Register) },
+                onNavigatePlayGame = { game, serverName, username, password ->
+                    navigation.push(
+                        when (game) {
+                            Game.Bird -> Config.Game.Bird(serverName, username, password)
+                            Game.SnakeIO -> Config.Game.Snake(serverName, username, password)
+                            Game.Set -> Config.Game.Set(serverName, username, password)
+                        }
+                    )
+                },
+            )
+        )
+
+        is Config.Register -> Child.Register(
+            RegisterComponentImpl(
+                appContext = appContext,
+                componentContext = childComponentContext,
+                onNavigateBack = navigationPopAndToastMessage,
+            )
+        )
+
+        is Config.Game -> {
+            val gameAccessData = GameAccessData(config.serverName, UserLogin(config.username, config.password))
+            when (config) {
+                is Config.Game.Set -> Child.Game.Set(
+                    SetComponentImpl(
+                        appContext = appContext,
+                        componentContext = childComponentContext,
+                        gameAccessData = gameAccessData,
+                        onCloseGame = navigationPopAndToastMessage,
+                    )
+                )
+
+                is Config.Game.Snake -> Child.Game.Snake(
+                    SnakeComponentImpl(
+                        appContext = appContext,
+                        componentContext = childComponentContext,
+                        gameAccessData = gameAccessData,
+                        onCloseGame = navigationPopAndToastMessage,
+                    )
+                )
+
+                is Config.Game.Bird -> Child.Game.Bird(
+                    BirdComponentImpl(
+                        appContext = appContext,
+                        componentContext = childComponentContext,
+                        gameAccessData = gameAccessData,
+                        onCloseGame = navigationPopAndToastMessage,
+                    )
+                )
+            }
+        }
+    }
+
+    override fun onBackClicked(toIndex: Int) {
+        navigation.popTo(index = toIndex)
+    }
+
+    @Serializable
+    private sealed interface Config {
+        @Serializable
+        data object LogIn : Config
+
+        @Serializable
+        data object Register : Config
+
+        @Serializable
+        sealed interface Game : Config {
+            val serverName: String
+            val username: Username
+            val password: String
+
+            @Serializable
+            data class Set(override val serverName: String, override val username: Username, override val password: String) : Game
+
+            @Serializable
+            data class Snake(override val serverName: String, override val username: Username, override val password: String) : Game
+
+            @Serializable
+            data class Bird(override val serverName: String, override val username: Username, override val password: String) : Game
+        }
+    }
+}
+
+enum class Game : Named {
+    Bird,
+    SnakeIO,
+    Set,
+}
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/MiniGamesAppComponentContext.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/MiniGamesAppComponentContext.kt
new file mode 100644
index 00000000..9039856b
--- /dev/null
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/MiniGamesAppComponentContext.kt
@@ -0,0 +1,10 @@
+package ml.dev.kotlin.minigames.shared.component
+
+import androidx.compose.material3.SnackbarHostState
+
+expect class MiniGamesAppComponentContext {
+    fun adjustResize()
+    fun adjustPan()
+
+    val snackbarHostState: SnackbarHostState
+}
\ No newline at end of file
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/NotificationsComponent.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/NotificationsComponent.kt
new file mode 100644
index 00000000..f656a571
--- /dev/null
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/NotificationsComponent.kt
@@ -0,0 +1,33 @@
+package ml.dev.kotlin.minigames.shared.component
+
+import com.arkivanov.decompose.ComponentContext
+import com.arkivanov.decompose.value.Value
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.update
+
+interface NotificationsComponent : CountingComponent {
+    val notifications: Value<List<IndexedNotification>>
+
+    fun addNotification(message: String)
+    fun removeNotification(notification: IndexedNotification)
+}
+
+class NotificationsComponentImpl(
+    appContext: MiniGamesAppComponentContext,
+    componentContext: ComponentContext,
+    countPredicate: () -> Boolean,
+) : AbstractCountingComponent(appContext, componentContext, countPredicate), NotificationsComponent {
+    private val _notifications: MutableStateFlow<List<IndexedNotification>> = MutableStateFlow(emptyList())
+    override val notifications: Value<List<IndexedNotification>> = _notifications.asValue()
+
+    override fun addNotification(message: String) {
+        countNew()
+        _notifications.update { it + IndexedNotification(message, it.size) }
+    }
+
+    override fun removeNotification(notification: IndexedNotification) {
+        _notifications.update { it - notification }
+    }
+}
+
+data class IndexedNotification(val message: String, val idx: Int)
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/RegisterComponent.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/RegisterComponent.kt
new file mode 100644
index 00000000..686d61eb
--- /dev/null
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/RegisterComponent.kt
@@ -0,0 +1,135 @@
+package ml.dev.kotlin.minigames.shared.component
+
+import com.arkivanov.decompose.ComponentContext
+import com.arkivanov.decompose.value.Value
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.launch
+import ml.dev.kotlin.minigames.shared.model.UserCreate
+import ml.dev.kotlin.minigames.shared.rest.client.UserClient
+import ml.dev.kotlin.minigames.shared.ui.util.set
+import ml.dev.kotlin.minigames.shared.util.on
+import ml.dev.kotlin.minigames.shared.viewmodel.CONNECT_ERROR_MESSAGE
+import ml.dev.kotlin.minigames.shared.viewmodel.message
+
+interface RegisterComponent : Component {
+    val email: Value<String>
+    fun onEmailChanged(email: String)
+
+    val username: Value<String>
+    fun onUsernameChanged(username: String)
+
+    val password: Value<String>
+    fun onPasswordChanged(password: String)
+
+    val confirmPassword: Value<String>
+    fun onConfirmPasswordChanged(password: String)
+
+    val emailError: Value<Boolean>
+    fun onEmailErrorChanged(error: Boolean)
+
+    val usernameError: Value<Boolean>
+    fun onUsernameErrorChanged(error: Boolean)
+
+    val passwordError: Value<Boolean>
+    fun onPasswordErrorChanged(error: Boolean)
+
+    val confirmPasswordError: Value<Boolean>
+    fun onConfirmPasswordErrorChanged(error: Boolean)
+
+    fun navigateBack()
+
+    fun verifyInputFields(): Boolean
+
+    fun createUser(onError: () -> Unit)
+}
+
+internal class RegisterComponentImpl(
+    appContext: MiniGamesAppComponentContext,
+    componentContext: ComponentContext,
+    private val onNavigateBack: (message: String?) -> Unit,
+) : AbstractComponent(appContext, componentContext), RegisterComponent {
+    private val client: UserClient = UserClient()
+
+    private val _email: MutableStateFlow<String> = MutableStateFlow("")
+    override val email: Value<String> = _email.asValue()
+    override fun onEmailChanged(email: String) {
+        _email.value = email
+    }
+
+    private val _username: MutableStateFlow<String> = MutableStateFlow("")
+    override val username: Value<String> = _username.asValue()
+    override fun onUsernameChanged(username: String) {
+        _username.value = username
+    }
+
+    private val _password: MutableStateFlow<String> = MutableStateFlow("")
+    override val password: Value<String> = _password.asValue()
+    override fun onPasswordChanged(password: String) {
+        _password.value = password
+    }
+
+    private val _confirmPassword: MutableStateFlow<String> = MutableStateFlow("")
+    override val confirmPassword: Value<String> = _confirmPassword.asValue()
+    override fun onConfirmPasswordChanged(password: String) {
+        _confirmPassword.value = password
+    }
+
+    private val _emailError: MutableStateFlow<Boolean> = MutableStateFlow(false)
+    override val emailError: Value<Boolean> = _emailError.asValue()
+    override fun onEmailErrorChanged(error: Boolean) {
+        _emailError.value = error
+    }
+
+    private val _usernameError: MutableStateFlow<Boolean> = MutableStateFlow(false)
+    override val usernameError: Value<Boolean> = _usernameError.asValue()
+    override fun onUsernameErrorChanged(error: Boolean) {
+        _usernameError.value = error
+    }
+
+    private val _passwordError: MutableStateFlow<Boolean> = MutableStateFlow(false)
+    override val passwordError: Value<Boolean> = _passwordError.asValue()
+    override fun onPasswordErrorChanged(error: Boolean) {
+        _passwordError.value = error
+    }
+
+    private val _confirmPasswordError: MutableStateFlow<Boolean> = MutableStateFlow(false)
+    override val confirmPasswordError: Value<Boolean> = _confirmPasswordError.asValue()
+    override fun onConfirmPasswordErrorChanged(error: Boolean) {
+        _confirmPasswordError.value = error
+    }
+
+    override fun navigateBack() {
+        onNavigateBack(null)
+    }
+
+    override fun verifyInputFields(): Boolean = when {
+        _email.value.isEmpty() -> true.set(_emailError).let { false }
+        _username.value.isEmpty() -> true.set(_usernameError).let { false }
+        _password.value.isEmpty() -> true.set(_passwordError).let { false }
+        _confirmPassword.value.isEmpty() -> true.set(_confirmPasswordError).let { false }
+        _password.value != _confirmPassword.value -> {
+            true.set(_passwordError, _confirmPasswordError)
+            toast("Passwords don't match").let { false }
+        }
+
+        else -> false.set(_emailError, _usernameError, _passwordError, _confirmPasswordError).let { true }
+    }
+
+    override fun createUser(onError: () -> Unit) {
+        scope.launch {
+            client.createUser(UserCreate(_email.value, _username.value, _password.value))?.on(
+                ok = {
+                    onNavigateBack("Verify your email and check for spam messages")
+                },
+                err = {
+                    toast(it.reason.message())
+                    onError()
+                },
+                empty = {
+                    toast(CONNECT_ERROR_MESSAGE)
+                    onError()
+                }
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/SetComponent.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/SetComponent.kt
new file mode 100644
index 00000000..24c74a15
--- /dev/null
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/SetComponent.kt
@@ -0,0 +1,47 @@
+package ml.dev.kotlin.minigames.shared.component
+
+import com.arkivanov.decompose.ComponentContext
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.launch
+import ml.dev.kotlin.minigames.shared.api.SET_GAME_WEBSOCKET
+import ml.dev.kotlin.minigames.shared.model.GameStateUpdateClientMessage
+import ml.dev.kotlin.minigames.shared.model.SetGameSnapshot
+import ml.dev.kotlin.minigames.shared.model.SetGameUpdate
+import ml.dev.kotlin.minigames.shared.model.SetProposal
+import ml.dev.kotlin.minigames.shared.util.now
+import ml.dev.kotlin.minigames.shared.websocket.client.GameAccessData
+import ml.dev.kotlin.minigames.shared.websocket.client.GameClient
+
+interface SetComponent : GameComponent<SetGameSnapshot> {
+    fun emitSetProposal(
+        cardsIds: Set<Int>,
+        stateMessages: MutableStateFlow<GameStateUpdateClientMessage?>,
+    )
+}
+
+internal class SetComponentImpl(
+    appContext: MiniGamesAppComponentContext,
+    componentContext: ComponentContext,
+    gameAccessData: GameAccessData,
+    onCloseGame: (String?) -> Unit,
+) : AbstractGameComponent<SetGameSnapshot>(
+    appContext,
+    componentContext,
+    gameAccessData,
+    onCloseGame
+), SetComponent {
+
+    override val client: GameClient = GameClient(SET_GAME_WEBSOCKET)
+
+    override fun emitSetProposal(
+        cardsIds: Set<Int>,
+        stateMessages: MutableStateFlow<GameStateUpdateClientMessage?>,
+    ) {
+        scope.launch {
+            val proposal = SetProposal(cardsIds)
+            val update = SetGameUpdate(proposal)
+            val message = GameStateUpdateClientMessage(update, timestamp = now())
+            stateMessages.emit(message)
+        }
+    }
+}
\ No newline at end of file
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/SnakeComponent.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/SnakeComponent.kt
new file mode 100644
index 00000000..7c00e477
--- /dev/null
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/component/SnakeComponent.kt
@@ -0,0 +1,49 @@
+package ml.dev.kotlin.minigames.shared.component
+
+import com.arkivanov.decompose.ComponentContext
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.launch
+import ml.dev.kotlin.minigames.shared.api.SNAKE_GAME_WEBSOCKET
+import ml.dev.kotlin.minigames.shared.model.*
+import ml.dev.kotlin.minigames.shared.util.V2
+import ml.dev.kotlin.minigames.shared.util.now
+import ml.dev.kotlin.minigames.shared.websocket.client.GameAccessData
+import ml.dev.kotlin.minigames.shared.websocket.client.GameClient
+
+interface SnakeComponent : GameComponent<SnakeGameSnapshot> {
+    fun emitDirectionChange(
+        dir: V2,
+        stateMessages: MutableStateFlow<GameStateUpdateClientMessage?>,
+    )
+
+    fun userSnake(snapshot: SnakeGameSnapshot): Snake?
+}
+
+internal class SnakeComponentImpl(
+    appContext: MiniGamesAppComponentContext,
+    componentContext: ComponentContext,
+    gameAccessData: GameAccessData,
+    onCloseGame: (String?) -> Unit,
+) : AbstractGameComponent<SnakeGameSnapshot>(
+    appContext,
+    componentContext,
+    gameAccessData,
+    onCloseGame,
+), SnakeComponent {
+
+    override val client: GameClient = GameClient(SNAKE_GAME_WEBSOCKET)
+
+    override fun emitDirectionChange(
+        dir: V2,
+        stateMessages: MutableStateFlow<GameStateUpdateClientMessage?>,
+    ) {
+        scope.launch {
+            val direction = SnakeDirection(dir)
+            val update = SnakeGameUpdate(direction)
+            val message = GameStateUpdateClientMessage(update, timestamp = now())
+            stateMessages.emit(message)
+        }
+    }
+
+    override fun userSnake(snapshot: SnakeGameSnapshot): Snake? = snapshot.snakes[username]
+}
\ No newline at end of file
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/rest/client/RestApiClient.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/rest/client/RestApiClient.kt
index 4f379fb3..cf4c0f3a 100644
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/rest/client/RestApiClient.kt
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/rest/client/RestApiClient.kt
@@ -27,7 +27,7 @@ class RestApiClient : Closeable {
     @OptIn(ExperimentalSerializationApi::class)
     suspend inline fun <reified E, reified T> post(
         path: String,
-        block: HttpRequestBuilder.() -> Unit = {}
+        block: HttpRequestBuilder.() -> Unit = {},
     ): Res<E, T>? = try {
         httpClient.post {
             url {
@@ -52,7 +52,7 @@ class RestApiClient : Closeable {
     @OptIn(ExperimentalSerializationApi::class)
     suspend inline fun <reified E, reified T> get(
         path: String,
-        block: HttpRequestBuilder.() -> Unit = {}
+        block: HttpRequestBuilder.() -> Unit = {},
     ): Res<E, T>? = try {
         httpClient.get {
             url {
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/Routes.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/Routes.kt
deleted file mode 100644
index 8ff295fa..00000000
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/Routes.kt
+++ /dev/null
@@ -1,99 +0,0 @@
-package ml.dev.kotlin.minigames.shared.ui
-
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberCoroutineScope
-import com.arkivanov.essenty.parcelable.Parcelable
-import com.arkivanov.essenty.parcelable.Parcelize
-import ml.dev.kotlin.minigames.shared.model.UserLogin
-import ml.dev.kotlin.minigames.shared.model.Username
-import ml.dev.kotlin.minigames.shared.ui.component.bird.BirdGamePlay
-import ml.dev.kotlin.minigames.shared.ui.component.set.SetGamePlay
-import ml.dev.kotlin.minigames.shared.ui.component.snake.SnakeGamePlay
-import ml.dev.kotlin.minigames.shared.ui.screen.GameScreen
-import ml.dev.kotlin.minigames.shared.ui.screen.LogInScreen
-import ml.dev.kotlin.minigames.shared.ui.screen.RegisterScreen
-import ml.dev.kotlin.minigames.shared.ui.util.Children
-import ml.dev.kotlin.minigames.shared.ui.util.crossfadeScale
-import ml.dev.kotlin.minigames.shared.ui.util.rememberRouter
-import ml.dev.kotlin.minigames.shared.util.Named
-import ml.dev.kotlin.minigames.shared.viewmodel.*
-import ml.dev.kotlin.minigames.shared.websocket.client.GameAccessData
-
-
-@Composable
-internal fun MiniGamesRoutes(context: ViewModelContext) {
-    val navigator = rememberRouter(ScreenRoute.LogInScreen, ScreenRoute::class)
-    val scope = rememberCoroutineScope()
-
-    val loginVM = remember { LogInViewModel(context, scope) }
-    Children(routerState = navigator.state, animation = crossfadeScale()) { screen ->
-        when (val conf = screen.configuration) {
-            ScreenRoute.LogInScreen -> LogInScreen(navigator, loginVM)
-            ScreenRoute.RegisterScreen -> {
-                val vm = remember { RegisterViewModel(context) }
-                RegisterScreen(navigator, vm)
-            }
-
-            is ScreenRoute.GameScreen -> {
-                val accessData = GameAccessData(conf.serverName, UserLogin(conf.username, conf.password))
-                when (conf) {
-                    is ScreenRoute.GameScreen.Set -> {
-                        val vm = remember(accessData) { SetGameViewModel(context, accessData) }
-                        GameScreen(accessData, conf, navigator, vm) { snapshot, stateMessages ->
-                            SetGamePlay(navigator, vm, snapshot, stateMessages)
-                        }
-                    }
-
-                    is ScreenRoute.GameScreen.Snake -> {
-                        val vm = remember(context, accessData) { SnakeGameViewModel(context, accessData) }
-                        GameScreen(accessData, conf, navigator, vm) { snapshot, stateMessages ->
-                            SnakeGamePlay(navigator, vm, snapshot, stateMessages)
-                        }
-                    }
-
-                    is ScreenRoute.GameScreen.Bird -> {
-                        val vm = remember(context, accessData) { BirdGameViewModel(context, accessData) }
-                        GameScreen(accessData, conf, navigator, vm) { snapshot, stateMessages ->
-                            BirdGamePlay(navigator, vm, snapshot, stateMessages)
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-sealed interface ScreenRoute : Parcelable {
-    @Parcelize
-    object LogInScreen : ScreenRoute
-
-    @Parcelize
-    object RegisterScreen : ScreenRoute
-
-    sealed interface GameScreen : ScreenRoute {
-        val serverName: String
-        val username: Username
-        val password: String
-
-        @Parcelize
-        data class Set(override val serverName: String, override val username: Username, override val password: String) :
-            GameScreen
-
-        @Parcelize
-        data class Snake(override val serverName: String, override val username: Username, override val password: String) :
-            GameScreen
-
-        @Parcelize
-        data class Bird(override val serverName: String, override val username: Username, override val password: String) :
-            GameScreen
-    }
-}
-
-enum class Game : Named {
-    Bird,
-    SnakeIO,
-    Set,
-}
-
-val GAMES: List<Game> = Game.values().toList()
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/Aligned.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/Aligned.kt
deleted file mode 100644
index 3e4413a0..00000000
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/Aligned.kt
+++ /dev/null
@@ -1,13 +0,0 @@
-package ml.dev.kotlin.minigames.shared.ui.component
-
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.BoxScope
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-
-@Composable
-internal fun Aligned(contentAlignment: Alignment, content: @Composable BoxScope.() -> Unit) {
-    Box(modifier = Modifier.fillMaxSize(), contentAlignment = contentAlignment, content = content)
-}
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/Button.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/Button.kt
index c4900c3e..d16393d9 100644
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/Button.kt
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/Button.kt
@@ -5,9 +5,9 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowBack
+import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -22,15 +22,15 @@ internal fun CircleButton(
     icon: ImageVector? = null,
     contentDescription: String? = null,
     text: String? = null,
-    color: Color = MaterialTheme.colors.primaryVariant,
-    onClick: () -> Unit
+    color: Color = MaterialTheme.colorScheme.inversePrimary,
+    onClick: () -> Unit,
 ) {
     Surface(
         shape = CircleShape,
         modifier = Modifier
             .padding(16.dp)
             .size(56.dp),
-        elevation = 8.dp,
+        shadowElevation = 8.dp,
         color = color
     ) {
         Box(
@@ -43,7 +43,7 @@ internal fun CircleButton(
                 Icon(
                     imageVector = icon,
                     contentDescription = contentDescription,
-                    tint = MaterialTheme.colors.onPrimary,
+                    tint = MaterialTheme.colorScheme.onPrimary,
                 )
             }
             if (text != null) {
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/Chat.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/Chat.kt
index e8d6cc3f..fea7dd94 100644
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/Chat.kt
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/Chat.kt
@@ -14,12 +14,11 @@ import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.KeyboardActions
-import androidx.compose.material.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Send
+import androidx.compose.material3.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
-import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
@@ -29,11 +28,13 @@ import androidx.compose.ui.input.key.Key
 import androidx.compose.ui.input.key.key
 import androidx.compose.ui.input.key.onKeyEvent
 import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import com.arkivanov.decompose.extensions.compose.subscribeAsState
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.flow.MutableSharedFlow
-import kotlinx.coroutines.launch
+import ml.dev.kotlin.minigames.shared.component.ChatComponent
 import ml.dev.kotlin.minigames.shared.model.GameDataClientMessage
 import ml.dev.kotlin.minigames.shared.model.UserMessage
 import ml.dev.kotlin.minigames.shared.model.Username
@@ -44,23 +45,24 @@ import ml.dev.kotlin.minigames.shared.util.ComputedMap
 import ml.dev.kotlin.minigames.shared.util.format
 import ml.dev.kotlin.minigames.shared.util.now
 import ml.dev.kotlin.minigames.shared.util.toPaddedString
-import ml.dev.kotlin.minigames.shared.viewmodel.ChatViewModel
 
 @Composable
 internal fun Chat(
-    vm: ChatViewModel,
+    component: ChatComponent,
     clientMessages: MutableSharedFlow<GameDataClientMessage>,
-    size: Dp = 64.dp,
-    bottomPadding: Dp = 16.dp
+    size: Dp = 54.dp,
+    bottomPadding: Dp = 16.dp,
 ) {
-    val scope = rememberCoroutineScope()
     BoxWithConstraints(modifier = Modifier.fillMaxSize()) {
         val messagesHeight = maxHeight - size - bottomPadding
         Column(
             modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Bottom
         ) {
-            Messages(vm.messages, vm.username, messagesHeight)
-            MessageInput(vm.userMessageTextState, size = size, onClick = { scope.launch { vm.send(clientMessages) } })
+            val messages by component.messages.subscribeAsState()
+            Messages(messages, component.username, messagesHeight)
+
+            val userMessageText by component.userMessageText.subscribeAsState()
+            MessageInput(userMessageText, component::onUserMessageTextChange, size, onClick = { component.send(clientMessages) })
             BottomPadding(bottomPadding)
         }
     }
@@ -68,30 +70,33 @@ internal fun Chat(
 
 @Composable
 private fun BottomPadding(padding: Dp) {
-    Box(modifier = Modifier.fillMaxWidth().height(padding).background(MaterialTheme.colors.background))
+    Box(modifier = Modifier.fillMaxWidth().height(padding).background(MaterialTheme.colorScheme.background))
 }
 
-@OptIn(ExperimentalComposeUiApi::class)
 @Composable
 private fun MessageInput(
-    message: MutableState<String>,
+    message: TextFieldValue,
+    onMessageChange: (TextFieldValue) -> Unit,
     size: Dp,
+    onClick: () -> Unit,
     padding: Dp = 8.dp,
-    inputRegex: Regex = Regex("[^\\n]*"),
-    onClick: () -> Unit
 ) {
-    BoxWithConstraints(modifier = Modifier.fillMaxWidth().height(size)) {
+    BoxWithConstraints(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(size)
+    ) {
         val messageWidth = maxWidth - size
         Row(
-            modifier = Modifier.fillMaxWidth().background(MaterialTheme.colors.background),
+            modifier = Modifier.fillMaxWidth().background(MaterialTheme.colorScheme.background),
             verticalAlignment = Alignment.CenterVertically
         ) {
             BasicTextField(
-                value = message.value,
-                onValueChange = { message.value = if (inputRegex.matches(it)) it else message.value },
-                textStyle = Typography.body1.copy(color = MaterialTheme.colors.primary),
+                value = message,
+                onValueChange = onMessageChange,
+                textStyle = Typography.bodyLarge.copy(color = MaterialTheme.colorScheme.primary),
                 singleLine = true,
-                cursorBrush = SolidColor(MaterialTheme.colors.primary),
+                cursorBrush = SolidColor(MaterialTheme.colorScheme.primary),
                 keyboardActions = KeyboardActions(
                     onDone = { onClick() },
                 ),
@@ -99,23 +104,20 @@ private fun MessageInput(
                     .width(messageWidth)
                     .padding(start = padding, top = padding, bottom = padding)
                     .clip(Shapes.large)
-                    .background(MaterialTheme.colors.surface)
+                    .background(MaterialTheme.colorScheme.surface)
                     .padding(horizontal = padding * 2, vertical = padding)
                     .onKeyEvent {
                         if (it.key.keyCode == Key.Enter.keyCode) true.also { onClick() } else false
                     }
             )
-            IconButton(
-                onClick = onClick,
-                modifier = Modifier
-                    .size(size)
-                    .padding(padding)
-                    .clip(CircleShape)
-                    .background(MaterialTheme.colors.secondaryVariant)
-                    .padding(padding),
+            Box(
+                modifier = Modifier.fillMaxHeight().padding(padding)
             ) {
-                Icon(imageVector = Icons.Default.Send, contentDescription = "send")
+                IconButton(onClick) {
+                    Icon(imageVector = Icons.Default.Send, contentDescription = "send")
+                }
             }
+
         }
     }
 }
@@ -135,7 +137,6 @@ private fun Messages(messages: List<UserMessage>, username: Username, height: Dp
     }
 }
 
-@OptIn(ExperimentalAnimationApi::class)
 @Composable
 private fun Message(
     message: UserMessage,
@@ -143,10 +144,10 @@ private fun Message(
     contentPart: Float = 0.9f,
     animationDuration: Int = 300,
     paddingMultiply: Float = 1.5f,
-    onVisible: suspend () -> Unit
+    onVisible: suspend () -> Unit,
 ) {
     val isAuthor = message.author == username
-    val background = if (isAuthor) MaterialTheme.colors.secondaryVariant else MaterialTheme.colors.primaryVariant
+    val background = if (isAuthor) MaterialTheme.colorScheme.secondaryContainer else MaterialTheme.colorScheme.inversePrimary
     val align = if (isAuthor) Alignment.CenterEnd else Alignment.CenterStart
     val transformOrigin = if (isAuthor) TransformOrigin(1f, 0.5f) else TransformOrigin(0f, 0.5f)
     val animationSpec = tween<Float>(animationDuration, easing = LinearEasing)
@@ -168,27 +169,34 @@ private fun Message(
                 modifier = Modifier.fillMaxWidth(contentPart), contentAlignment = align
             ) {
                 Surface(
-                    shape = Shapes.large, color = background, elevation = 4.dp, modifier = Modifier.padding(4.dp)
+                    shape = Shapes.large,
+                    color = background,
+                    shadowElevation = 4.dp,
+                    modifier = Modifier.padding(4.dp)
                 ) {
                     Box(modifier = Modifier.padding(horizontal = 12.dp, vertical = 8.dp)) {
                         if (!isAuthor) Text(
                             text = message.author,
-                            style = Typography.subtitle2,
+                            style = Typography.titleSmall,
                             color = USER_COLOR[message.author],
                             modifier = Modifier.align(Alignment.TopStart)
                         )
                         Text(
                             message.message,
-                            style = Typography.body1,
-                            modifier = Modifier.align(Alignment.CenterEnd).padding(
-                                top = if (!isAuthor) with(LocalDensity.current) { Typography.subtitle2.fontSize.toDp() * paddingMultiply } else 0.dp,
-                                bottom = with(LocalDensity.current) { Typography.caption.fontSize.toDp() * paddingMultiply },
-                            )
+                            style = Typography.bodyLarge,
+                            modifier = Modifier
+                                .align(Alignment.CenterEnd)
+                                .padding(
+                                    start = 0.dp,
+                                    end = 0.dp,
+                                    top = if (!isAuthor) with(LocalDensity.current) { Typography.titleSmall.fontSize.toDp() * paddingMultiply } else 0.dp,
+                                    bottom = with(LocalDensity.current) { Typography.bodySmall.fontSize.toDp() * paddingMultiply },
+                                )
                         )
                         Text(
                             text = message.timestamp.format { "${hour.toPaddedString()}:${minute.toPaddedString()}" },
-                            style = Typography.caption,
-                            color = MaterialTheme.colors.onPrimary,
+                            style = Typography.bodySmall,
+                            color = MaterialTheme.colorScheme.onPrimary,
                             modifier = Modifier.align(Alignment.BottomEnd)
                         )
                     }
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/DropdownMenu.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/DropdownMenu.kt
index cf205a98..4304d894 100644
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/DropdownMenu.kt
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/DropdownMenu.kt
@@ -3,11 +3,11 @@ package ml.dev.kotlin.minigames.shared.ui.component
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
-import androidx.compose.material.Icon
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowDropDown
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -19,7 +19,8 @@ import ml.dev.kotlin.minigames.shared.util.Named
 
 @Composable
 internal fun <T : Named> DropdownMenu(
-    selected: MutableState<T>,
+    selected: T,
+    onChanged: (T) -> Unit,
     anyItems: Collection<T>,
 ) {
     val items = anyItems.toList()
@@ -35,39 +36,39 @@ internal fun <T : Named> DropdownMenu(
             contentAlignment = Alignment.CenterEnd
         ) {
             Text(
-                text = selected.value.name,
+                text = selected.name,
                 modifier = Modifier
                     .fillMaxWidth()
                     .clip(Shapes.medium)
                     .clickable(onClick = { expanded = true })
-                    .background(MaterialTheme.colors.primaryVariant)
+                    .background(MaterialTheme.colorScheme.inversePrimary)
                     .padding(16.dp),
-                color = MaterialTheme.colors.onPrimary,
-                style = Typography.subtitle1,
+                color = MaterialTheme.colorScheme.onPrimary,
+                style = Typography.titleMedium,
             )
             Icon(
                 imageVector = Icons.Default.ArrowDropDown,
                 contentDescription = "dropdown",
                 modifier = Modifier.padding(16.dp),
-                tint = MaterialTheme.colors.onPrimary
+                tint = MaterialTheme.colorScheme.onPrimary
             )
         }
         DropdownMenu(
             expanded = expanded,
             onDismissRequest = { expanded = false },
             modifier = Modifier
-                .background(MaterialTheme.colors.primaryVariant)
+                .background(MaterialTheme.colorScheme.inversePrimary)
                 .width(dropDownWidth)
         ) {
             items.forEach {
                 DropdownMenuItem(onClick = {
-                    selected.value = it
+                    onChanged(it)
                     expanded = false
                 }) {
                     Text(
                         text = it.name,
-                        color = MaterialTheme.colors.onPrimary,
-                        style = Typography.subtitle1,
+                        color = MaterialTheme.colorScheme.onPrimary,
+                        style = Typography.titleMedium,
                     )
                 }
             }
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/DropdownMenuInternal.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/DropdownMenuInternal.kt
index 90493a97..f8f954c9 100644
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/DropdownMenuInternal.kt
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/DropdownMenuInternal.kt
@@ -9,11 +9,11 @@ internal expect fun DropdownMenu(
     expanded: Boolean,
     onDismissRequest: () -> Unit,
     modifier: Modifier,
-    content: @Composable ColumnScope.() -> Unit
+    content: @Composable ColumnScope.() -> Unit,
 )
 
 @Composable
 internal expect fun DropdownMenuItem(
     onClick: () -> Unit,
-    content: @Composable () -> Unit
+    content: @Composable () -> Unit,
 )
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/FormField.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/FormField.kt
index 6f7caf7b..0ebf6674 100644
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/FormField.kt
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/FormField.kt
@@ -3,10 +3,10 @@ package ml.dev.kotlin.minigames.shared.ui.component
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
-import androidx.compose.material.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Visibility
 import androidx.compose.material.icons.filled.VisibilityOff
+import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.mutableStateOf
@@ -28,8 +28,10 @@ import androidx.compose.ui.text.input.VisualTransformation
 @Composable
 internal fun FormField(
     text: String,
-    textInput: MutableState<String>,
-    errorState: MutableState<Boolean>,
+    textInput: String,
+    onTextInputChange: (String) -> Unit,
+    errorState: Boolean,
+    onErrorStateChange: (Boolean) -> Unit,
     buttonType: FormFieldButtonType = FormFieldButtonType.Next,
     password: Boolean = false,
     inputRegex: Regex = Regex("[^\\s]*"),
@@ -39,12 +41,12 @@ internal fun FormField(
     val showPassword = remember { mutableStateOf(false) }
 
     OutlinedTextField(
-        value = textInput.value,
+        value = textInput,
         onValueChange = {
-            errorState.value = false
-            textInput.value = if (inputRegex.matches(it)) it else textInput.value
+            onErrorStateChange(false)
+            onTextInputChange(if (inputRegex.matches(it)) it else textInput)
         },
-        isError = errorState.value,
+        isError = errorState,
         modifier = Modifier
             .fillMaxWidth()
             .onKeyEvent { handleTabKey(it, focusManager) },
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/GameTopBar.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/GameTopBar.kt
index c73e592b..2cef02d6 100644
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/GameTopBar.kt
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/GameTopBar.kt
@@ -3,10 +3,10 @@ package ml.dev.kotlin.minigames.shared.ui.component
 import androidx.compose.animation.AnimatedContent
 import androidx.compose.animation.ExperimentalAnimationApi
 import androidx.compose.foundation.layout.*
-import androidx.compose.material.IconButton
-import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Close
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -15,12 +15,11 @@ import androidx.compose.ui.unit.dp
 import ml.dev.kotlin.minigames.shared.model.UserRole
 import ml.dev.kotlin.minigames.shared.ui.theme.Typography
 
-@OptIn(ExperimentalAnimationApi::class)
 @Composable
 internal fun GameTopBar(
     points: Int,
     role: UserRole,
-    onClose: () -> Unit
+    onClose: () -> Unit,
 ) {
     Row(
         modifier = Modifier
@@ -33,12 +32,12 @@ internal fun GameTopBar(
             AnimatedContent(targetState = points) { targetPoints ->
                 Text(
                     text = "$targetPoints point${if (targetPoints == 1) "" else "s"}",
-                    style = Typography.h5.copy(fontWeight = FontWeight.Bold)
+                    style = Typography.headlineSmall.copy(fontWeight = FontWeight.Bold)
                 )
             }
             Text(
                 text = "Role: $role",
-                style = Typography.subtitle2,
+                style = Typography.titleSmall,
                 modifier = Modifier.padding(top = 4.dp),
             )
         }
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/Icon.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/Icon.kt
index 48a58599..b4973c6d 100644
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/Icon.kt
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/Icon.kt
@@ -3,7 +3,7 @@ package ml.dev.kotlin.minigames.shared.ui.component
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.size
-import androidx.compose.material.Icon
+import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
@@ -17,7 +17,7 @@ internal fun ShadowIcon(
     imageVector: ImageVector,
     contentDescription: String,
     size: Dp,
-    elevation: Dp = 1.dp
+    elevation: Dp = 1.dp,
 ) {
     Box(modifier = Modifier.size(size + elevation)) {
         Icon(
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/Loading.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/Loading.kt
index 4cb615f7..fa76a02e 100644
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/Loading.kt
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/Loading.kt
@@ -4,7 +4,7 @@ import androidx.compose.animation.core.*
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material.MaterialTheme
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.State
 import androidx.compose.runtime.getValue
@@ -28,7 +28,7 @@ internal fun DotsTyping(
                 .size(dotSize)
                 .offset(y = -offset.dp)
                 .background(
-                    color = MaterialTheme.colors.primary,
+                    color = MaterialTheme.colorScheme.primary,
                     shape = CircleShape
                 )
                 .shadow(dotSize)
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/Notifications.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/Notifications.kt
index e37ce9c6..66e12fba 100644
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/Notifications.kt
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/Notifications.kt
@@ -12,9 +12,9 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
-import androidx.compose.material.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Delete
+import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
@@ -25,29 +25,32 @@ import androidx.compose.ui.draw.scale
 import androidx.compose.ui.graphics.TransformOrigin
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
+import com.arkivanov.decompose.extensions.compose.subscribeAsState
+import com.arkivanov.decompose.value.getValue
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
+import ml.dev.kotlin.minigames.shared.component.IndexedNotification
+import ml.dev.kotlin.minigames.shared.component.NotificationsComponent
 import ml.dev.kotlin.minigames.shared.ui.theme.DiscardColor
 import ml.dev.kotlin.minigames.shared.ui.theme.Shapes
 import ml.dev.kotlin.minigames.shared.ui.theme.Typography
-import ml.dev.kotlin.minigames.shared.viewmodel.IndexedNotification
-import ml.dev.kotlin.minigames.shared.viewmodel.NotificationsViewModel
 
 @Composable
 internal fun Notifications(
-    vm: NotificationsViewModel
+    component: NotificationsComponent,
 ) {
+    val notifications by component.notifications.subscribeAsState()
     LazyColumn(
         modifier = Modifier.fillMaxWidth(),
         verticalArrangement = Arrangement.Top
     ) {
-        items(vm.notifications.reversed(), key = { it.idx }) { notification ->
-            Notification(notification, onRemove = { vm.removeNotification(notification) })
+        items(notifications.asReversed(), key = { it.idx }) { notification ->
+            Notification(notification, onRemove = { component.removeNotification(notification) })
         }
     }
 }
 
-@OptIn(ExperimentalMaterialApi::class, androidx.compose.animation.ExperimentalAnimationApi::class)
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 private fun Notification(
     notification: IndexedNotification,
@@ -63,7 +66,7 @@ private fun Notification(
             onRemove()
         }
     }
-    val dismissState = rememberDismissState(confirmStateChange = {
+    val dismissState = rememberDismissState(confirmValueChange = {
         when (it) {
             DismissValue.Default -> Unit
             DismissValue.DismissedToEnd -> removeAndHide()
@@ -76,19 +79,19 @@ private fun Notification(
     fun NotificationDataRaw() {
         Card(
             modifier = Modifier.fillMaxWidth(),
-            elevation = 4.dp,
+            elevation = CardDefaults.cardElevation(4.dp),
             shape = Shapes.small,
         ) {
             Row(
                 modifier = Modifier
                     .fillMaxWidth()
-                    .background(MaterialTheme.colors.surface)
+                    .background(MaterialTheme.colorScheme.surface)
                     .padding(16.dp),
                 verticalAlignment = Alignment.CenterVertically,
             ) {
                 Text(
                     text = notification.message,
-                    style = Typography.body1,
+                    style = Typography.bodyLarge,
                     maxLines = 2,
                     overflow = TextOverflow.Ellipsis,
                     modifier = Modifier.fillMaxWidth()
@@ -105,12 +108,11 @@ private fun Notification(
     ) {
         SwipeToDismiss(
             state = dismissState,
-            dismissThresholds = { FractionalThreshold(0.2f) },
             background = {
                 val direction = dismissState.dismissDirection ?: return@SwipeToDismiss
                 val color by animateColorAsState(
                     targetValue = when (dismissState.targetValue) {
-                        DismissValue.Default -> MaterialTheme.colors.surface
+                        DismissValue.Default -> MaterialTheme.colorScheme.surface
                         DismissValue.DismissedToEnd -> DiscardColor
                         DismissValue.DismissedToStart -> DiscardColor
                     }
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/Players.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/Players.kt
index 8ee4e805..799a50e5 100644
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/Players.kt
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/Players.kt
@@ -5,30 +5,26 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
 import kotlinx.coroutines.flow.MutableSharedFlow
-import kotlinx.coroutines.launch
+import ml.dev.kotlin.minigames.shared.component.GameComponent
 import ml.dev.kotlin.minigames.shared.model.GameDataClientMessage
 import ml.dev.kotlin.minigames.shared.model.GameSnapshot
 import ml.dev.kotlin.minigames.shared.model.UserData
 import ml.dev.kotlin.minigames.shared.model.Username
-import ml.dev.kotlin.minigames.shared.ui.screen.LocalToastContext
-import ml.dev.kotlin.minigames.shared.viewmodel.GameViewModel
 
 @Composable
 internal fun <Snapshot : GameSnapshot> Players(
-    vm: GameViewModel<Snapshot>,
+    component: GameComponent<Snapshot>,
     snapshot: Snapshot,
-    clientMessages: MutableSharedFlow<GameDataClientMessage>
-): Unit = with(LocalToastContext.current) {
+    clientMessages: MutableSharedFlow<GameDataClientMessage>,
+) {
     val listState = rememberLazyListState()
-    val scope = rememberCoroutineScope()
     val users = snapshot.users.entries
-        .sortedByDescending { vm.points(it.key, snapshot) }
+        .sortedByDescending { component.points(it.key, snapshot) }
         .map { IndexedUserData(it.key, it.value) }.let {
-            if (vm.username in snapshot.users) it
-            else it + IndexedUserData(vm.username, UserData.player())
+            if (component.username in snapshot.users) it
+            else it + IndexedUserData(component.username, UserData.player())
         }
 
     LazyColumn(
@@ -39,16 +35,10 @@ internal fun <Snapshot : GameSnapshot> Players(
             UserDataRow(
                 username = data.username,
                 userData = data.userData,
-                userPoints = vm.points(data.username, snapshot),
-                canEdit = vm.canEditUser(data.username, snapshot),
-                onApprove = {
-                    toast("Approving ${data.username}")
-                    scope.launch { vm.approve(data.username, clientMessages) }
-                },
-                onDiscard = {
-                    toast("Discarding ${data.username}")
-                    scope.launch { vm.discard(data.username, clientMessages) }
-                },
+                userPoints = component.points(data.username, snapshot),
+                canEdit = component.canEditUser(data.username, snapshot),
+                onApprove = { component.approve(data.username, clientMessages) },
+                onDiscard = { component.discard(data.username, clientMessages) },
             )
         }
     }
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/ProportionKeeper.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/ProportionKeeper.kt
index aa51c95d..8fd3280b 100644
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/ProportionKeeper.kt
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/ProportionKeeper.kt
@@ -8,7 +8,7 @@ import androidx.compose.ui.Modifier
 @Composable
 internal fun ProportionKeeper(
     maxWidthToHeight: Float = 0.66f,
-    content: @Composable BoxScope.() -> Unit
+    content: @Composable BoxScope.() -> Unit,
 ) {
     BoxWithConstraints(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
         val proportion = maxWidth.value / maxHeight.value
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/RecompositionHighlighter.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/RecompositionHighlighter.kt
new file mode 100644
index 00000000..b400ceeb
--- /dev/null
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/RecompositionHighlighter.kt
@@ -0,0 +1,99 @@
+package ml.dev.kotlin.minigames.shared.ui.component
+
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.composed
+import androidx.compose.ui.draw.drawWithCache
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.graphics.drawscope.Fill
+import androidx.compose.ui.graphics.drawscope.Stroke
+import androidx.compose.ui.graphics.lerp
+import androidx.compose.ui.platform.debugInspectorInfo
+import androidx.compose.ui.unit.dp
+import kotlinx.coroutines.delay
+import kotlin.math.min
+
+/**
+ * A [Modifier] that draws a border around elements that are recomposing. The border increases in
+ * size and interpolates from red to green as more recompositions occur before a timeout.
+ */
+@Stable
+fun Modifier.recomposeHighlighter(): Modifier = this.then(recomposeModifier)
+
+// Use a single instance + @Stable to ensure that recompositions can enable skipping optimizations
+// Modifier.composed will still remember unique data per call site.
+private val recomposeModifier =
+    Modifier.composed(inspectorInfo = debugInspectorInfo { name = "recomposeHighlighter" }) {
+        // The total number of compositions that have occurred. We're not using a State<> here be
+        // able to read/write the value without invalidating (which would cause infinite
+        // recomposition).
+        val totalCompositions = remember { arrayOf(0L) }
+        totalCompositions[0]++
+
+        // The value of totalCompositions at the last timeout.
+        val totalCompositionsAtLastTimeout = remember { mutableStateOf(0L) }
+
+        // Start the timeout, and reset everytime there's a recomposition. (Using totalCompositions
+        // as the key is really just to cause the timer to restart every composition).
+        LaunchedEffect(totalCompositions[0]) {
+            delay(3000)
+            totalCompositionsAtLastTimeout.value = totalCompositions[0]
+        }
+
+        Modifier.drawWithCache {
+            onDrawWithContent {
+                // Draw actual content.
+                drawContent()
+
+                // Below is to draw the highlight, if necessary. A lot of the logic is copied from
+                // Modifier.border
+                val numCompositionsSinceTimeout =
+                    totalCompositions[0] - totalCompositionsAtLastTimeout.value
+
+                val hasValidBorderParams = size.minDimension > 0f
+                if (!hasValidBorderParams || numCompositionsSinceTimeout <= 0) {
+                    return@onDrawWithContent
+                }
+
+                val (color, strokeWidthPx) =
+                    when (numCompositionsSinceTimeout) {
+                        // We need at least one composition to draw, so draw the smallest border
+                        // color in blue.
+                        1L -> Color.Blue to 1f
+                        // 2 compositions is _probably_ okay.
+                        2L -> Color.Green to 2.dp.toPx()
+                        // 3 or more compositions before timeout may indicate an issue. lerp the
+                        // color from yellow to red, and continually increase the border size.
+                        else -> {
+                            lerp(
+                                Color.Yellow.copy(alpha = 0.8f),
+                                Color.Red.copy(alpha = 0.5f),
+                                min(1f, (numCompositionsSinceTimeout - 1).toFloat() / 100f)
+                            ) to numCompositionsSinceTimeout.toInt().dp.toPx()
+                        }
+                    }
+
+                val halfStroke = strokeWidthPx / 2
+                val topLeft = Offset(halfStroke, halfStroke)
+                val borderSize = Size(size.width - strokeWidthPx, size.height - strokeWidthPx)
+
+                val fillArea = (strokeWidthPx * 2) > size.minDimension
+                val rectTopLeft = if (fillArea) Offset.Zero else topLeft
+                val size = if (fillArea) size else borderSize
+                val style = if (fillArea) Fill else Stroke(strokeWidthPx)
+
+                drawRect(
+                    brush = SolidColor(color),
+                    topLeft = rectTopLeft,
+                    size = size,
+                    style = style
+                )
+            }
+        }
+    }
\ No newline at end of file
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/ScrollScreen.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/ScrollScreen.kt
index e53d8b0a..04047e28 100644
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/ScrollScreen.kt
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/ScrollScreen.kt
@@ -9,7 +9,7 @@ import androidx.compose.animation.shrinkOut
 import androidx.compose.foundation.background
 import androidx.compose.foundation.gestures.Orientation
 import androidx.compose.foundation.layout.*
-import androidx.compose.material.*
+import androidx.compose.material3.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -22,30 +22,36 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import com.arkivanov.essenty.backpressed.BackPressedHandler
+import com.arkivanov.decompose.extensions.compose.subscribeAsState
+import com.arkivanov.decompose.value.Value
+import com.arkivanov.essenty.backhandler.BackCallback
+import com.arkivanov.essenty.backhandler.BackHandler
 import kotlinx.coroutines.launch
+import ml.dev.kotlin.minigames.shared.ui.util.ConstantValue
+import ml.dev.kotlin.minigames.shared.util.unit
 import ml.dev.kotlin.minigames.shared.util.zip
+import kotlin.jvm.JvmInline
 import kotlin.math.roundToInt
 
 internal class ScrollScreenSection private constructor(
     val icon: ImageVector,
     val iconSelected: ImageVector,
-    val iconCount: MutableState<Int>,
+    val iconCount: Value<Int>,
     val onSelected: () -> Unit,
-    val screen: @Composable (BoxScope.() -> Unit)
+    val screen: @Composable (BoxScope.() -> Unit),
 ) {
     companion object {
         fun section(
             icon: ImageVector,
             iconSelected: ImageVector,
-            iconCount: MutableState<Int> = mutableStateOf(0),
+            iconCount: Value<Int> = ConstantValue(0),
             onSelected: () -> Unit = {},
-            screen: @Composable BoxScope.() -> Unit
+            screen: @Composable BoxScope.() -> Unit,
         ): ScrollScreenSection = ScrollScreenSection(icon, iconSelected, iconCount, onSelected, screen)
     }
 }
 
-@OptIn(ExperimentalMaterialApi::class)
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 internal fun ScrollScreen(
     selectedScreen: MutableState<SelectedScreen>,
@@ -54,7 +60,7 @@ internal fun ScrollScreen(
     left: ScrollScreenSection,
     center: ScrollScreenSection,
     right: ScrollScreenSection,
-    backPressedHandler: BackPressedHandler,
+    backHandler: BackHandler,
     onUp: () -> Unit,
     onDown: () -> Unit,
     threshold: Float = 0.3f,
@@ -75,15 +81,19 @@ internal fun ScrollScreen(
             .let { icons -> SelectedScreen.values().zip(icons, sections) }
 
         val scrollOffset by animateDpAsState(targetValue = -fullWidth * selectedScreen.value.ordinal)
-        val handler = remember { fun() = true.also { scope.launch { swipeState.animateTo(ScreenLocation.UP) } } }
+        val handler = remember {
+            object : BackCallback() {
+                override fun onBack() = scope.launch { swipeState.animateTo(ScreenLocation.UP) }.unit()
+            }.also(backHandler::register)
+        }
         when (swipeState.targetValue) {
             ScreenLocation.DOWN -> {
-                backPressedHandler.register(handler)
+                handler.isEnabled = true
                 onDown()
             }
 
             ScreenLocation.UP -> {
-                backPressedHandler.unregister(handler)
+                handler.isEnabled = true
                 onUp()
             }
         }
@@ -97,15 +107,16 @@ internal fun ScrollScreen(
                 modifier = Modifier
                     .fillMaxWidth()
                     .height(height)
-                    .background(MaterialTheme.colors.surface),
+                    .background(MaterialTheme.colorScheme.surface),
                 content = up
             )
+
             Box(
                 modifier = Modifier
                     .offset { IntOffset(0, swipeState.offset.value.roundToInt()) }
                     .fillMaxWidth()
                     .height(fullHeight)
-                    .background(MaterialTheme.colors.surface)
+                    .background(MaterialTheme.colorScheme.surface)
                     .swipeable(
                         state = swipeState,
                         anchors = mapOf(0f to ScreenLocation.DOWN, height.toPx() to ScreenLocation.UP),
@@ -117,12 +128,12 @@ internal fun ScrollScreen(
                     Surface(modifier = Modifier.shadow(elevation = 2.dp)) {
                         Row(
                             modifier = Modifier
-                                .background(MaterialTheme.colors.background)
+                                .background(MaterialTheme.colorScheme.background)
                                 .fillMaxWidth(),
                             horizontalArrangement = Arrangement.SpaceEvenly
                         ) {
                             iconSection.forEach { (screen, icon, section) ->
-                                val iconCount by section.iconCount
+                                val iconCount by section.iconCount.subscribeAsState()
                                 BottomIcon(icon, iconPadding, scrollIconSize, iconCount, onClick = {
                                     selectedScreen.value = screen
                                     if (swipeState.targetValue == ScreenLocation.UP) scope.launch {
@@ -153,7 +164,7 @@ internal fun ScrollScreen(
     }
 }
 
-@OptIn(ExperimentalMaterialApi::class)
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 private fun BottomIcon(
     icon: ImageVector,
@@ -181,7 +192,7 @@ private fun BottomIcon(
                             x = (-20).dp,
                             y = 44.dp,
                         ),
-                        backgroundColor = Color.Red,
+                        containerColor = Color.Red,
                         contentColor = Color.White,
                     ) {
                         val badgeText = if (badgeCount > 999) "999+" else "$badgeCount"
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/Swipeable.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/Swipeable.kt
new file mode 100644
index 00000000..b7467ce4
--- /dev/null
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/Swipeable.kt
@@ -0,0 +1,879 @@
+/*
+ * Copyright 2021 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package ml.dev.kotlin.minigames.shared.ui.component
+
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.AnimationSpec
+import androidx.compose.animation.core.SpringSpec
+import androidx.compose.foundation.gestures.DraggableState
+import androidx.compose.foundation.gestures.Orientation
+import androidx.compose.foundation.gestures.draggable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.runtime.*
+import androidx.compose.runtime.saveable.Saver
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.composed
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.input.nestedscroll.NestedScrollConnection
+import androidx.compose.ui.input.nestedscroll.NestedScrollSource
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.platform.debugInspectorInfo
+import androidx.compose.ui.unit.Density
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.Velocity
+import androidx.compose.ui.unit.dp
+import kotlinx.coroutines.CancellationException
+import kotlinx.coroutines.flow.Flow
+import kotlinx.coroutines.flow.filter
+import kotlinx.coroutines.flow.take
+import kotlinx.coroutines.launch
+import ml.dev.kotlin.minigames.shared.ui.component.SwipeableDefaults.AnimationSpec
+import ml.dev.kotlin.minigames.shared.ui.component.SwipeableDefaults.StandardResistanceFactor
+import ml.dev.kotlin.minigames.shared.ui.component.SwipeableDefaults.VelocityThreshold
+import ml.dev.kotlin.minigames.shared.ui.component.SwipeableDefaults.resistanceConfig
+import kotlin.math.PI
+import kotlin.math.abs
+import kotlin.math.sign
+import kotlin.math.sin
+
+/**
+ * State of the [swipeable] modifier.
+ *
+ * This contains necessary information about any ongoing swipe or animation and provides methods
+ * to change the state either immediately or by starting an animation. To create and remember a
+ * [SwipeableState] with the default animation clock, use [rememberSwipeableState].
+ *
+ * @param initialValue The initial value of the state.
+ * @param animationSpec The default animation that will be used to animate to a new state.
+ * @param confirmStateChange Optional callback invoked to confirm or veto a pending state change.
+ */
+@Stable
+@ExperimentalMaterial3Api
+internal open class SwipeableState<T>(
+    initialValue: T,
+    internal val animationSpec: AnimationSpec<Float> = AnimationSpec,
+    internal val confirmStateChange: (newValue: T) -> Boolean = { true },
+) {
+    /**
+     * The current value of the state.
+     *
+     * If no swipe or animation is in progress, this corresponds to the anchor at which the
+     * [swipeable] is currently settled. If a swipe or animation is in progress, this corresponds
+     * the last anchor at which the [swipeable] was settled before the swipe or animation started.
+     */
+    var currentValue: T by mutableStateOf(initialValue)
+        private set
+
+    /**
+     * Whether the state is currently animating.
+     */
+    var isAnimationRunning: Boolean by mutableStateOf(false)
+        private set
+
+    /**
+     * The current position (in pixels) of the [swipeable].
+     *
+     * You should use this state to offset your content accordingly. The recommended way is to
+     * use `Modifier.offsetPx`. This includes the resistance by default, if resistance is enabled.
+     */
+    val offset: State<Float> get() = offsetState
+
+    /**
+     * The amount by which the [swipeable] has been swiped past its bounds.
+     */
+    val overflow: State<Float> get() = overflowState
+
+    // Use `Float.NaN` as a placeholder while the state is uninitialised.
+    private val offsetState = mutableStateOf(0f)
+    private val overflowState = mutableStateOf(0f)
+
+    // the source of truth for the "real"(non ui) position
+    // basically position in bounds + overflow
+    private val absoluteOffset = mutableStateOf(0f)
+
+    // current animation target, if animating, otherwise null
+    private val animationTarget = mutableStateOf<Float?>(null)
+
+    internal var anchors by mutableStateOf(emptyMap<Float, T>())
+
+    private val latestNonEmptyAnchorsFlow: Flow<Map<Float, T>> =
+        snapshotFlow { anchors }
+            .filter { it.isNotEmpty() }
+            .take(1)
+
+    internal var minBound = Float.NEGATIVE_INFINITY
+    internal var maxBound = Float.POSITIVE_INFINITY
+
+    internal fun ensureInit(newAnchors: Map<Float, T>) {
+        if (anchors.isEmpty()) {
+            // need to do initial synchronization synchronously :(
+            val initialOffset = newAnchors.getOffset(currentValue)
+            requireNotNull(initialOffset) {
+                "The initial value must have an associated anchor."
+            }
+            offsetState.value = initialOffset
+            absoluteOffset.value = initialOffset
+        }
+    }
+
+    internal suspend fun processNewAnchors(
+        oldAnchors: Map<Float, T>,
+        newAnchors: Map<Float, T>,
+    ) {
+        if (oldAnchors.isEmpty()) {
+            // If this is the first time that we receive anchors, then we need to initialise
+            // the state so we snap to the offset associated to the initial value.
+            minBound = newAnchors.keys.minOrNull()!!
+            maxBound = newAnchors.keys.maxOrNull()!!
+            val initialOffset = newAnchors.getOffset(currentValue)
+            requireNotNull(initialOffset) {
+                "The initial value must have an associated anchor."
+            }
+            snapInternalToOffset(initialOffset)
+        } else if (newAnchors != oldAnchors) {
+            // If we have received new anchors, then the offset of the current value might
+            // have changed, so we need to animate to the new offset. If the current value
+            // has been removed from the anchors then we animate to the closest anchor
+            // instead. Note that this stops any ongoing animation.
+            minBound = Float.NEGATIVE_INFINITY
+            maxBound = Float.POSITIVE_INFINITY
+            val animationTargetValue = animationTarget.value
+            // if we're in the animation already, let's find it a new home
+            val targetOffset = if (animationTargetValue != null) {
+                // first, try to map old state to the new state
+                val oldState = oldAnchors[animationTargetValue]
+                val newState = newAnchors.getOffset(oldState)
+                // return new state if exists, or find the closes one among new anchors
+                newState ?: newAnchors.keys.minByOrNull { abs(it - animationTargetValue) }!!
+            } else {
+                // we're not animating, proceed by finding the new anchors for an old value
+                val actualOldValue = oldAnchors[offset.value]
+                val value = if (actualOldValue == currentValue) currentValue else actualOldValue
+                newAnchors.getOffset(value) ?: newAnchors
+                    .keys.minByOrNull { abs(it - offset.value) }!!
+            }
+            try {
+                animateInternalToOffset(targetOffset, animationSpec)
+            } catch (c: CancellationException) {
+                // If the animation was interrupted for any reason, snap as a last resort.
+                snapInternalToOffset(targetOffset)
+            } finally {
+                currentValue = newAnchors.getValue(targetOffset)
+                minBound = newAnchors.keys.minOrNull()!!
+                maxBound = newAnchors.keys.maxOrNull()!!
+            }
+        }
+    }
+
+    internal var thresholds: (Float, Float) -> Float by mutableStateOf({ _, _ -> 0f })
+
+    internal var velocityThreshold by mutableStateOf(0f)
+
+    internal var resistance: ResistanceConfig? by mutableStateOf(null)
+
+    internal val draggableState = DraggableState {
+        val newAbsolute = absoluteOffset.value + it
+        val clamped = newAbsolute.coerceIn(minBound, maxBound)
+        val overflow = newAbsolute - clamped
+        val resistanceDelta = resistance?.computeResistance(overflow) ?: 0f
+        offsetState.value = clamped + resistanceDelta
+        overflowState.value = overflow
+        absoluteOffset.value = newAbsolute
+    }
+
+    private suspend fun snapInternalToOffset(target: Float) {
+        draggableState.drag {
+            dragBy(target - absoluteOffset.value)
+        }
+    }
+
+    private suspend fun animateInternalToOffset(target: Float, spec: AnimationSpec<Float>) {
+        draggableState.drag {
+            var prevValue = absoluteOffset.value
+            animationTarget.value = target
+            isAnimationRunning = true
+            try {
+                Animatable(prevValue).animateTo(target, spec) {
+                    dragBy(this.value - prevValue)
+                    prevValue = this.value
+                }
+            } finally {
+                animationTarget.value = null
+                isAnimationRunning = false
+            }
+        }
+    }
+
+    /**
+     * The target value of the state.
+     *
+     * If a swipe is in progress, this is the value that the [swipeable] would animate to if the
+     * swipe finished. If an animation is running, this is the target value of that animation.
+     * Finally, if no swipe or animation is in progress, this is the same as the [currentValue].
+     */
+    @ExperimentalMaterial3Api
+    internal val targetValue: T
+        get() {
+            // TODO(calintat): Track current velocity (b/149549482) and use that here.
+            val target = animationTarget.value ?: computeTarget(
+                offset = offset.value,
+                lastValue = anchors.getOffset(currentValue) ?: offset.value,
+                anchors = anchors.keys,
+                thresholds = thresholds,
+                velocity = 0f,
+                velocityThreshold = Float.POSITIVE_INFINITY
+            )
+            return anchors[target] ?: currentValue
+        }
+
+    /**
+     * Information about the ongoing swipe or animation, if any. See [SwipeProgress] for details.
+     *
+     * If no swipe or animation is in progress, this returns `SwipeProgress(value, value, 1f)`.
+     */
+    @ExperimentalMaterial3Api
+    internal val progress: SwipeProgress<T>
+        get() {
+            val bounds = findBounds(offset.value, anchors.keys)
+            val from: T
+            val to: T
+            val fraction: Float
+            when (bounds.size) {
+                0 -> {
+                    from = currentValue
+                    to = currentValue
+                    fraction = 1f
+                }
+
+                1 -> {
+                    from = anchors.getValue(bounds[0])
+                    to = anchors.getValue(bounds[0])
+                    fraction = 1f
+                }
+
+                else -> {
+                    val (a, b) =
+                        if (direction > 0f) {
+                            bounds[0] to bounds[1]
+                        } else {
+                            bounds[1] to bounds[0]
+                        }
+                    from = anchors.getValue(a)
+                    to = anchors.getValue(b)
+                    fraction = (offset.value - a) / (b - a)
+                }
+            }
+            return SwipeProgress(from, to, fraction)
+        }
+
+    /**
+     * The direction in which the [swipeable] is moving, relative to the current [currentValue].
+     *
+     * This will be either 1f if it is is moving from left to right or top to bottom, -1f if it is
+     * moving from right to left or bottom to top, or 0f if no swipe or animation is in progress.
+     */
+    @ExperimentalMaterial3Api
+    internal val direction: Float
+        get() = anchors.getOffset(currentValue)?.let { sign(offset.value - it) } ?: 0f
+
+    /**
+     * Set the state without any animation and suspend until it's set
+     *
+     * @param targetValue The new target value to set [currentValue] to.
+     */
+    @ExperimentalMaterial3Api
+    internal suspend fun snapTo(targetValue: T) {
+        latestNonEmptyAnchorsFlow.collect { anchors ->
+            val targetOffset = anchors.getOffset(targetValue)
+            requireNotNull(targetOffset) {
+                "The target value must have an associated anchor."
+            }
+            snapInternalToOffset(targetOffset)
+            currentValue = targetValue
+        }
+    }
+
+    /**
+     * Set the state to the target value by starting an animation.
+     *
+     * @param targetValue The new value to animate to.
+     * @param anim The animation that will be used to animate to the new value.
+     */
+    @ExperimentalMaterial3Api
+    internal suspend fun animateTo(targetValue: T, anim: AnimationSpec<Float> = animationSpec) {
+        latestNonEmptyAnchorsFlow.collect { anchors ->
+            try {
+                val targetOffset = anchors.getOffset(targetValue)
+                requireNotNull(targetOffset) {
+                    "The target value must have an associated anchor."
+                }
+                animateInternalToOffset(targetOffset, anim)
+            } finally {
+                val endOffset = absoluteOffset.value
+                val endValue = anchors
+                    // fighting rounding error once again, anchor should be as close as 0.5 pixels
+                    .filterKeys { anchorOffset -> abs(anchorOffset - endOffset) < 0.5f }
+                    .values.firstOrNull() ?: currentValue
+                currentValue = endValue
+            }
+        }
+    }
+
+    /**
+     * Perform fling with settling to one of the anchors which is determined by the given
+     * [velocity]. Fling with settling [swipeable] will always consume all the velocity provided
+     * since it will settle at the anchor.
+     *
+     * In general cases, [swipeable] flings by itself when being swiped. This method is to be
+     * used for nested scroll logic that wraps the [swipeable]. In nested scroll developer may
+     * want to trigger settling fling when the child scroll container reaches the bound.
+     *
+     * @param velocity velocity to fling and settle with
+     *
+     * @return the reason fling ended
+     */
+    internal suspend fun performFling(velocity: Float) {
+        latestNonEmptyAnchorsFlow.collect { anchors ->
+            val lastAnchor = anchors.getOffset(currentValue)!!
+            val targetValue = computeTarget(
+                offset = offset.value,
+                lastValue = lastAnchor,
+                anchors = anchors.keys,
+                thresholds = thresholds,
+                velocity = velocity,
+                velocityThreshold = velocityThreshold
+            )
+            val targetState = anchors[targetValue]
+            if (targetState != null && confirmStateChange(targetState)) animateTo(targetState)
+            // If the user vetoed the state change, rollback to the previous state.
+            else animateInternalToOffset(lastAnchor, animationSpec)
+        }
+    }
+
+    /**
+     * Force [swipeable] to consume drag delta provided from outside of the regular [swipeable]
+     * gesture flow.
+     *
+     * Note: This method performs generic drag and it won't settle to any particular anchor, *
+     * leaving swipeable in between anchors. When done dragging, [performFling] must be
+     * called as well to ensure swipeable will settle at the anchor.
+     *
+     * In general cases, [swipeable] drags by itself when being swiped. This method is to be
+     * used for nested scroll logic that wraps the [swipeable]. In nested scroll developer may
+     * want to force drag when the child scroll container reaches the bound.
+     *
+     * @param delta delta in pixels to drag by
+     *
+     * @return the amount of [delta] consumed
+     */
+    internal fun performDrag(delta: Float): Float {
+        val potentiallyConsumed = absoluteOffset.value + delta
+        val clamped = potentiallyConsumed.coerceIn(minBound, maxBound)
+        val deltaToConsume = clamped - absoluteOffset.value
+        if (abs(deltaToConsume) > 0) {
+            draggableState.dispatchRawDelta(deltaToConsume)
+        }
+        return deltaToConsume
+    }
+
+    companion object {
+        /**
+         * The default [Saver] implementation for [SwipeableState].
+         */
+        fun <T : Any> Saver(
+            animationSpec: AnimationSpec<Float>,
+            confirmStateChange: (T) -> Boolean,
+        ) = Saver<SwipeableState<T>, T>(
+            save = { it.currentValue },
+            restore = { SwipeableState(it, animationSpec, confirmStateChange) }
+        )
+    }
+}
+
+/**
+ * Collects information about the ongoing swipe or animation in [swipeable].
+ *
+ * To access this information, use [SwipeableState.progress].
+ *
+ * @param from The state corresponding to the anchor we are moving away from.
+ * @param to The state corresponding to the anchor we are moving towards.
+ * @param fraction The fraction that the current position represents between [from] and [to].
+ * Must be between `0` and `1`.
+ */
+@Immutable
+@ExperimentalMaterial3Api
+internal class SwipeProgress<T>(
+    val from: T,
+    val to: T,
+    /*@FloatRange(from = 0.0, to = 1.0)*/
+    val fraction: Float,
+) {
+    override fun equals(other: Any?): Boolean {
+        if (this === other) return true
+        if (other !is SwipeProgress<*>) return false
+
+        if (from != other.from) return false
+        if (to != other.to) return false
+        if (fraction != other.fraction) return false
+
+        return true
+    }
+
+    override fun hashCode(): Int {
+        var result = from?.hashCode() ?: 0
+        result = 31 * result + (to?.hashCode() ?: 0)
+        result = 31 * result + fraction.hashCode()
+        return result
+    }
+
+    override fun toString(): String {
+        return "SwipeProgress(from=$from, to=$to, fraction=$fraction)"
+    }
+}
+
+/**
+ * Create and [remember] a [SwipeableState] with the default animation clock.
+ *
+ * @param initialValue The initial value of the state.
+ * @param animationSpec The default animation that will be used to animate to a new state.
+ * @param confirmStateChange Optional callback invoked to confirm or veto a pending state change.
+ */
+@Composable
+@ExperimentalMaterial3Api
+internal fun <T : Any> rememberSwipeableState(
+    initialValue: T,
+    animationSpec: AnimationSpec<Float> = AnimationSpec,
+    confirmStateChange: (newValue: T) -> Boolean = { true },
+): SwipeableState<T> {
+    return rememberSaveable(
+        saver = SwipeableState.Saver(
+            animationSpec = animationSpec,
+            confirmStateChange = confirmStateChange
+        )
+    ) {
+        SwipeableState(
+            initialValue = initialValue,
+            animationSpec = animationSpec,
+            confirmStateChange = confirmStateChange
+        )
+    }
+}
+
+/**
+ * Create and [remember] a [SwipeableState] which is kept in sync with another state, i.e.:
+ *  1. Whenever the [value] changes, the [SwipeableState] will be animated to that new value.
+ *  2. Whenever the value of the [SwipeableState] changes (e.g. after a swipe), the owner of the
+ *  [value] will be notified to update their state to the new value of the [SwipeableState] by
+ *  invoking [onValueChange]. If the owner does not update their state to the provided value for
+ *  some reason, then the [SwipeableState] will perform a rollback to the previous, correct value.
+ */
+@Composable
+@ExperimentalMaterial3Api
+internal fun <T : Any> rememberSwipeableStateFor(
+    value: T,
+    onValueChange: (T) -> Unit,
+    animationSpec: AnimationSpec<Float> = AnimationSpec,
+): SwipeableState<T> {
+    val swipeableState = remember {
+        SwipeableState(
+            initialValue = value,
+            animationSpec = animationSpec,
+            confirmStateChange = { true }
+        )
+    }
+    val forceAnimationCheck = remember { mutableStateOf(false) }
+    LaunchedEffect(value, forceAnimationCheck.value) {
+        if (value != swipeableState.currentValue) {
+            swipeableState.animateTo(value)
+        }
+    }
+    DisposableEffect(swipeableState.currentValue) {
+        if (value != swipeableState.currentValue) {
+            onValueChange(swipeableState.currentValue)
+            forceAnimationCheck.value = !forceAnimationCheck.value
+        }
+        onDispose { }
+    }
+    return swipeableState
+}
+
+/**
+ * Enable swipe gestures between a set of predefined states.
+ *
+ * To use this, you must provide a map of anchors (in pixels) to states (of type [T]).
+ * Note that this map cannot be empty and cannot have two anchors mapped to the same state.
+ *
+ * When a swipe is detected, the offset of the [SwipeableState] will be updated with the swipe
+ * delta. You should use this offset to move your content accordingly (see `Modifier.offsetPx`).
+ * When the swipe ends, the offset will be animated to one of the anchors and when that anchor is
+ * reached, the value of the [SwipeableState] will also be updated to the state corresponding to
+ * the new anchor. The target anchor is calculated based on the provided positional [thresholds].
+ *
+ * Swiping is constrained between the minimum and maximum anchors. If the user attempts to swipe
+ * past these bounds, a resistance effect will be applied by default. The amount of resistance at
+ * each edge is specified by the [resistance] config. To disable all resistance, set it to `null`.
+ *
+ * @param T The type of the state.
+ * @param state The state of the [swipeable].
+ * @param anchors Pairs of anchors and states, used to map anchors to states and vice versa.
+ * @param thresholds Specifies where the thresholds between the states are. The thresholds will be
+ * used to determine which state to animate to when swiping stops. This is represented as a lambda
+ * that takes two states and returns the threshold between them in the form of a [ThresholdConfig].
+ * Note that the order of the states corresponds to the swipe direction.
+ * @param orientation The orientation in which the [swipeable] can be swiped.
+ * @param enabled Whether this [swipeable] is enabled and should react to the user's input.
+ * @param reverseDirection Whether to reverse the direction of the swipe, so a top to bottom
+ * swipe will behave like bottom to top, and a left to right swipe will behave like right to left.
+ * @param interactionSource Optional [MutableInteractionSource] that will passed on to
+ * the internal [Modifier.draggable].
+ * @param resistance Controls how much resistance will be applied when swiping past the bounds.
+ * @param velocityThreshold The threshold (in dp per second) that the end velocity has to exceed
+ * in order to animate to the next state, even if the positional [thresholds] have not been reached.
+ */
+@ExperimentalMaterial3Api
+internal fun <T> Modifier.swipeable(
+    state: SwipeableState<T>,
+    anchors: Map<Float, T>,
+    orientation: Orientation,
+    enabled: Boolean = true,
+    reverseDirection: Boolean = false,
+    interactionSource: MutableInteractionSource? = null,
+    thresholds: (from: T, to: T) -> ThresholdConfig = { _, _ -> FixedThreshold(56.dp) },
+    resistance: ResistanceConfig? = resistanceConfig(anchors.keys),
+    velocityThreshold: Dp = VelocityThreshold,
+) = composed(
+    inspectorInfo = debugInspectorInfo {
+        name = "swipeable"
+        properties["state"] = state
+        properties["anchors"] = anchors
+        properties["orientation"] = orientation
+        properties["enabled"] = enabled
+        properties["reverseDirection"] = reverseDirection
+        properties["interactionSource"] = interactionSource
+        properties["thresholds"] = thresholds
+        properties["resistance"] = resistance
+        properties["velocityThreshold"] = velocityThreshold
+    }
+) {
+    require(anchors.isNotEmpty()) {
+        "You must have at least one anchor."
+    }
+    require(anchors.values.distinct().count() == anchors.size) {
+        "You cannot have two anchors mapped to the same state."
+    }
+    val density = LocalDensity.current
+    state.ensureInit(anchors)
+    LaunchedEffect(anchors, state) {
+        val oldAnchors = state.anchors
+        state.anchors = anchors
+        state.resistance = resistance
+        state.thresholds = { a, b ->
+            val from = anchors.getValue(a)
+            val to = anchors.getValue(b)
+            with(thresholds(from, to)) { density.computeThreshold(a, b) }
+        }
+        with(density) {
+            state.velocityThreshold = velocityThreshold.toPx()
+        }
+        state.processNewAnchors(oldAnchors, anchors)
+    }
+
+    Modifier.draggable(
+        orientation = orientation,
+        enabled = enabled,
+        reverseDirection = reverseDirection,
+        interactionSource = interactionSource,
+        startDragImmediately = state.isAnimationRunning,
+        onDragStopped = { velocity -> launch { state.performFling(velocity) } },
+        state = state.draggableState
+    )
+}
+
+/**
+ * Interface to compute a threshold between two anchors/states in a [swipeable].
+ *
+ * To define a [ThresholdConfig], consider using [FixedThreshold] and [FractionalThreshold].
+ */
+@Stable
+@ExperimentalMaterial3Api
+internal interface ThresholdConfig {
+    /**
+     * Compute the value of the threshold (in pixels), once the values of the anchors are known.
+     */
+    fun Density.computeThreshold(fromValue: Float, toValue: Float): Float
+}
+
+/**
+ * A fixed threshold will be at an [offset] away from the first anchor.
+ *
+ * @param offset The offset (in dp) that the threshold will be at.
+ */
+@Immutable
+@ExperimentalMaterial3Api
+internal data class FixedThreshold(private val offset: Dp) : ThresholdConfig {
+    override fun Density.computeThreshold(fromValue: Float, toValue: Float): Float {
+        return fromValue + offset.toPx() * sign(toValue - fromValue)
+    }
+}
+
+/**
+ * A fractional threshold will be at a [fraction] of the way between the two anchors.
+ *
+ * @param fraction The fraction (between 0 and 1) that the threshold will be at.
+ */
+@Immutable
+@ExperimentalMaterial3Api
+internal data class FractionalThreshold(
+    /*@FloatRange(from = 0.0, to = 1.0)*/
+    private val fraction: Float,
+) : ThresholdConfig {
+    override fun Density.computeThreshold(fromValue: Float, toValue: Float): Float {
+        return (1 - fraction) * fromValue + fraction * toValue
+    }
+}
+
+/**
+ * Specifies how resistance is calculated in [swipeable].
+ *
+ * There are two things needed to calculate resistance: the resistance basis determines how much
+ * overflow will be consumed to achieve maximum resistance, and the resistance factor determines
+ * the amount of resistance (the larger the resistance factor, the stronger the resistance).
+ *
+ * The resistance basis is usually either the size of the component which [swipeable] is applied
+ * to, or the distance between the minimum and maximum anchors. For a constructor in which the
+ * resistance basis defaults to the latter, consider using [resistanceConfig].
+ *
+ * You may specify different resistance factors for each bound. Consider using one of the default
+ * resistance factors in [SwipeableDefaults]: `StandardResistanceFactor` to convey that the user
+ * has run out of things to see, and `StiffResistanceFactor` to convey that the user cannot swipe
+ * this right now. Also, you can set either factor to 0 to disable resistance at that bound.
+ *
+ * @param basis Specifies the maximum amount of overflow that will be consumed. Must be positive.
+ * @param factorAtMin The factor by which to scale the resistance at the minimum bound.
+ * Must not be negative.
+ * @param factorAtMax The factor by which to scale the resistance at the maximum bound.
+ * Must not be negative.
+ */
+@Immutable
+internal class ResistanceConfig(
+    /*@FloatRange(from = 0.0, fromInclusive = false)*/
+    val basis: Float,
+    /*@FloatRange(from = 0.0)*/
+    val factorAtMin: Float = StandardResistanceFactor,
+    /*@FloatRange(from = 0.0)*/
+    val factorAtMax: Float = StandardResistanceFactor,
+) {
+    fun computeResistance(overflow: Float): Float {
+        val factor = if (overflow < 0) factorAtMin else factorAtMax
+        if (factor == 0f) return 0f
+        val progress = (overflow / basis).coerceIn(-1f, 1f)
+        return basis / factor * sin(progress * PI.toFloat() / 2)
+    }
+
+    override fun equals(other: Any?): Boolean {
+        if (this === other) return true
+        if (other !is ResistanceConfig) return false
+
+        if (basis != other.basis) return false
+        if (factorAtMin != other.factorAtMin) return false
+        if (factorAtMax != other.factorAtMax) return false
+
+        return true
+    }
+
+    override fun hashCode(): Int {
+        var result = basis.hashCode()
+        result = 31 * result + factorAtMin.hashCode()
+        result = 31 * result + factorAtMax.hashCode()
+        return result
+    }
+
+    override fun toString(): String {
+        return "ResistanceConfig(basis=$basis, factorAtMin=$factorAtMin, factorAtMax=$factorAtMax)"
+    }
+}
+
+/**
+ *  Given an offset x and a set of anchors, return a list of anchors:
+ *   1. [ ] if the set of anchors is empty,
+ *   2. [ x' ] if x is equal to one of the anchors, accounting for a small rounding error, where x'
+ *      is x rounded to the exact value of the matching anchor,
+ *   3. [ min ] if min is the minimum anchor and x < min,
+ *   4. [ max ] if max is the maximum anchor and x > max, or
+ *   5. [ a , b ] if a and b are anchors such that a < x < b and b - a is minimal.
+ */
+private fun findBounds(
+    offset: Float,
+    anchors: Set<Float>,
+): List<Float> {
+    // Find the anchors the target lies between with a little bit of rounding error.
+    val a = anchors.filter { it <= offset + 0.001 }.maxOrNull()
+    val b = anchors.filter { it >= offset - 0.001 }.minOrNull()
+
+    return when {
+        a == null ->
+            // case 1 or 3
+            listOfNotNull(b)
+
+        b == null ->
+            // case 4
+            listOf(a)
+
+        a == b ->
+            // case 2
+            // Can't return offset itself here since it might not be exactly equal
+            // to the anchor, despite being considered an exact match.
+            listOf(a)
+
+        else ->
+            // case 5
+            listOf(a, b)
+    }
+}
+
+private fun computeTarget(
+    offset: Float,
+    lastValue: Float,
+    anchors: Set<Float>,
+    thresholds: (Float, Float) -> Float,
+    velocity: Float,
+    velocityThreshold: Float,
+): Float {
+    val bounds = findBounds(offset, anchors)
+    return when (bounds.size) {
+        0 -> lastValue
+        1 -> bounds[0]
+        else -> {
+            val lower = bounds[0]
+            val upper = bounds[1]
+            if (lastValue <= offset) {
+                // Swiping from lower to upper (positive).
+                if (velocity >= velocityThreshold) {
+                    return upper
+                } else {
+                    val threshold = thresholds(lower, upper)
+                    if (offset < threshold) lower else upper
+                }
+            } else {
+                // Swiping from upper to lower (negative).
+                if (velocity <= -velocityThreshold) {
+                    return lower
+                } else {
+                    val threshold = thresholds(upper, lower)
+                    if (offset > threshold) upper else lower
+                }
+            }
+        }
+    }
+}
+
+private fun <T> Map<Float, T>.getOffset(state: T): Float? {
+    return entries.firstOrNull { it.value == state }?.key
+}
+
+/**
+ * Contains useful defaults for [swipeable] and [SwipeableState].
+ */
+internal object SwipeableDefaults {
+    /**
+     * The default animation used by [SwipeableState].
+     */
+    internal val AnimationSpec = SpringSpec<Float>()
+
+    /**
+     * The default velocity threshold (1.8 dp per millisecond) used by [swipeable].
+     */
+    internal val VelocityThreshold = 125.dp
+
+    /**
+     * A stiff resistance factor which indicates that swiping isn't available right now.
+     */
+    const val StiffResistanceFactor = 20f
+
+    /**
+     * A standard resistance factor which indicates that the user has run out of things to see.
+     */
+    const val StandardResistanceFactor = 10f
+
+    /**
+     * The default resistance config used by [swipeable].
+     *
+     * This returns `null` if there is one anchor. If there are at least two anchors, it returns
+     * a [ResistanceConfig] with the resistance basis equal to the distance between the two bounds.
+     */
+    internal fun resistanceConfig(
+        anchors: Set<Float>,
+        factorAtMin: Float = StandardResistanceFactor,
+        factorAtMax: Float = StandardResistanceFactor,
+    ): ResistanceConfig? {
+        return if (anchors.size <= 1) {
+            null
+        } else {
+            val basis = anchors.maxOrNull()!! - anchors.minOrNull()!!
+            ResistanceConfig(basis, factorAtMin, factorAtMax)
+        }
+    }
+}
+
+// temp default nested scroll connection for swipeables which desire as an opt in
+// revisit in b/174756744 as all types will have their own specific connection probably
+@ExperimentalMaterial3Api
+internal val <T> SwipeableState<T>.PreUpPostDownNestedScrollConnection: NestedScrollConnection
+    get() = object : NestedScrollConnection {
+        override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
+            val delta = available.toFloat()
+            return if (delta < 0 && source == NestedScrollSource.Drag) {
+                performDrag(delta).toOffset()
+            } else {
+                Offset.Zero
+            }
+        }
+
+        override fun onPostScroll(
+            consumed: Offset,
+            available: Offset,
+            source: NestedScrollSource,
+        ): Offset {
+            return if (source == NestedScrollSource.Drag) {
+                performDrag(available.toFloat()).toOffset()
+            } else {
+                Offset.Zero
+            }
+        }
+
+        override suspend fun onPreFling(available: Velocity): Velocity {
+            val toFling = Offset(available.x, available.y).toFloat()
+            return if (toFling < 0 && offset.value > minBound) {
+                performFling(velocity = toFling)
+                // since we go to the anchor with tween settling, consume all for the best UX
+                available
+            } else {
+                Velocity.Zero
+            }
+        }
+
+        override suspend fun onPostFling(consumed: Velocity, available: Velocity): Velocity {
+            performFling(velocity = Offset(available.x, available.y).toFloat())
+            return available
+        }
+
+        private fun Float.toOffset(): Offset = Offset(0f, this)
+
+        private fun Offset.toFloat(): Float = this.y
+    }
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/ToastOverlay.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/ToastOverlay.kt
deleted file mode 100644
index 4bb7b8b5..00000000
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/ToastOverlay.kt
+++ /dev/null
@@ -1,63 +0,0 @@
-package ml.dev.kotlin.minigames.shared.ui.component
-
-import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.animation.fadeIn
-import androidx.compose.animation.fadeOut
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Text
-import androidx.compose.runtime.*
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.unit.dp
-import kotlinx.coroutines.delay
-import ml.dev.kotlin.minigames.shared.ui.theme.Typography
-
-@Composable
-internal fun ToastOverlay(
-    message: MutableState<ToastMessage?>,
-) {
-    val toast = message.value ?: return
-    Box(
-        modifier = Modifier.fillMaxSize(),
-        contentAlignment = Alignment.BottomCenter
-    ) {
-        var visible by remember(toast) { mutableStateOf(false) }
-        AnimatedVisibility(visible, enter = fadeIn(), exit = fadeOut()) {
-            Box(
-                modifier = Modifier
-                    .padding(96.dp)
-                    .clip(CircleShape)
-                    .background(MaterialTheme.colors.onBackground.copy(alpha = 0.9f))
-                    .padding(16.dp)
-            ) {
-                Text(
-                    toast.message,
-                    color = MaterialTheme.colors.background,
-                    style = Typography.caption
-                )
-            }
-        }
-        LaunchedEffect(toast) {
-            visible = true
-            delay(toast.duration)
-            visible = false
-            message.value = null
-        }
-    }
-}
-
-data class ToastBuffer(val state: MutableState<ToastMessage?>)
-
-data class ToastMessage(val message: String, val duration: Long)
-
-fun ToastBuffer?.toast(message: ToastMessage) {
-    this?.state?.value = message
-}
-
-fun ToastBuffer?.toast(message: String, duration: Long = 2_500): Unit = toast(ToastMessage(message, duration))
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/UserDataRow.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/UserDataRow.kt
index bee92a59..531f5168 100644
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/UserDataRow.kt
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/UserDataRow.kt
@@ -5,9 +5,9 @@ import androidx.compose.animation.core.animateDpAsState
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
-import androidx.compose.material.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.*
+import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
@@ -24,7 +24,7 @@ import ml.dev.kotlin.minigames.shared.ui.theme.DiscardColor
 import ml.dev.kotlin.minigames.shared.ui.theme.Shapes
 import ml.dev.kotlin.minigames.shared.ui.theme.Typography
 
-@OptIn(ExperimentalMaterialApi::class)
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 internal fun UserDataRow(
     username: String,
@@ -34,14 +34,16 @@ internal fun UserDataRow(
     onApprove: () -> Unit,
     onDiscard: () -> Unit,
 ) {
-    val dismissState = rememberDismissState(confirmStateChange = {
-        when (it) {
-            DismissValue.Default -> Unit
-            DismissValue.DismissedToEnd -> onDiscard()
-            DismissValue.DismissedToStart -> onApprove()
-        }
-        true
-    })
+    val dismissState = rememberDismissState(
+        confirmValueChange = {
+            when (it) {
+                DismissValue.Default -> Unit
+                DismissValue.DismissedToEnd -> onDiscard()
+                DismissValue.DismissedToStart -> onApprove()
+            }
+            true
+        },
+        positionalThreshold = { totalDistance -> 0.2f * totalDistance })
     if (dismissState.currentValue != DismissValue.Default) LaunchedEffect(Unit) { dismissState.reset() }
 
     @Composable
@@ -49,20 +51,20 @@ internal fun UserDataRow(
         val elevation by animateDpAsState(targetValue = if (dismissState.dismissDirection != null) 4.dp else 0.dp)
         Card(
             modifier = Modifier.fillMaxWidth(),
-            elevation = elevation,
+            elevation = CardDefaults.cardElevation(elevation),
             shape = Shapes.small,
         ) {
             Row(
                 modifier = Modifier
                     .fillMaxWidth()
-                    .background(MaterialTheme.colors.surface)
+                    .background(MaterialTheme.colorScheme.surface)
                     .padding(16.dp),
                 verticalAlignment = Alignment.CenterVertically,
             ) {
                 Box(modifier = Modifier.fillMaxWidth(0.5f)) {
                     Text(
                         text = username,
-                        style = Typography.h6,
+                        style = Typography.titleLarge,
                         maxLines = 1,
                         overflow = TextOverflow.Ellipsis,
                     )
@@ -73,7 +75,7 @@ internal fun UserDataRow(
                 ) {
                     Text(
                         text = "$userPoints point${if (userPoints == 1) "" else "s"}",
-                        style = Typography.h6
+                        style = Typography.titleLarge
                     )
                 }
                 Box(
@@ -88,12 +90,11 @@ internal fun UserDataRow(
     if (!canEdit) UserDataRaw()
     else SwipeToDismiss(
         state = dismissState,
-        dismissThresholds = { FractionalThreshold(0.2f) },
         background = {
             val direction = dismissState.dismissDirection ?: return@SwipeToDismiss
             val color by animateColorAsState(
                 targetValue = when (dismissState.targetValue) {
-                    DismissValue.Default -> MaterialTheme.colors.surface
+                    DismissValue.Default -> MaterialTheme.colorScheme.surface
                     DismissValue.DismissedToEnd -> DiscardColor
                     DismissValue.DismissedToStart -> ApproveColor
                 }
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/bird/Bird.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/bird/Bird.kt
index 403ed178..c7ed8531 100644
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/bird/Bird.kt
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/bird/Bird.kt
@@ -7,7 +7,6 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.geometry.Size
@@ -18,7 +17,6 @@ import androidx.compose.ui.graphics.drawscope.DrawScope
 import androidx.compose.ui.graphics.drawscope.clipPath
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import kotlinx.coroutines.launch
 import ml.dev.kotlin.minigames.shared.ui.component.SizedCanvas
 import ml.dev.kotlin.minigames.shared.ui.util.DpSize
 import ml.dev.kotlin.minigames.shared.util.V2
@@ -31,7 +29,7 @@ internal fun Bird(
     mapSize: DpSize,
     isAlive: Boolean,
     theme: BirdTheme,
-    birdSize: Dp = 32.dp
+    birdSize: Dp = 32.dp,
 ) {
     Positioned(pos, DpSize(birdSize, birdSize), mapSize) {
         Box(
@@ -64,15 +62,14 @@ private fun BirdNozzle(
     isAlive: Boolean,
     fill: DrawScope.(color: Color) -> Unit,
 ) {
-    val scope = rememberCoroutineScope()
     val nozzleSpace = AnimateInfiniteRepeatableReverse(
         animation = tween(
             durationMillis = BIRD_NOZZLE_DURATION_MILLIS,
             easing = CubicBezierEasing(1.0f, 0.2f, 0.0f, 0.4f),
         )
     )
-    if (!isAlive) {
-        scope.launch { nozzleSpace.snapTo(1f) }
+    if (!isAlive) LaunchedEffect(Unit) {
+        nozzleSpace.snapTo(1f)
     }
     SizedCanvas(birdSize, birdSize) {
         val path = Path().apply {
@@ -113,15 +110,14 @@ private fun BirdWing(
     isAlive: Boolean,
     fill: DrawScope.(color: Color) -> Unit,
 ) {
-    val scope = rememberCoroutineScope()
     val wingHeight = AnimateInfiniteRepeatableReverse(
         animation = tween(
             durationMillis = BIRD_WING_DURATION_MILLIS,
             easing = CubicBezierEasing(1.0f, 0.2f, 0.0f, 0.4f),
         )
     )
-    if (!isAlive) {
-        scope.launch { wingHeight.snapTo(1f) }
+    if (!isAlive) LaunchedEffect(Unit) {
+        wingHeight.snapTo(1f)
     }
     SizedCanvas(birdSize, birdSize) {
         val path = Path().apply {
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/bird/BirdGamePlay.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/bird/BirdGamePlay.kt
index 64e024f5..7b99c7ba 100644
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/bird/BirdGamePlay.kt
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/bird/BirdGamePlay.kt
@@ -9,29 +9,24 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import kotlinx.coroutines.flow.MutableStateFlow
-import kotlinx.coroutines.launch
+import ml.dev.kotlin.minigames.shared.component.BirdComponent
 import ml.dev.kotlin.minigames.shared.model.BirdGameSnapshot
 import ml.dev.kotlin.minigames.shared.model.GameStateUpdateClientMessage
 import ml.dev.kotlin.minigames.shared.model.Username
-import ml.dev.kotlin.minigames.shared.ui.ScreenRoute
 import ml.dev.kotlin.minigames.shared.ui.component.GameTopBar
 import ml.dev.kotlin.minigames.shared.ui.component.ProportionKeeper
 import ml.dev.kotlin.minigames.shared.ui.component.bird.BirdNozzleDirection.Companion.fromVelocity
 import ml.dev.kotlin.minigames.shared.ui.theme.Shapes
 import ml.dev.kotlin.minigames.shared.ui.util.DpSize
-import ml.dev.kotlin.minigames.shared.ui.util.Navigator
 import ml.dev.kotlin.minigames.shared.util.ComputedMap
 import ml.dev.kotlin.minigames.shared.util.V2
-import ml.dev.kotlin.minigames.shared.viewmodel.BirdGameViewModel
 
 @Composable
 internal fun BirdGamePlay(
-    navigator: Navigator<ScreenRoute>,
-    vm: BirdGameViewModel,
+    component: BirdComponent,
     gameState: BirdGameSnapshot,
     stateMessages: MutableStateFlow<GameStateUpdateClientMessage?>,
 ) {
-    val scope = rememberCoroutineScope()
     val interactionSource = remember { MutableInteractionSource() }
     Column(
         modifier = Modifier
@@ -39,13 +34,13 @@ internal fun BirdGamePlay(
             .clickable(
                 interactionSource = interactionSource,
                 indication = null,
-            ) { scope.launch { vm.emitFly(stateMessages) } },
+            ) { component.emitFly(stateMessages) },
         verticalArrangement = Arrangement.Top,
     ) {
         GameTopBar(
-            points = vm.points(gameState),
-            role = vm.userRole(gameState),
-            onClose = { navigator.navigate(ScreenRoute.LogInScreen, dropAll = true) }
+            points = component.points(gameState),
+            role = component.userRole(gameState),
+            onClose = component::closeGame,
         )
         ProportionKeeper {
             BoxWithConstraints(
@@ -64,7 +59,7 @@ internal fun BirdGamePlay(
                 var userAlive = false
                 for ((username, bird) in gameState.birds) {
                     val direction = fromVelocity(bird.vel)
-                    if (vm.username == username) {
+                    if (component.username == username) {
                         last = Pair(bird.pos, direction)
                         userAlive = true
                     }
@@ -76,7 +71,7 @@ internal fun BirdGamePlay(
                         last.second,
                         mapSize,
                         isAlive = false,
-                        theme = CACHED_THEMES[vm.username]
+                        theme = CACHED_THEMES[component.username]
                     )
                 }
             }
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/bird/Positioned.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/bird/Positioned.kt
index 24ba1b4b..9a535882 100644
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/bird/Positioned.kt
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/bird/Positioned.kt
@@ -14,7 +14,7 @@ internal fun Positioned(
     pos: V2,
     size: DpSize,
     mapSize: DpSize,
-    content: @Composable BoxScope.() -> Unit
+    content: @Composable BoxScope.() -> Unit,
 ) {
     Box(
         modifier = Modifier
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/bird/Spike.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/bird/Spike.kt
index 9543f1fd..e1f7371a 100644
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/bird/Spike.kt
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/bird/Spike.kt
@@ -3,7 +3,7 @@ package ml.dev.kotlin.minigames.shared.ui.component.bird
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.offset
-import androidx.compose.material.MaterialTheme
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.geometry.Offset
@@ -74,7 +74,7 @@ private fun Spike(
     pos: V2,
     spikeSize: DpSize,
     mapSize: DpSize,
-    draw: Path.(size: Size) -> Unit
+    draw: Path.(size: Size) -> Unit,
 ) {
     Box(
         modifier = Modifier
@@ -84,7 +84,7 @@ private fun Spike(
                 y = (mapSize.height - spikeSize.height) * 0.5f * (1f - pos.y),
             )
     ) {
-        val color = MaterialTheme.colors.surface
+        val color = MaterialTheme.colorScheme.surface
         SizedCanvas(spikeSize.width, spikeSize.height) {
             val path = Path().apply { draw(size) }
             clipPath(
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/set/SetCard.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/set/SetCard.kt
index c6e9b4ab..f4230892 100644
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/set/SetCard.kt
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/set/SetCard.kt
@@ -8,10 +8,10 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material.Icon
-import androidx.compose.material.Surface
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Check
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -44,7 +44,7 @@ internal fun SetCard(
     height: Dp,
     padding: Dp = 6.dp,
     elevation: Dp = 4.dp,
-    onClick: () -> Unit
+    onClick: () -> Unit,
 ) {
     val count = when (setCardData.count) {
         CardCount.One -> 1
@@ -72,7 +72,7 @@ internal fun SetCard(
     ) {
         Surface(
             modifier = Modifier.size(innerWidth, innerHeight),
-            elevation = elevation,
+            shadowElevation = elevation,
             shape = Shapes.large,
         ) {
             Column(
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/set/SetGamePlay.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/set/SetGamePlay.kt
index e6e8a3b3..42e216a9 100644
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/set/SetGamePlay.kt
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/set/SetGamePlay.kt
@@ -4,39 +4,33 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
 import kotlinx.coroutines.flow.MutableStateFlow
-import kotlinx.coroutines.launch
+import ml.dev.kotlin.minigames.shared.component.SetComponent
 import ml.dev.kotlin.minigames.shared.model.GameStateUpdateClientMessage
 import ml.dev.kotlin.minigames.shared.model.SetGameSnapshot
-import ml.dev.kotlin.minigames.shared.ui.ScreenRoute
 import ml.dev.kotlin.minigames.shared.ui.component.GameTopBar
 import ml.dev.kotlin.minigames.shared.ui.component.ProportionKeeper
-import ml.dev.kotlin.minigames.shared.ui.util.Navigator
-import ml.dev.kotlin.minigames.shared.viewmodel.SetGameViewModel
 
 @Composable
 internal fun SetGamePlay(
-    navigator: Navigator<ScreenRoute>,
-    vm: SetGameViewModel,
+    component: SetComponent,
     gameState: SetGameSnapshot,
-    stateMessages: MutableStateFlow<GameStateUpdateClientMessage?>
+    stateMessages: MutableStateFlow<GameStateUpdateClientMessage?>,
 ) {
     Column(
         modifier = Modifier.fillMaxSize(),
         verticalArrangement = Arrangement.Top
     ) {
-        val scope = rememberCoroutineScope()
         GameTopBar(
-            points = vm.points(gameState),
-            role = vm.userRole(gameState),
-            onClose = { navigator.navigate(ScreenRoute.LogInScreen, dropAll = true) }
+            points = component.points(gameState),
+            role = component.userRole(gameState),
+            onClose = component::closeGame,
         )
         ProportionKeeper {
             SetBoard(
                 setGame = gameState,
-                onProposal = { scope.launch { vm.emitSetProposal(it, stateMessages) } }
+                onProposal = { component.emitSetProposal(it, stateMessages) }
             )
         }
     }
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/snake/SnakeBackground.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/snake/SnakeBackground.kt
index 765cacaa..92080859 100644
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/snake/SnakeBackground.kt
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/snake/SnakeBackground.kt
@@ -5,7 +5,7 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.size
-import androidx.compose.material.MaterialTheme
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -21,7 +21,7 @@ import kotlin.math.*
 internal fun SnakeBackground(
     head: V2,
     mapSize: DpSize,
-    itemSize: Dp = 72.dp
+    itemSize: Dp = 72.dp,
 ) {
     val xItems = ceil(mapSize.width / itemSize).roundToInt() * 2 / 3
     val yItems = ceil(mapSize.height / itemSize).roundToInt()
@@ -31,7 +31,7 @@ internal fun SnakeBackground(
         modifier = Modifier
             .offset(-xOffset.dp, -yOffset.dp)
             .size(mapSize.width, mapSize.height)
-            .background(MaterialTheme.colors.surface)
+            .background(MaterialTheme.colorScheme.surface)
     ) {
         for (y in -2..yItems + 2) for (x in -2..xItems + 2) {
             Box(
@@ -55,9 +55,9 @@ internal fun SnakeBackground(
 @Composable
 private fun SnakeBackgroundItem(
     itemSize: Dp,
-    padding: Dp = 4.dp
+    padding: Dp = 4.dp,
 ) {
-    val color = MaterialTheme.colors.background
+    val color = MaterialTheme.colorScheme.background
     val colors = listOf(color.copy(alpha = 1f), color.copy(alpha = 0.8f))
     Box(
         modifier = Modifier.size(itemSize),
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/snake/SnakeGamePlay.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/snake/SnakeGamePlay.kt
index 48079236..1b69f90d 100644
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/snake/SnakeGamePlay.kt
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/snake/SnakeGamePlay.kt
@@ -11,22 +11,17 @@ import androidx.compose.ui.input.pointer.PointerInputScope
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.input.pointer.positionChange
 import androidx.compose.ui.platform.LocalDensity
-import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.flow.MutableStateFlow
-import kotlinx.coroutines.launch
+import ml.dev.kotlin.minigames.shared.component.SnakeComponent
 import ml.dev.kotlin.minigames.shared.model.GameStateUpdateClientMessage
 import ml.dev.kotlin.minigames.shared.model.SnakeGameSnapshot
-import ml.dev.kotlin.minigames.shared.ui.ScreenRoute
 import ml.dev.kotlin.minigames.shared.ui.component.GameTopBar
 import ml.dev.kotlin.minigames.shared.ui.util.DpSize
-import ml.dev.kotlin.minigames.shared.ui.util.Navigator
 import ml.dev.kotlin.minigames.shared.util.V2
-import ml.dev.kotlin.minigames.shared.viewmodel.SnakeGameViewModel
 
 @Composable
 internal fun SnakeGamePlay(
-    navigator: Navigator<ScreenRoute>,
-    vm: SnakeGameViewModel,
+    component: SnakeComponent,
     gameState: SnakeGameSnapshot,
     stateMessages: MutableStateFlow<GameStateUpdateClientMessage?>,
 ) {
@@ -35,22 +30,21 @@ internal fun SnakeGamePlay(
             .fillMaxSize()
     ) {
         val center = with(LocalDensity.current) { Offset(maxWidth.toPx() / 2, maxHeight.toPx() / 2) }
-        val scope = rememberCoroutineScope()
         var lastHead by remember { mutableStateOf(V2.ZERO) }
         BoxWithConstraints(
             modifier = Modifier
                 .fillMaxSize()
-                .pointerInput(center) { detectDirectionChange(scope, center, vm, stateMessages) }
+                .pointerInput(center) { detectDirectionChange(center, component, stateMessages) }
         ) box@{
-            val head = vm.userSnake(gameState)?.head?.pos?.also { lastHead = it }
+            val head = component.userSnake(gameState)?.head?.pos?.also { lastHead = it }
             val mapSize = DpSize(maxWidth, maxHeight)
             SnakeBackground(head ?: lastHead, mapSize)
             gameState.items.forEach { SnakePointItem(it, head ?: lastHead, mapSize) }
             gameState.snakes.forEach { Snake(it.key, it.value, head ?: lastHead, mapSize) }
             GameTopBar(
-                points = vm.points(gameState),
-                role = vm.userRole(gameState),
-                onClose = { navigator.navigate(ScreenRoute.LogInScreen, dropAll = true) }
+                points = component.points(gameState),
+                role = component.userRole(gameState),
+                onClose = component::closeGame
             )
         }
     }
@@ -58,9 +52,8 @@ internal fun SnakeGamePlay(
 }
 
 private suspend fun PointerInputScope.detectDirectionChange(
-    coroutineScope: CoroutineScope,
     center: Offset,
-    vm: SnakeGameViewModel,
+    component: SnakeComponent,
     stateMessages: MutableStateFlow<GameStateUpdateClientMessage?>,
 ) {
     awaitEachGesture {
@@ -69,7 +62,7 @@ private suspend fun PointerInputScope.detectDirectionChange(
             val event = awaitPointerEvent()
             event.changes.fold(Offset.Zero) { acc, c -> acc + c.position - center }
                 .run { V2(x, y) }.takeIf { it != V2.ZERO }
-                ?.let { coroutineScope.launch { vm.emitDirectionChange(it, stateMessages) } }
+                ?.let { component.emitDirectionChange(it, stateMessages) }
             event.changes.forEach { if (it.positionChange() != Offset.Zero) it.consume() }
         } while (event.changes.any { it.pressed })
     }
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/screen/GameScreen.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/screen/GameScreen.kt
index 9c9f4842..7b76d492 100644
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/screen/GameScreen.kt
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/screen/GameScreen.kt
@@ -1,8 +1,6 @@
 package ml.dev.kotlin.minigames.shared.ui.screen
 
 import androidx.compose.foundation.layout.BoxScope
-import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material.SwipeableState
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Forum
 import androidx.compose.material.icons.filled.Leaderboard
@@ -10,44 +8,48 @@ import androidx.compose.material.icons.filled.Notifications
 import androidx.compose.material.icons.outlined.Forum
 import androidx.compose.material.icons.outlined.Leaderboard
 import androidx.compose.material.icons.outlined.Notifications
-import androidx.compose.material.rememberSwipeableState
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.runtime.*
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.flow.MutableSharedFlow
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.isActive
+import ml.dev.kotlin.minigames.shared.component.ChatComponentImpl
+import ml.dev.kotlin.minigames.shared.component.GameComponent
+import ml.dev.kotlin.minigames.shared.component.HEARTBEAT_DELAY_MILLIS
+import ml.dev.kotlin.minigames.shared.component.NotificationsComponentImpl
 import ml.dev.kotlin.minigames.shared.model.*
-import ml.dev.kotlin.minigames.shared.ui.ScreenRoute
 import ml.dev.kotlin.minigames.shared.ui.component.*
 import ml.dev.kotlin.minigames.shared.ui.component.ScrollScreenSection.Companion.section
 import ml.dev.kotlin.minigames.shared.ui.component.SelectedScreen.LEFT
 import ml.dev.kotlin.minigames.shared.ui.component.SelectedScreen.RIGHT
-import ml.dev.kotlin.minigames.shared.ui.util.Navigator
 import ml.dev.kotlin.minigames.shared.util.takeTyped
-import ml.dev.kotlin.minigames.shared.viewmodel.*
-import ml.dev.kotlin.minigames.shared.websocket.client.GameAccessData
+import ml.dev.kotlin.minigames.shared.viewmodel.CONNECT_ERROR_MESSAGE
+import ml.dev.kotlin.minigames.shared.viewmodel.RECEIVE_ERROR_MESSAGE
+import ml.dev.kotlin.minigames.shared.viewmodel.SEND_ERROR_MESSAGE
 
-@OptIn(ExperimentalMaterialApi::class)
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 internal inline fun <reified Snapshot : GameSnapshot> GameScreen(
-    accessData: GameAccessData,
-    conf: ScreenRoute.GameScreen,
-    navigator: Navigator<ScreenRoute>,
-    vm: GameViewModel<Snapshot>,
+    component: GameComponent<Snapshot>,
     crossinline gamePlay: @Composable BoxScope.(
         snapshot: Snapshot, stateMessages: MutableStateFlow<GameStateUpdateClientMessage?>,
-    ) -> Unit
-): Unit = with(LocalToastContext.current) {
+    ) -> Unit,
+) {
     val selectedScreen = remember { mutableStateOf(SelectedScreen.CENTER) }
     val swipeState = rememberSwipeableState(ScreenLocation.UP)
+    val accessData = component.gameAccessData
 
-    val chatVM = remember(accessData) { ChatViewModel(vm.ctx, swipeState.notUp(selectedScreen, LEFT), conf.username) }
-    val notifyVM = remember(accessData) { NotificationsViewModel(vm.ctx, swipeState.notUp(selectedScreen, RIGHT)) }
-
-    val serverMessages = remember { MutableSharedFlow<GameDataServerMessage>(extraBufferCapacity = 1) }
+    val chatVM = remember(accessData) {
+        ChatComponentImpl(component.appContext, component, swipeState.notUp(selectedScreen, LEFT), accessData.userLogin.username)
+    }
+    val notifyVM = remember(accessData) {
+        NotificationsComponentImpl(component.appContext, component, swipeState.notUp(selectedScreen, RIGHT))
+    }
+    val serverMessages = remember { MutableSharedFlow<GameDataServerMessage>(extraBufferCapacity = 256) }
     val serverStateMessages = remember { MutableStateFlow<GameStateSnapshotServerMessage?>(null) }
 
-    val clientMessages = remember { MutableSharedFlow<GameDataClientMessage>(extraBufferCapacity = 1) }
+    val clientMessages = remember { MutableSharedFlow<GameDataClientMessage>(extraBufferCapacity = 256) }
     val clientStateMessages = remember { MutableStateFlow<GameStateUpdateClientMessage?>(null) }
 
     var snapshot by remember { mutableStateOf<Snapshot?>(null) }
@@ -56,12 +58,12 @@ internal inline fun <reified Snapshot : GameSnapshot> GameScreen(
         serverMessages.collect { msg ->
             when (msg) {
                 is UnapprovedGameStateUpdateServerMessage ->
-                    "Wait for Admin approval".also(notifyVM::addNotification).let(::toast)
+                    "Wait for Admin approval".also(notifyVM::addNotification).let(component::toast)
 
                 is UserActionServerMessage -> when (msg.action) {
                     UserAction.Approve -> "Approved by Admin"
                     UserAction.Discard -> "Discarded by Admin"
-                }.also(notifyVM::addNotification).let(::toast)
+                }.also(notifyVM::addNotification).let(component::toast)
 
                 is ReceiveMessageServerMessage -> chatVM.addMessage(msg.message)
             }
@@ -73,21 +75,21 @@ internal inline fun <reified Snapshot : GameSnapshot> GameScreen(
         }
     }
     LaunchedEffect(accessData) {
-        vm.client.startPlayingGame(
-            vm.gameAccessData,
-            serverMessages,
-            serverStateMessages,
-            clientMessages,
-            clientStateMessages,
-            onErrorLogin = { toast(CONNECT_ERROR_MESSAGE) },
-            onErrorReceive = { toast(RECEIVE_ERROR_MESSAGE) },
-            onErrorSend = { toast(SEND_ERROR_MESSAGE) },
+        component.client.startPlayingGame(
+            accessData = accessData,
+            serverMessages = serverMessages,
+            serverStateMessages = serverStateMessages,
+            clientMessages = clientMessages,
+            clientStateMessages = clientStateMessages,
+            onErrorLogin = component::onErrorLogin,
+            onErrorReceive = component::onErrorReceive,
+            onErrorSend = component::onErrorSend,
         )
     }
     LaunchedEffect(accessData) {
         while (isActive) {
             delay(HEARTBEAT_DELAY_MILLIS)
-            clientMessages.emit(vm.heartBeat())
+            clientMessages.emit(component.heartBeat())
         }
     }
 
@@ -101,29 +103,29 @@ internal inline fun <reified Snapshot : GameSnapshot> GameScreen(
                 icon = Icons.Outlined.Forum,
                 iconSelected = Icons.Filled.Forum,
                 iconCount = chatVM.count,
-                onSelected = chatVM::clearNewNotificationsCount,
+                onSelected = chatVM::clearNewCount,
                 screen = { Chat(chatVM, clientMessages) }
             ),
             center = section(
                 icon = Icons.Outlined.Leaderboard,
                 iconSelected = Icons.Filled.Leaderboard,
-                screen = { Players(vm, state, clientMessages) }
+                screen = { Players(component, state, clientMessages) }
             ),
             right = section(
                 icon = Icons.Outlined.Notifications,
                 iconSelected = Icons.Filled.Notifications,
                 iconCount = notifyVM.count,
-                onSelected = notifyVM::clearNewNotificationsCount,
+                onSelected = notifyVM::clearNewCount,
                 screen = { Notifications(notifyVM) }
             ),
-            backPressedHandler = navigator,
-            onUp = { vm.ctx.adjustPan() },
-            onDown = { vm.ctx.adjustResize() },
+            backHandler = component.backHandler,
+            onUp = { component.appContext.adjustPan() },
+            onDown = { component.appContext.adjustResize() },
         )
     }
 }
 
-@OptIn(ExperimentalMaterialApi::class)
+@OptIn(ExperimentalMaterial3Api::class)
 private fun SwipeableState<ScreenLocation>.notUp(
     selectedScreen: MutableState<SelectedScreen>,
     screen: SelectedScreen,
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/screen/LoadingScreen.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/screen/LoadingScreen.kt
index a25abfec..174f2828 100644
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/screen/LoadingScreen.kt
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/screen/LoadingScreen.kt
@@ -2,8 +2,8 @@ package ml.dev.kotlin.minigames.shared.ui.screen
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Text
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -30,7 +30,7 @@ internal fun LoadingScreen(
 @Composable
 internal fun LoadingScreen(
     text: String? = null,
-    action: suspend CoroutineScope.() -> Unit = {}
+    action: suspend CoroutineScope.() -> Unit = {},
 ) {
     LaunchedEffect(Unit) {
         delay(MIN_LOADING_ANIMATION_TIME_MILLIS)
@@ -39,7 +39,7 @@ internal fun LoadingScreen(
     Column(
         modifier = Modifier
             .fillMaxSize()
-            .background(MaterialTheme.colors.surface),
+            .background(MaterialTheme.colorScheme.surface),
         verticalArrangement = Arrangement.Center,
         horizontalAlignment = Alignment.CenterHorizontally,
     ) {
@@ -48,7 +48,7 @@ internal fun LoadingScreen(
         text?.let {
             Text(
                 text = text,
-                style = Typography.subtitle1,
+                style = Typography.titleMedium,
             )
         }
     }
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/screen/LogInScreen.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/screen/LogInScreen.kt
index a6b1d80a..065e2fc4 100644
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/screen/LogInScreen.kt
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/screen/LogInScreen.kt
@@ -1,10 +1,11 @@
 package ml.dev.kotlin.minigames.shared.ui.screen
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
-import androidx.compose.material.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowForward
 import androidx.compose.material.icons.filled.Shuffle
+import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.State
 import androidx.compose.runtime.getValue
@@ -14,48 +15,31 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
+import com.arkivanov.decompose.extensions.compose.subscribeAsState
 import io.github.aakira.napier.Napier
-import ml.dev.kotlin.minigames.shared.ui.GAMES
-import ml.dev.kotlin.minigames.shared.ui.ScreenRoute
+import ml.dev.kotlin.minigames.shared.component.Game
+import ml.dev.kotlin.minigames.shared.component.LogInComponent
 import ml.dev.kotlin.minigames.shared.ui.component.*
 import ml.dev.kotlin.minigames.shared.ui.theme.Shapes
 import ml.dev.kotlin.minigames.shared.ui.theme.Typography
 import ml.dev.kotlin.minigames.shared.ui.theme.capitals
 import ml.dev.kotlin.minigames.shared.ui.theme.loadLeckerliOneFont
-import ml.dev.kotlin.minigames.shared.ui.util.Navigator
-import ml.dev.kotlin.minigames.shared.ui.util.set
-import ml.dev.kotlin.minigames.shared.util.on
-import ml.dev.kotlin.minigames.shared.viewmodel.CONNECT_ERROR_MESSAGE
-import ml.dev.kotlin.minigames.shared.viewmodel.LogInViewModel
-import ml.dev.kotlin.minigames.shared.viewmodel.message
 
 @Composable
-internal fun LogInScreen(
-    navigator: Navigator<ScreenRoute>,
-    vm: LogInViewModel
-): Unit = with(LocalToastContext.current) {
+internal fun LogInScreen(component: LogInComponent) {
     LoadingScreen(
         loadingText = "Logging in",
         loadingInitState = false,
         loadingAction = { loading ->
-            vm.loginUser().on(
-                ok = {
-                    toast("Logged in")
-                    vm.navigateGame(navigator)
-                },
-                err = {
-                    toast(it.reason.message())
-                    loading.value = false
-                },
-                empty = {
-                    toast(CONNECT_ERROR_MESSAGE)
-                    loading.value = false
-                }
+            component.loginUser(
+                onError = { loading.value = false }
             )
         },
         loadedScreen = { loading ->
             Box(
-                modifier = Modifier.fillMaxSize(),
+                modifier = Modifier
+                    .fillMaxSize()
+                    .background(MaterialTheme.colorScheme.surface),
                 contentAlignment = Alignment.BottomEnd
             ) {
                 ProportionKeeper {
@@ -75,50 +59,61 @@ internal fun LogInScreen(
                                 text = "Mini Games",
                                 modifier = Modifier.fillMaxWidth(),
                                 textAlign = TextAlign.Center,
-                                style = Typography.h3.copy(
+                                style = Typography.displaySmall.copy(
                                     fontFeatureSettings = capitals,
                                     fontFamily = fontFamily ?: FontFamily.Cursive
                                 ),
                             )
                             Spacer(Modifier.size(16.dp))
-                            DropdownMenu(vm.gameState, GAMES)
+                            val game by component.game.subscribeAsState()
+                            DropdownMenu(game, component::onGameChanged, Game.entries)
                             Spacer(Modifier.size(8.dp))
-                            FormField("Game Server Name", vm.serverNameState, vm.serverNameErrorState) {
-                                IconButton(onClick = vm::shuffleGameName) {
+                            val serverName by component.serverName.subscribeAsState()
+                            val serverNameError by component.serverNameError.subscribeAsState()
+                            FormField(
+                                text = "Game Server Name",
+                                textInput = serverName,
+                                onTextInputChange = component::onServerNameChanged,
+                                errorState = serverNameError,
+                                onErrorStateChange = component::onServerNameErrorChanged
+                            ) {
+                                IconButton(onClick = component::shuffleGameName) {
                                     Icon(imageVector = Icons.Default.Shuffle, contentDescription = "shuffle")
                                 }
                             }
                             Spacer(Modifier.size(8.dp))
-                            FormField("Username", vm.usernameState, vm.usernameErrorState)
+                            val username by component.username.subscribeAsState()
+                            val usernameError by component.usernameError.subscribeAsState()
+                            FormField(
+                                text = "Username",
+                                textInput = username,
+                                onTextInputChange = component::onUsernameChanged,
+                                errorState = usernameError,
+                                onErrorStateChange = component::onUsernameErrorChanged
+                            )
                             Spacer(Modifier.size(8.dp))
+                            val password by component.password.subscribeAsState()
+                            val passwordError by component.passwordError.subscribeAsState()
                             FormField(
-                                "Password",
-                                vm.passwordState,
-                                vm.passwordErrorState,
+                                text = "Password",
+                                textInput = password,
+                                onTextInputChange = component::onPasswordChanged,
+                                errorState = passwordError,
+                                onErrorStateChange = component::onPasswordErrorChanged,
                                 password = true,
                                 buttonType = FormFieldButtonType.Done
                             )
                             Spacer(Modifier.size(8.dp))
-                            RememberCheckBox(vm)
+                            RememberCheckBox(component)
                             Spacer(Modifier.size(8.dp))
-                            RegisterButton(onClick = { navigator.navigate(ScreenRoute.RegisterScreen) })
+                            RegisterButton(onClick = component::navigateRegister)
                         }
                     }
                 }
                 CircleButton(
                     icon = Icons.Filled.ArrowForward,
                     contentDescription = "login",
-                    onClick = {
-                        when {
-                            vm.serverName.isEmpty() -> true.set(vm.serverNameErrorState)
-                            vm.username.isEmpty() -> true.set(vm.usernameErrorState)
-                            vm.password.isEmpty() -> true.set(vm.passwordErrorState)
-                            else -> {
-                                false.set(vm.serverNameErrorState, vm.usernameErrorState, vm.passwordErrorState)
-                                loading.value = true
-                            }
-                        }
-                    }
+                    onClick = { loading.value = component.verifyInputFields() }
                 )
             }
         }
@@ -141,17 +136,18 @@ private fun RegisterButton(onClick: () -> Unit) {
 }
 
 @Composable
-private fun RememberCheckBox(vm: LogInViewModel) {
+private fun RememberCheckBox(component: LogInComponent) {
     Row(
         modifier = Modifier.fillMaxWidth(),
         horizontalArrangement = Arrangement.Start,
         verticalAlignment = Alignment.CenterVertically,
     ) {
+        val rememberUserLogin by component.rememberUserLogin.subscribeAsState()
         Checkbox(
-            checked = vm.rememberUserLogin,
-            onCheckedChange = { vm.rememberUserLogin = !vm.rememberUserLogin }
+            checked = rememberUserLogin,
+            onCheckedChange = component::onRememberUserLoginChanged,
         )
-        Text(text = "Remember", style = Typography.subtitle2)
+        Text(text = "Remember", style = Typography.titleSmall)
     }
 }
 
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/screen/RegisterScreen.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/screen/RegisterScreen.kt
index 7ddd80cc..40d5f81c 100644
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/screen/RegisterScreen.kt
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/screen/RegisterScreen.kt
@@ -1,103 +1,107 @@
 package ml.dev.kotlin.minigames.shared.ui.screen
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
-import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowForward
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
-import ml.dev.kotlin.minigames.shared.ui.ScreenRoute
+import com.arkivanov.decompose.extensions.compose.subscribeAsState
+import ml.dev.kotlin.minigames.shared.component.RegisterComponent
 import ml.dev.kotlin.minigames.shared.ui.component.*
 import ml.dev.kotlin.minigames.shared.ui.theme.Typography
-import ml.dev.kotlin.minigames.shared.ui.util.Navigator
-import ml.dev.kotlin.minigames.shared.ui.util.set
-import ml.dev.kotlin.minigames.shared.util.on
-import ml.dev.kotlin.minigames.shared.viewmodel.CONNECT_ERROR_MESSAGE
-import ml.dev.kotlin.minigames.shared.viewmodel.RegisterViewModel
-import ml.dev.kotlin.minigames.shared.viewmodel.message
 
 @Composable
-internal fun RegisterScreen(
-    navigator: Navigator<ScreenRoute>,
-    vm: RegisterViewModel,
-): Unit = with(LocalToastContext.current) {
+internal fun RegisterScreen(registerComponent: RegisterComponent) {
     LoadingScreen(
         loadingText = "Registering user",
         loadingInitState = false,
         loadingAction = { loading ->
-            vm.createUser()?.on(
-                ok = {
-                    toast("Verify your email and check for spam messages")
-                    navigator.navigate(ScreenRoute.LogInScreen, dropAll = true)
-                },
-                err = {
-                    toast(it.reason.message())
-                    loading.value = false
-                },
-                empty = {
-                    toast(CONNECT_ERROR_MESSAGE)
-                    loading.value = false
-                }
+            registerComponent.createUser(
+                onError = { loading.value = false }
             )
         },
         loadedScreen = { loading ->
-            Aligned(Alignment.TopStart) {
-                BackButton(onClick = { navigator.navigate(ScreenRoute.LogInScreen, dropAll = true) })
-                Aligned(Alignment.BottomEnd) {
-                    ProportionKeeper {
-                        Column(
-                            modifier = Modifier
-                                .fillMaxSize()
-                                .padding(start = 16.dp, end = 16.dp),
-                            verticalArrangement = Arrangement.Center,
-                        ) {
-                            Text(text = "Register", style = Typography.h4)
-                            Spacer(Modifier.size(16.dp))
-                            FormField("Email", vm.emailState, vm.emailErrorState)
-                            Spacer(Modifier.size(8.dp))
-                            FormField("Username", vm.usernameState, vm.usernameErrorState)
-                            Spacer(Modifier.size(8.dp))
-                            FormField("Password", vm.passwordState, vm.passwordErrorState, password = true)
-                            Spacer(Modifier.size(8.dp))
-                            FormField(
-                                "Confirm password",
-                                vm.confirmPasswordState,
-                                vm.confirmPasswordErrorState,
-                                password = true,
-                                buttonType = FormFieldButtonType.Done
-                            )
-                        }
-                    }
-                    CircleButton(
-                        icon = Icons.Filled.ArrowForward,
-                        contentDescription = "register",
-                        onClick = {
-                            when {
-                                vm.email.isEmpty() -> true.set(vm.emailErrorState)
-                                vm.username.isEmpty() -> true.set(vm.usernameErrorState)
-                                vm.password.isEmpty() -> true.set(vm.passwordErrorState)
-                                vm.confirmPassword.isEmpty() -> true.set(vm.confirmPasswordErrorState)
-                                vm.password != vm.confirmPassword -> {
-                                    true.set(vm.passwordErrorState, vm.confirmPasswordErrorState)
-                                    toast("Passwords don't match")
-                                }
-
-                                else -> {
-                                    false.set(
-                                        vm.emailErrorState,
-                                        vm.usernameErrorState,
-                                        vm.passwordErrorState,
-                                        vm.confirmPasswordErrorState
+            Box(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .background(MaterialTheme.colorScheme.surface),
+                contentAlignment = Alignment.TopStart,
+                content = {
+                    Box(
+                        modifier = Modifier.fillMaxSize(),
+                        contentAlignment = Alignment.BottomEnd,
+                        content = {
+                            ProportionKeeper {
+                                Column(
+                                    modifier = Modifier
+                                        .fillMaxSize()
+                                        .padding(start = 16.dp, end = 16.dp),
+                                    verticalArrangement = Arrangement.Center,
+                                ) {
+                                    Text(
+                                        text = "Register",
+                                        style = Typography.headlineMedium
+                                    )
+                                    Spacer(Modifier.size(16.dp))
+                                    val email by registerComponent.email.subscribeAsState()
+                                    val emailError by registerComponent.emailError.subscribeAsState()
+                                    FormField(
+                                        text = "Email",
+                                        textInput = email,
+                                        onTextInputChange = registerComponent::onEmailChanged,
+                                        errorState = emailError,
+                                        onErrorStateChange = registerComponent::onEmailErrorChanged
+                                    )
+                                    Spacer(Modifier.size(8.dp))
+                                    val username by registerComponent.username.subscribeAsState()
+                                    val usernameError by registerComponent.usernameError.subscribeAsState()
+                                    FormField(
+                                        text = "Username",
+                                        textInput = username,
+                                        onTextInputChange = registerComponent::onUsernameChanged,
+                                        errorState = usernameError,
+                                        onErrorStateChange = registerComponent::onUsernameErrorChanged
+                                    )
+                                    Spacer(Modifier.size(8.dp))
+                                    val password by registerComponent.password.subscribeAsState()
+                                    val passwordError by registerComponent.passwordError.subscribeAsState()
+                                    FormField(
+                                        text = "Password",
+                                        textInput = password,
+                                        onTextInputChange = registerComponent::onPasswordChanged,
+                                        errorState = passwordError,
+                                        onErrorStateChange = registerComponent::onPasswordErrorChanged, password = true
+                                    )
+                                    Spacer(Modifier.size(8.dp))
+                                    val confirmPassword by registerComponent.confirmPassword.subscribeAsState()
+                                    val confirmPasswordError by registerComponent.confirmPasswordError.subscribeAsState()
+                                    FormField(
+                                        text = "Confirm password",
+                                        textInput = confirmPassword,
+                                        onTextInputChange = registerComponent::onConfirmPasswordChanged,
+                                        errorState = confirmPasswordError,
+                                        onErrorStateChange = registerComponent::onConfirmPasswordErrorChanged,
+                                        password = true,
+                                        buttonType = FormFieldButtonType.Done
                                     )
-                                    loading.value = true
                                 }
                             }
+                            CircleButton(
+                                icon = Icons.Filled.ArrowForward,
+                                contentDescription = "register",
+                                onClick = { loading.value = registerComponent.verifyInputFields() },
+                            )
                         }
                     )
+                    BackButton(onClick = registerComponent::navigateBack)
                 }
-            }
+            )
         }
     )
 }
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/screen/ToastScreen.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/screen/ToastScreen.kt
deleted file mode 100644
index bcfef892..00000000
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/screen/ToastScreen.kt
+++ /dev/null
@@ -1,23 +0,0 @@
-package ml.dev.kotlin.minigames.shared.ui.screen
-
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.runtime.*
-import androidx.compose.ui.Modifier
-import ml.dev.kotlin.minigames.shared.ui.component.ToastBuffer
-import ml.dev.kotlin.minigames.shared.ui.component.ToastOverlay
-import kotlin.experimental.ExperimentalObjCRefinement
-import kotlin.native.HiddenFromObjC
-
-@Composable
-internal fun ToastScreen(content: @Composable ToastBuffer.() -> Unit) {
-    Box(modifier = Modifier.fillMaxSize()) {
-        val buffer = remember { ToastBuffer(mutableStateOf(null)) }
-        CompositionLocalProvider(LocalToastContext provides buffer) { content(buffer) }
-        ToastOverlay(buffer.state)
-    }
-}
-
-@OptIn(ExperimentalObjCRefinement::class)
-@HiddenFromObjC
-internal val LocalToastContext: ProvidableCompositionLocal<ToastBuffer?> = staticCompositionLocalOf { null }
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/theme/Shape.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/theme/Shape.kt
index 82d96679..127b1193 100644
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/theme/Shape.kt
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/theme/Shape.kt
@@ -1,7 +1,7 @@
 package ml.dev.kotlin.minigames.shared.ui.theme
 
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.Shapes
+import androidx.compose.material3.Shapes
 import androidx.compose.ui.unit.dp
 
 val Shapes = Shapes(
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/theme/Theme.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/theme/Theme.kt
index 7a41d2c7..4c805e17 100644
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/theme/Theme.kt
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/theme/Theme.kt
@@ -1,7 +1,7 @@
 package ml.dev.kotlin.minigames.shared.ui.theme
 
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.darkColors
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.darkColorScheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
 
@@ -15,14 +15,14 @@ val ApproveColor: Color = Color(0xFF8AB4F8)
 
 @Composable
 internal fun Theme(content: @Composable () -> Unit) {
-    val themeColors = darkColors(
+    val themeColors = darkColorScheme(
         onPrimary = Color(0xFFFFFFFF),
         primary = Color(0xFFCDCDCD),
-        primaryVariant = Color(0xFF222222),
+        inversePrimary = Color(0xFF222222),
 
         onSecondary = Color(0xFFFFFFFF),
         secondary = Color(0xFFBDBDBD),
-        secondaryVariant = Color(0xFF111111),
+        secondaryContainer = Color(0xFF111111),
 
         onBackground = Color(0xFFFFFFFF),
         background = Color(0xFF212121),
@@ -35,7 +35,7 @@ internal fun Theme(content: @Composable () -> Unit) {
     )
 
     MaterialTheme(
-        colors = themeColors,
+        colorScheme = themeColors,
         typography = Typography,
         shapes = Shapes,
         content = content
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/theme/Typography.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/theme/Typography.kt
index 9ae0e77b..b251942a 100644
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/theme/Typography.kt
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/theme/Typography.kt
@@ -1,6 +1,6 @@
 package ml.dev.kotlin.minigames.shared.ui.theme
 
-import androidx.compose.material.Typography
+import androidx.compose.material3.Typography
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shadow
@@ -17,75 +17,75 @@ val textShadow = Shadow(
 )
 
 val Typography = Typography(
-    h1 = TextStyle(
+    displayLarge = TextStyle(
         fontWeight = FontWeight.Light,
         fontSize = 96.sp,
         letterSpacing = (-1.5).sp,
         shadow = textShadow,
     ),
-    h2 = TextStyle(
+    displayMedium = TextStyle(
         fontWeight = FontWeight.Light,
         fontSize = 60.sp,
         letterSpacing = (-0.5).sp,
         shadow = textShadow,
     ),
-    h3 = TextStyle(
+    displaySmall = TextStyle(
         fontWeight = FontWeight.Normal,
         fontSize = 48.sp,
         letterSpacing = 0.sp,
         shadow = textShadow,
     ),
-    h4 = TextStyle(
+    headlineMedium = TextStyle(
         fontWeight = FontWeight.Normal,
         fontSize = 34.sp,
         letterSpacing = 0.25.sp,
         shadow = textShadow,
     ),
-    h5 = TextStyle(
+    headlineSmall = TextStyle(
         fontWeight = FontWeight.Normal,
         fontSize = 24.sp,
         letterSpacing = 0.sp,
         shadow = textShadow,
     ),
-    h6 = TextStyle(
+    titleLarge = TextStyle(
         fontWeight = FontWeight.Medium,
         fontSize = 20.sp,
         letterSpacing = 0.15.sp,
         shadow = textShadow,
     ),
-    subtitle1 = TextStyle(
+    titleMedium = TextStyle(
         fontWeight = FontWeight.Normal,
         fontSize = 18.sp,
         letterSpacing = 0.1.sp,
         shadow = textShadow,
     ),
-    subtitle2 = TextStyle(
+    titleSmall = TextStyle(
         fontWeight = FontWeight.Medium,
         fontSize = 16.sp,
         letterSpacing = 0.1.sp,
         shadow = textShadow,
     ),
-    body1 = TextStyle(
+    bodyLarge = TextStyle(
         fontWeight = FontWeight.Normal,
         fontSize = 16.sp,
         letterSpacing = 0.5.sp,
     ),
-    body2 = TextStyle(
+    bodyMedium = TextStyle(
         fontWeight = FontWeight.Normal,
         fontSize = 14.sp,
         letterSpacing = 0.25.sp,
     ),
-    button = TextStyle(
+    labelLarge = TextStyle(
         fontWeight = FontWeight.Medium,
         fontSize = 18.sp,
         letterSpacing = 1.sp,
     ),
-    caption = TextStyle(
+    bodySmall = TextStyle(
         fontWeight = FontWeight.Normal,
         fontSize = 12.sp,
         letterSpacing = 0.4.sp,
     ),
-    overline = TextStyle(
+    labelSmall = TextStyle(
         fontWeight = FontWeight.Normal,
         fontSize = 10.sp,
         letterSpacing = 1.5.sp,
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/util/ChildrenRouterUtil.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/util/ChildrenRouterUtil.kt
deleted file mode 100644
index 9851ac70..00000000
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/util/ChildrenRouterUtil.kt
+++ /dev/null
@@ -1,227 +0,0 @@
-package ml.dev.kotlin.minigames.shared.ui.util
-
-import androidx.compose.animation.core.*
-import androidx.compose.foundation.layout.Box
-import androidx.compose.runtime.*
-import androidx.compose.runtime.saveable.SaveableStateHolder
-import androidx.compose.runtime.saveable.rememberSaveableStateHolder
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.alpha
-import androidx.compose.ui.draw.scale
-import com.arkivanov.decompose.Child
-import com.arkivanov.decompose.router.RouterState
-import com.arkivanov.decompose.value.Value
-
-typealias ValueObserver<T> = (T) -> Unit
-
-typealias ChildContent<C, T> = @Composable (child: Child.Created<C, T>) -> Unit
-
-typealias ChildAnimation<C, T> = @Composable (RouterState<C, T>, Modifier, ChildContent<C, T>) -> Unit
-
-typealias ChildAnimator<C, T> =
-        @Composable (
-            child: Child.Created<C, T>,
-            factor: Float,
-            placement: ChildPlacement,
-            direction: ChildAnimationDirection,
-            content: @Composable () -> Unit
-        ) -> Unit
-
-@Composable
-internal fun <C : Any, T : Any> Children(
-    routerState: Value<RouterState<C, T>>,
-    modifier: Modifier = Modifier,
-    animation: ChildAnimation<C, T>,
-    content: ChildContent<C, T>
-) {
-    val state = routerState.subscribeAsState()
-
-    val holder = rememberSaveableStateHolder()
-
-    holder.retainStates(state.value.getConfigurations())
-
-    animation(state.value, modifier) { child ->
-        holder.SaveableStateProvider(child.configuration.key()) {
-            content(child)
-        }
-    }
-}
-
-private fun RouterState<*, *>.getConfigurations(): Set<String> {
-    val set = HashSet<String>()
-    backStack.forEach { set += it.configuration.key() }
-    set += activeChild.configuration.key()
-
-    return set
-}
-
-@Composable
-private fun <T : Any> Value<T>.subscribeAsState(): State<T> {
-    val state = remember(this) { mutableStateOf(value) }
-
-    DisposableEffect(this) {
-        val observer: ValueObserver<T> = { state.value = it }
-        subscribe(observer)
-
-        onDispose {
-            unsubscribe(observer)
-        }
-    }
-    return state
-}
-
-private fun Any.key(): String = "${this::class.simpleName}_${hashCode().toString(radix = 36)}"
-
-@Composable
-private fun SaveableStateHolder.retainStates(currentKeys: Set<Any>) {
-    val keys = remember(this) { Keys(currentKeys) }
-
-    DisposableEffect(this, currentKeys) {
-        keys.set.forEach {
-            if (it !in currentKeys) {
-                removeState(it)
-            }
-        }
-
-        keys.set = currentKeys
-
-        onDispose {}
-    }
-}
-
-private class Keys(
-    var set: Set<Any>
-)
-
-enum class ChildPlacement {
-    BACK, FRONT,
-}
-
-enum class ChildAnimationDirection {
-    EXIT, ENTER
-}
-
-fun <C : Any, T : Any> crossfadeScale(
-    animationSpec: FiniteAnimationSpec<Float> = tween(),
-    enterScaleFactor: Float = 1.15F,
-    exitScaleFactor: Float = 0.95F
-): ChildAnimation<C, T> =
-    childAnimation(animationSpec = animationSpec) { _, factor, placement, _, content ->
-        Box(
-            modifier = Modifier
-                .scale(
-                    when (placement) {
-                        ChildPlacement.BACK -> exitScaleFactor + (1F - exitScaleFactor) * factor
-                        ChildPlacement.FRONT -> enterScaleFactor - (enterScaleFactor - 1F) * factor
-                    }
-                )
-                .alpha(factor)
-        ) {
-            content()
-        }
-    }
-
-private fun <C : Any, T : Any> childAnimation(
-    animationSpec: FiniteAnimationSpec<Float> = tween(),
-    animator: ChildAnimator<C, T>
-): ChildAnimation<C, T> =
-    { routerState, modifier, content ->
-        ChildAnimationImpl(
-            targetPage = Page(routerState.activeChild, routerState.backStack.size),
-            modifier = modifier,
-            animationSpec = animationSpec,
-            animator = animator,
-            content = content
-        )
-    }
-
-@Composable
-private fun <C : Any, T : Any> ChildAnimationImpl(
-    targetPage: Page<C, T>,
-    modifier: Modifier,
-    animationSpec: FiniteAnimationSpec<Float>,
-    animator: ChildAnimator<C, T>,
-    content: ChildContent<C, T>,
-) {
-    var pages: Pages<C, T> by remember { mutableStateOf(Pages(target = targetPage)) }
-    if (targetPage.configuration != pages.target.configuration) {
-        pages = Pages(target = targetPage, previous = pages.target)
-    }
-
-    val new = pages.target
-    val old = pages.previous
-
-    val animationState = remember(new.configuration) { AnimationState(if (old == null) 1F else 0F) }
-
-    LaunchedEffect(new.configuration) {
-        animationState.animateTo(
-            targetValue = 1F,
-            animationSpec = animationSpec,
-            sequentialAnimation = !animationState.isFinished
-        )
-
-        pages = Pages(target = pages.target)
-    }
-
-    val items = rememberAnimationItems(targetPage = new, previousPage = old)
-
-    Box(modifier = modifier) {
-        items.forEach { item ->
-            key(item.page.child.configuration) {
-                animator(
-                    item.page.child,
-                    when (item.direction) {
-                        ChildAnimationDirection.ENTER -> animationState.value
-                        ChildAnimationDirection.EXIT -> 1F - animationState.value
-                    },
-                    item.placement,
-                    item.direction
-                ) {
-                    content(item.page.child)
-                }
-            }
-        }
-    }
-}
-
-@Composable
-private fun <C : Any, T : Any> rememberAnimationItems(
-    targetPage: Page<C, T>,
-    previousPage: Page<C, T>?
-): List<AnimationItem<C, T>> =
-    remember(targetPage.configuration, previousPage?.configuration) {
-        when {
-            previousPage == null ->
-                listOf(AnimationItem(targetPage, ChildPlacement.BACK, ChildAnimationDirection.ENTER))
-
-            targetPage.index >= previousPage.index ->
-                listOf(
-                    AnimationItem(previousPage, ChildPlacement.BACK, ChildAnimationDirection.EXIT),
-                    AnimationItem(targetPage, ChildPlacement.FRONT, ChildAnimationDirection.ENTER),
-                )
-
-            else ->
-                listOf(
-                    AnimationItem(targetPage, ChildPlacement.BACK, ChildAnimationDirection.ENTER),
-                    AnimationItem(previousPage, ChildPlacement.FRONT, ChildAnimationDirection.EXIT),
-                )
-        }
-    }
-
-private class Page<out C : Any, out T : Any>(
-    val child: Child.Created<C, T>,
-    val index: Int,
-) {
-    val configuration: C = child.configuration
-}
-
-private class Pages<out C : Any, out T : Any>(
-    val target: Page<C, T>,
-    val previous: Page<C, T>? = null,
-)
-
-private class AnimationItem<out C : Any, out T : Any>(
-    val page: Page<C, T>,
-    val placement: ChildPlacement,
-    val direction: ChildAnimationDirection,
-)
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/util/DecomposeUtil.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/util/DecomposeUtil.kt
new file mode 100644
index 00000000..761239aa
--- /dev/null
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/util/DecomposeUtil.kt
@@ -0,0 +1,63 @@
+package ml.dev.kotlin.minigames.shared.ui.util
+
+import com.arkivanov.decompose.Cancellation
+import com.arkivanov.decompose.value.MutableValue
+import com.arkivanov.decompose.value.Value
+import com.arkivanov.essenty.lifecycle.Lifecycle
+import com.arkivanov.essenty.lifecycle.LifecycleOwner
+import com.arkivanov.essenty.lifecycle.doOnDestroy
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.cancel
+import kotlinx.coroutines.flow.Flow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.launch
+import kotlin.coroutines.CoroutineContext
+
+fun LifecycleOwner.coroutineScope(context: CoroutineContext): CoroutineScope {
+    val scope = CoroutineScope(context)
+    lifecycle.doOnDestroy(scope::cancel)
+    return scope
+}
+
+fun <T : Any> StateFlow<T>.asValue(
+    lifecycle: Lifecycle,
+    context: CoroutineContext = Dispatchers.Main.immediate,
+): Value<T> =
+    asValue(
+        initialValue = value,
+        lifecycle = lifecycle,
+        context = context,
+    )
+
+fun <T : Any> Flow<T>.asValue(
+    initialValue: T,
+    lifecycle: Lifecycle,
+    context: CoroutineContext = Dispatchers.Main.immediate,
+): Value<T> {
+    val value = MutableValue(initialValue)
+    var scope: CoroutineScope? = null
+
+    lifecycle.subscribe(
+        object : Lifecycle.Callbacks {
+            override fun onStart() {
+                scope = CoroutineScope(context).apply {
+                    launch {
+                        collect { value.value = it }
+                    }
+                }
+            }
+
+            override fun onStop() {
+                scope?.cancel()
+                scope = null
+            }
+        }
+    )
+
+    return value
+}
+
+class ConstantValue<out T : Any>(override val value: T) : Value<T>() {
+    override fun subscribe(observer: (T) -> Unit) = Cancellation { }
+}
\ No newline at end of file
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/util/NavigatorUtil.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/util/NavigatorUtil.kt
deleted file mode 100644
index 35db80a1..00000000
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/util/NavigatorUtil.kt
+++ /dev/null
@@ -1,92 +0,0 @@
-package ml.dev.kotlin.minigames.shared.ui.util
-
-import androidx.compose.runtime.*
-import androidx.compose.runtime.saveable.LocalSaveableStateRegistry
-import com.arkivanov.decompose.ComponentContext
-import com.arkivanov.decompose.DefaultComponentContext
-import com.arkivanov.decompose.router.Router
-import com.arkivanov.decompose.router.RouterState
-import com.arkivanov.decompose.router.router
-import com.arkivanov.decompose.value.Value
-import com.arkivanov.essenty.backpressed.BackPressedDispatcher
-import com.arkivanov.essenty.backpressed.BackPressedHandler
-import com.arkivanov.essenty.lifecycle.Lifecycle
-import com.arkivanov.essenty.lifecycle.LifecycleRegistry
-import com.arkivanov.essenty.lifecycle.destroy
-import com.arkivanov.essenty.lifecycle.resume
-import com.arkivanov.essenty.parcelable.Parcelable
-import com.arkivanov.essenty.parcelable.ParcelableContainer
-import com.arkivanov.essenty.statekeeper.StateKeeper
-import com.arkivanov.essenty.statekeeper.StateKeeperDispatcher
-import kotlin.reflect.KClass
-
-class Navigator<C : Any>(
-    private val router: Router<C, Any>,
-    backPressedHandler: BackPressedHandler
-) : BackPressedHandler by backPressedHandler {
-    val state: Value<RouterState<C, Any>> get() = router.state
-
-    fun navigate(configuration: C, dropAll: Boolean = false) {
-        router.navigate { if (dropAll) listOf(configuration) else it + configuration }
-    }
-}
-
-@Composable
-internal fun <C : Parcelable> rememberRouter(
-    initialRoute: C,
-    configurationClass: KClass<out C>,
-    key: String = "${configurationClass.simpleName}Router",
-): Navigator<C> {
-    val context = rememberComponentContext()
-    return remember {
-        context.router(
-            initialStack = { listOf(initialRoute) },
-            configurationClass = configurationClass,
-            key = key,
-            handleBackButton = true,
-            childFactory = { configuration, _ -> configuration }
-        )
-    }.let { Navigator(it, context.backPressedHandler) }
-}
-
-
-@Composable
-internal fun rememberComponentContext(): ComponentContext {
-    val lifecycle = rememberLifecycle()
-    val stateKeeper = rememberStateKeeper()
-    val backPressedHandler = LocalBackPressedHandler.current ?: BackPressedDispatcher()
-
-    return remember { DefaultComponentContext(lifecycle, stateKeeper, null, backPressedHandler) }
-}
-
-@Composable
-internal fun rememberLifecycle(): Lifecycle {
-    val lifecycle = remember { LifecycleRegistry() }
-
-    DisposableEffect(Unit) {
-        lifecycle.resume()
-        onDispose { lifecycle.destroy() }
-    }
-    return lifecycle
-}
-
-@Composable
-internal fun rememberStateKeeper(): StateKeeper {
-    val stateRegistry = LocalSaveableStateRegistry.current
-    val dispatcher =
-        remember { StateKeeperDispatcher(stateRegistry?.consumeRestored(KEY_STATE) as ParcelableContainer?) }
-
-    if (stateRegistry != null) {
-        DisposableEffect(Unit) {
-            val entry = stateRegistry.registerProvider(KEY_STATE, dispatcher::save)
-            onDispose { entry.unregister() }
-        }
-    }
-    return dispatcher
-}
-
-internal val LocalBackPressedHandler: ProvidableCompositionLocal<BackPressedHandler?> =
-    staticCompositionLocalOf { null }
-
-private const val KEY_STATE = "MINI_GAMES_STATE"
-
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/util/StateUtil.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/util/StateUtil.kt
index 4c704ed0..7a2e67bc 100644
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/util/StateUtil.kt
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/ui/util/StateUtil.kt
@@ -1,7 +1,12 @@
 package ml.dev.kotlin.minigames.shared.ui.util
 
 import androidx.compose.runtime.MutableState
+import kotlinx.coroutines.flow.MutableStateFlow
 
 fun <T> T.set(vararg state: MutableState<T>) {
     state.forEach { it.value = this }
 }
+
+fun <T> T.set(vararg state: MutableStateFlow<T>) {
+    state.forEach { it.value = this }
+}
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/BirdGameViewModel.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/BirdGameViewModel.kt
deleted file mode 100644
index 143bff8e..00000000
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/BirdGameViewModel.kt
+++ /dev/null
@@ -1,27 +0,0 @@
-package ml.dev.kotlin.minigames.shared.viewmodel
-
-import com.arkivanov.essenty.instancekeeper.getOrCreate
-import kotlinx.coroutines.flow.MutableStateFlow
-import ml.dev.kotlin.minigames.shared.api.BIRD_GAME_WEBSOCKET
-import ml.dev.kotlin.minigames.shared.model.BirdGameSnapshot
-import ml.dev.kotlin.minigames.shared.model.BirdGameUpdate
-import ml.dev.kotlin.minigames.shared.model.GameStateUpdateClientMessage
-import ml.dev.kotlin.minigames.shared.ui.Game
-import ml.dev.kotlin.minigames.shared.util.now
-import ml.dev.kotlin.minigames.shared.websocket.client.GameAccessData
-import ml.dev.kotlin.minigames.shared.websocket.client.GameClient
-
-
-internal class BirdGameViewModel(
-    context: ViewModelContext,
-    gameAccessData: GameAccessData,
-) : GameViewModel<BirdGameSnapshot>(context, gameAccessData) {
-
-    override val client: GameClient =
-        ctx.keeper.getOrCreate(Game.Bird) { GameClient(BIRD_GAME_WEBSOCKET) }
-
-    suspend fun emitFly(stateMessages: MutableStateFlow<GameStateUpdateClientMessage?>) {
-        val message = GameStateUpdateClientMessage(BirdGameUpdate, timestamp = now())
-        stateMessages.emit(message)
-    }
-}
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ChatViewModel.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ChatViewModel.kt
deleted file mode 100644
index 5c043fb7..00000000
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ChatViewModel.kt
+++ /dev/null
@@ -1,44 +0,0 @@
-package ml.dev.kotlin.minigames.shared.viewmodel
-
-import androidx.compose.runtime.*
-import kotlinx.coroutines.flow.MutableSharedFlow
-import ml.dev.kotlin.minigames.shared.model.GameDataClientMessage
-import ml.dev.kotlin.minigames.shared.model.SendMessageClientMessage
-import ml.dev.kotlin.minigames.shared.model.UserMessage
-import ml.dev.kotlin.minigames.shared.model.Username
-import ml.dev.kotlin.minigames.shared.ui.component.SelectedScreen
-import ml.dev.kotlin.minigames.shared.util.now
-
-internal class ChatViewModel(
-    context: ViewModelContext,
-    countPredicate: () -> Boolean,
-    val username: Username,
-) : CountingViewModel<SelectedScreen>(
-    ctx = context,
-    countPredicate = countPredicate
-) {
-
-    private val _messages: MutableList<UserMessage> = mutableStateListOf()
-    val messages: List<UserMessage> get() = _messages
-
-    val userMessageTextState: MutableState<String> = mutableStateOf("")
-    var userMessageText by userMessageTextState
-
-    fun addMessage(message: UserMessage) {
-        countNew()
-        val idx = _messages.binarySearch(message, USER_MESSAGES_COMPARATOR)
-        if (idx < 0) _messages.add(-idx - 1, message)
-    }
-
-    suspend fun send(clientMessages: MutableSharedFlow<GameDataClientMessage>) {
-        if (userMessageText.isBlank()) return
-        val timestamp = now()
-        val userMessage = UserMessage(userMessageText, username, timestamp)
-        val message = SendMessageClientMessage(userMessage, timestamp)
-        clientMessages.emit(message)
-        userMessageText = ""
-    }
-}
-
-private val USER_MESSAGES_COMPARATOR: Comparator<UserMessage> =
-    Comparator { a, b -> a.timestamp.compareTo(b.timestamp) }
\ No newline at end of file
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/GameViewModel.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/GameViewModel.kt
deleted file mode 100644
index fe71b36e..00000000
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/GameViewModel.kt
+++ /dev/null
@@ -1,52 +0,0 @@
-package ml.dev.kotlin.minigames.shared.viewmodel
-
-import kotlinx.coroutines.flow.MutableSharedFlow
-import ml.dev.kotlin.minigames.shared.model.*
-import ml.dev.kotlin.minigames.shared.util.now
-import ml.dev.kotlin.minigames.shared.websocket.client.GameAccessData
-import ml.dev.kotlin.minigames.shared.websocket.client.GameClient
-
-
-internal abstract class GameViewModel<Snapshot : GameSnapshot>(
-    context: ViewModelContext,
-    val gameAccessData: GameAccessData,
-) : ViewModel(context) {
-
-    abstract val client: GameClient
-
-    val username: Username get() = gameAccessData.userLogin.username
-
-    fun points(snapshot: Snapshot): Int = points(username, snapshot)
-
-    fun points(forUser: Username, snapshot: Snapshot): Int = snapshot.points[forUser] ?: 0
-
-    fun userRole(snapshot: Snapshot): UserRole = snapshot.users[username]?.role ?: DEFAULT_USER.role
-
-    fun canEditUser(username: Username, snapshot: Snapshot): Boolean =
-        userRole(snapshot) == UserRole.Admin && username != this.username
-
-    fun heartBeat(): HeartBeatClientMessage = HeartBeatClientMessage(timestamp = now())
-
-    suspend fun approve(
-        username: Username,
-        clientMessages: MutableSharedFlow<GameDataClientMessage>
-    ): Unit = userAction(username, UserAction.Approve, clientMessages)
-
-    suspend fun discard(
-        username: Username,
-        clientMessages: MutableSharedFlow<GameDataClientMessage>
-    ): Unit = userAction(username, UserAction.Discard, clientMessages)
-
-    private suspend fun userAction(
-        username: Username,
-        action: UserAction,
-        clientMessages: MutableSharedFlow<GameDataClientMessage>
-    ) {
-        val message = UserActionClientMessage(username, action, timestamp = now())
-        clientMessages.emit(message)
-    }
-}
-
-const val HEARTBEAT_DELAY_MILLIS: Long = 30_000
-
-private val DEFAULT_USER: UserData = UserData.player()
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/LogInViewModel.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/LogInViewModel.kt
deleted file mode 100644
index 2088913c..00000000
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/LogInViewModel.kt
+++ /dev/null
@@ -1,94 +0,0 @@
-package ml.dev.kotlin.minigames.shared.viewmodel
-
-import androidx.compose.runtime.MutableState
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.setValue
-import com.arkivanov.essenty.instancekeeper.getOrCreate
-import com.russhwolf.settings.ExperimentalSettingsApi
-import kotlinx.coroutines.CoroutineScope
-import kotlinx.coroutines.launch
-import ml.dev.kotlin.minigames.shared.model.JwtToken
-import ml.dev.kotlin.minigames.shared.model.UserError
-import ml.dev.kotlin.minigames.shared.model.UserLogin
-import ml.dev.kotlin.minigames.shared.rest.client.UserClient
-import ml.dev.kotlin.minigames.shared.ui.Game
-import ml.dev.kotlin.minigames.shared.ui.ScreenRoute
-import ml.dev.kotlin.minigames.shared.ui.util.Navigator
-import ml.dev.kotlin.minigames.shared.util.Res
-import kotlin.random.Random
-
-internal class LogInViewModel(context: ViewModelContext, scope: CoroutineScope) : ViewModel(context) {
-
-    private val client: UserClient = ctx.keeper.getOrCreate { UserClient() }
-
-    val serverNameState: MutableState<String> = mutableStateOf("")
-    val usernameState: MutableState<String> = mutableStateOf("")
-    val passwordState: MutableState<String> = mutableStateOf("")
-
-    val serverNameErrorState: MutableState<Boolean> = mutableStateOf(false)
-    val usernameErrorState: MutableState<Boolean> = mutableStateOf(false)
-    val passwordErrorState: MutableState<Boolean> = mutableStateOf(false)
-
-    val gameState: MutableState<Game> = mutableStateOf(Game.values().first())
-
-    var serverName: String by serverNameState
-
-    var username: String by usernameState
-    var password: String by passwordState
-    var rememberUserLogin: Boolean by mutableStateOf(true)
-
-    private val userLogin: UserLogin get() = UserLogin(username, password)
-
-    private val storableServerName: String?
-        get() = serverName.takeIf { shouldStoreServerName(it) }
-
-    init {
-        scope.launch {
-            loadLoginScreenData()
-            if (storableServerName == null) shuffleGameName()
-        }
-    }
-
-    fun navigateGame(navigator: Navigator<ScreenRoute>): Unit = when (gameState.value) {
-        Game.Set -> navigator.navigate(ScreenRoute.GameScreen.Set(serverName, username, password))
-        Game.SnakeIO -> navigator.navigate(ScreenRoute.GameScreen.Snake(serverName, username, password))
-        Game.Bird -> navigator.navigate(ScreenRoute.GameScreen.Bird(serverName, username, password))
-    }
-
-    fun shuffleGameName() {
-        serverName = gameState.value.name + "-" + Random.nextInt(0, 1000)
-    }
-
-    suspend fun loginUser(): Res<UserError, JwtToken>? {
-        storeLoginScreenData()
-        return client.loginUser(userLogin)
-    }
-
-    @OptIn(ExperimentalSettingsApi::class)
-    private suspend fun loadLoginScreenData(): Unit = getUserSettings(ctx).run {
-        getStringOrNull(USERNAME_KEY)?.let { username = it }
-        getStringOrNull(PASSWORD_KEY)?.let { password = it }
-        getStringOrNull(SERVER_NAME_KEY)?.let { serverName = it }
-        getBooleanOrNull(REMEMBER_KEY)?.let { rememberUserLogin = it }
-    }
-
-    @OptIn(ExperimentalSettingsApi::class)
-    private suspend fun storeLoginScreenData(): Unit = getUserSettings(ctx).run {
-        putString(USERNAME_KEY, if (rememberUserLogin) username else "")
-        putString(PASSWORD_KEY, if (rememberUserLogin) password else "")
-        putString(SERVER_NAME_KEY, storableServerName ?: "")
-        putBoolean(REMEMBER_KEY, rememberUserLogin)
-    }
-}
-
-private fun shouldStoreServerName(name: String): Boolean {
-    if (name.isBlank()) return false
-
-    return Game.values().all { !name.startsWith("${it.name}-") }
-}
-
-private const val SERVER_NAME_KEY: String = "serverName"
-private const val REMEMBER_KEY: String = "remember"
-private const val USERNAME_KEY: String = "username"
-private const val PASSWORD_KEY: String = "password"
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/NotificationsViewModel.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/NotificationsViewModel.kt
deleted file mode 100644
index e504980f..00000000
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/NotificationsViewModel.kt
+++ /dev/null
@@ -1,34 +0,0 @@
-package ml.dev.kotlin.minigames.shared.viewmodel
-
-import androidx.compose.runtime.mutableStateListOf
-import androidx.compose.runtime.snapshots.SnapshotStateList
-import kotlinx.atomicfu.AtomicInt
-import kotlinx.atomicfu.atomic
-import ml.dev.kotlin.minigames.shared.ui.component.SelectedScreen
-
-internal class NotificationsViewModel(
-    context: ViewModelContext,
-    countPredicate: () -> Boolean,
-) : CountingViewModel<SelectedScreen>(
-    ctx = context,
-    countPredicate = countPredicate,
-) {
-
-    private var _notifications: SnapshotStateList<IndexedNotification> = mutableStateListOf()
-    val notifications: List<IndexedNotification> get() = _notifications
-
-    fun addNotification(message: String) {
-        countNew()
-        val idx = NOTIFICATION_IDX.getAndAdd(1)
-        val notification = IndexedNotification(message, idx)
-        _notifications.add(notification)
-    }
-
-    fun removeNotification(notification: IndexedNotification) {
-        _notifications.remove(notification)
-    }
-}
-
-data class IndexedNotification(val message: String, val idx: Int)
-
-private val NOTIFICATION_IDX: AtomicInt = atomic(0)
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/RegisterViewModel.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/RegisterViewModel.kt
deleted file mode 100644
index 6d9450d3..00000000
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/RegisterViewModel.kt
+++ /dev/null
@@ -1,35 +0,0 @@
-package ml.dev.kotlin.minigames.shared.viewmodel
-
-import androidx.compose.runtime.MutableState
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.setValue
-import com.arkivanov.essenty.instancekeeper.getOrCreate
-import ml.dev.kotlin.minigames.shared.model.UserCreate
-import ml.dev.kotlin.minigames.shared.model.UserError
-import ml.dev.kotlin.minigames.shared.rest.client.UserClient
-import ml.dev.kotlin.minigames.shared.util.Res
-
-internal class RegisterViewModel(context: ViewModelContext) : ViewModel(context) {
-
-    private val client: UserClient = ctx.keeper.getOrCreate { UserClient() }
-
-    val emailState: MutableState<String> = mutableStateOf("")
-    val usernameState: MutableState<String> = mutableStateOf("")
-    val passwordState: MutableState<String> = mutableStateOf("")
-    val confirmPasswordState: MutableState<String> = mutableStateOf("")
-
-    val emailErrorState: MutableState<Boolean> = mutableStateOf(false)
-    val usernameErrorState: MutableState<Boolean> = mutableStateOf(false)
-    val passwordErrorState: MutableState<Boolean> = mutableStateOf(false)
-    val confirmPasswordErrorState: MutableState<Boolean> = mutableStateOf(false)
-
-    var email by emailState
-    var username by usernameState
-    var password by passwordState
-    var confirmPassword by confirmPasswordState
-
-    val userCreate: UserCreate get() = UserCreate(email, username, password)
-
-    suspend fun createUser(): Res<UserError, Unit>? = client.createUser(userCreate)
-}
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/SetGameViewModel.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/SetGameViewModel.kt
deleted file mode 100644
index a38607cf..00000000
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/SetGameViewModel.kt
+++ /dev/null
@@ -1,30 +0,0 @@
-package ml.dev.kotlin.minigames.shared.viewmodel
-
-import com.arkivanov.essenty.instancekeeper.getOrCreate
-import kotlinx.coroutines.flow.MutableStateFlow
-import ml.dev.kotlin.minigames.shared.api.SET_GAME_WEBSOCKET
-import ml.dev.kotlin.minigames.shared.model.*
-import ml.dev.kotlin.minigames.shared.ui.Game
-import ml.dev.kotlin.minigames.shared.util.now
-import ml.dev.kotlin.minigames.shared.websocket.client.GameAccessData
-import ml.dev.kotlin.minigames.shared.websocket.client.GameClient
-
-
-internal class SetGameViewModel(
-    context: ViewModelContext,
-    gameAccessData: GameAccessData,
-) : GameViewModel<SetGameSnapshot>(context, gameAccessData) {
-
-    override val client: GameClient =
-        ctx.keeper.getOrCreate(Game.Set) { GameClient(SET_GAME_WEBSOCKET) }
-
-    suspend fun emitSetProposal(
-        cardsIds: Set<Int>,
-        stateMessages: MutableStateFlow<GameStateUpdateClientMessage?>
-    ) {
-        val proposal = SetProposal(cardsIds)
-        val update = SetGameUpdate(proposal)
-        val message = GameStateUpdateClientMessage(update, timestamp = now())
-        stateMessages.emit(message)
-    }
-}
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/SnakeGameViewModel.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/SnakeGameViewModel.kt
deleted file mode 100644
index 1df43a88..00000000
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/SnakeGameViewModel.kt
+++ /dev/null
@@ -1,34 +0,0 @@
-package ml.dev.kotlin.minigames.shared.viewmodel
-
-import com.arkivanov.essenty.instancekeeper.getOrCreate
-import kotlinx.coroutines.flow.MutableSharedFlow
-import kotlinx.coroutines.flow.MutableStateFlow
-import ml.dev.kotlin.minigames.shared.api.SNAKE_GAME_WEBSOCKET
-import ml.dev.kotlin.minigames.shared.model.*
-import ml.dev.kotlin.minigames.shared.ui.Game
-import ml.dev.kotlin.minigames.shared.util.V2
-import ml.dev.kotlin.minigames.shared.util.now
-import ml.dev.kotlin.minigames.shared.websocket.client.GameAccessData
-import ml.dev.kotlin.minigames.shared.websocket.client.GameClient
-
-
-internal class SnakeGameViewModel(
-    context: ViewModelContext,
-    gameAccessData: GameAccessData,
-) : GameViewModel<SnakeGameSnapshot>(context, gameAccessData) {
-
-    override val client: GameClient =
-        ctx.keeper.getOrCreate(Game.SnakeIO) { GameClient(SNAKE_GAME_WEBSOCKET) }
-
-    suspend fun emitDirectionChange(
-        dir: V2,
-        stateMessages: MutableStateFlow<GameStateUpdateClientMessage?>,
-    ) {
-        val direction = SnakeDirection(dir)
-        val update = SnakeGameUpdate(direction)
-        val message = GameStateUpdateClientMessage(update, timestamp = now())
-        stateMessages.emit(message)
-    }
-
-    fun userSnake(snapshot: SnakeGameSnapshot): Snake? = snapshot.snakes[username]
-}
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ViewModel.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ViewModel.kt
deleted file mode 100644
index cd42930c..00000000
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ViewModel.kt
+++ /dev/null
@@ -1,28 +0,0 @@
-package ml.dev.kotlin.minigames.shared.viewmodel
-
-import androidx.compose.runtime.MutableState
-import androidx.compose.runtime.mutableStateOf
-import kotlinx.atomicfu.AtomicInt
-import kotlinx.atomicfu.atomic
-
-internal abstract class ViewModel(val ctx: ViewModelContext)
-
-internal abstract class CountingViewModel<Value>(
-    ctx: ViewModelContext,
-    private val countPredicate: () -> Boolean = { true },
-) : ViewModel(ctx) {
-    private val _newCount: AtomicInt = atomic(0)
-
-    protected fun countNew() {
-        if (!countPredicate()) return
-        _newCount.addAndGet(1)
-        count.value = _newCount.value
-    }
-
-    fun clearNewNotificationsCount() {
-        _newCount.getAndSet(0)
-        count.value = _newCount.value
-    }
-
-    val count: MutableState<Int> = mutableStateOf(_newCount.value)
-}
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ViewModelContext.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ViewModelContext.kt
deleted file mode 100644
index f8a82a98..00000000
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ViewModelContext.kt
+++ /dev/null
@@ -1,10 +0,0 @@
-package ml.dev.kotlin.minigames.shared.viewmodel
-
-import com.arkivanov.essenty.instancekeeper.InstanceKeeper
-
-expect class ViewModelContext {
-    val keeper: InstanceKeeper
-
-    fun adjustResize()
-    fun adjustPan()
-}
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ViewModelSettings.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ViewModelSettings.kt
index 206dc1c9..bd61a431 100644
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ViewModelSettings.kt
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ViewModelSettings.kt
@@ -2,6 +2,7 @@ package ml.dev.kotlin.minigames.shared.viewmodel
 
 import com.russhwolf.settings.ExperimentalSettingsApi
 import com.russhwolf.settings.coroutines.SuspendSettings
+import ml.dev.kotlin.minigames.shared.component.MiniGamesAppComponentContext
 
 @OptIn(ExperimentalSettingsApi::class)
-internal expect fun getUserSettings(context: ViewModelContext): SuspendSettings
+internal expect fun getUserSettings(context: MiniGamesAppComponentContext): SuspendSettings
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/websocket/client/GameClient.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/websocket/client/GameClient.kt
index 03f64f4b..c127c8df 100644
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/websocket/client/GameClient.kt
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/websocket/client/GameClient.kt
@@ -23,7 +23,7 @@ import ml.dev.kotlin.minigames.shared.util.tryOrNull
 
 
 class GameClient(
-    private val gamePath: (serverName: String) -> GamePath
+    private val gamePath: (serverName: String) -> GamePath,
 ) : Closeable, InstanceKeeper.Instance {
 
     private val wsStateClient = WebsocketApiClient()
@@ -53,7 +53,8 @@ class GameClient(
                     path = gamePath(accessData.serverName).dataPath,
                     jwtToken = jwtToken,
                     outputMessages = { receiveMessages(serverMessages, onErrorReceive) },
-                    inputMessages = { sendMessages(clientMessages, onErrorSend) }
+                    inputMessages = { sendMessages(clientMessages, onErrorSend) },
+                    onError = onErrorReceive
                 )
             }
             launch {
@@ -61,7 +62,8 @@ class GameClient(
                     path = gamePath(accessData.serverName).statePath,
                     jwtToken = jwtToken,
                     outputMessages = { receiveMessages(serverStateMessages, onErrorReceive) },
-                    inputMessages = { sendMessages(clientStateMessages, onErrorSend) }
+                    inputMessages = { sendMessages(clientStateMessages, onErrorSend) },
+                    onError = onErrorReceive,
                 )
             }
         }
diff --git a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/websocket/client/WebsocketApiClient.kt b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/websocket/client/WebsocketApiClient.kt
index 9a145736..ebdaaade 100644
--- a/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/websocket/client/WebsocketApiClient.kt
+++ b/shared-client/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/websocket/client/WebsocketApiClient.kt
@@ -8,7 +8,6 @@ import io.ktor.client.request.*
 import io.ktor.http.*
 import io.ktor.serialization.kotlinx.cbor.*
 import io.ktor.utils.io.core.*
-import kotlinx.coroutines.ExperimentalCoroutinesApi
 import kotlinx.coroutines.coroutineScope
 import kotlinx.coroutines.launch
 import kotlinx.serialization.ExperimentalSerializationApi
@@ -25,12 +24,12 @@ class WebsocketApiClient : Closeable {
         install(WebSockets)
     }
 
-    @ExperimentalCoroutinesApi
     suspend fun webSocket(
         path: String,
         jwtToken: JwtToken,
         outputMessages: suspend DefaultClientWebSocketSession.() -> Unit,
         inputMessages: suspend DefaultClientWebSocketSession.() -> Unit,
+        onError: (Exception) -> Unit,
     ) {
         wsClient.webSocket(
             request = {
@@ -39,9 +38,13 @@ class WebsocketApiClient : Closeable {
                 url(WebsocketApiConfig.scheme, WebsocketApiConfig.host, DEFAULT_PORT, path)
             },
             block = {
-                coroutineScope {
-                    launch { outputMessages() }
-                    launch { inputMessages() }
+                try {
+                    coroutineScope {
+                        launch { outputMessages() }
+                        launch { inputMessages() }
+                    }
+                } catch (e: Exception) {
+                    onError(e)
                 }
             }
         )
diff --git a/shared-client/src/desktopMain/kotlin/ml/dev/kotlin/minigames/shared/main.desktop.kt b/shared-client/src/desktopMain/kotlin/ml/dev/kotlin/minigames/shared/main.desktop.kt
deleted file mode 100644
index 237e6afc..00000000
--- a/shared-client/src/desktopMain/kotlin/ml/dev/kotlin/minigames/shared/main.desktop.kt
+++ /dev/null
@@ -1,24 +0,0 @@
-package ml.dev.kotlin.minigames.shared
-
-import androidx.compose.ui.graphics.painter.BitmapPainter
-import androidx.compose.ui.res.loadImageBitmap
-import androidx.compose.ui.res.useResource
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.window.WindowState
-import androidx.compose.ui.window.singleWindowApplication
-import com.arkivanov.essenty.instancekeeper.InstanceKeeperDispatcher
-import ml.dev.kotlin.minigames.shared.ui.util.DpSize
-import ml.dev.kotlin.minigames.shared.viewmodel.ViewModelContext
-
-fun mainDesktopApp() = singleWindowApplication(
-    title = "Mini Games",
-    state = WindowState(height = DEFAULT_SIZE.height, width = DEFAULT_SIZE.width),
-    icon = BitmapPainter(useResource("ic_launcher.png", ::loadImageBitmap)),
-    resizable = true,
-) {
-    val keeper = InstanceKeeperDispatcher()
-    val context = ViewModelContext(keeper)
-    MiniGamesApp(context)
-}
-
-private val DEFAULT_SIZE: DpSize = DpSize(480.dp, 960.dp)
\ No newline at end of file
diff --git a/shared-client/src/desktopMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ViewModelContext.kt b/shared-client/src/desktopMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ViewModelContext.kt
deleted file mode 100644
index c1ebf177..00000000
--- a/shared-client/src/desktopMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ViewModelContext.kt
+++ /dev/null
@@ -1,11 +0,0 @@
-package ml.dev.kotlin.minigames.shared.viewmodel
-
-import com.arkivanov.essenty.instancekeeper.InstanceKeeper
-
-actual class ViewModelContext(
-    actual val keeper: InstanceKeeper,
-) {
-    actual fun adjustResize(): Unit = Unit
-    actual fun adjustPan(): Unit = Unit
-}
-
diff --git a/shared-client/src/iosMain/kotlin/main.ios.kt b/shared-client/src/iosMain/kotlin/main.ios.kt
index afab534e..393a9331 100644
--- a/shared-client/src/iosMain/kotlin/main.ios.kt
+++ b/shared-client/src/iosMain/kotlin/main.ios.kt
@@ -1,11 +1,8 @@
 import androidx.compose.ui.window.ComposeUIViewController
-import com.arkivanov.essenty.instancekeeper.InstanceKeeperDispatcher
 import ml.dev.kotlin.minigames.shared.MiniGamesApp
-import ml.dev.kotlin.minigames.shared.viewmodel.ViewModelContext
+import ml.dev.kotlin.minigames.shared.component.MiniGamesAppComponent
 import platform.UIKit.UIViewController
 
-fun MainViewController(): UIViewController = ComposeUIViewController {
-    val keeper = InstanceKeeperDispatcher()
-    val context = ViewModelContext(keeper)
-    MiniGamesApp(context)
+fun MainViewController(component: MiniGamesAppComponent): UIViewController = ComposeUIViewController {
+    MiniGamesApp(component)
 }
\ No newline at end of file
diff --git a/shared-client/src/iosMain/kotlin/ml/dev/kotlin/minigames/shared/component/MiniGamesAppComponentContext.kt b/shared-client/src/iosMain/kotlin/ml/dev/kotlin/minigames/shared/component/MiniGamesAppComponentContext.kt
new file mode 100644
index 00000000..814a99d2
--- /dev/null
+++ b/shared-client/src/iosMain/kotlin/ml/dev/kotlin/minigames/shared/component/MiniGamesAppComponentContext.kt
@@ -0,0 +1,9 @@
+package ml.dev.kotlin.minigames.shared.component
+
+import androidx.compose.material3.SnackbarHostState
+
+actual class MiniGamesAppComponentContext {
+    actual fun adjustResize() = Unit
+    actual fun adjustPan() = Unit
+    actual val snackbarHostState = SnackbarHostState()
+}
\ No newline at end of file
diff --git a/shared-client/src/iosMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/DropdownMenuParts.kt b/shared-client/src/iosMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/DropdownMenuParts.kt
index 81b03a1e..23fe8cfd 100644
--- a/shared-client/src/iosMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/DropdownMenuParts.kt
+++ b/shared-client/src/iosMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/DropdownMenuParts.kt
@@ -9,7 +9,7 @@ internal actual fun DropdownMenu(
     expanded: Boolean,
     onDismissRequest: () -> Unit,
     modifier: Modifier,
-    content: @Composable ColumnScope.() -> Unit
+    content: @Composable ColumnScope.() -> Unit,
 ) = androidx.compose.material3.DropdownMenu(
     expanded = expanded,
     onDismissRequest = onDismissRequest,
@@ -20,7 +20,7 @@ internal actual fun DropdownMenu(
 @Composable
 internal actual fun DropdownMenuItem(
     onClick: () -> Unit,
-    content: @Composable () -> Unit
+    content: @Composable () -> Unit,
 ) = androidx.compose.material3.DropdownMenuItem(
     onClick = onClick,
     text = content,
diff --git a/shared-client/src/iosMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ViewModelContext.kt b/shared-client/src/iosMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ViewModelContext.kt
deleted file mode 100644
index c1ebf177..00000000
--- a/shared-client/src/iosMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ViewModelContext.kt
+++ /dev/null
@@ -1,11 +0,0 @@
-package ml.dev.kotlin.minigames.shared.viewmodel
-
-import com.arkivanov.essenty.instancekeeper.InstanceKeeper
-
-actual class ViewModelContext(
-    actual val keeper: InstanceKeeper,
-) {
-    actual fun adjustResize(): Unit = Unit
-    actual fun adjustPan(): Unit = Unit
-}
-
diff --git a/shared-client/src/iosMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ViewModelSettings.kt b/shared-client/src/iosMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ViewModelSettings.kt
index c337498f..3f98218e 100644
--- a/shared-client/src/iosMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ViewModelSettings.kt
+++ b/shared-client/src/iosMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ViewModelSettings.kt
@@ -4,7 +4,8 @@ import com.russhwolf.settings.ExperimentalSettingsApi
 import com.russhwolf.settings.NSUserDefaultsSettings
 import com.russhwolf.settings.coroutines.SuspendSettings
 import com.russhwolf.settings.coroutines.toSuspendSettings
+import ml.dev.kotlin.minigames.shared.component.MiniGamesAppComponentContext
 
 @OptIn(ExperimentalSettingsApi::class)
-internal actual fun getUserSettings(context: ViewModelContext): SuspendSettings =
+internal actual fun getUserSettings(context: MiniGamesAppComponentContext): SuspendSettings =
     NSUserDefaultsSettings.Factory().create("user_settings").toSuspendSettings()
diff --git a/shared-client/src/jvmMain/kotlin/ml/dev/kotlin/minigames/shared/component/MiniGamesAppComponentContext.kt b/shared-client/src/jvmMain/kotlin/ml/dev/kotlin/minigames/shared/component/MiniGamesAppComponentContext.kt
new file mode 100644
index 00000000..814a99d2
--- /dev/null
+++ b/shared-client/src/jvmMain/kotlin/ml/dev/kotlin/minigames/shared/component/MiniGamesAppComponentContext.kt
@@ -0,0 +1,9 @@
+package ml.dev.kotlin.minigames.shared.component
+
+import androidx.compose.material3.SnackbarHostState
+
+actual class MiniGamesAppComponentContext {
+    actual fun adjustResize() = Unit
+    actual fun adjustPan() = Unit
+    actual val snackbarHostState = SnackbarHostState()
+}
\ No newline at end of file
diff --git a/shared-client/src/jvmMain/kotlin/ml/dev/kotlin/minigames/shared/main.desktop.kt b/shared-client/src/jvmMain/kotlin/ml/dev/kotlin/minigames/shared/main.desktop.kt
new file mode 100644
index 00000000..3b174b71
--- /dev/null
+++ b/shared-client/src/jvmMain/kotlin/ml/dev/kotlin/minigames/shared/main.desktop.kt
@@ -0,0 +1,47 @@
+package ml.dev.kotlin.minigames.shared
+
+import androidx.compose.ui.graphics.painter.BitmapPainter
+import androidx.compose.ui.res.loadImageBitmap
+import androidx.compose.ui.res.useResource
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Window
+import androidx.compose.ui.window.application
+import androidx.compose.ui.window.rememberWindowState
+import com.arkivanov.decompose.DefaultComponentContext
+import com.arkivanov.decompose.ExperimentalDecomposeApi
+import com.arkivanov.decompose.extensions.compose.lifecycle.LifecycleController
+import com.arkivanov.essenty.lifecycle.LifecycleRegistry
+import ml.dev.kotlin.minigames.shared.component.MiniGamesAppComponentContext
+import ml.dev.kotlin.minigames.shared.component.MiniGamesAppComponentImpl
+import ml.dev.kotlin.minigames.shared.ui.util.DpSize
+import ml.dev.kotlin.minigames.shared.util.runOnUiThread
+
+@OptIn(ExperimentalDecomposeApi::class)
+fun mainDesktopApp() {
+    val lifecycle = LifecycleRegistry()
+    val component = runOnUiThread {
+        MiniGamesAppComponentImpl(
+            MiniGamesAppComponentContext(),
+            DefaultComponentContext(lifecycle)
+        )
+    }
+    application {
+        val windowState = rememberWindowState(
+            height = DEFAULT_SIZE.height,
+            width = DEFAULT_SIZE.width
+        )
+
+        LifecycleController(lifecycle, windowState)
+
+        Window(
+            title = "Mini Games",
+            onCloseRequest = ::exitApplication,
+            state = windowState,
+            icon = BitmapPainter(useResource("ic_launcher.png", ::loadImageBitmap)),
+        ) {
+            MiniGamesApp(component)
+        }
+    }
+}
+
+private val DEFAULT_SIZE: DpSize = DpSize(480.dp, 960.dp)
\ No newline at end of file
diff --git a/shared-client/src/desktopMain/kotlin/ml/dev/kotlin/minigames/shared/rest/RestApiConfig.kt b/shared-client/src/jvmMain/kotlin/ml/dev/kotlin/minigames/shared/rest/RestApiConfig.kt
similarity index 100%
rename from shared-client/src/desktopMain/kotlin/ml/dev/kotlin/minigames/shared/rest/RestApiConfig.kt
rename to shared-client/src/jvmMain/kotlin/ml/dev/kotlin/minigames/shared/rest/RestApiConfig.kt
diff --git a/shared-client/src/desktopMain/kotlin/ml/dev/kotlin/minigames/shared/rest/client/RestJsonApiClient.kt b/shared-client/src/jvmMain/kotlin/ml/dev/kotlin/minigames/shared/rest/client/RestJsonApiClient.kt
similarity index 100%
rename from shared-client/src/desktopMain/kotlin/ml/dev/kotlin/minigames/shared/rest/client/RestJsonApiClient.kt
rename to shared-client/src/jvmMain/kotlin/ml/dev/kotlin/minigames/shared/rest/client/RestJsonApiClient.kt
diff --git a/shared-client/src/desktopMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/DropdownMenuParts.kt b/shared-client/src/jvmMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/DropdownMenuParts.kt
similarity index 88%
rename from shared-client/src/desktopMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/DropdownMenuParts.kt
rename to shared-client/src/jvmMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/DropdownMenuParts.kt
index 8a1dac32..482e2ef0 100644
--- a/shared-client/src/desktopMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/DropdownMenuParts.kt
+++ b/shared-client/src/jvmMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/DropdownMenuParts.kt
@@ -9,7 +9,7 @@ internal actual fun DropdownMenu(
     expanded: Boolean,
     onDismissRequest: () -> Unit,
     modifier: Modifier,
-    content: @Composable ColumnScope.() -> Unit
+    content: @Composable ColumnScope.() -> Unit,
 ): Unit = androidx.compose.material.DropdownMenu(
     expanded = expanded,
     onDismissRequest = onDismissRequest,
@@ -20,7 +20,7 @@ internal actual fun DropdownMenu(
 @Composable
 internal actual fun DropdownMenuItem(
     onClick: () -> Unit,
-    content: @Composable () -> Unit
+    content: @Composable () -> Unit,
 ): Unit = androidx.compose.material.DropdownMenuItem(
     onClick = onClick,
     content = { content() },
diff --git a/shared-client/src/desktopMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/FormFieldParts.kt b/shared-client/src/jvmMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/FormFieldParts.kt
similarity index 100%
rename from shared-client/src/desktopMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/FormFieldParts.kt
rename to shared-client/src/jvmMain/kotlin/ml/dev/kotlin/minigames/shared/ui/component/FormFieldParts.kt
diff --git a/shared-client/src/desktopMain/kotlin/ml/dev/kotlin/minigames/shared/ui/theme/Fonts.kt b/shared-client/src/jvmMain/kotlin/ml/dev/kotlin/minigames/shared/ui/theme/Fonts.kt
similarity index 100%
rename from shared-client/src/desktopMain/kotlin/ml/dev/kotlin/minigames/shared/ui/theme/Fonts.kt
rename to shared-client/src/jvmMain/kotlin/ml/dev/kotlin/minigames/shared/ui/theme/Fonts.kt
diff --git a/shared-client/src/jvmMain/kotlin/ml/dev/kotlin/minigames/shared/util/SwingUtil.kt b/shared-client/src/jvmMain/kotlin/ml/dev/kotlin/minigames/shared/util/SwingUtil.kt
new file mode 100644
index 00000000..7a550807
--- /dev/null
+++ b/shared-client/src/jvmMain/kotlin/ml/dev/kotlin/minigames/shared/util/SwingUtil.kt
@@ -0,0 +1,25 @@
+package ml.dev.kotlin.minigames.shared.util
+
+import javax.swing.SwingUtilities
+
+internal inline fun <T> runOnUiThread(crossinline block: () -> T): T {
+    if (SwingUtilities.isEventDispatchThread()) {
+        return block()
+    }
+
+    var error: Throwable? = null
+    var result: T? = null
+
+    SwingUtilities.invokeAndWait {
+        try {
+            result = block()
+        } catch (e: Throwable) {
+            error = e
+        }
+    }
+
+    error?.also { throw it }
+
+    @Suppress("UNCHECKED_CAST")
+    return result as T
+}
\ No newline at end of file
diff --git a/shared-client/src/desktopMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ViewModelSettings.kt b/shared-client/src/jvmMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ViewModelSettings.kt
similarity index 70%
rename from shared-client/src/desktopMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ViewModelSettings.kt
rename to shared-client/src/jvmMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ViewModelSettings.kt
index 22694acb..636c7fb0 100644
--- a/shared-client/src/desktopMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ViewModelSettings.kt
+++ b/shared-client/src/jvmMain/kotlin/ml/dev/kotlin/minigames/shared/viewmodel/ViewModelSettings.kt
@@ -4,8 +4,9 @@ import com.russhwolf.settings.ExperimentalSettingsApi
 import com.russhwolf.settings.PreferencesSettings
 import com.russhwolf.settings.coroutines.SuspendSettings
 import com.russhwolf.settings.coroutines.toSuspendSettings
+import ml.dev.kotlin.minigames.shared.component.MiniGamesAppComponentContext
 import java.util.prefs.Preferences
 
 @OptIn(ExperimentalSettingsApi::class)
-internal actual fun getUserSettings(context: ViewModelContext): SuspendSettings =
+internal actual fun getUserSettings(context: MiniGamesAppComponentContext): SuspendSettings =
     PreferencesSettings(Preferences.userRoot()).toSuspendSettings()
diff --git a/shared-client/src/desktopMain/kotlin/ml/dev/kotlin/minigames/shared/websocket/WebsocketApiConfig.kt b/shared-client/src/jvmMain/kotlin/ml/dev/kotlin/minigames/shared/websocket/WebsocketApiConfig.kt
similarity index 100%
rename from shared-client/src/desktopMain/kotlin/ml/dev/kotlin/minigames/shared/websocket/WebsocketApiConfig.kt
rename to shared-client/src/jvmMain/kotlin/ml/dev/kotlin/minigames/shared/websocket/WebsocketApiConfig.kt
diff --git a/shared-client/src/desktopMain/kotlin/ml/dev/kotlin/minigames/shared/websocket/client/WebsocketApiClient.kt b/shared-client/src/jvmMain/kotlin/ml/dev/kotlin/minigames/shared/websocket/client/WebsocketApiClient.kt
similarity index 100%
rename from shared-client/src/desktopMain/kotlin/ml/dev/kotlin/minigames/shared/websocket/client/WebsocketApiClient.kt
rename to shared-client/src/jvmMain/kotlin/ml/dev/kotlin/minigames/shared/websocket/client/WebsocketApiClient.kt
diff --git a/shared/build.gradle.kts b/shared/build.gradle.kts
index fc311c03..e630b4a7 100644
--- a/shared/build.gradle.kts
+++ b/shared/build.gradle.kts
@@ -6,32 +6,21 @@ plugins {
 }
 
 kotlin {
-    android()
+    jvmToolchain(17)
+
+    androidTarget()
 
     iosX64()
     iosArm64()
     iosSimulatorArm64()
 
-    jvm("desktop")
+    jvm()
 
     sourceSets {
-        val commonMain by getting {
-            dependencies {
-                implementation(Dependencies.kotlinxSerialization)
-                implementation(Dependencies.kotlinxDateTime)
-                implementation(Dependencies.uuid)
-            }
-        }
-
-        val iosX64Main by getting
-        val iosArm64Main by getting
-        val iosSimulatorArm64Main by getting
-
-        val iosMain by creating {
-            dependsOn(commonMain)
-            iosX64Main.dependsOn(this)
-            iosArm64Main.dependsOn(this)
-            iosSimulatorArm64Main.dependsOn(this)
+        commonMain.dependencies {
+            implementation(Dependencies.kotlinxSerialization)
+            implementation(Dependencies.kotlinxDateTime)
+            implementation(Dependencies.uuid)
         }
     }
 }
@@ -42,7 +31,6 @@ android {
 
     defaultConfig {
         minSdk = Constants.Android.minSdk
-        targetSdk = Constants.Android.targetSdk
     }
 
     sourceSets {
diff --git a/shared/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/model/BirdGameModel.kt b/shared/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/model/BirdGameModel.kt
index b573bcdc..9ab75205 100644
--- a/shared/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/model/BirdGameModel.kt
+++ b/shared/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/model/BirdGameModel.kt
@@ -59,7 +59,7 @@ data class BirdGameSnapshot(
 ) : GameSnapshot
 
 @Serializable
-object BirdGameUpdate : GameUpdate {
+data object BirdGameUpdate : GameUpdate {
 
     override fun update(forUser: Username, gameState: GameState, currMillis: Long): GameState {
         if (gameState !is BirdGameState) return gameState
diff --git a/shared/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/model/GameMessageModel.kt b/shared/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/model/GameMessageModel.kt
index aaccd4df..3c0e46f9 100644
--- a/shared/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/model/GameMessageModel.kt
+++ b/shared/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/model/GameMessageModel.kt
@@ -48,7 +48,7 @@ data class HeartBeatClientMessage(
 
 @Serializable
 data class UserActionClientMessage(
-    val username: Username,
+    val forUsername: Username,
     val action: UserAction,
     override val timestamp: Long,
 ) : GameDataClientMessage()
diff --git a/shared/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/model/MessageModel.kt b/shared/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/model/MessageModel.kt
index 00a7a818..328dcaf8 100644
--- a/shared/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/model/MessageModel.kt
+++ b/shared/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/model/MessageModel.kt
@@ -8,5 +8,5 @@ data class UserMessage(
     val message: String,
     val author: Username,
     val timestamp: Long,
-    val uuid: String = uuid4().toString()
+    val uuid: String = uuid4().toString(),
 )
diff --git a/shared/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/model/SetGameModel.kt b/shared/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/model/SetGameModel.kt
index 6faf5179..3512f567 100644
--- a/shared/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/model/SetGameModel.kt
+++ b/shared/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/model/SetGameModel.kt
@@ -37,7 +37,7 @@ data class SetCard(
 
 @Serializable
 data class TableCards(
-    val cardsById: Map<Int, SetCard>
+    val cardsById: Map<Int, SetCard>,
 )
 
 @Serializable
diff --git a/shared/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/model/UserModel.kt b/shared/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/model/UserModel.kt
index 0f33cce4..54060edf 100644
--- a/shared/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/model/UserModel.kt
+++ b/shared/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/model/UserModel.kt
@@ -4,21 +4,21 @@ import kotlinx.serialization.Serializable
 
 @Serializable
 data class UserLogin(
-        val username: String,
-        val password: String,
+    val username: String,
+    val password: String,
 )
 
 @Serializable
 data class UserCreate(
-        val email: String,
-        val username: String,
-        val password: String,
+    val email: String,
+    val username: String,
+    val password: String,
 )
 
 @Serializable
 data class UserError(
-        val username: String,
-        val reason: Reason
+    val username: String,
+    val reason: Reason,
 ) {
     enum class Reason {
         AlreadyExists, NotExists, InvalidPassword, NotConfirmed
diff --git a/shared/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/util/CollectionUtil.kt b/shared/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/util/CollectionUtil.kt
index dd668b36..49fd2de8 100644
--- a/shared/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/util/CollectionUtil.kt
+++ b/shared/src/commonMain/kotlin/ml/dev/kotlin/minigames/shared/util/CollectionUtil.kt
@@ -22,7 +22,7 @@ inline fun <T, R, V> Array<out T>.zip(other1: List<R>, other2: List<V>): List<Tr
 
 class ComputedMap<K, V>(
     private val map: MutableMap<K, V> = HashMap(),
-    private val default: MutableMap<K, V>.(K) -> V
+    private val default: MutableMap<K, V>.(K) -> V,
 ) : MutableMap<K, V> by map {
     override fun get(key: K): V = map[key]?.let { return it } ?: default(key).also { map[key] = it }
     override fun remove(key: K): V = map.remove(key) ?: this.default(key)
diff --git a/system.properties b/system.properties
index 5e87ec74..4a1c943d 100644
--- a/system.properties
+++ b/system.properties
@@ -1,2 +1,2 @@
-java.runtime.version=11
+java.runtime.version=17