diff --git a/src/components/UploadBox.tsx b/src/components/UploadBox.tsx
index 05724ef..5bbe78d 100644
--- a/src/components/UploadBox.tsx
+++ b/src/components/UploadBox.tsx
@@ -57,6 +57,22 @@ const UploadBox: FC<Props> = (props: Props) => {
                 </button>
 
                 <div className='lg:flex gap-2 hidden'>
+                    {
+                        files.length === 0 ? (
+                            <div className='text-xs text-description'>هیچ فایلی انتخاب نشده است</div>
+                        ) : (
+                            files?.map((item, index) => (
+                                <div key={index} className='flex bg-gray-200 py-1.5 px-2 rounded-lg items-center gap-1'>
+                                    <CloseCircle onClick={() => handleRemove(index)} size={16} color='red' />
+                                    <div className='text-xs'>{item.name}</div>
+                                </div>
+                            ))
+                        )
+                    }
+                </div>
+            </div>
+            {files.length > 0 && (
+                <div className='lg:hidden gap-2 flex flex-wrap mt-4'>
                     {
                         files?.map((item, index) => (
                             <div key={index} className='flex bg-gray-200 py-1.5 px-2 rounded-lg items-center gap-1'>
@@ -66,17 +82,7 @@ const UploadBox: FC<Props> = (props: Props) => {
                         ))
                     }
                 </div>
-            </div>
-            <div className='lg:hidden gap-2 flex flex-wrap mt-4'>
-                {
-                    files?.map((item, index) => (
-                        <div key={index} className='flex bg-gray-200 py-1.5 px-2 rounded-lg items-center gap-1'>
-                            <CloseCircle onClick={() => handleRemove(index)} size={16} color='red' />
-                            <div className='text-xs'>{item.name}</div>
-                        </div>
-                    ))
-                }
-            </div>
+            )}
         </div>
     )
 }
diff --git a/src/config/Paths.tsx b/src/config/Paths.tsx
index 66b6eb6..8037ed8 100644
--- a/src/config/Paths.tsx
+++ b/src/config/Paths.tsx
@@ -3,6 +3,7 @@ export const Paths = {
     myOrders: '/my-orders',
     proformaInvoice: '/proforma-invoice',
     newOrder: '/new-order',
+    orderDetails: '/order/',
     tickets: {
         list: '/tickets',
     },
diff --git a/src/index.css b/src/index.css
index 4288102..a0e1f33 100644
--- a/src/index.css
+++ b/src/index.css
@@ -45,6 +45,7 @@ textarea::placeholder {
   --color-border: #f5f7fc;
   --color-secondary: #ebedf5;
   --color-description: #c3c7dd;
+  --color-desc: #8c90a3;
 }
 
 tbody tr:nth-child(odd) {
diff --git a/src/pages/order/OrderDetail.tsx b/src/pages/order/OrderDetail.tsx
new file mode 100644
index 0000000..4646308
--- /dev/null
+++ b/src/pages/order/OrderDetail.tsx
@@ -0,0 +1,154 @@
+import { type FC, useState } from 'react'
+import { Microphone, Paperclip2, Receipt1 } from 'iconsax-react'
+import Button from '@/components/Button'
+import UploadBox from '@/components/UploadBox'
+import Input from '@/components/Input'
+
+const OrderDetail: FC = () => {
+    const [message, setMessage] = useState('')
+    const [files, setFiles] = useState<File[]>([])
+
+    const orderData = {
+        orderId: '۱۲۲۴۵',
+        title: 'شاپینگ بک',
+        designer: 'عباس حسینی',
+        quantity: '۱۰۰',
+        estimatedDate: '۱۴۰۵/۰۶/۰۶/۱۳',
+        description: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاق...'
+    }
+
+    const handleSubmit = () => {
+        console.log('Submit:', { message, files })
+    }
+
+    return (
+        <div className="w-full min-h-screen bg-[#eceef6] p-6">
+            {/* Header Section */}
+            <div className="flex items-start justify-between mb-6">
+
+
+                <div className="text-sm text-[#8C90A3]">
+                    سفارش #{orderData.orderId}
+                </div>
+            </div>
+
+            {/* Order Information Section */}
+            <div className="bg-white rounded-2xl p-6 mb-6">
+                <div className='flex justify-between items-center'>
+                    <h2 className="text-lg font-light mb-6">اطلاعات سفارش</h2>
+
+                    <a href="#" className="flex items-center gap-2 text-[#0037FF] text-sm">
+                        <Receipt1 size={20} color="#3B82F6" />
+                        <span>پیش فاکتور</span>
+                    </a>
+                </div>
+                <div className="flex items-center gap-6">
+                    {/* Product Image */}
+                    <div className='size-[86px] rounded-lg bg-gray-200'>
+                    </div>
+
+                    {/* Order Details */}
+                    <div className="flex-1 flex gap-20 pr-10">
+                        <div className='flex items-center gap-2'>
+                            <div className="text-xs text-desc">عنوان:</div>
+                            <div className="text-sm font-medium text-black">{orderData.title}</div>
+                        </div>
+                        <div className='flex items-center gap-2'>
+                            <div className="text-xs text-desc">نام طرح:</div>
+                            <div className="text-sm font-medium text-black">{orderData.designer}</div>
+                        </div>
+                        <div className='flex items-center gap-2'>
+                            <div className="text-xs text-desc">تعداد:</div>
+                            <div className="text-sm font-medium text-black">{orderData.quantity}</div>
+                        </div>
+                        <div className='flex items-center gap-2'>
+                            <div className="text-xs text-desc">تخمین زمان:</div>
+                            <div className="text-sm font-medium text-black">{orderData.estimatedDate}</div>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Order Description */}
+                <div className="mt-6 pt-6 border-t border-dashed border-desc">
+                    <div className="text-sm font-medium mb-2 text-desc">شرح سفارش:</div>
+                    <p className="text-sm font-light text-black leading-6">
+                        {orderData.description}
+                    </p>
+                </div>
+            </div>
+
+            {/* Bottom Section - White Card */}
+            <div className="bg-white rounded-2xl p-6">
+                {/* Designer Name */}
+                <div className="mt-6">
+                    <Input
+                        label="نام طراح"
+                        placeholder="عباس حسینی"
+                        readOnly
+                    />
+                </div>
+
+                <div className='bg-[#F5F7FC] rounded-4xl rounded-tr-none mt-6 p-6 max-w-[55%]'>
+                    <div className='text-sm font-light text-black leading-6'>
+                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد،
+                    </div>
+
+                    <div className='flex justify-between mt-3'>
+                        <div className='flex items-center gap-1.5 text-[#0047FF]'>
+                            <Paperclip2 size={20} color="#0047FF" />
+                            <div className='text-xs'>loremipsum.pdf</div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className='flex justify-end'>'
+                    <div className='bg-[#F5F7FC] rounded-4xl rounded-tl-none mt-6 p-6 max-w-[55%]'>
+                        <div className='flex gap-1 text-sm mb-2'>
+                            <div className='font-bold'>طراح : </div>
+                            <div>عباس حسینی</div>
+                        </div>
+                        <div className='text-sm font-light text-black leading-6'>
+                            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد،
+                        </div>
+                    </div>
+                </div>
+
+
+
+                <div className="mt-6">
+                    <div className="text-sm mb-2 text-black">پیام شما</div>
+                    <div className="relative">
+                        <textarea
+                            value={message}
+                            onChange={(e) => setMessage(e.target.value)}
+                            className="w-full h-40 bg-white border border-[#f5f7fc] rounded-xl p-4 text-sm resize-none outline-none"
+                            placeholder=""
+                        />
+                        <button className="absolute left-4 bottom-4 bg-[#FFF1D7] size-8 rounded-lg flex items-center justify-center">
+                            <Microphone size={20} color="black" />
+                        </button>
+                    </div>
+                </div>
+
+
+                <div className="mt-6">
+                    <UploadBox
+                        label="فایل های ضمیمه"
+                        isMultiple={true}
+                        onChange={setFiles}
+                    />
+                </div>
+
+                <div className="flex mt-10 justify-end">
+                    <Button
+                        label="ارسال"
+                        onClick={handleSubmit}
+                        className='w-[150px]'
+                    />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default OrderDetail
\ No newline at end of file
diff --git a/src/router/MainRouter.tsx b/src/router/MainRouter.tsx
index 5dd06cd..9ce3712 100644
--- a/src/router/MainRouter.tsx
+++ b/src/router/MainRouter.tsx
@@ -7,6 +7,7 @@ import { Paths } from '@/config/Paths'
 import MyOrders from '@/pages/order/MyOrders'
 import ProformaInvoice from '@/pages/invoice/ProformaInvoice'
 import NewOrder from '@/pages/order/NewOrder'
+import OrderDetail from '@/pages/order/OrderDetail'
 
 const MainRouter: FC = () => {
     return (
@@ -23,6 +24,7 @@ const MainRouter: FC = () => {
                             <Route path={Paths.myOrders} element={<MyOrders />} />
                             <Route path={Paths.proformaInvoice} element={<ProformaInvoice />} />
                             <Route path={Paths.newOrder} element={<NewOrder />} />
+                            <Route path={`${Paths.orderDetails}:id`} element={<OrderDetail />} />
                         </Routes>
                     </div>
                 </div>