diff --git a/lib/modules/root/spotube_navigation_bar.dart b/lib/modules/root/spotube_navigation_bar.dart
index 978891b8..c2cf4b5a 100644
--- a/lib/modules/root/spotube_navigation_bar.dart
+++ b/lib/modules/root/spotube_navigation_bar.dart
@@ -1,10 +1,8 @@
-import 'dart:ui';
-
-import 'package:curved_navigation_bar/curved_navigation_bar.dart';
-import 'package:flutter/material.dart';
+import 'package:flutter/material.dart' show Badge;
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:shadcn_flutter/shadcn_flutter.dart';
 
 import 'package:spotube/collections/side_bar_tiles.dart';
 import 'package:spotube/extensions/constrains.dart';
@@ -25,7 +23,6 @@ class SpotubeNavigationBar extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, ref) {
-    final theme = Theme.of(context);
     final routerState = GoRouterState.of(context);
 
     final downloadCount = ref.watch(downloadManagerProvider).$downloadCount;
@@ -33,11 +30,6 @@ class SpotubeNavigationBar extends HookConsumerWidget {
     final layoutMode =
         ref.watch(userPreferencesProvider.select((s) => s.layoutMode));
 
-    final buttonColor = useBrightnessValue(
-      theme.colorScheme.inversePrimary,
-      theme.colorScheme.primary.withOpacity(0.2),
-    );
-
     final navbarTileList = useMemoized(
       () => getNavbarTileList(context.l10n),
       [context.l10n],
@@ -61,42 +53,21 @@ class SpotubeNavigationBar extends HookConsumerWidget {
 
     return AnimatedContainer(
       duration: const Duration(milliseconds: 100),
-      height: panelHeight,
-      child: ClipRect(
-        child: BackdropFilter(
-          filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
-          child: CurvedNavigationBar(
-            backgroundColor:
-                theme.colorScheme.secondaryContainer.withOpacity(0.72),
-            buttonBackgroundColor: buttonColor,
-            color: theme.colorScheme.surface,
-            height: panelHeight,
-            animationDuration: const Duration(milliseconds: 350),
-            items: navbarTileList.map(
-              (e) {
-                /// Using this [Builder] as an workaround for the first item's
-                /// icon color not updating unless navigating to another page
-                return Builder(builder: (context) {
-                  return MouseRegion(
-                    cursor: SystemMouseCursors.click,
-                    child: Badge(
-                      isLabelVisible: e.id == "library" && downloadCount > 0,
-                      label: Text(downloadCount.toString()),
-                      child: Icon(
-                        e.icon,
-                        color: Theme.of(context).colorScheme.primary,
-                      ),
-                    ),
-                  );
-                });
-              },
-            ).toList(),
-            index: selectedIndex,
-            onTap: (i) {
-              ServiceUtils.navigateNamed(context, navbarTileList[i].name);
-            },
-          ),
-        ),
+      child: NavigationBar(
+        index: selectedIndex,
+        onSelected: (i) {
+          ServiceUtils.navigateNamed(context, navbarTileList[i].name);
+        },
+        children: [
+          for (final tile in navbarTileList)
+            NavigationButton(
+              child: Badge(
+                isLabelVisible: tile.id == "library" && downloadCount > 0,
+                label: Text(downloadCount.toString()),
+                child: Icon(tile.icon),
+              ),
+            )
+        ],
       ),
     );
   }