diff --git a/dialer/lib/features/contacts/widgets/contact_modal.dart b/dialer/lib/features/contacts/widgets/contact_modal.dart
index c9d3760..be97803 100644
--- a/dialer/lib/features/contacts/widgets/contact_modal.dart
+++ b/dialer/lib/features/contacts/widgets/contact_modal.dart
@@ -5,6 +5,7 @@ import 'package:url_launcher/url_launcher.dart';
 import 'package:dialer/widgets/username_color_generator.dart';
 import '../../../services/block_service.dart';
 import '../../../services/contact_service.dart';
+import '../../../features/call/call_page.dart';
 import '../../../services/call_service.dart'; // Import CallService
 
 class ContactModal extends StatefulWidget {
@@ -265,6 +266,18 @@ class _ContactModalState extends State<ContactModal> {
                         await _callService.makeGsmCall(context, phoneNumber: phoneNumber);
                       }
                     },
+                    onLongPress: () {
+                      // Navigate to the beautiful calling page demo
+                      Navigator.push(
+                        context,
+                        MaterialPageRoute(
+                          builder: (_) => CallPage(
+                            displayName: widget.contact.displayName,
+                            thumbnail: widget.contact.thumbnail,
+                          ),
+                        ),
+                      );
+                    },
                   ),
                   ListTile(
                     leading: const Icon(Icons.message, color: Colors.blue),