diff --git a/app/src/main/kotlin/org/db3/airmq/features/navigation/AirMQNavGraph.kt b/app/src/main/kotlin/org/db3/airmq/features/navigation/AirMQNavGraph.kt
index 76bb029..d1a7763 100644
--- a/app/src/main/kotlin/org/db3/airmq/features/navigation/AirMQNavGraph.kt
+++ b/app/src/main/kotlin/org/db3/airmq/features/navigation/AirMQNavGraph.kt
@@ -1,6 +1,8 @@
 package org.db3.airmq.features.navigation
 
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
 import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -10,7 +12,10 @@ import androidx.compose.material3.NavigationBarItemDefaults
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
 import androidx.navigation.NavType
 import androidx.navigation.NavGraph.Companion.findStartDestination
 import androidx.navigation.compose.NavHost
@@ -38,7 +43,8 @@ import org.db3.airmq.features.news.NewsDetailScreen
 import org.db3.airmq.features.news.NewsScreen
 import org.db3.airmq.features.settings.SettingsScreen
 import org.db3.airmq.features.setup.SetupScreen
-import org.db3.airmq.ui.theme.LegacyNavContainer
+import org.db3.airmq.ui.theme.LegacyNavGradientEnd
+import org.db3.airmq.ui.theme.LegacyNavGradientStart
 import org.db3.airmq.ui.theme.LegacyNavSelected
 import org.db3.airmq.ui.theme.LegacyNavUnselected
 
@@ -59,36 +65,45 @@ fun AirMQNavGraph(modifier: Modifier = Modifier) {
         modifier = modifier,
         bottomBar = {
             if (showBottomBar) {
-                NavigationBar(
-                    containerColor = LegacyNavContainer
-                ) {
-                    tabItems.forEach { tabItem ->
-                        NavigationBarItem(
-                            selected = currentRoute == tabItem.route,
-                            onClick = {
-                                navController.navigate(tabItem.route) {
-                                    popUpTo(navController.graph.findStartDestination().id) {
-                                        saveState = true
-                                    }
-                                    launchSingleTop = true
-                                    restoreState = true
-                                }
-                            },
-                            colors = NavigationBarItemDefaults.colors(
-                                selectedIconColor = LegacyNavSelected,
-                                unselectedIconColor = LegacyNavUnselected,
-                                selectedTextColor = LegacyNavSelected,
-                                unselectedTextColor = LegacyNavUnselected,
-                                indicatorColor = LegacyNavContainer
-                            ),
-                            icon = {
-                                Icon(
-                                    painter = painterResource(id = tabItem.iconRes),
-                                    contentDescription = tabItem.label
-                                )
-                            },
-                            label = { Text(tabItem.label) }
+                Box(
+                    modifier = Modifier.background(
+                        brush = Brush.linearGradient(
+                            colors = listOf(LegacyNavGradientEnd, LegacyNavGradientStart)
                         )
+                    )
+                ) {
+                    NavigationBar(
+                        containerColor = Color.Transparent,
+                        tonalElevation = 0.dp
+                    ) {
+                        tabItems.forEach { tabItem ->
+                            NavigationBarItem(
+                                selected = currentRoute == tabItem.route,
+                                onClick = {
+                                    navController.navigate(tabItem.route) {
+                                        popUpTo(navController.graph.findStartDestination().id) {
+                                            saveState = true
+                                        }
+                                        launchSingleTop = true
+                                        restoreState = true
+                                    }
+                                },
+                                colors = NavigationBarItemDefaults.colors(
+                                    selectedIconColor = LegacyNavSelected,
+                                    unselectedIconColor = LegacyNavUnselected,
+                                    selectedTextColor = LegacyNavSelected,
+                                    unselectedTextColor = LegacyNavUnselected,
+                                    indicatorColor = Color.Transparent
+                                ),
+                                icon = {
+                                    Icon(
+                                        painter = painterResource(id = tabItem.iconRes),
+                                        contentDescription = tabItem.label
+                                    )
+                                },
+                                label = { Text(tabItem.label) }
+                            )
+                        }
                     }
                 }
             }
diff --git a/app/src/main/kotlin/org/db3/airmq/ui/theme/Color.kt b/app/src/main/kotlin/org/db3/airmq/ui/theme/Color.kt
index 0d7a1f5..0ca0ab4 100644
--- a/app/src/main/kotlin/org/db3/airmq/ui/theme/Color.kt
+++ b/app/src/main/kotlin/org/db3/airmq/ui/theme/Color.kt
@@ -16,6 +16,8 @@ val LegacyOutlineLight = Color(0x3B000000)
 val LegacyNavSelected = Color(0xFFFFFFFF)
 val LegacyNavUnselected = Color(0x8AFFFFFF)
 val LegacyNavContainer = Color(0xFF295989)
+val LegacyNavGradientStart = Color(0xFF005BAB)
+val LegacyNavGradientEnd = Color(0xFF4997D1)
 
 val LegacyButtonContained = Color(0xFF135CA5)
 val LegacyButtonContainedDisabledOverlay = Color(0x1F000000)