diff --git a/public/assets/locales/en/translation.json b/public/assets/locales/en/translation.json
index 337d0789..ae4efc8a 100644
--- a/public/assets/locales/en/translation.json
+++ b/public/assets/locales/en/translation.json
@@ -227,13 +227,13 @@
     "tradedAmount": "Traded",
     "avgTradedAmount": "Avg Traded Amount",
     "tradedPrice": "Traded Price",
-    "aliveOrder": "Live",
+    "liveOrders": "Live Orders",
+    "orderHistory": "Order History",
+    "tradeHistory": "Trade History",
     "stoppedOrder": "Stopped",
-    "orderHistory": "History",
     "stopOrderTime": "Stop Order Time",
     "startOrderTime": "Start Order Time",
     "cancelOrder": "Cancel Order",
-    "orders": "Orders",
     "cancelSuccess": "Order successfully canceled!",
     "cancelError": "Order not canceled"
   },
@@ -245,6 +245,21 @@
     "showZeroBalance": "Do not show zero balance.",
     "estimateAlert": "The equivalent amount is calculated based on the highest buy offer"
   },
+  "history": {
+    "title": "History",
+    "transactions": "Transactions",
+    "transactionsHistory": "Transactions History",
+    "deposit": "Deposit",
+    "withdraw": "Withdraw",
+    "balance": "Balance",
+    "balanceChange": "Balance Change",
+    "currency" : "Currency",
+    "category" : "Category",
+    "size" : "Size",
+    "period" : "Period",
+    "ascendingByTime" : "Ascending By Time",
+    "page": "Page {{page}}"
+  },
   "TransactionHistory": {
     "buyAndSell" : "Buy And Sell",
     "buyAndSellTx" : "Buy And Sell History",
@@ -270,10 +285,12 @@
     "ascendingByTime" : "Ascending By Time"
   },
   "TransactionCategory": {
-    "DEPOSIT": "Deposit",
-    "FEE": "Fee",
-    "TRADE": "Trade",
-    "WITHDRAW": "Withdraw",
+    "TRADE" : "Trade",
+    "FEE" : "Fee",
+    "DEPOSIT" : "Deposit",
+    "WITHDRAW" : "Withdraw",
+    "SYSTEM" : "System",
+
     "WITHDRAW_REQUEST" : "Withdraw Request",
     "WITHDRAW_ACCEPT" : "Withdraw Accept",
     "WITHDRAW_REJECT" : "Withdraw Reject",
diff --git a/public/assets/locales/fa/translation.json b/public/assets/locales/fa/translation.json
index 801deefb..29ac1950 100644
--- a/public/assets/locales/fa/translation.json
+++ b/public/assets/locales/fa/translation.json
@@ -227,13 +227,13 @@
     "tradedAmount": "مقدار معامله شده",
     "avgTradedAmount": "میانگین قیمت معامله",
     "tradedPrice": "مبلغ معامله شده",
-    "aliveOrder": "سفارش‌های جاری",
-    "stoppedOrder": "متوقف",
+    "liveOrders": "سفارش‌های جاری",
     "orderHistory": "تاریخچه سفارش‌ها",
+    "tradeHistory": " تاریخچه معامله‌ها",
+    "stoppedOrder": "متوقف",
     "stopOrderTime": "زمان آخرین معامله",
     "startOrderTime": "زمان ثبت سفارش",
     "cancelOrder": "لغو سفارش",
-    "orders": "معامله‌ها",
     "cancelSuccess": "سفارش با موفقیت لغو شد!",
     "cancelError": "خطا در لغو سفارش"
   },
@@ -245,6 +245,21 @@
     "showZeroBalance": "عدم نمایش موجودی صفر",
     "estimateAlert": "مبلغ دارایی معادل براساس بالاترین پیشنهاد خرید محاسبه شده"
   },
+  "history": {
+    "title": "تاریخچه",
+    "transactions": "تراکنش ها",
+    "transactionsHistory": "تاریخچه تراکنش ها",
+    "deposit": "واریز",
+    "withdraw": "برداشت",
+    "balance": "موجودی",
+    "balanceChange": "تغییر موجودی",
+    "currency" : "ارز",
+    "category" : "نوع تراکنش",
+    "size" : "تعداد",
+    "period" : "بازه زمانی",
+    "ascendingByTime" : "نمایش براساس جدیدترین",
+    "page": "صفحه {{page}}"
+  },
   "TransactionHistory": {
     "buyAndSell" : "خرید و فروش",
     "buyAndSellTx" : "تاریخچه خرید و فروش",
@@ -270,10 +285,12 @@
     "ascendingByTime" : "نمایش براساس جدیدترین"
   },
   "TransactionCategory": {
-    "DEPOSIT" : "واریز",
-    "FEE" : "کارمزد",
     "TRADE" : "معامله",
+    "FEE" : "کارمزد",
+    "DEPOSIT" : "واریز",
     "WITHDRAW" : "برداشت",
+    "SYSTEM" : "سیستم",
+
     "WITHDRAW_REQUEST" : "درخواست برداشت",
     "WITHDRAW_ACCEPT" : "برداشت موفق",
     "WITHDRAW_REJECT" : "رد درخواست برداشت",
diff --git a/src/components/Layout/LayoutHeader/LayoutHeader.js b/src/components/Layout/LayoutHeader/LayoutHeader.js
index fb122cb4..40f5d0f5 100644
--- a/src/components/Layout/LayoutHeader/LayoutHeader.js
+++ b/src/components/Layout/LayoutHeader/LayoutHeader.js
@@ -53,7 +53,6 @@ const LayoutHeader = () => {
         });*/
     }
 
-
     const logOutHandler = async () => {
         logout().then(() => {
             toast.success(t("header.logOutSuccess"))
@@ -63,7 +62,6 @@ const LayoutHeader = () => {
         })
     }
 
-
     const menu = (
         <Menu
             style={{
@@ -75,7 +73,7 @@ const LayoutHeader = () => {
             onDeselect={()=>saveSelected()}
         >
 
-            <div className={`${classes.dropBox} column jc-center ai-center py-3  width-92 m-auto`}>
+            <div className={`${classes.dropBox} width-92 column jc-center ai-center py-3 m-auto`}>
                 <Icon
                     iconName={`text-white flex`}
                     customClass={`${classes.icon}  icon-user-circle-o flex mb-1`}
@@ -85,7 +83,8 @@ const LayoutHeader = () => {
                 </p>
             </div>
 
-            <div className={`my-3 px-1 menuItem cursor-pointer hover-text fs-0-8`} onClick={()=>navigate(RoutesName.Transactions)}>{t("txHistory.title")}</div>
+            <div className={`my-3 px-1 menuItem cursor-pointer hover-text fs-0-8`} onClick={()=>navigate(RoutesName.Wallet)}>{t("wallet.title")}</div>
+            <div className={`my-3 px-1 menuItem cursor-pointer hover-text fs-0-8`} onClick={()=>navigate(RoutesName.History)}>{t("history.title")}</div>
             <div className={`my-3 px-1 menuItem cursor-pointer hover-text fs-0-8`} onClick={()=>navigate(RoutesName.Settings)}>{t("settings.title")}</div>
             <div className={`my-3 px-1 menuItem cursor-pointer hover-text fs-0-8 text-red`} onClick={logOutHandler}>{t("signOut")}</div>
         </Menu>
diff --git a/src/components/TextInput/TextInput.js b/src/components/TextInput/TextInput.js
index 83dddf61..5cca9b97 100644
--- a/src/components/TextInput/TextInput.js
+++ b/src/components/TextInput/TextInput.js
@@ -71,7 +71,7 @@ const TextInput = (props) => {
         readOnly={readOnly}
         onChange={onchange}
         max={max}
-        className={`${classes.input}`}
+        className={`${classes.input} input`}
         style={{direction: ltr && 'ltr'}}
         {...other}
     />
diff --git a/src/main/Browser/Pages/Landing/components/MarketTitle/MarketTitle.js b/src/main/Browser/Pages/Landing/components/MarketTitle/MarketTitle.js
index 4be96886..988ff984 100644
--- a/src/main/Browser/Pages/Landing/components/MarketTitle/MarketTitle.js
+++ b/src/main/Browser/Pages/Landing/components/MarketTitle/MarketTitle.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import classes from './MarketTitle.module.css'
 import {useTranslation} from "react-i18next";
-import {Panel} from "../../../../Routes/routes";
+import {EasyTrading, Panel} from "../../../../Routes/routes";
 import {Link} from "react-router-dom";
 import Icon from "../../../../../../components/Icon/Icon";
 import Button from "../../../../../../components/Button/Button";
@@ -10,6 +10,8 @@ const MarketTitle = () => {
 
     const {t} = useTranslation();
 
+    const isDevelopment = window.env.REACT_APP_ENV === "development";
+
     const buttonTitle = <Icon iconName="icon-op-02 flex fs-04" customClass={`flex jc-center ai-center py-1`}/>
 
     return (
@@ -18,37 +20,25 @@ const MarketTitle = () => {
                 <span className={`text-orange fs-02`}>{t("title")}</span> {t("MarketTitle.content")}
             </p>
             <div className={`column`}>
-                {/*<div className={`row jc-start ai-center mb-1`}>
-                    <span className={`${classes.arrow} ml-05`}></span>
-                    <Link to={"#"} className={`mr-05 cursor-pointer hover-text hover-scale-01`}>{t("MarketTitle.easyTrading")}</Link>
-                </div>*/}
-                <div className={`row jc-start ai-center mt-1 ${classes.flashit}`}>
+                <div className={`row jc-start ai-center my-1 ${classes.flashit}`}>
                     <span className={`${classes.arrow} ml-05`}></span>
                     <Link to={Panel} className={`mr-05 cursor-pointer hover-text hover-scale-01`}>{t("MarketTitle.advancedTrading")}</Link>
                 </div>
-                {/*<Button
-                    buttonClass={`${classes.marketButton} ${classes.easyTradingButton} my-1`}
-                    type="button"
-                    onClick={() => navigate("", { replace: true })}
-                    buttonTitle={t("MarketTitle.easyTrading")}
-                />
-                <Button
-                    buttonClass={`${classes.marketButton} ${classes.advancedTradingButton} my-1`}
-                    type="button"
-                    onClick={() => navigate(Panel, { replace: true })}
-                    buttonTitle={t("MarketTitle.advancedTrading")}
-                />*/}
+                <div className={`row jc-start ai-center my-1`}>
+                    <span className={`${classes.arrow} ml-05`}></span>
+                    <Link to={EasyTrading} className={`mr-05 cursor-pointer hover-text hover-scale-01`}>{t("MarketTitle.easyTrading")}</Link>
+                </div>
             </div>
-            <div className={`row jc-start ai-center`}>
+            { isDevelopment && <div className={`row jc-start ai-center`}>
                 <Button
                     buttonClass={`${classes.thisButton} hover-text`}
                     type="button"
                     onClick={() => window.open(`https://github.com/opexdev`)}
                     buttonTitle={buttonTitle}
                 />
-            </div>
+            </div>}
         </div>
     );
 };
 
-export default MarketTitle;
+export default MarketTitle;
\ No newline at end of file
diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/Content.js b/src/main/Browser/Pages/UserPanel/Sections/Content/Content.js
index decaa2eb..57a27cdf 100644
--- a/src/main/Browser/Pages/UserPanel/Sections/Content/Content.js
+++ b/src/main/Browser/Pages/UserPanel/Sections/Content/Content.js
@@ -10,6 +10,8 @@ import Settings from "./components/Settings/Settings";
 import {useSelector} from "react-redux";
 import TechnicalChart from "./components/TechnicalChart/TechnicalChart";
 import Transactions from "./components/Transactions/Transactions";
+import {HistoryRelative} from "../../../../Routes/routes";
+import History from "./components/History/History";
 
 const Content = () => {
 
@@ -25,6 +27,7 @@ const Content = () => {
                     <Route path={RoutesName.SettingsRelative+"/*"} element={<Settings/>}/>
                     <Route path={RoutesName.TechnicalRelative} element={<TechnicalChart/>}/>
                     <Route path={RoutesName.TransactionsRelative} element={<Transactions/>}/>
+                    <Route path={RoutesName.HistoryRelative} element={<History/>}/>
                 </Route>
                 <Route
                     path={RoutesName.WalletRelative}
diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/History.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/History.js
new file mode 100644
index 00000000..4006d9f5
--- /dev/null
+++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/History.js
@@ -0,0 +1,39 @@
+import React, {useState} from 'react';
+import classes from './History.module.css';
+import {useTranslation} from "react-i18next";
+import Transactions from "./components/Transactions/Transactions";
+import DepositHistory from "../Transactions/components/DepositHistory/DepositHistory";
+import WithdrawHistory from "../Transactions/components/WithdrawHistory/WithdrawHistory";
+
+
+const History = () => {
+
+    const {t} = useTranslation();
+
+    const [activeTx, setActiveTx] = useState("transactions")
+
+    const content = () => {
+        if (activeTx === "transactions") return <Transactions/>
+        if (activeTx === "deposit") return <DepositHistory/>
+        if (activeTx === "withdraw") return <WithdrawHistory/>
+    }
+
+    return (
+        <>
+            <div className={`column px-1 pt-1`}>
+                <div className={`width-100 border card-bg px-2 py-2 rounded-8 column jc-start ai-center`}>
+                    <div className={`row jc-start ai-center width-100 ${classes.header}`}>
+                        <span className={`ml-1 px-2 py-1 rounded-5 cursor-pointer hover-text ${classes.title} ${activeTx === "transactions" && classes.active}`} onClick={()=>setActiveTx("transactions")}>{t("history.transactions")}</span>
+                        <span className={`ml-1 px-2 py-1 rounded-5 cursor-pointer hover-text ${classes.title} ${activeTx === "deposit" && classes.active}`} onClick={()=>setActiveTx("deposit")}>{t("history.deposit")}</span>
+                        <span className={`ml-1 px-2 py-1 rounded-5 cursor-pointer hover-text ${classes.title} ${activeTx === "withdraw" && classes.active}`} onClick={()=>setActiveTx("withdraw")}>{t("history.withdraw")}</span>
+                    </div>
+                    <div className={`${classes.content} width-100`}>
+                        {content()}
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default History;
diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/History.module.css b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/History.module.css
new file mode 100644
index 00000000..768e1319
--- /dev/null
+++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/History.module.css
@@ -0,0 +1,46 @@
+.thisInput :global(.lead) {
+    width: 30%;
+}
+.thisInput :global(.selectExternalClass) {
+    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;
+}
+
+
+
+.header {
+    height: 10vh;
+}
+
+/*.title {
+    background-color: var(--cardBodyAlpha);
+}*/
+
+.active {
+    background-color: var(--activeTitle);
+    color: var(--activeTab);
+}
\ No newline at end of file
diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/DepositHistory/DepositHistory.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/DepositHistory/DepositHistory.js
new file mode 100644
index 00000000..09ddbe81
--- /dev/null
+++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/DepositHistory/DepositHistory.js
@@ -0,0 +1,280 @@
+import React, {useEffect, useRef, useState} from 'react';
+import {useTranslation} from "react-i18next";
+import {useSelector} from "react-redux";
+import {useGetDepositHistory} from "../../../../../../../../../../queries";
+import moment from "moment-jalaali";
+import Loading from "../../../../../../../../../../components/Loading/Loading";
+import Error from "../../../../../../../../../../components/Error/Error";
+import WithdrawHistoryTable from "../WithdrawHistoryTable/WithdrawHistoryTable";
+import Date from "../../../../../../../../../../components/Date/Date";
+import TextInput from "../../../../../../../../../../components/TextInput/TextInput";
+import classes from "./DepositHistory.module.css";
+import DatePanel from "react-multi-date-picker/plugins/date_panel";
+import i18n from "i18next";
+import ToggleSwitch from "../../../../../../../../../../components/ToggleSwitch/ToggleSwitch";
+import Button from "../../../../../../../../../../components/Button/Button";
+import DepositHistoryTable from "../DepositHistoryTable/DepositHistoryTable";
+
+
+const DepositHistory = () => {
+
+    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": null,
+        "endTime": null,
+        "ascendingByTime": false,
+        "limit": 10,
+        "offset": 0
+    });
+
+    const {data, isLoading, error, refetch} = useGetDepositHistory(user_id, query);
+
+    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) => {
+        const start = dateRange[0]  ? moment.unix(dateRange[0].toUnix()).startOf("day").valueOf() : null;
+        const end = dateRange[1]  ? moment.unix(dateRange[1].toUnix()).endOf("day").valueOf() : null;
+        setQuery({
+            ...query,
+            startTime: start,
+            endTime: end
+        })
+    }
+
+
+    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 <>
+            <DepositHistoryTable txs={data} offset={query?.offset} />
+        </>
+    }
+
+    const periodTextHandler = () => {
+        if (query?.startTime && query?.endTime) return <>
+            <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>
+        </>
+        if (query?.startTime) return <>
+            <span className={`mx-05`}>{t("from")}</span>
+            <span><Date date={query?.startTime}/></span>
+            <span className={`mx-05`}>{t("until")}</span>
+            <span><Date date={moment().endOf("day").valueOf()}/></span>
+        </>
+    }
+
+
+    return (
+        <div className={`width-100 column my-3`} ref={scrollRef}>
+
+            <div className={`width-100 row 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, offset:0})}
+                    customClass={`width-24 ${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, offset:0})}
+                    customClass={`width-24 ${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-30 ${classes.thisInput}`}
+                />
+
+                <TextInput
+                    datePicker={true}
+                    //placeholder={t('TransactionHistory.size')}
+                    //numberOfMonths={2}
+                    plugins={[
+                        <DatePanel />
+                    ]}
+                    lead={t('TransactionHistory.period')}
+                    type="input"
+                    onChange={startDateHandler}
+                    /*value={[query.startTime, query.endTime]}*/
+                    value={[query.startTime, query.endTime]}
+                    dateSeparator={" " + t('to') + " "}
+                    range
+                    hideOnScroll
+                    dataPanelPosition="Bottom"
+                    position={`${i18n.language === "fa" ? "bottom-left" : "bottom-right" }`}
+                    customClass={`width-30 ${classes.thisInput}`}
+                />
+
+                <div className={`width-30 row jc-end ai-center fs-0-8`}>
+                    <span className={`fs-0-8 ml-1`}>{t("TransactionHistory.ascendingByTime")}</span>
+                    <ToggleSwitch
+
+                        onchange={ () => setQuery(prevState => {return {
+                            ...prevState,
+                            ascendingByTime: !prevState.ascendingByTime
+                        }}) }
+
+                        /*onchange={()=> setQuery({
+                            ...query,
+                            ascendingByTime: (prevState => !prevState)}
+                        )}*/
+                        checked={!query?.ascendingByTime}/>
+                </div>
+
+            </div>
+
+            <div className={`card-bg card-border width-100 my-4`} >
+                <div className={`card-header-bg row jc-between ai-center px-2 py-5`}>
+                    <div className={`row jc-center ai-center`}>
+                        <h3 className={``}>{t("TransactionHistory.depositTx")}</h3>
+                        <div className={`row mr-1 text-gray`}>
+                            {periodTextHandler()}
+                        </div>
+                    </div>
+
+                    <div className={`row jc-start ai-center `}>
+                        <Button
+                            buttonClass={`${classes.thisButton} px-2`}
+                            buttonTitle={t('first')}
+                            disabled={pagination.page === 1}
+                            type="button"
+                            onClick={firstPage}
+                        />
+                        <Button
+                            buttonClass={`${classes.thisButton} px-2 mx-2`}
+                            buttonTitle={t('prev')}
+                            disabled={pagination.page === 1}
+                            type="button"
+                            onClick={prevPage}
+                        />
+                        <Button
+                            buttonClass={`${classes.thisButton} px-2`}
+                            buttonTitle={t('next')}
+                            disabled={pagination.isLastPage}
+                            type="button"
+                            onClick={nextPage}
+                        />
+                    </div>
+
+                </div>
+                <div>
+                    {content()}
+                </div>
+                <div className={`row jc-start ai-center width-100 mb-5 width-100 border card-bg px-2 py-3 rounded-8`}>
+                    <Button
+                        buttonClass={`${classes.thisButton} px-2`}
+                        buttonTitle={t('first')}
+                        disabled={pagination.page === 1}
+                        type="button"
+                        onClick={firstPage}
+                    />
+                    <Button
+                        buttonClass={`${classes.thisButton} px-2 mx-2`}
+                        buttonTitle={t('prev')}
+                        disabled={pagination.page === 1}
+                        type="button"
+                        onClick={prevPage}
+                    />
+                    <Button
+                        buttonClass={`${classes.thisButton} px-2`}
+                        buttonTitle={t('next')}
+                        disabled={pagination.isLastPage}
+                        type="button"
+                        onClick={nextPage}
+                    />
+                </div>
+
+            </div>
+
+        </div>
+    );
+};
+
+export default DepositHistory;
diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/DepositHistory/DepositHistory.module.css b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/DepositHistory/DepositHistory.module.css
new file mode 100644
index 00000000..7579db6f
--- /dev/null
+++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/DepositHistory/DepositHistory.module.css
@@ -0,0 +1,17 @@
+.thisButton {
+    background-color: var(--orange);
+    color: #000;
+}
+.disable:disabled,.button[disabled] {
+    border: 0.3vh solid var(--cardBodyAlpha);
+    background: var(--cardBodyAlpha);
+    color: var(--textColor);
+    cursor: not-allowed;
+}
+
+.thisButton:disabled,.button[disabled] {
+    border: 0.3vh solid var(--cardBodyAlpha);
+    background: var(--cardBodyAlpha);
+    color: var(--textColor);
+    cursor: not-allowed;
+}
\ No newline at end of file
diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/DepositHistoryTable/DepositHistoryTable.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/DepositHistoryTable/DepositHistoryTable.js
new file mode 100644
index 00000000..ebe88ec9
--- /dev/null
+++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/DepositHistoryTable/DepositHistoryTable.js
@@ -0,0 +1,99 @@
+import React from 'react';
+import classes from './DepositHistoryTable.module.css'
+import {useTranslation} from "react-i18next";
+import {useSelector} from "react-redux";
+import Date from "../../../../../../../../../../components/Date/Date";
+import moment from "moment-jalaali";
+import {BN} from "../../../../../../../../../../utils/utils";
+
+const DepositHistoryTable = ({txs, offset}) => {
+
+    const {t} = useTranslation();
+
+    const id = useSelector(state => state.auth.id);
+
+    let head = (
+        <div className="row text-gray px-2 py-2" style={{backgroundColor:"var(--tableHeader)"}}>
+            <span className="width-6 flex jc-start ai-center">{t("row")}</span>
+            <span className="width-9 flex jc-start ai-center">{t("date")}</span>
+            <span className="width-9 flex  jc-start ai-center">{t("time")}</span>
+            <span className="width-11 flex jc-start ai-center">{t("TransactionHistory.category")}</span>
+            <span className="width-15 flex jc-start ai-center">{t("TransactionHistory.coin")}</span>
+            <span className="width-13 flex jc-start ai-center">{t("DepositWithdraw.network")}</span>
+            <span className="width-11 flex jc-start ai-center">{t("volume")}</span>
+            <span className="width-13 flex jc-start ai-center">{t("status")}</span>
+            <span className="width-11 flex jc-end ai-center">{t("TransactionHistory.txType")}</span>
+
+        </div>
+    );
+    let body = (
+        <>
+            {txs.map((tr, index) => {
+
+                const isMaker = tr?.additionalData?.makerUuid === id
+                const isTaker = tr?.additionalData?.takerUuid === id
+
+                const isSelfTrade = (((tr?.additionalData?.takerDirection === "ASK") || ( tr?.additionalData?.makerDirection === "BID")) && isTaker && isMaker)
+
+                return (
+
+                    <div className={`column ${classes.striped}`} key={index}>
+
+                        <div className={`${classes.row} row rounded-5 border-bottom px-2 py-2`} key={index}>
+                            <span className="width-6 row jc-start ai-center">
+                                {index + offset + 1}
+                            </span>
+                            <span className="width-9 row jc-start ai-center">
+                                <Date date={tr.createDate}/>
+                            </span>
+                            <span className="width-9 row jc-start ai-center">
+                                {moment(tr.createDate).format("HH:mm:ss")}
+                            </span>
+                            <span className="width-11 row jc-start ai-center">
+                                <span className={`text-green`}>{ t("TransactionCategory.DEPOSIT")}</span>
+                            </span>
+
+                            <span className="width-15 row jc-start ai-center">
+                                {t("currency." + tr.currency )}
+                            </span>
+
+                            <span className="width-13 row jc-start ai-center">
+                                {tr.network}
+                            </span>
+
+
+                            <span className="width-11 row jc-start ai-center">
+                                {new BN(tr?.amount).toFormat()}
+                            </span>
+
+                            <span className="width-13 row jc-start ai-center">
+                                {t("orderStatus.DONE")}
+                            </span>
+                            <span className="width-11 row jc-end ai-center">
+                                {tr.depositType}
+                            </span>
+
+
+
+
+
+                        </div>
+
+                    </div>
+
+
+
+                )
+            })}
+        </>
+    );
+
+    return (
+        <>
+            {head}
+            {body}
+        </>
+    );
+};
+
+export default DepositHistoryTable;
diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/DepositHistoryTable/DepositHistoryTable.module.css b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/DepositHistoryTable/DepositHistoryTable.module.css
new file mode 100644
index 00000000..c6570126
--- /dev/null
+++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/DepositHistoryTable/DepositHistoryTable.module.css
@@ -0,0 +1,6 @@
+.striped:nth-child(even) {
+    background-color: var(--tableRow);
+    -webkit-transition: background-color 0.4s;
+    -o-transition: background-color 0.4s;
+    transition: background-color 0.4s;
+}
\ No newline at end of file
diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/Transactions/Transactions.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/Transactions/Transactions.js
new file mode 100644
index 00000000..933d0064
--- /dev/null
+++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/Transactions/Transactions.js
@@ -0,0 +1,270 @@
+import React, {useEffect, useRef, useState} from 'react';
+import {Trans, useTranslation} from "react-i18next";
+import {useSelector} from "react-redux";
+import moment from "moment-jalaali";
+import Loading from "../../../../../../../../../../components/Loading/Loading";
+import Error from "../../../../../../../../../../components/Error/Error";
+import Date from "../../../../../../../../../../components/Date/Date";
+import TextInput from "../../../../../../../../../../components/TextInput/TextInput";
+import classes from "./Transactions.module.css";
+import DatePanel from "react-multi-date-picker/plugins/date_panel";
+import i18n from "i18next";
+import ToggleSwitch from "../../../../../../../../../../components/ToggleSwitch/ToggleSwitch";
+import Button from "../../../../../../../../../../components/Button/Button";
+import TransactionsTable from "../TransactionsTable/TransactionsTable";
+import {useGetTransactionsHistory} from "../../../../../../../../../../queries";
+
+const Transactions = () => {
+
+    const {t} = useTranslation();
+    const coins = useSelector((state) => state.exchange.assets)
+
+    const [query, setQuery] = useState({
+        "currency": null, // optional
+        "category": null, // optional [DEPOSIT, FEE, TRADE, WITHDRAW, ORDER_CANCEL, ORDER_CREATE, ORDER_FINALIZED]
+        "startTime": null,
+        "endTime": null,
+        "ascendingByTime": false,
+        "limit": 10,
+        "offset": 0
+    });
+
+    const {data, isLoading, error, refetch} = useGetTransactionsHistory(query);
+
+    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 = ['TRADE', 'DEPOSIT', 'WITHDRAW', 'FEE', 'SYSTEM'];
+
+    const currenciesOptions = [{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) => {
+        currenciesOptions.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) => {
+        const start = dateRange[0]  ? moment.unix(dateRange[0].toUnix()).startOf("day").valueOf() : null;
+        const end = dateRange[1]  ? moment.unix(dateRange[1].toUnix()).endOf("day").valueOf() : null;
+        setQuery({
+            ...query,
+            startTime: start,
+            endTime: end
+        })
+    }
+
+    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 <>
+            <TransactionsTable txs={data} offset={query?.offset} />
+        </>
+    }
+
+    const periodTextHandler = () => {
+        if (query?.startTime && query?.endTime) return <>
+            <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>
+        </>
+        if (query?.startTime) return <>
+            <span className={`mx-05`}>{t("from")}</span>
+            <span><Date date={query?.startTime}/></span>
+            <span className={`mx-05`}>{t("until")}</span>
+            <span><Date date={moment().endOf("day").valueOf()}/></span>
+        </>
+    }
+
+
+    return (
+        <div className={`width-100 column my-3`} ref={scrollRef}>
+            <div className={`width-100 row jc-between ai-center wrap fs-0-9`}>
+                <TextInput
+                    select={true}
+                    placeholder={t('history.currency')}
+                    options={currenciesOptions}
+                    lead={t('history.currency')}
+                    type="select"
+                    value={{
+                        value: query?.currency,
+                        label:  query?.currency ? t('currency.'+ query?.currency) : t('all'),
+                    }}
+                    onchange={(e) => setQuery({...query, currency: e.value, offset:0})}
+                    customClass={`width-20 ${classes.thisInput}`}
+                />
+                <TextInput
+                    select={true}
+                    placeholder={t('history.category')}
+                    options={categoryOptions}
+                    lead={t('history.category')}
+                    type="select"
+                    value={{
+                        value: query?.category,
+                        label: query?.category ? t('TransactionCategory.'+ query?.category) : t('all'),
+                    }}
+                    onchange={(e) => setQuery({...query, category: e.value, offset:0})}
+                    customClass={`width-20 ${classes.thisInput}`}
+                />
+                <TextInput
+                    select={true}
+                    placeholder={t('history.size')}
+                    options={size?.map(s => {
+                        return {label: s, value: s}
+                    })}
+                    lead={t('history.size')}
+                    type="select"
+                    value={{
+                        value: query?.limit,
+                        label: query?.limit,
+                    }}
+                    onchange={pageSizeHandler}
+                    customClass={`width-20 ${classes.thisInput}`}
+                />
+                <TextInput
+                    datePicker={true}
+                    //placeholder={t('history.size')}
+                    //numberOfMonths={2}
+                    plugins={[
+                        <DatePanel />
+                    ]}
+                    lead={t('history.period')}
+                    type="input"
+                    onChange={startDateHandler}
+                    /*value={[query.startTime, query.endTime]}*/
+                    value={[query.startTime, query.endTime]}
+                    dateSeparator={" " + t('to') + " "}
+                    range
+                    hideOnScroll
+                    dataPanelPosition="Bottom"
+                    position={`${i18n.language === "fa" ? "bottom-left" : "bottom-right" }`}
+                    customClass={`width-20 ${classes.thisInput} ${classes.datePicker} `}
+                />
+                <div className={`width-15 row jc-end ai-center fs-0-8`}>
+                    <span className={`fs-0-8 ml-1`}>{t("history.ascendingByTime")}</span>
+                    <ToggleSwitch
+
+                        onchange={ () => setQuery(prevState => {return {
+                            ...prevState,
+                            ascendingByTime: !prevState.ascendingByTime
+                        }}) }
+                        checked={!query?.ascendingByTime}/>
+                </div>
+            </div>
+
+            <div className={`card-bg card-border width-100 my-4`} >
+                <div className={`card-header-bg row jc-between ai-center px-2 py-5`}>
+                    <div className={`row jc-center ai-center`}>
+                        <h3 className={``}>{t("history.transactionsHistory")}</h3>
+                        <div className={`row mx-1 text-gray`}>
+                            {periodTextHandler()}
+                        </div>
+                        { data?.length !== 0 && <span className={`fs-0-9 flx jc-center ai-center text-gray`}>
+                            <Trans
+                                i18nKey="history.page"
+                                values={{
+                                    page: (query?.offset / query?.limit) + 1,
+                                }}
+                            />
+                        </span>}
+                    </div>
+
+                    <div className={`row jc-start ai-center `}>
+                        <Button
+                            buttonClass={`${classes.thisButton} px-2`}
+                            buttonTitle={t('first')}
+                            disabled={pagination.page === 1}
+                            type="button"
+                            onClick={firstPage}
+                        />
+                        <Button
+                            buttonClass={`${classes.thisButton} px-2 mx-2`}
+                            buttonTitle={t('prev')}
+                            disabled={pagination.page === 1}
+                            type="button"
+                            onClick={prevPage}
+                        />
+                        <Button
+                            buttonClass={`${classes.thisButton} px-2`}
+                            buttonTitle={t('next')}
+                            disabled={pagination.isLastPage}
+                            type="button"
+                            onClick={nextPage}
+                        />
+                    </div>
+                </div>
+                <div>
+                    {content()}
+                </div>
+                <div className={`row jc-start ai-center width-100 mb-5 width-100 border card-bg px-2 py-3 rounded-8`}>
+                    <Button
+                        buttonClass={`${classes.thisButton} px-2`}
+                        buttonTitle={t('first')}
+                        disabled={pagination.page === 1}
+                        type="button"
+                        onClick={firstPage}
+                    />
+                    <Button
+                        buttonClass={`${classes.thisButton} px-2 mx-2`}
+                        buttonTitle={t('prev')}
+                        disabled={pagination.page === 1}
+                        type="button"
+                        onClick={prevPage}
+                    />
+                    <Button
+                        buttonClass={`${classes.thisButton} px-2`}
+                        buttonTitle={t('next')}
+                        disabled={pagination.isLastPage}
+                        type="button"
+                        onClick={nextPage}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Transactions;
diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/Transactions/Transactions.module.css b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/Transactions/Transactions.module.css
new file mode 100644
index 00000000..ec46933b
--- /dev/null
+++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/Transactions/Transactions.module.css
@@ -0,0 +1,31 @@
+.thisButton {
+    background-color: var(--orange);
+    color: #000;
+}
+.disable:disabled,.button[disabled] {
+    border: 0.3vh solid var(--cardBodyAlpha);
+    background: var(--cardBodyAlpha);
+    color: var(--textColor);
+    cursor: not-allowed;
+}
+
+.thisButton:disabled,.button[disabled] {
+    border: 0.3vh solid var(--cardBodyAlpha);
+    background: var(--cardBodyAlpha);
+    color: var(--textColor);
+    cursor: not-allowed;
+}
+
+
+.thisInput :global(.lead) {
+    width: 30%;
+}
+.thisInput :global(.selectExternalClass) {
+    width: 70%;
+}
+.thisInput :global(.rmdp-container ) {
+    width: 70%;
+}
+.thisInput.datePicker :global(.rmdp-container ) {
+    font-size: 0.85rem;
+}
\ No newline at end of file
diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/TransactionsTable/TransactionsTable.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/TransactionsTable/TransactionsTable.js
new file mode 100644
index 00000000..d434f2c9
--- /dev/null
+++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/TransactionsTable/TransactionsTable.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import classes from './TransactionsTable.module.css';
+import {useTranslation} from "react-i18next";
+import Date from "../../../../../../../../../../components/Date/Date";
+import moment from "moment-jalaali";
+import {BN} from "../../../../../../../../../../utils/utils";
+
+const TransactionsTable = ({txs}) => {
+    const {t} = useTranslation();
+
+    let head = (
+        <div className="row text-gray px-2 py-2" style={{backgroundColor:"var(--tableHeader)"}}>
+            <span className="width-12 flex jc-start ai-center">{t("date")}</span>
+            <span className="width-12 flex  jc-start ai-center">{t("time")}</span>
+            <span className="width-17 flex jc-start ai-center">{t("history.category")}</span>
+            <span className="width-17 flex jc-start ai-center">{t("history.currency")}</span>
+            <span className="width-18 flex jc-start ai-center">{t("history.balanceChange")}</span>
+            <span className="width-24 flex jc-end ai-center">{t("history.balance")}</span>
+        </div>
+    );
+
+    let body = (
+        <>
+            {txs.map((tr, index) => {
+                return (
+                    <div className={`column ${classes.striped}`} key={index}>
+                        <div className={`${classes.row} row rounded-5 border-bottom px-2 py-2`} key={index}>
+                            <span className="width-12 row jc-start ai-center">
+                                <Date date={tr.date}/>
+                            </span>
+                            <span className="width-12 row jc-start ai-center">
+                                {moment.utc(tr.date).local().format("HH:mm:ss")}
+                            </span>
+                            <span className="width-17 row jc-start ai-center">
+                                {t("TransactionCategory." + tr.category )}
+                            </span>
+                            <span className="width-17 row jc-start ai-center">
+                                {t("currency." + tr.currency )}
+                            </span>
+                            <span className="width-18 row jc-start ai-center">
+                                <span className={`direction-ltr ${new BN(tr?.balanceChange).isLessThan(0) ? "text-red" : "text-green"}`}>{new BN(tr?.balanceChange).toFormat()}</span>
+                            </span>
+                            <span className="width-24 row jc-end ai-center">
+                                <span className={`direction-ltr`}>{new BN(tr?.balance).toFormat()}</span>
+                            </span>
+                        </div>
+                    </div>
+                )
+            })}
+        </>
+    );
+
+    return (
+        <>
+            {head}
+            {body}
+        </>
+    );
+};
+
+export default TransactionsTable;
diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/TransactionsTable/TransactionsTable.module.css b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/TransactionsTable/TransactionsTable.module.css
new file mode 100644
index 00000000..c6570126
--- /dev/null
+++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/TransactionsTable/TransactionsTable.module.css
@@ -0,0 +1,6 @@
+.striped:nth-child(even) {
+    background-color: var(--tableRow);
+    -webkit-transition: background-color 0.4s;
+    -o-transition: background-color 0.4s;
+    transition: background-color 0.4s;
+}
\ No newline at end of file
diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/WithdrawHistory/WithdrawHistory.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/WithdrawHistory/WithdrawHistory.js
new file mode 100644
index 00000000..7be73f96
--- /dev/null
+++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/WithdrawHistory/WithdrawHistory.js
@@ -0,0 +1,279 @@
+import React, {useEffect, useRef, useState} from 'react';
+import classes from './WithdrawHistory.module.css'
+import {useTranslation} from "react-i18next";
+import {useSelector} from "react-redux";
+import {useGetBuyAndSellHistory, useGetWithdrawHistory} from "../../../../../../../../../../queries";
+import moment from "moment-jalaali";
+import Loading from "../../../../../../../../../../components/Loading/Loading";
+import Error from "../../../../../../../../../../components/Error/Error";
+import BuyAndSellTable from "../BuyAndSellTable/BuyAndSellTable";
+import Date from "../../../../../../../../../../components/Date/Date";
+import TextInput from "../../../../../../../../../../components/TextInput/TextInput";
+import DatePanel from "react-multi-date-picker/plugins/date_panel";
+import i18n from "i18next";
+import ToggleSwitch from "../../../../../../../../../../components/ToggleSwitch/ToggleSwitch";
+import Button from "../../../../../../../../../../components/Button/Button";
+import WithdrawHistoryTable from "../WithdrawHistoryTable/WithdrawHistoryTable";
+
+const WithdrawHistory = () => {
+
+    const {t} = useTranslation();
+    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": null,
+        "endTime": null,
+        "ascendingByTime": false,
+        "limit": 10,
+        "offset": 0
+    });
+
+    const {data, isLoading, error, refetch} = useGetWithdrawHistory(query);
+
+    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) => {
+        const start = dateRange[0]  ? moment.unix(dateRange[0].toUnix()).startOf("day").valueOf() : null;
+        const end = dateRange[1]  ? moment.unix(dateRange[1].toUnix()).endOf("day").valueOf() : null;
+        setQuery({
+            ...query,
+            startTime: start,
+            endTime: end
+        })
+    }
+
+
+    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 <>
+            <WithdrawHistoryTable txs={data} offset={query?.offset} />
+        </>
+    }
+
+    const periodTextHandler = () => {
+        if (query?.startTime && query?.endTime) return <>
+            <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>
+        </>
+        if (query?.startTime) return <>
+            <span className={`mx-05`}>{t("from")}</span>
+            <span><Date date={query?.startTime}/></span>
+            <span className={`mx-05`}>{t("until")}</span>
+            <span><Date date={moment().endOf("day").valueOf()}/></span>
+        </>
+    }
+
+
+
+    return (
+        <div className={`width-100 column my-3`} ref={scrollRef}>
+
+            <div className={`width-100 row 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, offset:0})}
+                    customClass={`width-24 ${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, offset:0})}
+                    customClass={`width-24 ${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-30 ${classes.thisInput}`}
+                />
+
+                <TextInput
+                    datePicker={true}
+                    //placeholder={t('TransactionHistory.size')}
+                    //numberOfMonths={2}
+                    plugins={[
+                        <DatePanel />
+                    ]}
+                    lead={t('TransactionHistory.period')}
+                    type="input"
+                    onChange={startDateHandler}
+                    /*value={[query.startTime, query.endTime]}*/
+                    value={[query.startTime, query.endTime]}
+                    dateSeparator={" " + t('to') + " "}
+                    range
+                    hideOnScroll
+                    dataPanelPosition="Bottom"
+                    position={`${i18n.language === "fa" ? "bottom-left" : "bottom-right" }`}
+                    customClass={`width-30 ${classes.thisInput}`}
+                />
+
+                <div className={`width-30 row jc-end ai-center fs-0-8`}>
+                    <span className={`fs-0-8 ml-1`}>{t("TransactionHistory.ascendingByTime")}</span>
+                    <ToggleSwitch
+
+                        onchange={ () => setQuery(prevState => {return {
+                            ...prevState,
+                            ascendingByTime: !prevState.ascendingByTime
+                        }}) }
+
+                        /*onchange={()=> setQuery({
+                            ...query,
+                            ascendingByTime: (prevState => !prevState)}
+                        )}*/
+                        checked={!query?.ascendingByTime}/>
+                </div>
+
+            </div>
+
+            <div className={`card-bg card-border width-100 my-4`} >
+                <div className={`card-header-bg row jc-between ai-center px-2 py-5`}>
+                    <div className={`row jc-center ai-center`}>
+                        <h3 className={``}>{t("TransactionHistory.withdrawTx")}</h3>
+                        <div className={`row mr-1 text-gray`}>
+                            {periodTextHandler()}
+                        </div>
+                    </div>
+
+                    <div className={`row jc-start ai-center `}>
+                        <Button
+                            buttonClass={`${classes.thisButton} px-2`}
+                            buttonTitle={t('first')}
+                            disabled={pagination.page === 1}
+                            type="button"
+                            onClick={firstPage}
+                        />
+                        <Button
+                            buttonClass={`${classes.thisButton} px-2 mx-2`}
+                            buttonTitle={t('prev')}
+                            disabled={pagination.page === 1}
+                            type="button"
+                            onClick={prevPage}
+                        />
+                        <Button
+                            buttonClass={`${classes.thisButton} px-2`}
+                            buttonTitle={t('next')}
+                            disabled={pagination.isLastPage}
+                            type="button"
+                            onClick={nextPage}
+                        />
+                    </div>
+
+                </div>
+                <div>
+                    {content()}
+                </div>
+                <div className={`row jc-start ai-center width-100 mb-5 width-100 border card-bg px-2 py-3 rounded-8`}>
+                    <Button
+                        buttonClass={`${classes.thisButton} px-2`}
+                        buttonTitle={t('first')}
+                        disabled={pagination.page === 1}
+                        type="button"
+                        onClick={firstPage}
+                    />
+                    <Button
+                        buttonClass={`${classes.thisButton} px-2 mx-2`}
+                        buttonTitle={t('prev')}
+                        disabled={pagination.page === 1}
+                        type="button"
+                        onClick={prevPage}
+                    />
+                    <Button
+                        buttonClass={`${classes.thisButton} px-2`}
+                        buttonTitle={t('next')}
+                        disabled={pagination.isLastPage}
+                        type="button"
+                        onClick={nextPage}
+                    />
+                </div>
+
+            </div>
+
+        </div>
+    );
+};
+
+export default WithdrawHistory;
diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/WithdrawHistory/WithdrawHistory.module.css b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/WithdrawHistory/WithdrawHistory.module.css
new file mode 100644
index 00000000..7579db6f
--- /dev/null
+++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/WithdrawHistory/WithdrawHistory.module.css
@@ -0,0 +1,17 @@
+.thisButton {
+    background-color: var(--orange);
+    color: #000;
+}
+.disable:disabled,.button[disabled] {
+    border: 0.3vh solid var(--cardBodyAlpha);
+    background: var(--cardBodyAlpha);
+    color: var(--textColor);
+    cursor: not-allowed;
+}
+
+.thisButton:disabled,.button[disabled] {
+    border: 0.3vh solid var(--cardBodyAlpha);
+    background: var(--cardBodyAlpha);
+    color: var(--textColor);
+    cursor: not-allowed;
+}
\ No newline at end of file
diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/WithdrawHistoryTable/WithdrawHistoryTable.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/WithdrawHistoryTable/WithdrawHistoryTable.js
new file mode 100644
index 00000000..62a7f34f
--- /dev/null
+++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/WithdrawHistoryTable/WithdrawHistoryTable.js
@@ -0,0 +1,120 @@
+import React from 'react';
+import classes from './WithdrawHistoryTable.module.css'
+import {useTranslation} from "react-i18next";
+import {useSelector} from "react-redux";
+import Date from "../../../../../../../../../../components/Date/Date";
+import moment from "moment-jalaali";
+import {BN} from "../../../../../../../../../../utils/utils";
+
+const WithdrawHistoryTable = ({txs, offset}) => {
+
+    const {t} = useTranslation();
+
+    const id = useSelector(state => state.auth.id);
+
+    const txStatus = (status) => {
+        switch (status) {
+            case 0:
+                return t("orderStatus.NEW");
+            case 1:
+                return t("orderStatus.DONE");
+            case 2:
+                return t("orderStatus.REJECTED");
+            default:
+                return t("orderStatus.NEW");
+        }
+    };
+
+    let head = (
+        <div className="row text-gray px-2 py-2" style={{backgroundColor:"var(--tableHeader)"}}>
+            <span className="width-4 flex jc-start ai-center">{t("row")}</span>
+            <span className="width-6 flex jc-start ai-center">{t("date")}</span>
+            <span className="width-6 flex  jc-start ai-center">{t("time")}</span>
+            <span className="width-8 flex jc-start ai-center">{t("TransactionHistory.category")}</span>
+            <span className="width-10 flex jc-start ai-center">{t("TransactionHistory.coin")}</span>
+            <span className="width-13 flex jc-start ai-center">{t("DepositWithdraw.network")}</span>
+            <span className="width-7 flex jc-start ai-center">{t("volume")}</span>
+            <span className="width-8 flex jc-start ai-center">{t("status")}</span>
+            <span className="width-19 flex jc-start ai-center">{t("TransactionHistory.destAddress")}</span>
+            <span className="width-19 flex jc-end ai-center">{t("DepositWithdrawTx.transactionId")}</span>
+
+        </div>
+    );
+    let body = (
+        <>
+            {txs.map((tr, index) => {
+
+                const isMaker = tr?.additionalData?.makerUuid === id
+                const isTaker = tr?.additionalData?.takerUuid === id
+
+                const isSelfTrade = (((tr?.additionalData?.takerDirection === "ASK") || ( tr?.additionalData?.makerDirection === "BID")) && isTaker && isMaker)
+
+                return (
+
+                    <div className={`column ${classes.striped} fs-0-9`} key={index}>
+
+                        <div className={`${classes.row} row rounded-5 border-bottom px-2 py-2`} key={index}>
+                            <span className="width-4 row jc-start ai-center">
+                                {index + offset + 1}
+                            </span>
+                            <span className="width-6 row jc-start ai-center">
+                                <Date date={tr.applyTime}/>
+                            </span>
+                            <span className="width-6 row jc-start ai-center">
+                                {moment(tr.applyTime).format("HH:mm:ss")}
+                            </span>
+                            <span className="width-8 row jc-start ai-center">
+                                <span className={`text-red`}>{ t("TransactionCategory.WITHDRAW")}</span>
+                            </span>
+
+                            <span className="width-10 row jc-start ai-center">
+                                {t("currency." + tr.coin )}
+                            </span>
+
+                            <span className="width-13 row jc-start ai-center">
+                                {tr.network}
+                            </span>
+
+
+                            <span className="width-7 row jc-start ai-center">
+                                {new BN(tr?.amount).toFormat()}
+                            </span>
+
+                            <span className="width-8 row jc-start ai-center">
+                                {txStatus(tr.status)}
+                            </span>
+                            <span className="width-19 row jc-start ai-center fs-0-8">
+                                {tr.address}
+                            </span>
+                            <span className="width-19 row jc-end ai-center fs-0-8">
+                                {tr.txId}
+                            </span>
+
+
+
+
+
+                        </div>
+
+                    </div>
+
+
+
+                )
+            })}
+        </>
+    );
+
+
+
+
+
+    return (
+        <>
+            {head}
+            {body}
+        </>
+    );
+};
+
+export default WithdrawHistoryTable;
diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/WithdrawHistoryTable/WithdrawHistoryTable.module.css b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/WithdrawHistoryTable/WithdrawHistoryTable.module.css
new file mode 100644
index 00000000..c6570126
--- /dev/null
+++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/WithdrawHistoryTable/WithdrawHistoryTable.module.css
@@ -0,0 +1,6 @@
+.striped:nth-child(even) {
+    background-color: var(--tableRow);
+    -webkit-transition: background-color 0.4s;
+    -o-transition: background-color 0.4s;
+    transition: background-color 0.4s;
+}
\ No newline at end of file
diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/MyOrders/MyOrders.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/MyOrders/MyOrders.js
index e17c2ae2..b5c145d4 100644
--- a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/MyOrders/MyOrders.js
+++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/MyOrders/MyOrders.js
@@ -21,10 +21,10 @@ const MyOrders = () => {
   </div>
 
   const data = [
-    {id: 1, title: t("myOrders.aliveOrder"), body: isLogin ? <OpenOrders/> : LoginText},
+    {id: 1, title: t("myOrders.liveOrders"), body: isLogin ? <OpenOrders/> : LoginText},
     //{id: 2, title: t("myOrders.stoppedOrder"), body: props.auth.isLogin ? StopTable : LoginText},
     {id: 3, title: t("myOrders.orderHistory"), body: isLogin ? <OrdersHistory/> : LoginText},
-    {id: 4, title: t("myOrders.orders"), body: isLogin ? <Trades/> : LoginText},
+    {id: 4, title: t("myOrders.tradeHistory"), body: isLogin ? <Trades/> : LoginText},
   ];
 
   return (
diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/TransactionHistory/TransactionHistory.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/TransactionHistory/TransactionHistory.js
index adbaf0d5..9ed59db9 100644
--- a/src/main/Browser/Pages/UserPanel/Sections/Content/components/TransactionHistory/TransactionHistory.js
+++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/TransactionHistory/TransactionHistory.js
@@ -3,7 +3,7 @@ import classes from './TransactionHistory.module.css';
 import {useSelector} from "react-redux";
 import {useTranslation} from "react-i18next";
 import moment from "moment-jalaali";
-import {useTransactionHistory} from "../../../../../../../../queries/hooks/useTransactionHistory";
+import {useTransactionHistory} from "../../../../../../../../queries/hooks/useGetTransactionsHistory";
 import Loading from "../../../../../../../../components/Loading/Loading";
 import Error from "../../../../../../../../components/Error/Error";
 import TextInput from "../../../../../../../../components/TextInput/TextInput";
diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Transactions/components/BuyAndSell/BuyAndSell.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Transactions/components/BuyAndSell/BuyAndSell.js
index 026e6bf1..a440fec5 100644
--- a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Transactions/components/BuyAndSell/BuyAndSell.js
+++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Transactions/components/BuyAndSell/BuyAndSell.js
@@ -2,7 +2,7 @@ import React, {useEffect, useRef, useState} from 'react';
 import classes from './BuyAndSell.module.css';
 import {useTranslation} from "react-i18next";
 import {useSelector} from "react-redux";
-import {useTransactionHistory} from "../../../../../../../../../../queries/hooks/useTransactionHistory";
+import {useTransactionHistory} from "../../../../../../../../../../queries/hooks/useGetTransactionsHistory";
 import {useGetBuyAndSellHistory} from "../../../../../../../../../../queries";
 import TextInput from "../../../../../../../../../../components/TextInput/TextInput";
 import DatePanel from "react-multi-date-picker/plugins/date_panel";
@@ -127,9 +127,6 @@ const BuyAndSell = () => {
     }
 
 
-
-
-
     return (
         <div className={`width-100 column my-3`} ref={scrollRef}>
 
diff --git a/src/main/Browser/Pages/UserPanel/Sections/Header/Header.js b/src/main/Browser/Pages/UserPanel/Sections/Header/Header.js
index b5f65d7c..329c13c3 100644
--- a/src/main/Browser/Pages/UserPanel/Sections/Header/Header.js
+++ b/src/main/Browser/Pages/UserPanel/Sections/Header/Header.js
@@ -39,6 +39,7 @@ const Header = () => {
                 <Routes>
                     <Route element={<ProtectedRoute/>}>
                         <Route path={RoutesName.TransactionsRelative} element={<h3 className={``}>{t("txHistory.title")}</h3>}/>
+                        <Route path={RoutesName.HistoryRelative} element={<h3 className={``}>{t("history.title")}</h3>}/>
                         <Route path={RoutesName.WalletRelative + "/:id"} element={<WalletHeader/>}/>
                         <Route path={RoutesName.SettingsRelative+"/*"} element={<SettingHeader/>}/>
                     </Route>
diff --git a/src/main/Browser/Pages/UserPanel/Sections/MainMenu/MainMenu.js b/src/main/Browser/Pages/UserPanel/Sections/MainMenu/MainMenu.js
index 4623198b..b5653996 100644
--- a/src/main/Browser/Pages/UserPanel/Sections/MainMenu/MainMenu.js
+++ b/src/main/Browser/Pages/UserPanel/Sections/MainMenu/MainMenu.js
@@ -101,7 +101,7 @@ const MainMenu = () => {
                             <Icon iconName="icon-account fs-21"/>
                         </NavLink>
 
-                        <NavLink
+                       {/* <NavLink
                             to={Routes.Transactions}
                             className={({ isActive }) =>
                                 isActive ? classes.selected : undefined
@@ -115,6 +115,22 @@ const MainMenu = () => {
                                 "txHistory.title",
                             )}</span>`}>
                             <Icon iconName="icon-clock fs-21"/>
+                        </NavLink>*/}
+
+                        <NavLink
+                            to={Routes.History}
+                            className={({ isActive }) =>
+                                isActive ? classes.selected : undefined
+                            }
+                            onClick={() => setShowMessages(false)}
+                            data-tooltip-id="opex-tooltip"
+                            data-tooltip-place="left"
+                            data-tooltip-float={true}
+                            data-tooltip-html={`
+                         <span class="column jc-between col-100">${t(
+                                "history.title",
+                            )}</span>`}>
+                            <Icon iconName="icon-clock fs-21"/>
                         </NavLink>
 
                     </div>
diff --git a/src/main/Browser/Pages/UserPanel/UserPanel.js b/src/main/Browser/Pages/UserPanel/UserPanel.js
index bf98ff6a..9d655bd8 100644
--- a/src/main/Browser/Pages/UserPanel/UserPanel.js
+++ b/src/main/Browser/Pages/UserPanel/UserPanel.js
@@ -13,7 +13,7 @@ import {Transactions} from "../../Routes/routes";
 const UserPanel = () => {
     const isLogin = useSelector((state) => state.auth.isLogin)
 
-    const isTxHistoryPage = useMatch(RoutesName.Transactions)
+    const isTxHistoryPage = useMatch(RoutesName.History || RoutesName.History)
     const isTechnicalPage = useMatch(RoutesName.Technical)
 
     const hasSubMenu = !(isTxHistoryPage || isTechnicalPage);
diff --git a/src/main/Browser/Routes/routes.js b/src/main/Browser/Routes/routes.js
index b40f668f..6e077fc1 100644
--- a/src/main/Browser/Routes/routes.js
+++ b/src/main/Browser/Routes/routes.js
@@ -22,6 +22,9 @@ export const TxHistoryRelative = "/transaction-history";
 export const Transactions = "/panel/transactions";
 export const TransactionsRelative = "/transactions";
 
+export const History = "/panel/history";
+export const HistoryRelative = "/history";
+
 
 
 export const Wallet = "/panel/wallet";
diff --git a/src/queries/hooks/useGetTransactionsHistory.js b/src/queries/hooks/useGetTransactionsHistory.js
new file mode 100644
index 00000000..19f630c3
--- /dev/null
+++ b/src/queries/hooks/useGetTransactionsHistory.js
@@ -0,0 +1,18 @@
+import {useQuery} from "@tanstack/react-query";
+import {getTransactionsHistory} from "js-api-client";
+
+export const useGetTransactionsHistory = (query) => {
+    return useQuery(
+        ['transactionsHistory', query.currency, query.category, query.endTime, query.startTime, query.limit, query.offset, query.ascendingByTime],
+        () => getTransactionsHistoryFunc(query),
+        {
+            retry: 1,
+            staleTime: 5000,
+            refetchInterval: 10000,
+        });
+}
+
+const getTransactionsHistoryFunc = async (query) => {
+    const {data} = await getTransactionsHistory(query)
+    return data;
+}
diff --git a/src/queries/hooks/useTransactionHistory.js b/src/queries/hooks/useTransactionHistory.js
deleted file mode 100644
index 2468d045..00000000
--- a/src/queries/hooks/useTransactionHistory.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import {useQuery} from "@tanstack/react-query";
-import axios from "axios";
-import {getTransactionHistory} from "js-api-client/client/txs";
-
-export const useTransactionHistory = (user_id, query) => {
-
-    return useQuery(
-        ['allTxHistory', user_id, query.coin, query.category, query.endTime, query.startTime, query.limit, query.offset, query.ascendingByTime],
-        () => 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;
-}
diff --git a/src/queries/index.js b/src/queries/index.js
index 591985ef..b4d09d5b 100644
--- a/src/queries/index.js
+++ b/src/queries/index.js
@@ -24,4 +24,5 @@ export {useGetUserAssets} from "./hooks/useGetUserAssets";
 export {useGetUserAssetsEstimatedValue} from "./hooks/useGetUserAssetsEstimatedValue";
 export {useGetBuyAndSellHistory} from "./hooks/useGetBuyAndSellHistory";
 export {useGetWithdrawHistory} from "./hooks/useGetWithdrawHistory";
-export {useGetDepositHistory} from "./hooks/useGetDepositHistory";
\ No newline at end of file
+export {useGetDepositHistory} from "./hooks/useGetDepositHistory";
+export {useGetTransactionsHistory} from "./hooks/useGetTransactionsHistory";
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 12244150..9a2658f6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9486,8 +9486,8 @@ __metadata:
 
 "js-api-client@https://github.com/opexdev/js-api-client.git#develop":
   version: 1.0.0-beta2
-  resolution: "js-api-client@https://github.com/opexdev/js-api-client.git#commit=0516bb9eaf9233cb04157df3623262630022e432"
-  checksum: 2bdaadfede60fda2b60807895cfccd459f2d5a6587e0f1c08292384ac2b60e86bb105357f4bd91b68e80c717254fa50fa4e76465086e8089d950dca69abb6b4f
+  resolution: "js-api-client@https://github.com/opexdev/js-api-client.git#commit=0a3cb3b1a8cc9bfea52d8a13b469bcd676923c37"
+  checksum: 46415811da888600ce149284d02e7cec2bbfffea73bc80ff16406447466c0abb5ac6a21ff82eb8cb48d61c25d65d673b4afeb44afc906d9d7d51f04e7f9b80fe
   languageName: node
   linkType: hard