diff --git a/lib/pages/chat_list/chat_list_view.dart b/lib/pages/chat_list/chat_list_view.dart
index d7881af1..0b1b2216 100644
--- a/lib/pages/chat_list/chat_list_view.dart
+++ b/lib/pages/chat_list/chat_list_view.dart
@@ -1,4 +1,3 @@
-import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 
@@ -11,6 +10,7 @@ import 'package:fluffychat/pages/chat_list/chat_list_drawer.dart';
 import '../../widgets/matrix.dart';
 import 'chat_list_body.dart';
 import 'chat_list_header.dart';
+import 'start_chat_fab.dart';
 
 class ChatListView extends StatelessWidget {
   final ChatListController controller;
@@ -35,15 +35,8 @@ class ChatListView extends StatelessWidget {
             drawer: ChatListDrawer(controller),
             floatingActionButton: selectMode == SelectMode.normal
                 ? KeyBoardShortcuts(
-                    child: FloatingActionButton.extended(
-                      isExtended: controller.scrolledToTop,
-                      backgroundColor: Theme.of(context).colorScheme.primary,
-                      foregroundColor: Theme.of(context).colorScheme.onPrimary,
-                      onPressed: () =>
-                          VRouter.of(context).to('/newprivatechat'),
-                      icon: const Icon(CupertinoIcons.chat_bubble),
-                      label: Text(L10n.of(context)!.newChat),
-                    ),
+                    child:
+                        StartChatFloatingActionButton(controller: controller),
                     keysToPress: {
                       LogicalKeyboardKey.controlLeft,
                       LogicalKeyboardKey.keyN
diff --git a/lib/pages/chat_list/start_chat_fab.dart b/lib/pages/chat_list/start_chat_fab.dart
new file mode 100644
index 00000000..b26839a5
--- /dev/null
+++ b/lib/pages/chat_list/start_chat_fab.dart
@@ -0,0 +1,51 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+
+import 'package:animations/animations.dart';
+import 'package:flutter_gen/gen_l10n/l10n.dart';
+import 'package:vrouter/vrouter.dart';
+
+import 'chat_list.dart';
+
+class StartChatFloatingActionButton extends StatelessWidget {
+  final ChatListController controller;
+
+  const StartChatFloatingActionButton({Key? key, required this.controller})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return PageTransitionSwitcher(
+      reverse: !controller.scrolledToTop,
+      transitionBuilder: (
+        Widget child,
+        Animation<double> primaryAnimation,
+        Animation<double> secondaryAnimation,
+      ) {
+        return SharedAxisTransition(
+          animation: primaryAnimation,
+          secondaryAnimation: secondaryAnimation,
+          transitionType: SharedAxisTransitionType.horizontal,
+          child: child,
+          fillColor: Colors.transparent,
+        );
+      },
+      layoutBuilder: (children) => Stack(
+        alignment: Alignment.centerRight,
+        children: children,
+      ),
+      child: FloatingActionButton.extended(
+        key: ValueKey(controller.scrolledToTop),
+        isExtended: controller.scrolledToTop,
+        backgroundColor: Theme.of(context).colorScheme.primary,
+        foregroundColor: Theme.of(context).colorScheme.onPrimary,
+        onPressed: () => VRouter.of(context).to('/newprivatechat'),
+        icon: const Icon(CupertinoIcons.chat_bubble),
+        label: Text(
+          L10n.of(context)!.newChat,
+          overflow: TextOverflow.fade,
+        ),
+      ),
+    );
+  }
+}