diff --git a/Jetsurvey/app/build.gradle.kts b/Jetsurvey/app/build.gradle.kts
index 462fba1cb..4177a5dd5 100644
--- a/Jetsurvey/app/build.gradle.kts
+++ b/Jetsurvey/app/build.gradle.kts
@@ -75,7 +75,7 @@ dependencies {
     implementation(libs.google.android.material)
 
     implementation(libs.androidx.compose.foundation.layout)
-    implementation(libs.androidx.compose.material)
+    implementation(libs.androidx.compose.material3)
     implementation(libs.androidx.compose.material.iconsExtended)
     implementation(libs.androidx.compose.ui.tooling.preview)
     implementation(libs.androidx.compose.runtime)
@@ -83,6 +83,7 @@ dependencies {
     debugImplementation(libs.androidx.compose.ui.tooling)
 
     implementation(libs.accompanist.permissions)
+    implementation(libs.accompanist.systemuicontroller)
 
     implementation(libs.coil.kt.compose)
 
diff --git a/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/signinsignup/SignInScreen.kt b/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/signinsignup/SignInScreen.kt
index 45cd26b7c..57d9f5f4b 100644
--- a/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/signinsignup/SignInScreen.kt
+++ b/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/signinsignup/SignInScreen.kt
@@ -16,6 +16,8 @@
 
 package com.example.compose.jetsurvey.signinsignup
 
+import android.content.res.Configuration.UI_MODE_NIGHT_NO
+import android.content.res.Configuration.UI_MODE_NIGHT_YES
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
@@ -24,15 +26,15 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentHeight
-import androidx.compose.material.Button
-import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Scaffold
-import androidx.compose.material.Snackbar
-import androidx.compose.material.SnackbarHost
-import androidx.compose.material.SnackbarHostState
-import androidx.compose.material.Text
-import androidx.compose.material.TextButton
+import androidx.compose.material3.Button
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Snackbar
+import androidx.compose.material3.SnackbarHost
+import androidx.compose.material3.SnackbarHostState
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -48,7 +50,6 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.example.compose.jetsurvey.R
 import com.example.compose.jetsurvey.theme.JetsurveyTheme
-import com.example.compose.jetsurvey.theme.snackbarAction
 import com.example.compose.jetsurvey.util.supportWideScreen
 import kotlinx.coroutines.launch
 
@@ -59,7 +60,7 @@ sealed class SignInEvent {
     object NavigateBack : SignInEvent()
 }
 
-@OptIn(ExperimentalMaterialApi::class)
+@OptIn(ExperimentalMaterial3Api::class) // Scaffold is experimental in m3
 @Composable
 fun SignIn(onNavigationEvent: (SignInEvent) -> Unit) {
 
@@ -157,7 +158,6 @@ fun SignInContent(
     }
 }
 
-@OptIn(ExperimentalMaterialApi::class)
 @Composable
 fun ErrorSnackbar(
     snackbarHostState: SnackbarHostState,
@@ -171,16 +171,16 @@ fun ErrorSnackbar(
                 modifier = Modifier.padding(16.dp),
                 content = {
                     Text(
-                        text = data.message,
-                        style = MaterialTheme.typography.body2
+                        text = data.visuals.message,
+                        style = MaterialTheme.typography.bodyMedium,
                     )
                 },
                 action = {
-                    data.actionLabel?.let {
+                    data.visuals.actionLabel?.let {
                         TextButton(onClick = onDismiss) {
                             Text(
                                 text = stringResource(id = R.string.dismiss),
-                                color = MaterialTheme.colors.snackbarAction
+                                color = MaterialTheme.colorScheme.inversePrimary
                             )
                         }
                     }
@@ -193,18 +193,11 @@ fun ErrorSnackbar(
     )
 }
 
-@Preview(name = "Sign in light theme")
+@Preview(name = "Sign in light theme", uiMode = UI_MODE_NIGHT_NO)
+@Preview(name = "Sign in dark theme", uiMode = UI_MODE_NIGHT_YES)
 @Composable
 fun SignInPreview() {
     JetsurveyTheme {
         SignIn {}
     }
 }
-
-@Preview(name = "Sign in dark theme")
-@Composable
-fun SignInPreviewDark() {
-    JetsurveyTheme(darkTheme = true) {
-        SignIn {}
-    }
-}
diff --git a/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/signinsignup/SignInSignUp.kt b/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/signinsignup/SignInSignUp.kt
index bbfb02eca..8264a27ee 100644
--- a/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/signinsignup/SignInSignUp.kt
+++ b/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/signinsignup/SignInSignUp.kt
@@ -31,24 +31,20 @@ import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
-import androidx.compose.material.ContentAlpha
-import androidx.compose.material.Icon
-import androidx.compose.material.IconButton
-import androidx.compose.material.LocalContentAlpha
-import androidx.compose.material.LocalTextStyle
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.OutlinedButton
-import androidx.compose.material.OutlinedTextField
-import androidx.compose.material.Surface
-import androidx.compose.material.Text
-import androidx.compose.material.TextField
-import androidx.compose.material.TopAppBar
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ChevronLeft
 import androidx.compose.material.icons.filled.Visibility
 import androidx.compose.material.icons.filled.VisibilityOff
+import androidx.compose.material3.CenterAlignedTopAppBar
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedButton
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
@@ -60,17 +56,18 @@ import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.text.input.PasswordVisualTransformation
 import androidx.compose.ui.text.input.VisualTransformation
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.example.compose.jetsurvey.R
+import com.example.compose.jetsurvey.theme.JetsurveyTheme
+import com.example.compose.jetsurvey.theme.stronglyDeemphasizedAlpha
 
 @Composable
 fun SignInSignUpScreen(
     onSignedInAsGuest: () -> Unit,
     modifier: Modifier = Modifier,
     contentPadding: PaddingValues = PaddingValues(),
-    content: @Composable() () -> Unit
+    content: @Composable () -> Unit
 ) {
     LazyColumn(
         modifier = modifier,
@@ -96,13 +93,13 @@ fun SignInSignUpScreen(
     }
 }
 
+@OptIn(ExperimentalMaterial3Api::class) // CenterAlignedTopAppBar is experimental in m3
 @Composable
 fun SignInSignUpTopAppBar(topAppBarText: String, onBackPressed: () -> Unit) {
-    TopAppBar(
+    CenterAlignedTopAppBar(
         title = {
             Text(
                 text = topAppBarText,
-                textAlign = TextAlign.Center,
                 modifier = Modifier
                     .fillMaxSize()
                     .wrapContentSize(Alignment.Center)
@@ -112,7 +109,8 @@ fun SignInSignUpTopAppBar(topAppBarText: String, onBackPressed: () -> Unit) {
             IconButton(onClick = onBackPressed) {
                 Icon(
                     imageVector = Icons.Filled.ChevronLeft,
-                    contentDescription = stringResource(id = R.string.back)
+                    contentDescription = stringResource(id = R.string.back),
+                    tint = MaterialTheme.colorScheme.primary
                 )
             }
         },
@@ -120,11 +118,10 @@ fun SignInSignUpTopAppBar(topAppBarText: String, onBackPressed: () -> Unit) {
         actions = {
             Spacer(modifier = Modifier.width(68.dp))
         },
-        backgroundColor = MaterialTheme.colors.surface,
-        elevation = 0.dp
     )
 }
 
+@OptIn(ExperimentalMaterial3Api::class) // OutlinedTextField is experimental in m3
 @Composable
 fun Email(
     emailState: TextFieldState = remember { EmailState() },
@@ -137,12 +134,10 @@ fun Email(
             emailState.text = it
         },
         label = {
-            CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
-                Text(
-                    text = stringResource(id = R.string.email),
-                    style = MaterialTheme.typography.body2
-                )
-            }
+            Text(
+                text = stringResource(id = R.string.email),
+                style = MaterialTheme.typography.bodyMedium,
+            )
         },
         modifier = Modifier
             .fillMaxWidth()
@@ -152,7 +147,7 @@ fun Email(
                     emailState.enableShowErrors()
                 }
             },
-        textStyle = MaterialTheme.typography.body2,
+        textStyle = MaterialTheme.typography.bodyMedium,
         isError = emailState.showErrors(),
         keyboardOptions = KeyboardOptions.Default.copy(
             imeAction = imeAction,
@@ -162,12 +157,13 @@ fun Email(
             onDone = {
                 onImeAction()
             }
-        )
+        ),
     )
 
     emailState.getError()?.let { error -> TextFieldError(textError = error) }
 }
 
+@OptIn(ExperimentalMaterial3Api::class) // OutlinedTextField is experimental in m3
 @Composable
 fun Password(
     label: String,
@@ -191,14 +187,12 @@ fun Password(
                     passwordState.enableShowErrors()
                 }
             },
-        textStyle = MaterialTheme.typography.body2,
+        textStyle = MaterialTheme.typography.bodyMedium,
         label = {
-            CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
-                Text(
-                    text = label,
-                    style = MaterialTheme.typography.body2
-                )
-            }
+            Text(
+                text = label,
+                style = MaterialTheme.typography.bodyMedium,
+            )
         },
         trailingIcon = {
             if (showPassword.value) {
@@ -231,7 +225,7 @@ fun Password(
             onDone = {
                 onImeAction()
             }
-        )
+        ),
     )
 
     passwordState.getError()?.let { error -> TextFieldError(textError = error) }
@@ -247,7 +241,7 @@ fun TextFieldError(textError: String) {
         Text(
             text = textError,
             modifier = Modifier.fillMaxWidth(),
-            style = LocalTextStyle.current.copy(color = MaterialTheme.colors.error)
+            color = MaterialTheme.colorScheme.error
         )
     }
 }
@@ -261,20 +255,17 @@ fun OrSignInAsGuest(
         modifier = modifier,
         horizontalAlignment = Alignment.CenterHorizontally
     ) {
-        Surface {
-            CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
-                Text(
-                    text = stringResource(id = R.string.or),
-                    style = MaterialTheme.typography.subtitle2,
-                    modifier = Modifier.paddingFromBaseline(top = 25.dp)
-                )
-            }
-        }
+        Text(
+            text = stringResource(id = R.string.or),
+            style = MaterialTheme.typography.titleSmall,
+            color = MaterialTheme.colorScheme.onSurface.copy(alpha = stronglyDeemphasizedAlpha),
+            modifier = Modifier.paddingFromBaseline(top = 25.dp)
+        )
         OutlinedButton(
             onClick = onSignedInAsGuest,
             modifier = Modifier
                 .fillMaxWidth()
-                .padding(top = 20.dp, bottom = 24.dp)
+                .padding(top = 20.dp, bottom = 24.dp),
         ) {
             Text(text = stringResource(id = R.string.sign_in_guest))
         }
@@ -284,8 +275,12 @@ fun OrSignInAsGuest(
 @Preview
 @Composable
 fun SignInSignUpScreenPreview() {
-    SignInSignUpScreen(
-        onSignedInAsGuest = {},
-        content = {}
-    )
+    JetsurveyTheme {
+        Surface {
+            SignInSignUpScreen(
+                onSignedInAsGuest = {},
+                content = {}
+            )
+        }
+    }
 }
diff --git a/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/signinsignup/SignUpScreen.kt b/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/signinsignup/SignUpScreen.kt
index b66e8ad9a..14b4fb2c9 100644
--- a/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/signinsignup/SignUpScreen.kt
+++ b/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/signinsignup/SignUpScreen.kt
@@ -20,14 +20,12 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.material.Button
-import androidx.compose.material.ContentAlpha
-import androidx.compose.material.LocalContentAlpha
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Scaffold
-import androidx.compose.material.Text
+import androidx.compose.material3.Button
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
@@ -38,6 +36,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.example.compose.jetsurvey.R
 import com.example.compose.jetsurvey.theme.JetsurveyTheme
+import com.example.compose.jetsurvey.theme.stronglyDeemphasizedAlpha
 import com.example.compose.jetsurvey.util.supportWideScreen
 
 sealed class SignUpEvent {
@@ -47,6 +46,7 @@ sealed class SignUpEvent {
     object NavigateBack : SignUpEvent()
 }
 
+@OptIn(ExperimentalMaterial3Api::class) // Scaffold is experimental in m3
 @Composable
 fun SignUp(onNavigationEvent: (SignUpEvent) -> Unit) {
     Scaffold(
@@ -104,12 +104,11 @@ fun SignUpContent(
         )
 
         Spacer(modifier = Modifier.height(16.dp))
-        CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
-            Text(
-                text = stringResource(id = R.string.terms_and_conditions),
-                style = MaterialTheme.typography.caption
-            )
-        }
+        Text(
+            text = stringResource(id = R.string.terms_and_conditions),
+            style = MaterialTheme.typography.bodySmall,
+            color = MaterialTheme.colorScheme.onSurface.copy(alpha = stronglyDeemphasizedAlpha)
+        )
 
         Spacer(modifier = Modifier.height(16.dp))
         Button(
diff --git a/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/signinsignup/WelcomeScreen.kt b/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/signinsignup/WelcomeScreen.kt
index 4b50288c1..635a39831 100644
--- a/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/signinsignup/WelcomeScreen.kt
+++ b/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/signinsignup/WelcomeScreen.kt
@@ -16,6 +16,8 @@
 
 package com.example.compose.jetsurvey.signinsignup
 
+import android.content.res.Configuration.UI_MODE_NIGHT_NO
+import android.content.res.Configuration.UI_MODE_NIGHT_YES
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.animateContentSize
 import androidx.compose.foundation.Image
@@ -26,14 +28,12 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.Button
-import androidx.compose.material.ContentAlpha
-import androidx.compose.material.LocalContentAlpha
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Surface
-import androidx.compose.material.Text
+import androidx.compose.material3.Button
+import androidx.compose.material3.LocalContentColor
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
@@ -41,6 +41,7 @@ import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.luminance
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.input.ImeAction
@@ -49,6 +50,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.example.compose.jetsurvey.R
 import com.example.compose.jetsurvey.theme.JetsurveyTheme
+import com.example.compose.jetsurvey.theme.stronglyDeemphasizedAlpha
 import com.example.compose.jetsurvey.util.supportWideScreen
 
 sealed class WelcomeEvent {
@@ -108,7 +110,7 @@ private fun Branding(modifier: Modifier = Modifier) {
         )
         Text(
             text = stringResource(id = R.string.app_tagline),
-            style = MaterialTheme.typography.subtitle1,
+            style = MaterialTheme.typography.titleMedium,
             textAlign = TextAlign.Center,
             modifier = Modifier
                 .padding(top = 24.dp)
@@ -120,7 +122,7 @@ private fun Branding(modifier: Modifier = Modifier) {
 @Composable
 private fun Logo(
     modifier: Modifier = Modifier,
-    lightTheme: Boolean = MaterialTheme.colors.isLight
+    lightTheme: Boolean = LocalContentColor.current.luminance() < 0.5f,
 ) {
     val assetId = if (lightTheme) {
         R.drawable.ic_logo_light
@@ -144,14 +146,13 @@ private fun SignInCreateAccount(
         mutableStateOf(EmailState())
     }
     Column(modifier = modifier, horizontalAlignment = Alignment.CenterHorizontally) {
-        CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
-            Text(
-                text = stringResource(id = R.string.sign_in_create_account),
-                style = MaterialTheme.typography.subtitle2,
-                textAlign = TextAlign.Center,
-                modifier = Modifier.padding(top = 64.dp, bottom = 12.dp)
-            )
-        }
+        Text(
+            text = stringResource(id = R.string.sign_in_create_account),
+            style = MaterialTheme.typography.bodyMedium,
+            color = MaterialTheme.colorScheme.onSurface.copy(alpha = stronglyDeemphasizedAlpha),
+            textAlign = TextAlign.Center,
+            modifier = Modifier.padding(top = 64.dp, bottom = 12.dp)
+        )
         val onSubmit = {
             if (emailState.isValid) {
                 onEvent(WelcomeEvent.SignInSignUp(emailState.text))
@@ -169,7 +170,7 @@ private fun SignInCreateAccount(
         ) {
             Text(
                 text = stringResource(id = R.string.user_continue),
-                style = MaterialTheme.typography.subtitle2
+                style = MaterialTheme.typography.titleSmall
             )
         }
         OrSignInAsGuest(
@@ -179,18 +180,11 @@ private fun SignInCreateAccount(
     }
 }
 
-@Preview(name = "Welcome light theme")
+@Preview(name = "Welcome light theme", uiMode = UI_MODE_NIGHT_YES)
+@Preview(name = "Welcome dark theme", uiMode = UI_MODE_NIGHT_NO)
 @Composable
 fun WelcomeScreenPreview() {
     JetsurveyTheme {
         WelcomeScreen {}
     }
 }
-
-@Preview(name = "Welcome dark theme")
-@Composable
-fun WelcomeScreenPreviewDark() {
-    JetsurveyTheme(darkTheme = true) {
-        WelcomeScreen {}
-    }
-}
diff --git a/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/survey/SurveyQuestions.kt b/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/survey/SurveyQuestions.kt
index 076cd5e75..acb1f5923 100644
--- a/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/survey/SurveyQuestions.kt
+++ b/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/survey/SurveyQuestions.kt
@@ -16,6 +16,7 @@
 
 package com.example.compose.jetsurvey.survey
 
+import android.content.res.Configuration
 import androidx.annotation.StringRes
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.Image
@@ -35,26 +36,24 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.selection.selectable
-import androidx.compose.material.Button
-import androidx.compose.material.ButtonDefaults
-import androidx.compose.material.Checkbox
-import androidx.compose.material.CheckboxDefaults
-import androidx.compose.material.ContentAlpha
-import androidx.compose.material.Icon
-import androidx.compose.material.LocalContentAlpha
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.OutlinedButton
-import androidx.compose.material.RadioButton
-import androidx.compose.material.RadioButtonDefaults
-import androidx.compose.material.Slider
-import androidx.compose.material.Surface
-import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.AddAPhoto
 import androidx.compose.material.icons.filled.ArrowDropDown
 import androidx.compose.material.icons.filled.SwapHoriz
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Checkbox
+import androidx.compose.material3.CheckboxDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.LocalContentColor
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedButton
+import androidx.compose.material3.RadioButton
+import androidx.compose.material3.RadioButtonDefaults
+import androidx.compose.material3.Slider
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -63,6 +62,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.luminance
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -73,6 +73,8 @@ import coil.compose.AsyncImage
 import coil.request.ImageRequest
 import com.example.compose.jetsurvey.R
 import com.example.compose.jetsurvey.theme.JetsurveyTheme
+import com.example.compose.jetsurvey.theme.slightlyDeemphasizedAlpha
+import com.example.compose.jetsurvey.theme.stronglyDeemphasizedAlpha
 import com.google.accompanist.permissions.ExperimentalPermissionsApi
 import com.google.accompanist.permissions.MultiplePermissionsState
 import com.google.accompanist.permissions.rememberMultiplePermissionsState
@@ -164,15 +166,15 @@ private fun QuestionContent(
             QuestionTitle(question.questionText)
             Spacer(modifier = Modifier.height(24.dp))
             if (question.description != null) {
-                CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
-                    Text(
-                        text = stringResource(id = question.description),
-                        style = MaterialTheme.typography.caption,
-                        modifier = Modifier
-                            .fillParentMaxWidth()
-                            .padding(bottom = 18.dp, start = 8.dp, end = 8.dp)
-                    )
-                }
+                Text(
+                    text = stringResource(id = question.description),
+                    color = MaterialTheme.colorScheme.onSurface
+                        .copy(alpha = stronglyDeemphasizedAlpha),
+                    style = MaterialTheme.typography.bodySmall,
+                    modifier = Modifier
+                        .fillParentMaxWidth()
+                        .padding(bottom = 18.dp, start = 8.dp, end = 8.dp)
+                )
             }
             when (question.answer) {
                 is PossibleAnswer.SingleChoice -> SingleChoiceQuestion(
@@ -235,22 +237,18 @@ private fun QuestionContent(
 
 @Composable
 private fun QuestionTitle(@StringRes title: Int) {
-    val backgroundColor = if (MaterialTheme.colors.isLight) {
-        MaterialTheme.colors.onSurface.copy(alpha = 0.04f)
-    } else {
-        MaterialTheme.colors.onSurface.copy(alpha = 0.06f)
-    }
     Row(
         modifier = Modifier
             .fillMaxWidth()
             .background(
-                color = backgroundColor,
+                color = MaterialTheme.colorScheme.inverseOnSurface,
                 shape = MaterialTheme.shapes.small
             )
     ) {
         Text(
             text = stringResource(id = title),
-            style = MaterialTheme.typography.subtitle1,
+            style = MaterialTheme.typography.titleMedium,
+            color = MaterialTheme.colorScheme.onSurface.copy(alpha = slightlyDeemphasizedAlpha),
             modifier = Modifier
                 .fillMaxWidth()
                 .padding(vertical = 24.dp, horizontal = 16.dp)
@@ -287,14 +285,14 @@ private fun SingleChoiceQuestion(
             val optionSelected = text == selectedOption
 
             val answerBorderColor = if (optionSelected) {
-                MaterialTheme.colors.primary.copy(alpha = 0.5f)
+                MaterialTheme.colorScheme.primary.copy(alpha = 0.5f)
             } else {
-                MaterialTheme.colors.onSurface.copy(alpha = 0.12f)
+                MaterialTheme.colorScheme.onSurface.copy(alpha = 0.12f)
             }
             val answerBackgroundColor = if (optionSelected) {
-                MaterialTheme.colors.primary.copy(alpha = 0.12f)
+                MaterialTheme.colorScheme.primary.copy(alpha = 0.12f)
             } else {
-                MaterialTheme.colors.background
+                MaterialTheme.colorScheme.background
             }
             Surface(
                 shape = MaterialTheme.shapes.small,
@@ -324,7 +322,7 @@ private fun SingleChoiceQuestion(
                         selected = optionSelected,
                         onClick = onClickHandle,
                         colors = RadioButtonDefaults.colors(
-                            selectedColor = MaterialTheme.colors.primary
+                            selectedColor = MaterialTheme.colorScheme.primary
                         )
                     )
                 }
@@ -361,14 +359,14 @@ private fun SingleChoiceIconQuestion(
             }
             val optionSelected = text == selectedOption
             val answerBorderColor = if (optionSelected) {
-                MaterialTheme.colors.primary.copy(alpha = 0.5f)
+                MaterialTheme.colorScheme.primary.copy(alpha = 0.5f)
             } else {
-                MaterialTheme.colors.onSurface.copy(alpha = 0.12f)
+                MaterialTheme.colorScheme.onSurface.copy(alpha = 0.12f)
             }
             val answerBackgroundColor = if (optionSelected) {
-                MaterialTheme.colors.primary.copy(alpha = 0.12f)
+                MaterialTheme.colorScheme.primary.copy(alpha = 0.12f)
             } else {
-                MaterialTheme.colors.background
+                MaterialTheme.colorScheme.background
             }
             Surface(
                 shape = MaterialTheme.shapes.small,
@@ -410,7 +408,7 @@ private fun SingleChoiceIconQuestion(
                         selected = optionSelected,
                         onClick = onClickHandle,
                         colors = RadioButtonDefaults.colors(
-                            selectedColor = MaterialTheme.colors.primary
+                            selectedColor = MaterialTheme.colorScheme.primary
                         )
                     )
                 }
@@ -434,14 +432,14 @@ private fun MultipleChoiceQuestion(
                 mutableStateOf(selectedOption ?: false)
             }
             val answerBorderColor = if (checkedState) {
-                MaterialTheme.colors.primary.copy(alpha = 0.5f)
+                MaterialTheme.colorScheme.primary.copy(alpha = 0.5f)
             } else {
-                MaterialTheme.colors.onSurface.copy(alpha = 0.12f)
+                MaterialTheme.colorScheme.onSurface.copy(alpha = 0.12f)
             }
             val answerBackgroundColor = if (checkedState) {
-                MaterialTheme.colors.primary.copy(alpha = 0.12f)
+                MaterialTheme.colorScheme.primary.copy(alpha = 0.12f)
             } else {
-                MaterialTheme.colors.background
+                MaterialTheme.colorScheme.background
             }
             Surface(
                 shape = MaterialTheme.shapes.small,
@@ -475,7 +473,7 @@ private fun MultipleChoiceQuestion(
                             onAnswerSelected(option.value, selected)
                         },
                         colors = CheckboxDefaults.colors(
-                            checkedColor = MaterialTheme.colors.primary
+                            checkedColor = MaterialTheme.colorScheme.primary
                         ),
                     )
                 }
@@ -499,14 +497,14 @@ private fun MultipleChoiceIconQuestion(
                 mutableStateOf(selectedOption ?: false)
             }
             val answerBorderColor = if (checkedState) {
-                MaterialTheme.colors.primary.copy(alpha = 0.5f)
+                MaterialTheme.colorScheme.primary.copy(alpha = 0.5f)
             } else {
-                MaterialTheme.colors.onSurface.copy(alpha = 0.12f)
+                MaterialTheme.colorScheme.onSurface.copy(alpha = 0.12f)
             }
             val answerBackgroundColor = if (checkedState) {
-                MaterialTheme.colors.primary.copy(alpha = 0.12f)
+                MaterialTheme.colorScheme.primary.copy(alpha = 0.12f)
             } else {
-                MaterialTheme.colors.background
+                MaterialTheme.colorScheme.background
             }
             Surface(
                 shape = MaterialTheme.shapes.small,
@@ -547,7 +545,7 @@ private fun MultipleChoiceIconQuestion(
                             onAnswerSelected(option.value.second, selected)
                         },
                         colors = CheckboxDefaults.colors(
-                            checkedColor = MaterialTheme.colors.primary
+                            checkedColor = MaterialTheme.colorScheme.primary
                         ),
                     )
                 }
@@ -600,6 +598,7 @@ private fun PhotoQuestion(
     OutlinedButton(
         onClick = { onAction(questionId, SurveyActionType.TAKE_PHOTO) },
         modifier = modifier,
+        shape = MaterialTheme.shapes.small,
         contentPadding = PaddingValues()
     ) {
         Column {
@@ -675,15 +674,15 @@ private fun DateQuestion(
     Button(
         onClick = { onAction(questionId, SurveyActionType.PICK_DATE) },
         colors = ButtonDefaults.buttonColors(
-            backgroundColor = MaterialTheme.colors.onPrimary,
-            contentColor = MaterialTheme.colors.onSecondary
+            containerColor = MaterialTheme.colorScheme.surface,
+            contentColor = MaterialTheme.colorScheme.onSurface
+                .copy(alpha = slightlyDeemphasizedAlpha),
         ),
         shape = MaterialTheme.shapes.small,
         modifier = modifier
             .padding(vertical = 20.dp)
             .height(54.dp),
-        elevation = ButtonDefaults.elevation(0.dp),
-        border = BorderStroke(1.dp, MaterialTheme.colors.onSurface.copy(alpha = 0.12f))
+        border = BorderStroke(1.dp, MaterialTheme.colorScheme.onSurface.copy(alpha = 0.12f))
 
     ) {
         Text(
@@ -705,7 +704,7 @@ private fun DateQuestion(
 @Composable
 private fun PhotoDefaultImage(
     modifier: Modifier = Modifier,
-    lightTheme: Boolean = MaterialTheme.colors.isLight
+    lightTheme: Boolean = LocalContentColor.current.luminance() < 0.5f,
 ) {
     val assetId = if (lightTheme) {
         R.drawable.ic_selfie_light
@@ -747,7 +746,7 @@ private fun SliderQuestion(
     Row {
         Text(
             text = stringResource(id = possibleAnswer.startText),
-            style = MaterialTheme.typography.caption,
+            style = MaterialTheme.typography.bodySmall,
             textAlign = TextAlign.Start,
             modifier = Modifier
                 .fillMaxWidth()
@@ -755,7 +754,7 @@ private fun SliderQuestion(
         )
         Text(
             text = stringResource(id = possibleAnswer.neutralText),
-            style = MaterialTheme.typography.caption,
+            style = MaterialTheme.typography.bodySmall,
             textAlign = TextAlign.Center,
             modifier = Modifier
                 .fillMaxWidth()
@@ -763,7 +762,7 @@ private fun SliderQuestion(
         )
         Text(
             text = stringResource(id = possibleAnswer.endText),
-            style = MaterialTheme.typography.caption,
+            style = MaterialTheme.typography.bodySmall,
             textAlign = TextAlign.End,
             modifier = Modifier
                 .fillMaxWidth()
@@ -789,13 +788,37 @@ fun QuestionPreview() {
         description = R.string.select_one
     )
     JetsurveyTheme {
-        Question(
-            question = question,
-            shouldAskPermissions = true,
-            answer = null,
-            onAnswer = {},
-            onAction = { _, _ -> },
-            onDoNotAskForPermissions = {}
-        )
+        Surface {
+            Question(
+                question = question,
+                shouldAskPermissions = true,
+                answer = null,
+                onAnswer = {},
+                onAction = { _, _ -> },
+                onDoNotAskForPermissions = {}
+            )
+        }
+    }
+}
+
+@Preview(name = "Photo Question Light", uiMode = Configuration.UI_MODE_NIGHT_NO)
+@Preview(name = "Photo Question Dark", uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+fun PhotoQuestionPreview() {
+    JetsurveyTheme {
+        Surface {
+            PhotoQuestion(questionId = 1, answer = null, onAction = { _, _ -> })
+        }
+    }
+}
+
+@Preview(name = "Photo Question Light", uiMode = Configuration.UI_MODE_NIGHT_NO)
+@Preview(name = "Photo Question Dark", uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+fun DateQuestionPreview() {
+    JetsurveyTheme {
+        Surface {
+            DateQuestion(questionId = 1, answer = null, onAction = { _, _ -> })
+        }
     }
 }
diff --git a/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/survey/SurveyScreen.kt b/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/survey/SurveyScreen.kt
index b6de9d1d3..cb128780f 100644
--- a/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/survey/SurveyScreen.kt
+++ b/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/survey/SurveyScreen.kt
@@ -33,39 +33,35 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.material.Button
-import androidx.compose.material.ContentAlpha
-import androidx.compose.material.Icon
-import androidx.compose.material.IconButton
-import androidx.compose.material.LinearProgressIndicator
-import androidx.compose.material.LocalContentAlpha
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.OutlinedButton
-import androidx.compose.material.ProgressIndicatorDefaults
-import androidx.compose.material.Scaffold
-import androidx.compose.material.Surface
-import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Close
+import androidx.compose.material3.Button
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.LinearProgressIndicator
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedButton
+import androidx.compose.material3.ProgressIndicatorDefaults
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.buildAnnotatedString
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.withStyle
 import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.dp
 import com.example.compose.jetsurvey.R
-import com.example.compose.jetsurvey.theme.progressIndicatorBackground
+import com.example.compose.jetsurvey.theme.stronglyDeemphasizedAlpha
 import com.example.compose.jetsurvey.util.supportWideScreen
 
 private const val CONTENT_ANIMATION_DURATION = 500
 
-@OptIn(ExperimentalAnimationApi::class)
+@OptIn(ExperimentalAnimationApi::class, ExperimentalMaterial3Api::class)
+// AnimatedContent is experimental, Scaffold is experimental in m3
 @Composable
 fun SurveyQuestionsScreen(
     questions: SurveyState.Questions,
@@ -145,6 +141,7 @@ fun SurveyQuestionsScreen(
     }
 }
 
+@OptIn(ExperimentalMaterial3Api::class) // Scaffold is experimental in m3
 @Composable
 fun SurveyResultScreen(
     result: SurveyState.Result,
@@ -177,7 +174,7 @@ private fun SurveyResult(result: SurveyState.Result, modifier: Modifier = Modifi
             Spacer(modifier = Modifier.height(44.dp))
             Text(
                 text = result.surveyResult.library,
-                style = MaterialTheme.typography.h3,
+                style = MaterialTheme.typography.displaySmall,
                 modifier = Modifier.padding(horizontal = 20.dp)
             )
             Text(
@@ -185,12 +182,12 @@ private fun SurveyResult(result: SurveyState.Result, modifier: Modifier = Modifi
                     result.surveyResult.result,
                     result.surveyResult.library
                 ),
-                style = MaterialTheme.typography.subtitle1,
+                style = MaterialTheme.typography.titleMedium,
                 modifier = Modifier.padding(20.dp)
             )
             Text(
                 text = stringResource(result.surveyResult.description),
-                style = MaterialTheme.typography.body1,
+                style = MaterialTheme.typography.bodyLarge,
                 modifier = Modifier.padding(horizontal = 20.dp)
             )
         }
@@ -203,24 +200,18 @@ private fun TopAppBarTitle(
     totalQuestionsCount: Int,
     modifier: Modifier = Modifier
 ) {
-    val indexStyle = MaterialTheme.typography.caption.toSpanStyle().copy(
-        fontWeight = FontWeight.Bold
-    )
-    val totalStyle = MaterialTheme.typography.caption.toSpanStyle()
-    val questionCount = stringResource(R.string.question_count, totalQuestionsCount)
-    val text = buildAnnotatedString {
-        withStyle(style = indexStyle) {
-            append("${questionIndex + 1}")
-        }
-        withStyle(style = totalStyle) {
-            append(questionCount)
-        }
+    Row(modifier = modifier) {
+        Text(
+            text = (questionIndex + 1).toString(),
+            style = MaterialTheme.typography.labelMedium,
+            color = MaterialTheme.colorScheme.onSurface.copy(alpha = stronglyDeemphasizedAlpha)
+        )
+        Text(
+            text = stringResource(R.string.question_count, totalQuestionsCount),
+            style = MaterialTheme.typography.labelMedium,
+            color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)
+        )
     }
-    Text(
-        text = text,
-        style = MaterialTheme.typography.caption,
-        modifier = modifier
-    )
 }
 
 @Composable
@@ -239,19 +230,18 @@ private fun SurveyTopAppBar(
                     .align(Alignment.Center)
             )
 
-            CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
-                IconButton(
-                    onClick = onBackPressed,
-                    modifier = Modifier
-                        .padding(horizontal = 20.dp, vertical = 20.dp)
-                        .fillMaxWidth()
-                ) {
-                    Icon(
-                        Icons.Filled.Close,
-                        contentDescription = stringResource(id = R.string.close),
-                        modifier = Modifier.align(Alignment.CenterEnd)
-                    )
-                }
+            IconButton(
+                onClick = onBackPressed,
+                modifier = Modifier
+                    .padding(horizontal = 20.dp, vertical = 20.dp)
+                    .fillMaxWidth()
+            ) {
+                Icon(
+                    Icons.Filled.Close,
+                    contentDescription = stringResource(id = R.string.close),
+                    modifier = Modifier.align(Alignment.CenterEnd),
+                    tint = MaterialTheme.colorScheme.onSurface.copy(stronglyDeemphasizedAlpha)
+                )
             }
         }
         val animatedProgress by animateFloatAsState(
@@ -263,7 +253,7 @@ private fun SurveyTopAppBar(
             modifier = Modifier
                 .fillMaxWidth()
                 .padding(horizontal = 20.dp),
-            backgroundColor = MaterialTheme.colors.progressIndicatorBackground
+            trackColor = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.12f),
         )
     }
 }
@@ -276,8 +266,8 @@ private fun SurveyBottomBar(
     onDonePressed: () -> Unit
 ) {
     Surface(
-        elevation = 7.dp,
-        modifier = Modifier.fillMaxWidth() // .border(1.dp, MaterialTheme.colors.primary)
+        modifier = Modifier.fillMaxWidth(),
+        shadowElevation = 7.dp,
     ) {
 
         Row(
diff --git a/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/theme/Color.kt b/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/theme/Color.kt
index 5efe51c9c..a80d8e43e 100644
--- a/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/theme/Color.kt
+++ b/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/theme/Color.kt
@@ -18,13 +18,62 @@ package com.example.compose.jetsurvey.theme
 
 import androidx.compose.ui.graphics.Color
 
-val Purple300 = Color(0xFFCD52FC)
-val Purple600 = Color(0xFF9F00F4)
-val Purple700 = Color(0xFF8100EF)
-val Purple800 = Color(0xFF0000E1)
+val md_theme_light_primary = Color(0xFF8307F0)
+val md_theme_light_onPrimary = Color(0xFFFFFFFF)
+val md_theme_light_primaryContainer = Color(0xFFEEDCFF)
+val md_theme_light_onPrimaryContainer = Color(0xFF2A0054)
+val md_theme_light_secondary = Color(0xFF655A6F)
+val md_theme_light_onSecondary = Color(0xFFFFFFFF)
+val md_theme_light_secondaryContainer = Color(0xFFEBDDF7)
+val md_theme_light_onSecondaryContainer = Color(0xFF20182A)
+val md_theme_light_tertiary = Color(0xFF80525A)
+val md_theme_light_onTertiary = Color(0xFFFFFFFF)
+val md_theme_light_tertiaryContainer = Color(0xFFFFD9DE)
+val md_theme_light_onTertiaryContainer = Color(0xFF321018)
+val md_theme_light_error = Color(0xFFBA1A1A)
+val md_theme_light_errorContainer = Color(0xFFFFDAD6)
+val md_theme_light_onError = Color(0xFFFFFFFF)
+val md_theme_light_onErrorContainer = Color(0xFF410002)
+val md_theme_light_background = Color(0xFFFFFBFF)
+val md_theme_light_onBackground = Color(0xFF1D1B1E)
+val md_theme_light_surface = Color(0xFFFFFBFF)
+val md_theme_light_onSurface = Color(0xFF1D1B1E)
+val md_theme_light_surfaceVariant = Color(0xFFE8E0EB)
+val md_theme_light_onSurfaceVariant = Color(0xFF4A454E)
+val md_theme_light_outline = Color(0xFF7B757F)
+val md_theme_light_inverseOnSurface = Color(0xFFF5EFF4)
+val md_theme_light_inverseSurface = Color(0xFF1D1B1E)
+val md_theme_light_inversePrimary = Color(0xFFD9B9FF)
+val md_theme_light_shadow = Color(0xFF000000)
+val md_theme_light_surfaceTint = Color(0xFF8307F0)
 
-val Red300 = Color(0xFFD00036)
-val Red800 = Color(0xFFEA6D7E)
+val md_theme_dark_primary = Color(0xFFD9B9FF)
+val md_theme_dark_onPrimary = Color(0xFF450085)
+val md_theme_dark_primaryContainer = Color(0xFF6300BA)
+val md_theme_dark_onPrimaryContainer = Color(0xFFEEDCFF)
+val md_theme_dark_secondary = Color(0xFFCFC1DA)
+val md_theme_dark_onSecondary = Color(0xFF352D40)
+val md_theme_dark_secondaryContainer = Color(0xFF4C4357)
+val md_theme_dark_onSecondaryContainer = Color(0xFFEBDDF7)
+val md_theme_dark_tertiary = Color(0xFFF2B7C1)
+val md_theme_dark_onTertiary = Color(0xFF4B252D)
+val md_theme_dark_tertiaryContainer = Color(0xFF653B43)
+val md_theme_dark_onTertiaryContainer = Color(0xFFFFD9DE)
+val md_theme_dark_error = Color(0xFFFFB4AB)
+val md_theme_dark_errorContainer = Color(0xFF93000A)
+val md_theme_dark_onError = Color(0xFF690005)
+val md_theme_dark_onErrorContainer = Color(0xFFFFDAD6)
+val md_theme_dark_background = Color(0xFF1D1B1E)
+val md_theme_dark_onBackground = Color(0xFFE7E1E5)
+val md_theme_dark_surface = Color(0xFF1D1B1E)
+val md_theme_dark_onSurface = Color(0xFFE7E1E5)
+val md_theme_dark_surfaceVariant = Color(0xFF4A454E)
+val md_theme_dark_onSurfaceVariant = Color(0xFFCCC4CF)
+val md_theme_dark_outline = Color(0xFF958E99)
+val md_theme_dark_inverseOnSurface = Color(0xFF1D1B1E)
+val md_theme_dark_inverseSurface = Color(0xFFFFFBFF)
+val md_theme_dark_inversePrimary = Color(0xFF8307F0)
+val md_theme_dark_shadow = Color(0xFF000000)
+val md_theme_dark_surfaceTint = Color(0xFFD9B9FF)
 
-val Gray100 = Color(0xFFF5F5F5)
-val Gray900 = Color(0xFF212121)
+val seed = Color(0xFF8100EF)
diff --git a/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/theme/Shape.kt b/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/theme/Shape.kt
index 62ee6482d..23a613499 100644
--- a/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/theme/Shape.kt
+++ b/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/theme/Shape.kt
@@ -17,9 +17,10 @@
 package com.example.compose.jetsurvey.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(
-    small = RoundedCornerShape(12.dp)
+    extraSmall = RoundedCornerShape(12.dp),
+    small = RoundedCornerShape(12.dp),
 )
diff --git a/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/theme/Theme.kt b/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/theme/Theme.kt
index 8b1ecd8ef..8249621df 100644
--- a/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/theme/Theme.kt
+++ b/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/theme/Theme.kt
@@ -17,60 +17,101 @@
 package com.example.compose.jetsurvey.theme
 
 import androidx.compose.foundation.isSystemInDarkTheme
-import androidx.compose.material.Colors
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.darkColors
-import androidx.compose.material.lightColors
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.graphics.Color
+import androidx.compose.runtime.DisposableEffect
+import com.google.accompanist.systemuicontroller.rememberSystemUiController
 
-val LightThemeColors = lightColors(
-    primary = Purple700,
-    primaryVariant = Purple800,
-    onPrimary = Color.White,
-    secondary = Color.White,
-    onSecondary = Color.Black,
-    background = Color.White,
-    onBackground = Color.Black,
-    surface = Color.White,
-    onSurface = Color.Black,
-    error = Red800,
-    onError = Color.White
-)
+const val stronglyDeemphasizedAlpha = 0.6f
+const val slightlyDeemphasizedAlpha = 0.87f
 
-val DarkThemeColors = darkColors(
-    primary = Purple300,
-    primaryVariant = Purple600,
-    onPrimary = Color.Black,
-    secondary = Color.Black,
-    onSecondary = Color.White,
-    background = Color.Black,
-    onBackground = Color.White,
-    surface = Color.Black,
-    onSurface = Color.White,
-    error = Red300,
-    onError = Color.Black
+private val LightColors = lightColorScheme(
+    primary = md_theme_light_primary,
+    onPrimary = md_theme_light_onPrimary,
+    primaryContainer = md_theme_light_primaryContainer,
+    onPrimaryContainer = md_theme_light_onPrimaryContainer,
+    secondary = md_theme_light_secondary,
+    onSecondary = md_theme_light_onSecondary,
+    secondaryContainer = md_theme_light_secondaryContainer,
+    onSecondaryContainer = md_theme_light_onSecondaryContainer,
+    tertiary = md_theme_light_tertiary,
+    onTertiary = md_theme_light_onTertiary,
+    tertiaryContainer = md_theme_light_tertiaryContainer,
+    onTertiaryContainer = md_theme_light_onTertiaryContainer,
+    error = md_theme_light_error,
+    onError = md_theme_light_onError,
+    errorContainer = md_theme_light_errorContainer,
+    onErrorContainer = md_theme_light_onErrorContainer,
+    background = md_theme_light_background,
+    onBackground = md_theme_light_onBackground,
+    surface = md_theme_light_surface,
+    onSurface = md_theme_light_onSurface,
+    surfaceVariant = md_theme_light_surfaceVariant,
+    onSurfaceVariant = md_theme_light_onSurfaceVariant,
+    outline = md_theme_light_outline,
+    inverseSurface = md_theme_light_inverseSurface,
+    inverseOnSurface = md_theme_light_inverseOnSurface,
+    inversePrimary = md_theme_light_inversePrimary,
+    surfaceTint = md_theme_light_surfaceTint,
 )
 
-val Colors.snackbarAction: Color
-    @Composable
-    get() = if (isLight) Purple300 else Purple700
-
-val Colors.progressIndicatorBackground: Color
-    @Composable
-    get() = if (isLight) Color.Black.copy(alpha = 0.12f) else Color.White.copy(alpha = 0.24f)
+private val DarkColors = darkColorScheme(
+    primary = md_theme_dark_primary,
+    onPrimary = md_theme_dark_onPrimary,
+    primaryContainer = md_theme_dark_primaryContainer,
+    onPrimaryContainer = md_theme_dark_onPrimaryContainer,
+    secondary = md_theme_dark_secondary,
+    onSecondary = md_theme_dark_onSecondary,
+    secondaryContainer = md_theme_dark_secondaryContainer,
+    onSecondaryContainer = md_theme_dark_onSecondaryContainer,
+    tertiary = md_theme_dark_tertiary,
+    onTertiary = md_theme_dark_onTertiary,
+    tertiaryContainer = md_theme_dark_tertiaryContainer,
+    onTertiaryContainer = md_theme_dark_onTertiaryContainer,
+    error = md_theme_dark_error,
+    onError = md_theme_dark_onError,
+    errorContainer = md_theme_dark_errorContainer,
+    onErrorContainer = md_theme_dark_onErrorContainer,
+    background = md_theme_dark_background,
+    onBackground = md_theme_dark_onBackground,
+    surface = md_theme_dark_surface,
+    onSurface = md_theme_dark_onSurface,
+    surfaceVariant = md_theme_dark_surfaceVariant,
+    onSurfaceVariant = md_theme_dark_onSurfaceVariant,
+    outline = md_theme_dark_outline,
+    inverseSurface = md_theme_dark_inverseSurface,
+    inverseOnSurface = md_theme_dark_inverseOnSurface,
+    inversePrimary = md_theme_dark_inversePrimary,
+    surfaceTint = md_theme_dark_surfaceTint,
+)
 
 @Composable
-fun JetsurveyTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable() () -> Unit) {
-    val colors = if (darkTheme) {
-        DarkThemeColors
+fun JetsurveyTheme(
+    useDarkTheme: Boolean = isSystemInDarkTheme(),
+    content: @Composable () -> Unit
+) {
+    val colors = if (!useDarkTheme) {
+        LightColors
     } else {
-        LightThemeColors
+        DarkColors
     }
+
+    val systemUiController = rememberSystemUiController()
+    DisposableEffect(systemUiController, useDarkTheme) {
+        systemUiController.setSystemBarsColor(
+            color = colors.surface,
+            darkIcons = !useDarkTheme
+        )
+
+        onDispose { }
+    }
+
     MaterialTheme(
-        colors = colors,
-        typography = Typography,
+        colorScheme = colors,
         shapes = Shapes,
-        content = content
+        typography = Typography,
+        content = content,
     )
 }
diff --git a/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/theme/Typography.kt b/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/theme/Typography.kt
index b8a994390..9bf9b3ccf 100644
--- a/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/theme/Typography.kt
+++ b/Jetsurvey/app/src/main/java/com/example/compose/jetsurvey/theme/Typography.kt
@@ -16,7 +16,7 @@
 
 package com.example.compose.jetsurvey.theme
 
-import androidx.compose.material.Typography
+import androidx.compose.material3.Typography
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.Font
 import androidx.compose.ui.text.font.FontFamily
@@ -33,70 +33,137 @@ val MontserratFontFamily = FontFamily(
 )
 
 val Typography = Typography(
-    defaultFontFamily = MontserratFontFamily,
-    h1 = TextStyle(
-        fontWeight = FontWeight.W300,
-        fontSize = 96.sp,
-        letterSpacing = (-1.5).sp
+    // Display Large - Montserrat 57/64 . -0.25px
+    displayLarge = TextStyle(
+        fontFamily = MontserratFontFamily,
+        fontWeight = FontWeight.W400,
+        fontSize = 57.sp,
+        lineHeight = 64.sp,
+        letterSpacing = (-0.25).sp,
     ),
-    h2 = TextStyle(
-        fontWeight = FontWeight.W300,
-        fontSize = 60.sp,
-        letterSpacing = (-0.5).sp
+
+    // Display Medium - Montserrat 45/52 . 0px
+    displayMedium = TextStyle(
+        fontFamily = MontserratFontFamily,
+        fontWeight = FontWeight.W400,
+        fontSize = 45.sp,
+        lineHeight = 52.sp,
+        letterSpacing = 0.sp,
     ),
-    h3 = TextStyle(
-        fontWeight = FontWeight.Normal,
-        fontSize = 48.sp,
-        letterSpacing = 0.sp
+
+    // Display Small - Montserrat 36/44 . 0px
+    displaySmall = TextStyle(
+        fontFamily = MontserratFontFamily,
+        fontWeight = FontWeight.W400,
+        fontSize = 36.sp,
+        lineHeight = 44.sp,
+        letterSpacing = 0.sp,
     ),
-    h4 = TextStyle(
-        fontWeight = FontWeight.W600,
-        fontSize = 30.sp,
-        letterSpacing = 0.sp
+
+    // Headline Large - Montserrat 32/40 . 0px
+    headlineLarge = TextStyle(
+        fontFamily = MontserratFontFamily,
+        fontWeight = FontWeight.W400,
+        fontSize = 32.sp,
+        lineHeight = 40.sp,
+        letterSpacing = 0.sp,
     ),
-    h5 = TextStyle(
-        fontWeight = FontWeight.W600,
+
+    // Headline Medium - Montserrat 28/36 . 0px
+    headlineMedium = TextStyle(
+        fontFamily = MontserratFontFamily,
+        fontWeight = FontWeight.W400,
+        fontSize = 28.sp,
+        lineHeight = 36.sp,
+        letterSpacing = 0.sp,
+    ),
+
+    // Headline Small - Montserrat 24/32 . 0px
+    headlineSmall = TextStyle(
+        fontFamily = MontserratFontFamily,
+        fontWeight = FontWeight.W400,
         fontSize = 24.sp,
-        letterSpacing = 0.sp
+        lineHeight = 32.sp,
+        letterSpacing = 0.sp,
     ),
-    h6 = TextStyle(
-        fontWeight = FontWeight.W600,
-        fontSize = 20.sp,
-        letterSpacing = 0.sp
+
+    // Title Large - Montserrat 22/28 . 0px
+    titleLarge = TextStyle(
+        fontFamily = MontserratFontFamily,
+        fontWeight = FontWeight.W400,
+        fontSize = 22.sp,
+        lineHeight = 28.sp,
+        letterSpacing = 0.sp,
     ),
-    subtitle1 = TextStyle(
-        fontWeight = FontWeight.W600,
+
+    // Title Medium - Montserrat 16/24 . 0.15px
+    titleMedium = TextStyle(
+        fontFamily = MontserratFontFamily,
+        fontWeight = FontWeight.W500,
         fontSize = 16.sp,
-        letterSpacing = 0.15.sp
+        lineHeight = 24.sp,
+        letterSpacing = 0.15.sp,
     ),
-    subtitle2 = TextStyle(
+
+    // Title Small - Montserrat 14/20 . 0.1px
+    titleSmall = TextStyle(
+        fontFamily = MontserratFontFamily,
         fontWeight = FontWeight.W500,
         fontSize = 14.sp,
-        letterSpacing = 0.1.sp
+        lineHeight = 20.sp,
+        letterSpacing = 0.1.sp,
     ),
-    body1 = TextStyle(
+
+    // Label Large - Montserrat 14/20 . 0.1px
+    labelLarge = TextStyle(
+        fontFamily = MontserratFontFamily,
         fontWeight = FontWeight.W500,
-        fontSize = 16.sp,
-        letterSpacing = 0.5.sp
+        fontSize = 14.sp,
+        lineHeight = 20.sp,
+        letterSpacing = 0.1.sp,
     ),
-    body2 = TextStyle(
+
+    // Label Medium - Montserrat 12/16 . 0.5px
+    labelMedium = TextStyle(
+        fontFamily = MontserratFontFamily,
         fontWeight = FontWeight.W500,
-        fontSize = 14.sp,
-        letterSpacing = 0.25.sp
+        fontSize = 12.sp,
+        lineHeight = 16.sp,
+        letterSpacing = 0.5.sp,
     ),
-    button = TextStyle(
-        fontWeight = FontWeight.W600,
+
+    // Label Small - Montserrat 11/16 . 0.5px
+    labelSmall = TextStyle(
+        fontFamily = MontserratFontFamily,
+        fontWeight = FontWeight.W500,
+        fontSize = 11.sp,
+        lineHeight = 16.sp,
+        letterSpacing = 0.5.sp,
+    ),
+
+    // Body Large - Montserrat 16/24 . 0.5px
+    bodyLarge = TextStyle(
+        fontFamily = MontserratFontFamily,
+        fontWeight = FontWeight.W400,
+        fontSize = 16.sp,
+        lineHeight = 24.sp,
+        letterSpacing = 0.5.sp,
+    ),
+
+    // Body Medium - Montserrat 14/20 . 0.25px
+    bodyMedium = TextStyle(
+        fontFamily = MontserratFontFamily,
+        fontWeight = FontWeight.W400,
         fontSize = 14.sp,
-        letterSpacing = 0.25.sp
+        lineHeight = 20.sp,
+        letterSpacing = 0.25.sp,
     ),
-    caption = TextStyle(
-        fontWeight = FontWeight.W500,
+    // Body Small - Montserrat 12/16 . 0.4px
+    bodySmall = TextStyle(
+        fontFamily = MontserratFontFamily,
+        fontWeight = FontWeight.W400,
         fontSize = 12.sp,
-        letterSpacing = 0.4.sp
+        lineHeight = 16.sp,
+        letterSpacing = 0.4.sp,
     ),
-    overline = TextStyle(
-        fontWeight = FontWeight.W600,
-        fontSize = 12.sp,
-        letterSpacing = 1.sp
-    )
 )
diff --git a/Jetsurvey/app/src/main/res/values-night/colors.xml b/Jetsurvey/app/src/main/res/values-night/colors.xml
deleted file mode 100644
index affcce749..000000000
--- a/Jetsurvey/app/src/main/res/values-night/colors.xml
+++ /dev/null
@@ -1,19 +0,0 @@
-<!--
-  ~   Copyright 2020 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.
-  ~
-  -->
-<resources>
-    <color name="status_bar_color">#000000</color>
-</resources>
diff --git a/Jetsurvey/app/src/main/res/values/colors.xml b/Jetsurvey/app/src/main/res/values/colors.xml
deleted file mode 100644
index 4a9aadb24..000000000
--- a/Jetsurvey/app/src/main/res/values/colors.xml
+++ /dev/null
@@ -1,19 +0,0 @@
-<!--
-  ~   Copyright 2020 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.
-  ~
-  -->
-<resources>
-    <color name="status_bar_color">#EFEFEF</color>
-</resources>
diff --git a/Jetsurvey/app/src/main/res/values/strings.xml b/Jetsurvey/app/src/main/res/values/strings.xml
index 0d75e26c9..527347833 100644
--- a/Jetsurvey/app/src/main/res/values/strings.xml
+++ b/Jetsurvey/app/src/main/res/values/strings.xml
@@ -21,19 +21,19 @@
     <string name="password">Password</string>
     <string name="confirm_password">Confirm password</string>
     <string name="sign_in">Sign in</string>
-    <string name="sign_in_guest">SIGN IN AS GUEST</string>
+    <string name="sign_in_guest">Sign in as guest</string>
     <string name="sign_in_create_account">Sign in or create an account</string>
     <string name="or">or</string>
-    <string name="forgot_password">FORGOT PASSWORD?</string>
-    <string name="user_continue">CONTINUE</string>
-    <string name="create_account">CREATE ACCOUNT</string>
+    <string name="forgot_password">Forgot password?</string>
+    <string name="user_continue">Continue</string>
+    <string name="create_account">Create account</string>
     <string name="terms_and_conditions">By continuing, you agree to our Terms of Service. We’ll
         handle your data according to our Privacy Policy.</string>
     <string name="feature_not_available">Feature not available</string>
-    <string name="dismiss">DISMISS</string>
-    <string name="next">NEXT</string>
-    <string name="previous">PREVIOUS</string>
-    <string name="done">DONE</string>
+    <string name="dismiss">Dismiss</string>
+    <string name="next">Next</string>
+    <string name="previous">Previous</string>
+    <string name="done">Done</string>
     <string name="back">Back</string>
     <string name="close">Close</string>
     <string name="show_password">Show password</string>
diff --git a/Jetsurvey/app/src/main/res/values/themes.xml b/Jetsurvey/app/src/main/res/values/themes.xml
index 2d2ffc9a6..99eeb7c1f 100644
--- a/Jetsurvey/app/src/main/res/values/themes.xml
+++ b/Jetsurvey/app/src/main/res/values/themes.xml
@@ -16,8 +16,8 @@
   -->
 <resources>
     <!-- Base application theme. -->
-    <style name="Theme.Jetsurvey" parent="Theme.MaterialComponents.DayNight.NoActionBar">
-        <item name="android:statusBarColor">@color/status_bar_color</item>
+    <style name="Theme.Jetsurvey" parent="Theme.Material3.DayNight.NoActionBar">
+        <item name="android:statusBarColor">@android:color/transparent</item>
         <item name="android:navigationBarColor">@android:color/transparent</item>
         <item name="android:windowBackground">?attr/colorSurface</item>
     </style>
diff --git a/Jetsurvey/screenshots/dark_signin.png b/Jetsurvey/screenshots/dark_signin.png
deleted file mode 100644
index 7d3857712..000000000
Binary files a/Jetsurvey/screenshots/dark_signin.png and /dev/null differ
diff --git a/Jetsurvey/screenshots/light_signin.png b/Jetsurvey/screenshots/light_signin.png
deleted file mode 100644
index 60c4aad0e..000000000
Binary files a/Jetsurvey/screenshots/light_signin.png and /dev/null differ
diff --git a/Jetsurvey/screenshots/signup_error.png b/Jetsurvey/screenshots/signup_error.png
deleted file mode 100644
index 0b4133751..000000000
Binary files a/Jetsurvey/screenshots/signup_error.png and /dev/null differ
diff --git a/Jetsurvey/screenshots/survey.gif b/Jetsurvey/screenshots/survey.gif
index af2911ca9..ddc7736ce 100644
Binary files a/Jetsurvey/screenshots/survey.gif and b/Jetsurvey/screenshots/survey.gif differ
diff --git a/Jetsurvey/screenshots/welcome.png b/Jetsurvey/screenshots/welcome.png
deleted file mode 100644
index f96aaf2f9..000000000
Binary files a/Jetsurvey/screenshots/welcome.png and /dev/null differ
diff --git a/readme/screenshots/Jetsurvey.png b/readme/screenshots/Jetsurvey.png
index 2ba126a80..4f4adba84 100644
Binary files a/readme/screenshots/Jetsurvey.png and b/readme/screenshots/Jetsurvey.png differ