diff --git a/app/src/main/kotlin/com/imashnake/animite/features/MainActivity.kt b/app/src/main/kotlin/com/imashnake/animite/features/MainActivity.kt
index fd327a26..9559c6cc 100644
--- a/app/src/main/kotlin/com/imashnake/animite/features/MainActivity.kt
+++ b/app/src/main/kotlin/com/imashnake/animite/features/MainActivity.kt
@@ -6,26 +6,20 @@ import android.view.WindowManager
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
-import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.ExperimentalSharedTransitionApi
 import androidx.compose.animation.SharedTransitionLayout
-import androidx.compose.animation.slideInVertically
-import androidx.compose.animation.slideOutVertically
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
-import androidx.navigation.compose.currentBackStackEntryAsState
 import androidx.navigation.compose.rememberNavController
 import androidx.navigation.navDeepLink
 import com.imashnake.animite.api.anilist.sanitize.media.MediaList
@@ -35,8 +29,6 @@ import com.imashnake.animite.features.media.MediaPage
 import com.imashnake.animite.features.searchbar.SearchFrontDrop
 import com.imashnake.animite.features.theme.AnimiteTheme
 import com.imashnake.animite.navigation.HomeRoute
-import com.imashnake.animite.navigation.NavigationBar
-import com.imashnake.animite.navigation.NavigationBarPaths
 import com.imashnake.animite.navigation.ProfileRoute
 import com.imashnake.animite.navigation.SocialRoute
 import com.imashnake.animite.profile.ProfileScreen
@@ -68,31 +60,23 @@ class MainActivity : ComponentActivity() {
     }
 }
 
-@OptIn(ExperimentalSharedTransitionApi::class)
+@OptIn(ExperimentalSharedTransitionApi::class, ExperimentalSharedTransitionApi::class)
 @Composable
 fun MainScreen(modifier: Modifier = Modifier) {
     val navController = rememberNavController()
 
-    val currentBackStackEntry by navController.currentBackStackEntryAsState()
-    val isNavBarVisible = remember(currentBackStackEntry) {
-        if (currentBackStackEntry != null) {
-            NavigationBarPaths.entries.any { it.matchesDestination(currentBackStackEntry!!) }
-        } else {
-            false
-        }
-    }
-
     // TODO: Refactor to use Scaffold once AnimatedVisibility issues are fixed;
     //  see https://issuetracker.google.com/issues/258270139.
-    Box(modifier) {
-        CompositionLocalProvider(
-            LocalContentColor provides MaterialTheme.colorScheme.onBackground
-        ) {
+    Scaffold(
+        modifier = modifier,
+        contentWindowInsets = WindowInsets(0)
+    ) {
+        Box(Modifier.padding(it)) {
             SharedTransitionLayout {
                 NavHost(navController = navController, startDestination = HomeRoute) {
                     composable<HomeRoute> {
                         HomeScreen(
-                            onNavigateToMediaItem = { navController.navigate(it) },
+                            navController = navController,
                             sharedTransitionScope = this@SharedTransitionLayout,
                             animatedVisibilityScope = this,
                         )
@@ -108,42 +92,33 @@ fun MainScreen(modifier: Modifier = Modifier) {
                             navDeepLink { uriPattern = ANILIST_AUTH_DEEPLINK }
                         )
                     ) {
-                        ProfileScreen()
+                        ProfileScreen(navController)
                     }
                     composable<SocialRoute> {
-                        SocialScreen()
+                        SocialScreen(navController)
                     }
                 }
             }
-        }
 
-        SearchFrontDrop(
-            hasExtraPadding = isNavBarVisible,
-            onItemClick = { id, mediaType ->
-                navController.navigate(
-                    MediaPage(
-                        id = id,
-                        source = MediaList.Type.SEARCH.name,
-                        mediaType.rawValue
+            SearchFrontDrop(
+                hasExtraPadding = true,
+                onItemClick = { id, mediaType ->
+                    navController.navigate(
+                        MediaPage(
+                            id = id,
+                            source = MediaList.Type.SEARCH.name,
+                            mediaType.rawValue
+                        )
                     )
-                )
-            },
-            modifier = Modifier
-                .align(Alignment.BottomEnd)
-                .padding(
-                    start = LocalPaddings.current.large,
-                    end = LocalPaddings.current.large,
-                    bottom = LocalPaddings.current.large
-                )
-        )
-
-        AnimatedVisibility(
-            visible = isNavBarVisible,
-            modifier = Modifier.align(Alignment.BottomCenter),
-            enter = slideInVertically { it },
-            exit = slideOutVertically { it }
-        ) {
-            NavigationBar(navController = navController)
+                },
+                modifier = Modifier
+                    .align(Alignment.BottomEnd)
+                    .padding(
+                        start = LocalPaddings.current.large,
+                        end = LocalPaddings.current.large,
+                        bottom = LocalPaddings.current.large
+                    )
+            )
         }
     }
 }
diff --git a/app/src/main/kotlin/com/imashnake/animite/features/home/HomeScreen.kt b/app/src/main/kotlin/com/imashnake/animite/features/home/HomeScreen.kt
index 386820f1..5611f3ff 100644
--- a/app/src/main/kotlin/com/imashnake/animite/features/home/HomeScreen.kt
+++ b/app/src/main/kotlin/com/imashnake/animite/features/home/HomeScreen.kt
@@ -54,6 +54,7 @@ import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.util.fastForEach
 import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.navigation.NavHostController
 import com.imashnake.animite.R
 import com.imashnake.animite.api.anilist.sanitize.media.Media
 import com.imashnake.animite.api.anilist.sanitize.media.MediaList
@@ -73,6 +74,8 @@ import com.imashnake.animite.navigation.SharedContentKey.Component.Image
 import com.imashnake.animite.navigation.SharedContentKey.Component.Page
 import com.imashnake.animite.navigation.SharedContentKey.Component.Text
 import com.imashnake.animite.features.media.MediaPage
+import com.imashnake.animite.navigation.NavigationBarPaths
+import com.imashnake.animite.navigation.NavigationScaffold
 import com.imashnake.animite.core.R as coreR
 import com.imashnake.animite.navigation.R as navigationR
 
@@ -80,7 +83,7 @@ import com.imashnake.animite.navigation.R as navigationR
 @Composable
 @Suppress("LongMethod")
 fun HomeScreen(
-    onNavigateToMediaItem: (MediaPage) -> Unit,
+    navController: NavHostController,
     sharedTransitionScope: SharedTransitionScope,
     animatedVisibilityScope: AnimatedVisibilityScope,
     viewModel: HomeViewModel = hiltViewModel(),
@@ -100,129 +103,134 @@ fun HomeScreen(
         allTimePopularList,
     )
 
-    when {
-        rows.all { it is Resource.Success } -> {
-            val scrollState = rememberScrollState()
-            TranslucentStatusBarLayout(scrollState) {
-                Box(
-                    modifier = Modifier
-                        .verticalScroll(scrollState)
-                        .navigationBarsPadding()
-                ) {
-                    BannerLayout(
-                        banner = { bannerModifier ->
-                            Box {
-                                Image(
-                                    painter = painterResource(R.drawable.background),
-                                    contentDescription = null,
-                                    modifier = bannerModifier.bannerParallax(scrollState),
-                                    contentScale = ContentScale.Crop,
-                                    alignment = Alignment.TopCenter
-                                )
+    NavigationScaffold(
+        navController = navController,
+        selectedDestination = NavigationBarPaths.Home
+    ) {
+        when {
+            rows.all { it is Resource.Success } -> {
+                val scrollState = rememberScrollState()
+                TranslucentStatusBarLayout(scrollState) {
+                    Box(
+                        modifier = Modifier
+                            .verticalScroll(scrollState)
+                            .navigationBarsPadding()
+                    ) {
+                        BannerLayout(
+                            banner = { bannerModifier ->
+                                Box {
+                                    Image(
+                                        painter = painterResource(R.drawable.background),
+                                        contentDescription = null,
+                                        modifier = bannerModifier.bannerParallax(scrollState),
+                                        contentScale = ContentScale.Crop,
+                                        alignment = Alignment.TopCenter
+                                    )
 
-                                Box(
-                                    modifier = bannerModifier.background(
-                                        Brush.verticalGradient(
-                                            listOf(
-                                                Color.Transparent,
-                                                MaterialTheme.colorScheme.secondaryContainer
-                                                    .copy(alpha = 0.5f)
+                                    Box(
+                                        modifier = bannerModifier.background(
+                                            Brush.verticalGradient(
+                                                listOf(
+                                                    Color.Transparent,
+                                                    MaterialTheme.colorScheme.secondaryContainer
+                                                        .copy(alpha = 0.5f)
+                                                )
                                             )
                                         )
                                     )
-                                )
 
-                                Row(
-                                    modifier = Modifier
-                                        .fillMaxWidth()
-                                        .align(Alignment.BottomCenter),
-                                    horizontalArrangement = Arrangement.SpaceBetween,
-                                    verticalAlignment = Alignment.CenterVertically
-                                ) {
-                                    Text(
-                                        text = stringResource(R.string.okaeri),
-                                        color = MaterialTheme.colorScheme.onSecondaryContainer,
-                                        style = MaterialTheme.typography.displayMedium,
+                                    Row(
                                         modifier = Modifier
-                                            .padding(
-                                                start = LocalPaddings.current.large,
-                                                bottom = LocalPaddings.current.medium
-                                            )
-                                            .landscapeCutoutPadding()
-                                            .weight(1f, fill = false),
-                                        maxLines = 1
-                                    )
+                                            .fillMaxWidth()
+                                            .align(Alignment.BottomCenter),
+                                        horizontalArrangement = Arrangement.SpaceBetween,
+                                        verticalAlignment = Alignment.CenterVertically
+                                    ) {
+                                        Text(
+                                            text = stringResource(R.string.okaeri),
+                                            color = MaterialTheme.colorScheme.onSecondaryContainer,
+                                            style = MaterialTheme.typography.displayMedium,
+                                            modifier = Modifier
+                                                .padding(
+                                                    start = LocalPaddings.current.large,
+                                                    bottom = LocalPaddings.current.medium
+                                                )
+                                                .landscapeCutoutPadding()
+                                                .weight(1f, fill = false),
+                                            maxLines = 1
+                                        )
 
-                                    MediaTypeSelector(
-                                        modifier = Modifier
-                                            .padding(
-                                                end = LocalPaddings.current.large,
-                                                bottom = LocalPaddings.current.medium
-                                            )
-                                            .landscapeCutoutPadding(),
-                                        selectedOption = homeMediaType,
-                                        viewModel = viewModel
-                                    )
+                                        MediaTypeSelector(
+                                            modifier = Modifier
+                                                .padding(
+                                                    end = LocalPaddings.current.large,
+                                                    bottom = LocalPaddings.current.medium
+                                                )
+                                                .landscapeCutoutPadding(),
+                                            selectedOption = homeMediaType,
+                                            viewModel = viewModel
+                                        )
+                                    }
                                 }
-                            }
-                        },
-                        content = {
-                            rows.fastForEach { row ->
-                                row.data?.let {
-                                    AnimatedContent(
-                                        targetState = it,
-                                        transitionSpec = {
-                                            fadeIn(tween(750))
-                                                .togetherWith(fadeOut(tween(750)))
-                                        },
-                                        label = "animate_home_row"
-                                    ) { mediaList ->
-                                        if (mediaList.list.isNotEmpty())
-                                            HomeRow(
-                                                list = mediaList.list,
-                                                type = mediaList.type,
-                                                onItemClicked = { media ->
-                                                    onNavigateToMediaItem(
-                                                        MediaPage(
-                                                            id = media.id,
-                                                            source = mediaList.type.name,
-                                                            mediaType = homeMediaType.value.rawValue,
+                            },
+                            content = {
+                                rows.fastForEach { row ->
+                                    row.data?.let {
+                                        AnimatedContent(
+                                            targetState = it,
+                                            transitionSpec = {
+                                                fadeIn(tween(750))
+                                                    .togetherWith(fadeOut(tween(750)))
+                                            },
+                                            label = "animate_home_row"
+                                        ) { mediaList ->
+                                            if (mediaList.list.isNotEmpty())
+                                                HomeRow(
+                                                    list = mediaList.list,
+                                                    type = mediaList.type,
+                                                    onItemClicked = { media ->
+                                                        navController.navigate(
+                                                            MediaPage(
+                                                                id = media.id,
+                                                                source = mediaList.type.name,
+                                                                mediaType = homeMediaType.value.rawValue,
+                                                            )
                                                         )
+                                                    },
+                                                    sharedTransitionScope = sharedTransitionScope,
+                                                    animatedVisibilityScope = animatedVisibilityScope,
+                                                    modifier = Modifier.padding(
+                                                        vertical = LocalPaddings.current.large / 2
                                                     )
-                                                },
-                                                sharedTransitionScope = sharedTransitionScope,
-                                                animatedVisibilityScope = animatedVisibilityScope,
-                                                modifier = Modifier.padding(
-                                                    vertical = LocalPaddings.current.large / 2
                                                 )
-                                            )
-                                        else
+                                            else
                                             /* With this, AnimatedContent shrinks/expands the
                                             `HomeRow` vertically. */
-                                            Box(Modifier.fillMaxWidth())
+                                                Box(Modifier.fillMaxWidth())
+                                        }
                                     }
                                 }
-                            }
-                        },
-                        contentModifier = Modifier.padding(
-                            top = LocalPaddings.current.large / 2,
-                            bottom = LocalPaddings.current.large / 2 +
-                                    dimensionResource(navigationR.dimen.navigation_bar_height)
-                        ),
-                        verticalArrangement = Arrangement.spacedBy(0.dp)
-                    )
+                            },
+                            contentModifier = Modifier.padding(
+                                top = LocalPaddings.current.large / 2,
+                                bottom = LocalPaddings.current.large / 2 +
+                                        dimensionResource(navigationR.dimen.navigation_bar_height)
+                            ),
+                            verticalArrangement = Arrangement.spacedBy(0.dp)
+                        )
+                    }
                 }
             }
-        }
 
-        else -> {
-            Box(
-                contentAlignment = Alignment.Center,
-                modifier = Modifier
-                    .fillMaxSize()
-                    .background(MaterialTheme.colorScheme.background)
-            ) {
-                ProgressIndicator()
+            else -> {
+                Box(
+                    contentAlignment = Alignment.Center,
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .background(MaterialTheme.colorScheme.background)
+                ) {
+                    ProgressIndicator()
+                }
             }
         }
     }
diff --git a/app/src/main/kotlin/com/imashnake/animite/features/searchbar/SearchFrontDrop.kt b/app/src/main/kotlin/com/imashnake/animite/features/searchbar/SearchFrontDrop.kt
index 498d3405..d4bb85b8 100644
--- a/app/src/main/kotlin/com/imashnake/animite/features/searchbar/SearchFrontDrop.kt
+++ b/app/src/main/kotlin/com/imashnake/animite/features/searchbar/SearchFrontDrop.kt
@@ -54,8 +54,7 @@ import com.imashnake.animite.navigation.R as navigationR
 /**
  * Search bar along with a Front Drop list.
  *
- * @param hasExtraPadding if the search bar should have extra bottom padding to accommodate the
- * [com.imashnake.animite.navigation.NavigationBar].
+ * @param hasExtraPadding if the search bar should have extra bottom padding to accommodate the bottom navigation bar.
  * @param onItemClick called when media with an ID and [MediaType] is clicked.
  * @param modifier the [Modifier] to be applied to this Front Drop.
  * @param viewModel [SearchViewModel] instance.
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
index 6678b553..49c241ec 100644
--- a/gradle/libs.versions.toml
+++ b/gradle/libs.versions.toml
@@ -41,7 +41,7 @@ datastore = "1.1.1"
 
 # COIL
 # https://github.com/coil-kt/coil/blob/main/CHANGELOG.md.
-coil = "2.7.0"
+coil = "2.6.0"
 
 # Compose
 # https://developer.android.com/jetpack/androidx/releases/compose.
@@ -49,6 +49,7 @@ composeAnimation = "1.7.6"
 composeFoundation = "1.7.6"
 composeMaterial = "1.7.6"
 composeMaterial3 = "1.3.1"
+composeMaterial3AdaptivenavigationSuite = "1.3.1"
 composeRuntime = "1.7.6"
 composeUi = "1.7.6"
 
@@ -97,6 +98,7 @@ compose-animation = { group = "androidx.compose.animation", name = "animation",
 compose-foundation = { group = "androidx.compose.foundation", name = "foundation", version.ref = "composeFoundation" }
 compose-material = { group = "androidx.compose.material", name = "material", version.ref = "composeMaterial" }
 compose-material3 = { group = "androidx.compose.material3", name = "material3", version.ref = "composeMaterial3" }
+compose-material3-adaptiveNavigation = { group = "androidx.compose.material3", name = "material3-adaptive-navigation-suite", version.ref = "composeMaterial3AdaptivenavigationSuite" }
 compose-runtime = { group = "androidx.compose.runtime", name = "runtime", version.ref = "composeRuntime" }
 compose-ui = { group = "androidx.compose.ui", name = "ui", version.ref = "composeUi" }
 compose-ui-text-googleFonts = { group = "androidx.compose.ui", name = "ui-text-google-fonts", version.ref = "composeUi" }
diff --git a/navigation/build.gradle.kts b/navigation/build.gradle.kts
index c3c3c685..44f9ebd8 100644
--- a/navigation/build.gradle.kts
+++ b/navigation/build.gradle.kts
@@ -25,6 +25,7 @@ kotlin {
 
 dependencies {
     api(libs.androidx.navigationCompose)
+    api(libs.compose.material3.adaptiveNavigation)
     implementation(libs.bundles.compose)
     implementation(libs.compose.material)
     debugImplementation(libs.compose.ui.tooling)
diff --git a/navigation/src/main/kotlin/com/imashnake/animite/navigation/NavigationBar.kt b/navigation/src/main/kotlin/com/imashnake/animite/navigation/NavigationBar.kt
deleted file mode 100644
index b33c2d83..00000000
--- a/navigation/src/main/kotlin/com/imashnake/animite/navigation/NavigationBar.kt
+++ /dev/null
@@ -1,125 +0,0 @@
-package com.imashnake.animite.navigation
-
-import android.content.res.Configuration
-import androidx.annotation.StringRes
-import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.asPaddingValues
-import androidx.compose.foundation.layout.displayCutout
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.navigationBars
-import androidx.compose.foundation.layout.navigationBarsPadding
-import androidx.compose.material3.Icon
-import androidx.compose.material3.NavigationBar
-import androidx.compose.material3.NavigationBarItem
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.remember
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.vector.ImageVector
-import androidx.compose.ui.platform.LocalConfiguration
-import androidx.compose.ui.res.dimensionResource
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.res.vectorResource
-import androidx.compose.ui.unit.dp
-import androidx.navigation.NavBackStackEntry
-import androidx.navigation.NavController
-import androidx.navigation.NavDestination.Companion.hasRoute
-import androidx.navigation.NavDestination.Companion.hierarchy
-import androidx.navigation.NavGraph.Companion.findStartDestination
-import androidx.navigation.compose.currentBackStackEntryAsState
-
-@Composable
-fun NavigationBar(
-    navController: NavController
-) {
-    val currentBackStackEntry by navController.currentBackStackEntryAsState()
-
-    // TODO: Can we use `navigationBarsPadding()` instead?
-    NavigationBar(
-        Modifier.height(
-            dimensionResource(R.dimen.navigation_bar_height) + WindowInsets
-                .navigationBars
-                .asPaddingValues()
-                .calculateBottomPadding()
-        ),
-        // TODO: Use a `NavigationRail` instead.
-        windowInsets = if (LocalConfiguration.current.orientation
-            == Configuration.ORIENTATION_LANDSCAPE
-        ) { WindowInsets.displayCutout } else { WindowInsets(0.dp) }
-    ) {
-        NavigationBarPaths.entries.forEach { destination ->
-            val selected = remember(destination, currentBackStackEntry) {
-                currentBackStackEntry?.let { destination.matchesDestination(it) } ?: false
-            }
-            NavigationBarItem(
-                modifier = Modifier.navigationBarsPadding(),
-                selected = selected,
-                onClick = {
-                    if (!selected) destination.navigateTo(navController)
-                },
-                icon = destination.icon
-            )
-        }
-    }
-}
-
-enum class NavigationBarPaths(
-    val navigateTo: (NavController) -> Unit,
-    val matchesDestination: (NavBackStackEntry) -> Boolean,
-    val icon: @Composable () -> Unit,
-    @StringRes val labelRes: Int
-) {
-    Social(
-        navigateTo = {
-            it.navigate(SocialRoute) {
-                popUpTo(id = it.graph.findStartDestination().id) {
-                    saveState = true
-                }
-                launchSingleTop = true
-            }
-        },
-        matchesDestination = {
-            it.destination.hierarchy.any { it.hasRoute(SocialRoute::class) }
-        },
-        icon = {
-            Icon(ImageVector.vectorResource(R.drawable.social), contentDescription = stringResource(R.string.social))
-        },
-        labelRes = R.string.social
-    ),
-    Home(
-        navigateTo = {
-            it.navigate(HomeRoute) {
-                popUpTo(id = it.graph.findStartDestination().id) {
-                    saveState = true
-                    inclusive = true
-                }
-                launchSingleTop = true
-            }
-        },
-        matchesDestination = {
-            it.destination.hierarchy.any { it.hasRoute(HomeRoute::class) }
-        },
-        icon = {
-            Icon(ImageVector.vectorResource(R.drawable.home), contentDescription = stringResource(R.string.home))
-        },
-        labelRes = R.string.home
-    ),
-
-    Profile(
-        navigateTo = {
-            it.navigate(ProfileRoute()) {
-                popUpTo(id = it.graph.findStartDestination().id) {
-                    saveState = true
-                }
-                launchSingleTop = true
-            }
-        },
-        matchesDestination = {
-            it.destination.hierarchy.any { it.hasRoute(ProfileRoute::class) }
-        },
-        icon = {
-            Icon(ImageVector.vectorResource(R.drawable.profile), contentDescription = stringResource(R.string.profile))
-        },
-        labelRes = R.string.profile
-    ),
-}
\ No newline at end of file
diff --git a/navigation/src/main/kotlin/com/imashnake/animite/navigation/NavigationBarPaths.kt b/navigation/src/main/kotlin/com/imashnake/animite/navigation/NavigationBarPaths.kt
new file mode 100644
index 00000000..31037ba4
--- /dev/null
+++ b/navigation/src/main/kotlin/com/imashnake/animite/navigation/NavigationBarPaths.kt
@@ -0,0 +1,37 @@
+package com.imashnake.animite.navigation
+
+import androidx.annotation.StringRes
+import androidx.compose.material3.Icon
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.res.vectorResource
+
+enum class NavigationBarPaths(
+    val route: Any,
+    val icon: @Composable () -> Unit,
+    @StringRes val labelRes: Int
+) {
+    Social(
+        route = SocialRoute,
+        icon = {
+            Icon(ImageVector.vectorResource(R.drawable.social), contentDescription = stringResource(R.string.social))
+        },
+        labelRes = R.string.social
+    ),
+    Home(
+        route = HomeRoute,
+        icon = {
+            Icon(ImageVector.vectorResource(R.drawable.home), contentDescription = stringResource(R.string.home))
+        },
+        labelRes = R.string.home
+    ),
+
+    Profile(
+        route = ProfileRoute(),
+        icon = {
+            Icon(ImageVector.vectorResource(R.drawable.profile), contentDescription = stringResource(R.string.profile))
+        },
+        labelRes = R.string.profile
+    ),
+}
\ No newline at end of file
diff --git a/navigation/src/main/kotlin/com/imashnake/animite/navigation/NavigationScaffold.kt b/navigation/src/main/kotlin/com/imashnake/animite/navigation/NavigationScaffold.kt
new file mode 100644
index 00000000..07d0a0db
--- /dev/null
+++ b/navigation/src/main/kotlin/com/imashnake/animite/navigation/NavigationScaffold.kt
@@ -0,0 +1,42 @@
+package com.imashnake.animite.navigation
+
+import androidx.compose.material3.adaptive.currentWindowAdaptiveInfo
+import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteScaffold
+import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteScaffoldDefaults
+import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteType
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.navigation.NavDestination.Companion.hasRoute
+import androidx.navigation.NavHostController
+
+@Composable
+fun NavigationScaffold(
+    navController: NavHostController,
+    selectedDestination: NavigationBarPaths,
+    modifier: Modifier = Modifier,
+    layoutType: NavigationSuiteType =
+        NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(currentWindowAdaptiveInfo()),
+    content: @Composable () -> Unit
+) {
+    NavigationSuiteScaffold(
+        layoutType = layoutType,
+        navigationSuiteItems = {
+            NavigationBarPaths.entries.forEach { destination ->
+                val selected = destination == selectedDestination
+                item(
+                    selected = selected,
+                    onClick = {
+                        if (!selected) {
+                            navController.navigate(destination.route) {
+                                popUpTo(HomeRoute)
+                            }
+                        }
+                    },
+                    icon = destination.icon
+                )
+            }
+        },
+        modifier = modifier,
+        content = content
+    )
+}
diff --git a/profile/src/main/kotlin/com/imashnake/animite/profile/ProfileScreen.kt b/profile/src/main/kotlin/com/imashnake/animite/profile/ProfileScreen.kt
index 3ac63314..e8cfdc63 100644
--- a/profile/src/main/kotlin/com/imashnake/animite/profile/ProfileScreen.kt
+++ b/profile/src/main/kotlin/com/imashnake/animite/profile/ProfileScreen.kt
@@ -30,6 +30,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.navigation.NavHostController
 import coil.compose.AsyncImage
 import com.boswelja.markdown.material3.MarkdownDocument
 import com.boswelja.markdown.material3.m3TextStyles
@@ -42,6 +43,8 @@ import com.imashnake.animite.core.extensions.maxHeight
 import com.imashnake.animite.core.ui.LocalPaddings
 import com.imashnake.animite.core.ui.NestedScrollableContent
 import com.imashnake.animite.core.ui.layouts.BannerLayout
+import com.imashnake.animite.navigation.NavigationBarPaths
+import com.imashnake.animite.navigation.NavigationScaffold
 import com.imashnake.animite.profile.tabs.AboutTab
 import com.imashnake.animite.profile.tabs.AnimeTab
 import com.imashnake.animite.profile.tabs.ProfileTabs
@@ -52,17 +55,16 @@ import com.imashnake.animite.navigation.R as navigationR
 @Suppress("LongMethod")
 @Composable
 fun ProfileScreen(
+    navController: NavHostController,
     viewModel: ProfileViewModel = hiltViewModel(),
 ) {
     val isLoggedIn by viewModel.isLoggedIn.collectAsState(initial = false)
     val viewer by viewModel.viewer.collectAsState()
     val viewerMediaLists by viewModel.viewerMediaList.collectAsState(initial = null)
 
-    Box(
-        contentAlignment = Alignment.Center,
-        modifier = Modifier
-            .fillMaxSize()
-            .background(MaterialTheme.colorScheme.background)
+    NavigationScaffold(
+        navController = navController,
+        selectedDestination = NavigationBarPaths.Profile
     ) {
         when {
             isLoggedIn -> viewer.data?.run {
diff --git a/social/build.gradle.kts b/social/build.gradle.kts
index a9e352f5..c544075c 100644
--- a/social/build.gradle.kts
+++ b/social/build.gradle.kts
@@ -25,6 +25,7 @@ kotlin {
 }
 
 dependencies {
+    implementation(projects.navigation)
     implementation(projects.core)
 
     // AndroidX
diff --git a/social/src/main/kotlin/com/imashnake/animite/social/SocialScreen.kt b/social/src/main/kotlin/com/imashnake/animite/social/SocialScreen.kt
index bcb67095..bbf15c89 100644
--- a/social/src/main/kotlin/com/imashnake/animite/social/SocialScreen.kt
+++ b/social/src/main/kotlin/com/imashnake/animite/social/SocialScreen.kt
@@ -1,32 +1,30 @@
 package com.imashnake.animite.social
 
-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.fillMaxSize
 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
 import androidx.compose.ui.res.stringResource
+import androidx.navigation.NavHostController
 import com.imashnake.animite.core.ui.LocalPaddings
-import kotlinx.serialization.Serializable
+import com.imashnake.animite.navigation.NavigationBarPaths
+import com.imashnake.animite.navigation.NavigationScaffold
 import com.imashnake.animite.core.R as coreR
 
 @Composable
-fun SocialScreen() {
-    Box(
-        contentAlignment = Alignment.Center,
-        modifier = Modifier
-            .fillMaxSize()
-            .background(MaterialTheme.colorScheme.background)
+fun SocialScreen(
+    navController: NavHostController
+) {
+    NavigationScaffold(
+        navController = navController,
+        selectedDestination = NavigationBarPaths.Social
     ) {
         Column(
             horizontalAlignment = Alignment.CenterHorizontally,
             verticalArrangement = Arrangement.spacedBy(
-                LocalPaddings.current.tiny
+                LocalPaddings.current.tiny, Alignment.CenterVertically
             )
         ) {
             Text(