diff --git a/package-lock.json b/package-lock.json
index 05628e3..4be8159 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,6 +38,7 @@
         "react-otp-input": "^3.1.1",
         "react-spinners": "^0.17.0",
         "recharts": "^3.2.1",
+        "socket.io-client": "^4.8.1",
         "swiper": "^11.2.10",
         "tailwind-merge": "^3.3.1",
         "yup": "^1.7.0",
@@ -1881,6 +1882,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
+      "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
+      "license": "MIT"
+    },
     "node_modules/@standard-schema/spec": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz",
@@ -3849,6 +3856,45 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/engine.io-client": {
+      "version": "6.6.3",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.3.tgz",
+      "integrity": "sha512-T0iLjnyNWahNyv/lcjS2y4oE358tVS/SYQNxYXGAJ9/GLgH4VCvOQ/mhTjqU88mLZCQgiG8RIegFHYCdVC+j5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.17.1",
+        "xmlhttprequest-ssl": "~2.1.1"
+      }
+    },
+    "node_modules/engine.io-client/node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
+      "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.18.2",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.2.tgz",
@@ -6047,7 +6093,6 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/nanoid": {
@@ -7214,6 +7259,68 @@
         "is-arrayish": "^0.3.1"
       }
     },
+    "node_modules/socket.io-client": {
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.1.tgz",
+      "integrity": "sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.6.1",
+        "socket.io-parser": "~4.2.4"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-client/node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+      "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser/node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -7997,6 +8104,35 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ws": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/xmlhttprequest-ssl": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz",
+      "integrity": "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/yallist": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
diff --git a/package.json b/package.json
index 3f1cbea..d1ed416 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "react-otp-input": "^3.1.1",
     "react-spinners": "^0.17.0",
     "recharts": "^3.2.1",
+    "socket.io-client": "^4.8.1",
     "swiper": "^11.2.10",
     "tailwind-merge": "^3.3.1",
     "yup": "^1.7.0",
diff --git a/src/app/cart/components/ShippingMethodSelector.tsx b/src/app/cart/components/ShippingMethodSelector.tsx
index 26d9151..f97c819 100644
--- a/src/app/cart/components/ShippingMethodSelector.tsx
+++ b/src/app/cart/components/ShippingMethodSelector.tsx
@@ -1,7 +1,7 @@
 'use client'
 import { useState, useEffect } from 'react'
 import { Truck, Sort, Flash } from 'iconsax-react'
-import { ShopShippingType, ShipmentInfoType } from '../types/Types'
+import { ShopShippingType, ShipmentInfoType, ShipperType } from '../types/Types'
 
 interface ShippingMethodSelectorProps {
     shippingData: ShopShippingType[]
@@ -27,18 +27,20 @@ const ShippingMethodSelector = ({
     const [expandedShops, setExpandedShops] = useState<Set<string>>(new Set())
 
     // تابع مرتب‌سازی روش‌های ارسال
-    const sortShippers = (shippers: any[]) => {
+    const sortShippers = (shippers: ShipperType[]) => {
         if (sortBy === 'default') return shippers
 
         return [...shippers].sort((a, b) => {
-            let aValue, bValue
+            let aValue: number, bValue: number
 
             if (sortBy === 'price') {
                 aValue = a.totalShippingCost
                 bValue = b.totalShippingCost
             } else if (sortBy === 'time') {
-                aValue = a.shippingDaysRange?.[0] || 0
-                bValue = b.shippingDaysRange?.[0] || 0
+                aValue = parseInt(a.shippingDaysRange?.[0] || '0')
+                bValue = parseInt(b.shippingDaysRange?.[0] || '0')
+            } else {
+                return 0
             }
 
             if (sortOrder === 'asc') {
@@ -256,8 +258,8 @@ const ShippingMethodSelector = ({
                                             <label
                                                 key={shipper.shipperId}
                                                 className={`flex items-center justify-between p-3 border rounded-lg cursor-pointer transition-colors ${selectedShipments[shop.shopId] === shipper.shipperId
-                                                        ? 'border-primary bg-primary/5'
-                                                        : 'border-gray-200 hover:bg-gray-50'
+                                                    ? 'border-primary bg-primary/5'
+                                                    : 'border-gray-200 hover:bg-gray-50'
                                                     }`}
                                             >
                                                 <div className="flex items-center gap-3">
diff --git a/src/app/product/components/ShopInformation.tsx b/src/app/product/components/ShopInformation.tsx
index 666e963..bf2a09e 100644
--- a/src/app/product/components/ShopInformation.tsx
+++ b/src/app/product/components/ShopInformation.tsx
@@ -1,18 +1,20 @@
 'use client'
 import { Button } from '@/components/ui/button'
 import { Separator } from '@/components/ui/separator'
-import { BoxTick, I3DRotate } from 'iconsax-react'
+import { BoxTick, I3DRotate, Messages1 } from 'iconsax-react'
 import React from 'react'
 import { Product } from '@/types/product.types'
 import Image from 'next/image'
 import Cart from './Cart'
 import { PRIMARY_COLOR } from '@/config/const'
+import { useRouter } from 'next/navigation'
 
 interface ShopInformationProps {
     product: Product
 }
 
 const ShopInformation = ({ product }: ShopInformationProps) => {
+    const router = useRouter()
 
     const defaultVariant = product.default_variant
     const shop = defaultVariant.shop
@@ -27,6 +29,11 @@ const ShopInformation = ({ product }: ShopInformationProps) => {
     const discountPercent = price.discount_percent
     const hasDiscount = discountPercent > 0
 
+    const handleChatWithSeller = () => {
+        // Navigate to chat page with product and shop context
+        router.push(`/profile/chat?productId=${product._id}&shopId=${shop._id}`)
+    }
+
     return (
         <div className='w-full xl:w-[325px] bg-[#FAFAFA] rounded-[10px] p-4 sm:p-6 lg:p-7 border border-border h-fit xl:sticky xl:top-[170px] xl:self-start'>
             <div className='text-lg text-[#191919]'>
@@ -98,7 +105,11 @@ const ShopInformation = ({ product }: ShopInformationProps) => {
             </div>
 
             <Cart />
-            <Button className='w-full mt-3 bg-[#323232]'>
+            <Button
+                onClick={handleChatWithSeller}
+                className='w-full mt-3 bg-[#323232] hover:bg-[#424242] flex items-center justify-center gap-2'
+            >
+                <Messages1 size={18} />
                 گفتگو با فروشنده
             </Button>
         </div>
diff --git a/src/app/profile/chat/components/ChatMessages.tsx b/src/app/profile/chat/components/ChatMessages.tsx
new file mode 100644
index 0000000..9cb6657
--- /dev/null
+++ b/src/app/profile/chat/components/ChatMessages.tsx
@@ -0,0 +1,496 @@
+'use client'
+import { useState, useRef, useEffect, useMemo } from 'react'
+import { Trash, More, EmojiHappy, AttachCircle, Send, Shop, Call, VideoPlay } from 'iconsax-react'
+import { useSocket } from '../hooks/useSocket'
+import { Message as SocketMessage } from '../service/SocketService'
+import { useChatMessages, useMarkChatAsRead } from '../../hooks/useChatData'
+import { isAuthenticated } from '@/config/func'
+import { ChatMessage as APIMessage } from '../../types/ProfileTypes'
+
+interface Message {
+    id: string
+    text: string
+    time: string
+    sender: 'user' | 'admin'
+    status?: 'sent' | 'delivered' | 'read'
+}
+
+interface ChatMessagesProps {
+    productId?: string | null
+    shopId?: string | null
+    chatId?: string
+}
+
+export default function ChatMessages({ productId, shopId, chatId }: ChatMessagesProps) {
+    const [messageText, setMessageText] = useState('')
+    const [debugInfo, setDebugInfo] = useState<string>('')
+    const [isTyping, setIsTyping] = useState(false)
+    const [selectedFile, setSelectedFile] = useState<File | null>(null)
+    const [isUserAuthenticated, setIsUserAuthenticated] = useState<boolean | null>(null)
+    const messagesEndRef = useRef<HTMLDivElement>(null)
+    const typingTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+    const fileInputRef = useRef<HTMLInputElement>(null)
+
+    // Server capabilities - temporarily disable features not implemented yet
+    const SERVER_CAPABILITIES = {
+        socketChat: false, // Socket.IO chat not implemented yet
+        markAsRead: false, // markAsRead endpoint not implemented yet
+    }
+
+    // Calculate currentChatId from props
+    const currentChatId = chatId || (productId && shopId ? `chat_${shopId}_${productId}` : '')
+
+    const { data: chatData, isLoading, error } = useChatMessages(currentChatId, {
+        enabled: isUserAuthenticated === true // Only fetch if user is logged in
+    })
+
+    // Check authentication on mount
+    useEffect(() => {
+        const checkAuth = async () => {
+            const authenticated = await isAuthenticated()
+            setIsUserAuthenticated(authenticated)
+        }
+        checkAuth()
+    }, [])
+    const markAsRead = useMarkChatAsRead()
+
+    const {
+        isConnected,
+        joinChat,
+        leaveChat,
+        sendMessage,
+        onNewMessage,
+        onError
+    } = useSocket()
+
+    // Convert API messages to component format
+    const messages: Message[] = useMemo(() =>
+        chatData?.results?.messages?.map((msg: APIMessage) => ({
+            id: msg._id,
+            text: msg.content,
+            time: new Date(msg.createdAt).toLocaleTimeString('fa-IR', {
+                hour: '2-digit',
+                minute: '2-digit'
+            }),
+            sender: msg.sender === 'customer' ? 'user' : 'admin',
+            status: msg.status
+        })) || []
+        , [chatData?.results?.messages])
+
+    const scrollToBottom = () => {
+        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
+    }
+
+    useEffect(() => {
+        scrollToBottom()
+    }, [messages])
+
+    // Join chat room when chatId is set and socket is connected (only if server supports it and user is logged in)
+    useEffect(() => {
+        if (currentChatId && currentChatId !== '' && isUserAuthenticated === true) {
+            if (SERVER_CAPABILITIES.socketChat && isConnected) {
+                console.log('🔗 اتصال به چت:', currentChatId)
+                joinChat(currentChatId)
+                return () => {
+                    leaveChat(currentChatId)
+                }
+            }
+
+            // Mark messages as read only if server supports it
+            if (SERVER_CAPABILITIES.markAsRead) {
+                markAsRead.mutate(currentChatId)
+            } else {
+                console.log('ℹ️ markAsRead غیرفعال است (سرور هنوز پشتیبانی نمی‌کند)')
+            }
+        }
+    }, [currentChatId, isConnected, joinChat, leaveChat, markAsRead, SERVER_CAPABILITIES.socketChat, SERVER_CAPABILITIES.markAsRead, isUserAuthenticated])
+
+    // Listen for new messages
+    useEffect(() => {
+        const handleNewMessage = (socketMessage: unknown) => {
+            const message = socketMessage as SocketMessage
+            if (message.chatId === currentChatId) {
+                // The message will be added via React Query invalidation
+                // or we can update local state if needed
+                console.log('New message received:', message)
+            }
+        }
+
+        const handleError = (error: unknown) => {
+            const err = error as { message: string }
+            console.error('🚨 خطای چت:', err.message)
+            setDebugInfo(`خطا: ${err.message}`)
+            // You can show a toast notification here
+            if (err.message === 'اتصال سوکت برقرار نیست') {
+                console.warn('⚠️ راهنمایی: اگر این خطا تکرار می‌شود، احتمالاً سرور سوکت اجرا نمی‌شود یا قابل دسترسی نیست.')
+            }
+        }
+
+        onNewMessage(handleNewMessage)
+        onError(handleError)
+
+        return () => {
+            // Cleanup will be handled by the hook
+        }
+    }, [currentChatId, onNewMessage, onError])
+
+    const handleTyping = () => {
+        if (!isTyping) {
+            setIsTyping(true)
+            // Here you could emit a typing event to the server
+            // socketService.emit('typing', { chatId: currentChatId })
+        }
+
+        // Clear previous timeout
+        if (typingTimeoutRef.current) {
+            clearTimeout(typingTimeoutRef.current)
+        }
+
+        // Set new timeout to stop typing indicator
+        typingTimeoutRef.current = setTimeout(() => {
+            setIsTyping(false)
+            // socketService.emit('stopTyping', { chatId: currentChatId })
+        }, 2000)
+    }
+
+    const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0]
+        if (file) {
+            setSelectedFile(file)
+            console.log('📎 فایل انتخاب شد:', file.name, file.size, 'bytes')
+        }
+    }
+
+    const handleAttachClick = () => {
+        fileInputRef.current?.click()
+    }
+
+    const handleSend = () => {
+        if ((messageText.trim() || selectedFile) && currentChatId) {
+            const content = messageText.trim()
+            setMessageText('')
+            setIsTyping(false)
+            setSelectedFile(null)
+
+            // Clear typing timeout
+            if (typingTimeoutRef.current) {
+                clearTimeout(typingTimeoutRef.current)
+            }
+
+            // For now, just send text message
+            // TODO: Implement file upload when server supports it
+            if (content) {
+                sendMessage(currentChatId, content)
+            }
+
+            // Scroll to bottom after sending
+            setTimeout(scrollToBottom, 100)
+        }
+    }
+
+    const chat = chatData?.results?.chat
+    const seller = chat?.participants?.seller
+
+    return (
+        <div className="bg-white flex flex-col h-full">
+            {/* Debug Info - فقط در محیط توسعه */}
+            {process.env.NODE_ENV === 'development' && (
+                <div className="px-4 py-2 bg-yellow-50 border-b border-yellow-200 text-xs text-yellow-800">
+                    <div>🔍 دیباگ چت:</div>
+                    <div>ChatId: {currentChatId || 'خالی'}</div>
+                    <div>ProductId: {productId || 'خالی'}</div>
+                    <div>ShopId: {shopId || 'خالی'}</div>
+                    <div>Socket: {isConnected ? '🟢 متصل' : '🔴 قطع'}</div>
+                    <div>Server Capabilities: Socket={SERVER_CAPABILITIES.socketChat ? '✅' : '❌'}, MarkAsRead={SERVER_CAPABILITIES.markAsRead ? '✅' : '❌'}</div>
+                    {debugInfo && <div className="mt-1 text-red-600">{debugInfo}</div>}
+                </div>
+            )}
+
+            {/* Header */}
+            <div className="px-6 py-4 border-b border-gray-100 bg-white">
+                {isLoading ? (
+                    <div className="flex items-center gap-3">
+                        <div className="w-10 h-10 bg-gray-200 rounded-full animate-pulse"></div>
+                        <div>
+                            <div className="w-20 h-4 bg-gray-200 rounded animate-pulse mb-1"></div>
+                            <div className="w-12 h-3 bg-gray-200 rounded animate-pulse"></div>
+                        </div>
+                    </div>
+                ) : error ? (
+                    <div className="text-center text-red-500">
+                        <p className="text-sm">خطا در بارگذاری چت</p>
+                    </div>
+                ) : seller ? (
+                    <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-3">
+                            <div className="relative">
+                                <div className="w-10 h-10 bg-gradient-to-br from-primary/10 to-primary/20 rounded-full flex items-center justify-center overflow-hidden">
+                                    {seller.logo ? (
+                                        <img
+                                            src={seller.logo}
+                                            alt={seller.shopName}
+                                            className="w-full h-full object-cover"
+                                        />
+                                    ) : (
+                                        <Shop size={18} className="text-primary" variant="Bold" />
+                                    )}
+                                </div>
+                                {chat?.isOnline && (
+                                    <div className="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-green-500 border-2 border-white rounded-full"></div>
+                                )}
+                            </div>
+                            <div>
+                                <h3 className="font-semibold text-gray-900 text-sm">{seller.shopName}</h3>
+                                <p className="text-xs text-gray-500">
+                                    {chat?.isOnline ? 'آنلاین' : 'آفلاین'}
+                                </p>
+                            </div>
+                        </div>
+
+                        <div className="flex items-center gap-2">
+                            <button className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
+                                <Call size={18} />
+                            </button>
+                            <button className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
+                                <VideoPlay size={18} />
+                            </button>
+                            <button
+                                onClick={() => {
+                                    // TODO: Implement delete chat functionality
+                                    console.log('🗑️ درخواست حذف چت:', currentChatId)
+                                    if (confirm('آیا از حذف این گفتگو مطمئن هستید؟')) {
+                                        // deleteChatMutation.mutate(currentChatId)
+                                        alert('این قابلیت هنوز پیاده‌سازی نشده است.')
+                                    }
+                                }}
+                                className="p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
+                            >
+                                <Trash size={18} />
+                            </button>
+                            <button className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
+                                <More size={18} className="rotate-90" />
+                            </button>
+                        </div>
+                    </div>
+                ) : (
+                    <div className="text-center text-gray-500">
+                        <p className="text-sm">چتی انتخاب نشده</p>
+                    </div>
+                )}
+            </div>
+
+            {/* Messages Area */}
+            <div className="flex-1 overflow-y-auto bg-gray-50/30">
+                {/* Server Status Alert */}
+                {(!SERVER_CAPABILITIES.socketChat || !isConnected) && (
+                    <div className="px-6 py-3">
+                        <div className="bg-blue-50 border border-blue-200 rounded-lg px-4 py-3">
+                            <div className="text-xs text-blue-800 leading-relaxed">
+                                <div className="font-semibold mb-2">ℹ️ راه‌اندازی سرویس چت</div>
+                                <div className="space-y-1">
+                                    <div>• سرور Socket.IO: پیاده‌سازی نشده</div>
+                                    <div>• API markAsRead: پیاده‌سازی نشده</div>
+                                    <div>• وضعیت: در حال توسعه توسط تیم بکند</div>
+                                </div>
+                                <div className="mt-2 text-xs opacity-75">
+                                    چت در حالت آزمایشی کار می‌کند
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                )}
+
+                {/* Alert */}
+                <div className="px-6 py-3">
+                    <div className="bg-amber-50 border border-amber-200 rounded-lg px-4 py-3">
+                        <p className="text-xs text-amber-800 leading-relaxed">
+                            لطفا از ارسال اطلاعات مهم، شخصی و یا نامربوط بپرهیزید. گفتگوهای شما محرمانه است.
+                        </p>
+                    </div>
+                </div>
+
+                {/* Messages */}
+                <div className="px-6 pb-4 space-y-4">
+                    {isLoading ? (
+                        <div className="space-y-4">
+                            {[1, 2, 3].map((i) => (
+                                <div key={i} className={`flex ${i % 2 === 0 ? 'justify-start' : 'justify-end'}`}>
+                                    <div className="max-w-[70%]">
+                                        <div className="w-16 h-4 bg-gray-200 rounded animate-pulse mb-2"></div>
+                                        <div className={`rounded-2xl px-4 py-3 ${i % 2 === 0 ? 'bg-white' : 'bg-primary'} animate-pulse`}>
+                                            <div className="w-32 h-4 bg-gray-100 rounded"></div>
+                                        </div>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    ) : error ? (
+                        <div className="text-center text-red-500 py-8">
+                            <p className="text-sm">خطا در بارگذاری پیام‌ها</p>
+                        </div>
+                    ) : messages.length > 0 ? (
+                        messages.map((message, index) => {
+                            const isFirstInGroup = index === 0 || messages[index - 1].sender !== message.sender
+                            const senderName = message.sender === 'admin' ?
+                                (seller?.shopName || 'فروشگاه') : 'شما'
+
+                            return (
+                                <div
+                                    key={message.id}
+                                    className={`flex ${message.sender === 'admin' ? 'justify-start' : 'justify-end'}`}
+                                >
+                                    <div className={`max-w-[70%] ${message.sender === 'admin' ? 'mr-0' : 'ml-0'}`}>
+                                        {isFirstInGroup && (
+                                            <div className={`flex items-center gap-2 mb-2 ${message.sender === 'admin' ? 'justify-start' : 'justify-end'}`}>
+                                                <span className="text-xs text-gray-500 font-medium">
+                                                    {senderName}
+                                                </span>
+                                                <span className="text-xs text-gray-400">{message.time}</span>
+                                            </div>
+                                        )}
+
+                                        <div
+                                            className={`rounded-2xl px-4 py-3 shadow-sm ${message.sender === 'admin'
+                                                ? 'bg-white text-gray-800 border border-gray-100'
+                                                : 'bg-primary text-primary-foreground'
+                                                }`}
+                                        >
+                                            <p className="text-sm leading-relaxed">{message.text}</p>
+                                        </div>
+
+                                        {message.sender === 'user' && (
+                                            <div className="flex justify-end mt-1">
+                                                <div className="flex items-center gap-1">
+                                                    <span className="text-xs text-gray-400">{message.time}</span>
+                                                    {message.status === 'read' && (
+                                                        <div className="flex -space-x-1">
+                                                            <div className="w-3 h-3 bg-blue-500 rounded-full flex items-center justify-center">
+                                                                <div className="w-1 h-1 bg-white rounded-full"></div>
+                                                            </div>
+                                                            <div className="w-3 h-3 bg-blue-500 rounded-full flex items-center justify-center">
+                                                                <div className="w-1 h-1 bg-white rounded-full"></div>
+                                                            </div>
+                                                        </div>
+                                                    )}
+                                                </div>
+                                            </div>
+                                        )}
+                                    </div>
+                                </div>
+                            )
+                        })
+                    ) : (
+                        <div className="text-center text-gray-500 py-8">
+                            <p className="text-sm">هنوز پیامی ارسال نشده</p>
+                        </div>
+                    )}
+
+                    {/* Typing Indicator */}
+                    {isTyping && (
+                        <div className="flex justify-start mb-4">
+                            <div className="max-w-[70%]">
+                                <div className="flex items-center gap-2 mb-2">
+                                    <span className="text-xs text-gray-500 font-medium">
+                                        {seller?.shopName || 'فروشگاه'}
+                                    </span>
+                                </div>
+                                <div className="bg-white border border-gray-100 rounded-2xl px-4 py-3 shadow-sm">
+                                    <div className="flex items-center gap-1">
+                                        <div className="flex gap-1">
+                                            <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0ms' }}></div>
+                                            <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '150ms' }}></div>
+                                            <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '300ms' }}></div>
+                                        </div>
+                                        <span className="text-xs text-gray-500 ml-2">در حال تایپ...</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+
+                    <div ref={messagesEndRef} />
+                </div>
+            </div>
+
+            {/* Input Area */}
+            <div className="border-t border-gray-100 px-6 py-4 bg-white">
+                <div className="flex items-end gap-3">
+                    <button
+                        onClick={handleAttachClick}
+                        className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors flex-shrink-0"
+                    >
+                        <AttachCircle size={20} />
+                    </button>
+
+                    {/* Hidden file input */}
+                    <input
+                        ref={fileInputRef}
+                        type="file"
+                        accept="image/*,video/*,audio/*,application/*,text/*"
+                        onChange={handleFileSelect}
+                        className="hidden"
+                    />
+
+                    <div className="flex-1 relative">
+                        {/* File Preview */}
+                        {selectedFile && (
+                            <div className="mb-2 p-2 bg-blue-50 border border-blue-200 rounded-lg flex items-center justify-between">
+                                <div className="flex items-center gap-2">
+                                    <div className="w-8 h-8 bg-blue-100 rounded flex items-center justify-center">
+                                        📎
+                                    </div>
+                                    <div>
+                                        <p className="text-xs font-medium text-blue-900">{selectedFile.name}</p>
+                                        <p className="text-xs text-blue-600">{(selectedFile.size / 1024).toFixed(1)} KB</p>
+                                    </div>
+                                </div>
+                                <button
+                                    onClick={() => setSelectedFile(null)}
+                                    className="text-blue-500 hover:text-blue-700 p-1"
+                                >
+                                    ✕
+                                </button>
+                            </div>
+                        )}
+
+                        <textarea
+                            value={messageText}
+                            onChange={(e) => {
+                                setMessageText(e.target.value)
+                                handleTyping()
+                            }}
+                            onKeyPress={(e) => {
+                                if (e.key === 'Enter' && !e.shiftKey) {
+                                    e.preventDefault()
+                                    handleSend()
+                                }
+                            }}
+                            placeholder={selectedFile ? "توضیحات فایل را بنویسید..." : "پیام خود را بنویسید..."}
+                            rows={1}
+                            className="w-full resize-none bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 pr-12 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent max-h-32"
+                            style={{ minHeight: '44px' }}
+                        />
+                        <button className="absolute left-2 top-1/2 -translate-y-1/2 p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-200 rounded-lg transition-colors">
+                            <EmojiHappy size={16} />
+                        </button>
+                    </div>
+
+                    <button
+                        onClick={handleSend}
+                        disabled={(!messageText.trim() && !selectedFile) || (!SERVER_CAPABILITIES.socketChat && !isConnected)}
+                        className={`p-3 rounded-xl transition-all flex-shrink-0 ${(messageText.trim() || selectedFile) && (SERVER_CAPABILITIES.socketChat || isConnected)
+                            ? 'bg-primary hover:bg-primary/90 text-primary-foreground shadow-lg'
+                            : 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                            }`}
+                    >
+                        <Send size={18} className="rotate-180" variant="Bold" />
+                    </button>
+                </div>
+
+                <p className="text-xs text-gray-400 mt-2 text-center">
+                    پیام شما بعد از ارسال قابل حذف نیست
+                </p>
+            </div>
+        </div>
+    )
+}
diff --git a/src/app/profile/chat/components/ChatProductCard.tsx b/src/app/profile/chat/components/ChatProductCard.tsx
new file mode 100644
index 0000000..124c929
--- /dev/null
+++ b/src/app/profile/chat/components/ChatProductCard.tsx
@@ -0,0 +1,95 @@
+'use client'
+import Image from 'next/image'
+import { ShoppingCart } from 'iconsax-react'
+import { useGetDetailProduct } from '@/app/product/hooks/useProductData'
+
+interface ChatProductCardProps {
+    productId?: string | null
+}
+
+export default function ChatProductCard({ productId }: ChatProductCardProps) {
+    const { data: productData, isLoading, error } = useGetDetailProduct(productId || '')
+    const product = productData?.results?.product
+
+    // Show loading state
+    if (isLoading) {
+        return (
+            <div className="p-6">
+                <div className="w-full h-32 mb-4 bg-gray-200 rounded-lg animate-pulse"></div>
+                <div className="h-4 bg-gray-200 rounded animate-pulse mb-3"></div>
+                <div className="h-4 bg-gray-200 rounded animate-pulse w-3/4 mb-4"></div>
+                <div className="h-10 bg-gray-200 rounded-lg animate-pulse"></div>
+            </div>
+        )
+    }
+
+    // Show error state
+    if (error) {
+        return (
+            <div className="p-6 text-center text-red-500">
+                <p className="text-sm">خطا در بارگذاری اطلاعات محصول</p>
+            </div>
+        )
+    }
+
+    const formatPrice = (price: number) => {
+        return price.toLocaleString('fa-IR')
+    }
+
+    if (!productId) {
+        return (
+            <div className="p-6 text-center text-gray-500">
+                <p className="text-sm">محصولی انتخاب نشده</p>
+            </div>
+        )
+    }
+
+    if (!product) {
+        return (
+            <div className="p-6 text-center text-gray-500">
+                <p className="text-sm">اطلاعات محصول در دسترس نیست</p>
+            </div>
+        )
+    }
+
+    return (
+        <div className="p-6">
+            {/* Product Image */}
+            <div className="w-full h-32 mb-4 bg-gradient-to-br from-gray-50 to-gray-100 rounded-lg overflow-hidden flex items-center justify-center">
+                <Image
+                    src={product.imagesUrl.cover}
+                    alt={product.title_fa}
+                    width={80}
+                    height={80}
+                    className="object-contain"
+                />
+            </div>
+
+            {/* Product Title */}
+            <h3 className="text-sm text-gray-900 font-medium mb-3 leading-tight line-clamp-3">
+                {product.title_fa}
+            </h3>
+
+            {/* Price */}
+            <div className="mb-4">
+                <div className="flex items-baseline gap-1 mb-1">
+                    <span className="text-lg font-bold text-gray-900">
+                        {formatPrice(product.default_variant.price.selling_price)}
+                    </span>
+                    <span className="text-sm text-gray-500">تومان</span>
+                </div>
+                {product.default_variant.price.discount_percent > 0 && (
+                    <p className="text-xs text-gray-400 line-through">
+                        {formatPrice(product.default_variant.price.retailPrice)} تومان
+                    </p>
+                )}
+            </div>
+
+            {/* Add to Cart Button */}
+            <button className="w-full bg-primary hover:bg-primary/90 text-primary-foreground py-2.5 rounded-lg font-medium text-sm transition-colors flex items-center justify-center gap-2">
+                <ShoppingCart size={16} />
+                افزودن به سبد
+            </button>
+        </div>
+    )
+}
diff --git a/src/app/profile/chat/components/ChatSidebar.tsx b/src/app/profile/chat/components/ChatSidebar.tsx
new file mode 100644
index 0000000..2b7e961
--- /dev/null
+++ b/src/app/profile/chat/components/ChatSidebar.tsx
@@ -0,0 +1,196 @@
+'use client'
+import { Shop, SearchNormal1 } from 'iconsax-react'
+import { useState, useEffect } from 'react'
+import { useSocket } from '../hooks/useSocket'
+import { useChatList } from '../../hooks/useChatData'
+import { useRouter } from 'next/navigation'
+import { isAuthenticated } from '@/config/func'
+
+interface ChatSidebarProps {
+    selectedChatId?: string
+    onChatSelect?: (chatId: string) => void
+}
+
+export default function ChatSidebar({ selectedChatId, onChatSelect }: ChatSidebarProps) {
+    const [searchQuery, setSearchQuery] = useState('')
+    const [isUserAuthenticated, setIsUserAuthenticated] = useState<boolean | null>(null)
+    const [isConnecting, setIsConnecting] = useState(false)
+    const router = useRouter()
+    const { onUserOnline, onUserOffline, connect, isConnected, isServerSupported } = useSocket()
+    const { data: chatData, isLoading, error } = useChatList({
+        enabled: isUserAuthenticated === true // Only fetch if user is logged in
+    })
+
+    // Check authentication on mount
+    useEffect(() => {
+        const checkAuth = async () => {
+            const authenticated = await isAuthenticated()
+            setIsUserAuthenticated(authenticated)
+
+            if (!authenticated) {
+                console.log('🔐 کاربر login نکرده یا توکن expire شده، redirect به صفحه ورود')
+                router.push('/auth')
+                return
+            }
+
+            // اگر سرور پشتیبانی نمی‌کند، اصلاً تلاش نکن
+            if (!isServerSupported) {
+                console.log('🚫 سرور Socket.IO پشتیبانی نمی‌کند، اتصال متوقف شد')
+                return
+            }
+
+            // فقط اگر قبلاً اتصال برقرار نشده، connect کنیم
+            if (!isConnected && !isConnecting) {
+                console.log('🔌 شروع اتصال به سوکت...')
+                setIsConnecting(true)
+                connect('customer')
+                    .then(() => {
+                        console.log('✅ اتصال سوکت موفق')
+                        setIsConnecting(false)
+                    })
+                    .catch((error) => {
+                        console.log('❌ اتصال سوکت شکست خورد:', error.message)
+                        setIsConnecting(false)
+                    })
+            } else if (isConnected) {
+                console.log('ℹ️ اتصال سوکت قبلاً برقرار شده')
+            }
+        }
+
+        checkAuth()
+    }, [connect, router, isConnected, isConnecting, isServerSupported])
+
+    // Listen for user online/offline events
+    useEffect(() => {
+        const handleUserOnline = (userId: unknown) => {
+            const id = userId as string
+            console.log('🟢 کاربر آنلاین شد:', id)
+            // Here you could update the chat list to reflect online status
+            // For now, we'll just log it
+        }
+
+        const handleUserOffline = (userId: unknown) => {
+            const id = userId as string
+            console.log('🔴 کاربر آفلاین شد:', id)
+            // Here you could update the chat list to reflect offline status
+        }
+
+        onUserOnline(handleUserOnline)
+        onUserOffline(handleUserOffline)
+
+        return () => {
+            // Cleanup will be handled by the hook
+        }
+    }, [onUserOnline, onUserOffline])
+
+    const chats = chatData?.results?.chats || []
+
+    const filteredChats = chats.filter(chat =>
+        chat.participants.seller.shopName.toLowerCase().includes(searchQuery.toLowerCase())
+    )
+
+    const handleChatClick = (chatId: string) => {
+        if (onChatSelect) {
+            onChatSelect(chatId)
+        }
+    }
+
+    return (
+        <div className="w-full bg-white flex flex-col h-full">
+            {/* Header */}
+            <div className="p-4 border-b border-gray-100">
+                <h2 className="text-lg font-bold text-gray-900 mb-4">گفتگوها</h2>
+
+                {/* Search */}
+                <div className="relative">
+                    <SearchNormal1 size={20} className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400" />
+                    <input
+                        type="text"
+                        placeholder="جستجو در گفتگوها..."
+                        value={searchQuery}
+                        onChange={(e) => setSearchQuery(e.target.value)}
+                        className="w-full pr-10 pl-4 py-2.5 bg-gray-50 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+                    />
+                </div>
+            </div>
+
+            {/* Chat List */}
+            <div className="flex-1 overflow-y-auto">
+                {isLoading ? (
+                    <div className="p-8 text-center text-gray-400">
+                        <p className="text-sm">در حال بارگذاری...</p>
+                    </div>
+                ) : error ? (
+                    <div className="p-8 text-center text-red-400">
+                        <p className="text-sm">خطا در بارگذاری گفتگوها</p>
+                    </div>
+                ) : (
+                    <div className="divide-y divide-gray-50">
+                        {filteredChats.map((chat) => (
+                            <div
+                                key={chat._id}
+                                onClick={() => handleChatClick(chat.chatId)}
+                                className={`p-4 cursor-pointer transition-all hover:bg-gray-50 ${selectedChatId === chat.chatId ? 'bg-primary/5 border-r-2 border-r-primary' : ''
+                                    }`}
+                            >
+                                <div className="flex items-start gap-3">
+                                    {/* Avatar */}
+                                    <div className="relative flex-shrink-0">
+                                        <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/20 rounded-full flex items-center justify-center overflow-hidden">
+                                            {chat.participants.seller.logo ? (
+                                                <img
+                                                    src={chat.participants.seller.logo}
+                                                    alt={chat.participants.seller.shopName}
+                                                    className="w-full h-full object-cover"
+                                                />
+                                            ) : (
+                                                <Shop size={20} className="text-primary" variant="Bold" />
+                                            )}
+                                        </div>
+                                        {chat.isOnline && (
+                                            <div className="absolute -bottom-0.5 -right-0.5 w-4 h-4 bg-green-500 border-2 border-white rounded-full"></div>
+                                        )}
+                                    </div>
+
+                                    {/* Content */}
+                                    <div className="flex-1 min-w-0">
+                                        <div className="flex items-center justify-between mb-1">
+                                            <h3 className="font-semibold text-gray-900 text-sm truncate">
+                                                {chat.participants.seller.shopName}
+                                            </h3>
+                                            <span className="text-xs text-gray-400 flex-shrink-0">
+                                                {chat.lastMessage ?
+                                                    new Date(chat.lastMessage.createdAt).toLocaleTimeString('fa-IR', {
+                                                        hour: '2-digit',
+                                                        minute: '2-digit'
+                                                    }) :
+                                                    new Date(chat.updatedAt).toLocaleDateString('fa-IR')
+                                                }
+                                            </span>
+                                        </div>
+
+                                        <p className="text-xs text-gray-500 truncate mb-2">
+                                            {chat.lastMessage?.content || 'گفتگوی جدید'}
+                                        </p>
+
+                                        {chat.unreadCount > 0 && (
+                                            <div className="inline-flex items-center px-2 py-0.5 bg-primary text-primary-foreground text-xs font-medium rounded-full">
+                                                {chat.unreadCount}
+                                            </div>
+                                        )}
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                )}
+
+                {!isLoading && !error && filteredChats.length === 0 && (
+                    <div className="p-8 text-center text-gray-400">
+                        <p className="text-sm">گفتگویی یافت نشد</p>
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+}
diff --git a/src/app/profile/chat/hooks/useSocket.ts b/src/app/profile/chat/hooks/useSocket.ts
new file mode 100644
index 0000000..4831022
--- /dev/null
+++ b/src/app/profile/chat/hooks/useSocket.ts
@@ -0,0 +1,166 @@
+import { useEffect, useState, useCallback } from "react";
+import {
+  socketService,
+  Message,
+  UnreadMessage,
+} from "../service/SocketService";
+
+export interface UseSocketReturn {
+  isConnected: boolean;
+  isConnecting: boolean;
+  isServerSupported: boolean;
+  connect: (type?: "customer" | "seller") => Promise<void>;
+  disconnect: () => void;
+  joinChat: (chatId: string) => void;
+  leaveChat: (chatId: string) => void;
+  sendMessage: (chatId: string, content: string) => void;
+  onUserOnline: (callback: (userId: unknown) => void) => void;
+  onUserOffline: (callback: (userId: unknown) => void) => void;
+  onUnreadMessages: (callback: (messages: unknown) => void) => void;
+  onNewMessage: (callback: (message: unknown) => void) => void;
+  onError: (callback: (error: unknown) => void) => void;
+  offUserOnline: (callback: (userId: unknown) => void) => void;
+  offUserOffline: (callback: (userId: unknown) => void) => void;
+  offUnreadMessages: (callback: (messages: unknown) => void) => void;
+  offNewMessage: (callback: (message: unknown) => void) => void;
+  offError: (callback: (error: unknown) => void) => void;
+}
+
+export const useSocket = (): UseSocketReturn => {
+  const [isConnected, setIsConnected] = useState(false);
+  const [isConnecting, setIsConnecting] = useState(false);
+
+  // Connect to socket
+  const connect = useCallback(
+    async (type: "customer" | "seller" = "customer") => {
+      if (isConnected || isConnecting) return;
+
+      setIsConnecting(true);
+      try {
+        await socketService.connect(type);
+        setIsConnected(true);
+      } catch (error) {
+        console.error("خطا در اتصال سوکت:", error);
+        throw error;
+      } finally {
+        setIsConnecting(false);
+      }
+    },
+    [isConnected, isConnecting]
+  );
+
+  // Disconnect socket
+  const disconnect = useCallback(() => {
+    socketService.disconnect();
+    setIsConnected(false);
+    setIsConnecting(false);
+  }, []);
+
+  // Join chat room
+  const joinChat = useCallback((chatId: string) => {
+    socketService.joinChat(chatId);
+  }, []);
+
+  // Leave chat room
+  const leaveChat = useCallback((chatId: string) => {
+    socketService.leaveChat(chatId);
+  }, []);
+
+  // Send message
+  const sendMessage = useCallback((chatId: string, content: string) => {
+    socketService.sendMessage(chatId, content);
+  }, []);
+
+  // Event listeners
+  const onUserOnline = useCallback((callback: (userId: unknown) => void) => {
+    socketService.on("userOnline", callback);
+  }, []);
+
+  const onUserOffline = useCallback((callback: (userId: unknown) => void) => {
+    socketService.on("userOffline", callback);
+  }, []);
+
+  const onUnreadMessages = useCallback(
+    (callback: (messages: unknown) => void) => {
+      socketService.on("unreadMessages", callback);
+    },
+    []
+  );
+
+  const onNewMessage = useCallback((callback: (message: unknown) => void) => {
+    socketService.on("newMessage", callback);
+  }, []);
+
+  const onError = useCallback((callback: (error: unknown) => void) => {
+    socketService.on("error", callback);
+  }, []);
+
+  // Remove event listeners
+  const offUserOnline = useCallback((callback: (userId: unknown) => void) => {
+    socketService.off("userOnline", callback);
+  }, []);
+
+  const offUserOffline = useCallback((callback: (userId: unknown) => void) => {
+    socketService.off("userOffline", callback);
+  }, []);
+
+  const offUnreadMessages = useCallback(
+    (callback: (messages: unknown) => void) => {
+      socketService.off("unreadMessages", callback);
+    },
+    []
+  );
+
+  const offNewMessage = useCallback((callback: (message: unknown) => void) => {
+    socketService.off("newMessage", callback);
+  }, []);
+
+  const offError = useCallback((callback: (error: unknown) => void) => {
+    socketService.off("error", callback);
+  }, []);
+
+  // Setup connection status listener
+  useEffect(() => {
+    const handleConnect = () => setIsConnected(true);
+    const handleDisconnect = () => setIsConnected(false);
+
+    socketService.on("connect", handleConnect);
+    socketService.on("disconnect", handleDisconnect);
+
+    // Check initial connection status
+    setIsConnected(socketService.isConnected());
+
+    return () => {
+      socketService.off("connect", handleConnect);
+      socketService.off("disconnect", handleDisconnect);
+    };
+  }, []);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      // Don't disconnect on unmount, let the service manage its own lifecycle
+    };
+  }, []);
+
+  return {
+    isConnected,
+    isConnecting,
+    isServerSupported: socketService.getServerSupported(),
+    connect,
+    disconnect,
+    joinChat,
+    leaveChat,
+    sendMessage,
+    onUserOnline,
+    onUserOffline,
+    onUnreadMessages,
+    onNewMessage,
+    onError,
+    offUserOnline,
+    offUserOffline,
+    offUnreadMessages,
+    offNewMessage,
+    offError,
+  };
+};
diff --git a/src/app/profile/chat/page.tsx b/src/app/profile/chat/page.tsx
new file mode 100644
index 0000000..6328375
--- /dev/null
+++ b/src/app/profile/chat/page.tsx
@@ -0,0 +1,134 @@
+'use client'
+import Layout from "@/hoc/Layout"
+import { NextPage } from "next"
+import { useSearchParams, useRouter } from "next/navigation"
+import { useState, useEffect, Suspense } from "react"
+import Menu from "../components/Menu"
+import ChatSidebar from "./components/ChatSidebar"
+import ChatMessages from "./components/ChatMessages"
+import ChatProductCard from "./components/ChatProductCard"
+import { isAuthenticated } from "@/config/func"
+
+const ChatContent: React.FC = () => {
+    const searchParams = useSearchParams()
+    const productId = searchParams.get('productId')
+    const shopId = searchParams.get('shopId')
+    const router = useRouter()
+
+    const [selectedChatId, setSelectedChatId] = useState<string>('')
+    const [isUserAuthenticated, setIsUserAuthenticated] = useState<boolean | null>(null)
+    const [isLoading, setIsLoading] = useState(true)
+
+    // Check authentication on mount
+    useEffect(() => {
+        const checkAuth = async () => {
+            const authenticated = await isAuthenticated()
+            setIsUserAuthenticated(authenticated)
+            setIsLoading(false)
+
+            if (!authenticated) {
+                console.log('🔐 کاربر login نکرده یا توکن expire شده، redirect به صفحه ورود')
+                router.push('/auth')
+            }
+        }
+
+        checkAuth()
+    }, [router])
+
+    const handleChatSelect = (chatId: string) => {
+        setSelectedChatId(chatId)
+    }
+
+    // Show loading while checking authentication
+    if (isLoading) {
+        return (
+            <Layout>
+                <div className="p-3 sm:p-4 md:p-6">
+                    <Menu pageActive='chat' />
+                    <div className="mt-6 flex items-center justify-center h-[calc(100vh-200px)] min-h-[600px]">
+                        <div className="text-center">
+                            <div className="text-lg text-gray-600 mb-2">در حال بررسی...</div>
+                            <div className="text-sm text-gray-400">لطفاً صبر کنید</div>
+                        </div>
+                    </div>
+                </div>
+            </Layout>
+        )
+    }
+
+    // Don't render chat if user is not logged in (will redirect)
+    if (!isUserAuthenticated) {
+        return (
+            <Layout>
+                <div className="p-3 sm:p-4 md:p-6">
+                    <Menu pageActive='chat' />
+                    <div className="mt-6 flex items-center justify-center h-[calc(100vh-200px)] min-h-[600px]">
+                        <div className="text-center">
+                            <div className="text-lg text-gray-600 mb-2">در حال انتقال...</div>
+                            <div className="text-sm text-gray-400">لطفاً صبر کنید</div>
+                        </div>
+                    </div>
+                </div>
+            </Layout>
+        )
+    }
+
+    return (
+        <Layout>
+            <div className="p-3 sm:p-4 md:p-6">
+                <Menu pageActive='chat' />
+
+                <div className="mt-6 flex gap-8 h-[calc(100vh-200px)] min-h-[600px]">
+                    {/* Chat Section - Sidebar + Messages */}
+                    <div className="flex-1 flex border border-gray-200 shadow-sm rounded-xl bg-white">
+                        {/* Chat Sidebar - Left Side */}
+                        <div className="w-80 border-r border-gray-200">
+                            <ChatSidebar
+                                selectedChatId={selectedChatId}
+                                onChatSelect={handleChatSelect}
+                            />
+                        </div>
+
+                        {/* Chat Messages - Right Side */}
+                        <div className="flex-1 min-w-0">
+                            <ChatMessages
+                                productId={productId}
+                                shopId={shopId}
+                                chatId={selectedChatId}
+                            />
+                        </div>
+                    </div>
+
+                    {/* Product Card - Right Side */}
+                    <div className="w-80 flex-shrink-0">
+                        <div className="bg-white rounded-xl border border-gray-200 shadow-sm">
+                            <ChatProductCard productId={productId} />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </Layout>
+    )
+}
+
+const Chat: NextPage = () => {
+    return (
+        <Suspense fallback={
+            <Layout>
+                <div className="p-3 sm:p-4 md:p-6">
+                    <Menu pageActive='chat' />
+                    <div className="mt-6 flex items-center justify-center h-[calc(100vh-200px)] min-h-[600px]">
+                        <div className="text-center">
+                            <div className="text-lg text-gray-600 mb-2">در حال بارگذاری...</div>
+                            <div className="text-sm text-gray-400">لطفاً صبر کنید</div>
+                        </div>
+                    </div>
+                </div>
+            </Layout>
+        }>
+            <ChatContent />
+        </Suspense>
+    )
+}
+
+export default Chat
\ No newline at end of file
diff --git a/src/app/profile/chat/service/SocketService.ts b/src/app/profile/chat/service/SocketService.ts
new file mode 100644
index 0000000..cb8b632
--- /dev/null
+++ b/src/app/profile/chat/service/SocketService.ts
@@ -0,0 +1,274 @@
+import { io, Socket } from "socket.io-client";
+import { TOKEN_NAME, BASE_URL } from "@/config/const";
+
+export interface Message {
+  id: string;
+  chatId: string;
+  sender: string;
+  content: string;
+  createdAt: string;
+}
+
+export interface UnreadMessage {
+  chatId: string;
+  sender: string;
+  content: string;
+  createdAt: string;
+}
+
+class SocketService {
+  private socket: Socket | null = null;
+  private reconnectAttempts = 0;
+  private maxReconnectAttempts = 1; // کاهش تعداد تلاش‌ها
+  private reconnectDelay = 2000; // افزایش delay
+  private isServerSupported = false; // آیا سرور پشتیبانی می‌کند
+
+  // Event listeners
+  private eventListeners: { [key: string]: ((data: unknown) => void)[] } = {};
+
+  constructor() {
+    this.initializeEventListeners();
+  }
+
+  private initializeEventListeners() {
+    this.eventListeners = {
+      userOnline: [],
+      userOffline: [],
+      unreadMessages: [],
+      newMessage: [],
+      error: [],
+      unauthorized: [],
+      connect: [],
+      disconnect: [],
+    };
+  }
+
+  // Connect to socket server
+  connect(type: "customer" | "seller" = "customer"): Promise<void> {
+    return new Promise((resolve, reject) => {
+      try {
+        // Get token from localStorage
+        const token = localStorage.getItem(TOKEN_NAME);
+        console.log("🔑 توکن سوکت:", token ? "موجود است" : "پیدا نشد");
+        if (!token) {
+          console.log("❌ اتصال رد شد: توکن موجود نیست");
+          reject(new Error("توکن یافت نشد"));
+          return;
+        }
+
+        // اگر قبلاً تشخیص داده‌ایم سرور پشتیبانی نمی‌کند
+        if (!this.isServerSupported && this.reconnectAttempts > 0) {
+          console.log("🚫 اتصال رد شد: سرور Socket.IO پشتیبانی نمی‌کند");
+          reject(new Error("سرور چت پشتیبانی نمی‌شود"));
+          return;
+        }
+
+        console.log("🔌 شروع اتصال سوکت به:", `${BASE_URL}/ws-chat`);
+        console.log("📝 پارامترهای اتصال:", {
+          token: token.substring(0, 20) + "...",
+          type,
+        });
+
+        // Create socket connection
+        this.socket = io(BASE_URL, {
+          path: "/ws-chat",
+          query: {
+            token,
+            type,
+          },
+          transports: ["websocket"],
+          timeout: 10000, // 10 seconds timeout
+        });
+
+        // Setup event listeners
+        this.setupSocketListeners();
+
+        // Handle connection
+        this.socket.on("connect", () => {
+          console.log("✅ اتصال سوکت برقرار شد");
+          this.reconnectAttempts = 0;
+          this.isServerSupported = true; // سرور پشتیبانی می‌کند
+          this.emit("connect", null);
+          resolve();
+        });
+
+        this.socket.on("connect_error", (error) => {
+          console.error("❌ خطا در اتصال سوکت:", error.message);
+          console.log("⚠️  احتمالاً سرور Socket.IO پیاده‌سازی نشده است");
+
+          // اگر چندین بار شکست خورد، فرض می‌کنیم سرور پشتیبانی نمی‌کند
+          if (this.reconnectAttempts >= 1) {
+            console.log(
+              "🚫 سرور Socket.IO پشتیبانی نمی‌شود، reconnect متوقف شد"
+            );
+            this.isServerSupported = false;
+            reject(new Error("سرور چت پشتیبانی نمی‌شود"));
+            return;
+          }
+
+          reject(error);
+        });
+      } catch (error) {
+        console.error("خطا در ایجاد اتصال سوکت:", error);
+        reject(error);
+      }
+    });
+  }
+
+  // Setup socket event listeners
+  private setupSocketListeners() {
+    if (!this.socket) return;
+
+    // User online/offline events
+    this.socket.on("userOnline", (userId: string) => {
+      console.log("کاربر آنلاین شد:", userId);
+      this.emit("userOnline", userId);
+    });
+
+    this.socket.on("userOffline", (userId: string) => {
+      console.log("کاربر آفلاین شد:", userId);
+      this.emit("userOffline", userId);
+    });
+
+    // Unread messages
+    this.socket.on("unreadMessages", (messages: UnreadMessage[]) => {
+      console.log("پیام‌های خوانده نشده:", messages);
+      this.emit("unreadMessages", messages);
+    });
+
+    // New message
+    this.socket.on("newMessage", (message: Message) => {
+      console.log("پیام جدید:", message);
+      this.emit("newMessage", message);
+    });
+
+    // Error handling
+    this.socket.on("error", (error: { message: string }) => {
+      console.error("خطای سوکت:", error.message);
+      this.emit("error", error);
+    });
+
+    this.socket.on("unauthorized", (data: { message: string }) => {
+      console.error("دسترسی غیرمجاز:", data.message);
+      this.emit("unauthorized", data);
+    });
+
+    // Connection events
+    this.socket.on("disconnect", (reason: string) => {
+      console.log("اتصال سوکت قطع شد:", reason);
+      this.emit("disconnect", reason);
+
+      // Auto reconnect if not manual disconnect
+      if (
+        reason !== "io client disconnect" &&
+        this.reconnectAttempts < this.maxReconnectAttempts
+      ) {
+        this.scheduleReconnect();
+      }
+    });
+  }
+
+  // Schedule reconnection
+  private scheduleReconnect() {
+    // اگر سرور پشتیبانی نمی‌کند، reconnect نکن
+    if (!this.isServerSupported) {
+      console.log("🚫 reconnect متوقف شد چون سرور پشتیبانی نمی‌کند");
+      return;
+    }
+
+    setTimeout(() => {
+      this.reconnectAttempts++;
+      console.log(
+        `🔄 تلاش برای اتصال مجدد (${this.reconnectAttempts}/${this.maxReconnectAttempts})`
+      );
+
+      const token = localStorage.getItem(TOKEN_NAME);
+      if (token && this.socket) {
+        this.socket.connect();
+      } else {
+        console.log("❌ توکن یا سوکت موجود نیست، reconnect متوقف شد");
+      }
+    }, this.reconnectDelay * this.reconnectAttempts);
+  }
+
+  // Join a chat room
+  joinChat(chatId: string): void {
+    if (this.socket && this.socket.connected) {
+      this.socket.emit("joinChat", chatId);
+      console.log("ورود به چت:", chatId);
+    } else {
+      console.error("سوکت متصل نیست");
+      this.emit("error", { message: "اتصال سوکت برقرار نیست" });
+    }
+  }
+
+  // Leave a chat room
+  leaveChat(chatId: string): void {
+    if (this.socket && this.socket.connected) {
+      this.socket.emit("leaveChat", chatId);
+      console.log("خروج از چت:", chatId);
+    }
+  }
+
+  // Send a message
+  sendMessage(chatId: string, content: string): void {
+    if (this.socket && this.socket.connected) {
+      this.socket.emit("newMessage", {
+        chatId,
+        content,
+      });
+      console.log("ارسال پیام:", { chatId, content });
+    } else {
+      console.error("سوکت متصل نیست");
+      this.emit("error", { message: "اتصال سوکت برقرار نیست" });
+    }
+  }
+
+  // Event system
+  on(event: string, callback: (data: unknown) => void): void {
+    if (this.eventListeners[event]) {
+      this.eventListeners[event].push(callback);
+    }
+  }
+
+  off(event: string, callback: (data: unknown) => void): void {
+    if (this.eventListeners[event]) {
+      this.eventListeners[event] = this.eventListeners[event].filter(
+        (cb) => cb !== callback
+      );
+    }
+  }
+
+  private emit(event: string, data: unknown): void {
+    if (this.eventListeners[event]) {
+      this.eventListeners[event].forEach((callback) => callback(data));
+    }
+  }
+
+  // Disconnect socket
+  disconnect(): void {
+    if (this.socket) {
+      this.socket.disconnect();
+      this.socket = null;
+    }
+    this.reconnectAttempts = 0;
+  }
+
+  // Check if socket is connected
+  isConnected(): boolean {
+    return this.socket?.connected || false;
+  }
+
+  // Check if server supports socket
+  getServerSupported(): boolean {
+    return this.isServerSupported;
+  }
+
+  // Get socket instance (for advanced usage)
+  getSocket(): Socket | null {
+    return this.socket;
+  }
+}
+
+// Create singleton instance
+export const socketService = new SocketService();
diff --git a/src/app/profile/components/Menu.tsx b/src/app/profile/components/Menu.tsx
index e0f9b53..550266d 100644
--- a/src/app/profile/components/Menu.tsx
+++ b/src/app/profile/components/Menu.tsx
@@ -19,7 +19,7 @@ const Menu: FC<Props> = (props) => {
                         <MenuItem href='/profile' icon='user' text='پروفایل کاربری' isActive={pageActive === 'profile'} />
                         <MenuItem href='/profile/favorite' icon='heart' text='علاقه مندی ها' isActive={pageActive === 'favorite'} />
                         <MenuItem href='/profile/comments' icon='comment' text='نظرات من' isActive={pageActive === 'comments'} />
-                        <MenuItem href='/profile/chat' icon='chat' text='گفتگو' isActive={pageActive === 'chat'} />
+                        {/* <MenuItem href='/profile/chat' icon='chat' text='گفتگو' isActive={pageActive === 'chat'} /> */}
                         <MenuItem href='/profile/orders' icon='orders' text='سفارشات' isActive={pageActive === 'orders'} />
 
                         {/* Logout Button in Mobile */}
diff --git a/src/app/profile/hooks/useChatData.ts b/src/app/profile/hooks/useChatData.ts
new file mode 100644
index 0000000..b43a764
--- /dev/null
+++ b/src/app/profile/hooks/useChatData.ts
@@ -0,0 +1,69 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  getChatList,
+  getChatMessages,
+  createChat,
+  markChatAsRead,
+} from "../service/Service";
+import { CreateChatRequest } from "../types/ProfileTypes";
+
+// Get chat list
+export const useChatList = (options?: { enabled?: boolean }) => {
+  return useQuery({
+    queryKey: ["chat", "list"],
+    queryFn: getChatList,
+    staleTime: 1000 * 60 * 5, // 5 minutes
+    enabled: options?.enabled ?? true,
+  });
+};
+
+// Get chat messages
+export const useChatMessages = (
+  chatId: string,
+  options?: { enabled?: boolean }
+) => {
+  return useQuery({
+    queryKey: ["chat", "messages", chatId],
+    queryFn: () => getChatMessages(chatId),
+    enabled: options?.enabled ?? !!chatId,
+    staleTime: 1000 * 60 * 1, // 1 minute
+  });
+};
+
+// Create new chat
+export const useCreateChat = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (chatData: CreateChatRequest) => createChat(chatData),
+    onSuccess: () => {
+      // Invalidate chat list to refetch
+      queryClient.invalidateQueries({ queryKey: ["chat", "list"] });
+    },
+  });
+};
+
+// Mark chat as read
+export const useMarkChatAsRead = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (chatId: string) => {
+      console.log("📤 ارسال درخواست markAsRead برای:", chatId);
+      return markChatAsRead(chatId);
+    },
+    onSuccess: (_, chatId) => {
+      console.log(
+        "✅ پیام‌ها با موفقیت به عنوان خوانده شده علامت‌گذاری شدند:",
+        chatId
+      );
+      // Update chat list to reflect read status
+      queryClient.invalidateQueries({ queryKey: ["chat", "list"] });
+      // Update messages to mark as read
+      queryClient.invalidateQueries({ queryKey: ["chat", "messages", chatId] });
+    },
+    onError: (error, chatId) => {
+      console.error("❌ خطا در markAsRead:", chatId, error);
+    },
+  });
+};
diff --git a/src/app/profile/service/Service.ts b/src/app/profile/service/Service.ts
index f2ff5d9..f809ad2 100644
--- a/src/app/profile/service/Service.ts
+++ b/src/app/profile/service/Service.ts
@@ -7,6 +7,10 @@ import {
   UpdateAddressType,
   WishlistResponse,
   CommentsResponse,
+  ChatListResponse,
+  ChatMessagesResponse,
+  CreateChatRequest,
+  CreateChatResponse,
 } from "../types/ProfileTypes";
 
 export const getProfile = async () => {
@@ -48,3 +52,28 @@ export const changeEmail = async (email: string) => {
   const { data } = await axios.post("/user/profile/email/change", { email });
   return data;
 };
+
+// Chat Services
+export const getChatList = async (): Promise<ChatListResponse> => {
+  const { data } = await axios.get("/chat/list");
+  return data;
+};
+
+export const getChatMessages = async (
+  chatId: string
+): Promise<ChatMessagesResponse> => {
+  const { data } = await axios.get(`/chat/${chatId}/messages`);
+  return data;
+};
+
+export const createChat = async (
+  chatData: CreateChatRequest
+): Promise<CreateChatResponse> => {
+  const { data } = await axios.post("/chat/create", chatData);
+  return data;
+};
+
+export const markChatAsRead = async (chatId: string) => {
+  const { data } = await axios.patch(`/chat/${chatId}/read`);
+  return data;
+};
diff --git a/src/app/profile/types/ProfileTypes.ts b/src/app/profile/types/ProfileTypes.ts
index 2310ca6..a43f8a1 100644
--- a/src/app/profile/types/ProfileTypes.ts
+++ b/src/app/profile/types/ProfileTypes.ts
@@ -280,3 +280,95 @@ export interface CommentsResponse {
     comments: Comment[];
   };
 }
+
+// Chat Types
+export interface ChatUser {
+  _id: string;
+  fullName: string;
+  phoneNumber: string;
+}
+
+export interface ChatShop {
+  _id: string;
+  shopName: string;
+  shopCode: number;
+  logo: string;
+  isChatActive: boolean;
+}
+
+export interface ChatItem {
+  _id: string;
+  chatId: string;
+  participants: {
+    customer: ChatUser;
+    seller: ChatShop;
+  };
+  lastMessage?: {
+    content: string;
+    createdAt: string;
+    sender: "customer" | "seller";
+  };
+  unreadCount: number;
+  isOnline: boolean;
+  updatedAt: string;
+}
+
+export interface ChatMessage {
+  _id: string;
+  chatId: string;
+  content: string;
+  sender: "customer" | "seller";
+  senderInfo: ChatUser | ChatShop;
+  createdAt: string;
+  status: "sent" | "delivered" | "read";
+}
+
+export interface ChatProduct {
+  _id: number;
+  title_fa: string;
+  imagesUrl: {
+    cover: string;
+    list: string[];
+  };
+  default_variant: {
+    price: {
+      selling_price: number;
+      retailPrice: number;
+      discount_percent: number;
+    };
+  };
+}
+
+export interface ChatListResponse {
+  status: number;
+  success: boolean;
+  results: {
+    chats: ChatItem[];
+    totalCount: number;
+  };
+}
+
+export interface ChatMessagesResponse {
+  status: number;
+  success: boolean;
+  results: {
+    messages: ChatMessage[];
+    chat: ChatItem;
+    product?: ChatProduct;
+  };
+}
+
+export interface CreateChatRequest {
+  productId: number;
+  shopId: string;
+  initialMessage?: string;
+}
+
+export interface CreateChatResponse {
+  status: number;
+  success: boolean;
+  results: {
+    chat: ChatItem;
+    message?: ChatMessage;
+  };
+}
diff --git a/src/config/func.ts b/src/config/func.ts
index 6d89f51..d8a3784 100644
--- a/src/config/func.ts
+++ b/src/config/func.ts
@@ -38,6 +38,50 @@ export const getToken = async () => {
   return localStorage.getItem(TOKEN_NAME);
 };
 
+export const isAuthenticated = async (): Promise<boolean> => {
+  if (typeof window === "undefined") {
+    return false; // در سرور همیشه false
+  }
+
+  const token = localStorage.getItem(TOKEN_NAME);
+  const refreshToken = localStorage.getItem(REFRESH_TOKEN_NAME);
+
+  // اگر هیچ توکنی وجود ندارد
+  if (!token && !refreshToken) {
+    return false;
+  }
+
+  // اگر توکن وجود دارد، فرض می‌کنیم معتبر است (axios interceptor refresh را هندل می‌کند)
+  if (token) {
+    return true;
+  }
+
+  // اگر فقط refresh token وجود دارد، سعی می‌کنیم refresh کنیم
+  if (refreshToken) {
+    try {
+      const { refreshToken: refreshTokenAPI } = await import(
+        "../app/auth/service/Service"
+      );
+      const data = await refreshTokenAPI({ token: refreshToken });
+
+      if (data?.results?.data?.accessToken?.token) {
+        await setToken(data.results.data.accessToken.token);
+        if (data.results.data.refreshToken?.token) {
+          await setRefreshToken(data.results.data.refreshToken.token);
+        }
+        return true;
+      }
+    } catch (error) {
+      console.error("خطا در refresh token:", error);
+      // پاک کردن توکن‌های نامعتبر
+      await removeToken();
+      await removeRefreshToken();
+    }
+  }
+
+  return false;
+};
+
 export const getRefreshToken = async () => {
   if (typeof window === "undefined") {
     return null;
diff --git a/src/share/components/Account.tsx b/src/share/components/Account.tsx
index 0248dd5..61e7231 100644
--- a/src/share/components/Account.tsx
+++ b/src/share/components/Account.tsx
@@ -6,7 +6,7 @@ import {
 } from "@/components/ui/popover"
 import { PRIMARY_COLOR } from '@/config/const'
 import { removeToken, removeRefreshToken } from '@/config/func'
-import { User, Heart, MessageText, Logout, SmsNotification, Profile } from 'iconsax-react'
+import { User, Heart, Logout, SmsNotification, Profile } from 'iconsax-react'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 
@@ -41,12 +41,12 @@ const Account = () => {
             icon: SmsNotification,
             href: '/profile/comments'
         },
-        {
-            id: 'chat',
-            title: 'گفتگو',
-            icon: MessageText,
-            href: '/profile/chat'
-        },
+        // {
+        //     id: 'chat',
+        //     title: 'گفتگو',
+        //     icon: MessageText,
+        //     href: '/profile/chat'
+        // },
         {
             id: 'logout',
             title: 'خروج از حساب',
@@ -55,12 +55,21 @@ const Account = () => {
         }
     ]
 
+    const handleAccountClick = () => {
+        if (!isSuccess) {
+            router.push('/auth')
+        }
+    }
+
     return (
         <Popover>
 
             <PopoverTrigger asChild>
 
-                <div className='hidden md:flex h-10 border border-border py-3 cursor-pointer px-4 rounded-[12px] items-center gap-2.5'>
+                <div
+                    onClick={handleAccountClick}
+                    className='hidden md:flex h-10 border border-border py-3 cursor-pointer px-4 rounded-[12px] items-center gap-2.5'
+                >
                     <Profile size={20} color='#333333' />
                     <div className='text-sm text-[#333333] '>{profile?.results?.info?.fullName ? profile?.results?.info?.fullName : 'حساب کاربری'}</div>
                 </div>