diff --git a/lib/pages/composition.dart b/lib/pages/composition.dart
new file mode 100644
index 0000000..eae6672
--- /dev/null
+++ b/lib/pages/composition.dart
@@ -0,0 +1,21 @@
+import 'package:flutter/material.dart';
+
+class CompositionPage extends StatelessWidget {
+  const CompositionPage({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: Colors.black,
+      appBar: AppBar(
+        title: const Text('Composition Page'),
+      ),
+      body: Center(
+        child: const Text(
+          'Composition Page',
+          style: TextStyle(fontSize: 24),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/pages/myHomePage.dart b/lib/pages/myHomePage.dart
index e428068..ddfb100 100644
--- a/lib/pages/myHomePage.dart
+++ b/lib/pages/myHomePage.dart
@@ -1,6 +1,7 @@
 import 'package:dialer/pages/contact.dart';
 import 'package:dialer/pages/favorites.dart';
 import 'package:dialer/pages/history.dart';
+import 'package:dialer/pages/composition.dart';
 import 'package:flutter/material.dart';
 
 class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
@@ -9,8 +10,9 @@ class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateM
   @override
   void initState() {
     super.initState();
-    _tabController = TabController(length: 2, vsync: this, initialIndex: 1);
+    _tabController = TabController(length: 4, vsync: this, initialIndex: 1);
     _tabController.addListener(_handleTabIndex);
+    
   }
 
   @override
@@ -25,35 +27,66 @@ class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateM
   }
 
   @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      backgroundColor: Colors.black,
-      body: TabBarView(
-        controller: _tabController,
-        children: const [
-          FavoritePage(), // Page des favoris
-          HistoryPage(), // Page de l'historique
-          ContactPage(), // Page des contacts
-        ],
-      ),
-      bottomNavigationBar: Container(
-        color: Colors.black,
-        child: TabBar(
+Widget build(BuildContext context) {
+  return Scaffold(
+    backgroundColor: Colors.black,
+    body: Stack(
+      children: [
+        TabBarView(
           controller: _tabController,
-          tabs: [
-            Tab(icon: Icon(_tabController.index == 0 ? Icons.star : Icons.star_border)),
-            Tab(icon: Icon(_tabController.index == 1 ? Icons.access_time_filled : Icons.access_time_outlined)),
-            Tab(icon: Icon(_tabController.index == 2 ? Icons.contacts : Icons.contacts_outlined)),
+          children: const [
+            FavoritePage(),
+            HistoryPage(),
+            ContactPage(),
+            CompositionPage(),
           ],
-          labelColor: Colors.white,
-          unselectedLabelColor: Colors.grey,
-          indicatorSize: TabBarIndicatorSize.label,
-          indicatorPadding: const EdgeInsets.only(bottom: -0), // Ajustez le padding pour élever la ligne blanche au-dessus des icônes si nécessaire
-          indicatorColor: Colors.white, // Couleur de la barre horizontale blanche
         ),
+        if (_tabController.index != 3)
+        Positioned(
+          right: 20, // Adjust the right position as needed
+          bottom: 20, // Adjust the bottom position as needed
+          child: FloatingActionButton(
+            onPressed: () {
+              // Handle button press, like navigating to the composition page
+              _tabController.animateTo(3); // Navigates to the CompositionPage (index 3)
+            },
+            backgroundColor: Colors.blue,
+            shape: RoundedRectangleBorder(
+              borderRadius: BorderRadius.circular(45), // Rounded corners for the square button
+            ),
+            child: Padding(
+              padding: const EdgeInsets.all(8.0),
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: const [
+                  Icon(Icons.dialpad, color: Colors.white),
+                ],
+              ),
+            ),
+          ),
+        ),
+      ],
+    ),
+    bottomNavigationBar: Container(
+      color: Colors.black,
+      child: TabBar(
+        controller: _tabController,
+        tabs: [
+          Tab(icon: Icon(_tabController.index == 0 ? Icons.star : Icons.star_border)),
+          Tab(icon: Icon(_tabController.index == 1 ? Icons.access_time_filled : Icons.access_time_outlined)),
+          Tab(icon: Icon(_tabController.index == 2 ? Icons.contacts : Icons.contacts_outlined)),
+          Tab(icon: Icon(_tabController.index == 3 ? Icons.create : Icons.create_outlined)),
+        ],
+        labelColor: Colors.white,
+        unselectedLabelColor: Colors.grey,
+        indicatorSize: TabBarIndicatorSize.label,
+        indicatorColor: Colors.white,
       ),
-    );
-  }
+    ),
+  );
+}
+
 }