diff --git a/lib/config/routes.dart b/lib/config/routes.dart
index 6f53ebf..178349b 100644
--- a/lib/config/routes.dart
+++ b/lib/config/routes.dart
@@ -14,6 +14,8 @@ import '../screens/channel_detail_screen.dart';
 import '../screens/video_player_screen.dart';
 import '../screens/search_screen.dart';
 import '../screens/queue_screen.dart';
+import '../widgets/adaptive_layout.dart';
+import 'theme.dart';
 
 final _rootNavigatorKey = GlobalKey<NavigatorState>();
 final _shellNavigatorKey = GlobalKey<NavigatorState>();
@@ -161,6 +163,34 @@ class _ScaffoldWithNav extends ConsumerWidget {
     final destinations = _destinations;
     final selectedIndex = _calculateSelectedIndex(context);
 
+    // Wide viewports (desktop/web, iPad landscape) get a side NavigationRail;
+    // phones keep the bottom nav.
+    if (AdaptiveLayout.isWide(context)) {
+      return Scaffold(
+        body: Row(
+          children: [
+            NavigationRail(
+              selectedIndex: selectedIndex,
+              onDestinationSelected: (index) =>
+                  context.go(destinations[index].route),
+              labelType: NavigationRailLabelType.all,
+              backgroundColor: NullFeedTheme.surfaceColor,
+              destinations: [
+                for (final d in destinations)
+                  NavigationRailDestination(
+                    icon: Icon(d.icon),
+                    selectedIcon: Icon(d.activeIcon),
+                    label: Text(d.label),
+                  ),
+              ],
+            ),
+            const VerticalDivider(width: 1),
+            Expanded(child: child),
+          ],
+        ),
+      );
+    }
+
     return Scaffold(
       body: child,
       bottomNavigationBar: BottomNavigationBar(
diff --git a/lib/widgets/adaptive_layout.dart b/lib/widgets/adaptive_layout.dart
index 5ce420e..7792684 100644
--- a/lib/widgets/adaptive_layout.dart
+++ b/lib/widgets/adaptive_layout.dart
@@ -31,7 +31,18 @@ class AdaptiveLayout extends StatelessWidget {
     };
   }
 
+  /// Breakpoint at/above which a side NavigationRail replaces the bottom nav
+  /// (desktop browsers, large windows, iPad landscape).
+  static const double wideBreakpoint = 900;
+
+  static bool isWide(BuildContext context) =>
+      MediaQuery.sizeOf(context).width >= wideBreakpoint;
+
   static int gridCrossAxisCount(BuildContext context) {
+    // Make use of wide desktop/web viewports instead of capping at 3.
+    final width = MediaQuery.sizeOf(context).width;
+    if (width >= 1500) return 5;
+    if (width >= 1150) return 4;
     return switch (getDeviceType(context)) {
       DeviceType.tablet => 3,
       DeviceType.phone => 2,