diff --git a/src/pages/ticket/TicketMessages.tsx b/src/pages/ticket/TicketMessages.tsx
index 86be5bb..2a88dd8 100644
--- a/src/pages/ticket/TicketMessages.tsx
+++ b/src/pages/ticket/TicketMessages.tsx
@@ -80,45 +80,69 @@ const TicketMessages: FC = () => {
     }
 
     return (
-        <div className="max-w-4xl mx-auto space-y-4">
-            {/* Minimal Header */}
-            <div className="flex items-center justify-between">
-                <div className="flex items-center gap-3">
-                    <MessageQuestion size={20} color="#6b7280" />
-                    <div>
-                        <h1 className="text-lg font-medium text-gray-900">تیکت #{ticket.numericId}</h1>
-                        <p className="text-sm text-gray-500">{ticket.subject}</p>
-                    </div>
+        <div className="space-y-6">
+            {/* Ticket Info */}
+            <div className="bg-white rounded-2xl p-6 shadow-sm">
+                <div className="flex items-center gap-2 mb-4">
+                    <MessageQuestion size={24} color="#2563eb" />
+                    <h1 className="text-xl font-semibold">جزئیات تیکت</h1>
                 </div>
-                <StatusWithText
-                    variant={getStatusVariant(ticket.status)}
-                    text={getStatusText(ticket.status)}
-                />
-            </div>
 
-            {/* Ticket Info Bar */}
-            <div className="bg-gray-50 rounded-lg p-3">
-                <div className="flex flex-wrap items-center gap-6 text-sm">
-                    <div className="flex items-center gap-2">
-                        <UserIcon size={14} color="#6b7280" />
-                        <span className="text-gray-600">{ticket.seller?.fullName || 'نامشخص'}</span>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    <div className="space-y-1">
+                        <div className="text-sm text-gray-500">شماره تیکت</div>
+                        <div className="flex items-center gap-2">
+                            <MessageQuestion size={16} color="#8C90A3" />
+                            <span className="font-medium">{ticket.numericId}</span>
+                        </div>
                     </div>
-                    <div className="flex items-center gap-2">
-                        <Category size={14} color="#6b7280" />
-                        <span className="text-gray-600">{ticket.category?.title_fa || 'دسته‌بندی نشده'}</span>
+
+                    <div className="space-y-1">
+                        <div className="text-sm text-gray-500">فروشنده</div>
+                        <div className="flex items-center gap-2">
+                            <UserIcon size={16} color="#8C90A3" />
+                            <span>{ticket.seller?.fullName || '-'}</span>
+                        </div>
                     </div>
-                    <div className="flex items-center gap-2">
-                        <Calendar size={14} color="#6b7280" />
-                        <span className="text-gray-600">{formatDate(ticket.updatedAt)}</span>
+
+                    <div className="space-y-1">
+                        <div className="text-sm text-gray-500">موضوع</div>
+                        <div className="font-medium">{ticket.subject}</div>
+                    </div>
+
+                    <div className="space-y-1">
+                        <div className="text-sm text-gray-500">دسته‌بندی</div>
+                        <div className="flex items-center gap-2">
+                            <Category size={16} color="#8C90A3" />
+                            <span>{ticket.category?.title_fa || '-'}</span>
+                        </div>
+                    </div>
+
+                    <div className="space-y-1">
+                        <div className="text-sm text-gray-500">وضعیت</div>
+                        <StatusWithText
+                            variant={getStatusVariant(ticket.status)}
+                            text={getStatusText(ticket.status)}
+                        />
+                    </div>
+
+                    <div className="space-y-1">
+                        <div className="text-sm text-gray-500">تاریخ بروزرسانی</div>
+                        <div className="flex items-center gap-2">
+                            <Calendar size={16} color="#8C90A3" />
+                            <span>{formatDate(ticket.updatedAt)}</span>
+                        </div>
                     </div>
                 </div>
             </div>
 
             {/* Messages Section */}
-            <div className="bg-white border border-gray-200 rounded-xl overflow-hidden">
-                <div className="h-96 overflow-y-auto p-4 space-y-3">
+            <div className="bg-white rounded-2xl p-6 shadow-sm">
+                <h2 className="text-lg font-semibold mb-4">پیام‌ها</h2>
+
+                <div className="space-y-4 max-h-96 overflow-y-auto">
                     {messages.length === 0 ? (
-                        <div className="text-center py-12 text-gray-400 text-sm">
+                        <div className="text-center py-8 text-gray-500">
                             هیچ پیامی یافت نشد
                         </div>
                     ) : (
@@ -127,19 +151,18 @@ const TicketMessages: FC = () => {
                             return (
                                 <div
                                     key={message._id}
-                                    className={`flex ${isAdmin ? 'justify-end' : 'justify-start'}`}
+                                    className={`flex ${isAdmin ? 'justify-start' : 'justify-end'}`}
                                 >
                                     <div
-                                        className={`max-w-[75%] px-4 py-2 rounded-2xl ${
-                                            isAdmin
-                                                ? 'bg-blue-500 text-white rounded-br-sm'
-                                                : 'bg-gray-100 text-gray-800 rounded-bl-sm'
-                                        }`}
+                                        className={`max-w-[70%] p-4 rounded-2xl ${isAdmin
+                                            ? 'bg-gray-100 text-gray-900 rounded-bl-md'
+                                            : 'bg-blue-500 text-white rounded-br-md'
+                                            }`}
                                     >
-                                        <div className="text-xs font-medium mb-1 opacity-75">
-                                            {isAdmin ? 'شما' : 'فروشنده'}
+                                        <div className="text-sm mb-2">
+                                            {isAdmin ? 'ادمین' : 'فروشنده'}
                                         </div>
-                                        <div className="text-sm leading-relaxed">
+                                        <div className="whitespace-pre-wrap">
                                             {message.content}
                                         </div>
                                         {message.attachments && message.attachments.length > 0 && (
@@ -147,18 +170,16 @@ const TicketMessages: FC = () => {
                                                 {message.attachments.map((attachment, index) => (
                                                     <div
                                                         key={index}
-                                                        className={`text-xs underline ${
-                                                            isAdmin ? 'text-blue-100' : 'text-blue-500'
-                                                        }`}
+                                                        className={`text-xs underline ${isAdmin ? 'text-blue-600' : 'text-blue-100'
+                                                            }`}
                                                     >
-                                                        📎 {attachment}
+                                                        فایل ضمیمه: {attachment}
                                                     </div>
                                                 ))}
                                             </div>
                                         )}
-                                        <div className={`text-xs mt-1 ${
-                                            isAdmin ? 'text-blue-100' : 'text-gray-500'
-                                        } opacity-60`}>
+                                        <div className={`text-xs mt-2 ${isAdmin ? 'text-gray-500' : 'text-blue-100'
+                                            }`}>
                                             {message.createdAt && formatDate(message.createdAt)}
                                         </div>
                                     </div>
@@ -170,43 +191,35 @@ const TicketMessages: FC = () => {
             </div>
 
             {/* Send Message Form */}
-            <div className="bg-white border border-gray-200 rounded-xl p-4">
-                <div className="flex gap-3">
-                    <div className="flex-1">
-                        <Textarea
-                            placeholder="پیام خود را بنویسید..."
-                            value={messageContent}
-                            onChange={(e) => setMessageContent(e.target.value)}
-                            rows={3}
-                            className="border-0 focus:ring-0 resize-none"
-                        />
-                    </div>
-                    <div className="flex flex-col gap-2">
+            <div className="bg-white rounded-2xl p-6 shadow-sm">
+                <h2 className="text-lg font-semibold mb-4">ارسال پیام جدید</h2>
+
+                <div className="space-y-4">
+                    <Textarea
+                        label="متن پیام"
+                        placeholder="پیام خود را وارد کنید..."
+                        value={messageContent}
+                        onChange={(e) => setMessageContent(e.target.value)}
+                        rows={4}
+                    />
+
+                    <UploadBox
+                        label="فایل‌های ضمیمه (اختیاری)"
+                        isMultiple={true}
+                        onChange={handleFileChange}
+                        isReset={attachments.length === 0}
+                    />
+
+                    <div className="flex justify-end">
                         <Button
-                            label="ارسال"
+                            label="ارسال پیام"
                             onClick={handleSendMessage}
                             isLoading={addMessageMutation.isPending}
                             disabled={!messageContent.trim()}
-                            size="sm"
-                            className="h-8 px-4"
-                        />
-                        <UploadBox
-                            label=""
-                            isMultiple={true}
-                            onChange={handleFileChange}
-                            isReset={attachments.length === 0}
+                            className="w-fit"
                         />
                     </div>
                 </div>
-                {attachments.length > 0 && (
-                    <div className="mt-3 flex flex-wrap gap-2">
-                        {attachments.map((file, index) => (
-                            <div key={index} className="bg-gray-100 text-xs px-2 py-1 rounded-md flex items-center gap-1">
-                                📎 {file.name}
-                            </div>
-                        ))}
-                    </div>
-                )}
             </div>
         </div>
     )