diff --git a/.env b/.env
index 52f1c95..df8604e 100644
--- a/.env
+++ b/.env
@@ -1,3 +1,3 @@
 VITE_TOKEN_NAME = 'negareh_t'
 VITE_REFRESH_TOKEN_NAME = 'negareh_rt'
-VITE_API_BASE_URL = 'http://10.24.161.1:4000'
+VITE_API_BASE_URL = 'http://192.168.99.225:4000'
diff --git a/src/pages/order/MyOrders.tsx b/src/pages/order/MyOrders.tsx
index 4b970bc..5b43855 100644
--- a/src/pages/order/MyOrders.tsx
+++ b/src/pages/order/MyOrders.tsx
@@ -3,10 +3,12 @@ import { useState, type FC } from 'react'
 import { TabMyOrdersEnum } from './enum/OrderEnum'
 import Filters from '@/components/Filters'
 import Button from '@/components/Button'
-import { AddSquare } from 'iconsax-react'
+import { AddSquare, Eye } from 'iconsax-react'
 import Table from '@/components/Table'
 import { useGetMyOrders } from './hooks/useOrderData'
 import moment from 'moment-jalaali'
+import { Link } from 'react-router-dom'
+import { Paths } from '@/config/Paths'
 
 const MyOrders: FC = () => {
     const [page, setPage] = useState<number>(1)
@@ -101,6 +103,16 @@ const MyOrders: FC = () => {
                         {
                             key: 'actions',
                             title: '',
+                            render: (item) => {
+                                return (
+                                    <Link to={Paths.orderDetails + item.id}>
+                                        <Eye
+                                            size={20}
+                                            color='#000000'
+                                        />
+                                    </Link>
+                                )
+                            }
                         }
                     ]}
                     data={data?.data}
diff --git a/src/pages/order/OrderDetail.tsx b/src/pages/order/OrderDetail.tsx
index 4646308..d2a5bea 100644
--- a/src/pages/order/OrderDetail.tsx
+++ b/src/pages/order/OrderDetail.tsx
@@ -3,8 +3,13 @@ import { Microphone, Paperclip2, Receipt1 } from 'iconsax-react'
 import Button from '@/components/Button'
 import UploadBox from '@/components/UploadBox'
 import Input from '@/components/Input'
+import { useParams } from 'react-router-dom'
+import { useGetOrderDetails } from './hooks/useOrderData'
 
 const OrderDetail: FC = () => {
+
+    const { id } = useParams()
+    const { data } = useGetOrderDetails(id!)
     const [message, setMessage] = useState('')
     const [files, setFiles] = useState<File[]>([])
 
@@ -28,7 +33,7 @@ const OrderDetail: FC = () => {
 
 
                 <div className="text-sm text-[#8C90A3]">
-                    سفارش #{orderData.orderId}
+                    سفارش #{data?.data?.orderNumber}
                 </div>
             </div>
 
@@ -42,38 +47,49 @@ const OrderDetail: FC = () => {
                         <span>پیش فاکتور</span>
                     </a>
                 </div>
-                <div className="flex items-center gap-6">
-                    {/* Product Image */}
-                    <div className='size-[86px] rounded-lg bg-gray-200'>
-                    </div>
+                <div className='flex flex-col gap-10'>
+                    {
+                        data?.data?.items?.map((item) => {
+                            return (
+                                <div key={item.product.id}>
+                                    <div className="flex items-center gap-6">
+                                        {/* Product Image */}
+                                        <div className='size-[86px] rounded-lg overflow-hidden'>
+                                            <img src={item.product?.images?.[0]} className='size-full' />
+                                        </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 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">{item.product.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">{item.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">{data?.data?.estimatedDays}</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>
+                                    {/* 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">
+                                            {item.description}
+                                        </p>
+                                    </div>
+                                </div>
+                            )
+                        })
+                    }
                 </div>
             </div>
 
diff --git a/src/pages/order/hooks/useOrderData.ts b/src/pages/order/hooks/useOrderData.ts
index f6566fb..92d4d12 100644
--- a/src/pages/order/hooks/useOrderData.ts
+++ b/src/pages/order/hooks/useOrderData.ts
@@ -17,7 +17,15 @@ export const useSubmitOrder = () => {
 
 export const useGetMyOrders = (page: number = 1, statuses: TabMyOrdersEnum) => {
   return useQuery({
-    queryKey: ["products", page, statuses],
+    queryKey: ["my-orders", page, statuses],
     queryFn: () => api.getMyOrders(page, statuses),
   });
 };
+
+export const useGetOrderDetails = (id: string) => {
+  return useQuery({
+    queryKey: ["order", id],
+    queryFn: () => api.getOrderDetails(id),
+    enabled: !!id,
+  });
+};
diff --git a/src/pages/order/service/OrderService.ts b/src/pages/order/service/OrderService.ts
index 9162dd0..ba977dd 100644
--- a/src/pages/order/service/OrderService.ts
+++ b/src/pages/order/service/OrderService.ts
@@ -1,6 +1,7 @@
 import axios from "@/config/axios";
 import type {
   MyOrdersResponseType,
+  OrderDetailResponseType,
   OrderType,
   ProductsResponseType,
 } from "../type/Types";
@@ -12,7 +13,7 @@ export const getProducts = async () => {
 };
 
 export const submitOrder = async (params: OrderType[]) => {
-  const { data } = await axios.post(`/public/order`, { items: params });
+  const { data } = await axios.post(`/public/orders`, { items: params });
   return data;
 };
 
@@ -48,3 +49,10 @@ export const getMyOrders = async (
   );
   return data;
 };
+
+export const getOrderDetails = async (id: string) => {
+  const { data } = await axios.get<OrderDetailResponseType>(
+    `/public/orders/${id}`,
+  );
+  return data;
+};
diff --git a/src/pages/order/type/Types.ts b/src/pages/order/type/Types.ts
index 69c9612..723151d 100644
--- a/src/pages/order/type/Types.ts
+++ b/src/pages/order/type/Types.ts
@@ -97,3 +97,5 @@ export interface MyOrderType extends RowDataType {
 }
 
 export type MyOrdersResponseType = BaseResponse<MyOrderType[]>;
+
+export type OrderDetailResponseType = BaseResponse<MyOrderType>;