diff --git a/hesabixCore/migrations/Version20241220000000.php b/hesabixCore/migrations/Version20241220000000.php
new file mode 100644
index 0000000..3d12ad1
--- /dev/null
+++ b/hesabixCore/migrations/Version20241220000000.php
@@ -0,0 +1,40 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+/**
+ * Auto-generated Migration: Please modify to your needs!
+ */
+final class Version20241220000000 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Add memberCount field to chat_channel table';
+    }
+
+    public function up(Schema $schema): void
+    {
+        // Add memberCount column to chat_channel table
+        $this->addSql('ALTER TABLE chat_channel ADD member_count INT NOT NULL DEFAULT 0');
+        
+        // Update existing channels with correct member count
+        $this->addSql('
+            UPDATE chat_channel c 
+            SET member_count = (
+                SELECT COUNT(*) 
+                FROM chat_channel_member m 
+                WHERE m.channel_id = c.id AND m.is_active = 1
+            )
+        ');
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE chat_channel DROP member_count');
+    }
+} 
\ No newline at end of file
diff --git a/hesabixCore/src/Controller/ChatController.php b/hesabixCore/src/Controller/ChatController.php
index f2c2300..99cd4ee 100644
--- a/hesabixCore/src/Controller/ChatController.php
+++ b/hesabixCore/src/Controller/ChatController.php
@@ -54,6 +54,7 @@ class ChatController extends AbstractController
                 'isPublic' => $channel->isPublic(),
                 'avatar' => $channel->getAvatar(),
                 'messageCount' => $channel->getMessageCount(),
+                'memberCount' => $channel->getMemberCount(),
                 'lastMessageAt' => $channel->getLastMessageAt()?->format('Y-m-d H:i:s'),
                 'createdAt' => $channel->getCreatedAt()->format('Y-m-d H:i:s'),
                 'isAdmin' => $this->chatService->isUserAdmin($channel, $user),
@@ -128,7 +129,7 @@ class ChatController extends AbstractController
                 'description' => $channel->getDescription(),
                 'isPublic' => $channel->isPublic(),
                 'messageCount' => $channel->getMessageCount(),
-                'memberCount' => $this->chatService->getChannelStats($channel)['memberCount'],
+                'memberCount' => $channel->getMemberCount(),
                 'lastMessageAt' => $channel->getLastMessageAt()?->format('Y-m-d H:i:s'),
             ];
         }
@@ -387,10 +388,13 @@ class ChatController extends AbstractController
             ], Response::HTTP_FORBIDDEN);
         }
 
-        $limit = (int) $request->query->get('limit', 50);
+        $limit = (int) $request->query->get('limit', 30);
         $offset = (int) $request->query->get('offset', 0);
 
         $messages = $this->chatService->getChannelMessages($channel, $limit, $offset);
+        
+        // Get total message count for pagination info
+        $totalMessages = $this->chatService->getChannelMessageCount($channel);
 
         $data = [];
         foreach ($messages as $message) {
@@ -418,7 +422,13 @@ class ChatController extends AbstractController
 
         return $this->json([
             'success' => true,
-            'data' => $data
+            'data' => $data,
+            'pagination' => [
+                'limit' => $limit,
+                'offset' => $offset,
+                'total' => $totalMessages,
+                'hasMore' => ($offset + $limit) < $totalMessages
+            ]
         ]);
     }
 
@@ -478,6 +488,11 @@ class ChatController extends AbstractController
                         'id' => $message->getSender()->getId(),
                         'fullName' => $message->getSender()->getFullName(),
                     ],
+                    'quotedMessage' => $message->getQuotedMessage() ? [
+                        'id' => $message->getQuotedMessage()->getId(),
+                        'content' => $message->getQuotedMessage()->getContent(),
+                        'sender' => $message->getQuotedMessage()->getSender()->getFullName(),
+                    ] : null,
                 ]
             ]);
         } catch (\Exception $e) {
@@ -564,6 +579,44 @@ class ChatController extends AbstractController
         }
     }
 
+    #[Route('/messages/{messageId}/reactions', name: 'chat_remove_reaction', methods: ['DELETE'])]
+    public function removeReaction(int $messageId, Request $request): JsonResponse
+    {
+        $message = $this->messageRepository->find($messageId);
+        if (!$message) {
+            return $this->json([
+                'success' => false,
+                'message' => 'پیام یافت نشد'
+            ], Response::HTTP_NOT_FOUND);
+        }
+
+        $data = json_decode($request->getContent(), true);
+        
+        if (!isset($data['emoji']) || empty($data['emoji'])) {
+            return $this->json([
+                'success' => false,
+                'message' => 'ایموجی الزامی است'
+            ], Response::HTTP_BAD_REQUEST);
+        }
+
+        /** @var User $user */
+        $user = $this->security->getUser();
+
+        $success = $this->chatService->removeReaction($message, $user, $data['emoji']);
+        
+        if ($success) {
+            return $this->json([
+                'success' => true,
+                'message' => 'واکنش حذف شد'
+            ]);
+        } else {
+            return $this->json([
+                'success' => false,
+                'message' => 'خطا در حذف واکنش'
+            ], Response::HTTP_BAD_REQUEST);
+        }
+    }
+
     #[Route('/users/search', name: 'chat_search_users', methods: ['GET'])]
     public function searchUsers(Request $request): JsonResponse
     {
diff --git a/hesabixCore/src/Entity/ChatChannel.php b/hesabixCore/src/Entity/ChatChannel.php
index 75ed9aa..b42f4a2 100644
--- a/hesabixCore/src/Entity/ChatChannel.php
+++ b/hesabixCore/src/Entity/ChatChannel.php
@@ -52,6 +52,9 @@ class ChatChannel
     #[ORM\Column]
     private int $messageCount = 0;
 
+    #[ORM\Column]
+    private int $memberCount = 0;
+
     #[ORM\Column(nullable: true)]
     private ?\DateTimeImmutable $lastMessageAt = null;
 
@@ -236,6 +239,17 @@ class ChatChannel
         return $this;
     }
 
+    public function getMemberCount(): int
+    {
+        return $this->memberCount;
+    }
+
+    public function setMemberCount(int $memberCount): static
+    {
+        $this->memberCount = $memberCount;
+        return $this;
+    }
+
     public function getLastMessageAt(): ?\DateTimeImmutable
     {
         return $this->lastMessageAt;
diff --git a/hesabixCore/src/Repository/ChatMessageRepository.php b/hesabixCore/src/Repository/ChatMessageRepository.php
index 549ea2d..b623892 100644
--- a/hesabixCore/src/Repository/ChatMessageRepository.php
+++ b/hesabixCore/src/Repository/ChatMessageRepository.php
@@ -130,13 +130,28 @@ class ChatMessageRepository extends ServiceEntityRepository
             ->getResult();
     }
 
+    /**
+     * Get total message count for a channel
+     */
+    public function getChannelMessageCount(ChatChannel $channel): int
+    {
+        return $this->createQueryBuilder('m')
+            ->select('COUNT(m.id)')
+            ->where('m.channel = :channel')
+            ->andWhere('m.isDeleted = :isDeleted')
+            ->setParameter('channel', $channel)
+            ->setParameter('isDeleted', false)
+            ->getQuery()
+            ->getSingleScalarResult();
+    }
+
     /**
      * Get message statistics for a channel
      */
     public function getChannelMessageStats(ChatChannel $channel): array
     {
         $qb = $this->createQueryBuilder('m')
-            ->select('COUNT(m.id) as total, COUNT(CASE WHEN m.messageType = :emoji THEN 1 END) as emoji_count')
+            ->select('COUNT(m.id) as total, SUM(CASE WHEN m.messageType = :emoji THEN 1 ELSE 0 END) as emoji_count')
             ->where('m.channel = :channel')
             ->andWhere('m.isDeleted = :isDeleted')
             ->setParameter('channel', $channel)
diff --git a/hesabixCore/src/Service/ChatService.php b/hesabixCore/src/Service/ChatService.php
index d37cdc6..a4c6bb0 100644
--- a/hesabixCore/src/Service/ChatService.php
+++ b/hesabixCore/src/Service/ChatService.php
@@ -34,6 +34,7 @@ class ChatService
         $channel->setDescription($description);
         $channel->setIsPublic($isPublic);
         $channel->setCreatedBy($creator);
+        $channel->setMemberCount(1); // Creator is the first member
 
         // Add creator as admin member
         $member = new ChatChannelMember();
@@ -72,6 +73,10 @@ class ChatService
         $member->setIsAdmin(false);
 
         $this->entityManager->persist($member);
+        
+        // Update channel member count
+        $channel->setMemberCount($channel->getMemberCount() + 1);
+        
         $this->entityManager->flush();
 
         return true;
@@ -88,6 +93,10 @@ class ChatService
         }
 
         $member->setIsActive(false);
+        
+        // Update channel member count
+        $channel->setMemberCount($channel->getMemberCount() - 1);
+        
         $this->entityManager->flush();
 
         return true;
@@ -120,6 +129,10 @@ class ChatService
         }
 
         $member->setIsActive(false);
+        
+        // Update channel member count
+        $channel->setMemberCount($channel->getMemberCount() - 1);
+        
         $this->entityManager->flush();
 
         return true;
@@ -258,6 +271,14 @@ class ChatService
         return $this->messageRepository->findChannelMessages($channel, $limit, $offset);
     }
 
+    /**
+     * Get total message count for a channel
+     */
+    public function getChannelMessageCount(ChatChannel $channel): int
+    {
+        return $this->messageRepository->getChannelMessageCount($channel);
+    }
+
     /**
      * Search public channels
      */
@@ -279,7 +300,10 @@ class ChatService
      */
     public function getChannelStats(ChatChannel $channel): array
     {
-        return $this->channelRepository->getChannelStats($channel);
+        return [
+            'memberCount' => $channel->getMemberCount(),
+            'messageCount' => $channel->getMessageCount()
+        ];
     }
 
     /**
diff --git a/webUI/src/views/chat/home.vue b/webUI/src/views/chat/home.vue
index 9938aeb..c52ed67 100644
--- a/webUI/src/views/chat/home.vue
+++ b/webUI/src/views/chat/home.vue
@@ -78,7 +78,7 @@
                   </v-list-item-title>
                   
                   <v-list-item-subtitle class="text-caption">
-                    {{ channel.messageCount }} پیام
+                    {{ channel.messageCount }} پیام • {{ channel.memberCount || 0 }} عضو
                   </v-list-item-subtitle>
                   
                   <template v-slot:append>
@@ -129,7 +129,7 @@
                   </v-list-item-title>
                   
                   <v-list-item-subtitle class="text-caption">
-                    {{ channel.messageCount }} پیام
+                    {{ channel.messageCount }} پیام • {{ channel.memberCount || 0 }} عضو
                   </v-list-item-subtitle>
                   
                   <template v-slot:append>
@@ -314,7 +314,13 @@
           </v-expand-transition>
 
           <!-- Messages -->
-          <div class="messages-container" ref="messagesContainer">
+          <div class="messages-container" ref="messagesContainer" @scroll="handleScroll">
+            <!-- Load more indicator -->
+            <div v-if="pagination.loadingMore" class="load-more-indicator">
+              <v-progress-circular indeterminate color="primary" size="30"></v-progress-circular>
+              <span class="text-caption ml-2">در حال بارگذاری پیام‌های بیشتر...</span>
+            </div>
+            
             <div v-if="loading" class="loading-state">
               <v-progress-circular indeterminate color="primary" size="50"></v-progress-circular>
               <p class="text-body-1 mt-4">در حال بارگذاری پیام‌ها...</p>
@@ -368,12 +374,89 @@
                         :key="emoji"
                         size="small"
                         variant="outlined"
-                        class="mr-1"
+                        class="mr-1 reaction-chip"
+                        :class="{
+                          'like-chip': emoji === '❤️',
+                          'dislike-chip': emoji === '👎'
+                        }"
                       >
-                        {{ emoji }} {{ users.length }}
+                        <v-icon size="14" class="mr-1">
+                          {{ emoji === '❤️' ? 'mdi-heart' : emoji === '👎' ? 'mdi-thumb-down' : emoji }}
+                        </v-icon>
+                        {{ users.length }}
                       </v-chip>
                     </div>
                   </div>
+                  
+                  <!-- Message Actions -->
+                  <div class="message-actions">
+                    <v-tooltip text="نقل قول از این پیام" location="top">
+                      <template v-slot:activator="{ props }">
+                        <v-btn
+                          icon
+                          size="x-small"
+                          variant="text"
+                          @click="quoteMessage(message)"
+                          class="action-btn"
+                          v-bind="props"
+                        >
+                          <v-icon size="16">mdi-reply</v-icon>
+                        </v-btn>
+                      </template>
+                    </v-tooltip>
+                    <v-tooltip text="پاسخ به این پیام" location="top">
+                      <template v-slot:activator="{ props }">
+                        <v-btn
+                          icon
+                          size="x-small"
+                          variant="text"
+                          @click="replyToMessage(message)"
+                          class="action-btn"
+                          v-bind="props"
+                        >
+                          <v-icon size="16">mdi-reply-all</v-icon>
+                        </v-btn>
+                      </template>
+                    </v-tooltip>
+                    <v-tooltip :text="isLiked(message) ? 'حذف لایک' : 'لایک کردن'" location="top">
+                      <template v-slot:activator="{ props }">
+                        <v-btn
+                          icon
+                          size="x-small"
+                          variant="text"
+                          @click="toggleLike(message)"
+                          class="action-btn"
+                          :class="{ 'liked': isLiked(message) }"
+                          :loading="reactingMessages.has(`like-${message.id}`)"
+                          :disabled="reactingMessages.has(`like-${message.id}`) || reactingMessages.has(`dislike-${message.id}`)"
+                          v-bind="props"
+                        >
+                          <v-icon size="16" :color="isLiked(message) ? 'red' : undefined">
+                            {{ isLiked(message) ? 'mdi-heart' : 'mdi-heart-outline' }}
+                          </v-icon>
+                        </v-btn>
+                      </template>
+                    </v-tooltip>
+                    <v-tooltip :text="isDisliked(message) ? 'حذف دیسلایک' : 'دیسلایک کردن'" location="top">
+                      <template v-slot:activator="{ props }">
+                        <v-btn
+                          icon
+                          size="x-small"
+                          variant="text"
+                          @click="toggleDislike(message)"
+                          class="action-btn"
+                          :class="{ 'disliked': isDisliked(message) }"
+                          :loading="reactingMessages.has(`dislike-${message.id}`)"
+                          :disabled="reactingMessages.has(`like-${message.id}`) || reactingMessages.has(`dislike-${message.id}`)"
+                          v-bind="props"
+                        >
+                          <v-icon size="16" :color="isDisliked(message) ? 'orange' : undefined">
+                            {{ isDisliked(message) ? 'mdi-thumb-down' : 'mdi-thumb-down-outline' }}
+                          </v-icon>
+                        </v-btn>
+                      </template>
+                    </v-tooltip>
+                  </div>
                 </div>
               </div>
             </div>
@@ -406,9 +489,36 @@
             
             <!-- Show message input if user is a member -->
             <div v-else-if="currentChannel && canSendMessage" class="input-wrapper">
+              <!-- Quoted Message Preview -->
+              <div v-if="quotedMessage" class="quoted-message-preview">
+                <div class="quoted-preview-content">
+                  <div class="quoted-preview-header">
+                    <v-icon size="16" class="mr-2">mdi-reply</v-icon>
+                    <span class="text-caption">در پاسخ به {{ quotedMessage.sender.fullName }}</span>
+                    <v-spacer></v-spacer>
+                    <v-tooltip text="لغو نقل قول" location="top">
+                      <template v-slot:activator="{ props }">
+                        <v-btn
+                          icon
+                          size="x-small"
+                          variant="text"
+                          @click="cancelQuote"
+                          v-bind="props"
+                        >
+                          <v-icon size="16">mdi-close</v-icon>
+                        </v-btn>
+                      </template>
+                    </v-tooltip>
+                  </div>
+                  <div class="quoted-preview-text">
+                    {{ quotedMessage.content }}
+                  </div>
+                </div>
+              </div>
+              
               <v-text-field
                 v-model="messageText"
-                placeholder="پیام خود را بنویسید..."
+                :placeholder="quotedMessage ? 'پاسخ خود را بنویسید...' : 'پیام خود را بنویسید...'"
                 variant="outlined"
                 density="compact"
                 hide-details
@@ -457,101 +567,213 @@
     </div>
 
     <!-- Create Channel Dialog -->
-    <v-dialog v-model="showCreateChannel" max-width="500px">
-      <v-card>
-        <v-card-title class="d-flex align-center">
-          <v-icon start class="mr-2">mdi-plus-circle</v-icon>
-          ایجاد کانال جدید
+    <v-dialog v-model="showCreateChannel" max-width="600px" persistent>
+      <v-card class="create-channel-dialog">
+        <v-card-title class="dialog-header">
+          <div class="d-flex align-center">
+            <v-avatar size="48" color="primary" class="mr-4">
+              <v-icon size="24" color="white">mdi-plus-circle</v-icon>
+            </v-avatar>
+            <div>
+              <h2 class="text-h5 mb-1">ایجاد کانال جدید</h2>
+              <p class="text-body-2 text-grey-darken-1">کانال جدیدی برای گفت‌وگو ایجاد کنید</p>
+            </div>
+          </div>
         </v-card-title>
-        <v-card-text>
-          <v-form ref="createChannelForm">
+        
+        <v-card-text class="dialog-content">
+          <v-form ref="createChannelForm" class="mt-4">
             <v-text-field
               v-model="newChannel.name"
               label="نام کانال"
+              placeholder="مثال: گروه عمومی"
               required
               :rules="[v => !!v || 'نام کانال الزامی است']"
+              variant="outlined"
+              density="comfortable"
+              prepend-inner-icon="mdi-format-title"
+              class="mb-4"
             ></v-text-field>
+            
             <v-textarea
               v-model="newChannel.description"
-              label="توضیحات"
-              rows="3"
-              placeholder="توضیح کوتاهی درباره کانال بنویسید..."
+              label="توضیحات کانال"
+              placeholder="توضیح کوتاهی درباره هدف و موضوع کانال بنویسید..."
+              rows="4"
+              variant="outlined"
+              density="comfortable"
+              prepend-inner-icon="mdi-text"
+              class="mb-4"
             ></v-textarea>
-            <v-switch
-              v-model="newChannel.isPublic"
-              label="کانال عمومی"
-              color="primary"
-              inset
-            ></v-switch>
-            <div class="text-caption text-grey-darken-1 mt-2">
-              کانال‌های عمومی برای همه قابل مشاهده و پیوستن هستند
-            </div>
+            
+            <v-card variant="outlined" class="mb-4">
+              <v-card-text class="pa-4">
+                <div class="d-flex align-center mb-3">
+                  <v-switch
+                    v-model="newChannel.isPublic"
+                    color="primary"
+                    inset
+                    class="mr-3"
+                  ></v-switch>
+                  <div>
+                    <h4 class="text-subtitle-1 font-weight-medium">
+                      {{ newChannel.isPublic ? 'کانال عمومی' : 'کانال خصوصی' }}
+                    </h4>
+                    <p class="text-caption text-grey-darken-1">
+                      {{ newChannel.isPublic 
+                        ? 'کانال‌های عمومی برای همه قابل مشاهده و پیوستن هستند' 
+                        : 'کانال‌های خصوصی فقط برای اعضای دعوت شده قابل دسترسی هستند' 
+                      }}
+                    </p>
+                  </div>
+                </div>
+                
+                <v-alert
+                  :type="newChannel.isPublic ? 'info' : 'warning'"
+                  variant="tonal"
+                  class="mt-3"
+                >
+                  <div class="d-flex align-center">
+                    <v-icon start class="mr-2">
+                      {{ newChannel.isPublic ? 'mdi-earth' : 'mdi-lock' }}
+                    </v-icon>
+                    <span>
+                      {{ newChannel.isPublic 
+                        ? 'این کانال در لیست کانال‌های عمومی نمایش داده می‌شود' 
+                        : 'این کانال فقط برای اعضای دعوت شده قابل دسترسی است' 
+                      }}
+                    </span>
+                  </div>
+                </v-alert>
+              </v-card-text>
+            </v-card>
           </v-form>
         </v-card-text>
-        <v-card-actions>
-          <v-btn color="primary" @click="createChannel" :loading="creatingChannel">
-            ایجاد
+        
+        <v-card-actions class="dialog-actions">
+          <v-btn 
+            @click="showCreateChannel = false" 
+            variant="outlined"
+            size="large"
+          >
+            لغو
+          </v-btn>
+          <v-spacer></v-spacer>
+          <v-btn 
+            color="primary" 
+            @click="createChannel" 
+            :loading="creatingChannel"
+            size="large"
+            :disabled="!newChannel.name.trim()"
+          >
+            <v-icon start>mdi-plus</v-icon>
+            ایجاد کانال
           </v-btn>
-          <v-btn @click="showCreateChannel = false">لغو</v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
 
     <!-- Member Management Dialog -->
-    <v-dialog v-model="showMemberDialog" max-width="600px">
-      <v-card>
-        <v-card-title class="d-flex align-center">
-          <v-icon start class="mr-2">mdi-account-group</v-icon>
-          مدیریت اعضای کانال
-          <v-spacer></v-spacer>
-          <v-btn
-            v-if="currentChannel?.isAdmin"
-            color="primary"
-            size="small"
-            @click="showAddMemberDialog = true"
-          >
-            <v-icon start>mdi-plus</v-icon>
-            اضافه کردن عضو
-          </v-btn>
+    <v-dialog v-model="showMemberDialog" max-width="700px" persistent>
+      <v-card class="member-dialog">
+        <v-card-title class="dialog-header">
+          <div class="d-flex align-center">
+            <v-avatar size="48" color="blue" class="mr-4">
+              <v-icon size="24" color="white">mdi-account-group</v-icon>
+            </v-avatar>
+            <div>
+              <h2 class="text-h5 mb-1">مدیریت اعضای کانال</h2>
+              <p class="text-body-2 text-grey-darken-1">
+                {{ currentChannel?.name }} - {{ channelMembers.length }} عضو
+              </p>
+            </div>
+            <v-spacer></v-spacer>
+            <v-btn
+              v-if="currentChannel?.isAdmin"
+              color="primary"
+              size="large"
+              @click="showAddMemberDialog = true"
+              class="add-member-btn"
+            >
+              <v-icon start>mdi-plus</v-icon>
+              اضافه کردن عضو
+            </v-btn>
+          </div>
         </v-card-title>
-        <v-card-text>
-          <div v-if="loadingMembers" class="text-center pa-4">
-            <v-progress-circular indeterminate color="primary"></v-progress-circular>
-            <p class="mt-2">در حال بارگذاری اعضا...</p>
+        
+        <v-card-text class="dialog-content">
+          <div v-if="loadingMembers" class="loading-members">
+            <v-progress-circular indeterminate color="primary" size="60"></v-progress-circular>
+            <p class="text-body-1 mt-4">در حال بارگذاری اعضا...</p>
           </div>
           
           <div v-else>
-            <div class="d-flex align-center mb-4">
-              <v-icon class="mr-2">mdi-account-group</v-icon>
-              <span class="text-subtitle-1">{{ channelMembers.length }} عضو</span>
+            <div class="member-stats mb-4">
+              <v-row>
+                <v-col cols="4">
+                  <v-card variant="outlined" class="stat-card">
+                    <v-card-text class="text-center pa-4">
+                      <v-icon size="32" color="primary" class="mb-2">mdi-account-group</v-icon>
+                      <h3 class="text-h4 font-weight-bold">{{ channelMembers.length }}</h3>
+                      <p class="text-caption text-grey-darken-1">کل اعضا</p>
+                    </v-card-text>
+                  </v-card>
+                </v-col>
+                <v-col cols="4">
+                  <v-card variant="outlined" class="stat-card">
+                    <v-card-text class="text-center pa-4">
+                      <v-icon size="32" color="orange" class="mb-2">mdi-crown</v-icon>
+                      <h3 class="text-h4 font-weight-bold">
+                        {{ channelMembers.filter(m => m.isAdmin).length }}
+                      </h3>
+                      <p class="text-caption text-grey-darken-1">مدیر</p>
+                    </v-card-text>
+                  </v-card>
+                </v-col>
+                <v-col cols="4">
+                  <v-card variant="outlined" class="stat-card">
+                    <v-card-text class="text-center pa-4">
+                      <v-icon size="32" color="green" class="mb-2">mdi-account</v-icon>
+                      <h3 class="text-h4 font-weight-bold">
+                        {{ channelMembers.filter(m => !m.isAdmin).length }}
+                      </h3>
+                      <p class="text-caption text-grey-darken-1">عضو عادی</p>
+                    </v-card-text>
+                  </v-card>
+                </v-col>
+              </v-row>
             </div>
             
-            <v-list>
+            <v-list class="member-list">
               <v-list-item
                 v-for="member in channelMembers"
                 :key="member.id"
                 class="member-item"
+                rounded="lg"
               >
                 <template v-slot:prepend>
-                  <v-avatar size="40" color="primary" class="mr-3">
-                    <span class="text-white">{{ member.fullName.charAt(0) }}</span>
+                  <v-avatar size="48" color="primary" class="mr-3">
+                    <span class="text-white text-h6">{{ member.fullName.charAt(0) }}</span>
                   </v-avatar>
                 </template>
                 
-                <v-list-item-title class="font-weight-medium">
+                <v-list-item-title class="font-weight-medium text-body-1">
                   {{ member.fullName }}
                   <v-chip
                     v-if="member.isAdmin"
                     size="small"
                     color="orange"
+                    variant="elevated"
                     class="ml-2"
                   >
+                    <v-icon start size="14">mdi-crown</v-icon>
                     مدیر
                   </v-chip>
                 </v-list-item-title>
                 
-                <v-list-item-subtitle class="text-caption">
-                  {{ member.email }}
+                <v-list-item-subtitle class="text-caption mt-1">
+                  <v-icon size="14" class="mr-1">mdi-email</v-icon>
+                  {{ maskEmail(member.email) }}
                 </v-list-item-subtitle>
                 
                 <template v-slot:append>
@@ -560,7 +782,9 @@
                     icon
                     size="small"
                     color="error"
+                    variant="text"
                     @click="removeMemberFromChannel(member.id)"
+                    class="remove-btn"
                   >
                     <v-icon>mdi-delete</v-icon>
                   </v-btn>
@@ -569,43 +793,63 @@
             </v-list>
           </div>
         </v-card-text>
-        <v-card-actions>
-          <v-btn @click="showMemberDialog = false">بستن</v-btn>
+        
+        <v-card-actions class="dialog-actions">
+          <v-btn @click="showMemberDialog = false" variant="outlined" size="large">
+            بستن
+          </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
 
     <!-- Add Member Dialog -->
-    <v-dialog v-model="showAddMemberDialog" max-width="500px">
-      <v-card>
-        <v-card-title class="d-flex align-center">
-          <v-icon start class="mr-2">mdi-account-plus</v-icon>
-          اضافه کردن عضو جدید
+    <v-dialog v-model="showAddMemberDialog" max-width="600px" persistent>
+      <v-card class="add-member-dialog">
+        <v-card-title class="dialog-header">
+          <div class="d-flex align-center">
+            <v-avatar size="48" color="green" class="mr-4">
+              <v-icon size="24" color="white">mdi-account-plus</v-icon>
+            </v-avatar>
+            <div>
+              <h2 class="text-h5 mb-1">اضافه کردن عضو جدید</h2>
+              <p class="text-body-2 text-grey-darken-1">
+                کاربران جدید را به کانال {{ currentChannel?.name }} اضافه کنید
+              </p>
+            </div>
+          </div>
         </v-card-title>
-        <v-card-text>
+        
+        <v-card-text class="dialog-content">
           <v-text-field
             v-model="memberSearch"
             label="جستجوی کاربر"
             placeholder="نام یا ایمیل کاربر را وارد کنید..."
             prepend-inner-icon="mdi-magnify"
             variant="outlined"
+            density="comfortable"
             @input="searchUsersForMember"
+            class="mb-4"
           ></v-text-field>
           
-          <div v-if="searchingUsers" class="text-center pa-4">
-            <v-progress-circular indeterminate color="primary" size="20"></v-progress-circular>
+          <div v-if="searchingUsers" class="searching-users">
+            <v-progress-circular indeterminate color="primary" size="40"></v-progress-circular>
+            <p class="text-body-2 mt-3">در حال جستجو...</p>
           </div>
           
-          <div v-else-if="searchResults.length > 0" class="mt-4">
-            <v-list>
+          <div v-else-if="searchResults.length > 0" class="search-results">
+            <h4 class="text-subtitle-1 font-weight-medium mb-3">
+              نتایج جستجو ({{ searchResults.length }} کاربر)
+            </h4>
+            <v-list class="search-result-list">
               <v-list-item
                 v-for="user in searchResults"
                 :key="user.id"
                 @click="addMemberToChannel(user.id)"
                 class="search-result-item"
+                rounded="lg"
               >
                 <template v-slot:prepend>
-                  <v-avatar size="36" color="primary" class="mr-3">
+                  <v-avatar size="40" color="primary" class="mr-3">
                     <span class="text-white">{{ user.fullName.charAt(0) }}</span>
                   </v-avatar>
                 </template>
@@ -615,7 +859,8 @@
                 </v-list-item-title>
                 
                 <v-list-item-subtitle class="text-caption">
-                  {{ user.email }}
+                  <v-icon size="14" class="mr-1">mdi-email</v-icon>
+                  {{ maskEmail(user.email) }}
                 </v-list-item-subtitle>
                 
                 <template v-slot:append>
@@ -623,6 +868,7 @@
                     icon
                     size="small"
                     color="primary"
+                    variant="text"
                   >
                     <v-icon>mdi-plus</v-icon>
                   </v-btn>
@@ -631,17 +877,30 @@
             </v-list>
           </div>
           
-          <div v-else-if="memberSearch && !searchingUsers" class="text-center pa-4">
-            <p class="text-grey-lighten-1">کاربری یافت نشد</p>
+          <div v-else-if="memberSearch && !searchingUsers" class="no-results">
+            <v-icon size="64" color="grey-lighten-1" class="mb-3">mdi-account-search</v-icon>
+            <h4 class="text-subtitle-1 text-grey-lighten-1 mb-2">کاربری یافت نشد</h4>
+            <p class="text-body-2 text-grey-darken-1">
+              کاربری با این نام یا ایمیل در سیستم وجود ندارد
+            </p>
+          </div>
+          
+          <div v-else class="search-placeholder">
+            <v-icon size="64" color="grey-lighten-1" class="mb-3">mdi-account-search</v-icon>
+            <h4 class="text-subtitle-1 text-grey-lighten-1 mb-2">جستجوی کاربر</h4>
+            <p class="text-body-2 text-grey-darken-1">
+              نام یا ایمیل کاربر مورد نظر را وارد کنید
+            </p>
           </div>
         </v-card-text>
-        <v-card-actions>
-          <v-btn @click="showAddMemberDialog = false">لغو</v-btn>
+        
+        <v-card-actions class="dialog-actions">
+          <v-btn @click="showAddMemberDialog = false" variant="outlined" size="large">
+            لغو
+          </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
-
-
   </div>
 </template>
 
@@ -673,6 +932,15 @@ export default defineComponent({
     const creatingChannel = ref(false);
     const channelSearch = ref('');
     
+    // Pagination state
+    const pagination = ref({
+      limit: 30,
+      offset: 0,
+      hasMore: true,
+      loadingMore: false,
+      totalMessages: 0
+    });
+    
     // Emoji picker
     const showEmojiPicker = ref(false);
     const commonEmojis = ref([
@@ -693,6 +961,20 @@ export default defineComponent({
       '💟', '❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍', '🤎'
     ]);
 
+    // Quote/Reply functionality
+    const quotedMessage = ref(null);
+    const showMessageActions = ref(null);
+
+    // Like/Dislike functionality
+    const currentUser = ref({
+      id: 1,
+      fullName: 'کاربر فعلی',
+      email: 'user@example.com'
+    });
+
+    // Loading states for reactions
+    const reactingMessages = ref(new Set());
+
     // Member management
     const showMemberDialog = ref(false);
     const showAddMemberDialog = ref(false);
@@ -706,15 +988,6 @@ export default defineComponent({
     const autoRefreshInterval = ref(null);
     const refreshInterval = 3000; // 3 seconds
 
-    // Current user (mock for now)
-    const currentUser = ref({
-      id: 1,
-      fullName: 'کاربر فعلی',
-      email: 'user@example.com'
-    });
-
-
-
     // New channel form
     const newChannel = ref({
       name: '',
@@ -822,11 +1095,22 @@ export default defineComponent({
     const selectChannel = async (channel) => {
       currentChannel.value = channel;
       showChannelDrawer.value = false;
+      
+      // Reset pagination when switching channels
+      pagination.value = {
+        limit: 30,
+        offset: 0,
+        hasMore: true,
+        loadingMore: false,
+        totalMessages: 0
+      };
+      
       await loadChannelMessages(channel.channelId);
+      
+      // Update channel stats when selecting a channel
+      await updateChannelStats();
     };
 
-
-
     const joinChannel = async (channel) => {
       try {
         const response = await axios.post(`/api/chat/channels/${channel.channelId}/join`);
@@ -849,6 +1133,9 @@ export default defineComponent({
           // Force reactivity update
           await nextTick();
           
+          // Update channel stats after joining
+          await updateChannelStats();
+          
           // Show success message (optional)
           console.log('Successfully joined channel:', channel.name);
         }
@@ -867,20 +1154,35 @@ export default defineComponent({
           await loadPublicChannels();
           currentChannel.value = null;
           messages.value = [];
+          
+          // Update channel stats after leaving
+          if (currentChannel.value) {
+            await updateChannelStats();
+          }
         }
       } catch (error) {
         console.error('Error leaving channel:', error);
       }
     };
 
-    const loadChannelMessages = async (channelId, isAutoRefresh = false) => {
+    const loadChannelMessages = async (channelId, isAutoRefresh = false, isLoadMore = false) => {
       try {
-        if (!isAutoRefresh) {
+        if (!isAutoRefresh && !isLoadMore) {
           loading.value = true;
         }
-        const response = await axios.get(`/api/chat/channels/${channelId}/messages`);
+        if (isLoadMore) {
+          pagination.value.loadingMore = true;
+        }
+        
+        const params = new URLSearchParams({
+          limit: pagination.value.limit.toString(),
+          offset: pagination.value.offset.toString()
+        });
+        
+        const response = await axios.get(`/api/chat/channels/${channelId}/messages?${params}`);
         if (response.data.success) {
           const newMessages = response.data.data.reverse(); // Show newest first
+          const paginationInfo = response.data.pagination;
           
           // For auto-refresh, only update if there are new messages
           if (isAutoRefresh) {
@@ -893,8 +1195,36 @@ export default defineComponent({
               await nextTick();
               scrollToBottom();
             }
+          } else if (isLoadMore) {
+            // For load more, prepend older messages to the beginning
+            if (newMessages.length > 0) {
+              const scrollPosition = messagesContainer.value?.scrollTop || 0;
+              const scrollHeight = messagesContainer.value?.scrollHeight || 0;
+              
+              messages.value = [...newMessages, ...messages.value];
+              
+              // Update pagination from server response
+              pagination.value.offset = paginationInfo.offset + pagination.value.limit;
+              pagination.value.hasMore = paginationInfo.hasMore;
+              pagination.value.totalMessages = paginationInfo.total;
+              
+              // Maintain scroll position after adding older messages
+              await nextTick();
+              if (messagesContainer.value) {
+                const newScrollHeight = messagesContainer.value.scrollHeight;
+                const scrollDiff = newScrollHeight - scrollHeight;
+                messagesContainer.value.scrollTop = scrollPosition + scrollDiff;
+              }
+            } else {
+              pagination.value.hasMore = false;
+            }
           } else {
+            // Initial load
             messages.value = newMessages;
+            pagination.value.offset = paginationInfo.offset + pagination.value.limit;
+            pagination.value.hasMore = paginationInfo.hasMore;
+            pagination.value.totalMessages = paginationInfo.total;
+            
             await nextTick();
             scrollToBottom();
           }
@@ -902,9 +1232,33 @@ export default defineComponent({
       } catch (error) {
         console.error('Error loading messages:', error);
       } finally {
-        if (!isAutoRefresh) {
+        if (!isAutoRefresh && !isLoadMore) {
           loading.value = false;
         }
+        if (isLoadMore) {
+          pagination.value.loadingMore = false;
+        }
+      }
+    };
+
+    const loadMoreMessages = async () => {
+      if (!currentChannel.value || pagination.value.loadingMore || !pagination.value.hasMore) {
+        return;
+      }
+      
+      await loadChannelMessages(currentChannel.value.channelId, false, true);
+    };
+
+    const handleScroll = () => {
+      if (!messagesContainer.value || pagination.value.loadingMore || !pagination.value.hasMore) {
+        return;
+      }
+      
+      const { scrollTop } = messagesContainer.value;
+      
+      // Load more messages when user scrolls to the top (or near the top)
+      if (scrollTop <= 100) {
+        loadMoreMessages();
       }
     };
 
@@ -921,15 +1275,26 @@ export default defineComponent({
       loading.value = true;
       
       try {
-        const response = await axios.post(`/api/chat/channels/${currentChannel.value.channelId}/messages`, {
+        const messageData = {
           content: messageText.value,
           messageType: 'text'
-        });
+        };
+
+        // Add quoted message ID if there's a quoted message
+        if (quotedMessage.value) {
+          messageData.quotedMessageId = quotedMessage.value.id;
+        }
+
+        const response = await axios.post(`/api/chat/channels/${currentChannel.value.channelId}/messages`, messageData);
 
         if (response.data.success) {
           const newMessage = response.data.data;
           messages.value.push(newMessage);
           messageText.value = '';
+          quotedMessage.value = null; // Clear quoted message after sending
+          
+          // Update channel stats after sending message
+          await updateChannelStats();
           
           await nextTick();
           scrollToBottom();
@@ -945,6 +1310,158 @@ export default defineComponent({
       }
     };
 
+    const quoteMessage = (message) => {
+      quotedMessage.value = message;
+      // Focus on the input field
+      nextTick(() => {
+        const input = document.querySelector('.message-input input');
+        if (input) {
+          input.focus();
+        }
+      });
+    };
+
+    const replyToMessage = (message) => {
+      quotedMessage.value = message;
+      // Focus on the input field
+      nextTick(() => {
+        const input = document.querySelector('.message-input input');
+        if (input) {
+          input.focus();
+        }
+      });
+    };
+
+    const cancelQuote = () => {
+      quotedMessage.value = null;
+    };
+
+    const isLiked = (message) => {
+      if (!message.reactions || !message.reactions['❤️']) return false;
+      return message.reactions['❤️'].includes(currentUser.value.id);
+    };
+
+    const isDisliked = (message) => {
+      if (!message.reactions || !message.reactions['👎']) return false;
+      return message.reactions['👎'].includes(currentUser.value.id);
+    };
+
+    const toggleLike = async (message) => {
+      const loadingKey = `like-${message.id}`;
+      
+      // Prevent multiple clicks
+      if (reactingMessages.value.has(loadingKey)) return;
+      
+      try {
+        reactingMessages.value.add(loadingKey);
+        const wasLiked = isLiked(message);
+        
+        // Store original state for rollback
+        const originalReactions = JSON.parse(JSON.stringify(message.reactions || {}));
+        
+        if (wasLiked) {
+          // Remove like
+          await axios.delete(`/api/chat/messages/${message.id}/reactions`, {
+            data: { emoji: '❤️' }
+          });
+          
+          // Update local state immediately
+          if (message.reactions && message.reactions['❤️']) {
+            message.reactions['❤️'] = message.reactions['❤️'].filter(id => id !== currentUser.value.id);
+            if (message.reactions['❤️'].length === 0) {
+              delete message.reactions['❤️'];
+            }
+          }
+        } else {
+          // Add like
+          await axios.post(`/api/chat/messages/${message.id}/reactions`, {
+            emoji: '❤️'
+          });
+          
+          // Update local state immediately
+          if (!message.reactions) {
+            message.reactions = {};
+          }
+          if (!message.reactions['❤️']) {
+            message.reactions['❤️'] = [];
+          }
+          if (!message.reactions['❤️'].includes(currentUser.value.id)) {
+            message.reactions['❤️'].push(currentUser.value.id);
+          }
+        }
+        
+        // Force reactivity update
+        messages.value = [...messages.value];
+      } catch (error) {
+        console.error('Error toggling like:', error);
+        // Revert local changes on error
+        message.reactions = originalReactions;
+        messages.value = [...messages.value];
+        // Optionally show error message to user
+        // You can add a toast notification here
+      } finally {
+        reactingMessages.value.delete(loadingKey);
+      }
+    };
+
+    const toggleDislike = async (message) => {
+      const loadingKey = `dislike-${message.id}`;
+      
+      // Prevent multiple clicks
+      if (reactingMessages.value.has(loadingKey)) return;
+      
+      try {
+        reactingMessages.value.add(loadingKey);
+        const wasDisliked = isDisliked(message);
+        
+        // Store original state for rollback
+        const originalReactions = JSON.parse(JSON.stringify(message.reactions || {}));
+        
+        if (wasDisliked) {
+          // Remove dislike
+          await axios.delete(`/api/chat/messages/${message.id}/reactions`, {
+            data: { emoji: '👎' }
+          });
+          
+          // Update local state immediately
+          if (message.reactions && message.reactions['👎']) {
+            message.reactions['👎'] = message.reactions['👎'].filter(id => id !== currentUser.value.id);
+            if (message.reactions['👎'].length === 0) {
+              delete message.reactions['👎'];
+            }
+          }
+        } else {
+          // Add dislike
+          await axios.post(`/api/chat/messages/${message.id}/reactions`, {
+            emoji: '👎'
+          });
+          
+          // Update local state immediately
+          if (!message.reactions) {
+            message.reactions = {};
+          }
+          if (!message.reactions['👎']) {
+            message.reactions['👎'] = [];
+          }
+          if (!message.reactions['👎'].includes(currentUser.value.id)) {
+            message.reactions['👎'].push(currentUser.value.id);
+          }
+        }
+        
+        // Force reactivity update
+        messages.value = [...messages.value];
+      } catch (error) {
+        console.error('Error toggling dislike:', error);
+        // Revert local changes on error
+        message.reactions = originalReactions;
+        messages.value = [...messages.value];
+        // Optionally show error message to user
+        // You can add a toast notification here
+      } finally {
+        reactingMessages.value.delete(loadingKey);
+      }
+    };
+
     const createChannel = async () => {
       if (!newChannel.value.name.trim()) return;
 
@@ -982,7 +1499,31 @@ export default defineComponent({
       }
     };
 
-
+    const updateChannelStats = async () => {
+      if (!currentChannel.value) return;
+      
+      try {
+        const response = await axios.get(`/api/chat/channels/${currentChannel.value.channelId}/stats`);
+        if (response.data.success) {
+          const stats = response.data.data;
+          
+          // Update current channel stats
+          if (currentChannel.value) {
+            currentChannel.value.messageCount = stats.messageCount;
+            currentChannel.value.memberCount = stats.memberCount;
+          }
+          
+          // Update channel in userChannels list
+          const channelIndex = userChannels.value.findIndex(c => c.id === currentChannel.value.id);
+          if (channelIndex !== -1) {
+            userChannels.value[channelIndex].messageCount = stats.messageCount;
+            userChannels.value[channelIndex].memberCount = stats.memberCount;
+          }
+        }
+      } catch (error) {
+        console.error('Error updating channel stats:', error);
+      }
+    };
 
     const refreshChannels = async () => {
       await loadUserChannels();
@@ -1131,6 +1672,33 @@ export default defineComponent({
       }).format(date);
     };
 
+    // Function to mask email for security
+    const maskEmail = (email) => {
+      if (!email) return '';
+      
+      const [username, domain] = email.split('@');
+      if (!domain) return email;
+      
+      // Mask username (show first and last character)
+      let maskedUsername = username;
+      if (username.length > 2) {
+        maskedUsername = username.charAt(0) + '*'.repeat(username.length - 2) + username.charAt(username.length - 1);
+      } else if (username.length === 2) {
+        maskedUsername = username.charAt(0) + '*';
+      }
+      
+      // Mask domain (show first character of each part)
+      const domainParts = domain.split('.');
+      const maskedDomainParts = domainParts.map(part => {
+        if (part.length > 1) {
+          return part.charAt(0) + '*'.repeat(part.length - 1);
+        }
+        return part;
+      });
+      
+      return `${maskedUsername}@${maskedDomainParts.join('.')}`;
+    };
+
     // Initialize
     onMounted(() => {
       loadUserChannels();
@@ -1171,6 +1739,7 @@ export default defineComponent({
       memberSearch,
       searchResults,
       searchingUsers,
+      pagination,
       sendMessage,
       createChannel,
       selectChannel,
@@ -1184,8 +1753,22 @@ export default defineComponent({
       addMemberToChannel,
       removeMemberFromChannel,
       updateUserChannels,
+      updateChannelStats,
       formatTime,
       formatDate,
+      quotedMessage,
+      showMessageActions,
+      quoteMessage,
+      replyToMessage,
+      cancelQuote,
+      isLiked,
+      isDisliked,
+      toggleLike,
+      toggleDislike,
+      reactingMessages,
+      handleScroll,
+      loadMoreMessages,
+      maskEmail,
     };
   },
 });
@@ -1526,6 +2109,23 @@ export default defineComponent({
   background-color: rgba(255, 255, 255, 0.1);
 }
 
+/* Load more indicator */
+.load-more-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  background-color: rgba(0, 0, 0, 0.02);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  color: rgba(0, 0, 0, 0.7);
+}
+
+.v-theme--dark .load-more-indicator {
+  background-color: rgba(255, 255, 255, 0.02);
+  border-bottom-color: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.7);
+}
+
 /* Mobile optimizations */
 @media (max-width: 768px) {
   .chat-container {
@@ -1648,6 +2248,551 @@ export default defineComponent({
   box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
 }
 
+/* New styles for quoted message preview */
+.quoted-message-preview {
+  background-color: rgba(0, 0, 0, 0.05);
+  border-left: 3px solid #1976d2;
+  padding: 12px;
+  margin-bottom: 12px;
+  border-radius: 8px;
+  position: relative;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
 
-</style>
+.quoted-preview-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
 
+.quoted-preview-header {
+  display: flex;
+  align-items: center;
+  background-color: rgba(25, 118, 210, 0.1);
+  padding: 4px 8px;
+  border-radius: 6px;
+  font-size: 0.75rem;
+  color: #1976d2;
+}
+
+.quoted-preview-text {
+  font-size: 0.875rem;
+  color: rgba(0, 0, 0, 0.7);
+  word-break: break-word;
+  line-height: 1.4;
+}
+
+.v-theme--dark .quoted-message-preview {
+  background-color: rgba(255, 255, 255, 0.05);
+  border-left-color: #1976d2;
+}
+
+.v-theme--dark .quoted-preview-header {
+  background-color: rgba(25, 118, 210, 0.2);
+  color: #64b5f6;
+}
+
+.v-theme--dark .quoted-preview-text {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+/* Message actions styles */
+.message-actions {
+  display: flex;
+  gap: 4px;
+  margin-top: 8px;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  justify-content: flex-start;
+}
+
+.message-item:hover .message-actions {
+  opacity: 1;
+}
+
+.message-own .message-actions {
+  justify-content: flex-end;
+}
+
+.action-btn {
+  color: rgba(0, 0, 0, 0.6) !important;
+  transition: all 0.2s ease;
+}
+
+.action-btn:hover {
+  color: #1976d2 !important;
+  background-color: rgba(25, 118, 210, 0.1) !important;
+}
+
+.action-btn.liked {
+  color: #f44336 !important;
+}
+
+.action-btn.liked:hover {
+  color: #d32f2f !important;
+  background-color: rgba(244, 67, 54, 0.1) !important;
+}
+
+.action-btn.disliked {
+  color: #ff9800 !important;
+}
+
+.action-btn.disliked:hover {
+  color: #f57c00 !important;
+  background-color: rgba(255, 152, 0, 0.1) !important;
+}
+
+.v-theme--dark .action-btn {
+  color: rgba(255, 255, 255, 0.6) !important;
+}
+
+.v-theme--dark .action-btn:hover {
+  color: #64b5f6 !important;
+  background-color: rgba(100, 181, 246, 0.1) !important;
+}
+
+.v-theme--dark .action-btn.liked {
+  color: #ef5350 !important;
+}
+
+.v-theme--dark .action-btn.liked:hover {
+  color: #e53935 !important;
+  background-color: rgba(239, 83, 80, 0.1) !important;
+}
+
+.v-theme--dark .action-btn.disliked {
+  color: #ffb74d !important;
+}
+
+.v-theme--dark .action-btn.disliked:hover {
+  color: #ffa726 !important;
+  background-color: rgba(255, 183, 77, 0.1) !important;
+}
+
+/* Improve quoted message styling */
+.quoted-message {
+  background-color: rgba(0, 0, 0, 0.05);
+  border-left: 3px solid #1976d2;
+  padding: 12px;
+  margin-bottom: 12px;
+  border-radius: 8px;
+  position: relative;
+}
+
+.quoted-content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.quoted-sender {
+  font-weight: 600;
+  font-size: 0.75rem;
+  color: #1976d2;
+}
+
+.quoted-text {
+  font-size: 0.875rem;
+  color: rgba(0, 0, 0, 0.7);
+  line-height: 1.4;
+  word-break: break-word;
+}
+
+.v-theme--dark .quoted-message {
+  background-color: rgba(255, 255, 255, 0.05);
+  border-left-color: #1976d2;
+}
+
+.v-theme--dark .quoted-sender {
+  color: #64b5f6;
+}
+
+.v-theme--dark .quoted-text {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+/* Reaction chip styles */
+.reaction-chip {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-weight: 600;
+  font-size: 0.75rem;
+  color: rgba(0, 0, 0, 0.8);
+  background-color: rgba(0, 0, 0, 0.05);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
+}
+
+.reaction-chip:hover {
+  background-color: rgba(0, 0, 0, 0.08);
+  border-color: rgba(0, 0, 0, 0.2);
+}
+
+.reaction-chip.like-chip {
+  color: #f44336; /* Red for like */
+  background-color: rgba(244, 67, 54, 0.1);
+  border-color: rgba(244, 67, 54, 0.2);
+}
+
+.reaction-chip.like-chip:hover {
+  background-color: rgba(244, 67, 54, 0.2);
+  border-color: rgba(244, 67, 54, 0.3);
+}
+
+.reaction-chip.dislike-chip {
+  color: #ff9800; /* Orange for dislike */
+  background-color: rgba(255, 152, 0, 0.1);
+  border-color: rgba(255, 152, 0, 0.2);
+}
+
+.reaction-chip.dislike-chip:hover {
+  background-color: rgba(255, 152, 0, 0.2);
+  border-color: rgba(255, 152, 0, 0.3);
+}
+
+.v-theme--dark .reaction-chip {
+  color: rgba(255, 255, 255, 0.8);
+  background-color: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+.v-theme--dark .reaction-chip:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.v-theme--dark .reaction-chip.like-chip {
+  color: #ef5350; /* Darker red for dark mode */
+  background-color: rgba(239, 83, 80, 0.1);
+  border-color: rgba(239, 83, 80, 0.2);
+}
+
+.v-theme--dark .reaction-chip.like-chip:hover {
+  background-color: rgba(239, 83, 80, 0.2);
+  border-color: rgba(239, 83, 80, 0.3);
+}
+
+.v-theme--dark .reaction-chip.dislike-chip {
+  color: #ffa726; /* Darker orange for dark mode */
+  background-color: rgba(255, 167, 38, 0.1);
+  border-color: rgba(255, 167, 38, 0.2);
+}
+
+.v-theme--dark .reaction-chip.dislike-chip:hover {
+  background-color: rgba(255, 167, 38, 0.2);
+  border-color: rgba(255, 167, 38, 0.3);
+}
+
+/* Dialog Styles */
+.create-channel-dialog,
+.member-dialog,
+.add-member-dialog {
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+}
+
+.dialog-header {
+  background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
+  color: white;
+  padding: 24px;
+  position: relative;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.dialog-header::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(5px);
+}
+
+.dialog-header > div {
+  position: relative;
+  z-index: 1;
+}
+
+.dialog-header h2 {
+  color: white !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  font-weight: 600;
+}
+
+.dialog-header p {
+  color: rgba(255, 255, 255, 0.9) !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+/* Dark theme support for dialog headers */
+.v-theme--dark .dialog-header {
+  background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%);
+}
+
+.v-theme--dark .dialog-header h2 {
+  color: white !important;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+}
+
+.v-theme--dark .dialog-header p {
+  color: rgba(255, 255, 255, 0.95) !important;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+.dialog-content {
+  padding: 24px;
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.dialog-actions {
+  padding: 16px 24px;
+  background-color: rgba(0, 0, 0, 0.02);
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+.add-member-btn {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transition: all 0.3s ease;
+}
+
+.add-member-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
+}
+
+/* Member Stats Cards */
+.member-stats {
+  margin-bottom: 24px;
+}
+
+.stat-card {
+  border-radius: 12px;
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+
+.stat-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+}
+
+.stat-card .v-card-text {
+  padding: 20px;
+}
+
+/* Member List */
+.member-list {
+  background: transparent;
+}
+
+.member-item {
+  margin-bottom: 8px;
+  border-radius: 12px;
+  transition: all 0.3s ease;
+  border: 1px solid transparent;
+}
+
+.member-item:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+  border-color: rgba(0, 0, 0, 0.08);
+  transform: translateX(4px);
+}
+
+.remove-btn {
+  opacity: 0;
+  transition: all 0.3s ease;
+}
+
+.member-item:hover .remove-btn {
+  opacity: 1;
+}
+
+/* Search Results */
+.search-results {
+  margin-top: 16px;
+}
+
+.search-result-list {
+  background: transparent;
+}
+
+.search-result-item {
+  margin-bottom: 8px;
+  border-radius: 12px;
+  transition: all 0.3s ease;
+  border: 1px solid transparent;
+  cursor: pointer;
+}
+
+.search-result-item:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+  border-color: rgba(0, 0, 0, 0.08);
+  transform: translateX(4px);
+}
+
+/* Loading and Empty States */
+.loading-members,
+.searching-users,
+.no-results,
+.search-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  text-align: center;
+}
+
+.loading-members p,
+.searching-users p {
+  color: rgba(0, 0, 0, 0.7);
+  margin-top: 16px;
+}
+
+.no-results h4,
+.search-placeholder h4 {
+  color: rgba(0, 0, 0, 0.6);
+  margin-bottom: 8px;
+}
+
+.no-results p,
+.search-placeholder p {
+  color: rgba(0, 0, 0, 0.5);
+  max-width: 300px;
+}
+
+/* Dark Theme Support for Dialogs */
+.v-theme--dark .dialog-actions {
+  background-color: rgba(255, 255, 255, 0.02);
+  border-top-color: rgba(255, 255, 255, 0.08);
+}
+
+.v-theme--dark .stat-card:hover {
+  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
+}
+
+.v-theme--dark .member-item:hover {
+  background-color: rgba(255, 255, 255, 0.04);
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+.v-theme--dark .search-result-item:hover {
+  background-color: rgba(255, 255, 255, 0.04);
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+.v-theme--dark .loading-members p,
+.v-theme--dark .searching-users p {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.v-theme--dark .no-results h4,
+.v-theme--dark .search-placeholder h4 {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.v-theme--dark .no-results p,
+.v-theme--dark .search-placeholder p {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+/* Mobile Responsive for Dialogs */
+@media (max-width: 768px) {
+  .create-channel-dialog,
+  .member-dialog,
+  .add-member-dialog {
+    margin: 16px;
+    border-radius: 12px;
+  }
+  
+  .dialog-header {
+    padding: 20px;
+  }
+  
+  .dialog-content {
+    padding: 20px;
+    max-height: 50vh;
+  }
+  
+  .dialog-actions {
+    padding: 12px 20px;
+  }
+  
+  .member-stats .v-row {
+    margin: 0;
+  }
+  
+  .member-stats .v-col {
+    padding: 8px;
+  }
+  
+  .stat-card .v-card-text {
+    padding: 16px;
+  }
+  
+  .add-member-btn {
+    font-size: 0.875rem;
+    padding: 8px 16px;
+  }
+}
+
+/* Animation for dialog entrance */
+.v-dialog .v-card {
+  animation: dialogSlideIn 0.3s ease-out;
+}
+
+@keyframes dialogSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* Hover effects for interactive elements */
+.v-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.v-chip:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Custom scrollbar for dialog content */
+.dialog-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.dialog-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.dialog-content::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+}
+
+.dialog-content::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.v-theme--dark .dialog-content::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.v-theme--dark .dialog-content::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+</style>
\ No newline at end of file