diff --git a/app/src/main/java/com/ohnalmwo/ondosee/navigation/OndoseeNavhost.kt b/app/src/main/java/com/ohnalmwo/ondosee/navigation/OndoseeNavhost.kt
index 4b2a420..59ea60a 100644
--- a/app/src/main/java/com/ohnalmwo/ondosee/navigation/OndoseeNavhost.kt
+++ b/app/src/main/java/com/ohnalmwo/ondosee/navigation/OndoseeNavhost.kt
@@ -1,29 +1,62 @@
 package com.ohnalmwo.ondosee.navigation
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.unit.dp
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
+import com.ohnalmwo.design_system.theme.OndoseeTheme.colors
 import com.ohnalmwo.model.enum.Route
+import dev.chrisbanes.haze.HazeState
+import dev.chrisbanes.haze.haze
 
 @Composable
 fun OndoseeNavHost(
     modifier: Modifier = Modifier,
+    hazeState: HazeState,
     navController: NavHostController
 ) {
     NavHost(
         navController = navController,
         startDestination = Route.Main,
-        modifier = modifier
+        modifier = modifier.haze(state = hazeState)
     ) {
-        composable<Route.Main>{
-
+        composable<Route.Main> {
+            Box(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .height(600.dp)
+                    .background(
+                        brush = Brush.linearGradient(
+                            colors = colors.BACKGROUND_RAIN
+                        )
+                    )
+            ) {
+                LazyColumn {
+                    items(10) {
+                        Box(
+                            modifier = Modifier
+                                .size(100.dp)
+                                .background(colors.BLACK)
+                        )
+                        Spacer(modifier = Modifier.size(50.dp))
+                    }
+                }
+            }
         }
-        composable<Route.Weekly>{
+        composable<Route.Weekly> {
 
         }
-        composable<Route.Setting>{
+        composable<Route.Setting> {
 
         }
     }
diff --git a/app/src/main/java/com/ohnalmwo/ondosee/ui/OndoseeApp.kt b/app/src/main/java/com/ohnalmwo/ondosee/ui/OndoseeApp.kt
index 6a90f69..845c64a 100644
--- a/app/src/main/java/com/ohnalmwo/ondosee/ui/OndoseeApp.kt
+++ b/app/src/main/java/com/ohnalmwo/ondosee/ui/OndoseeApp.kt
@@ -1,61 +1,36 @@
 package com.ohnalmwo.ondosee.ui
 
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Brush
-import androidx.compose.ui.unit.dp
+import androidx.compose.runtime.remember
 import androidx.navigation.compose.rememberNavController
 import com.ohnalmwo.design_system.component.bottombar.BottomNavigationBar
 import com.ohnalmwo.design_system.theme.OndoseeTheme
-import com.ohnalmwo.design_system.theme.OndoseeTheme.colors
 import com.ohnalmwo.model.enum.ThemeType
 import com.ohnalmwo.ondosee.navigation.OndoseeNavHost
+import dev.chrisbanes.haze.HazeState
 
 @Composable
 fun OndoseeApp() {
 
     val navController = rememberNavController()
+    val hazeState = remember { HazeState() }
 
     OndoseeTheme(themeMode = ThemeType.SYSTEM) {
         CompositionLocalProvider {
             Scaffold(
                 bottomBar = {
-                    BottomNavigationBar(navController = navController)
-                }
-            ) { innerPadding ->
-                OndoseeNavHost(navController = navController)
-                Box(
-                    modifier = Modifier
-                        .fillMaxSize()
-                        .height(600.dp)
-                        .padding(innerPadding)
-                        .background(
-                            brush = Brush.linearGradient(
-                                colors = colors.BACKGROUND_RAIN
-                            )
-                        )
-                ) {
-                    LazyColumn {
-                        items(10) {
-                            Box(
-                                modifier = Modifier
-                                    .size(100.dp)
-                                    .background(colors.BLACK)
-                            )
-                            Spacer(modifier = Modifier.size(50.dp))
-                        }
-                    }
+                    BottomNavigationBar(
+                        hazeState = hazeState,
+                        navController = navController
+                    )
                 }
+            ) { _ ->
+                OndoseeNavHost(
+                    hazeState = hazeState,
+                    navController = navController
+                )
             }
         }
     }
diff --git a/core/design-system/src/main/java/com/ohnalmwo/design_system/component/bottombar/BottomNavigationBar.kt b/core/design-system/src/main/java/com/ohnalmwo/design_system/component/bottombar/BottomNavigationBar.kt
index 23ba6ab..180583d 100644
--- a/core/design-system/src/main/java/com/ohnalmwo/design_system/component/bottombar/BottomNavigationBar.kt
+++ b/core/design-system/src/main/java/com/ohnalmwo/design_system/component/bottombar/BottomNavigationBar.kt
@@ -4,7 +4,7 @@ import androidx.compose.animation.core.Spring
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.animation.core.spring
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
@@ -12,6 +12,7 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -21,9 +22,11 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.scale
+import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.navigation.NavController
 import androidx.navigation.NavDestination.Companion.hasRoute
@@ -31,10 +34,14 @@ import androidx.navigation.NavDestination.Companion.hierarchy
 import androidx.navigation.compose.currentBackStackEntryAsState
 import com.ohnalmwo.design_system.theme.OndoseeTheme.colors
 import com.ohnalmwo.design_system.theme.OndoseeTheme.typography
+import dev.chrisbanes.haze.HazeState
+import dev.chrisbanes.haze.HazeStyle
+import dev.chrisbanes.haze.hazeChild
 
 @Composable
 fun BottomNavigationBar(
     modifier: Modifier = Modifier,
+    hazeState: HazeState,
     navController: NavController,
 ) {
     val bottomBarItems = listOf(
@@ -49,7 +56,23 @@ fun BottomNavigationBar(
         modifier = modifier
             .fillMaxWidth()
             .height(60.dp)
-            .background(color = colors.BLACK)
+            .hazeChild(
+                state = hazeState,
+                shape = RoundedCornerShape(topStart = 12.dp, topEnd = 12.dp),
+                style = HazeStyle(
+                    tint = colors.WHITE.copy(.2f),
+                )
+            )
+            .border(
+                width = Dp.Hairline,
+                brush = Brush.verticalGradient(
+                    colors = listOf(
+                        colors.WHITE.copy(alpha = .8f),
+                        colors.WHITE.copy(alpha = .2f),
+                    ),
+                ),
+                shape = RoundedCornerShape(topStart = 12.dp, topEnd = 12.dp)
+            )
     ) {
         bottomBarItems.forEach { bottomBarItem ->
             val isSelected = currentDestination?.hierarchy?.any {