diff --git a/package.json b/package.json
index d105297..1d21422 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "react-dropzone": "^11.3.1",
     "react-hot-toast": "^2.4.1",
     "react-i18next": "^12.2.2",
+    "react-multi-date-picker": "^4.3.1",
     "react-number-format": "^4.9.3",
     "react-qr-code": "^2.0.11",
     "react-redux": "^8.0.5",
diff --git a/public/assets/locales/en/translation.json b/public/assets/locales/en/translation.json
index 56449bf..5ec431a 100644
--- a/public/assets/locales/en/translation.json
+++ b/public/assets/locales/en/translation.json
@@ -1,8 +1,8 @@
 {
   "title": "OPEX",
-  "signIn":"Sign In",
+  "signIn": "Sign In",
   "signUp": "Sign Up",
-  "signOut":"Sign Out",
+  "signOut": "Sign Out",
   "date": "Date",
   "time": "Time",
   "volume": "Volume",
@@ -15,9 +15,8 @@
   "max": "Max",
   "buy": "Buy",
   "sell": "Sell",
-  "all": "All",
   "orderType": "Order Type",
-  "status" : "Status",
+  "status": "Status",
   "pleaseLogin" : "Please Log In!",
   "comingSoon" : "Coming Soon!",
   "deposit": "Deposit",
@@ -28,6 +27,12 @@
   "commission": "Commission",
   "nextStep": "Next Step",
   "prevStep": "Prev Step",
+  "next": "next",
+  "all": "all",
+  "prev": "prev",
+  "ask": "ask",
+  "bid": "bid",
+  "to": "to",
   "submit": "Submit",
   "username": "Username",
   "password": "Password",
@@ -44,21 +49,28 @@
   "noTx": "There is no transaction!",
   "close": "Close",
   "unit": "Unit",
+  "from": "from",
+  "row": "Row",
+  "until": "until",
+  "withPrice": "with price",
+  "description": "Description",
+  "first": "First",
   "offline": "Check your connection!",
-  "improperMobileView ": "Not optimized for mobile view.",
+  "improperMobileView": "Not optimized for mobile view.",
   "home": "Home",
   "country": {
-    "iran" : "I. R. IRAN",
-    "germany" : "Germany",
+    "iran": "IRAN",
+    "germany": "Germany",
     "uk": "United Kingdom",
-    "turkey" : "Turkey"
+    "turkey": "Turkey",
+    "uzbekistan": "Uzbekistan"
   },
   "currency": {
-    "IRT" : "IRT",
-    "Euro" : "Euro",
-    "USD" : "USD",
-    "BTC" : "BTC",
-    "ETH" : "ETH",
+    "IRT": "IRT",
+    "Euro": "Euro",
+    "USD": "USD",
+    "BTC": "BTC",
+    "ETH": "ETH",
     "USDT": "USDT",
     "TBTC": "TBTC",
     "TETH": "TETH",
@@ -124,7 +136,7 @@
     "LIMIT_MAKER": "Limit Maker"
   },
   "header": {
-    "lastPrice" : "Last Price",
+    "lastPrice": "Last Price",
     "availableBalance" : "Available Balance",
     "free": "Available",
     "locked": "Locked",
@@ -149,6 +161,9 @@
   "technical": {
     "title": "Technical"
   },
+  "txHistory": {
+    "title": "Transactions History"
+  },
   "messages": {
     "title": "Messages"
   },
@@ -156,9 +171,10 @@
     "title": "Settings"
   },
   "Languages": {
-    "Persian": "فارسی",
-    "English": "English",
-    "Arabic": "عربي"
+    "fa": "فارسی",
+    "en": "English",
+    "ar": "عربي",
+    "uzb": "Oʻzbekcha"
   },
   "Theme": {
     "Light": "Light",
@@ -176,7 +192,7 @@
     "title": "Order",
     "minOrder":  "Minimum allowed order is {{min}} {{currency}}",
     "maxOrder":  "Maximum allowed order is {{max}} {{currency}}",
-    "divisibility": "Divisibility !",
+    "divisibility": "The entered value must be divisible by {{mod}} !",
     "notEnoughBalance": "Insufficient Balance ",
     "availableAmount": "Available Amount",
     "bestOffer": "Best Offer",
@@ -232,6 +248,21 @@
     "showZeroBalance": "Do not show zero balance.",
     "estimateAlert": "The equivalent amount is calculated based on the highest buy offer"
   },
+  "TransactionHistory": {
+    "coin": "Coins",
+    "category": "Categories",
+    "size": "Per page",
+    "period" : "Period"
+  },
+  "TransactionCategory": {
+    "DEPOSIT": "Deposit",
+    "FEE": "Fee",
+    "TRADE": "Trade",
+    "WITHDRAW": "Withdraw",
+    "ORDER_CANCEL": "Cancel Order",
+    "ORDER_CREATE": "Create Order",
+    "ORDER_FINALIZED": "Finalized Order"
+  },
   "DepositWithdraw": {
     "title": "Deposit / Withdraw",
     "success": "The Address is copied.",
@@ -272,7 +303,7 @@
   },
   "IPGErrorCode": {
     "13003": "You are not allowed to pay.",
-    "13004":"You have an unpaid request.",
+    "13004": "You have an unpaid request.",
     "13005": "Request locked.",
     "13007": "Unknown Error"
   },
@@ -608,9 +639,9 @@
   },
   "Footer": {
     "darkMode": "Dark Mode",
-    "aboutUs" : "About Us",
-    "contactUS" : "Contact Us",
-    "blog" : "Blog",
+    "aboutUs": "About Us",
+    "contactUS": "Contact Us",
+    "blog": "Blog",
     "guide": "Guide",
     "rules": "Rules",
     "api": "API",
@@ -628,10 +659,10 @@
     "tooManyFiles": "Uploading more than one photo is not allowed!",
     "errorMsgDefault": "Uploaded photo is not valid!"
   },
-  "errorPage" : {
-    "needKYC" : "Access denied for KYC status",
-    "reload" : "Try Again",
-    "errorText" : "Server connection error"
+  "errorPage": {
+    "needKYC": "Access denied for KYC status",
+    "reload": "Try Again",
+    "errorText": "Server connection error"
   },
   "aboutUs": {
     "title": "About US",
@@ -673,7 +704,6 @@
     "p8": "",
     "p9": "",
     "text4": ""
-
   },
   "transferFees": {
     "title": "Transfer Fees",
diff --git a/public/assets/locales/fa/translation.json b/public/assets/locales/fa/translation.json
index d936d9d..4b32e8c 100644
--- a/public/assets/locales/fa/translation.json
+++ b/public/assets/locales/fa/translation.json
@@ -15,7 +15,6 @@
   "max": "حداکثر",
   "buy": "خرید",
   "sell": "فروش",
-  "all": "همه",
   "orderType": "نوع سفارش",
   "status": "وضعیت",
   "pleaseLogin": "لطفاً وارد شوید!",
@@ -28,6 +27,12 @@
   "commission": "کارمزد",
   "nextStep": "گام بعدی",
   "prevStep": "گام قبلی",
+  "next": "بعدی",
+  "all": "همه موارد",
+  "prev": "قبلی",
+  "ask": "فروش",
+  "bid": "خرید",
+  "to": "تا",
   "submit": "ثبت",
   "username": "نام کاربری",
   "password": "رمز ورود",
@@ -44,14 +49,21 @@
   "noTx": "تراکنشی وجود ندارد.",
   "close": "بستن",
   "unit": "واحد",
+  "from": "از",
+  "row": "ردیف",
+  "until": "تا",
+  "withPrice": "با قیمت",
+  "description": "توضیحات",
+  "first": "ابتدا",
   "offline": "اتصال اینترنت را بررسی کنید!",
-  "improperMobileView ": "فعلاً برای موبایل بهینه نشده است.",
+  "improperMobileView": "فعلاً برای موبایل بهینه نشده است.",
   "home": "صفحه‌ اصلی",
   "country": {
-    "iran" : "ایران",
-    "germany" : "آلمان",
+    "iran": "ایران",
+    "germany": "آلمان",
     "uk": "انگلستان",
-    "turkey" : "ترکیه"
+    "turkey": "ترکیه",
+    "uzbekistan": "ازبکستان"
   },
   "currency": {
     "IRT": "تومان",
@@ -149,6 +161,9 @@
   "technical": {
     "title": "تکنیکال"
   },
+  "txHistory": {
+    "title": "تاریخچه تراکنش‌ ها"
+  },
   "messages": {
     "title": "پیام ها"
   },
@@ -156,9 +171,10 @@
     "title": "تنظیمات"
   },
   "Languages": {
-    "Persian": "فارسی",
-    "English": "English",
-    "Arabic": "عربي"
+    "fa": "فارسی",
+    "en": "English",
+    "ar": "عربي",
+    "uzb": "Oʻzbekcha"
   },
   "Theme": {
     "Light": "روشن",
@@ -194,7 +210,7 @@
     "success": "ثبت سفارش {{type}} {{reqAmount}} {{base}} با قیمت {{pricePerUnit}} {{quote}} با موفقیت انجام شد."
   },
   "LastTrades": {
-    "title": "معامله‌های اخیر"
+    "title": "معامله‌ های اخیر"
   },
   "charts": {
     "title": "نمودار قیمت",
@@ -232,6 +248,21 @@
     "showZeroBalance": "عدم نمایش موجودی صفر",
     "estimateAlert": "مبلغ دارایی معادل براساس بالاترین پیشنهاد خرید محاسبه شده"
   },
+  "TransactionHistory": {
+    "coin" : "ارز",
+    "category" : "نوع تراکنش",
+    "size" : "تعداد",
+    "period" : "بازه زمانی"
+  },
+  "TransactionCategory": {
+    "DEPOSIT" : "واریز",
+    "FEE" : "کارمزد",
+    "TRADE" : "معامله",
+    "WITHDRAW" : "برداشت",
+    "ORDER_CANCEL" : "لغو سفارش",
+    "ORDER_CREATE" : "ثبت سفارش",
+    "ORDER_FINALIZED" : "اتمام سفارش"
+  },
   "DepositWithdraw": {
     "title": "واریز/برداشت",
     "success": "آدرس کپی شد",
@@ -628,10 +659,10 @@
     "tooManyFiles": "آپلود بیشتر از یک عکس مجاز نیست!",
     "errorMsgDefault": "عکس آپلود شده معتبر نیست!"
   },
-  "errorPage" : {
-    "needKYC" : "دسترسی این بخش فقط برای کاربران احراز هویت شده مجاز است!",
-    "reload" : "تلاش مجدد",
-    "errorText" : "خطا در ارتباط با سرور"
+  "errorPage": {
+    "needKYC": "دسترسی این بخش فقط برای کاربران احراز هویت شده مجاز است!",
+    "reload": "تلاش مجدد",
+    "errorText": "خطا در ارتباط با سرور"
   },
   "aboutUs": {
     "title": "درباره ما",
@@ -673,7 +704,6 @@
     "p8": "",
     "p9": "",
     "text4": ""
-
   },
   "transferFees": {
     "title": "کارمزد انتقال",
diff --git a/src/components/TextInput/TextInput.js b/src/components/TextInput/TextInput.js
index bde379c..5c65205 100644
--- a/src/components/TextInput/TextInput.js
+++ b/src/components/TextInput/TextInput.js
@@ -2,9 +2,31 @@ import React from "react";
 import Icon from "../Icon/Icon";
 import Select from "react-select";
 import classes from "./TextInput.module.css";
+import DatePicker from "react-multi-date-picker";
+import persian_fa from "react-date-object/locales/persian_fa";
+import persian from "react-date-object/calendars/persian";
+import {useSelector} from "react-redux";
+import i18n from "i18next";
+import "react-multi-date-picker/styles/backgrounds/bg-dark.css"
 
 const TextInput = (props) => {
-    const {customRef,readOnly,onchange,customClass,options, lead , after ,select ,alerts ,max , ...other} = props
+    const {customRef,readOnly,onchange,customClass,options, lead, ltr, after ,select ,alerts ,max, datePicker, ...other} = props
+
+    const isDark = useSelector((state) => state.global.isDark)
+
+    console.log("isDark", isDark)
+
+    const optionClassHandler = (state) => {
+        let className = classes.selectOptions
+        if (state.isFocused) {
+            className = className + " " + classes.isFocused
+        }
+        if (state.isSelected) {
+            className = className + " " + classes.isSelected
+        }
+        return className;
+    }
+
 
     let leadSection = null
     let afterSection = null
@@ -15,6 +37,8 @@ const TextInput = (props) => {
         readOnly={readOnly}
         onChange={onchange}
         max={max}
+        className={`${classes.input}`}
+        style={{direction: ltr && 'ltr'}}
         {...other}
     />
 
@@ -24,13 +48,34 @@ const TextInput = (props) => {
 
     if ( select ){
         inputSection = <Select
+            classNames={{
+                option: (state) => optionClassHandler(state),
+                menuList: () => `${classes.menuList}`,
+                menu: () => `${classes.menu}`,
+            }}
             onChange={onchange}
             options={options}
+            ref={customRef}
             classNamePrefix="select"
             className={`${classes.selectBox} select`}
             {...other}
         />
     }
+
+    if ( datePicker ){
+        inputSection = <DatePicker
+            className={`${isDark && "bg-dark"}`}
+
+            /*className="bg-dark"*/
+            locale={i18n.language === "fa" ? persian_fa : null}
+            calendar={i18n.language === "fa" ? persian : null}
+            onChange={onchange}
+            render={<input className={`${classes.datePicker}`}/>}
+            {...other}
+        >
+        </DatePicker>
+    }
+
     if(after){
         afterSection = <span className={`after ${classes.after}`}>{after}</span>
     }
diff --git a/src/components/TextInput/TextInput.module.css b/src/components/TextInput/TextInput.module.css
index 6611c79..df133d8 100644
--- a/src/components/TextInput/TextInput.module.css
+++ b/src/components/TextInput/TextInput.module.css
@@ -22,7 +22,7 @@
   width: 100%;
 }
 
-.inputGroup span {
+.inputGroup .lead, .inputGroup .after {
   background: var(--cardHeader);
   color: var(--textColor);
   width: 50%;
@@ -39,7 +39,7 @@
   border: 0.3vh solid var(--cardHeader);
 }
 
-.inputGroup input {
+.inputGroup .input {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -52,6 +52,44 @@
   background: none;
   color: var(--textColor) !important;
 }
+
+.inputGroup :global(.rmdp-container ) {
+  width: 50%;
+  height: 100%;
+}
+
+.inputGroup :global(.bg-dark.rmdp-wrapper) {
+  background-color: var(--cardBody) !important;
+  color: var(--textColor) !important;
+}
+
+.inputGroup :global(.rmdp-shadow ) {
+  box-shadow: 0 0 5px var(--cardHeader);
+  border: 1.5px solid var(--cardBorder);
+}
+.inputGroup :global(.rmdp-ep-shadow:after ) {
+  box-shadow: 0 0 5px var(--cardHeader);
+  border: 1.5px solid var(--cardBorder);
+}
+
+.inputGroup :global(.rmdp-panel-body li .b-date) {
+  padding: 0;
+}
+.inputGroup :global(.rmdp-panel-body li) {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;;
+  padding: 1vh 2.5vw;
+  margin: 1.25vh 0.3vw;
+}
+
+.inputGroup :global(.rmdp-container input ) {
+  border: none;
+  text-align: center;
+  background: none;
+  color: var(--textColor) !important;
+}
+
 :global(.ltr) .inputGroup input {
   font-family: "Segoe UI", serif;
 }
@@ -67,6 +105,12 @@
 :global(.ltr) .inputGroup .after {
   border-radius: 0 4px 4px 0;
 }
+
+.datePicker {
+  width: 100%;
+  height: 100%;
+}
+
 .inputGroup-hint {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -107,35 +151,57 @@
   background-color: transparent !important;
   box-shadow: none !important;
 }
-:global .select__control:hover {
-  border-color: transparent !important;
-  background-color: transparent !important;
-  box-shadow: none !important;
-}
+
 :global .select__menu {
   margin-top: 0;
 }
-:global .select__option--is-focused {
-  color: #444444 !important;
-  background-color: var(--activeTab);
-}
-:global .select__option--is-selected {
-  background-color: var(--activeTab);
-}
+
 :global .select__indicator-separator {
-  width: 1px !important;
+  width: 2px !important;
   webkit-align-self: stretch !important;
   -ms-flex-item-align: stretch !important;
-  background: hsl(0, 0%, 80%);
+  background: var(--cardBorder) !important;
   border: none !important;
   height: auto !important;
 }
+
 :global .select__menu {
   background-color: var(--cardBody) !important;
 }
+
 :global .select__single-value {
   color: var(--textColor) !important;
 }
+
 :global .select__value-container {
   justify-content: center;
 }
+
+
+.isFocused {
+  background-color: var(--orange) !important;
+  color: #000 !important;
+}
+
+.isSelected {
+  background-color: var(--activeTab) !important;
+  /*background-color: var(--cardHeaderAlpha) !important;*/
+  color: #fff !important;
+}
+
+.selectOptions {
+  padding: 1vh 1.5vw !important;
+}
+
+.menuList::-webkit-scrollbar {
+  background: transparent !important;
+  width: 2vw !important;
+}
+
+.menuList::-webkit-scrollbar-thumb {
+  background: var(--scrollBar) !important;
+  border-radius: 100px;
+  /*width: 1px !important;*/
+}
+
+
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/Content.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/Content.js
index 74069c5..c6123a2 100644
--- a/src/main/Mobile/Pages/UserPanel/Secttions/Content/Content.js
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/Content.js
@@ -3,13 +3,14 @@ import classes from "./Content.module.css";
 import ScrollBar from "../../../../../../components/ScrollBar";
 import {Navigate, Route, Routes} from "react-router-dom";
 import * as RoutesName from "../../../../Routes/routes";
-import {DepositRelative} from "../../../../Routes/routes";
+import {DepositRelative, TxHistory} from "../../../../Routes/routes";
 import {useTranslation} from "react-i18next";
 import Wallet from "./components/Wallet/Wallet";
 import Settings from "./components/Settings/Settings";
 import ProtectedRoute from "../../../../../../components/ProtectedRoute/ProtectedRoute";
 import {useSelector} from "react-redux";
 import Market from "./components/Market/Market";
+import TransactionHistory from "./components/TransactionHistory/TransactionHistory";
 
 const Content = () => {
 
@@ -26,6 +27,7 @@ const Content = () => {
                     <Route path={RoutesName.MarketRelative + "/*"} element ={<Market/>}/>
                     <Route element={<ProtectedRoute/>}>
                         <Route path={RoutesName.WalletRelative+"/:id/:path/*"} element={<Wallet/>}/>
+                        <Route path={RoutesName.TxHistoryRelative} element={<TransactionHistory/>}/>
                         <Route path={RoutesName.SettingsRelative+"/*"} element={<Settings/>}/>
                     </Route>
                     <Route path="*" element ={
@@ -39,6 +41,10 @@ const Content = () => {
                         element={<Navigate to={RoutesName.Wallet + "/" + defaultWallet + DepositRelative} replace />}
                     />
 
+                    <Route
+                        path={RoutesName.TxHistoryRelative}
+                        element={<Navigate to={RoutesName.TxHistory} replace />}
+                    />
                     <Route
                         path={RoutesName.SettingsRelative}
                         element={<Navigate to={RoutesName.Security} replace />}
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Authentication/components/PersonalProfileStep/PersonalProfileStep.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Authentication/components/PersonalProfileStep/PersonalProfileStep.js
index 0cf4e4f..9d56fa9 100644
--- a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Authentication/components/PersonalProfileStep/PersonalProfileStep.js
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Settings/components/Authentication/components/PersonalProfileStep/PersonalProfileStep.js
@@ -34,6 +34,7 @@ const PersonalProfileStep = (props) => {
         {value: "germany", label: t('country.germany')},
         {value: "uk", label: t('country.uk')},
         {value: "turkey", label: t('country.turkey')},
+        {value: "uzbekistan", label: t('country.uzbekistan')},
     ]
 
     const convertUserInfoToState = (info) => {
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/TransactionHistory/TransactionHistory.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/TransactionHistory/TransactionHistory.js
new file mode 100644
index 0000000..1c6a094
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/TransactionHistory/TransactionHistory.js
@@ -0,0 +1,230 @@
+import React, {useEffect, useRef, useState} from 'react';
+import classes from './TransactionHistory.module.css'
+import * as RoutesName from "../../../../../../Routes/routes";
+import {activeOrderLayout} from "../../../../../../../../store/actions/global";
+import {useDispatch, useSelector} from "react-redux";
+import {useLocation} from "react-router-dom";
+import TextInput from "../../../../../../../../components/TextInput/TextInput";
+import {useTranslation} from "react-i18next";
+import moment from "moment-jalaali";
+import Loading from "../../../../../../../../components/Loading/Loading";
+import Error from "../../../../../../../../components/Error/Error";
+import TransactionHistoryTable from "./components/TransactionHistoryTable/TransactionHistoryTable";
+import {useTransactionHistory} from "../../../../../../../../queries";
+import Date from "../../../../../../../../components/Date/Date";
+import DatePanel from "react-multi-date-picker/plugins/date_panel";
+import Button from "../../../../../../../../components/Button/Button";
+
+const TransactionHistory = () => {
+
+    const {t} = useTranslation();
+    const user_id = useSelector((state) => state.auth.id)
+    const coins = useSelector((state) => state.exchange.assets)
+    const [query, setQuery] = useState({
+        "coin": null, // optional
+        "category": null, // optional [DEPOSIT, FEE, TRADE, WITHDRAW, ORDER_CANCEL, ORDER_CREATE, ORDER_FINALIZED]
+        "startTime": moment().subtract(1, 'months').startOf("day").valueOf(),
+        "endTime": moment().endOf("day").valueOf(),
+        "limit": 10,
+        "offset": 0
+    });
+
+    const dispatch = useDispatch();
+    const location = useLocation();
+
+
+    const {data, isLoading, error} = useTransactionHistory(user_id, query);
+
+    useEffect(() => {
+        if (!isFirst.current) scrollRef.current?.scrollIntoView({behavior: 'smooth'});
+    }, [data]);
+
+    useEffect(() => {
+
+        if (location.pathname === RoutesName.TxHistory) {
+            dispatch(activeOrderLayout(true))
+        }
+        return () => {
+            dispatch(activeOrderLayout(false))
+        }
+
+    }, [location.pathname]);
+
+
+    const pagination = {
+        page: (query.offset / query.limit) + 1,
+        isLastPage: data?.length < query.limit
+    }
+
+    const isFirst = useRef(true);
+
+    useEffect(() => {
+        if (!isFirst.current) scrollRef.current?.scrollIntoView({behavior: 'smooth'});
+    }, [data]);
+
+    const categories = ['DEPOSIT', 'FEE', 'TRADE', 'WITHDRAW', 'ORDER_CANCEL', 'ORDER_CREATE', 'ORDER_FINALIZED'];
+
+    const coinsOptions = [{value: null, label: t('all')}]
+    const categoryOptions = [{value: null, label: t('all')}]
+    const size = [10, 20, 30, 40, 50]
+
+    categories.forEach((o) => {
+        categoryOptions.push({value: o, label: t('TransactionCategory.' + o)})
+    })
+
+    coins.forEach((o) => {
+        coinsOptions.push({value: o, label: t('currency.' + o)})
+    })
+
+    const scrollRef = useRef(null);
+
+    const pageSizeHandler = (e) => {
+        setQuery({
+            ...query,
+            limit: e.value,
+            offset: 0
+        })
+    }
+
+    const firstPage = () => {
+        setQuery({
+            ...query,
+            offset: 0
+        })
+    }
+    const nextPage = () => {
+        isFirst.current = false;
+        setQuery({
+            ...query,
+            offset: query.offset + query.limit
+        })
+    }
+    const prevPage = () => {
+        setQuery({
+            ...query,
+            offset: query.offset - query.limit
+        })
+    }
+    const startDateHandler = (dateRange) => {
+        if (dateRange.length === 2) {
+            setQuery({
+                ...query,
+                startTime: moment.unix(dateRange[0].toUnix()).startOf("day").valueOf(),
+                endTime: moment.unix(dateRange[1].toUnix()).endOf("day").valueOf()
+            })
+        }
+    }
+
+    const content = () => {
+        if (isLoading) return <div style={{height: "40vh"}}><Loading/></div>
+        if (error) return <div style={{height: "40vh"}}><Error/></div>
+        if (data?.length === 0) return <div style={{height: "40vh"}} className={`flex jc-center ai-center`}>{t("noTx")}</div>
+        else return <>
+            <TransactionHistoryTable txs={data} offset={query?.offset} />
+        </>
+    }
+
+    return (
+        <div className={`width-100 column ai-center jc-start height-100 px-3 py-1 ${classes.container}`}>
+            <div className={`width-100 border card-bg px-5 py-2 rounded-8 column jc-between ai-center`}>
+                <TextInput
+                    select={true}
+                    placeholder={t('TransactionHistory.coin')}
+                    options={coinsOptions}
+                    lead={t('TransactionHistory.coin')}
+                    type="select"
+                    value={{
+                        value: query?.coin,
+                        label:  query?.coin ? t('currency.'+ query?.coin) : t('all'),
+                    }}
+                    onchange={(e) => setQuery({...query, coin: e.value})}
+                    customClass={`width-100 my-1 ${classes.thisInput}`}
+                />
+                <TextInput
+                    select={true}
+                    placeholder={t('TransactionHistory.category')}
+                    options={categoryOptions}
+                    lead={t('TransactionHistory.category')}
+                    type="select"
+                    value={{
+                        value: query?.category,
+                        label: query?.category ? t('TransactionCategory.'+ query?.category) : t('all'),
+                    }}
+                    onchange={(e) => setQuery({...query, category: e.value})}
+                    customClass={`width-100 my-1 ${classes.thisInput}`}
+                />
+                <TextInput
+                    select={true}
+                    placeholder={t('TransactionHistory.size')}
+                    options={size?.map(s => {
+                        return {label: s, value: s}
+                    })}
+                    lead={t('TransactionHistory.size')}
+                    type="select"
+                    value={{
+                        value: query?.limit,
+                        label: query?.limit,
+                    }}
+                    onchange={pageSizeHandler}
+                    customClass={`width-100 my-1 ${classes.thisInput}`}
+                />
+                <TextInput
+                    datePicker={true}
+                    plugins={[
+                        <DatePanel />
+                    ]}
+                    lead={t('TransactionHistory.period')}
+                    type="input"
+                    onChange={startDateHandler}
+                    value={[query.startTime, query.endTime]}
+                    dateSeparator={" " + t('to') + " "}
+                    range
+                    customClass={`width-100 my-1 ${classes.thisInput}`}
+                />
+            </div>
+            <div className={`card-bg card-border width-100 my-3`} ref={scrollRef}>
+                <div className={`card-header-bg row jc-between ai-center px-5 py-3`}>
+                    <div className={`row jc-center ai-center`}>
+                        <h3 className={``}>{t("txHistory.title")}</h3>
+
+                    </div>
+
+                    <div className={`row mr-1 text-gray fs-0-8`}>
+                        <span className={`mx-05`}>{t("from")}</span>
+                        <span><Date date={query?.startTime}/></span>
+                        <span className={`mx-05`}>{t("until")}</span>
+                        <span><Date date={query?.endTime}/></span>
+                    </div>
+                </div>
+                <div>
+                    {content()}
+                </div>
+            </div>
+            <div className={`row jc-center ai-center width-100 pb-5`}>
+                <Button
+                    buttonClass={`${classes.thisButton} px-9`}
+                    buttonTitle={t('first')}
+                    disabled={pagination.page === 1}
+                    type="button"
+                    onClick={firstPage}
+                />
+                <Button
+                    buttonClass={`${classes.thisButton} px-9 mx-4`}
+                    buttonTitle={t('prev')}
+                    disabled={pagination.page === 1}
+                    type="button"
+                    onClick={prevPage}
+                />
+                <Button
+                    buttonClass={`${classes.thisButton} px-9`}
+                    buttonTitle={t('next')}
+                    disabled={pagination.isLastPage}
+                    type="button"
+                    onClick={nextPage}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default TransactionHistory;
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/TransactionHistory/TransactionHistory.module.css b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/TransactionHistory/TransactionHistory.module.css
new file mode 100644
index 0000000..e740109
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/TransactionHistory/TransactionHistory.module.css
@@ -0,0 +1,31 @@
+.thisInput :global(.lead) {
+    width: 30%;
+}
+.thisInput :global(.select) {
+    width: 70% !important;
+}
+
+.thisInput :global(.rmdp-container ) {
+    width: 70%;
+    height: 100%;
+}
+
+
+
+.thisButton {
+    background-color: var(--orange);
+    color: #000;
+}
+.disable:disabled,.button[disabled] {
+    border: 0.3vh solid var(--cardHeader);
+    background: var(--cardHeader);
+    color: var(--textColor);
+    cursor: not-allowed;
+}
+
+.thisButton:disabled,.button[disabled] {
+    border: 0.3vh solid var(--cardHeader);
+    background: var(--cardHeader);
+    color: var(--textColor);
+    cursor: not-allowed;
+}
\ No newline at end of file
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/TransactionHistory/components/TransactionHistoryTable/TransactionHistoryTable.js b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/TransactionHistory/components/TransactionHistoryTable/TransactionHistoryTable.js
new file mode 100644
index 0000000..7ae9894
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/TransactionHistory/components/TransactionHistoryTable/TransactionHistoryTable.js
@@ -0,0 +1,70 @@
+import React, {useState} from 'react';
+import classes from './TransactionHistoryTable.module.css'
+import {useTranslation} from "react-i18next";
+import Date from "../../../../../../../../../../components/Date/Date";
+import moment from "moment-jalaali";
+import {BN} from "../../../../../../../../../../utils/utils";
+import {images} from "../../../../../../../../../../assets/images";
+
+const TransactionHistoryTable = ({txs, offset}) => {
+
+    const [openItem, setOpenItem] = useState(null);
+    const {t} = useTranslation();
+
+    return  <div className={`${classes.striped} fs-0-9`}>
+        {txs.map((tr, index) => {
+            return (
+                <div key={index} className={`column px-5 py-1 ${classes.row}`}
+                     onClick={() => setOpenItem(openItem === index ? null : index)}
+                >
+                    <div className={`row jc-between ai-center my-1`}>
+                        <div className={`row jc-start ai-center`}>
+                            <span className={`fs-02 ${classes.circle} ml-1 flex jc-center ai-center`}>{index + offset + 1}</span>
+                            <span className={`mr-1`}><Date date={tr.date}/> , {moment(tr.date).format("HH:mm:ss")}</span>
+                        </div>
+                        <div className={`row jc-end ai-center`}>
+                            <span className={`ml-3`}>{t("TransactionHistory.coin")}:</span>
+                            <div className={`row jc-center ai-center`}>
+                                <span className={`ml-1`}>{t("currency." + tr.currency )}</span>
+                                <span className={`fs-0-8 mr-1`}> <img
+                                    className={`img-sm flex`}
+                                    src={images[tr.currency]}
+                                    alt={tr.currency}
+                                    title={tr.currency}
+                                /> </span>
+                            </div>
+                        </div>
+                    </div>
+                    <div className={`row jc-between ai-center my-1`}>
+                        <span className={`text-orange`}>{t('TransactionCategory.'+tr.category)}</span>
+                        <div className={`row jc-end ai-center`}>
+                            <span className={`ml-3`}>{t("volume")}:</span>
+                            <div className={`row`}>
+                                <span className={`fs-02`}>{new BN(tr?.amount).toFormat()}</span>
+                                <span className={`fs-0-8 mr-1`}></span>
+                            </div>
+                        </div>
+                    </div>
+                    <div style={{display: openItem === index ? "revert" : "none"}} className={`column`}>
+                        <div className={`row wrap jc-start ai-center width-100 my-1`}>
+                            {(tr?.category === "DEPOSIT" || tr?.category === "WITHDRAW") ? "----" :
+                                <>
+                                    <span> {t('TransactionCategory.'+tr.category)}</span>
+                                    <span className={`mr-1`}>{tr?.additionalData?.ask && t('sell')} {tr?.additionalData?.bid && t('buy')}</span>
+                                    <span className={`mr-1`}>{new BN(tr?.additionalData?.origQuantity).toFormat()}</span>
+                                    <span className={`mr-1`}>{t("currency." + tr?.additionalData?.pair?.leftSideName )}</span>
+                                    <span className={`mr-1`}>{t("withPrice")}</span>
+                                    <span className={`mr-1`}>{new BN(tr?.additionalData?.origPrice).toFormat()}</span>
+                                    <span className={`mr-1`}>{t("currency." + tr?.additionalData?.pair?.rightSideName )}</span>
+                                </>
+                            }
+                        </div>
+                    </div>
+                </div>
+
+            )}
+        )}
+    </div>
+};
+
+export default TransactionHistoryTable;
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/TransactionHistory/components/TransactionHistoryTable/TransactionHistoryTable.module.css b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/TransactionHistory/components/TransactionHistoryTable/TransactionHistoryTable.module.css
new file mode 100644
index 0000000..ff777ce
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Content/components/TransactionHistory/components/TransactionHistoryTable/TransactionHistoryTable.module.css
@@ -0,0 +1,13 @@
+.striped .row:nth-child(even) {
+    background-color: var(--tableRow);
+    -webkit-transition: background-color 0.4s;
+    -o-transition: background-color 0.4s;
+    transition: background-color 0.4s;
+}
+
+.circle {
+    width: 8vw;
+    height: 8vw;
+    border-radius: 100px;
+    background-color: var(--cardBorder);
+}
\ No newline at end of file
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Header/Header.js b/src/main/Mobile/Pages/UserPanel/Secttions/Header/Header.js
index 5880ac1..67ef08c 100644
--- a/src/main/Mobile/Pages/UserPanel/Secttions/Header/Header.js
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Header/Header.js
@@ -10,9 +10,13 @@ import {Route, Routes} from "react-router-dom";
 import ProtectedRoute from "../../../../../../components/ProtectedRoute/ProtectedRoute";
 import WalletHeader from "./components/WalletHeader/WalletHeader";
 import SettingsHeader from "./components/SettingsHeader/SettingsHeader";
+import {useTranslation} from "react-i18next";
+import TransactionHistoryHeader from "./components/TransactionHistoryHeader/TransactionHistoryHeader";
 
 
 const Header = () => {
+
+    const {t} = useTranslation();
     const dispatch = useDispatch();
 
     return (
@@ -28,6 +32,9 @@ const Header = () => {
                         <Route path={RoutesName.WalletRelative+"/:id/:path/*"} element={
                             <WalletHeader/>
                         }/>
+                        <Route path={RoutesName.TxHistoryRelative+"/*"} element={
+                            <TransactionHistoryHeader/>
+                        }/>
                         <Route path={RoutesName.SettingsRelative+"/*"} element={
                             <SettingsHeader/>
                         }/>
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Header/components/TransactionHistoryHeader/TransactionHistoryHeader.js b/src/main/Mobile/Pages/UserPanel/Secttions/Header/components/TransactionHistoryHeader/TransactionHistoryHeader.js
new file mode 100644
index 0000000..c6bc1cc
--- /dev/null
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Header/components/TransactionHistoryHeader/TransactionHistoryHeader.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import classes from './TransactionHistoryHeader.module.css';
+import {useTranslation} from "react-i18next";
+import {useDispatch} from "react-redux";
+import {useLocation} from "react-router-dom";
+import * as RoutesName from "../../../../../../Routes/routes";
+import {activeActionSheet} from "../../../../../../../../store/actions/global";
+import Icon from "../../../../../../../../components/Icon/Icon";
+
+const TransactionHistoryHeader = () => {
+
+    const {t} = useTranslation()
+    const dispatch = useDispatch();
+    const location = useLocation()
+
+    const clickHandler = () => {
+        if (!(location.pathname.includes(RoutesName.TxHistoryRelative)) ) {
+            dispatch(activeActionSheet({subMenu: true}))
+        }
+    }
+
+    return (
+        <>
+            <h3 className={`mr-2 text-orange`} onClick={() => clickHandler()}>
+                {t("txHistory.title")}
+            </h3>
+            <Icon iconName="icon-clock fs-20 flex"
+                  onClick={() => dispatch(activeActionSheet({menu: true}))}
+            />
+        </>
+    );
+};
+
+export default TransactionHistoryHeader;
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Header/components/TransactionHistoryHeader/TransactionHistoryHeader.module.css b/src/main/Mobile/Pages/UserPanel/Secttions/Header/components/TransactionHistoryHeader/TransactionHistoryHeader.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/Menu/Menu.js b/src/main/Mobile/Pages/UserPanel/Secttions/Menu/Menu.js
index a973ffe..e1f8226 100644
--- a/src/main/Mobile/Pages/UserPanel/Secttions/Menu/Menu.js
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/Menu/Menu.js
@@ -27,28 +27,37 @@ const Menu = () => {
             <NavLink
                 to={RoutesName.Overview}
                 onClick={onClickHandler}
-                className={`width-50 row jc-between ai-center py-1 ${location.pathname.includes("panel/market") ? classes.selected :""}`}
+                className={`width-70 row jc-between ai-center py-2 ${location.pathname.includes("panel/market") ? classes.selected :""}`}
             >
-                <Icon iconName="icon-market fs-20" customClass={`col-48 flex jc-end ai-center`}/>
-                <span className={`col-48 ai-start`}>{t("market.title")}</span>
+                <Icon iconName="icon-market fs-20" customClass={`col-35 flex jc-end ai-center`}/>
+                <span className={`col-60 ai-start`}>{t("market.title")}</span>
             </NavLink>
             <NavLink
                 to={RoutesName.Wallet}
                 className={({ isActive }) =>
-                    isActive ? `${classes.selected} width-50 row jc-between ai-center py-1` : "width-50 row jc-between ai-center py-1"
+                    isActive ? `${classes.selected} width-70 row jc-between ai-center py-2` : "width-70 row jc-between ai-center py-2"
                 }
             >
-                <Icon iconName="icon-safe fs-20" customClass={`col-48 flex jc-end ai-center`}/>
-                <span className={`col-48 ai-start`}>{t("wallet.title")}</span>
+                <Icon iconName="icon-safe fs-20" customClass={`col-35 flex jc-end ai-center`}/>
+                <span className={`col-60 ai-start`}>{t("wallet.title")}</span>
+            </NavLink>
+            <NavLink
+                to={RoutesName.TxHistory}
+                className={({ isActive }) =>
+                    isActive ? `${classes.selected} width-70 row jc-between ai-center py-2` : "width-70 row jc-between ai-center py-2"
+                }
+            >
+                <Icon iconName="icon-clock fs-20" customClass={`col-35 flex jc-end ai-center`}/>
+                <span className={`col-60 ai-start`}>{t("txHistory.title")}</span>
             </NavLink>
             <NavLink
                 to={RoutesName.Profile}
                 className={({ isActive }) =>
-                    isActive ? `${classes.selected} width-50 row jc-between ai-center py-1` : "width-50 row jc-between ai-center py-1"
+                    isActive ? `${classes.selected} width-70 row jc-between ai-center py-2` : "width-70 row jc-between ai-center py-2"
                 }
             >
-                <Icon iconName="icon-settings fs-20" customClass={`col-48 flex jc-end ai-center`}/>
-                <span className={`col-48 ai-start`}>{t("settings.title")}</span>
+                <Icon iconName="icon-settings fs-20" customClass={`col-35 flex jc-end ai-center`}/>
+                <span className={`col-60 ai-start`}>{t("settings.title")}</span>
             </NavLink>
         </div>
     );
diff --git a/src/main/Mobile/Pages/UserPanel/Secttions/SubHeader/SubHeader.js b/src/main/Mobile/Pages/UserPanel/Secttions/SubHeader/SubHeader.js
index 441bd5d..1a5bd73 100644
--- a/src/main/Mobile/Pages/UserPanel/Secttions/SubHeader/SubHeader.js
+++ b/src/main/Mobile/Pages/UserPanel/Secttions/SubHeader/SubHeader.js
@@ -13,9 +13,8 @@ const SubHeader = (props) => {
     const [expand, setExpand] = useState(false)
     const location = useLocation()
 
-
     const clickHandler = () => {
-        if (!(location.pathname.includes(RoutesName.SettingsRelative)) ) {
+        if (!(location.pathname.includes(RoutesName.SettingsRelative) || RoutesName.TxHistoryRelative) ) {
             setExpand(true)
         }
     }
diff --git a/src/main/Mobile/Routes/routes.js b/src/main/Mobile/Routes/routes.js
index 7f0b1dd..0e42662 100644
--- a/src/main/Mobile/Routes/routes.js
+++ b/src/main/Mobile/Routes/routes.js
@@ -9,11 +9,12 @@ export const Guide = "/guide";
 export const Rules = "/rules";
 export const ContactUs = "/contact-us";
 
-
 export const User = "/user";
 export const UserVerifyRelative = "verify";
 export const UserForgetPasswordRelative = "forget-password";
 
+export const TxHistory = "/panel/transaction-history";
+export const TxHistoryRelative = "/transaction-history";
 
 export const Panel = "/panel";
 export const Market = "/panel/market";
diff --git a/src/queries/hooks/useTransactionHistory.js b/src/queries/hooks/useTransactionHistory.js
new file mode 100644
index 0000000..ca61f46
--- /dev/null
+++ b/src/queries/hooks/useTransactionHistory.js
@@ -0,0 +1,23 @@
+import {useQuery} from "@tanstack/react-query";
+import axios from "axios";
+
+export const useTransactionHistory = (user_id, query) => {
+
+    return useQuery(
+        ['allTxHistory', user_id, query.coin, query.category, query.endTime, query.startTime, query.limit, query.offset],
+        () => getWithdrawTxsFunc(user_id, query),
+        {
+            retry: 1,
+            staleTime: 5000,
+            refetchInterval: 10000,
+        });
+}
+
+const getWithdrawTxsFunc = async (user_id, query) => {
+    const {data} = await getTransactionHistory(user_id, query)
+    return data;
+}
+
+const getTransactionHistory = (user_id, query) => {
+    return axios.post(`/wallet/transaction/${user_id}`, query)
+}
diff --git a/src/queries/index.js b/src/queries/index.js
index 6af9537..b41a7cc 100644
--- a/src/queries/index.js
+++ b/src/queries/index.js
@@ -21,4 +21,5 @@ export {useGetUserOtpStatus} from "./hooks/useGetUserOtpStatus";
 export {useGetKycStatus} from "./hooks/useGetKycStatus";
 export {useGetFeeForSymbol} from "./hooks/useGetFeeForSymbol";
 export {useGetUserAssets} from "./hooks/useGetUserAssets";
-export {useGetUserAssetsEstimatedValue} from "./hooks/useGetUserAssetsEstimatedValue";
\ No newline at end of file
+export {useGetUserAssetsEstimatedValue} from "./hooks/useGetUserAssetsEstimatedValue";
+export {useTransactionHistory} from "./hooks/useTransactionHistory";
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 34df1e4..1b9d94a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10148,6 +10148,7 @@ __metadata:
     react-dropzone: ^11.3.1
     react-hot-toast: ^2.4.1
     react-i18next: ^12.2.2
+    react-multi-date-picker: ^4.3.1
     react-number-format: ^4.9.3
     react-qr-code: ^2.0.11
     react-redux: ^8.0.5
@@ -11525,6 +11526,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-date-object@npm:^2.1.5":
+  version: 2.1.7
+  resolution: "react-date-object@npm:2.1.7"
+  checksum: f8e16484a16a56251697b52cb6c78c2aaa89ba33694c5f2032a967a68b70446cdb6ff9f4357e6e2a7ad50d48f1518f7b1b49ed7ca111542a8a32902c080a3c8a
+  languageName: node
+  linkType: hard
+
 "react-dev-utils@npm:^12.0.1":
   version: 12.0.1
   resolution: "react-dev-utils@npm:12.0.1"
@@ -11594,6 +11602,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-element-popper@npm:^2.1.6":
+  version: 2.1.6
+  resolution: "react-element-popper@npm:2.1.6"
+  peerDependencies:
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: 0140c2f78ea5b4ef92d2711ca66d96513403ffab62063cd3bdfee662d5424ceaf50f08a74da3a5e370b3160b1e345d144afa834f90bea5e06fa23c1682660ac4
+  languageName: node
+  linkType: hard
+
 "react-error-overlay@npm:^6.0.11":
   version: 6.0.11
   resolution: "react-error-overlay@npm:6.0.11"
@@ -11652,6 +11670,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-multi-date-picker@npm:^4.3.1":
+  version: 4.3.1
+  resolution: "react-multi-date-picker@npm:4.3.1"
+  dependencies:
+    react-date-object: ^2.1.5
+    react-element-popper: ^2.1.6
+  peerDependencies:
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: 1b8352c355dd68be256f503cf02ab1ac059b8479a1bccea1ddfe180e93a028421ad9989bccac58798b2cddf985828f53fe7535e44a395b4c31143886de2c14e0
+  languageName: node
+  linkType: hard
+
 "react-number-format@npm:^4.9.3":
   version: 4.9.4
   resolution: "react-number-format@npm:4.9.4"