diff --git a/lib/ui/screens/wonder_details/wonder_details_tab_menu.dart b/lib/ui/screens/wonder_details/wonder_details_tab_menu.dart
index dc5f141a..2bf1df70 100644
--- a/lib/ui/screens/wonder_details/wonder_details_tab_menu.dart
+++ b/lib/ui/screens/wonder_details/wonder_details_tab_menu.dart
@@ -6,13 +6,14 @@ class WonderDetailsTabMenu extends StatelessWidget {
   static const double minTabSize = 25;
   static const double maxTabSize = 100;
 
-  const WonderDetailsTabMenu(
-      {Key? key,
-      required this.tabController,
-      this.showBg = false,
-      required this.wonderType,
-      this.axis = Axis.horizontal})
-      : super(key: key);
+  const WonderDetailsTabMenu({
+    Key? key,
+    required this.tabController,
+    this.showBg = false,
+    required this.wonderType,
+    this.axis = Axis.horizontal,
+    required this.onTap,
+  }) : super(key: key);
 
   final TabController tabController;
   final bool showBg;
@@ -20,6 +21,8 @@ class WonderDetailsTabMenu extends StatelessWidget {
   final Axis axis;
   bool get isVertical => axis == Axis.vertical;
 
+  final void Function(int index) onTap;
+
   @override
   Widget build(BuildContext context) {
     Color iconColor = showBg ? $styles.colors.black : $styles.colors.white;
@@ -103,6 +106,7 @@ class WonderDetailsTabMenu extends StatelessWidget {
                               color: iconColor,
                               axis: axis,
                               mainAxisSize: tabBtnSize,
+                              onTap: onTap,
                             ),
                             _TabBtn(
                               1,
@@ -112,6 +116,7 @@ class WonderDetailsTabMenu extends StatelessWidget {
                               color: iconColor,
                               axis: axis,
                               mainAxisSize: tabBtnSize,
+                              onTap: onTap,
                             ),
                             _TabBtn(
                               2,
@@ -121,6 +126,7 @@ class WonderDetailsTabMenu extends StatelessWidget {
                               color: iconColor,
                               axis: axis,
                               mainAxisSize: tabBtnSize,
+                              onTap: onTap,
                             ),
                             _TabBtn(
                               3,
@@ -130,6 +136,7 @@ class WonderDetailsTabMenu extends StatelessWidget {
                               color: iconColor,
                               axis: axis,
                               mainAxisSize: tabBtnSize,
+                              onTap: onTap,
                             ),
                           ]),
                     ),
@@ -184,6 +191,7 @@ class _TabBtn extends StatelessWidget {
     required this.label,
     required this.axis,
     required this.mainAxisSize,
+    required this.onTap,
   }) : super(key: key);
 
   static const double crossBtnSize = 60;
@@ -195,14 +203,12 @@ class _TabBtn extends StatelessWidget {
   final String label;
   final Axis axis;
   final double mainAxisSize;
+  final void Function(int index) onTap;
 
   bool get _isVertical => axis == Axis.vertical;
 
   @override
   Widget build(BuildContext context) {
-    // return _isVertical
-    //     ? SizedBox(height: mainAxisSize, width: crossBtnSize, child: Placeholder())
-    //     : SizedBox(height: crossBtnSize, width: mainAxisSize, child: Placeholder());
     bool selected = tabController.index == index;
     final MaterialLocalizations localizations = MaterialLocalizations.of(context);
     final iconImgPath = '${ImagePaths.common}/tab-$iconImg${selected ? '-active' : ''}.png';
@@ -217,7 +223,7 @@ class _TabBtn extends StatelessWidget {
         label: tabLabel,
         child: ExcludeSemantics(
           child: AppBtn.basic(
-            onPressed: () => tabController.index = index,
+            onPressed: () => onTap(index),
             semanticLabel: label,
             minimumSize: _isVertical ? Size(crossBtnSize, mainAxisSize) : Size(mainAxisSize, crossBtnSize),
             // Image icon
diff --git a/lib/ui/screens/wonder_details/wonders_details_screen.dart b/lib/ui/screens/wonder_details/wonders_details_screen.dart
index 461d2522..eef071d2 100644
--- a/lib/ui/screens/wonder_details/wonders_details_screen.dart
+++ b/lib/ui/screens/wonder_details/wonders_details_screen.dart
@@ -1,3 +1,5 @@
+import 'dart:async';
+
 import 'package:wonders/common_libs.dart';
 import 'package:wonders/ui/common/lazy_indexed_stack.dart';
 import 'package:wonders/ui/common/measurable_widget.dart';
@@ -43,11 +45,15 @@ class _WonderDetailsScreenState extends State<WonderDetailsScreen>
   }
 
   void _handleTabChanged() {
-    context.go(ScreenPaths.wonderDetails(widget.type, tabIndex: _tabController.index));
     _fade?.forward(from: 0);
     setState(() {});
   }
 
+  void _handleTabTapped(int index) {
+    _tabController.index = index;
+    context.go(ScreenPaths.wonderDetails(widget.type, tabIndex: _tabController.index));
+  }
+
   void _handleTabMenuSized(Size size) {
     setState(() {
       _tabBarSize = (_useNavRail ? size.width : size.height) - WonderDetailsTabMenu.buttonInset;
@@ -85,6 +91,7 @@ class _WonderDetailsScreenState extends State<WonderDetailsScreen>
               onChange: _handleTabMenuSized,
               child: WonderDetailsTabMenu(
                   tabController: _tabController,
+                  onTap: _handleTabTapped,
                   wonderType: wonder.type,
                   showBg: showTabBarBg,
                   axis: _useNavRail ? Axis.vertical : Axis.horizontal),