diff --git a/lib/presentation/pages/main_page.dart b/lib/presentation/pages/main_page.dart
index 6b27fe5..d32aaa4 100644
--- a/lib/presentation/pages/main_page.dart
+++ b/lib/presentation/pages/main_page.dart
@@ -1,46 +1,37 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import '../providers/navigation_provider.dart';
 import 'pokemon_list.dart';
 import 'guess_page.dart';
 
-class MainPage extends StatefulWidget {
+class MainPage extends ConsumerWidget {
   const MainPage({Key? key}) : super(key: key);
 
-  @override
-  State<MainPage> createState() => MainPageState();
-}
-
-class MainPageState extends State<MainPage> {
-  int _currentIndex = 0;
-
-  void setIndex(int index) {
-    setState(() {
-      _currentIndex = index;
-    });
-  }
-
-  final List<Widget> _pages = [
-    const PokemonListPage(),
-    const GuessPage(),
-    const Center(child: Text("SYSTEM PAGE placeholder")),
+  static const List<Widget> _pages = [
+    PokemonListPage(),
+    GuessPage(),
+    Center(child: Text("SYSTEM PAGE placeholder")),
   ];
 
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, WidgetRef ref) {
+    final currentIndex = ref.watch(selectedTabProvider);
+
     return Scaffold(
-      backgroundColor: const Color(0xFF1B2333), // Dark blue background behind the pokedex
+      backgroundColor: const Color(0xFF1B2333),
       body: SafeArea(
         child: Padding(
           padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 20.0),
           child: Container(
             decoration: BoxDecoration(
-              color: const Color(0xFFD32F2F), // Pokedex Red
+              color: const Color(0xFFD32F2F),
               borderRadius: BorderRadius.circular(30),
               border: Border.all(color: const Color(0xFFA12020), width: 4),
             ),
             child: ClipRRect(
               borderRadius: BorderRadius.circular(26),
               child: IndexedStack(
-                index: _currentIndex,
+                index: currentIndex,
                 children: _pages,
               ),
             ),
@@ -53,28 +44,15 @@ class MainPageState extends State<MainPage> {
           highlightColor: Colors.transparent,
         ),
         child: BottomNavigationBar(
-          currentIndex: _currentIndex,
-          onTap: (index) {
-            setState(() {
-              _currentIndex = index;
-            });
-          },
+          currentIndex: currentIndex,
+          onTap: (index) => ref.read(selectedTabProvider.notifier).set(index),
           type: BottomNavigationBarType.fixed,
           selectedItemColor: const Color(0xFFD32F2F),
           unselectedItemColor: Colors.grey,
           items: const [
-            BottomNavigationBarItem(
-              icon: Icon(Icons.grid_view),
-              label: 'LIST',
-            ),
-            BottomNavigationBarItem(
-              icon: Icon(Icons.games),
-              label: 'GUESS',
-            ),
-            BottomNavigationBarItem(
-              icon: Icon(Icons.settings),
-              label: 'SYSTEM',
-            ),
+            BottomNavigationBarItem(icon: Icon(Icons.grid_view), label: 'LIST'),
+            BottomNavigationBarItem(icon: Icon(Icons.games), label: 'GUESS'),
+            BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'SYSTEM'),
           ],
         ),
       ),