diff --git a/app/src/main/java/de/krisenvorrat/app/ui/MainScreen.kt b/app/src/main/java/de/krisenvorrat/app/ui/MainScreen.kt
index 04c02e1..98324ed 100644
--- a/app/src/main/java/de/krisenvorrat/app/ui/MainScreen.kt
+++ b/app/src/main/java/de/krisenvorrat/app/ui/MainScreen.kt
@@ -1,17 +1,21 @@
 package de.krisenvorrat.app.ui
 
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.consumeWindowInsets
-import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.SwapHoriz
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
-import androidx.compose.material3.NavigationBar
-import androidx.compose.material3.NavigationBarItem
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.NavigationBarDefaults
 import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
@@ -19,6 +23,7 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
@@ -74,33 +79,47 @@ internal fun MainScreen() {
         },
         bottomBar = {
             if (showBottomBar) {
-                NavigationBar(modifier = Modifier.height(56.dp)) {
-                    TopLevelDestination.entries.forEach { destination ->
-                        val isSelected = currentDestination?.hasRoute(destination.route::class) == true
+                Surface(
+                    color = NavigationBarDefaults.containerColor,
+                    tonalElevation = NavigationBarDefaults.Elevation
+                ) {
+                    Row(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .windowInsetsPadding(NavigationBarDefaults.windowInsets)
+                            .padding(vertical = 4.dp),
+                        horizontalArrangement = Arrangement.SpaceEvenly,
+                        verticalAlignment = Alignment.CenterVertically
+                    ) {
+                        TopLevelDestination.entries.forEach { destination ->
+                            val isSelected = currentDestination?.hasRoute(destination.route::class) == true
 
-                        NavigationBarItem(
-                            selected = isSelected,
-                            onClick = {
-                                navController.navigate(destination.route) {
-                                    popUpTo(navController.graph.findStartDestination().id) {
-                                        saveState = true
+                            IconButton(
+                                onClick = {
+                                    navController.navigate(destination.route) {
+                                        popUpTo(navController.graph.findStartDestination().id) {
+                                            saveState = true
+                                        }
+                                        launchSingleTop = true
+                                        restoreState = true
                                     }
-                                    launchSingleTop = true
-                                    restoreState = true
                                 }
-                            },
-                            icon = {
+                            ) {
                                 Icon(
                                     imageVector = if (isSelected) {
                                         destination.selectedIcon
                                     } else {
                                         destination.unselectedIcon
                                     },
-                                    contentDescription = destination.label
+                                    contentDescription = destination.label,
+                                    tint = if (isSelected) {
+                                        MaterialTheme.colorScheme.primary
+                                    } else {
+                                        MaterialTheme.colorScheme.onSurfaceVariant
+                                    }
                                 )
-                            },
-                            label = null
-                        )
+                            }
+                        }
                     }
                 }
             }