diff --git a/.idea/dictionaries/jacob.xml b/.idea/dictionaries/jacob.xml
index 23ce4ff1..01933ce0 100644
--- a/.idea/dictionaries/jacob.xml
+++ b/.idea/dictionaries/jacob.xml
@@ -5,9 +5,10 @@
       <w>bosco</w>
       <w>buildlogic</w>
       <w>ktlint</w>
+      <w>snackbar</w>
       <w>waka</w>
       <w>wakatime</w>
       <w>wakatimeapp</w>
     </words>
   </dictionary>
-</component>
+</component>
\ No newline at end of file
diff --git a/app/src/main/java/com/jacob/wakatimeapp/MainActivity.kt b/app/src/main/java/com/jacob/wakatimeapp/MainActivity.kt
index 994b633e..bd645477 100644
--- a/app/src/main/java/com/jacob/wakatimeapp/MainActivity.kt
+++ b/app/src/main/java/com/jacob/wakatimeapp/MainActivity.kt
@@ -8,10 +8,13 @@ import android.os.Bundle
 import androidx.activity.compose.setContent
 import androidx.appcompat.app.AppCompatActivity
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.material.Scaffold
-import androidx.compose.material.rememberScaffoldState
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.SnackbarHost
+import androidx.compose.material3.SnackbarHostState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen
@@ -22,6 +25,7 @@ import com.ramcosta.composedestinations.DestinationsNavHost
 import com.ramcosta.composedestinations.navigation.dependency
 import dagger.hilt.android.AndroidEntryPoint
 
+@ExperimentalMaterial3Api
 @AndroidEntryPoint
 class MainActivity : AppCompatActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
@@ -30,9 +34,9 @@ class MainActivity : AppCompatActivity() {
         installSplashScreen()
         setContent {
             WakaTimeAppTheme {
-                val scaffoldState = rememberScaffoldState()
+                val snackbarHostState = remember { SnackbarHostState() }
                 Scaffold(
-                    scaffoldState = scaffoldState,
+                    snackbarHost = { SnackbarHost(snackbarHostState) },
                     modifier = Modifier.fillMaxSize()
                 ) {
                     LockScreenOrientation()
@@ -40,7 +44,7 @@ class MainActivity : AppCompatActivity() {
                         navGraph = NavGraphs.root,
                         dependenciesContainerBuilder = {
                             dependency(ApplicationNavigator(navController))
-                            dependency(scaffoldState)
+                            dependency(snackbarHostState)
                         }
                     )
                 }
diff --git a/app/src/main/java/com/jacob/wakatimeapp/navigation/AppDestinations.kt b/app/src/main/java/com/jacob/wakatimeapp/navigation/AppDestinations.kt
index d3fa08e1..0e08d01c 100644
--- a/app/src/main/java/com/jacob/wakatimeapp/navigation/AppDestinations.kt
+++ b/app/src/main/java/com/jacob/wakatimeapp/navigation/AppDestinations.kt
@@ -1,6 +1,6 @@
 package com.jacob.wakatimeapp.navigation
 
-import androidx.compose.material.ScaffoldState
+import androidx.compose.material3.SnackbarHostState
 import androidx.compose.runtime.Composable
 import com.jacob.wakatimeapp.home.ui.HomePageContent
 import com.jacob.wakatimeapp.home.ui.HomePageNavigator
@@ -12,15 +12,15 @@ import com.ramcosta.composedestinations.annotation.RootNavGraph
 @RootNavGraph(start = true)
 @Destination
 @Composable
-fun LoginPage(loginPageNavigator: LoginPageNavigator, scaffoldState: ScaffoldState) =
-    LoginPageContent(loginPageNavigator = loginPageNavigator, scaffoldState = scaffoldState)
+fun LoginPage(loginPageNavigator: LoginPageNavigator, scaffoldState: SnackbarHostState) =
+    LoginPageContent(loginPageNavigator = loginPageNavigator, snackbarHostState = scaffoldState)
 
 @Composable
 @Destination
 fun HomePage(
     homePageNavigator: HomePageNavigator,
-    scaffoldState: ScaffoldState,
+    scaffoldState: SnackbarHostState,
 ) = HomePageContent(
     navigator = homePageNavigator,
-    scaffoldState = scaffoldState
+    snackbarHostState = scaffoldState
 )
diff --git a/buildSrc/src/main/kotlin/wakatimeapp.android.application.gradle b/buildSrc/src/main/kotlin/wakatimeapp.android.application.gradle
index b22ac0f9..415d5e99 100644
--- a/buildSrc/src/main/kotlin/wakatimeapp.android.application.gradle
+++ b/buildSrc/src/main/kotlin/wakatimeapp.android.application.gradle
@@ -63,7 +63,9 @@ dependencies {
 
     // Compose
     implementation("androidx.compose.ui:ui:1.2.1")
-    implementation("androidx.compose.material:material:1.2.1")
+
+    implementation("com.google.android.material:material:1.7.0-rc01")
+    implementation("androidx.compose.material3:material3:1.0.0-rc01")
     implementation("androidx.compose.ui:ui-tooling-preview:1.2.1")
     implementation("androidx.activity:activity-compose:1.6.0")
 
diff --git a/buildSrc/src/main/kotlin/wakatimeapp.android.feature.gradle b/buildSrc/src/main/kotlin/wakatimeapp.android.feature.gradle
index 9f2c3499..466ada5a 100644
--- a/buildSrc/src/main/kotlin/wakatimeapp.android.feature.gradle
+++ b/buildSrc/src/main/kotlin/wakatimeapp.android.feature.gradle
@@ -52,10 +52,11 @@ dependencies {
 
     implementation("androidx.core:core-ktx:1.9.0")
     implementation("androidx.appcompat:appcompat:1.5.1")
+    implementation("com.google.android.material:material:1.7.0-rc01")
 
     // Compose
     implementation("androidx.compose.ui:ui:1.2.1")
-    implementation("androidx.compose.material:material:1.2.1")
+    implementation("androidx.compose.material3:material3:1.0.0-rc01")
     implementation("androidx.compose.ui:ui-tooling-preview:1.2.1")
     implementation("androidx.activity:activity-compose:1.6.0")
 
diff --git a/core/common/src/main/java/com/jacob/wakatimeapp/core/common/di/DataModule.kt b/core/common/src/main/java/com/jacob/wakatimeapp/core/common/di/DataModule.kt
index 203f9d2e..ad82c0c5 100644
--- a/core/common/src/main/java/com/jacob/wakatimeapp/core/common/di/DataModule.kt
+++ b/core/common/src/main/java/com/jacob/wakatimeapp/core/common/di/DataModule.kt
@@ -1,9 +1,7 @@
 package com.jacob.wakatimeapp.core.common.di
 
 import android.content.Context
-import androidx.datastore.core.DataStore
 import androidx.datastore.preferences.core.PreferenceDataStoreFactory
-import androidx.datastore.preferences.core.Preferences
 import androidx.datastore.preferences.preferencesDataStoreFile
 import com.jacob.wakatimeapp.core.common.auth.AuthDataStore.Companion.STORE_NAME
 import com.jakewharton.retrofit2.converter.kotlinx.serialization.asConverterFactory
@@ -29,7 +27,7 @@ object DataModule {
 
     @Singleton
     @Provides
-    fun providePreferencesDataStore(@ApplicationContext appContext: Context): DataStore<Preferences> =
+    fun providePreferencesDataStore(@ApplicationContext appContext: Context) =
         PreferenceDataStoreFactory.create(
             scope = CoroutineScope(Dispatchers.IO + SupervisorJob()),
             produceFile = { appContext.preferencesDataStoreFile(STORE_NAME) }
@@ -57,7 +55,7 @@ object DataModule {
     @ExperimentalSerializationApi
     @Singleton
     @Provides
-    fun provideRetrofit(okHttpClient: OkHttpClient, json: Json): Retrofit = Retrofit.Builder()
+    fun provideRetrofit(okHttpClient: OkHttpClient, json: Json) = Retrofit.Builder()
         .addConverterFactory(
             json.asConverterFactory("application/json".toMediaType())
         )
diff --git a/core/ui/build.gradle.kts b/core/ui/build.gradle.kts
index 1c09ebf5..2abb2fe6 100644
--- a/core/ui/build.gradle.kts
+++ b/core/ui/build.gradle.kts
@@ -18,13 +18,13 @@ dependencies {
 
     implementation("androidx.core:core-ktx:1.9.0")
     implementation("androidx.appcompat:appcompat:1.5.1")
-    implementation("com.google.android.material:material:1.6.1")
+    implementation("com.google.android.material:material:1.7.0-rc01")
+    implementation("androidx.compose.material3:material3:1.0.0-rc01")
 
     implementation("org.jetbrains.kotlinx:kotlinx-coroutines-android:1.6.4")
 
     // Compose
     implementation("androidx.compose.ui:ui:1.2.1")
-    implementation("androidx.compose.material:material:1.2.1")
     implementation("androidx.compose.ui:ui-tooling-preview:1.2.1")
 
     implementation("com.airbnb.android:lottie-compose:5.0.3")
diff --git a/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/components/WtaAnimation.kt b/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/components/WtaAnimation.kt
index 3ebca6b3..a3347bdf 100644
--- a/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/components/WtaAnimation.kt
+++ b/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/components/WtaAnimation.kt
@@ -6,8 +6,8 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Text
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
@@ -41,7 +41,7 @@ fun WtaAnimation(
         Spacer(modifier = Modifier.height(MaterialTheme.spacing.lMedium))
         Text(
             text = text,
-            style = MaterialTheme.typography.subtitle1,
+            style = MaterialTheme.typography.titleMedium,
         )
     }
 }
diff --git a/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/components/WtaIllustration.kt b/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/components/WtaIllustration.kt
index 78db3d63..9b78f210 100644
--- a/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/components/WtaIllustration.kt
+++ b/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/components/WtaIllustration.kt
@@ -7,8 +7,8 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Text
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -37,6 +37,6 @@ fun WtaIllustration(
     Spacer(modifier = Modifier.height(MaterialTheme.spacing.lMedium))
     Text(
         text = text,
-        style = MaterialTheme.typography.subtitle1
+        style = MaterialTheme.typography.titleMedium
     )
 }
diff --git a/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/components/cards/OtherStatsCard.kt b/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/components/cards/OtherStatsCard.kt
index 1eddd698..28acc14f 100644
--- a/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/components/cards/OtherStatsCard.kt
+++ b/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/components/cards/OtherStatsCard.kt
@@ -3,7 +3,7 @@ package com.jacob.wakatimeapp.core.ui.components.cards
 import androidx.annotation.DrawableRes
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.unit.dp
-import com.jacob.wakatimeapp.core.ui.theme.Gradient
+import com.jacob.wakatimeapp.core.ui.theme.colors.Gradient
 
 @Composable
 fun OtherStatsCard(
diff --git a/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/components/cards/StatsCard.kt b/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/components/cards/StatsCard.kt
index 33232103..e25e5da0 100644
--- a/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/components/cards/StatsCard.kt
+++ b/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/components/cards/StatsCard.kt
@@ -10,8 +10,8 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Text
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -26,8 +26,8 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import com.jacob.wakatimeapp.core.ui.theme.Gradient
 import com.jacob.wakatimeapp.core.ui.theme.cardContent
+import com.jacob.wakatimeapp.core.ui.theme.colors.Gradient
 import com.jacob.wakatimeapp.core.ui.theme.spacing
 
 @Composable
@@ -74,6 +74,7 @@ internal fun StatsCard(
                 maxLines = 2,
                 modifier = Modifier.weight(weights.first, true),
                 style = MaterialTheme.typography.cardContent,
+                color = gradient.onStartColor,
             )
             Text(
                 text = text,
@@ -82,8 +83,9 @@ internal fun StatsCard(
                 style = TextStyle(
                     color = Color.White,
                     fontSize = 20.sp,
-                    fontWeight = FontWeight.Bold
-                )
+                    fontWeight = FontWeight.Medium,
+                ),
+                color = gradient.onEndColor,
             )
         }
     }
diff --git a/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/components/cards/TimeSpentCard.kt b/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/components/cards/TimeSpentCard.kt
index 4a46a7fb..b5c371b5 100644
--- a/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/components/cards/TimeSpentCard.kt
+++ b/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/components/cards/TimeSpentCard.kt
@@ -2,11 +2,11 @@ package com.jacob.wakatimeapp.core.ui.components.cards
 
 import android.content.res.Configuration
 import androidx.annotation.DrawableRes
-import androidx.compose.material.MaterialTheme
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.tooling.preview.Preview
 import com.jacob.wakatimeapp.core.models.Time
-import com.jacob.wakatimeapp.core.ui.theme.Gradient
+import com.jacob.wakatimeapp.core.ui.theme.colors.Gradient
 import com.jacob.wakatimeapp.core.ui.theme.WakaTimeAppTheme
 import com.jacob.wakatimeapp.core.ui.theme.assets
 import com.jacob.wakatimeapp.core.ui.theme.gradients
diff --git a/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/theme/Colors.kt b/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/theme/Colors.kt
deleted file mode 100644
index 81522be4..00000000
--- a/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/theme/Colors.kt
+++ /dev/null
@@ -1,26 +0,0 @@
-@file:Suppress("MagicNumber")
-
-package com.jacob.wakatimeapp.core.ui.theme
-
-import androidx.compose.material.darkColors
-import androidx.compose.material.lightColors
-import androidx.compose.ui.graphics.Color
-
-internal val DarkColorPalette = darkColors(
-    primary = Colors.AccentText,
-    secondary = Colors.AccentIcons,
-    background = Colors.AppBG,
-    surface = Colors.CardBackground
-)
-
-internal val LightColorPalette = lightColors(
-    primary = Colors.AccentText,
-    secondary = Colors.AccentIcons,
-)
-
-private object Colors {
-    val AppBG = Color(0xFF121212)
-    val CardBackground = Color(0xFF272727)
-    val AccentIcons = Color(0xFF6FEBFF)
-    val AccentText = Color(0xFF8CE3E3)
-}
diff --git a/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/theme/Gradients.kt b/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/theme/Gradients.kt
deleted file mode 100644
index dabfbb4c..00000000
--- a/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/theme/Gradients.kt
+++ /dev/null
@@ -1,24 +0,0 @@
-@file:Suppress("MagicNumber")
-
-package com.jacob.wakatimeapp.core.ui.theme
-
-import androidx.compose.runtime.Immutable
-import androidx.compose.runtime.staticCompositionLocalOf
-import androidx.compose.ui.graphics.Color
-
-@Immutable
-data class Gradient(val startColor: Color, val endColor: Color, val opacity: Int = 100)
-
-@Immutable
-object Gradients {
-    val primary = Gradient(Color(0xFF3F67E0), Color(0xFF65D1E2))
-    val secondary = Gradient(Color(0xFF3F55E0), Color(0xFF5EC2D2), 85)
-    val purpleCyanLight = Gradient(Color(0xFFCC1FBB), Color(0xFF6FEBFF))
-    val purpleCyanDark = Gradient(Color(0xFF921FC9), Color(0xFF5EC2D2))
-    val greenCyan = Gradient(Color(0xFF18A963), Color(0xFF65D0E1))
-    val blueCyan = Gradient(Color(0xFF7B61FF), Color(0xFF63CFE1))
-    val redPurple = Gradient(Color(0xFFEB4F4F), Color(0xFFDC52B5))
-    val orangeYellow = Gradient(Color(0xFFFF9900), Color(0xFFE8C754))
-}
-
-val LocalGradients = staticCompositionLocalOf { Gradients }
diff --git a/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/theme/Shape.kt b/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/theme/Shape.kt
index fa38edb2..98d71d74 100644
--- a/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/theme/Shape.kt
+++ b/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/theme/Shape.kt
@@ -1,7 +1,7 @@
 package com.jacob.wakatimeapp.core.ui.theme
 
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.Shapes
+import androidx.compose.material3.Shapes
 import androidx.compose.ui.unit.dp
 
 val Shapes = Shapes(
diff --git a/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/theme/Type.kt b/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/theme/Type.kt
index 621a0068..0ad9e37c 100644
--- a/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/theme/Type.kt
+++ b/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/theme/Type.kt
@@ -1,6 +1,6 @@
 package com.jacob.wakatimeapp.core.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
@@ -44,16 +44,37 @@ val playfairDisplayFontFamily = FontFamily(
 )
 
 val defaultTypography = Typography()
-val Typography = Typography(
-    defaultFontFamily = poppinsFontFamily,
-    button = defaultTypography.button.copy(
+
+val Typography = defaultTypography.let {
+    fun TextStyle.setDefaultFontFamily() = copy(fontFamily = poppinsFontFamily)
+
+    Typography(
+        displayLarge = it.displayLarge.setDefaultFontFamily(),
+        displayMedium = it.displayMedium.setDefaultFontFamily(),
+        displaySmall = it.displaySmall.setDefaultFontFamily(),
+        headlineLarge = it.headlineLarge.setDefaultFontFamily(),
+        headlineMedium = it.headlineMedium.setDefaultFontFamily(),
+        headlineSmall = it.headlineSmall.setDefaultFontFamily(),
+        titleLarge = it.titleLarge.setDefaultFontFamily(),
+        titleMedium = it.titleMedium.setDefaultFontFamily(),
+        titleSmall = it.titleSmall.setDefaultFontFamily(),
+        bodyLarge = it.bodyLarge.setDefaultFontFamily(),
+        bodyMedium = it.bodyMedium.setDefaultFontFamily(),
+        bodySmall = it.bodySmall.setDefaultFontFamily(),
+        labelLarge = it.labelLarge.setDefaultFontFamily(),
+        labelMedium = it.labelMedium.setDefaultFontFamily(),
+        labelSmall = it.labelSmall.setDefaultFontFamily(),
+    )
+}
+
+val Typography.button: TextStyle
+    get() = bodySmall.copy(
         fontSize = 16.sp,
         fontWeight = FontWeight.SemiBold
     )
-)
 
 val Typography.pageTitle: TextStyle
-    get() = h3.copy(
+    get() = displayMedium.copy(
         fontFamily = playfairDisplayFontFamily,
         fontSize = 56.sp,
         textAlign = TextAlign.Center,
@@ -61,27 +82,27 @@ val Typography.pageTitle: TextStyle
     )
 
 val Typography.sectionTitle
-    get() = h5.copy(
+    get() = headlineSmall.copy(
         fontSize = 28.sp,
         fontWeight = FontWeight.SemiBold,
     )
 
 val Typography.sectionSubtitle
-    get() = body2
+    get() = labelLarge
 
 val Typography.cardHeader
-    get() = h6.copy(
+    get() = titleLarge.copy(
         fontSize = 22.sp,
         fontWeight = FontWeight.Normal,
     )
 
 val Typography.cardSubtitle
-    get() = body2.copy(
+    get() = bodyMedium.copy(
         fontWeight = FontWeight.Light,
     )
 
 val Typography.cardContent
-    get() = subtitle1.copy(
+    get() = bodyLarge.copy(
         fontSize = 18.sp,
         fontWeight = FontWeight.Normal,
     )
diff --git a/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/theme/WakaTimeAppTheme.kt b/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/theme/WakaTimeAppTheme.kt
index 9cd0e1d7..806130f7 100644
--- a/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/theme/WakaTimeAppTheme.kt
+++ b/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/theme/WakaTimeAppTheme.kt
@@ -1,24 +1,31 @@
 package com.jacob.wakatimeapp.core.ui.theme
 
 import androidx.compose.foundation.isSystemInDarkTheme
-import androidx.compose.material.MaterialTheme
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.ReadOnlyComposable
 import com.jacob.wakatimeapp.core.ui.theme.assets.Assets
 import com.jacob.wakatimeapp.core.ui.theme.assets.LocalAssets
+import com.jacob.wakatimeapp.core.ui.theme.colors.Gradients
+import com.jacob.wakatimeapp.core.ui.theme.colors.LocalGradients
+import com.jacob.wakatimeapp.core.ui.theme.colors.dark.DarkColors
+import com.jacob.wakatimeapp.core.ui.theme.colors.dark.DarkGradients
+import com.jacob.wakatimeapp.core.ui.theme.colors.light.LightColors
+import com.jacob.wakatimeapp.core.ui.theme.colors.light.LightGradients
 
 @Composable
 fun WakaTimeAppTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
-    val colors = if (darkTheme) DarkColorPalette else LightColorPalette
+    val colors = if (darkTheme) DarkColors else LightColors
+    val gradients = if (darkTheme) DarkGradients else LightGradients
 
     CompositionLocalProvider(
         LocalSpacing provides Spacing,
-        LocalGradients provides Gradients,
+        LocalGradients provides gradients,
         LocalAssets provides Assets,
     ) {
         MaterialTheme(
-            colors = colors,
+            colorScheme = colors,
             typography = Typography,
             shapes = Shapes,
             content = content
diff --git a/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/theme/colors/Gradients.kt b/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/theme/colors/Gradients.kt
new file mode 100644
index 00000000..b158c22c
--- /dev/null
+++ b/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/theme/colors/Gradients.kt
@@ -0,0 +1,31 @@
+@file:Suppress("MagicNumber")
+
+package com.jacob.wakatimeapp.core.ui.theme.colors
+
+import androidx.compose.runtime.Immutable
+import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.graphics.Color
+import com.jacob.wakatimeapp.core.ui.theme.colors.dark.DarkGradients
+
+@Immutable
+data class Gradient(
+    val startColor: Color,
+    val endColor: Color,
+    val opacity: Int = 100,
+    val onStartColor: Color = startColor,
+    val onEndColor: Color = endColor,
+)
+
+@Immutable
+data class Gradients(
+    val primary: Gradient,
+    val secondary: Gradient,
+    val pinkCyanLight: Gradient,
+    val purpleCyanDark: Gradient,
+    val greenCyan: Gradient,
+    val purpleCyan: Gradient,
+    val redPurple: Gradient,
+    val orangeYellow: Gradient,
+)
+
+val LocalGradients = staticCompositionLocalOf { DarkGradients }
diff --git a/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/theme/colors/dark/Colors.kt b/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/theme/colors/dark/Colors.kt
new file mode 100644
index 00000000..54e6aed9
--- /dev/null
+++ b/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/theme/colors/dark/Colors.kt
@@ -0,0 +1,65 @@
+@file:Suppress("MagicNumber")
+
+package com.jacob.wakatimeapp.core.ui.theme.colors.dark
+
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.ui.graphics.Color
+
+private val darkPrimary = Color(0xFF4FD8EB)
+private val darkOnPrimary = Color(0xFF00363D)
+private val darkPrimaryContainer = Color(0xFF004F57)
+private val darkOnPrimaryContainer = Color(0xFF96F0FF)
+private val darkSecondary = Color(0xFFB1CBD0)
+private val darkOnSecondary = Color(0xFF1C3438)
+private val darkSecondaryContainer = Color(0xFF334B4F)
+private val darkOnSecondaryContainer = Color(0xFFCDE7EC)
+private val darkTertiary = Color(0xFFBAC6EA)
+private val darkOnTertiary = Color(0xFF24304D)
+private val darkTertiaryContainer = Color(0xFF3B4664)
+private val darkOnTertiaryContainer = Color(0xFFDAE2FF)
+private val darkError = Color(0xFFFFB4AB)
+private val darkErrorContainer = Color(0xFF93000A)
+private val darkOnError = Color(0xFF690005)
+private val darkOnErrorContainer = Color(0xFFFFDAD6)
+private val darkBackground = Color(0xFF191C1D)
+private val darkOnBackground = Color(0xFFE1E3E3)
+private val darkSurface = Color(0xFF191C1D)
+private val darkOnSurface = Color(0xFFE1E3E3)
+private val darkSurfaceVariant = Color(0xFF3F484A)
+private val darkOnSurfaceVariant = Color(0xFFBFC8CA)
+private val darkOutline = Color(0xFF899294)
+private val darkInverseOnSurface = Color(0xFF191C1D)
+private val darkInverseSurface = Color(0xFFE1E3E3)
+private val darkInversePrimary = Color(0xFF006874)
+private val darkShadow = Color(0xFF000000)
+private val darkSurfaceTint = Color(0xFF4FD8EB)
+
+internal val DarkColors = darkColorScheme(
+    primary = darkPrimary,
+    onPrimary = darkOnPrimary,
+    primaryContainer = darkPrimaryContainer,
+    onPrimaryContainer = darkOnPrimaryContainer,
+    secondary = darkSecondary,
+    onSecondary = darkOnSecondary,
+    secondaryContainer = darkSecondaryContainer,
+    onSecondaryContainer = darkOnSecondaryContainer,
+    tertiary = darkTertiary,
+    onTertiary = darkOnTertiary,
+    tertiaryContainer = darkTertiaryContainer,
+    onTertiaryContainer = darkOnTertiaryContainer,
+    error = darkError,
+    errorContainer = darkErrorContainer,
+    onError = darkOnError,
+    onErrorContainer = darkOnErrorContainer,
+    background = darkBackground,
+    onBackground = darkOnBackground,
+    surface = darkSurface,
+    onSurface = darkOnSurface,
+    surfaceVariant = darkSurfaceVariant,
+    onSurfaceVariant = darkOnSurfaceVariant,
+    outline = darkOutline,
+    inverseOnSurface = darkInverseOnSurface,
+    inverseSurface = darkInverseSurface,
+    inversePrimary = darkInversePrimary,
+    surfaceTint = darkSurfaceTint,
+)
diff --git a/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/theme/colors/dark/Gradients.kt b/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/theme/colors/dark/Gradients.kt
new file mode 100644
index 00000000..bea2c211
--- /dev/null
+++ b/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/theme/colors/dark/Gradients.kt
@@ -0,0 +1,124 @@
+@file:Suppress("MagicNumber", "UnusedPrivateMember")
+
+package com.jacob.wakatimeapp.core.ui.theme.colors.dark
+
+import androidx.compose.ui.graphics.Color
+import com.jacob.wakatimeapp.core.ui.theme.colors.Gradient
+import com.jacob.wakatimeapp.core.ui.theme.colors.Gradients
+
+private val BLUE = Color(0xFF3F67E0)
+private val CYAN = Color(0xFF65D1E2)
+private val DARK_PINK = Color(0xFFCC1FBB)
+private val GREEN = Color(0xFF18A963)
+private val PURPLE = Color(0xFF7B61FF)
+private val RED = Color(0xFFEB4F4F)
+private val PINK = Color(0xFFDC52B5)
+private val DARK_PURPLE = Color(0xFF921FC9)
+private val CYAN_ALT = Color(0xFF5EC2D2)
+private val ORANGE = Color(0xFFFF9900)
+private val YELLOW = Color(0xFFE8C754)
+
+private val orange = Color(0xFFFFB86F)
+private val onOrange = Color(0xFF4A2800)
+private val orangeContainer = Color(0xFF693C00)
+private val onOrangeContainer = Color(0xFFFFDCBD)
+
+private val yellow = Color(0xFFE6C449)
+private val onYellow = Color(0xFF3B2F00)
+private val yellowContainer = Color(0xFF564500)
+private val onYellowContainer = Color(0xFFFFE07D)
+
+private val blue = Color(0xFFB6C4FF)
+private val onBlue = Color(0xFF00287D)
+private val blueContainer = Color(0xFF003BB0)
+private val onBlueContainer = Color(0xFFDCE1FF)
+
+private val cyan = Color(0xFF4FD8EC)
+private val onCyan = Color(0xFF00363D)
+private val cyanContainer = Color(0xFF004F58)
+private val onCyanContainer = Color(0xFF99F0FF)
+
+private val darkPink = Color(0xFFFFACEB)
+private val onDarkPink = Color(0xFF5D0055)
+private val darkPinkContainer = Color(0xFF840079)
+private val onDarkPinkContainer = Color(0xFFFFD7F1)
+
+private val green = Color(0xFF5EDE92)
+private val onGreen = Color(0xFF00391D)
+private val greenContainer = Color(0xFF00522C)
+private val onGreenContainer = Color(0xFF7CFBAC)
+
+private val purple = Color(0xFFC9BFFF)
+private val onPurple = Color(0xFF2E009C)
+private val purpleContainer = Color(0xFF441CC8)
+private val onPurpleContainer = Color(0xFFE5DEFF)
+
+private val red = Color(0xFFFFB3AE)
+private val onRed = Color(0xFF68000D)
+private val redContainer = Color(0xFF910618)
+private val onRedContainer = Color(0xFFFFDAD7)
+
+private val pink = Color(0xFFFFADE0)
+private val onPink = Color(0xFF60004C)
+private val pinkContainer = Color(0xFF87006C)
+private val onPinkContainer = Color(0xFFFFD8EC)
+
+private val darkPurple = Color(0xFFE8B3FF)
+private val onDarkPurple = Color(0xFF500074)
+private val darkPurpleContainer = Color(0xFF7200A3)
+private val onDarkPurpleContainer = Color(0xFFF6D9FF)
+
+private val cyanAlt = Color(0xFF50D8EC)
+private val onCyanAlt = Color(0xFF00363D)
+private val cyanAltContainer = Color(0xFF004F58)
+private val onCyanAltContainer = Color(0xFF99F0FF)
+
+val DarkGradients = Gradients(
+    primary = Gradient(
+        startColor = blue,
+        endColor = cyan,
+        onStartColor = onBlue,
+        onEndColor = onCyan
+    ),
+    secondary = Gradient(
+        startColor = Color(0xFF3F55E0),
+        endColor = Color(0xFF5EC2D2),
+        opacity = 85
+    ),
+    pinkCyanLight = Gradient(
+        startColor = pink,
+        endColor = cyan,
+        onStartColor = onPink,
+        onEndColor = onCyan
+    ),
+    purpleCyanDark = Gradient(
+        startColor = darkPurple,
+        endColor = cyanAlt,
+        onStartColor = onDarkPurple,
+        onEndColor = onCyanAlt
+    ),
+    greenCyan = Gradient(
+        startColor = green,
+        endColor = cyan,
+        onStartColor = onGreen,
+        onEndColor = onCyan
+    ),
+    purpleCyan = Gradient(
+        startColor = purple,
+        endColor = cyan,
+        onStartColor = onPurple,
+        onEndColor = onCyan
+    ),
+    redPurple = Gradient(
+        startColor = red,
+        endColor = purple,
+        onStartColor = onRed,
+        onEndColor = onPurple
+    ),
+    orangeYellow = Gradient(
+        startColor = orange,
+        endColor = yellow,
+        onStartColor = onOrange,
+        onEndColor = onYellow
+    )
+)
diff --git a/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/theme/colors/light/Colors.kt b/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/theme/colors/light/Colors.kt
new file mode 100644
index 00000000..b6f36adc
--- /dev/null
+++ b/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/theme/colors/light/Colors.kt
@@ -0,0 +1,65 @@
+@file:Suppress("MagicNumber")
+
+package com.jacob.wakatimeapp.core.ui.theme.colors.light
+
+import androidx.compose.material3.lightColorScheme
+import androidx.compose.ui.graphics.Color
+
+private val lightPrimary = Color(0xFF26C6DA)
+private val lightOnPrimary = Color(0xFFFFFFFF)
+private val lightPrimaryContainer = Color(0xFF96F0FF)
+private val lightOnPrimaryContainer = Color(0xFF001F24)
+private val lightSecondary = Color(0xFF4A6267)
+private val lightOnSecondary = Color(0xFFFFFFFF)
+private val lightSecondaryContainer = Color(0xFFCDE7EC)
+private val lightOnSecondaryContainer = Color(0xFF051F23)
+private val lightTertiary = Color(0xFF525E7D)
+private val lightOnTertiary = Color(0xFFFFFFFF)
+private val lightTertiaryContainer = Color(0xFFDAE2FF)
+private val lightOnTertiaryContainer = Color(0xFF0E1B37)
+private val lightError = Color(0xFFBA1A1A)
+private val lightErrorContainer = Color(0xFFFFDAD6)
+private val lightOnError = Color(0xFFFFFFFF)
+private val lightOnErrorContainer = Color(0xFF410002)
+private val lightBackground = Color(0xFFFAFDFD)
+private val lightOnBackground = Color(0xFF191C1D)
+private val lightSurface = Color(0xFFFAFDFD)
+private val lightOnSurface = Color(0xFF191C1D)
+private val lightSurfaceVariant = Color(0xFFDBE4E6)
+private val lightOnSurfaceVariant = Color(0xFF3F484A)
+private val lightOutline = Color(0xFF6F797A)
+private val lightInverseOnSurface = Color(0xFFEFF1F1)
+private val lightInverseSurface = Color(0xFF2E3132)
+private val lightInversePrimary = Color(0xFF4FD8EB)
+private val lightShadow = Color(0xFF000000)
+private val lightSurfaceTint = Color(0xFF006874)
+
+internal val LightColors = lightColorScheme(
+    primary = lightPrimary,
+    onPrimary = lightOnPrimary,
+    primaryContainer = lightPrimaryContainer,
+    onPrimaryContainer = lightOnPrimaryContainer,
+    secondary = lightSecondary,
+    onSecondary = lightOnSecondary,
+    secondaryContainer = lightSecondaryContainer,
+    onSecondaryContainer = lightOnSecondaryContainer,
+    tertiary = lightTertiary,
+    onTertiary = lightOnTertiary,
+    tertiaryContainer = lightTertiaryContainer,
+    onTertiaryContainer = lightOnTertiaryContainer,
+    error = lightError,
+    errorContainer = lightErrorContainer,
+    onError = lightOnError,
+    onErrorContainer = lightOnErrorContainer,
+    background = lightBackground,
+    onBackground = lightOnBackground,
+    surface = lightSurface,
+    onSurface = lightOnSurface,
+    surfaceVariant = lightSurfaceVariant,
+    onSurfaceVariant = lightOnSurfaceVariant,
+    outline = lightOutline,
+    inverseOnSurface = lightInverseOnSurface,
+    inverseSurface = lightInverseSurface,
+    inversePrimary = lightInversePrimary,
+    surfaceTint = lightSurfaceTint,
+)
diff --git a/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/theme/colors/light/Gradients.kt b/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/theme/colors/light/Gradients.kt
new file mode 100644
index 00000000..9cee6bd6
--- /dev/null
+++ b/core/ui/src/main/java/com/jacob/wakatimeapp/core/ui/theme/colors/light/Gradients.kt
@@ -0,0 +1,108 @@
+@file:Suppress("MagicNumber", "UnusedPrivateMember")
+
+package com.jacob.wakatimeapp.core.ui.theme.colors.light
+
+import androidx.compose.ui.graphics.Color
+import com.jacob.wakatimeapp.core.ui.theme.colors.Gradient
+import com.jacob.wakatimeapp.core.ui.theme.colors.Gradients
+
+private val orange = Color(0xFF8A5100)
+private val onOrange = Color(0xFFFFFFFF)
+private val orangeContainer = Color(0xFFFFDCBD)
+private val onOrangeContainer = Color(0xFF2C1600)
+
+private val yellow = Color(0xFF725C00)
+private val onYellow = Color(0xFFFFFFFF)
+private val yellowContainer = Color(0xFFFFE07D)
+private val onYellowContainer = Color(0xFF231B00)
+
+private val blue = Color(0xFF3463E4)
+private val onBlue = Color(0xFFFFFFFF)
+private val blueContainer = Color(0xFFDCE1FF)
+private val onBlueContainer = Color(0xFF00164F)
+
+private val cyan = Color(0xFF26C6DA)
+private val onCyan = Color(0xFFFFFFFF)
+private val cyanContainer = Color(0xFF99F0FF)
+private val onCyanContainer = Color(0xFF001F24)
+
+private val darkPink = Color(0xFFAC009E)
+private val onDarkPink = Color(0xFFFFFFFF)
+private val darkPinkContainer = Color(0xFFFFD7F1)
+private val onDarkPinkContainer = Color(0xFF390034)
+
+private val green = Color(0xFF00A75D)
+private val onGreen = Color(0xFFFFFFFF)
+private val greenContainer = Color(0xFF7CFBAC)
+private val onGreenContainer = Color(0xFF00210F)
+
+private val purple = Color(0xFF6A4EE2)
+private val onPurple = Color(0xFFFFFFFF)
+private val purpleContainer = Color(0xFFE5DEFF)
+private val onPurpleContainer = Color(0xFF1A0063)
+
+private val red = Color(0xFFB4262C)
+private val onRed = Color(0xFFFFFFFF)
+private val RedContainer = Color(0xFFFFDAD7)
+private val onRedContainer = Color(0xFF410005)
+
+private val pink = Color(0xFFA82288)
+private val onPink = Color(0xFFFFFFFF)
+private val pinkContainer = Color(0xFFFFD8EC)
+private val onPinkContainer = Color(0xFF3B002E)
+
+private val darkPurple = Color(0xFF921FC9)
+private val onDarkPurple = Color(0xFFFFFFFF)
+private val darkPurpleContainer = Color(0xFFF6D9FF)
+private val onDarkPurpleContainer = Color(0xFF310049)
+
+private val cyanAlt = Color(0xFF006874)
+private val onCyanAlt = Color(0xFFFFFFFF)
+private val cyanAltContainer = Color(0xFF99F0FF)
+private val onCyanAltContainer = Color(0xFF001F24)
+
+val LightGradients = Gradients(
+    primary = Gradient(
+        startColor = blue,
+        endColor = cyan,
+        onStartColor = onBlue,
+        onEndColor = onCyan
+    ),
+    secondary = Gradient(Color(0xFF3F55E0), Color(0xFF5EC2D2), 85),
+    pinkCyanLight = Gradient(
+        startColor = darkPink,
+        endColor = cyan,
+        onStartColor = onDarkPink,
+        onEndColor = onCyan
+    ),
+    purpleCyanDark = Gradient(
+        startColor = darkPurple,
+        endColor = cyanAlt,
+        onStartColor = onDarkPurple,
+        onEndColor = onCyanAlt
+    ),
+    greenCyan = Gradient(
+        startColor = green,
+        endColor = cyan,
+        onStartColor = onGreen,
+        onEndColor = onCyan
+    ),
+    purpleCyan = Gradient(
+        startColor = purple,
+        endColor = cyan,
+        onStartColor = onPurple,
+        onEndColor = onCyan
+    ),
+    redPurple = Gradient(
+        startColor = red,
+        endColor = purple,
+        onStartColor = onRed,
+        onEndColor = onPurple
+    ),
+    orangeYellow = Gradient(
+        startColor = orange,
+        endColor = yellow,
+        onStartColor = onOrange,
+        onEndColor = onYellow
+    )
+)
diff --git a/home/src/main/java/com/jacob/wakatimeapp/home/ui/HomePageContent.kt b/home/src/main/java/com/jacob/wakatimeapp/home/ui/HomePageContent.kt
index 8ce9e341..9e3638e1 100644
--- a/home/src/main/java/com/jacob/wakatimeapp/home/ui/HomePageContent.kt
+++ b/home/src/main/java/com/jacob/wakatimeapp/home/ui/HomePageContent.kt
@@ -7,9 +7,9 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.ScaffoldState
-import androidx.compose.material.SnackbarDuration.Long
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.SnackbarDuration
+import androidx.compose.material3.SnackbarHostState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
@@ -31,7 +31,7 @@ import kotlinx.coroutines.launch
 @Composable
 fun HomePageContent(
     navigator: HomePageNavigator,
-    scaffoldState: ScaffoldState,
+    snackbarHostState: SnackbarHostState,
     modifier: Modifier = Modifier,
     viewModel: HomePageViewModel = hiltViewModel(),
 ) {
@@ -42,9 +42,9 @@ fun HomePageContent(
         if (viewState !is HomePageViewState.Error) return@LaunchedEffect
 
         snackBarCoroutineScope.launch {
-            scaffoldState.snackbarHostState.showSnackbar(
+            snackbarHostState.showSnackbar(
                 message = (viewState as HomePageViewState.Error).errorMessage,
-                duration = Long
+                duration = SnackbarDuration.Long
             )
         }
     }
diff --git a/home/src/main/java/com/jacob/wakatimeapp/home/ui/components/OtherDailyStatsSection.kt b/home/src/main/java/com/jacob/wakatimeapp/home/ui/components/OtherDailyStatsSection.kt
index 966557d8..33065e11 100644
--- a/home/src/main/java/com/jacob/wakatimeapp/home/ui/components/OtherDailyStatsSection.kt
+++ b/home/src/main/java/com/jacob/wakatimeapp/home/ui/components/OtherDailyStatsSection.kt
@@ -6,9 +6,9 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.MaterialTheme.colors
-import androidx.compose.material.Text
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.MaterialTheme.colorScheme
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -38,7 +38,7 @@ fun OtherDailyStatsSection(
         modifier = Modifier.fillMaxWidth()
     ) {
         Text(text = "Other Daily Stats", style = typography.sectionTitle)
-        Text(text = "Details", color = colors.primary, style = typography.sectionSubtitle)
+        Text(text = "Details", color = colorScheme.primary, style = typography.sectionSubtitle)
     }
     Spacer(modifier = Modifier.height(spacing.extraSmall))
     OtherStatsCard(
@@ -50,7 +50,7 @@ fun OtherDailyStatsSection(
     )
     Spacer(modifier = Modifier.height(spacing.sMedium))
     OtherStatsCard(
-        gradient = gradients.blueCyan,
+        gradient = gradients.purpleCyan,
         iconId = icons.laptop,
         mainText = "Most OS Used",
         language = dailyStats?.mostUsedOs.orEmpty(),
@@ -58,7 +58,7 @@ fun OtherDailyStatsSection(
     )
     Spacer(modifier = Modifier.height(spacing.sMedium))
     OtherStatsCard(
-        gradient = gradients.purpleCyanLight,
+        gradient = gradients.pinkCyanLight,
         iconId = icons.laptop,
         mainText = "Most Editor Used",
         language = dailyStats?.mostUsedEditor.orEmpty(),
diff --git a/home/src/main/java/com/jacob/wakatimeapp/home/ui/components/RecentProjects.kt b/home/src/main/java/com/jacob/wakatimeapp/home/ui/components/RecentProjects.kt
index 2bc6807e..f1b910cc 100644
--- a/home/src/main/java/com/jacob/wakatimeapp/home/ui/components/RecentProjects.kt
+++ b/home/src/main/java/com/jacob/wakatimeapp/home/ui/components/RecentProjects.kt
@@ -2,10 +2,8 @@ package com.jacob.wakatimeapp.home.ui.components
 
 import android.content.res.Configuration.UI_MODE_NIGHT_YES
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -13,15 +11,13 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Surface
-import androidx.compose.material.Text
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.draw.shadow
-import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -52,7 +48,7 @@ internal fun RecentProjects(
         Text(text = "Recent Projects", style = typography.sectionTitle)
         Text(
             text = "See All",
-            color = MaterialTheme.colors.primary,
+            color = MaterialTheme.colorScheme.primary,
             style = typography.sectionSubtitle
         )
     }
@@ -76,22 +72,13 @@ private fun RecentProjectList(
 private fun ProjectCardItem(project: Project) {
     val cardShape = RoundedCornerShape(percent = 25)
     val spacing = MaterialTheme.spacing
-    /*
-    * Not using surface because it applies an overlay which changes the color of the background.
-    * Copied the modifiers from Surface composable without the overlay logic.
-    * */
-    Box(
+    Surface(
         modifier = Modifier
             .fillMaxWidth()
-            .shadow(
-                elevation = 12.dp,
-                shape = cardShape,
-                clip = false,
-                spotColor = Color.Black
-            )
-            .clip(shape = cardShape)
-            .background(color = MaterialTheme.colors.surface, shape = cardShape)
-            .clickable { }
+            .clickable { },
+        shape = cardShape,
+        shadowElevation = 10.dp,
+        tonalElevation = 2.dp,
     ) {
         Row(
             horizontalArrangement = Arrangement.SpaceBetween,
@@ -112,6 +99,7 @@ private fun ProjectCardItem(project: Project) {
             }
             Image(
                 painter = painterResource(id = MaterialTheme.assets.icons.arrow),
+                colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.surfaceTint),
                 contentDescription = ""
             )
         }
diff --git a/home/src/main/java/com/jacob/wakatimeapp/home/ui/components/UserDetailsSection.kt b/home/src/main/java/com/jacob/wakatimeapp/home/ui/components/UserDetailsSection.kt
index bbe7797d..cd5ac4f1 100644
--- a/home/src/main/java/com/jacob/wakatimeapp/home/ui/components/UserDetailsSection.kt
+++ b/home/src/main/java/com/jacob/wakatimeapp/home/ui/components/UserDetailsSection.kt
@@ -6,8 +6,8 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.size
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Text
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
diff --git a/home/src/main/java/com/jacob/wakatimeapp/home/ui/components/WeeklyReport.kt b/home/src/main/java/com/jacob/wakatimeapp/home/ui/components/WeeklyReport.kt
index 513fcde8..a18b6ed3 100644
--- a/home/src/main/java/com/jacob/wakatimeapp/home/ui/components/WeeklyReport.kt
+++ b/home/src/main/java/com/jacob/wakatimeapp/home/ui/components/WeeklyReport.kt
@@ -3,29 +3,26 @@
 package com.jacob.wakatimeapp.home.ui.components
 
 import android.content.res.Configuration
-import android.graphics.Color
 import android.view.ViewGroup.LayoutParams.MATCH_PARENT
 import android.widget.LinearLayout.LayoutParams
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Surface
-import androidx.compose.material.Text
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.State
 import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.viewinterop.AndroidView
@@ -61,7 +58,7 @@ fun WeeklyReport(
         Text(text = "Weekly Report", style = typography.sectionTitle)
         Text(
             text = "Details",
-            color = MaterialTheme.colors.primary,
+            color = MaterialTheme.colorScheme.primary,
             style = typography.sectionSubtitle
         )
     }
@@ -83,14 +80,15 @@ private fun WeeklyReportChart(dailyStats: List<DailyStats>) {
 
     val spacing = MaterialTheme.spacing
 
-    Box(
+    Surface(
         modifier = Modifier
             .padding(horizontal = spacing.small)
-            .shadow(elevation = 8.dp, shape = cardShape, clip = false)
-            .clip(shape = cardShape)
-            .background(MaterialTheme.colors.surface, shape = cardShape)
-            .aspectRatio(1.4f)
+            .aspectRatio(1.4f),
+        shape = cardShape,
+        shadowElevation = 10.dp,
+        tonalElevation = 2.dp,
     ) {
+        val onSurface = MaterialTheme.colorScheme.onSurface.toArgb()
         AndroidView(
             modifier = Modifier.padding(spacing.small),
             factory = {
@@ -99,7 +97,7 @@ private fun WeeklyReportChart(dailyStats: List<DailyStats>) {
                     data = barData
 
                     configureChartProperties()
-                    configureAxis(labels)
+                    configureAxis(labels, onSurface)
 
                     invalidate()
                 }
@@ -124,8 +122,12 @@ private fun getLabels(pairList: List<Pair<Int, DailyStats>>) =
     }
 
 @Composable
-private fun getBarData(pairList: List<Pair<Int, DailyStats>>) =
-    remember {
+private fun getBarData(pairList: List<Pair<Int, DailyStats>>): State<BarData> {
+    val colorScheme = MaterialTheme.colorScheme
+    val onSurface = colorScheme.onSurface.toArgb()
+    val barColor = colorScheme.primary.toArgb()
+
+    return remember {
         derivedStateOf {
             val entries = pairList.map { (index, value) ->
                 BarEntry(
@@ -137,17 +139,19 @@ private fun getBarData(pairList: List<Pair<Int, DailyStats>>) =
             val barDataSet = BarDataSet(entries, "Label").apply {
                 setDrawValues(true)
                 isHighlightEnabled = false
-                valueTextColor = Color.WHITE
+                valueTextColor = onSurface
                 valueFormatter = BarValueFormatter()
+                color = barColor
             }
             BarData(barDataSet).apply { barWidth = 0.3f }
         }
     }
+}
 
-private fun RoundedBarChart.configureAxis(labels: Map<Int, String>) {
+private fun RoundedBarChart.configureAxis(labels: Map<Int, String>, onSurface: Int) {
     xAxis.apply {
         setDrawGridLines(false)
-        textColor = Color.WHITE
+        textColor = onSurface
         position = BOTTOM
         valueFormatter = XAxisDayFormatter(labels)
     }
@@ -156,7 +160,7 @@ private fun RoundedBarChart.configureAxis(labels: Map<Int, String>) {
         isEnabled = true
         spaceBottom = 0f
         labelCount = 3
-        textColor = Color.WHITE
+        textColor = onSurface
         textSize = 8f
         valueFormatter = YAxisHourFormatter()
         axisMinimum = 0.1f // Can't be zero because of RoundedBarChart
diff --git a/login/src/main/java/com/jacob/wakatimeapp/login/ui/LoginPageContent.kt b/login/src/main/java/com/jacob/wakatimeapp/login/ui/LoginPageContent.kt
index 91941567..f3de7469 100644
--- a/login/src/main/java/com/jacob/wakatimeapp/login/ui/LoginPageContent.kt
+++ b/login/src/main/java/com/jacob/wakatimeapp/login/ui/LoginPageContent.kt
@@ -17,13 +17,13 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.Button
-import androidx.compose.material.ButtonDefaults
-import androidx.compose.material.CircularProgressIndicator
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.ScaffoldState
-import androidx.compose.material.SnackbarDuration
-import androidx.compose.material.Text
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.SnackbarDuration
+import androidx.compose.material3.SnackbarHostState
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
@@ -39,6 +39,7 @@ import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import com.jacob.wakatimeapp.core.ui.modifiers.gesturesDisabled
 import com.jacob.wakatimeapp.core.ui.theme.WakaTimeAppTheme
+import com.jacob.wakatimeapp.core.ui.theme.button
 import com.jacob.wakatimeapp.core.ui.theme.gradients
 import com.jacob.wakatimeapp.core.ui.theme.pageTitle
 import com.jacob.wakatimeapp.core.ui.theme.spacing
@@ -48,7 +49,7 @@ import kotlinx.coroutines.launch
 @Composable
 fun LoginPageContent(
     loginPageNavigator: LoginPageNavigator,
-    scaffoldState: ScaffoldState,
+    snackbarHostState: SnackbarHostState,
     modifier: Modifier = Modifier,
     viewModel: LoginPageViewModel = hiltViewModel(),
 ) {
@@ -64,7 +65,7 @@ fun LoginPageContent(
             is LoginPageState.Error -> showSnackBar(
                 viewStateInstance,
                 snackBarCoroutineScope,
-                scaffoldState
+                snackbarHostState
             )
 
             else -> Unit
@@ -97,9 +98,9 @@ fun LoginPageContent(
 private fun showSnackBar(
     viewState: LoginPageState.Error,
     snackBarCoroutineScope: CoroutineScope,
-    scaffoldState: ScaffoldState,
+    snackbarHostState: SnackbarHostState,
 ) = snackBarCoroutineScope.launch {
-    scaffoldState.snackbarHostState.showSnackbar(
+    snackbarHostState.showSnackbar(
         message = viewState.message,
         duration = SnackbarDuration.Long
     )
@@ -175,6 +176,7 @@ private fun LoginButton(
             Text(
                 text = "Login to Wakatime".uppercase(),
                 style = MaterialTheme.typography.button,
+                color = MaterialTheme.gradients.primary.onEndColor,
                 modifier = Modifier.padding(spacing.medium)
             )
         }