diff --git a/lib/pages/composition.dart b/lib/pages/composition.dart
index eae6672..774cc49 100644
--- a/lib/pages/composition.dart
+++ b/lib/pages/composition.dart
@@ -1,21 +1,128 @@
 import 'package:flutter/material.dart';
 
-class CompositionPage extends StatelessWidget {
-  const CompositionPage({Key? key}) : super(key: key);
+class CompositionPage extends StatefulWidget {
+  const CompositionPage({super.key});
+
+  @override
+  _CompositionPageState createState() => _CompositionPageState();
+}
+
+class _CompositionPageState extends State<CompositionPage> {
+  String dialedNumber = "";
+
+
+  void _onNumberPress(String number) {
+    setState(() {
+      dialedNumber += number;
+    });
+  }
+
+
+  void _onDeletePress() {
+    setState(() {
+      if (dialedNumber.isNotEmpty) {
+        dialedNumber = dialedNumber.substring(0, dialedNumber.length - 1);
+      }
+    });
+  }
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       backgroundColor: Colors.black,
-      appBar: AppBar(
-        title: const Text('Composition Page'),
+      body: Column(
+        children: [
+          Expanded(
+            flex: 1,
+            child: Center(
+              child: Text(
+                dialedNumber,
+                style: const TextStyle(
+                  fontSize: 32,
+                  color: Colors.white,
+                  letterSpacing: 2.0,
+                ),
+              ),
+            ),
+          ),
+          Expanded(
+            flex: 3,
+            child: Padding(
+              padding: const EdgeInsets.all(16.0),
+              child: GridView.builder(
+                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+                  crossAxisCount: 3,
+                  mainAxisSpacing: 10,
+                  crossAxisSpacing: 10,
+                  childAspectRatio: 1,
+                ),
+                itemCount: 12,
+                itemBuilder: (context, index) {
+                  if (index < 9) {
+                  
+                    return _buildDialButton((index + 1).toString());
+                  } else if (index == 9) {
+                  
+                    return const SizedBox.shrink();
+                  } else if (index == 10) {
+                  
+                    return _buildDialButton('0');
+                  } else {
+                  
+                    return _buildDeleteButton();
+                  }
+                },
+              ),
+            ),
+          ),
+          Padding(
+            padding: const EdgeInsets.only(bottom: 20.0),
+            child: FloatingActionButton(
+              backgroundColor: Colors.green,
+              onPressed: () {
+              
+              },
+              child: const Icon(Icons.phone, color: Colors.white),
+            ),
+          ),
+        ],
       ),
-      body: Center(
-        child: const Text(
-          'Composition Page',
-          style: TextStyle(fontSize: 24),
+    );
+  }
+
+
+  Widget _buildDialButton(String number) {
+    return ElevatedButton(
+      onPressed: () => _onNumberPress(number),
+      style: ElevatedButton.styleFrom(
+        backgroundColor: Colors.black,
+        shape: const CircleBorder(),
+        padding: const EdgeInsets.all(20),
+      ),
+      child: Text(
+        number,
+        style: const TextStyle(
+          fontSize: 24,
+          color: Colors.white,
         ),
       ),
     );
   }
+
+
+  Widget _buildDeleteButton() {
+    return ElevatedButton(
+      onPressed: _onDeletePress,
+      style: ElevatedButton.styleFrom(
+        backgroundColor: Colors.black,
+        shape: const CircleBorder(),
+        padding: const EdgeInsets.all(20),
+      ),
+      child: const Icon(
+        Icons.backspace,
+        color: Colors.white,
+        size: 24,
+      ),
+    );
+  }
 }
diff --git a/lib/pages/myHomePage.dart b/lib/pages/myHomePage.dart
index ddfb100..227c229 100644
--- a/lib/pages/myHomePage.dart
+++ b/lib/pages/myHomePage.dart
@@ -43,16 +43,16 @@ Widget build(BuildContext context) {
         ),
         if (_tabController.index != 3)
         Positioned(
-          right: 20, // Adjust the right position as needed
-          bottom: 20, // Adjust the bottom position as needed
+          right: 20,
+          bottom: 20,
           child: FloatingActionButton(
             onPressed: () {
-              // Handle button press, like navigating to the composition page
-              _tabController.animateTo(3); // Navigates to the CompositionPage (index 3)
+            
+              _tabController.animateTo(3);
             },
             backgroundColor: Colors.blue,
             shape: RoundedRectangleBorder(
-              borderRadius: BorderRadius.circular(45), // Rounded corners for the square button
+              borderRadius: BorderRadius.circular(45),
             ),
             child: Padding(
               padding: const EdgeInsets.all(8.0),