diff --git a/AccessibilityCodelab/app/build.gradle b/AccessibilityCodelab/app/build.gradle
index cf1a5fe9a..5bbf4642a 100644
--- a/AccessibilityCodelab/app/build.gradle
+++ b/AccessibilityCodelab/app/build.gradle
@@ -95,7 +95,8 @@ dependencies {
     implementation "androidx.compose.runtime:runtime"
     implementation "androidx.compose.ui:ui"
     implementation "androidx.compose.foundation:foundation-layout"
-    implementation "androidx.compose.material:material"
+//    implementation "androidx.compose.material:material"
+    implementation "androidx.compose.material3:material3"
     implementation "androidx.compose.material:material-icons-extended"
     implementation "androidx.compose.foundation:foundation"
     implementation "androidx.compose.animation:animation"
diff --git a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/AppDrawer.kt b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/AppDrawer.kt
index a508cadf8..492992c5b 100644
--- a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/AppDrawer.kt
+++ b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/AppDrawer.kt
@@ -18,6 +18,7 @@ package com.example.jetnews.ui
 
 import android.content.res.Configuration.UI_MODE_NIGHT_YES
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -27,11 +28,11 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
-import androidx.compose.material.Divider
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Surface
-import androidx.compose.material.Text
-import androidx.compose.material.TextButton
+import androidx.compose.material3.Divider
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Home
 import androidx.compose.material.icons.filled.ListAlt
@@ -54,11 +55,10 @@ fun AppDrawer(
     navigateToInterests: () -> Unit,
     closeDrawer: () -> Unit
 ) {
-
     Column(modifier = Modifier.fillMaxSize()) {
         Spacer(Modifier.height(24.dp))
         JetNewsLogo(Modifier.padding(16.dp))
-        Divider(color = MaterialTheme.colors.onSurface.copy(alpha = .2f))
+        Divider(color = MaterialTheme.colorScheme.onSurface.copy(alpha = .2f))
         DrawerButton(
             icon = Icons.Filled.Home,
             label = "Home",
@@ -87,13 +87,13 @@ private fun JetNewsLogo(modifier: Modifier = Modifier) {
         Image(
             painter = painterResource(R.drawable.ic_jetnews_logo),
             contentDescription = null,
-            colorFilter = ColorFilter.tint(MaterialTheme.colors.primary)
+            colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.primary)
         )
         Spacer(Modifier.width(8.dp))
         Image(
             painter = painterResource(R.drawable.ic_jetnews_wordmark),
             contentDescription = null,
-            colorFilter = ColorFilter.tint(MaterialTheme.colors.onSurface)
+            colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.onSurface)
         )
     }
 }
@@ -106,7 +106,7 @@ private fun DrawerButton(
     action: () -> Unit,
     modifier: Modifier = Modifier
 ) {
-    val colors = MaterialTheme.colors
+    val colors = MaterialTheme.colorScheme
     val imageAlpha = if (isSelected) {
         1f
     } else {
@@ -149,7 +149,7 @@ private fun DrawerButton(
                 Spacer(Modifier.width(16.dp))
                 Text(
                     text = label,
-                    style = MaterialTheme.typography.body2,
+                    style = MaterialTheme.typography.bodyMedium,
                     color = textIconColor
                 )
             }
diff --git a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/JetnewsApp.kt b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/JetnewsApp.kt
index 2df393c9a..ce8fe2fd6 100644
--- a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/JetnewsApp.kt
+++ b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/JetnewsApp.kt
@@ -17,13 +17,20 @@
 package com.example.jetnews.ui
 
 import android.annotation.SuppressLint
-import androidx.compose.material.Scaffold
-import androidx.compose.material.rememberScaffoldState
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.DrawerValue
+import androidx.compose.material3.ModalDrawerSheet
+import androidx.compose.material3.ModalNavigationDrawer
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.rememberDrawerState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.SideEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
 import androidx.navigation.compose.currentBackStackEntryAsState
 import androidx.navigation.compose.rememberNavController
 import com.example.jetnews.data.AppContainer
@@ -31,7 +38,7 @@ import com.example.jetnews.ui.theme.JetnewsTheme
 import com.google.accompanist.systemuicontroller.rememberSystemUiController
 import kotlinx.coroutines.launch
 
-@SuppressLint("UnusedMaterialScaffoldPaddingParameter")
+@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
 @Composable
 fun JetnewsApp(
     appContainer: AppContainer
@@ -44,29 +51,34 @@ fun JetnewsApp(
 
         val navController = rememberNavController()
         val coroutineScope = rememberCoroutineScope()
-        // This top level scaffold contains the app drawer, which needs to be accessible
-        // from multiple screens. An event to open the drawer is passed down to each
-        // screen that needs it.
-        val scaffoldState = rememberScaffoldState()
 
         val navBackStackEntry by navController.currentBackStackEntryAsState()
         val currentRoute = navBackStackEntry?.destination?.route ?: MainDestinations.HOME_ROUTE
-        Scaffold(
-            scaffoldState = scaffoldState,
+
+        val drawerState = rememberDrawerState(DrawerValue.Closed)
+        val scope = rememberCoroutineScope()
+
+        ModalNavigationDrawer(
+            drawerState = drawerState,
             drawerContent = {
-                AppDrawer(
-                    currentRoute = currentRoute,
-                    navigateToHome = { navController.navigate(MainDestinations.HOME_ROUTE) },
-                    navigateToInterests = { navController.navigate(MainDestinations.INTERESTS_ROUTE) },
-                    closeDrawer = { coroutineScope.launch { scaffoldState.drawerState.close() } }
-                )
+                ModalDrawerSheet(modifier = Modifier.width(300.dp), windowInsets = WindowInsets(0.dp, 0.dp, 0.dp, 0.dp)) {
+                    AppDrawer(
+                        currentRoute = currentRoute,
+                        navigateToHome = { navController.navigate(MainDestinations.HOME_ROUTE) },
+                        navigateToInterests = { navController.navigate(MainDestinations.INTERESTS_ROUTE) },
+                        closeDrawer = { coroutineScope.launch { drawerState.close() } }
+                    )
+                }
+            },
+            content = {
+                Scaffold {
+                    JetnewsNavGraph(
+                        appContainer = appContainer,
+                        navController = navController,
+                        drawerState = drawerState
+                    )
+                }
             }
-        ) {
-            JetnewsNavGraph(
-                appContainer = appContainer,
-                navController = navController,
-                scaffoldState = scaffoldState
-            )
-        }
+        )
     }
 }
diff --git a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/JetnewsNavGraph.kt b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/JetnewsNavGraph.kt
index 0fef3ef46..43d632ebc 100644
--- a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/JetnewsNavGraph.kt
+++ b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/JetnewsNavGraph.kt
@@ -16,11 +16,13 @@
 
 package com.example.jetnews.ui
 
-import androidx.compose.material.ScaffoldState
-import androidx.compose.material.rememberScaffoldState
+import androidx.compose.material3.DrawerState
+import androidx.compose.material3.DrawerValue
+import androidx.compose.material3.rememberDrawerState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Modifier
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
@@ -46,12 +48,12 @@ object MainDestinations {
 fun JetnewsNavGraph(
     appContainer: AppContainer,
     navController: NavHostController = rememberNavController(),
-    scaffoldState: ScaffoldState = rememberScaffoldState(),
+    drawerState: DrawerState = rememberDrawerState(DrawerValue.Closed),
     startDestination: String = MainDestinations.HOME_ROUTE
 ) {
     val actions = remember(navController) { MainActions(navController) }
     val coroutineScope = rememberCoroutineScope()
-    val openDrawer: () -> Unit = { coroutineScope.launch { scaffoldState.drawerState.open() } }
+    val openDrawer: () -> Unit = { coroutineScope.launch { drawerState.open() } }
 
     NavHost(
         navController = navController,
diff --git a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/article/ArticleScreen.kt b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/article/ArticleScreen.kt
index 014e55877..bc62664eb 100644
--- a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/article/ArticleScreen.kt
+++ b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/article/ArticleScreen.kt
@@ -17,16 +17,15 @@
 package com.example.jetnews.ui.article
 
 import android.content.res.Configuration.UI_MODE_NIGHT_YES
-import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material.AlertDialog
-import androidx.compose.material.Icon
-import androidx.compose.material.IconButton
-import androidx.compose.material.LocalContentColor
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Scaffold
-import androidx.compose.material.Text
-import androidx.compose.material.TextButton
+import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.LocalContentColor
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.runtime.Composable
@@ -89,7 +88,7 @@ fun ArticleScreen(
                 title = {
                     Text(
                         text = "Published in: ${post.publication?.name}",
-                        style = MaterialTheme.typography.subtitle2,
+                        style = MaterialTheme.typography.titleSmall,
                         color = LocalContentColor.current
                     )
                 },
@@ -127,7 +126,7 @@ private fun FunctionalityNotAvailablePopup(onDismiss: () -> Unit) {
         text = {
             Text(
                 text = "Functionality not available \uD83D\uDE48",
-                style = MaterialTheme.typography.body2
+                style = MaterialTheme.typography.bodyMedium
             )
         },
         confirmButton = {
diff --git a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/article/PostContent.kt b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/article/PostContent.kt
index f529d259d..0959c2d2b 100644
--- a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/article/PostContent.kt
+++ b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/article/PostContent.kt
@@ -32,14 +32,12 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material.Colors
-import androidx.compose.material.ContentAlpha
-import androidx.compose.material.LocalContentAlpha
-import androidx.compose.material.LocalContentColor
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Surface
-import androidx.compose.material.Text
-import androidx.compose.material.Typography
+import androidx.compose.material3.ColorScheme
+import androidx.compose.material3.LocalContentColor
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.material3.Typography
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.AccountCircle
 import androidx.compose.runtime.Composable
@@ -86,15 +84,15 @@ fun PostContent(post: Post, modifier: Modifier = Modifier) {
             PostHeaderImage(post)
         }
         item {
-            Text(text = post.title, style = MaterialTheme.typography.h4)
+            Text(text = post.title, style = MaterialTheme.typography.headlineMedium)
             Spacer(Modifier.height(8.dp))
         }
         post.subtitle?.let { subtitle ->
             item {
-                CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
+                CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurfaceVariant) {
                     Text(
                         text = subtitle,
-                        style = MaterialTheme.typography.body2,
+                        style = MaterialTheme.typography.bodyMedium,
                         lineHeight = 20.sp
                     )
                 }
@@ -144,14 +142,14 @@ private fun PostMetadata(metadata: Metadata) {
         Column {
             Text(
                 text = metadata.author.name,
-                style = typography.caption,
+                style = typography.bodySmall,
                 modifier = Modifier.padding(top = 4.dp)
             )
 
-            CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
+            CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurfaceVariant) {
                 Text(
                     text = "${metadata.date} • ${metadata.readTimeMinutes} min read",
-                    style = typography.caption
+                    style = typography.bodySmall
                 )
             }
         }
@@ -165,7 +163,7 @@ private fun Paragraph(paragraph: Paragraph) {
     val annotatedString = paragraphToAnnotatedString(
         paragraph,
         MaterialTheme.typography,
-        MaterialTheme.colors.codeBlockBackground
+        MaterialTheme.colorScheme.codeBlockBackground
     )
     Box(modifier = Modifier.padding(bottom = trailingPadding)) {
         when (paragraph.type) {
@@ -202,7 +200,7 @@ private fun CodeBlockParagraph(
     paragraphStyle: ParagraphStyle
 ) {
     Surface(
-        color = MaterialTheme.colors.codeBlockBackground,
+        color = MaterialTheme.colorScheme.codeBlockBackground,
         shape = MaterialTheme.shapes.small,
         modifier = Modifier.fillMaxWidth()
     ) {
@@ -252,29 +250,29 @@ private data class ParagraphStyling(
 @Composable
 private fun ParagraphType.getTextAndParagraphStyle(): ParagraphStyling {
     val typography = MaterialTheme.typography
-    var textStyle: TextStyle = typography.body1
+    var textStyle: TextStyle = typography.bodyLarge
     var paragraphStyle = ParagraphStyle()
     var trailingPadding = 24.dp
 
     when (this) {
-        ParagraphType.Caption -> textStyle = typography.body1
-        ParagraphType.Title -> textStyle = typography.h4
+        ParagraphType.Caption -> textStyle = typography.bodyLarge
+        ParagraphType.Title -> textStyle = typography.headlineMedium
         ParagraphType.Subhead -> {
-            textStyle = typography.h6
+            textStyle = typography.titleLarge
             trailingPadding = 16.dp
         }
         ParagraphType.Text -> {
-            textStyle = typography.body1.copy(lineHeight = 28.sp)
+            textStyle = typography.bodyLarge.copy(lineHeight = 28.sp)
             paragraphStyle = paragraphStyle.copy(lineHeight = 28.sp)
         }
         ParagraphType.Header -> {
-            textStyle = typography.h5
+            textStyle = typography.headlineSmall
             trailingPadding = 16.dp
         }
-        ParagraphType.CodeBlock -> textStyle = typography.body1.copy(
+        ParagraphType.CodeBlock -> textStyle = typography.bodyLarge.copy(
             fontFamily = FontFamily.Monospace
         )
-        ParagraphType.Quote -> textStyle = typography.body1
+        ParagraphType.Quote -> textStyle = typography.bodyLarge
         ParagraphType.Bullet -> {
             paragraphStyle = ParagraphStyle(textIndent = TextIndent(firstLine = 8.sp))
         }
@@ -303,28 +301,28 @@ fun Markup.toAnnotatedStringItem(
     return when (this.type) {
         MarkupType.Italic -> {
             AnnotatedString.Range(
-                typography.body1.copy(fontStyle = FontStyle.Italic).toSpanStyle(),
+                typography.bodyLarge.copy(fontStyle = FontStyle.Italic).toSpanStyle(),
                 start,
                 end
             )
         }
         MarkupType.Link -> {
             AnnotatedString.Range(
-                typography.body1.copy(textDecoration = TextDecoration.Underline).toSpanStyle(),
+                typography.bodyLarge.copy(textDecoration = TextDecoration.Underline).toSpanStyle(),
                 start,
                 end
             )
         }
         MarkupType.Bold -> {
             AnnotatedString.Range(
-                typography.body1.copy(fontWeight = FontWeight.Bold).toSpanStyle(),
+                typography.bodyLarge.copy(fontWeight = FontWeight.Bold).toSpanStyle(),
                 start,
                 end
             )
         }
         MarkupType.Code -> {
             AnnotatedString.Range(
-                typography.body1
+                typography.bodyLarge
                     .copy(
                         background = codeBlockBackground,
                         fontFamily = FontFamily.Monospace
@@ -336,7 +334,7 @@ fun Markup.toAnnotatedStringItem(
     }
 }
 
-private val Colors.codeBlockBackground: Color
+private val ColorScheme.codeBlockBackground: Color
     get() = onSurface.copy(alpha = .15f)
 
 @Preview("Post content")
diff --git a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/components/InsetAwareTopAppBar.kt b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/components/InsetAwareTopAppBar.kt
index e42995198..24c27928b 100644
--- a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/components/InsetAwareTopAppBar.kt
+++ b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/components/InsetAwareTopAppBar.kt
@@ -17,13 +17,12 @@
 package com.example.jetnews.ui.components
 
 import androidx.compose.foundation.layout.RowScope
-import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.statusBarsPadding
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Surface
-import androidx.compose.material.TopAppBar
-import androidx.compose.material.contentColorFor
-import androidx.compose.material.primarySurface
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -34,28 +33,31 @@ import androidx.compose.ui.unit.dp
  * A wrapper around [TopAppBar] which uses [Modifier.statusBarsPadding] to shift the app bar's
  * contents down, but still draws the background behind the status bar too.
  */
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun InsetAwareTopAppBar(
     title: @Composable () -> Unit,
     modifier: Modifier = Modifier,
-    navigationIcon: @Composable (() -> Unit)? = null,
+    navigationIcon: @Composable (() -> Unit),
     actions: @Composable RowScope.() -> Unit = {},
-    backgroundColor: Color = MaterialTheme.colors.primarySurface,
-    contentColor: Color = contentColorFor(backgroundColor),
+    backgroundColor: Color = MaterialTheme.colorScheme.surface,
     elevation: Dp = 4.dp
 ) {
     Surface(
         color = backgroundColor,
-        elevation = elevation,
+        shadowElevation = elevation,
+        tonalElevation = elevation,
         modifier = modifier
     ) {
         TopAppBar(
             title = title,
             navigationIcon = navigationIcon,
             actions = actions,
-            backgroundColor = Color.Transparent,
-            contentColor = contentColor,
-            elevation = 0.dp,
+            colors = TopAppBarDefaults.topAppBarColors().copy(
+                containerColor = Color.Transparent,
+                titleContentColor = MaterialTheme.colorScheme.onPrimary,
+                navigationIconContentColor = MaterialTheme.colorScheme.onPrimary
+            ),
             modifier = Modifier.statusBarsPadding()
         )
     }
diff --git a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/home/HomeScreen.kt b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/home/HomeScreen.kt
index 1e1a2914a..fdd1c46e4 100644
--- a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/home/HomeScreen.kt
+++ b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/home/HomeScreen.kt
@@ -29,15 +29,12 @@ import androidx.compose.foundation.layout.systemBars
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.items
-import androidx.compose.material.Divider
-import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material.Icon
-import androidx.compose.material.IconButton
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Scaffold
-import androidx.compose.material.ScaffoldState
-import androidx.compose.material.Text
-import androidx.compose.material.rememberScaffoldState
+import androidx.compose.material3.Divider
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
@@ -60,20 +57,17 @@ import kotlinx.coroutines.launch
  * @param postsRepository data source for this screen
  * @param navigateToArticle (event) request navigation to Article screen
  * @param openDrawer (event) request opening the app drawer
- * @param scaffoldState (state) state for the [Scaffold] component on this screen
  */
 @Composable
 fun HomeScreen(
     postsRepository: PostsRepository,
     navigateToArticle: (String) -> Unit,
     openDrawer: () -> Unit,
-    scaffoldState: ScaffoldState = rememberScaffoldState()
 ) {
     HomeScreen(
         posts = postsRepository.getPosts(),
         navigateToArticle = navigateToArticle,
         openDrawer = openDrawer,
-        scaffoldState = scaffoldState
     )
 }
 
@@ -87,19 +81,15 @@ fun HomeScreen(
  * @param onToggleFavorite (event) toggles favorite for a post
  * @param navigateToArticle (event) request navigation to Article screen
  * @param openDrawer (event) request opening the app drawer
- * @param scaffoldState (state) state for the [Scaffold] component on this screen
  */
-@OptIn(ExperimentalMaterialApi::class)
 @Composable
 fun HomeScreen(
     posts: List<Post>,
     navigateToArticle: (String) -> Unit,
     openDrawer: () -> Unit,
-    scaffoldState: ScaffoldState
 ) {
     val coroutineScope = rememberCoroutineScope()
     Scaffold(
-        scaffoldState = scaffoldState,
         topBar = {
             val title = stringResource(id = R.string.app_name)
             InsetAwareTopAppBar(
@@ -168,7 +158,7 @@ private fun PostListPopularSection(
         Text(
             modifier = Modifier.padding(16.dp),
             text = stringResource(id = R.string.home_popular_section_title),
-            style = MaterialTheme.typography.subtitle1
+            style = MaterialTheme.typography.titleMedium
         )
 
         LazyRow(contentPadding = PaddingValues(end = 16.dp)) {
@@ -191,7 +181,7 @@ private fun PostListPopularSection(
 private fun PostListDivider() {
     Divider(
         modifier = Modifier.padding(horizontal = 14.dp),
-        color = MaterialTheme.colors.onSurface.copy(alpha = 0.08f)
+        color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.08f)
     )
 }
 
@@ -216,7 +206,6 @@ fun PreviewHomeScreen() {
             posts = PostsRepository().getPosts(),
             navigateToArticle = { /*TODO*/ },
             openDrawer = { /*TODO*/ },
-            scaffoldState = rememberScaffoldState()
         )
     }
 }
diff --git a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/home/PostCards.kt b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/home/PostCards.kt
index 9c9722e81..44ed5be65 100644
--- a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/home/PostCards.kt
+++ b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/home/PostCards.kt
@@ -25,17 +25,17 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.material.AlertDialog
-import androidx.compose.material.Card
-import androidx.compose.material.ContentAlpha
-import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material.Icon
-import androidx.compose.material.LocalContentAlpha
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Surface
-import androidx.compose.material.Text
+import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.Card
+import androidx.compose.material3.Icon
+import androidx.compose.material3.LocalContentColor
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Close
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.CardElevation
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.getValue
@@ -75,10 +75,10 @@ fun PostCardHistory(post: Post, navigateToArticle: (String) -> Unit) {
                 .weight(1f)
                 .padding(top = 16.dp, bottom = 16.dp)
         ) {
-            Text(post.title, style = MaterialTheme.typography.subtitle1)
+            Text(post.title, style = MaterialTheme.typography.titleMedium)
             Row(Modifier.padding(top = 4.dp)) {
-                CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
-                    val textStyle = MaterialTheme.typography.body2
+                CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurfaceVariant) {
+                    val textStyle = MaterialTheme.typography.bodyMedium
                     Text(
                         text = post.metadata.author.name,
                         style = textStyle
@@ -90,7 +90,7 @@ fun PostCardHistory(post: Post, navigateToArticle: (String) -> Unit) {
                 }
             }
         }
-        CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
+        CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurfaceVariant) {
             Icon(
                 imageVector = Icons.Default.Close,
                 contentDescription = stringResource(R.string.cd_show_fewer),
@@ -107,20 +107,20 @@ fun PostCardHistory(post: Post, navigateToArticle: (String) -> Unit) {
             title = {
                 Text(
                     text = stringResource(id = R.string.fewer_stories),
-                    style = MaterialTheme.typography.h6
+                    style = MaterialTheme.typography.titleLarge
                 )
             },
             text = {
                 Text(
                     text = stringResource(id = R.string.fewer_stories_content),
-                    style = MaterialTheme.typography.body1
+                    style = MaterialTheme.typography.bodyLarge
                 )
             },
             confirmButton = {
                 Text(
                     text = stringResource(id = R.string.agree),
-                    style = MaterialTheme.typography.button,
-                    color = MaterialTheme.colors.primary,
+                    style = MaterialTheme.typography.labelLarge,
+                    color = MaterialTheme.colorScheme.primary,
                     modifier = Modifier
                         .padding(15.dp)
                         .clickable { openDialog = false }
@@ -130,7 +130,6 @@ fun PostCardHistory(post: Post, navigateToArticle: (String) -> Unit) {
     }
 }
 
-@OptIn(ExperimentalMaterialApi::class)
 @Composable
 fun PostCardPopular(
     post: Post,
@@ -138,9 +137,11 @@ fun PostCardPopular(
     modifier: Modifier = Modifier
 ) {
     Card(
+        colors = CardDefaults.cardColors(),
         shape = MaterialTheme.shapes.medium,
         modifier = modifier.size(280.dp, 240.dp),
-        onClick = { navigateToArticle(post.id) }
+        onClick = { navigateToArticle(post.id) },
+        elevation = CardDefaults.elevatedCardElevation()
     ) {
         Column {
 
@@ -156,7 +157,7 @@ fun PostCardPopular(
             Column(modifier = Modifier.padding(16.dp)) {
                 Text(
                     text = post.title,
-                    style = MaterialTheme.typography.h6,
+                    style = MaterialTheme.typography.titleLarge,
                     maxLines = 2,
                     overflow = TextOverflow.Ellipsis
                 )
@@ -164,7 +165,7 @@ fun PostCardPopular(
                     text = post.metadata.author.name,
                     maxLines = 1,
                     overflow = TextOverflow.Ellipsis,
-                    style = MaterialTheme.typography.body2
+                    style = MaterialTheme.typography.bodyMedium
                 )
 
                 Text(
@@ -175,7 +176,7 @@ fun PostCardPopular(
                             post.metadata.readTimeMinutes
                         )
                     ),
-                    style = MaterialTheme.typography.body2
+                    style = MaterialTheme.typography.bodyMedium
                 )
             }
         }
diff --git a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/interests/InterestsScreen.kt b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/interests/InterestsScreen.kt
index 62d819164..0145b92df 100644
--- a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/interests/InterestsScreen.kt
+++ b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/interests/InterestsScreen.kt
@@ -25,15 +25,13 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.Checkbox
-import androidx.compose.material.Divider
-import androidx.compose.material.Icon
-import androidx.compose.material.IconButton
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Scaffold
-import androidx.compose.material.ScaffoldState
-import androidx.compose.material.Text
-import androidx.compose.material.rememberScaffoldState
+import androidx.compose.material3.Checkbox
+import androidx.compose.material3.Divider
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
@@ -59,14 +57,12 @@ import kotlinx.coroutines.launch
  *
  * @param interestsRepository data source for this screen
  * @param openDrawer (event) request opening the app drawer
- * @param scaffoldState (state) state for screen Scaffold
  */
 @Composable
 fun InterestsScreen(
     interestsRepository: InterestsRepository,
     openDrawer: () -> Unit,
     modifier: Modifier = Modifier,
-    scaffoldState: ScaffoldState = rememberScaffoldState()
 ) {
     // Returns a [CoroutineScope] that is scoped to the lifecycle of [InterestsScreen]. When this
     // screen is removed from composition, the scope will be cancelled.
@@ -83,7 +79,6 @@ fun InterestsScreen(
         onTopicSelect = onTopicSelect,
         openDrawer = openDrawer,
         modifier = modifier,
-        scaffoldState = scaffoldState
     )
 }
 
@@ -94,7 +89,6 @@ fun InterestsScreen(
  * @param selectedTopics (state) currently selected topics
  * @param onTopicSelect (event) request a topic selection be changed
  * @param openDrawer (event) request opening the app drawer
- * @param scaffoldState (state) the state for the screen's [Scaffold]
  */
 @Composable
 fun InterestsScreen(
@@ -102,11 +96,9 @@ fun InterestsScreen(
     selectedTopics: Set<TopicSelection>,
     onTopicSelect: (TopicSelection) -> Unit,
     openDrawer: () -> Unit,
-    scaffoldState: ScaffoldState,
     modifier: Modifier = Modifier
 ) {
     Scaffold(
-        scaffoldState = scaffoldState,
         topBar = {
             InsetAwareTopAppBar(
                 title = { Text("Interests") },
@@ -130,7 +122,7 @@ fun InterestsScreen(
                         text = section,
                         modifier = Modifier
                             .padding(16.dp),
-                        style = MaterialTheme.typography.subtitle1
+                        style = MaterialTheme.typography.titleMedium
                     )
                 }
                 items(topics) { topic ->
@@ -172,7 +164,7 @@ private fun TopicItem(itemTitle: String, selected: Boolean, onToggle: () -> Unit
             modifier = Modifier
                 .align(Alignment.CenterVertically)
                 .padding(16.dp),
-            style = MaterialTheme.typography.subtitle1
+            style = MaterialTheme.typography.titleMedium
         )
         Spacer(Modifier.weight(1f))
         Checkbox(
@@ -190,7 +182,7 @@ private fun TopicItem(itemTitle: String, selected: Boolean, onToggle: () -> Unit
 private fun TopicDivider() {
     Divider(
         modifier = Modifier.padding(start = 90.dp),
-        color = MaterialTheme.colors.onSurface.copy(alpha = 0.1f)
+        color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.1f)
     )
 }
 
diff --git a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/theme/Color.kt b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/theme/Color.kt
index 92b4e84bb..ab3714aaa 100644
--- a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/theme/Color.kt
+++ b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/theme/Color.kt
@@ -23,3 +23,5 @@ val Red300 = Color(0xffea6d7e)
 val Red700 = Color(0xffdd0d3c)
 val Red800 = Color(0xffd00036)
 val Red900 = Color(0xffc20029)
+
+val DarkGray200 = Color(0xFF2A2A2A)
diff --git a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/theme/Shape.kt b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/theme/Shape.kt
index 9a5a36823..10c00e956 100644
--- a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/theme/Shape.kt
+++ b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/theme/Shape.kt
@@ -17,7 +17,7 @@
 package com.example.jetnews.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 JetnewsShapes = Shapes(
diff --git a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/theme/Theme.kt b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/theme/Theme.kt
index f0ca9c932..7391789f9 100644
--- a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/theme/Theme.kt
+++ b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/theme/Theme.kt
@@ -17,26 +17,28 @@
 package com.example.jetnews.ui.theme
 
 import androidx.compose.foundation.isSystemInDarkTheme
-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
 
-private val LightThemeColors = lightColors(
+private val LightThemeColors = lightColorScheme(
     primary = Red700,
-    primaryVariant = Red900,
+    primaryContainer = Red900,
+    surface = Red700,
     onPrimary = Color.White,
     secondary = Red700,
-    secondaryVariant = Red900,
+    secondaryContainer = Red900,
     onSecondary = Color.White,
     error = Red800
 )
 
-private val DarkThemeColors = darkColors(
+private val DarkThemeColors = darkColorScheme(
     primary = Red300,
-    primaryVariant = Red700,
-    onPrimary = Color.Black,
+    primaryContainer = Red700,
+    surface = DarkGray200,
+    onPrimary = Color.White,
     secondary = Red300,
     onSecondary = Color.Black,
     error = Red200
@@ -48,7 +50,7 @@ fun JetnewsTheme(
     content: @Composable () -> Unit
 ) {
     MaterialTheme(
-        colors = if (darkTheme) DarkThemeColors else LightThemeColors,
+        colorScheme = if (darkTheme) DarkThemeColors else LightThemeColors,
         typography = JetnewsTypography,
         shapes = JetnewsShapes,
         content = content
diff --git a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/theme/Type.kt b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/theme/Type.kt
index dce5f7faf..155788514 100644
--- a/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/theme/Type.kt
+++ b/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui/theme/Type.kt
@@ -16,7 +16,7 @@
 
 package com.example.jetnews.ui.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
@@ -36,54 +36,62 @@ private val Domine = FontFamily(
 )
 
 val JetnewsTypography = Typography(
-    defaultFontFamily = Montserrat,
-    h4 = TextStyle(
+    headlineMedium = TextStyle(
+        fontFamily = Montserrat,
         fontWeight = FontWeight.SemiBold,
         fontSize = 30.sp,
         letterSpacing = 0.sp
     ),
-    h5 = TextStyle(
+    headlineSmall = TextStyle(
+        fontFamily = Montserrat,
         fontWeight = FontWeight.SemiBold,
         fontSize = 24.sp,
         letterSpacing = 0.sp
     ),
-    h6 = TextStyle(
+    titleLarge = TextStyle(
+        fontFamily = Montserrat,
         fontWeight = FontWeight.SemiBold,
         fontSize = 20.sp,
         letterSpacing = 0.sp
     ),
-    subtitle1 = TextStyle(
+    titleMedium = TextStyle(
+        fontFamily = Montserrat,
         fontWeight = FontWeight.SemiBold,
         fontSize = 16.sp,
         letterSpacing = 0.15.sp
     ),
-    subtitle2 = TextStyle(
+    titleSmall = TextStyle(
+        fontFamily = Montserrat,
         fontWeight = FontWeight.Medium,
         fontSize = 14.sp,
         letterSpacing = 0.1.sp
     ),
-    body1 = TextStyle(
+    bodyLarge = TextStyle(
         fontFamily = Domine,
         fontWeight = FontWeight.Normal,
         fontSize = 16.sp,
         letterSpacing = 0.5.sp
     ),
-    body2 = TextStyle(
+    bodyMedium = TextStyle(
+        fontFamily = Montserrat,
         fontWeight = FontWeight.Medium,
         fontSize = 14.sp,
         letterSpacing = 0.25.sp
     ),
-    button = TextStyle(
+    labelLarge = TextStyle(
+        fontFamily = Montserrat,
         fontWeight = FontWeight.SemiBold,
         fontSize = 14.sp,
         letterSpacing = 1.25.sp
     ),
-    caption = TextStyle(
+    bodySmall = TextStyle(
+        fontFamily = Montserrat,
         fontWeight = FontWeight.Medium,
         fontSize = 12.sp,
         letterSpacing = 0.4.sp
     ),
-    overline = TextStyle(
+    labelSmall = TextStyle(
+        fontFamily = Montserrat,
         fontWeight = FontWeight.SemiBold,
         fontSize = 12.sp,
         letterSpacing = 1.sp