diff --git a/lib/l10n/intl_en.arb b/lib/l10n/intl_en.arb
index cef7ecac0..bcb795ed5 100644
--- a/lib/l10n/intl_en.arb
+++ b/lib/l10n/intl_en.arb
@@ -5037,5 +5037,6 @@
   "noSavedActivities": "No saved activities",
   "saveActivity": "Save this activity",
   "yourSavedActivities": "Saved Activities",
-  "failedToPlayVideo": "Failed to play video"
+  "failedToPlayVideo": "Failed to play video",
+  "saved": "Saved"
 }
diff --git a/lib/pangea/activity_planner/activity_planner_page.dart b/lib/pangea/activity_planner/activity_planner_page.dart
index 8cc9c4f4b..a2ff44473 100644
--- a/lib/pangea/activity_planner/activity_planner_page.dart
+++ b/lib/pangea/activity_planner/activity_planner_page.dart
@@ -1,11 +1,16 @@
 import 'package:flutter/material.dart';
 
+import 'package:go_router/go_router.dart';
+import 'package:material_symbols_icons/symbols.dart';
 import 'package:matrix/matrix.dart';
 
+import 'package:fluffychat/config/app_config.dart';
 import 'package:fluffychat/l10n/l10n.dart';
 import 'package:fluffychat/pangea/activity_planner/activity_planner_page_appbar.dart';
 import 'package:fluffychat/pangea/activity_planner/bookmarked_activity_list.dart';
 import 'package:fluffychat/pangea/activity_suggestions/activity_suggestions_area.dart';
+import 'package:fluffychat/pangea/activity_suggestions/activity_suggestions_constants.dart';
+import 'package:fluffychat/pangea/common/widgets/customized_svg.dart';
 import 'package:fluffychat/widgets/matrix.dart';
 
 enum PageMode {
@@ -32,6 +37,7 @@ class ActivityPlannerPageState extends State<ActivityPlannerPage> {
 
   @override
   Widget build(BuildContext context) {
+    final theme = Theme.of(context);
     Widget body = const SizedBox();
     switch (pageMode) {
       case PageMode.savedActivities:
@@ -64,28 +70,76 @@ class ActivityPlannerPageState extends State<ActivityPlannerPage> {
             children: [
               if ([PageMode.featuredActivities, PageMode.savedActivities]
                   .contains(pageMode))
-                Row(
-                  mainAxisAlignment: MainAxisAlignment.center,
-                  children: [
-                    Padding(
-                      padding: const EdgeInsets.all(16.0),
-                      child: SegmentedButton<PageMode>(
-                        selected: {pageMode},
-                        onSelectionChanged: (modes) =>
-                            _setPageMode(modes.first),
-                        segments: [
-                          ButtonSegment(
-                            value: PageMode.featuredActivities,
-                            label: Text(L10n.of(context).featuredActivities),
-                          ),
-                          ButtonSegment(
-                            value: PageMode.savedActivities,
-                            label: Text(L10n.of(context).yourSavedActivities),
-                          ),
-                        ],
+                Padding(
+                  padding: const EdgeInsets.all(16.0),
+                  child: Wrap(
+                    spacing: 12.0,
+                    runSpacing: 12.0,
+                    alignment: WrapAlignment.center,
+                    children: [
+                      FilterChip(
+                        shape: RoundedRectangleBorder(
+                          borderRadius: BorderRadius.circular(32),
+                        ),
+                        label: Row(
+                          spacing: 8.0,
+                          mainAxisSize: MainAxisSize.min,
+                          children: [
+                            const Icon(Symbols.star_shine, size: 24.0),
+                            Text(L10n.of(context).featuredActivities),
+                          ],
+                        ),
+                        selected: pageMode == PageMode.featuredActivities,
+                        onSelected: (_) => _setPageMode(
+                          PageMode.featuredActivities,
+                        ),
                       ),
-                    ),
-                  ],
+                      FilterChip(
+                        shape: RoundedRectangleBorder(
+                          borderRadius: BorderRadius.circular(32),
+                        ),
+                        label: Row(
+                          spacing: 8.0,
+                          mainAxisSize: MainAxisSize.min,
+                          children: [
+                            const Icon(Icons.save_outlined, size: 24.0),
+                            Text(L10n.of(context).saved),
+                          ],
+                        ),
+                        selected: pageMode == PageMode.savedActivities,
+                        onSelected: (_) => _setPageMode(
+                          PageMode.savedActivities,
+                        ),
+                      ),
+                      FilterChip(
+                        shape: RoundedRectangleBorder(
+                          borderRadius: BorderRadius.circular(32),
+                        ),
+                        label: Row(
+                          spacing: 8.0,
+                          mainAxisSize: MainAxisSize.min,
+                          children: [
+                            CustomizedSvg(
+                              svgUrl:
+                                  "${AppConfig.assetsBaseURL}/${ActivitySuggestionsConstants.crayonIconPath}",
+                              colorReplacements: {
+                                "#CDBEF9": colorToHex(
+                                  theme.colorScheme.secondary,
+                                ),
+                              },
+                              height: 24.0,
+                              width: 24.0,
+                            ),
+                            Text(L10n.of(context).createActivity),
+                          ],
+                        ),
+                        selected: false,
+                        onSelected: (_) => context.go(
+                          '/rooms/${widget.roomID}/details/planner/generator',
+                        ),
+                      ),
+                    ],
+                  ),
                 ),
               body,
             ],
diff --git a/lib/pangea/activity_planner/activity_planner_page_appbar.dart b/lib/pangea/activity_planner/activity_planner_page_appbar.dart
index 69c6a9316..0d3a043d6 100644
--- a/lib/pangea/activity_planner/activity_planner_page_appbar.dart
+++ b/lib/pangea/activity_planner/activity_planner_page_appbar.dart
@@ -1,13 +1,8 @@
 import 'package:flutter/material.dart';
 
-import 'package:go_router/go_router.dart';
-
-import 'package:fluffychat/config/app_config.dart';
 import 'package:fluffychat/config/themes.dart';
 import 'package:fluffychat/l10n/l10n.dart';
 import 'package:fluffychat/pangea/activity_planner/activity_planner_page.dart';
-import 'package:fluffychat/pangea/activity_suggestions/activity_suggestions_constants.dart';
-import 'package:fluffychat/pangea/common/widgets/customized_svg.dart';
 
 class ActivityPlannerPageAppBar extends StatelessWidget
     implements PreferredSizeWidget {
@@ -26,10 +21,8 @@ class ActivityPlannerPageAppBar extends StatelessWidget
   @override
   Widget build(BuildContext context) {
     final l10n = L10n.of(context);
-    final theme = Theme.of(context);
 
     return AppBar(
-      leadingWidth: FluffyThemes.isColumnMode(context) ? 150.0 : null,
       leading: FluffyThemes.isColumnMode(context)
           ? Row(
               children: [
@@ -42,6 +35,7 @@ class ActivityPlannerPageAppBar extends StatelessWidget
           : null,
       title: pageMode == PageMode.savedActivities
           ? Row(
+              mainAxisSize: MainAxisSize.min,
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
                 const Icon(Icons.save),
@@ -52,6 +46,7 @@ class ActivityPlannerPageAppBar extends StatelessWidget
               ],
             )
           : Row(
+              mainAxisSize: MainAxisSize.min,
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
                 const Icon(Icons.event_note_outlined),
@@ -64,59 +59,6 @@ class ActivityPlannerPageAppBar extends StatelessWidget
                 ),
               ],
             ),
-      actions: [
-        FluffyThemes.isColumnMode(context)
-            ? Container(
-                width: 150.0,
-                alignment: Alignment.center,
-                child: InkWell(
-                  customBorder: const CircleBorder(),
-                  onTap: () =>
-                      context.go('/rooms/$roomID/details/planner/generator'),
-                  child: Container(
-                    decoration: BoxDecoration(
-                      color: theme.colorScheme.surfaceContainerHighest,
-                      borderRadius: BorderRadius.circular(36.0),
-                    ),
-                    padding: const EdgeInsets.symmetric(
-                      vertical: 6.0,
-                      horizontal: 10.0,
-                    ),
-                    child: Row(
-                      spacing: 8.0,
-                      mainAxisSize: MainAxisSize.min,
-                      children: [
-                        CustomizedSvg(
-                          svgUrl:
-                              "${AppConfig.assetsBaseURL}/${ActivitySuggestionsConstants.crayonIconPath}",
-                          colorReplacements: {
-                            "#CDBEF9": colorToHex(
-                              theme.colorScheme.secondary,
-                            ),
-                          },
-                          height: 16.0,
-                          width: 16.0,
-                        ),
-                        Flexible(
-                          child: Text(
-                            L10n.of(context).createActivity,
-                            style: theme.textTheme.titleSmall?.copyWith(
-                              fontWeight: FontWeight.bold,
-                            ),
-                            overflow: TextOverflow.ellipsis,
-                          ),
-                        ),
-                      ],
-                    ),
-                  ),
-                ),
-              )
-            : IconButton(
-                icon: const Icon(Icons.add),
-                onPressed: () =>
-                    context.go('/rooms/$roomID/details/planner/generator'),
-              ),
-      ],
     );
   }
 }