diff --git a/dialer/android/app/src/debug/AndroidManifest.xml b/dialer/android/app/src/debug/AndroidManifest.xml
index 5d1c075..ec4418f 100644
--- a/dialer/android/app/src/debug/AndroidManifest.xml
+++ b/dialer/android/app/src/debug/AndroidManifest.xml
@@ -1,6 +1,7 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
     <uses-permission android:name="android.permission.READ_CONTACTS"/>
     <uses-permission android:name="android.permission.WRITE_CONTACTS"/>
+    <uses-permission android:name="android.permission.CALL_PHONE" />
     <!-- The INTERNET permission is required for development. Specifically,
          the Flutter tool needs it to communicate with the running application
          to allow setting breakpoints, to provide hot reload, etc.
diff --git a/dialer/android/app/src/main/AndroidManifest.xml b/dialer/android/app/src/main/AndroidManifest.xml
index 90fbbef..cd2aada 100644
--- a/dialer/android/app/src/main/AndroidManifest.xml
+++ b/dialer/android/app/src/main/AndroidManifest.xml
@@ -1,6 +1,7 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
     <uses-permission android:name="android.permission.READ_CONTACTS"/>
     <uses-permission android:name="android.permission.WRITE_CONTACTS"/>
+    <uses-permission android:name="android.permission.CALL_PHONE" />
     <application
         android:label="com.example.dialer"
         android:name="${applicationName}"
diff --git a/dialer/android/app/src/profile/AndroidManifest.xml b/dialer/android/app/src/profile/AndroidManifest.xml
index 5d1c075..ec4418f 100644
--- a/dialer/android/app/src/profile/AndroidManifest.xml
+++ b/dialer/android/app/src/profile/AndroidManifest.xml
@@ -1,6 +1,7 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
     <uses-permission android:name="android.permission.READ_CONTACTS"/>
     <uses-permission android:name="android.permission.WRITE_CONTACTS"/>
+    <uses-permission android:name="android.permission.CALL_PHONE" />
     <!-- The INTERNET permission is required for development. Specifically,
          the Flutter tool needs it to communicate with the running application
          to allow setting breakpoints, to provide hot reload, etc.
diff --git a/dialer/lib/features/call/call.dart b/dialer/lib/features/call/call.dart
new file mode 100644
index 0000000..6aa312e
--- /dev/null
+++ b/dialer/lib/features/call/call.dart
@@ -0,0 +1,86 @@
+import 'package:flutter/material.dart';
+import 'dart:async';
+
+class CallPage extends StatefulWidget {
+  final String phoneNumber;
+
+  const CallPage({Key? key, required this.phoneNumber}) : super(key: key);
+
+  @override
+  _CallPageState createState() => _CallPageState();
+}
+
+class _CallPageState extends State<CallPage> {
+  bool isCalling = true;
+  int callDuration = 0;
+  late final Timer _timer;
+
+  @override
+  void initState() {
+    super.initState();
+    _startCallTimer();
+  }
+
+  @override
+  void dispose() {
+    _timer.cancel();
+    super.dispose();
+  }
+
+  void _startCallTimer() {
+    _timer = Timer.periodic(Duration(seconds: 1), (timer) {
+      if (isCalling) {
+        setState(() {
+          callDuration++;
+        });
+      }
+    });
+  }
+
+  void _endCall() {
+    setState(() {
+      isCalling = false;
+    });
+    Navigator.pop(context);
+  }
+
+  String _formatDuration(int seconds) {
+    final minutes = seconds ~/ 60;
+    final remainingSeconds = seconds % 60;
+    return '${minutes.toString().padLeft(2, '0')}:${remainingSeconds.toString().padLeft(2, '0')}';
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: Colors.black,
+      body: Center( // Center widget to center all the content vertically and horizontally
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          crossAxisAlignment: CrossAxisAlignment.center, // Ensure the text and button are centered horizontally
+          children: [
+            Text(
+              "Calling ${widget.phoneNumber}",
+              style: TextStyle(color: Colors.white, fontSize: 24),
+            ),
+            const SizedBox(height: 20),
+            Text(
+              isCalling ? _formatDuration(callDuration) : "Call Ended",
+              style: TextStyle(color: Colors.greenAccent, fontSize: 20),
+            ),
+            const SizedBox(height: 40),
+            ElevatedButton(
+              style: ElevatedButton.styleFrom(
+                backgroundColor: Colors.red,
+                shape: CircleBorder(),
+                padding: const EdgeInsets.all(20),
+              ),
+              onPressed: _endCall,
+              child: Icon(Icons.call_end, color: Colors.white),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/dialer/lib/features/composition/composition.dart b/dialer/lib/features/composition/composition.dart
index bdaf048..2b09b23 100644
--- a/dialer/lib/features/composition/composition.dart
+++ b/dialer/lib/features/composition/composition.dart
@@ -1,5 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_contacts/flutter_contacts.dart';
+import 'package:url_launcher/url_launcher.dart';
+import '../call/call.dart';
 
 class CompositionPage extends StatefulWidget {
   const CompositionPage({super.key});
@@ -40,6 +42,35 @@ class _CompositionPageState extends State<CompositionPage> {
     });
   }
 
+  void _onCallPress(String phoneNumber) async {
+    final uri = Uri(scheme: 'tel', path: phoneNumber);
+    if (await canLaunchUrl(uri)) {
+      // Launch the system dialer in the background
+      launchUrl(uri);
+
+      // Navigate to your custom call page
+      Navigator.push(
+        context,
+        MaterialPageRoute(
+          builder: (context) => CallPage(phoneNumber: phoneNumber),
+        ),
+      );
+    } else {
+      print('Could not launch $uri');
+    }
+  }
+
+  // Function to send an SMS
+  void _onTextPress(String phoneNumber) async {
+    final uri = Uri(scheme: 'sms', path: phoneNumber);
+    if (await canLaunchUrl(uri)) {
+      // Launch the SMS app with the given phone number
+      launchUrl(uri);
+    } else {
+      print('Could not launch SMS to $phoneNumber');
+    }
+  }
+
   void _onNumberPress(String number) {
     setState(() {
       dialedNumber += number;
@@ -79,9 +110,9 @@ class _CompositionPageState extends State<CompositionPage> {
               // Top half: Display contacts matching dialed number
               Expanded(
                 flex: 2,
-                child:
-                Container(
-                  padding: const EdgeInsets.only(top: 42.0, left: 16.0, right: 16.0, bottom: 16.0),
+                child: Container(
+                  padding: const EdgeInsets.only(
+                      top: 42.0, left: 16.0, right: 16.0, bottom: 16.0),
                   color: Colors.black,
                   child: Column(
                     crossAxisAlignment: CrossAxisAlignment.start,
@@ -93,12 +124,14 @@ class _CompositionPageState extends State<CompositionPage> {
                                   return ListTile(
                                     title: Text(
                                       contact.displayName,
-                                      style: const TextStyle(color: Colors.white),
+                                      style:
+                                          const TextStyle(color: Colors.white),
                                     ),
                                     subtitle: contact.phones.isNotEmpty
                                         ? Text(
                                             contact.phones.first.number,
-                                            style: const TextStyle(color: Colors.grey),
+                                            style: const TextStyle(
+                                                color: Colors.grey),
                                           )
                                         : null,
                                     trailing: Row(
@@ -106,16 +139,39 @@ class _CompositionPageState extends State<CompositionPage> {
                                       children: [
                                         // Call button
                                         IconButton(
-                                          icon: Icon(Icons.phone, color: Colors.green[300], size: 20),
+                                          icon: Icon(Icons.phone,
+                                              color: Colors.green[300],
+                                              size: 20),
                                           onPressed: () {
-                                            print('Calling ${contact.displayName}');
+                                            final phoneNumber = contact
+                                                    .phones.isNotEmpty
+                                                ? contact.phones.first.number
+                                                : null;
+                                            if (phoneNumber != null) {
+                                              _onCallPress(phoneNumber);
+                                            } else {
+                                              print(
+                                                  '${contact.displayName} has no phone number.');
+                                            }
                                           },
                                         ),
+
                                         // Text button
                                         IconButton(
-                                          icon: Icon(Icons.message, color: Colors.blue[300], size: 20),
+                                          icon: Icon(Icons.message,
+                                              color: Colors.blue[300],
+                                              size: 20),
                                           onPressed: () {
-                                            print('Texting ${contact.displayName}');
+                                            final phoneNumber = contact
+                                                    .phones.isNotEmpty
+                                                ? contact.phones.first.number
+                                                : null;
+                                            if (phoneNumber != null) {
+                                              _onTextPress(phoneNumber); // Text functionality
+                                            } else {
+                                              print(
+                                                  '${contact.displayName} has no phone number.');
+                                            }
                                           },
                                         ),
                                       ],
@@ -125,7 +181,12 @@ class _CompositionPageState extends State<CompositionPage> {
                                     },
                                   );
                                 }).toList()
-                              : [Center(child: Text('No contacts found', style: TextStyle(color: Colors.white)))],
+                              : [
+                                  Center(
+                                      child: Text('No contacts found',
+                                          style:
+                                              TextStyle(color: Colors.white)))
+                                ],
                         ),
                       ),
                     ],
@@ -150,14 +211,16 @@ class _CompositionPageState extends State<CompositionPage> {
                               alignment: Alignment.center,
                               child: Text(
                                 dialedNumber,
-                                style: const TextStyle(fontSize: 24, color: Colors.white),
+                                style: const TextStyle(
+                                    fontSize: 24, color: Colors.white),
                                 overflow: TextOverflow.ellipsis,
                               ),
                             ),
                           ),
                           IconButton(
                             onPressed: _onClearPress,
-                            icon: const Icon(Icons.backspace, color: Colors.white),
+                            icon: const Icon(Icons.backspace,
+                                color: Colors.white),
                           ),
                         ],
                       ),
@@ -170,7 +233,8 @@ class _CompositionPageState extends State<CompositionPage> {
                             mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                             children: [
                               Row(
-                                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                                mainAxisAlignment:
+                                    MainAxisAlignment.spaceEvenly,
                                 children: [
                                   _buildDialButton('1'),
                                   _buildDialButton('2'),
@@ -178,7 +242,8 @@ class _CompositionPageState extends State<CompositionPage> {
                                 ],
                               ),
                               Row(
-                                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                                mainAxisAlignment:
+                                    MainAxisAlignment.spaceEvenly,
                                 children: [
                                   _buildDialButton('4'),
                                   _buildDialButton('5'),
@@ -186,7 +251,8 @@ class _CompositionPageState extends State<CompositionPage> {
                                 ],
                               ),
                               Row(
-                                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                                mainAxisAlignment:
+                                    MainAxisAlignment.spaceEvenly,
                                 children: [
                                   _buildDialButton('7'),
                                   _buildDialButton('8'),
@@ -194,7 +260,8 @@ class _CompositionPageState extends State<CompositionPage> {
                                 ],
                               ),
                               Row(
-                                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                                mainAxisAlignment:
+                                    MainAxisAlignment.spaceEvenly,
                                 children: [
                                   _buildDialButton('*'),
                                   _buildDialButton('0'),
diff --git a/dialer/pubspec.yaml b/dialer/pubspec.yaml
index 94c0f54..6a04379 100644
--- a/dialer/pubspec.yaml
+++ b/dialer/pubspec.yaml
@@ -38,6 +38,7 @@ dependencies:
   flutter_contacts: ^1.1.9+2
   permission_handler: ^10.2.0 # For handling permissions
   cached_network_image: ^3.2.3 # For caching contact images
+  url_launcher: ^6.1.8 # For calling
 
 dev_dependencies:
   flutter_test: