diff --git a/src/views/Home/Portrait/Private/Blogs/index.js b/src/views/Home/Portrait/Private/Blogs/index.js
index 4b5a280..1d89bd2 100644
--- a/src/views/Home/Portrait/Private/Blogs/index.js
+++ b/src/views/Home/Portrait/Private/Blogs/index.js
@@ -14,7 +14,7 @@ function Blogs({ list, isDark, setActive }) {
       <div className="w-full flex flex-col rounded-md py-4 overflow-hidden">
         <header className="w-full flex flex-row justify-between items-center">
           <strong className="text-green7B dark:text-white font-bold text-base lg:text-sm">
-            خواندنی‌ها
+            {window.t("خواندنی‌ها")}
           </strong>
           <Link to="/blogs">
             {isDark ? (
@@ -73,12 +73,12 @@ const Blog = ({ blog, setActive }) => {
                 className="w-5 h-5 rounded-full ml-2"
               />
               <span className="text-green7B text-xs font-light dark:text-greenBA">
-                {"حامد دژبانی نسب"}
+                {window.t("حامد دژبانی نسب")}
               </span>
             </div>
             <div className="flex flex-row items-center">
               <span className="text-xs font-light text-gray70 dark:text-greenBA">
-                {_.join(["زمان مناسب", "30"], " ")}
+                {_.join([window.t("زمان مناسب"), "30"], " ")}
               </span>
             </div>
           </div>
diff --git a/src/views/Home/Portrait/Private/Shop/index.js b/src/views/Home/Portrait/Private/Shop/index.js
index 3c20223..0e31443 100644
--- a/src/views/Home/Portrait/Private/Shop/index.js
+++ b/src/views/Home/Portrait/Private/Shop/index.js
@@ -2,7 +2,7 @@ import React from "react";
 import { Link } from "react-router-dom";
 import { connect } from "react-redux";
 import { book } from "../../../../../redux/actions";
-import Header from '../../../../../components/Header'
+import Header from "../../../../../components/Header";
 
 // assets
 
@@ -10,11 +10,11 @@ function Shop({ list, grades }) {
   return (
     <div className="w-full pr-4">
       <div className="w-full flex flex-col rounded-md py-4 overflow-hidden">
-        <Header title="فروشگاه" link="/products" />
+        <Header title={window.t("فروشگاه")} link="/products" />
         <ul
           className="list-none w-full overflow-x-scroll mt-3 flex flex-col flex-wrap no-scrollbar"
           style={{
-            height: 'calc(100vh / 4)',
+            height: "calc(100vh / 4)",
           }}
         >
           {list.map((book, index) => (
@@ -41,10 +41,10 @@ const Book = ({ book, index }) => {
             alt=""
             className="rounded-sm"
             style={{
-              width: 'calc(100vh / 4 * 3 / 4.3 )',
-              height: 'calc(100vh / 4)',
+              width: "calc(100vh / 4 * 3 / 4.3 )",
+              height: "calc(100vh / 4)",
               maxWidth: 200,
-              maxHeight: 275
+              maxHeight: 275,
             }}
           />
         ) : (
@@ -53,8 +53,8 @@ const Book = ({ book, index }) => {
             alt=""
             className="rounded-sm mb-0"
             style={{
-              width: 'calc(100vh / 4 / 2 * 3 / 4.3)',
-              height: 'calc(100vh / 4 / 2 - 4px)',
+              width: "calc(100vh / 4 / 2 * 3 / 4.3)",
+              height: "calc(100vh / 4 / 2 - 4px)",
               marginBottom: index % 2 !== 0 ? "8px" : "0px",
             }}
           />
diff --git a/src/views/Home/Portrait/Private/Videos/index.js b/src/views/Home/Portrait/Private/Videos/index.js
index f7eae3d..fabfcdc 100644
--- a/src/views/Home/Portrait/Private/Videos/index.js
+++ b/src/views/Home/Portrait/Private/Videos/index.js
@@ -34,7 +34,7 @@ function Videos({ videos, grades, isDark, isMobile }) {
           </div>
 
           <h2 className="mt-3 mb-4 text-sm font-semibold text-blue5F dark:text-white lg:mt-4 lg:text-tiny lg:mb-5">
-            {"دوره ویدئویی" + " " + video?.product[2]?.name}
+            {window.t("دوره ویدئویی") + " " + video?.product[2]?.name}
           </h2>
           {/* <p className="font-medium text-blueC0 dark:text-greenBA text-xs mt-1 lg:mt-2 lg:text-sm">{`پایه ${
             grades[video.gradeId]
@@ -49,7 +49,7 @@ function Videos({ videos, grades, isDark, isMobile }) {
       <div className="w-full flex flex-col py-4 lg:px-3 overflow-hidden lg:border lg:border-solid lg:border-gray-200 rounded-md lg:bg-blueC0 lg:bg-opacity-5">
         <header className="w-full flex flex-row justify-between items-center">
           <strong className="text-green7B dark:text-white font-bold text-base lg:text-base mt-2">
-            دوره‌های ویدئویی شما
+            {window.t("دوره‌های ویدئویی شما")}
           </strong>
           {isDark ? (
             <img
diff --git a/src/views/Home/Portrait/Public/Features/index.js b/src/views/Home/Portrait/Public/Features/index.js
index 77b4ec9..5d118d9 100644
--- a/src/views/Home/Portrait/Public/Features/index.js
+++ b/src/views/Home/Portrait/Public/Features/index.js
@@ -17,7 +17,10 @@ function Features({ features }) {
 const Feature = ({ feature }) => {
   return (
     <div className="flex flex-col mt-4" style={{ width: "48%" }}>
-      <div className="p-4 rounded-md w-16" style={{ backgroundColor: feature.backgroundColor }}>
+      <div
+        className="p-4 rounded-md w-16"
+        style={{ backgroundColor: feature.backgroundColor }}
+      >
         <img src={feature.icon} className="w-8 h-8" alt="" />
       </div>
       <strong
@@ -26,7 +29,9 @@ const Feature = ({ feature }) => {
       >
         {feature.title}
       </strong>
-      <p className="mt-2 font-light text-gray1 dark:text-white text-sm leading-4">{feature.text}</p>
+      <p className="mt-2 font-light text-gray1 dark:text-white text-sm leading-4">
+        {feature.text}
+      </p>
     </div>
   );
 };
@@ -39,30 +44,37 @@ Features.defaultProps = {
       icon: interactiveIcon,
       backgroundColor: "#FFFDC4",
       color: "#C0C700",
-      title: "کتاب‌های تعاملی",
-      text: "قابلیت امتیاز دهی به مطالب از جمله امکانات این سامانه می باشد تا به جامعه هدف کارکنان کمک نماید",
+      title: window.t("کتاب‌های تعاملی"),
+      text: window.t(
+        "قابلیت امتیاز دهی به مطالب از جمله امکانات این سامانه می باشد تا به جامعه هدف کارکنان کمک نماید"
+      ),
     },
     {
       icon: videoIcon,
       backgroundColor: "#A1DDFF",
       color: "#196EC0",
-      title: "",
-      title: "ویدئوهای مربوط به هر درس",
-      text: "انتخاب رنگ در حوزه طراحی کار بسیار عجیبی است و کاربران همه روزه با آن دسته پنجه نرم می کنند",
+      title: window.t("ویدئوهای مربوط به هر درس"),
+      text: window.t(
+        "انتخاب رنگ در حوزه طراحی کار بسیار عجیبی است و کاربران همه روزه با آن دسته پنجه نرم می کنند"
+      ),
     },
     {
       icon: testIcon,
       backgroundColor: "#C4FFF7",
       color: "#06A38E",
-      title: "آزمون ",
-      text: "این پلتفرم می تواند تاریخ جشن تولد خود شما، دوستان شما و حتی خانواده شما را به شما یادآوری نمایید",
+      title: window.t("آزمون"),
+      text: window.t(
+        "این پلتفرم می تواند تاریخ جشن تولد خود شما، دوستان شما و حتی خانواده شما را به شما یادآوری نمایید"
+      ),
     },
     {
       icon: packageIcon,
       backgroundColor: "#FFC4EB",
       color: "#930362",
-      title: "پکیج ‌های آموزشی ",
-      text: "همه پایه های تحصیلی باید توسط کاربران انتخاب شود تا به آنها اینکار را یادآوری نماید",
+      title: window.t("پکیج ‌های آموزشی"),
+      text: window.t(
+        "همه پایه های تحصیلی باید توسط کاربران انتخاب شود تا به آنها اینکار را یادآوری نماید"
+      ),
     },
   ],
 };
diff --git a/src/views/Home/Portrait/Public/GradiantText/index.js b/src/views/Home/Portrait/Public/GradiantText/index.js
index 9a64352..1e2dc09 100644
--- a/src/views/Home/Portrait/Public/GradiantText/index.js
+++ b/src/views/Home/Portrait/Public/GradiantText/index.js
@@ -8,10 +8,10 @@ function GradiantText() {
       style={{ background: `url(${phraseImage})` }}
     >
       <h2 className="text-3xl font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-blue-900 to-blue-300">
-        یادگیری بدون وقفه
+        {window.t("یادگیری بدون وقفه ")}
       </h2>
       <h2 className="text-3xl font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-blue-300 to-blue-900">
-        لذت یادگیری هوشمند
+        {window.t("لذت یادگیری هوشمند ")}
       </h2>
     </div>
   );
diff --git a/src/views/Home/Portrait/Public/Header/index.js b/src/views/Home/Portrait/Public/Header/index.js
index 4a7be3b..0450dc8 100644
--- a/src/views/Home/Portrait/Public/Header/index.js
+++ b/src/views/Home/Portrait/Public/Header/index.js
@@ -68,30 +68,35 @@ function Header({ list }) {
           to="/products"
           className="flex flex-row items-center text-white text-tiny bg-blueC0  px-4 py-3 rounded-md backdrop-filter backdrop-blur-md mt-5 self-end"
         >
-          ورود به فروشگاه
+          {window.t("ورود به فروشگاه")}
         </Link>
       </div>
       <div className="flex flex-col items-center text-center font-extrabold text-blue5F dark:text-gray-300 text-2xl mt-3 transform translate-y-4">
         <div className="flex flex-row">
           <div className="relative">
-            <h1 className="inline z-20 pb-1">یادگیری &nbsp;</h1>
+            <h1 className="inline z-20 pb-1">
+              {window.t("یادگیری")}
+              &nbsp;
+            </h1>
             <span className="h-1 w-full absolute bottom-0 z-10 left-0 bg-yellow3"></span>
           </div>
-          <h1 className="inline">با طعم لذت</h1>
+          <h1 className="inline"> {window.t("با طعم لذت")}</h1>
         </div>
         <div className="flex flex-row my-1.5">
-          <h1 className="inline">از اول تا یازدهم &nbsp;</h1>
+          <h1 className="inline">{window.t("از اول تا یازدهم")}&nbsp;</h1>
           <div className="relative">
-            <h1 className="inline z-20 pb-1">کنارتونیم</h1>
+            <h1 className="inline z-20 pb-1">{window.t("کنارتونیم")}</h1>
             <span className="h-1 w-full absolute bottom-0 left-0 bg-orange1"></span>
           </div>
         </div>
         <div className="flex flex-row">
           <div className="relative">
-            <h1 className="inline z-20 pb-1">یادگیری جذاب &nbsp;</h1>
+            <h1 className="inline z-20 pb-1">
+              {window.t("یادگیری جذاب")}&nbsp;
+            </h1>
             <span className="h-1 w-full absolute bottom-0 left-0 bg-green1"></span>
           </div>
-          <h1 className="inline">و تعاملی</h1>
+          <h1 className="inline">و {window.t("تعاملی")} </h1>
         </div>
       </div>
       <div className="w-full p-4 transform translate-y-1/3 relative">
@@ -111,31 +116,37 @@ export default Header;
 Header.defaultProps = {
   list: [
     {
-      name: "زیست یازدهم",
+      name: window.t("زیست یازدهم"),
+
       imageUrl: zist11Image,
     },
     {
-      name: "علوم دوم",
+      name: window.t("علوم دوم"),
+
       imageUrl: olum2Image,
     },
     {
-      name: "علوم اول",
+      name: window.t("علوم اول"),
+
       imageUrl: olum1Image,
     },
     {
-      name: "علوم هفتم",
+      name: window.t("علوم هفتم"),
+
       imageUrl: olum7Image,
     },
     {
-      name: "علوم چهارم",
+      name: window.t("علوم چهارم"),
+
       imageUrl: olum4Image,
     },
     {
-      name: "علوم چهارم",
+      name: window.t("علوم چهارم"),
+
       imageUrl: olum4Image,
     },
     {
-      name: "علوم چهارم",
+      name: window.t("علوم چهارم"),
       imageUrl: olum4Image,
     },
   ],
diff --git a/src/views/Home/Portrait/Public/Platforms/index.js b/src/views/Home/Portrait/Public/Platforms/index.js
index f9068be..b6a45eb 100644
--- a/src/views/Home/Portrait/Public/Platforms/index.js
+++ b/src/views/Home/Portrait/Public/Platforms/index.js
@@ -26,7 +26,10 @@ const Platform = ({ platform }) => {
         <strong className="text-sm" style={{ color: platform.titleColor }}>
           {platform.title}
         </strong>
-        <p className="text-xs leading-5 mt-2" style={{ color: platform.textColor }}>
+        <p
+          className="text-xs leading-5 mt-2"
+          style={{ color: platform.textColor }}
+        >
           {platform.text}
         </p>
       </div>
@@ -43,8 +46,10 @@ Platforms.defaultProps = {
       textColor: "#00366B",
       titleColor: "#1072DC",
       borderColor: "#196EC044",
-      title: "استفاده از تکنولوژی واقعیت افزوده",
-      text: "با استفاده از این تکنولوژی شما پس از نصب اپلیکیشن ما و گرفتن گوشیتون روی محتوای ویدئویی کتاب فیلم رو داخل گوشیتون ببینید",
+      title: window.t("استفاده از تکنولوژی واقعیت افزوده"),
+      text: window.t(
+        "با استفاده از این تکنولوژی شما پس از نصب اپلیکیشن ما و گرفتن گوشیتون روی محتوای ویدئویی کتاب فیلم رو داخل گوشیتون ببینید"
+      ),
       icon: arBlue,
     },
     {
@@ -52,8 +57,10 @@ Platforms.defaultProps = {
       textColor: "#0B5900",
       titleColor: "#118A00",
       borderColor: "#118A0044",
-      title: "محتوای قابل دریافت  باحال و جذاب",
-      text: "تقریبا بالا گوشه هر صفحه از کتاب ما یک کد کیو آر براتون گذاشتیم که با اسکن کد شما می‌تونید محتویات ضمیمه شده اون رو ببینید",
+      title: window.t("محتوای قابل دریافت  باحال و جذاب"),
+      text: window.t(
+        "تقریبا بالا گوشه هر صفحه از کتاب ما یک کد کیو آر براتون گذاشتیم که با اسکن کد شما می‌تونید محتویات ضمیمه شده اون رو ببینید"
+      ),
       icon: qrGreen,
     },
   ],
diff --git a/src/views/Home/Portrait/Public/Responsive/index.js b/src/views/Home/Portrait/Public/Responsive/index.js
index f5a6cde..2eca41f 100644
--- a/src/views/Home/Portrait/Public/Responsive/index.js
+++ b/src/views/Home/Portrait/Public/Responsive/index.js
@@ -9,33 +9,42 @@ function Responsive() {
         background: `url(${emc2Image})`,
         backgroundRepeat: "no-repeat",
         backgroundPosition: "0px 0px",
-        
       }}
     >
       <div className="flex flex-col items-center text-center font-extrabold text-blue5F dark:text-gray-300 text-lg mt-3 transform translate-y-4">
         <div className="flex flex-row ">
           <h1 className="inline z-50">
-            از طریق موبایل یا کامپیوتر میتونی
+            {window.t("از طریق موبایل یا کامپیوتر میتونی")}
           </h1>
         </div>
         <div className="flex flex-row my-1.5">
           <div className="relative">
-            <h1 className="inline z-50 pb-1">به محتوای دیجیتال &nbsp;</h1>
+            <h1 className="inline z-50 pb-1">
+              {window.t("به محتوای دیجیتال")}
+              &nbsp;
+            </h1>
             <span className="h-1 w-full absolute bottom-0 left-0 bg-green1"></span>
           </div>
-          <h1 className="inline">کتابها به راحتی</h1>
+          <h1 className="inline">{window.t("کتابها به راحتی")}</h1>
         </div>
         <div className="flex flex-row">
-          <h1 className="inline"> دسترسی داشته باشی</h1>
+          <h1 className="inline">
+            {window.t("کتابها به راحتی")}
+          </h1>
         </div>
       </div>
-      <div className="w-full relative mt-16" style={{ height : 'calc(100vh / 4)' }}>
-        <div className="absolute left-0 bottom-0 rounded-md bg-grayE3" style={{ height : 'calc(100vh / 4)', width : 'calc(100vw / 1.2)' }}>
-
-        </div>
-        <div className="absolute right-0 bottom-0 rounded-md bg-gray-300" style={{ height : 'calc(100vh / 6.2)', width : 'calc(100vw / 6)' }}>
-
-        </div>
+      <div
+        className="w-full relative mt-16"
+        style={{ height: "calc(100vh / 4)" }}
+      >
+        <div
+          className="absolute left-0 bottom-0 rounded-md bg-grayE3"
+          style={{ height: "calc(100vh / 4)", width: "calc(100vw / 1.2)" }}
+        ></div>
+        <div
+          className="absolute right-0 bottom-0 rounded-md bg-gray-300"
+          style={{ height: "calc(100vh / 6.2)", width: "calc(100vw / 6)" }}
+        ></div>
       </div>
     </div>
   );
diff --git a/src/views/Order/components/Book.js b/src/views/Order/components/Book.js
index b5d35c9..f293805 100644
--- a/src/views/Order/components/Book.js
+++ b/src/views/Order/components/Book.js
@@ -11,16 +11,24 @@ export default function Book({ book }) {
           style={{ width: 60, height: 90 }}
         />
         <div className="flex flex-col mr-2">
-          <strong className="text-xs text-blueC0 dark:text-white lg:text-tiny">علوم اجتماعی</strong>
-          <span className="mt-4 text-xs lg:text-sm text-gray70 dark:text-greenBA">پایه دوم</span>
-          <span className="mt-2 text-xs lg:text-sm text-gray70 dark:text-white">نسخه دیجیتال</span>
+          <strong className="text-xs text-blueC0 dark:text-white lg:text-tiny">
+            {window.t("علوم اجتماعی")}
+          </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("نسخه دیجیتال")}
+          </span>
         </div>
       </div>
       <div className="flex flex-row 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
         </span>
-        <div className="mr-3 text-blueC0 text-xs lg:text-base dark:text-white">126.000 تومان</div>
+        <div className="mr-3 text-blueC0 text-xs lg:text-base dark:text-white">
+          126.000 {window.t("تومان")}
+        </div>
       </div>
     </div>
   );
diff --git a/src/views/Order/index.js b/src/views/Order/index.js
index 700af06..bcba7a8 100644
--- a/src/views/Order/index.js
+++ b/src/views/Order/index.js
@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import Book from "./components/Book";
 import { connect } from "react-redux";
-import {publicApi} from '../../redux/actions';
+import { publicApi } from "../../redux/actions";
 import b1Image from "./assets/b1.png";
 import _ from "lodash";
 
@@ -13,21 +13,21 @@ const colors = {
 };
 
 const status = {
-  1: "در حال پردازش",
-  4: "درخواست رد شد",
-  3: "تکمیل شد",
-  2: "ارسال شده",
+  1: window.t("در حال پردازش"),
+  4: window.t("درخواست رد شد"),
+  3: window.t("تکمیل شد"),
+  2: window.t("ارسال شده"),
 };
 
 function OrderDetails({ order, setHeaderOptions, headerOptions }) {
   useEffect(() => {
     setHeaderOptions(headerOptions);
-  },[]);
+  }, []);
   return (
     <div className="px-4 flex flex-col py-5 lg:pt-24 lg:w-3/5 lg:mx-auto">
       <div className="flex flex-row 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(["شماره سفارش:", order.number], " ")}
+          {_.join([window.t("شماره سفارش:"), order.number], " ")}
         </strong>
         <div className="flex flex-row items-center">
           <span className="text-xs lg:text-tiny font-light text-blue52 dark:text-white">
@@ -40,20 +40,26 @@ function OrderDetails({ order, setHeaderOptions, headerOptions }) {
         </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">آدرس تحویل:</strong>
+        <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">مشخصات تحویل گیرنده:</strong>
+          <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.name}
           </span>
         </div>
         <div className="flex flex-row py-4">
-          <strong className="text-xs lg:text-tiny text-green4F dark:text-white">شماره موبایل:</strong>
+          <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.cellphone}
           </span>
@@ -61,10 +67,12 @@ function OrderDetails({ order, setHeaderOptions, headerOptions }) {
       </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(["کد تحویل", order.receiveCode], " ")}
+          {_.join([window.t("کد تحویل:"), order.receiveCode], " ")}
         </strong>
         <p className="font-light text-right mt-3 text-xs lg:text-sm text-green4F dark:text-white">
-          این کد را پس از دریافت کالا، به مامور ارسال دانوین اعلام فرمایید
+          {window.t(
+            "این کد را پس از دریافت کالا، به مامور ارسال دانوین اعلام فرمایید"
+          )}
         </p>
       </div>
       <div className="w-full flex flex-col">
@@ -74,41 +82,54 @@ function OrderDetails({ order, setHeaderOptions, headerOptions }) {
       </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">مبلغ سبد خرید:</strong>
+          <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, "تومان"], " ")}
+            {_.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">تخفیف:</strong>
+          <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, "تومان"], " ")}
+            {_.join([order.discountPrice, window.t("تومان")], " ")}
           </span>
         </div>
       </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"> هزینه ارسال کالا:</strong>
+          <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, "تومان"], " ")}
+            {_.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">جمع هزینه پرداختی:</strong>
+          <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, "تومان"], " ")}
+            {_.join([order.totalPrice, window.t("تومان")], " ")}
           </span>
         </div>
       </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">نحوه پرداخت:</strong>
+          <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"> شماره تراکنش:</strong>
+          <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}
           </span>
@@ -116,7 +137,9 @@ function OrderDetails({ order, setHeaderOptions, headerOptions }) {
       </div>
       <div className="w-full flex flex-row justify-between py-2">
         <div className="w-full flex flex-row py-4">
-          <strong className="text-xs lg:text-tiny text-green4F dark:text-white">تاریخ تحویل:</strong>
+          <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.date}
           </span>
@@ -126,13 +149,11 @@ function OrderDetails({ order, setHeaderOptions, headerOptions }) {
   );
 }
 
-const mapStateToProps = (state) => ({
-
-});
+const mapStateToProps = (state) => ({});
 
 const mapDispatchToProps = {
   setHeaderOptions: publicApi.setHeaderOptions,
-}
+};
 
 export default connect(mapStateToProps, mapDispatchToProps)(OrderDetails);
 
@@ -144,15 +165,16 @@ OrderDetails.defaultProps = {
     items: [b1Image, b1Image],
     date: "1400/1/11",
     cost: "1.240.000",
-    address:
-      "تهران خیابان انقلاب حدفاصل ابوریحان و فلسطین بن بست سروش پلاک 2 واحد 12 شرقی",
-    name: "هومن عابدی",
+    address: window.t(
+      "تهران خیابان انقلاب حدفاصل ابوریحان و فلسطین بن بست سروش پلاک 2 واحد 12 شرقی"
+    ),
+    name: window.t("هومن عابدی"),
     cellphone: "09121234568",
     shoppingCardPrice: "981.000",
     discountPrice: "12.000",
     sendPrice: "18.000",
     totalPrice: "18.000",
-    payMethod: "حضوری",
+    payMethod: window.t("حضوری"),
     transactionNumber: " BS3194DNB98312",
   },
 };
diff --git a/src/views/Orders/components/Order.js b/src/views/Orders/components/Order.js
index 46b3b8d..da80579 100644
--- a/src/views/Orders/components/Order.js
+++ b/src/views/Orders/components/Order.js
@@ -12,10 +12,10 @@ const colors = {
 };
 
 const status = {
-  1: "در حال پردازش",
-  4: "درخواست رد شد",
-  3: "تکمیل شد",
-  2: "ارسال شده",
+  1: window.t("در حال پردازش"),
+  4: window.t("درخواست رد شد"),
+  3: window.t("تکمیل شد"),
+  2: window.t("ارسال شده"),
 };
 
 function Order({ order, isMobile }) {
@@ -23,7 +23,7 @@ function Order({ order, isMobile }) {
     <div className="w-full flex flex-col rounded-md overflow-hidden my-3 border border-solid border-blueC0 border-opacity-50 dark:border-blueC0 dark:border-opacity-10 lg:w-4/5 mx-auto">
       <div className="flex flex-row w-full justify-between items-center p-3 bg-blueC0 bg-opacity-10 dark:bg-blueC0 dark:bg-opacity-10">
         <strong className="font-medium text-sm lg:text-tiny text-green4F dark:text-white">
-          {_.join(["شماره سفارش:", order.number], " ")}
+          {_.join([window.t("شماره سفارش:"), order.number], " ")}
         </strong>
         <div className="flex flex-row items-center">
           <span className="text-xs lg:text-tiny font-light text-green4F dark:text-white">
@@ -48,6 +48,7 @@ function Order({ order, isMobile }) {
                       width: isMobile ? 60 : 100,
                       height: isMobile ? 90 : 150,
                     }}
+                    alt=""
                   />
                 ))
               : order.items?.slice(0, 1)?.map((item, index) => (
@@ -59,6 +60,7 @@ function Order({ order, isMobile }) {
                       width: isMobile ? 60 : 100,
                       height: isMobile ? 90 : 150,
                     }}
+                    alt=""
                   />
                 ))}
             {isMobile && order.items.length >= 2 && (
@@ -78,7 +80,7 @@ function Order({ order, isMobile }) {
                 fontFamily: "bold",
               }}
             >
-              {_.join(["کد تحویل:", order.receiveCode], " ")}
+              {_.join([window.t("کد تحویل:"), order.receiveCode], " ")}
             </div>
           </div>
         </div>
@@ -91,7 +93,7 @@ function Order({ order, isMobile }) {
                 backgroundColor: "#F0FFF1",
               }}
             >
-              {_.join(["کد تحویل:", order.receiveCode], " ")}
+              {_.join([window.t("کد تحویل:"), order.receiveCode], " ")}
             </div>
           </div>
           <strong
@@ -100,21 +102,22 @@ function Order({ order, isMobile }) {
               fontFamily: "bold",
             }}
           >
-            {_.join(["جمع فاکتور:", order.cost], " ")}
+            {_.join([window.t("جمع فاکتور:"), order.cost], " ")}
           </strong>
           <Link
             to="/orders/order"
             className="rounded-md flex flex-row justify-center px-5 py-2.5 border border-solid border-blueC0 text-green4F bg-blueC0 bg-opacity-10"
           >
-            جزئیات سفارش
+            {window.t("جزئیات سفارش")}
             <img
               src={leftArrowIcon}
               style={{ width: 18 }}
               className="transform rotate-90"
+              alt=""
             />
           </Link>
           <span className="my-5 text-xs text-blue52 font-light dark:text-white lg:hidden">
-            {_.join(["تاریخ سفارش:", order.date], " ")}
+            {_.join([window.t("تاریخ سفارش:"), order.date], " ")}
           </span>
         </div>
       </div>
diff --git a/src/views/Product/Comment/index.js b/src/views/Product/Comment/index.js
index ef509e7..d7bfcfc 100644
--- a/src/views/Product/Comment/index.js
+++ b/src/views/Product/Comment/index.js
@@ -27,7 +27,9 @@ export default Comment;
 
 Comment.defaultProps = {
   comment: {
-    name: "سورنا عابدی",
-    text: "خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ” ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ ﻫﺮﮔﺰ ﺩﺯﺩﯼ ﻧﮑﻦ ” ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻭ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ ﻫﺮﮔﺰ ﺩﺳﺖ ﮐﺞ ﻧﺪﺍﺷﺘﻪ ﭘﺪﺭ ﺑﻪ ﻧﮕﺎﻩ ﻣﺘﻌﺠﺐ ﻓﺮﺯﻧﺪ ﻟﺒﺨﻨﺪﯼ ﺯﺩ ﻭ ﺍﺩﺍﻣﻪ ",
+    name: window.t("سورنا عابدی"),
+    text: window.t(
+      "خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ” ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ ﻫﺮﮔﺰ ﺩﺯﺩﯼ ﻧﮑﻦ ” ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻭ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ ﻫﺮﮔﺰ ﺩﺳﺖ ﮐﺞ ﻧﺪﺍﺷﺘﻪ ﭘﺪﺭ ﺑﻪ ﻧﮕﺎﻩ ﻣﺘﻌﺠﺐ ﻓﺮﺯﻧﺪ ﻟﺒﺨﻨﺪﯼ ﺯﺩ ﻭ ﺍﺩﺍﻣﻪ"
+    ),
   },
 };
diff --git a/src/views/Product/Desktop/ProductOverAll/index.js b/src/views/Product/Desktop/ProductOverAll/index.js
index 09c3946..c8a8225 100644
--- a/src/views/Product/Desktop/ProductOverAll/index.js
+++ b/src/views/Product/Desktop/ProductOverAll/index.js
@@ -31,21 +31,21 @@ export const ProductOverAll = ({ book, grades, isDark, loading }) => {
                 <StarRating value={book?.rate || 4} />
               </div>
               <div className="p-2 border-0 border-solid border-r border-gray-100 text-sm text-gray-400">
-                بیش از {book?.product[type]?.suggestedCounter} نفر امتیاز داده
-                اند
+                {window.t("بیش از")} {book?.product[type]?.suggestedCounter}
+                {window.t("نفرامتیاز داده اند")}
               </div>
             </div>
           </div>
           <div className="py-4">
             <div className="w-full flex items-center pb-2">
-              <h1 className="text-base font-bold">نوع کتاب</h1>
+              <h1 className="text-base font-bold">{window.t("نوع کتاب")}</h1>
               <p className=" text-xs px-4 text-blueC0">
-                به من کمک کن انتخاب کنم
+                {window.t("به من کمک کن انتخاب کنم")}
               </p>
             </div>
             <div className="w-full flex flex-row justify-between items-center mt-4 gap-5">
               <Button
-                title="نسخه فیزیکی"
+                title={window.t("نسخه فیزیکی")}
                 backgroundColor={isDark ? "bg-transparent" : "bg-white"}
                 border={{
                   color: isDark ? "#ffffff55" : "#aaa",
@@ -62,7 +62,7 @@ export const ProductOverAll = ({ book, grades, isDark, loading }) => {
                 radius={false}
               />
               <Button
-                title="نسخه دیجیتال"
+                title={window.t("نسخه دیجیتال")}
                 backgroundColor={isDark ? "bg-transparent" : "bg-white"}
                 border={{
                   color: isDark ? "#ffffff55" : "#196EC055",
@@ -81,7 +81,7 @@ export const ProductOverAll = ({ book, grades, isDark, loading }) => {
                 href={`https://dnvn.ir/xpdf/${book?.sampleFileId}`}
                 className="flex-1 py-4 text-sm border border-solid border-red19 rounded-md  font-bold text-red19 text-center"
               >
-                مشاهده نمونه
+                {window.t("مشاهده نمونه")}
               </a>
               {/* <Button
                 title="مشاهده نمونه"
@@ -104,7 +104,7 @@ export const ProductOverAll = ({ book, grades, isDark, loading }) => {
               to={"/videos/" + book?.id}
               className="bg-blueC0 text-green7B bg-opacity-5 font-semibold text-tiny rounded-md border border-solid border-blueC0 w-2/3 py-4 text-center flex flex-row items-center justify-center"
             >
-              مشاهده دوره ویدیویی این محصول
+              {window.t("مشاهده دوره ویدیویی این محصول")}
               <img
                 src={arrow}
                 alt=""
@@ -130,24 +130,24 @@ export const ProductOverAll = ({ book, grades, isDark, loading }) => {
         <ProductTab
           tabs={[
             {
-              title: "مشخصات",
+              title: window.t("مشخصات"),
               components: (
                 <Table specifications={book?.product[type]?.properties} />
               ),
             },
             {
-              title: "نقد و بررسی",
+              title: window.t("نقد و بررسی"),
               components: (
                 <div className="bg-gray-100 rounded-md mt-4 w-full flex justify-center items-center h-40 text-green4F text-tiny">
-                  این بخش فعلا قابل دسترسی نیست.
+                  {window.t("این بخش فعلا قابل دسترسی نیست.")}
                 </div>
               ),
             },
             {
-              title: "پرسش و پاسخ",
+              title: window.t("پرسش و پاسخ"),
               components: (
                 <div className="bg-gray-100 rounded-md mt-4 w-full flex justify-center items-center h-40 text-green4F text-tiny">
-                  این بخش فعلا قابل دسترسی نیست.
+                  {window.t(" این بخش فعلا قابل دسترسی نیست.")}
                 </div>
               ),
             },
diff --git a/src/views/Product/Rate/index.js b/src/views/Product/Rate/index.js
index 6e3b7b6..360844e 100644
--- a/src/views/Product/Rate/index.js
+++ b/src/views/Product/Rate/index.js
@@ -1,41 +1,52 @@
 import React from "react";
-import separate from '../../../utils/separate';
+import separate from "../../../utils/separate";
 
 //components
 import StarRating from "../../../components/StarRating";
 import Progress from "../../../components/Progress";
 
-
-
 function Rate({ avarage, all, fields, desktop }) {
   return (
     <div className="w-full flex flex-row justify-between items-center mt-5">
       <div className="flex flex-col items-center justify-center h-full ml-4">
-        {
-          desktop ?
-            <h1 className={`text-gray-600 mb-2 font-bold dark:text-white`}>
-              {avarage}
-            </h1>
-            :
-            <strong className={`text-blue5F mb-2 font-bold dark:text-white`} style={{ fontSize: 'calc(100vw / 10)' }}>
-              {avarage}
-            </strong>
-        }
+        {desktop ? (
+          <h1 className={`text-gray-600 mb-2 font-bold dark:text-white`}>
+            {avarage}
+          </h1>
+        ) : (
+          <strong
+            className={`text-blue5F mb-2 font-bold dark:text-white`}
+            style={{ fontSize: "calc(100vw / 10)" }}
+          >
+            {avarage}
+          </strong>
+        )}
         <div className="">
-        <StarRating />
+          <StarRating />
         </div>
-        <span className="text-base text-gray70 mt-2 dark:text-white">{separate(all)}</span>
+        <span className="text-base text-gray70 mt-2 dark:text-white">
+          {separate(all)}
+        </span>
       </div>
       <ul className="p-0 m-0 list-none flex flex-col flex-1">
         {fields.map((item, index) => (
-          <li key={index} className="w-full flex flex-row-reverse items-center justify-between">
-            <span className="mr-2 text-xs text-blue5F dark:text-white">{item.name}</span>
+          <li
+            key={index}
+            className="w-full flex flex-row-reverse items-center justify-between"
+          >
+            <span className="mr-2 text-xs text-blue5F dark:text-white">
+              {item.name}
+            </span>
 
-            {
-              desktop ? <Progress deskTop percent={item.percent} /> : <Progress percent={item.percent} />
-            }
+            {desktop ? (
+              <Progress deskTop percent={item.percent} />
+            ) : (
+              <Progress percent={item.percent} />
+            )}
 
-            <span className="ml-2 text-xs text-blue5F dark:text-white">{item.percent + "%"}</span>
+            <span className="ml-2 text-xs text-blue5F dark:text-white">
+              {item.percent + "%"}
+            </span>
           </li>
         ))}
       </ul>
@@ -50,23 +61,23 @@ Rate.defaultProps = {
   all: 4780,
   fields: [
     {
-      name: "5 ستاره",
+      name: window.t("5 ستاره"),
       percent: 49,
     },
     {
-      name: "4 ستاره",
+      name: window.t("4 ستاره"),
       percent: 31,
     },
     {
-      name: "3 ستاره",
+      name: window.t("3 ستاره"),
       percent: 9,
     },
     {
-      name: "2 ستاره",
+      name: window.t("2 ستاره"),
       percent: 5,
     },
     {
-      name: "1 ستاره",
+      name: window.t("1 ستاره"),
       percent: 6,
     },
   ],
diff --git a/src/views/Product/index.js b/src/views/Product/index.js
index 29af559..47c3adc 100644
--- a/src/views/Product/index.js
+++ b/src/views/Product/index.js
@@ -159,12 +159,12 @@ export const Product = ({
             />
             <ButtonBetween
               width="25%"
-              item={"پیش نمایش"}
+              item={window.t("پیش نمایش")}
               onClick={() => navigation("/videos/" + book?.id)}
             />
           </div>
           <div className="w-full flex flex-col justify-between items-center mt-8">
-            <Header title="توضیحات" link="#" />
+            <Header title={window.t("توضیحات")} link="#" />
             <p className="text-sm text-gray70 mt-2 dark:text-white leading-6">
               خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ
               ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ” ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ
@@ -173,11 +173,11 @@ export const Product = ({
               ﺩﺭ ﺯﻧﺪﮔﯽ ﺩﺭﻭﻍ ﻧﮕﻮ ﭼﺮﺍ ﮐﻪ ﺍﮔﺮ ﮔﻔﺘﯽ ﺻﺪﺍﻗﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺧﯿﺎﻧﺖ ﻧﮑﻦ ﮐﻪ
               ﺍﮔﺮ ﮐﺮﺩﯼ ﻋﺸﻖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺧﺸﻮﻧﺖ ﻧﮑﻦ ﺍﮔﺮ ﮐﺮﺩﯼ ﻣﺤﺒﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ،
               ﻧﺎ ﺣﻖ ﻧﮕﻮ ﺍﮔﺮ ﮔﻔﺘﯽ ﺣﻖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺑﯽ ﺣﯿﺎﯾﯽ ﻧﮑﻦ ﺍﮔﺮ ﮐﺮﺩﯼ ﺷﺮﺍﻓﺖ ﺭﺍ
-              ﺩﺯﺩﯾﺪﻩ ﺍی... ﭘﺲ ﺩﺭ ﺯﻧﺪﮔﯽ ﻓﻘﻂ ﺩﺯﺩﯼ نکن{" "}
+              ﺩﺯﺩﯾﺪﻩ ﺍی... ﭘﺲ ﺩﺭ ﺯﻧﺪﮔﯽ ﻓﻘﻂ ﺩﺯﺩﯼ نکن
             </p>
           </div>
           <div className="w-full flex flex-col justify-between items-center mt-10">
-            <Header title="امتیازات و نظرات" link="#" />
+            <Header title={window.t("امتیازات و نظرات")} link="#" />
             <Rate value={book?.rate || 0} />
           </div>
           <div