diff --git a/lib/main.dart b/lib/main.dart
index ed877f7..3840394 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -5,6 +5,7 @@ import 'package:google_fonts/google_fonts.dart';
 import 'package:responsive_framework/responsive_framework.dart';
 import 'package:wildfiretracker/screens/gencat_screen.dart';
 import 'package:wildfiretracker/screens/lg_settings_sreen.dart';
+import 'package:wildfiretracker/screens/nasa_screen.dart';
 import 'package:wildfiretracker/screens/nasa_screen_old.dart';
 import 'package:wildfiretracker/screens/preciesly_usa_forest_fire_risk.dart';
 import 'package:wildfiretracker/screens/splash_screen.dart';
@@ -91,7 +92,7 @@ class MyApp extends StatelessWidget {
       routes: {
         // '/': (context) => const HomePage(),
         '/splash': (context) => const SplashScreenPage(),
-        '/nasa': (context) => const NasaApiPage(),
+        '/nasa': (context) => NasaApiPage(),
         '/settings': (context) => const SettingsPage(),
         '/gencat': (context) => const GencatPage(),
         '/precisely-usa-forest-fire-risk': (context) => const PreciselyUsaForestFireRisk(),
diff --git a/lib/screens/nasa_screen.dart b/lib/screens/nasa_screen.dart
index 39f0e05..cd7d654 100644
--- a/lib/screens/nasa_screen.dart
+++ b/lib/screens/nasa_screen.dart
@@ -24,12 +24,12 @@ import '../utils/theme.dart';
 import '../utils/theme.dart';
 
 
-class NewHomeScreen extends StatefulWidget {
+class NasaApiPage extends StatefulWidget {
   @override
-  _NewHomeScreenState createState() => _NewHomeScreenState();
+  _NasaApiPageState createState() => _NasaApiPageState();
 }
 
-class _NewHomeScreenState extends State<NewHomeScreen> {
+class _NasaApiPageState extends State<NasaApiPage> {
   late List<Country> _contries = [];
   late List<SatelliteData> _satelliteData = [];
 
@@ -230,7 +230,7 @@ class _NewHomeScreenState extends State<NewHomeScreen> {
                               child: GoogleMap(
                                 initialCameraPosition: const CameraPosition(
                                   target: LatLng(37.7749, -122.4194), // replace with your initial coordinates
-                                  zoom: 10,
+                                  zoom: 0.0,
                                 ),
                                 onMapCreated: (GoogleMapController controller) {
                                   // handle map created
diff --git a/lib/screens/nasa_screen_old.dart b/lib/screens/nasa_screen_old.dart
index 53f6ee8..92f5edb 100644
--- a/lib/screens/nasa_screen_old.dart
+++ b/lib/screens/nasa_screen_old.dart
@@ -16,14 +16,14 @@ import '../services/lg_service.dart';
 import '../utils/snackbar.dart';
 import '../utils/theme.dart';
 
-class NasaApiPage extends StatefulWidget {
-  const NasaApiPage({super.key});
+class NasaApiPageOld extends StatefulWidget {
+  const NasaApiPageOld({super.key});
 
   @override
-  State<NasaApiPage> createState() => _NasaApiState();
+  State<NasaApiPageOld> createState() => _NasaApiStateOld();
 }
 
-class _NasaApiState extends State<NasaApiPage> {
+class _NasaApiStateOld extends State<NasaApiPageOld> {
   //bool _uploading = false;
 
   late List<Country> _contries = [];
diff --git a/lib/screens/splash_screen.dart b/lib/screens/splash_screen.dart
index b8f24a1..ec3e6d1 100644
--- a/lib/screens/splash_screen.dart
+++ b/lib/screens/splash_screen.dart
@@ -145,7 +145,7 @@ class _SplashScreenPageState extends State<SplashScreenPage> {
       Navigator.pushReplacement(
         context,
         //MaterialPageRoute(builder: (context) => const HomePage()),
-        MaterialPageRoute(builder: (context) => NewHomeScreen()),
+        MaterialPageRoute(builder: (context) => NasaApiPage()),
       );
     });
   }
diff --git a/lib/utils/body.dart b/lib/utils/body.dart
index d1d5c63..1a910ca 100644
--- a/lib/utils/body.dart
+++ b/lib/utils/body.dart
@@ -12,7 +12,19 @@ class CustomBody extends StatefulWidget {
 }
 
 class CustomBodyState extends State<CustomBody> {
-  String _selectedMenu = 'Home';
+  String _selectedMenu = '/nasa';
+
+  // get current named page and set to _selectedMenu
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      final routeName = ModalRoute.of(context)?.settings.name;
+      setState(() {
+        _selectedMenu = routeName ?? '/nasa'; // default to '/nasa' if routeName is null
+      });
+    });
+  }
 
   @override
   Widget build(BuildContext context) {
@@ -23,6 +35,10 @@ class CustomBodyState extends State<CustomBody> {
             setState(() {
               _selectedMenu = menu;
             });
+            Navigator.pushReplacementNamed(context, menu);
+          },
+          isMenuSelected: (menu) {
+            return _selectedMenu == menu;
           },
         ),
         Expanded(
@@ -50,8 +66,9 @@ class CustomBodyState extends State<CustomBody> {
 
 class NavigationDrawer extends StatelessWidget {
   final Function(String) onMenuSelected;
+  final Function(String) isMenuSelected;
 
-  NavigationDrawer({required this.onMenuSelected});
+  NavigationDrawer({required this.onMenuSelected, required this.isMenuSelected});
 
   @override
   Widget build(BuildContext context) {
@@ -68,11 +85,11 @@ class NavigationDrawer extends StatelessWidget {
               child: ListView(
                 padding: EdgeInsets.zero,
                 children: <Widget>[
-                  _createDrawerItem(icon: Icons.local_fire_department, text: 'Live Fire', onTap: () => onMenuSelected('Home')),
-                  _createDrawerItem(icon: Icons.forest, text: 'Historic Wildfire', onTap: () => onMenuSelected('Home')),
-                  _createDrawerItem(icon: Icons.forest_outlined, text: 'Forest Fire Risk', onTap: () => onMenuSelected('Home')),
-                  _createDrawerItem(icon: Icons.settings, text: 'Settings', onTap: () => onMenuSelected('Settings')),
-                  _createDrawerItem(icon: Icons.info, text: 'About', onTap: () => onMenuSelected('About')),
+                  _createDrawerItem(name:'/nasa', icon: Icons.local_fire_department, text: 'Live Fire', onTap: () =>  onMenuSelected('/nasa'), isSelected: () => isMenuSelected('/nasa')),
+                  _createDrawerItem(name:'/gencat', icon: Icons.forest, text: 'Historic Wildfire', onTap: () => onMenuSelected('/gencat'), isSelected: () => isMenuSelected('/gencat')),
+                  _createDrawerItem(name:'/precisely-usa-forest-fire-risk', icon: Icons.forest_outlined, text: 'Forest Fire Risk', onTap: () => onMenuSelected('/precisely-usa-forest-fire-risk'), isSelected: () => isMenuSelected('/precisely-usa-forest-fire-risk')),
+                  _createDrawerItem(name:'/settings', icon: Icons.settings, text: 'Settings', onTap: () => onMenuSelected('/settings'), isSelected: () => isMenuSelected('/settings')),
+                  _createDrawerItem(name:'/about', icon: Icons.info, text: 'About', onTap: () => onMenuSelected('/settings'), isSelected: () => isMenuSelected('/about')),
                 ],
               ),
             ),
@@ -83,19 +100,44 @@ class NavigationDrawer extends StatelessWidget {
   }
 
 
-  Widget _createDrawerItem({required IconData icon, required String text, required GestureTapCallback onTap}) {
+  Widget _createDrawerItem({required IconData icon, required String text, required GestureTapCallback onTap, required String name, required Function() isSelected}) {
     return ListTile(
       focusColor: ThemeColors.warning,
       hoverColor: ThemeColors.warning,
       selectedColor: ThemeColors.info,
       //selected: true,
       titleAlignment: ListTileTitleAlignment.center,
-      title: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
+      title: Row(
+        crossAxisAlignment: CrossAxisAlignment.center,
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+
         children: <Widget>[
-          Icon(icon, color: Colors.black,size: 40),
-          Text(
-              text, textAlign: TextAlign.center)
+          // get selectedMenu from CustomBodyState
+        isSelected() ?
+          Container(
+            width: 5,
+            height: 70,
+            color: ThemeColors.primaryColor,
+          ) :   SizedBox(height: 70, width: 5,),
+          Column(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: <Widget>[
+              Icon(icon, color: Colors.black,size: 40),
+              Container(
+                  width: 100,
+                  child: Text(
+                text, textAlign: TextAlign.center, softWrap: true, overflow: TextOverflow.clip,
+                style: const TextStyle(
+                  color: Colors.black,
+                  fontSize: 16.0,
+                  fontWeight: FontWeight.w500,
+                ),)),
+
+
+            ],
+          ),
+          SizedBox(height: 70, width: 5,)
         ],
       ),
       onTap: onTap,
@@ -107,6 +149,7 @@ class NavigationDrawer extends StatelessWidget {
       ),
     );
   }
+
 }