diff --git a/lib/screens/ChatPage.dart b/lib/screens/ChatPage.dart
index aa83c89..1a32523 100644
--- a/lib/screens/ChatPage.dart
+++ b/lib/screens/ChatPage.dart
@@ -2,6 +2,8 @@
 
 import 'package:flutter/material.dart';
 
+typedef OnEmojiReactionLongClickListener = void Function(int index);
+
 class ChatPage extends StatefulWidget {
   const ChatPage({super.key, required this.name, required this.image});
   final String name, image;
@@ -12,6 +14,8 @@ class ChatPage extends StatefulWidget {
 
 class _ChatPageState extends State<ChatPage> {
   final ScrollController _scrollController = ScrollController();
+
+  get onEmojiReactionLongClickListener => null;
   @override
   void initState() {
     super.initState();
@@ -20,147 +24,131 @@ class _ChatPageState extends State<ChatPage> {
     });
   }
 
-  List<Map> messages = [
+  setOnEmojiReactionLongClickListener(index) {
+    // Handle the long click on the message at `index`.
+    // For example, show a dialog with emoji reactions.
+    showDialog(
+      context: context,
+      builder: (BuildContext context) {
+        return AlertDialog(
+          title: const Text("React to message"),
+          content: Text("Long pressed message at index: $index"),
+          actions: [
+            TextButton(
+              onPressed: () {
+                Navigator.of(context).pop();
+              },
+              child: const Text("Close"),
+            ),
+          ],
+        );
+      },
+    );
+  }
+
+  List<Map<String, dynamic>> messages = [
     {
       "message": "Hola!",
       "sent": false,
+      "reactions": {'👍': 0, '❤️': 0, '😄': 0},
     },
     {
       "message": "Nevermind!",
       "sent": false,
+      "reactions": {'👍': 0, '❤️': 0, '😄': 0},
     },
     {
       "message": "Hello!",
       "sent": true,
+      "reactions": {'👍': 0, '❤️': 0, '😄': 0},
     },
     {
       "message": "Hi!",
       "sent": false,
+      "reactions": {'👍': 0, '❤️': 0, '😄': 0},
     },
     {
       "message": "How are you?",
       "sent": true,
+      "reactions": {'👍': 0, '❤️': 0, '😄': 0},
     },
     {
       "message": "All good! What about you?",
       "sent": false,
+      "reactions": {'👍': 0, '❤️': 0, '😄': 0},
     },
-    {
-      "message": "Same here!",
-      "sent": true,
-    },
-    {
-      "message": "Had lunch?",
-      "sent": false,
-    },
-    {
-      "message": "Yes! What about you?",
-      "sent": true,
-    },
-    {
-      "message": "Not yet, Please order me a pizza",
-      "sent": false,
-    },
-    {
-      "message": "Hahaha, Sure!",
-      "sent": true,
-    },
-    {
-      "message": "From where do you want to eat?",
-      "sent": true,
-    },
-    {
-      "message": "Dominos would be good!",
-      "sent": false,
-    },
-    {
-      "message": "Okay!",
-      "sent": true,
-    },
-    {
-      "message": "Which one?",
-      "sent": true,
-    },
-    {
-      "message": "Golden corn with cheese burst would be great!",
-      "sent": false,
-    },
-    {
-      "message": "Sure!",
-      "sent": true,
-    },
-    {
-      "message": "I am ordering a Large Golden corn cheese burst",
-      "sent": true,
-    },
+    // Add more messages here as needed...
   ];
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(
-        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
-        centerTitle: false,
-        title: ListTile(
-          leading: CircleAvatar(
-            backgroundColor: Colors.white,
-            backgroundImage: AssetImage(widget.image),
-          ),
-          title: Text(widget.name),
-          subtitle: const Text("Online"),
-          trailing: SizedBox(
-            width: MediaQuery.of(context).size.width * 0.2,
-            child: const Row(
-              mainAxisAlignment: MainAxisAlignment.spaceBetween,
-              children: [
-                Icon(Icons.video_call),
-                Icon(Icons.call),
-                Icon(Icons.more_vert),
-              ],
+        appBar: AppBar(
+          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
+          centerTitle: false,
+          title: ListTile(
+            leading: CircleAvatar(
+              backgroundColor: Colors.white,
+              backgroundImage: AssetImage(widget.image),
+            ),
+            title: Text(widget.name),
+            subtitle: const Text("Online"),
+            trailing: SizedBox(
+              width: MediaQuery.of(context).size.width * 0.2,
+              child: const Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Icon(Icons.video_call),
+                  Icon(Icons.call),
+                  Icon(Icons.more_vert),
+                ],
+              ),
             ),
           ),
         ),
-      ),
-      body: Padding(
-        padding: const EdgeInsets.all(8.0),
-        child: ListView.builder(
-            controller: _scrollController,
-            itemCount: messages.length,
-            itemBuilder: (context, index) {
-              int previous = index - 1 >= 0 ? index - 1 : 0;
-              int current = index;
-              return Padding(
-                padding: messages[previous]["sent"] == messages[current]["sent"]
-                    ? const EdgeInsets.only(left: 8, right: 8, top: 4)
-                    : const EdgeInsets.only(left: 8, right: 8, top: 8),
-                child: Align(
-                  alignment: messages[index]["sent"]
-                      ? Alignment.centerRight
-                      : Alignment.centerLeft,
-                  child: Container(
-                    decoration: BoxDecoration(
-                      borderRadius: BorderRadius.circular(10),
-                      color: messages[index]["sent"]
-                          ? Colors.amber[200]
-                          : Colors.blue[200],
-                    ),
-                    child: Padding(
-                      padding: const EdgeInsets.all(10),
-                      child: ConstrainedBox(
-                        constraints: BoxConstraints(
-                          maxWidth: MediaQuery.of(context).size.width * 0.8,
-                        ),
-                        child: Text(
-                          messages[index]["message"],
-                          style: const TextStyle(fontSize: 18),
-                        ),
-                      ),
-                    ),
-                  ),
-                ),
-              );
-            }),
-      ),
-    );
+        body: Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: ListView.builder(
+                controller: _scrollController,
+                itemCount: messages.length,
+                itemBuilder: (context, index) {
+                  int previous = index - 1 >= 0 ? index - 1 : 0;
+                  int current = index;
+                  return GestureDetector(onLongPress: () {
+                    if (onEmojiReactionLongClickListener != null) {
+                      onEmojiReactionLongClickListener!(index);
+                    }
+                    Padding(
+                        padding: messages[previous]["sent"] ==
+                                messages[current]["sent"]
+                            ? const EdgeInsets.only(left: 8, right: 8, top: 4)
+                            : const EdgeInsets.only(left: 8, right: 8, top: 8),
+                        child: Align(
+                            alignment: messages[index]["sent"]
+                                ? Alignment.centerRight
+                                : Alignment.centerLeft,
+                            child: Container(
+                              decoration: BoxDecoration(
+                                borderRadius: BorderRadius.circular(10),
+                                color: messages[index]["sent"]
+                                    ? Colors.amber[200]
+                                    : Colors.blue[200],
+                              ),
+                              child: Padding(
+                                padding: const EdgeInsets.all(10),
+                                child: ConstrainedBox(
+                                  constraints: BoxConstraints(
+                                    maxWidth:
+                                        MediaQuery.of(context).size.width * 0.8,
+                                  ),
+                                  child: Text(
+                                    messages[index]["message"],
+                                    style: const TextStyle(fontSize: 18),
+                                  ),
+                                ),
+                              ),
+                            )));
+                  });
+                })));
   }
 }