diff --git a/src/pages/home/components/OrderTableComponents.tsx b/src/pages/home/components/OrderTableComponents.tsx
index 513e07b..13c25b8 100644
--- a/src/pages/home/components/OrderTableComponents.tsx
+++ b/src/pages/home/components/OrderTableComponents.tsx
@@ -1,6 +1,8 @@
 import { type FC } from 'react';
 import { Eye } from 'iconsax-react';
+import { Link } from 'react-router-dom';
 import StatusCircle from '@/components/StatusCircle';
+import { Paths } from '@/config/Paths';
 import { type Order, type OrderStatus } from './types/OrderTypes';
 
 // کامپوننت رندر شماره سفارش
@@ -37,7 +39,7 @@ export const OrderDateRenderer: FC<{ order: Order }> = ({ order }) => {
 
 // کامپوننت رندر وضعیت سفارش
 export const OrderStatusRenderer: FC<{ order: Order }> = ({ order }) => {
-    const getStatusConfig = (status: OrderStatus) => {
+    const getStatusConfig = (status: OrderStatus | string) => {
         switch (status) {
             case 'در حال طراحی':
                 return {
@@ -93,14 +95,11 @@ export const OrderMessagesRenderer: FC<{ order: Order }> = ({ order }) => {
 // کامپوننت رندر آیکون مشاهده
 export const OrderViewRenderer: FC<{ order: Order }> = ({ order }) => {
     return (
-        <button
-            className="p-1 hover:bg-gray-100 rounded-full transition-colors"
-            onClick={() => {
-                // اینجا می‌توانید منطق مشاهده جزئیات را اضافه کنید
-                console.log('View order:', order.id);
-            }}
+        <Link
+            to={Paths.orderDetails + order.id}
+            className="p-1 hover:bg-gray-100 rounded-full transition-colors inline-block"
         >
-            <Eye color='black' size={16} />
-        </button>
+            <Eye color="black" size={16} />
+        </Link>
     );
 };
diff --git a/src/pages/home/components/Orders.tsx b/src/pages/home/components/Orders.tsx
index 1f01dea..10f31f0 100644
--- a/src/pages/home/components/Orders.tsx
+++ b/src/pages/home/components/Orders.tsx
@@ -2,7 +2,10 @@ import Table from '@/components/Table'
 import { type FC } from 'react'
 import { type ColumnType } from '@/components/types/TableTypes'
 import { type Order } from './types/OrderTypes'
-import { ordersData } from './data/ordersData'
+import { useGetMyOrders } from '@/pages/order/hooks/useOrderData'
+import { TabMyRequestsEnum } from '@/pages/order/enum/OrderEnum'
+import { orderStatusLabels } from '@/pages/order/constants/statusLabels'
+import moment from 'moment-jalaali'
 import {
     OrderNumberRenderer,
     OrderTitleRenderer,
@@ -11,8 +14,24 @@ import {
     OrderMessagesRenderer,
     OrderViewRenderer
 } from './OrderTableComponents'
+import type { OrderType } from '@/pages/order/type/Types'
+
+const mapOrderToRow = (order: OrderType): Order => ({
+    id: order.id,
+    number: String(order.orderNumber ?? order.id),
+    title: order.title,
+    creationDate: {
+        gregorian: moment(order.createdAt).format('YYYY-MM-DD'),
+        persian: moment(order.createdAt).format('jYYYY/jMM/jDD')
+    },
+    status: orderStatusLabels[order.status] ?? order.status,
+    unreadMessages: 0
+})
 
 const Orders: FC = () => {
+    const { data, isLoading } = useGetMyOrders(1, TabMyRequestsEnum.IN_PROGRESS)
+    const orders: Order[] = (data?.data ?? []).map(mapOrderToRow)
+
     const columns: ColumnType<Order>[] = [
         {
             title: 'شماره',
@@ -55,10 +74,11 @@ const Orders: FC = () => {
 
             <Table<Order>
                 columns={columns}
-                data={ordersData}
+                data={orders}
+                isLoading={isLoading}
             />
         </div>
     )
 }
 
-export default Orders
\ No newline at end of file
+export default Orders
diff --git a/src/pages/home/components/types/OrderTypes.ts b/src/pages/home/components/types/OrderTypes.ts
index 1d05565..da311be 100644
--- a/src/pages/home/components/types/OrderTypes.ts
+++ b/src/pages/home/components/types/OrderTypes.ts
@@ -8,7 +8,7 @@ export interface Order extends RowDataType {
     gregorian: string;
     persian: string;
   };
-  status: OrderStatus;
+  status: OrderStatus | string;
   unreadMessages: number;
   [key: string]: unknown;
 }
diff --git a/src/pages/order/OrderDetail.tsx b/src/pages/order/OrderDetail.tsx
index 2fbb79b..ef2ff92 100644
--- a/src/pages/order/OrderDetail.tsx
+++ b/src/pages/order/OrderDetail.tsx
@@ -5,25 +5,7 @@ import moment from 'moment-jalaali'
 import { useGetOrderDetails } from './hooks/useOrderData'
 import TicketSection from './components/TicketSection'
 import { getFileNameAndExtensionFromUrl } from '@/config/func'
-import { RequestStatusEnum } from './enum/OrderEnum'
-
-const statusLabels: Record<string, string> = {
-  [RequestStatusEnum.CREATED]: 'ایجاد شده',
-  [RequestStatusEnum.INVOICED]: 'فاکتور شده',
-  [RequestStatusEnum.WAITING_to_CONFIRM_INVOICE]: 'در انتظار تایید فاکتور',
-  [RequestStatusEnum.DESIGN_INITIATED]: 'شروع طراحی',
-  [RequestStatusEnum.DESIGN_FINISHED]: 'طراحی تمام شده',
-  [RequestStatusEnum.DESIGN_REVISION]: 'بازنگری طراحی',
-  [RequestStatusEnum.READY_TO_PRINTING]: 'آماده چاپ',
-  [RequestStatusEnum.IN_PRINTING]: 'در حال چاپ',
-  [RequestStatusEnum.AFTER_PRINT_COVER]: 'پس از چاپ جلد',
-  [RequestStatusEnum.AFTER_PRINT_CARTONING]: 'کارتن‌سازی',
-  [RequestStatusEnum.AFTER_PRINT_BOXING]: 'بسته‌بندی',
-  [RequestStatusEnum.READY_FOR_DELIVERY]: 'آماده ارسال',
-  [RequestStatusEnum.DELIVERED]: 'تحویل شده',
-  [RequestStatusEnum.FINISHED]: 'پایان یافته',
-  [RequestStatusEnum.CANCELED]: 'لغو شده',
-}
+import { orderStatusLabels } from './constants/statusLabels'
 
 const OrderDetail: FC = () => {
   const { id } = useParams()
@@ -84,7 +66,7 @@ const OrderDetail: FC = () => {
                   <div className="text-xs text-desc">وضعیت:</div>
                   <div className="text-sm font-medium text-black">
                     {order?.status
-                      ? statusLabels[order.status] ?? order.status
+                      ? orderStatusLabels[order.status] ?? order.status
                       : '-'}
                   </div>
                 </div>
diff --git a/src/pages/order/constants/statusLabels.ts b/src/pages/order/constants/statusLabels.ts
new file mode 100644
index 0000000..bef8169
--- /dev/null
+++ b/src/pages/order/constants/statusLabels.ts
@@ -0,0 +1,19 @@
+import { RequestStatusEnum } from '../enum/OrderEnum'
+
+export const orderStatusLabels: Record<string, string> = {
+  [RequestStatusEnum.CREATED]: 'ایجاد شده',
+  [RequestStatusEnum.INVOICED]: 'فاکتور شده',
+  [RequestStatusEnum.WAITING_to_CONFIRM_INVOICE]: 'در انتظار تایید فاکتور',
+  [RequestStatusEnum.DESIGN_INITIATED]: 'شروع طراحی',
+  [RequestStatusEnum.DESIGN_FINISHED]: 'طراحی تمام شده',
+  [RequestStatusEnum.DESIGN_REVISION]: 'بازنگری طراحی',
+  [RequestStatusEnum.READY_TO_PRINTING]: 'آماده چاپ',
+  [RequestStatusEnum.IN_PRINTING]: 'در حال چاپ',
+  [RequestStatusEnum.AFTER_PRINT_COVER]: 'پس از چاپ جلد',
+  [RequestStatusEnum.AFTER_PRINT_CARTONING]: 'کارتن‌سازی',
+  [RequestStatusEnum.AFTER_PRINT_BOXING]: 'بسته‌بندی',
+  [RequestStatusEnum.READY_FOR_DELIVERY]: 'آماده ارسال',
+  [RequestStatusEnum.DELIVERED]: 'تحویل شده',
+  [RequestStatusEnum.FINISHED]: 'پایان یافته',
+  [RequestStatusEnum.CANCELED]: 'لغو شده',
+}