diff --git a/src/redux/actions/userFactor.js b/src/redux/actions/userFactor.js
index 83e5ad4..2c7920a 100644
--- a/src/redux/actions/userFactor.js
+++ b/src/redux/actions/userFactor.js
@@ -27,6 +27,10 @@ const userFactor = {
     async (dispatch) =>
       await proxy.get("userFactor/fullList", data, { dispatch }),
 
+  selectOrder:
+    (data = {}) =>
+    (dispatch) =>
+      dispatch({ type: "userFactor/selectOrder", data }),
   //vod
   vodPayment:
     (data1 = {}, data2 = {}) =>
diff --git a/src/redux/reducers/userFactor.js b/src/redux/reducers/userFactor.js
index e64e6f8..a80a1d0 100644
--- a/src/redux/reducers/userFactor.js
+++ b/src/redux/reducers/userFactor.js
@@ -8,6 +8,7 @@ const initialState = {
   checkEmpty: false,
   isVerified: null,
   fullList: [],
+  selectedOrder: null,
 };
 
 export default function userFactor(state = initialState, action) {
@@ -32,6 +33,13 @@ export default function userFactor(state = initialState, action) {
         fullList: data,
         error: null,
       };
+    case "userFactor/selectOrder":
+      return {
+        ...state,
+        loading: false,
+        selectedOrder: data,
+        error: null,
+      };
     case "userFactor/info":
       return { ...state, loading: false, info: data, error: null };
     case "userFactor/add":
diff --git a/src/views/Order/components/Book.js b/src/views/Order/components/Book.js
index c7b381f..2d2c22e 100644
--- a/src/views/Order/components/Book.js
+++ b/src/views/Order/components/Book.js
@@ -1,35 +1,37 @@
 import React from "react";
-import _ from "lodash";
+import { connect } from "react-redux";
 
-export default function Book({ book }) {
+function Book({ book, grades }) {
   return (
     <div className="w-full flex justify-between py-3 border-b border-solid border-blueFF1 dark:border-gray45">
       <div className="flex items-center flex-1">
         <img
-          src={book}
-          className="rounded-md"
-          style={{ width: 60, height: 90 }}
+          src={`https://dnvn.ir/api/v1/file/${book?.product?.book.fileIds}`}
+          className="rounded-sm lg:w-24 object-cover"
         />
         <div className="flex flex-col mr-2">
           <strong className="text-xs text-blueC0 dark:text-white lg:text-tiny">
-            {window.t("علوم اجتماعی")}
+            {book?.product?.book?.name || " "}
           </strong>
           <span className="mt-4 text-xs lg:text-sm text-gray70 dark:text-greenBA">
-            {window.t("پایه دوم")}
-          </span>
-          <span className="mt-2 text-xs lg:text-sm text-gray70 dark:text-white">
-            {window.t("نسخه دیجیتال")}
+            {"پایه" + " " + grades[book?.product?.book?.gradeId]}
           </span>
         </div>
       </div>
       <div className="flex items-center">
         <span className="py-1 px-2 rounded-sm text-green4F2 text-sm lg:text-base bg-grayF9 dark:bg-gray-500 dark:text-white">
-          1
+          {book?.product?.count}
         </span>
         <div className="mr-3 text-blueC0 text-xs lg:text-base dark:text-white">
-          126.000 {window.t("تومان")}
+          {book?.product?.price + " " + "تومان"}
         </div>
       </div>
     </div>
   );
 }
+
+const mapStateToProps = (state) => ({
+  grades: state.publicApi.grades,
+});
+
+export default connect(mapStateToProps)(Book);
diff --git a/src/views/Order/index.js b/src/views/Order/index.js
index 7b7bdd2..eec1e51 100644
--- a/src/views/Order/index.js
+++ b/src/views/Order/index.js
@@ -2,8 +2,10 @@ import React, { useEffect } from "react";
 import Book from "./components/Book";
 import { connect } from "react-redux";
 import { publicApi } from "../../redux/actions";
+import moment from "jalali-moment";
+
+//assets
 import b1Image from "./assets/b1.png";
-import _ from "lodash";
 
 const colors = {
   1: "#FFF700",
@@ -25,53 +27,65 @@ function OrderDetails({ order, setHeaderOptions, headerOptions, isMobile }) {
       setHeaderOptions(headerOptions);
     }
   }, []);
-  
+
   return (
     <div className="px-4 flex flex-col py-5 lg:w-4/5 lg:mx-auto">
       <div className="flex w-full justify-between items-center p-3 bg-blueC0 bg-opacity-10 rounded-t-md dark:bg-blueC0 dark:bg-opacity-10">
-        <strong className="font-medium text-sm lg:text-tiny text-blue52 dark:text-white">
-          {_.join([window.t("شماره سفارش:"), order.number], " ")}
-        </strong>
-        <div className="flex items-center">
-          <span className="text-xs lg:text-tiny font-light text-blue52 dark:text-white">
-            {status[order.status]}
-          </span>
-          <div
-            className="h-4 w-4 rounded-full mr-2"
-            style={{ backgroundColor: colors[order.status] }}
-          ></div>
-        </div>
-      </div>
-      <div className="w-full flex flex-row items-center py-4 border-b border-solid border-blueFF1 dark:border-gray45">
-        <strong className="text-xs lg:text-tiny text-green4F dark:text-white">
-          {window.t("آدرس تحویل")}:
-        </strong>
-        <span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
-          {order.address}
-        </span>
-      </div>
-      <div className="w-full flex flex-row justify-between py-0 border-b border-solid border-blueFF1 dark:border-gray45">
-        <div className="flex flex-row py-4">
-          <strong className="text-xs lg:text-tiny text-green4F dark:text-white">
-            {window.t("مشخصات تحویل گیرنده:")}
+        {order?.transactionId ? (
+          <strong className="font-medium text-sm lg:text-tiny text-blue52 dark:text-white">
+            {"شماره سفارش:" + " " + order?.transactionId}
           </strong>
-          <span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
-            {order.name}
-          </span>
-        </div>
-        <div className="flex flex-row py-4">
+        ) : null}
+        {order?.condition ? (
+          <div className="flex items-center">
+            <span className="text-xs lg:text-tiny font-light text-blue52 dark:text-white">
+              {status[order?.condition]}
+            </span>
+            <div
+              className="h-4 w-4 rounded-full mr-2"
+              style={{ backgroundColor: colors[order?.condition] }}
+            ></div>
+          </div>
+        ) : null}
+      </div>
+      {order?.recieverAddress ? (
+        <div className="w-full flex flex-row items-center py-4 border-b border-solid border-blueFF1 dark:border-gray45">
           <strong className="text-xs lg:text-tiny text-green4F dark:text-white">
-            {window.t("شماره موبایل:")}
+            {window.t("آدرس تحویل")}:
           </strong>
           <span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
-            {order.cellphone}
+            {order?.recieverAddress}
           </span>
         </div>
+      ) : null}
+      <div className="w-full flex flex-row justify-between py-0 border-b border-solid border-blueFF1 dark:border-gray45">
+        {order?.recieverName ? (
+          <div className="flex flex-row py-4">
+            <strong className="text-xs lg:text-tiny text-green4F dark:text-white">
+              {window.t("مشخصات تحویل گیرنده:")}
+            </strong>
+            <span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
+              {order.recieverName}
+            </span>
+          </div>
+        ) : null}
+        {order?.recieverPhone ? (
+          <div className="flex flex-row py-4">
+            <strong className="text-xs lg:text-tiny text-green4F dark:text-white">
+              {window.t("شماره موبایل:")}
+            </strong>
+            <span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
+              {order.recieverPhone}
+            </span>
+          </div>
+        ) : null}
       </div>
       <div className="w-full rounded-md flex flex-col p-4 mt-2 bg-blueC0 bg-opacity-10 dark:bg-blueC0 dark:bg-opacity-20 dark:border-blueC0 dark:border dark:border-solid">
-        <strong className="text-xs lg:text-tiny text-green4F dark:text-white">
-          {_.join([window.t("کد تحویل:"), order.receiveCode], " ")}
-        </strong>
+        {order?.recieverPostalCode ? (
+          <strong className="text-xs lg:text-tiny text-green4F dark:text-white">
+            {"کد تحویل" + " " + order?.recieverPostalCode}
+          </strong>
+        ) : null}
         <p className="font-light text-right mt-3 text-xs lg:text-sm text-green4F dark:text-white">
           {window.t(
             "این کد را پس از دریافت کالا، به مامور ارسال دانوین اعلام فرمایید"
@@ -79,62 +93,52 @@ function OrderDetails({ order, setHeaderOptions, headerOptions, isMobile }) {
         </p>
       </div>
       <div className="w-full flex flex-col">
-        {order.items.map((item, index) => (
-          <Book book={item} key={index} />
+        {order?.userProducts?.map((product, index) => (
+          <Book book={product} key={index} />
         ))}
       </div>
       <div className="w-full flex flex-row justify-between py-2 border-b border-solid border-blueFF1 dark:border-gray45">
-        <div className="flex flex-row py-4">
-          <strong className="text-xs lg:text-tiny text-green4F dark:text-white">
-            {window.t("مبلغ سبد خرید:")}
-          </strong>
-          <span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
-            {_.join([order.shoppingCardPrice, window.t("تومان")], " ")}
-          </span>
-        </div>
-        <div className="flex flex-row py-4">
-          <strong className="text-xs lg:text-tiny text-green4F dark:text-white">
-            {window.t("تخفیف:")}
-          </strong>
-          <span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
-            {_.join([order.discountPrice, window.t("تومان")], " ")}
-          </span>
-        </div>
+        {order?.sumPrice ? (
+          <div className="flex flex-row py-4">
+            <strong className="text-xs lg:text-tiny text-green4F dark:text-white">
+              {window.t("مبلغ سبد خرید:")}
+            </strong>
+            <span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
+              {order?.sumPrice + " " + "تومان"}
+            </span>
+          </div>
+        ) : null}
       </div>
       <div className="w-full flex flex-row justify-between py-2 border-b border-solid border-blueFF1 dark:border-gray45">
-        <div className="flex flex-row py-4">
-          <strong className="text-xs lg:text-tiny text-green4F dark:text-white">
-            {window.t("هزینه ارسال کالا:")}
-          </strong>
-          <span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
-            {_.join([order.sendPrice, window.t("تومان")], " ")}
-          </span>
-        </div>
-        <div className="flex flex-row py-4 border">
-          <strong className="text-xs lg:text-tiny text-green4F dark:text-white">
-            {window.t("جمع هزینه پرداختی:")}
-          </strong>
-          <span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
-            {_.join([order.totalPrice, window.t("تومان")], " ")}
-          </span>
-        </div>
+        {order?.transportPrice ? (
+          <div className="flex flex-row py-4">
+            <strong className="text-xs lg:text-tiny text-green4F dark:text-white">
+              {window.t("هزینه ارسال کالا:")}
+            </strong>
+            <span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
+              {order?.transportPrice + " " + "تومان"}
+            </span>
+          </div>
+        ) : null}
+        {order?.payPrice ? (
+          <div className="flex flex-row py-4 border">
+            <strong className="text-xs lg:text-tiny text-green4F dark:text-white">
+              {window.t("جمع هزینه پرداختی:")}
+            </strong>
+            <span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
+              {order?.payPrice + " " + "تومان"}
+            </span>
+          </div>
+        ) : null}
       </div>
       <div className="w-full flex flex-row justify-between py-2 border-b border-solid border-blueFF1 dark:border-gray45">
-        <div className="flex flex-row py-4">
-          <strong className="text-xs lg:text-tiny text-green4F dark:text-white">
-            {window.t("نحوه پرداخت:")}
-          </strong>
-          <span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
-            {order.payMethod}
-          </span>
-        </div>
         <div className="flex flex-row py-4">
           <strong className="text-xs lg:text-tiny text-green4F dark:text-white">
             {" "}
             {window.t("شماره تراکنش:")}
           </strong>
           <span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
-            {order.transactionNumber}
+            {order?.transactionId}
           </span>
         </div>
       </div>
@@ -144,7 +148,7 @@ function OrderDetails({ order, setHeaderOptions, headerOptions, isMobile }) {
             {window.t("تاریخ تحویل:")}
           </strong>
           <span className="flex-1 font-light text-right mr-2 text-xs lg:text-tiny text-green4F dark:text-white">
-            {order.date}
+            {moment(order?.payedAt)?.format("jYYYY/jMM/jDD")}
           </span>
         </div>
       </div>
@@ -154,6 +158,7 @@ function OrderDetails({ order, setHeaderOptions, headerOptions, isMobile }) {
 
 const mapStateToProps = (state) => ({
   isMobile: state.config.device === "mobile",
+  order: state.userFactor.selectedOrder
 });
 
 const mapDispatchToProps = {
@@ -161,25 +166,3 @@ const mapDispatchToProps = {
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(OrderDetails);
-
-OrderDetails.defaultProps = {
-  order: {
-    number: "535353523653",
-    receiveCode: "300031",
-    status: 2,
-    items: [b1Image, b1Image],
-    date: "1400/1/11",
-    cost: "1.240.000",
-    address: window.t(
-      "تهران خیابان انقلاب حدفاصل ابوریحان و فلسطین بن بست سروش پلاک 2 واحد 12 شرقی"
-    ),
-    name: window.t("هومن عابدی"),
-    cellphone: "09121234568",
-    shoppingCardPrice: "981.000",
-    discountPrice: "12.000",
-    sendPrice: "18.000",
-    totalPrice: "18.000",
-    payMethod: window.t("حضوری"),
-    transactionNumber: " BS3194DNB98312",
-  },
-};
diff --git a/src/views/Orders/components/Order.js b/src/views/Orders/components/Order.js
index 1411bc8..18f24ac 100644
--- a/src/views/Orders/components/Order.js
+++ b/src/views/Orders/components/Order.js
@@ -2,6 +2,7 @@ import React from "react";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import moment from "jalali-moment";
+import { userFactor } from "../../../redux/actions";
 
 //assets
 import leftArrowIcon from "../../../assets/icons/dropdown-blue.svg";
@@ -20,7 +21,7 @@ const status = {
   2: window.t("ارسال شده"),
 };
 
-function Order({ order, setDashboardPage, isDashboard }) {
+function Order({ order, setDashboardPage, isDashboard, selectOrder }) {
   return (
     <div className="w-full lg:w-2/3 flex flex-col rounded-md overflow-hidden my-3 border border-solid border-blueC0 border-opacity-50 dark:border-blueC0 dark:border-opacity-10">
       <div className="flex w-full justify-between items-center p-3 bg-blueC0 bg-opacity-10 dark:bg-blueC0 dark:bg-opacity-10">
@@ -86,7 +87,15 @@ function Order({ order, setDashboardPage, isDashboard }) {
           <Link
             to={isDashboard ? "#" : "/orders/order"}
             className="rounded-md flex items-center lg:text-sm justify-center px-5 py-2.5 border border-solid border-blueC0 text-green4F bg-blueC0 bg-opacity-10"
-            onClick={() => (isDashboard ? setDashboardPage("order") : {})}
+            onClick={() => {
+              if (isDashboard) {
+                selectOrder(order);
+                setDashboardPage("order");
+              } else {
+                selectOrder(order);
+                return;
+              }
+            }}
           >
             {window.t("جزئیات سفارش")}
             <img
@@ -112,4 +121,8 @@ const mapStateToProps = (state) => ({
   isMobile: state.config.device === "mobile",
 });
 
-export default connect(mapStateToProps)(Order);
+const mapDispatchToProps = {
+  selectOrder: userFactor.selectOrder,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Order);