From 8d372deb206d7c5d8928eea459898efc433f9405 Mon Sep 17 00:00:00 2001
From: Reza_ashrafi <ashrafimiireza98@gmail.com>
Date: Wed, 16 Feb 2022 17:16:23 +0330
Subject: [PATCH] reza added something

---
 src/assets/icons/ar-blue.svg                  |  10 +-
 src/assets/icons/hamburger-blue.svg           |   8 +-
 src/assets/icons/qr-blue.svg                  |   8 +-
 src/components/Drawer/index.js                |   2 +-
 src/components/Header/index.js                |  32 ++--
 src/components/Input/index.js                 |  11 +-
 src/components/Navbar/index.js                |   4 +-
 src/components/Progress/index.js              |  10 +-
 src/components/Search/index.js                |  35 ++--
 src/components/Select/index.js                |   4 +-
 src/redux/reducers/book.js                    |   1 +
 src/redux/reducers/public.js                  |   2 +-
 src/router.js                                 |   4 +-
 .../Home/Portrait/Private/Blogs/index.js      |  45 +++--
 .../Home/Portrait/Private/MyBooks/index.js    |  18 +-
 src/views/Home/Portrait/Private/Shop/index.js |  25 ++-
 .../Home/Portrait/Private/Videos/index.js     |  36 ++--
 src/views/Home/Portrait/Private/index.js      |  46 +++--
 .../Portrait/Public/GradiantText/index.js     |   4 +-
 src/views/Products/index.js                   | 100 ++---------
 .../Products/layouts/{ => Desktop}/Main.js    |   9 +-
 .../Products/layouts/{ => Desktop}/Sidebar.js |   9 +-
 src/views/Products/layouts/Mobile/Header.js   |  69 ++++++++
 src/views/Products/layouts/Mobile/Main.js     | 164 ++++++++++++++++++
 24 files changed, 442 insertions(+), 214 deletions(-)
 rename src/views/Products/layouts/{ => Desktop}/Main.js (96%)
 rename src/views/Products/layouts/{ => Desktop}/Sidebar.js (95%)
 create mode 100644 src/views/Products/layouts/Mobile/Header.js
 create mode 100644 src/views/Products/layouts/Mobile/Main.js

diff --git a/src/assets/icons/ar-blue.svg b/src/assets/icons/ar-blue.svg
index b86ec83..9b4256d 100644
--- a/src/assets/icons/ar-blue.svg
+++ b/src/assets/icons/ar-blue.svg
@@ -1,9 +1,9 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="28.908" height="28.908" viewBox="0 0 28.908 28.908">
   <g id="Group_419" data-name="Group 419" transform="translate(-11 -20.092)">
-    <path id="Path_1864" data-name="Path 1864" d="M1.694,1.694H6.775V0H0V6.775H1.694Zm0,0" transform="translate(11 20.092)" fill="#196ec0"/>
-    <path id="Path_1863" data-name="Path 1863" d="M392,0V1.694h5.081V6.775h1.694V0Zm0,0" transform="translate(-358.868 20.092)" fill="#196ec0"/>
-    <path id="Path_1862" data-name="Path 1862" d="M397.081,397.081H392v1.694h6.775V392h-1.694Zm0,0" transform="translate(-358.868 -349.775)" fill="#196ec0"/>
-    <path id="Path_1861" data-name="Path 1861" d="M1.694,392H0v6.775H6.775v-1.694H1.694Zm0,0" transform="translate(11 -349.775)" fill="#196ec0"/>
-    <text id="AR" transform="translate(26 39.092)" fill="#196ec0" font-size="14" font-family="IRANSansX-Light, IRANSansX" font-weight="300"><tspan x="-8.841" y="0">AR</tspan></text>
+    <path id="Path_1864" data-name="Path 1864" d="M1.694,1.694H6.775V0H0V6.775H1.694Zm0,0" transform="translate(11 20.092)" fill="rgb(19, 123, 79)"/>
+    <path id="Path_1863" data-name="Path 1863" d="M392,0V1.694h5.081V6.775h1.694V0Zm0,0" transform="translate(-358.868 20.092)" fill="rgb(19, 123, 79)"/>
+    <path id="Path_1862" data-name="Path 1862" d="M397.081,397.081H392v1.694h6.775V392h-1.694Zm0,0" transform="translate(-358.868 -349.775)" fill="rgb(19, 123, 79)"/>
+    <path id="Path_1861" data-name="Path 1861" d="M1.694,392H0v6.775H6.775v-1.694H1.694Zm0,0" transform="translate(11 -349.775)" fill="rgb(19, 123, 79)"/>
+    <text id="AR" transform="translate(26 39.092)" fill="rgb(19, 123, 79)" font-size="14" font-family="IRANSansX-Light, IRANSansX" font-weight="300"><tspan x="-8.841" y="0">AR</tspan></text>
   </g>
 </svg>
diff --git a/src/assets/icons/hamburger-blue.svg b/src/assets/icons/hamburger-blue.svg
index cfd3da8..05fb996 100644
--- a/src/assets/icons/hamburger-blue.svg
+++ b/src/assets/icons/hamburger-blue.svg
@@ -1,8 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="31.567" height="28.996" viewBox="0 0 31.567 28.996">
   <g id="textalign-justifycenter" transform="translate(-367.969 -188.141)">
-    <path id="Vector" d="M0,0H29.567" transform="translate(368.969 189.141)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-    <path id="Vector-2" data-name="Vector" d="M0,0H29.567" transform="translate(368.969 198.14)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-    <path id="Vector-3" data-name="Vector" d="M0,0H29.567" transform="translate(368.969 207.139)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-    <path id="Vector-4" data-name="Vector" d="M0,0H29.567" transform="translate(368.969 216.137)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path id="Vector" d="M0,0H29.567" transform="translate(368.969 189.141)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path id="Vector-2" data-name="Vector" d="M0,0H29.567" transform="translate(368.969 198.14)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path id="Vector-3" data-name="Vector" d="M0,0H29.567" transform="translate(368.969 207.139)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path id="Vector-4" data-name="Vector" d="M0,0H29.567" transform="translate(368.969 216.137)" fill="none" stroke="rgb(19, 123, 79)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
   </g>
 </svg>
diff --git a/src/assets/icons/qr-blue.svg b/src/assets/icons/qr-blue.svg
index 28db0fd..ebc902e 100644
--- a/src/assets/icons/qr-blue.svg
+++ b/src/assets/icons/qr-blue.svg
@@ -1,9 +1,9 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28.908" height="28.908" viewBox="0 0 28.908 28.908">
   <g id="Group_418" data-name="Group 418" transform="translate(-11 -20.092)">
     <image id="qr-code_2_" data-name="qr-code (2)" width="25" height="25" transform="translate(13 22)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOgAAADoCAIAAABqyz8vAAAABmJLR0QA/wD/AP+gvaeTAAAPO0lEQVR4nO2de3AV1R3H771JuCHvyENIAsi7KqggMQpFfHX4w0FrfY0l6oytVC3UDlXHfzod7T91bEcRra2WcVCgRew4WqujVdQCURJilNc0D4gh5IGEvN/31T8uQ1Oyu3fP2XP2nN/u9/Pn3uXczd0ve89+93u/J5hIJAIAUCOk+gAA4AHCBSSBcAFJIFxAEggXkATCBSSBcAFJIFxAEggXkATCBSSBcAFJIFxAEggXkATCBSSBcAFJ0iWN+1VL36fHur480VN7erC1d6RvJBaNuxr8jf3uBsPtaU/uZtpfNmbHY4fM9NBnDy0tLcmTND4H6aFgbjitOC+8cGp22Yy8G+ddcEVRjpQ3Ejtc30jslf0tW6paa08Pih0ZjGc4Gr9r2+H965dNzZmg+ljOEo0nuoaiXUPRw6cG/n7ou0Ag8L0pWQ+UFq0rK84Npwl8I2FThWg88fze5jnPVDzxfgNU6xonuodvf+PQaCyu+kBM+c/pwSfeb5jzTMWmvc0Cv3XFCLeuY/Calw786r36zsGIkAGBfSqaeh5+u1b1UaSgczCy8b365S8daDgzJGRAAcL9oPZM2eYDX7X0OR8K8JGZTuMmu7qlr/SFqg/rzjgfyukf/ObBU7e9frB3JOr8UAAfK2blP7dmvuqjsEvvSPTWrQd3HfzO4TiOhPth3Zn7dh6NxPA7YWXMLMh8697FE9JoXHGTRGKJ+3Ye/bi+08kg/H/w8c6he3YcgWoVMjEjtKt8sT6Wgn1GY/G7dxxu7OSf73LaYfFEovyvR3qGU8wQwumh6+cWXnphdnFeOGuCSDckyZ7G7u017Uz/hM+v/bq1f+XL1YORmOGrdvxUO+OMRbavvHbJtJWzC4QPOzgaa+kdOXJq4NNjXSNRK6+jeyh6386jnz+0NBQMcrwRp3BfrWzd39xrscPUnAm/vvGi8qXT8sKynnEkYRUuB2cGI3dsO2ShNpt+aspx3GTl7IIHryqSN37vSPT16vbfftLYMWBqNFU09bx2oO0npTyHwTNVGIrEn/pXo8UOP1o0pfbxqx+5pkS2al0gEkvcue1Qyi+1lH6qzXE8Q144ff3ykrrHr/nhpVMsdvvNR8eHLS/MZvAId2t126n+UbNXN6wo2bl2kQckm+QX79Z9frzbzp7Wfqr9cbxEfmb6rvJFP19eYrZDW9/o69VtHCPzCHdLVavZS6sXTPrDzfP5Zi16wvSXWPip3vlEGAkFg8+vmX/zxZPNdnjtgCvCrT09aPasoXBi+vZ7Lk0Leeocbbplwao5hXb2tPZT7Y/jPULB4Gt3XpyfafwlXNnce4z9cRqzcHc3dJm99PiqWYUTPTJDOEdGWnBX+aLZF0y03i2ln2pzHK8yKSvjsWtnmr36SQOzp8ss3C9O9BhuTwsF+W4P9WdSVsZb5Yuzze08m35qynG8zYNlxWbfxhVNxqKygPkCWXt6wHD78ln5k7Mzxm8XlQd1Jy8bjSce+2f9cCT+wq0Lxl4+ryjK6X16lfPxx4/jcl42JfLO15TsjKtn5O0z0ihHnJBZuM3dI4bbJeWF3aRjIHL3jsOfHesKBAJHTw28Wb54Wi69h1I6s6Q411C4zd3DrEMxTxX6Roz986K8MOtQWvFNW3/Zi1VJ1QYCgX1NPVdtrqo6afWQBbAyPddYJL0morKAWbgjJh47deP2+3+s/rbr//7ft/SO3PDnGlXH40kKTO7dOZ5BMAvXbMkI6tat4ZNYTR7PgvFQisMBcA4IF5AEwgUkoX1HxQGrT8nXw2A/dyv2ff0Drrji0Sp361UgXMH4LXerCghXMP7M3boPhCsY4nY2GSBcwfg5d+smEK5gfJ67dQ32R74BFCmkwOe5Ww7McgQW+M7HdQf7+V13fGXvIWyqgJsSkBKBSSzMcQFJIFxAEmbhBk0mBbhlA24izFXAHBe4CaYKgCQQLiCJdB+Xir8o9jjN+hmcv6/sHgYq5wsPIMSDfgYXwFRBMOhncAdhP08HSdDPwAFHAAZXXMGgn8EdIFxAEggXkITZVQgGjae5e77tCbpew7SnEb/u4kTJR7f3W+YeXDOYhWt2c7ajpn2H/JWb3Ed2/lVVvnZ7TbsLK23JA1MFQBIIF5AEwgUkgXCJkZVh8BtMw43eBsIlxt5HrryoMHPslpL88O6fLVF1PKqAcIlx+fSc/etLr5t7tnNkxaz8yg2ldhZu9xhIh9FjcnbGBw9c/ui79YFAYNMt861jkyTgCMAEEz5LzbDmWc38VFHjAD7I/2cF/gTCBSSBcAFJIFxAEggXkATCBSSBcAFJOB9A2O8NYEXVumKqUOUri0JULwTrODzC1a03AOuK+RDmi6VuvQFYV8yfMAtXt94ArCvmT5iFq1tvAOpN/Ql5VwHrivkT8sLFumL+hLxwA1hXzJcw53Ht+IWZ6aHPHlpqJ5avmx/s/vi69d3K9pVFff5SrrjD0fhd2w5/1z9qvVvHQGT1lq837zv5amXrTa/UtPel2B+Ac8iaKpzoHr79jUOjsbjZDrr5wYAWEue4FU09D79da/aqbn4woIXcm7PMdNPxZfvBsvsH0G+gFonCXTEr/7k18+WNb43s/gH0G6hFlnBnFmS+de9ihb+clt0/gH4DtUjpVZiYEdpVvnhqjuKlZmT3D3iv34AQ0nsV3MyJ2vGPVfXRJpGXG6buH7PiqYuETf9YFcgNC8RTwg3Y8I9VgdywWLwm3EAq/1gVyA2LxYPCDVj6x6pAblgs2p1g56j1j81AblgsXhOucv/YDOSGxaLdCXaCJv6xGcgNC4TTx7Wfo1Xlm6rK447Ffi5ZHrJ7fFX1BPNccZGjtYnmvjJpyPcqaI62vjJ1yPcq6I+evjJ1pPcqILca0NJXpo70DxS5VT19ZepIF67Pc6va+srUcWOdM9/mVjX3lUkjpVdhLGL9Wus8q5t5XHf8aed+uRl8xyk2T+zE56Z08UuZZ/WYb6qbXy48T+zkfJERrs08q2d8U938ckl5Yu7zRUa49vOs3vBNdfPL5eWJ+c4XGeEy5Vld8E1l+9O+6iHmOF9khGs/z+qOb+o3f1penpjvfJERrs08q2u+qd/8aUl5Yu7zRUa4ARt5Vpd906Q/va6seF1Z8cfrllzodb9WeJ7YyfmS7uOOxc18qlq/lrX3V5++hSTOe4tl+9xuPDk7R9K3279+mbcfJrGuA6db34Ju69gZ4vZUwTM+qxms/qtufQu6+cdmKJjjesNnNYPVf9Wtb0E3/9gMNTdnHs6nsvqvuvUtiPKPZfvcCgSEfOpYvNq3INvndlu4yKeeh1f7FmT73K4KCPlUQ7zatyDV55bej2uGKp9V9jperOOYoUMvhBPQjwuAARAuIAmEC0gC4QKSQLiAJBAuIAmEC0iizMflQ15O1AxWH1dVX4Eov1nG+DJy2JSuuLr1DIhCtzyucGT0XZARLpWcKCu65XElITyHTUa4VHKirOiWx5WH2Bw2GeHq1jMgKm+qWx5XKgJz2GSEqxui8qZezeOOR2wOG8LlRFTe1Kt53PMQnsOGcPkRlTf1ah73HDJy2Jw+rrweABlQ7HNgHV83dMzjkvMdPdabCwIcwiXqO3q+z8FvMAuXru/o7T4Hv8EsXNK+o4f7HPwG84mk6zuiz8FLMAuXqO+IPgePwXMiyfmO6HPwHsTyuKJgzfU6zwGLGkeVTyzbl2XF1X5cTWDtfxXVF0uid5YKvpvzseZ6ReWAvZonVoXvhMua6xWVA/ZqnlgVvhMua65XVA5YtzwxdXwnXOANIFxAEggXkITZDvNqHpTK38UKFV+WFVxxAUkgXEASCBeQBMJ1CdnrfvkNCNclZK/75TcgXJeQve6X3/BjOkwVyR6GR9+tDwQCm26Zj1S7E5iFGwwGDBO8P14y7drZBQKOiIU9jd3ba9qZ/ols/9LaN52QFnr5toVSD8DwfZ2j27pozMI1y52vvCj/wauKWEdzDqtwgTfAtxUgCYQLSALhApKwF4KQbgQBXgFXXEASCBeQRPoDCNnrbLEiKp/KN479XmHkia3BFdc9yPUK6wyE6xJEe4W1haNm1NhW8GOREwt0e4X1hFm4CROJwiWzBp+PWDBVcAm6vcJ6AuG6BNFeYW0RJlzMcVNCrldYZ3wXJDfzR+34oGPXS7P2Wc16cK8oyul9ehXr+45Ftr9LxT8W5ir4AZvrpXUMRFZv+XrzvpOvVrbe9EpNex/WVxMP5rhspFwvDT247gDhMmO9Xhp6cN0BwuXBYr009OC6A4TLDNZL0wEIlw2sl6YJOAEMYL00ffCdj8uKE9/Xyf7W2M/1msGXbx7vT7N+PqJy1RAuPVTlerVapw1TBWKoyvXq5k9DuMRQlevVzZ8W9vN0Xy4JrABVD9x186eZhRs2cYJ6hqOODwakBrneJMzCzQ0bp/La+kYcHwxIDXK9SZiFO6MgbLi9pqXf8cEAWyDXG+CwwxZOyT5wsm/89i9O9HQMRCZnZ5y3nfp6WqyI9TXt53rNMHtfUb4ymTzu8ln5httj8cRfKlsdHw/4H8j1WsAs3Bvmmd4ZPPvvps7BiLPjAWfRzTfVDWbhLpictbQ41/Cl7qHo2r8dicVhjAlAN99UN3geQPzUvDL/o7rOje/VxwmauqzrkMlet0w331Q3eIR7/5XTLR5Sv1hx8o5th7uHiNm6rOuQYd0ytfAINzM99NQP5ljs8M6R0wt//8XmfScJPZVgXYcM65aphTMd9kDp9K3VbRVNPWY7dAxEfvmPuifeb7h+buElF2bPyA9nSfAd9zSKfGrPug4Z1i1TSDDBOx9t7hleuqlKWxtBlJ+qqgdXdp5VFE583LE9FazwXyRm5GfuWrsobP6zQd+CHlyb2OypMMSR7K6bW7j1rksy0vxbETIe9OAykbKnwgyn18s7L5v6zv2X5WfilxRnQQ8uK9Y9FWYI+KJfvWBS5YbSZSXGTyX8hqhvH9k+sVZY9FSYIWaGOm/SxIpHlj2/ZsGkrPNDNn5DVF7WPz4xX0+FsFurtFBww4qS408uf/bmeRdPzRY1LDlE5WV94hNz91QInpvmTEjbuHLmxpUzv2nr393Q+eWJ3rqOwebu4f7RWCRG7zkwH8m87LV/qh4YdWQseN4ndtJTwe/jAqAQr/0nBj4BwgUkgXABSSBcQBIIF5AEwgUkgXABSSBcQBIIF5AEwgUkgXABSSBcQBIIF5AEwgUkgXABSf4L9C0/Wzt/S/EAAAAASUVORK5CYII="/>
-    <path id="Path_1864" data-name="Path 1864" d="M1.694,1.694H6.775V0H0V6.775H1.694Zm0,0" transform="translate(11 20.092)" fill="#196ec0"/>
-    <path id="Path_1863" data-name="Path 1863" d="M392,0V1.694h5.081V6.775h1.694V0Zm0,0" transform="translate(-358.868 20.092)" fill="#196ec0"/>
-    <path id="Path_1862" data-name="Path 1862" d="M397.081,397.081H392v1.694h6.775V392h-1.694Zm0,0" transform="translate(-358.868 -349.775)" fill="#196ec0"/>
-    <path id="Path_1861" data-name="Path 1861" d="M1.694,392H0v6.775H6.775v-1.694H1.694Zm0,0" transform="translate(11 -349.775)" fill="#196ec0"/>
+    <path id="Path_1864" data-name="Path 1864" d="M1.694,1.694H6.775V0H0V6.775H1.694Zm0,0" transform="translate(11 20.092)" fill="rgb(19, 123, 79)"/>
+    <path id="Path_1863" data-name="Path 1863" d="M392,0V1.694h5.081V6.775h1.694V0Zm0,0" transform="translate(-358.868 20.092)" fill="rgb(19, 123, 79)"/>
+    <path id="Path_1862" data-name="Path 1862" d="M397.081,397.081H392v1.694h6.775V392h-1.694Zm0,0" transform="translate(-358.868 -349.775)" fill="rgb(19, 123, 79)"/>
+    <path id="Path_1861" data-name="Path 1861" d="M1.694,392H0v6.775H6.775v-1.694H1.694Zm0,0" transform="translate(11 -349.775)" fill="rgb(19, 123, 79)"/>
   </g>
 </svg>
diff --git a/src/components/Drawer/index.js b/src/components/Drawer/index.js
index aa49b21..30ed875 100644
--- a/src/components/Drawer/index.js
+++ b/src/components/Drawer/index.js
@@ -41,7 +41,7 @@ const MyDrawer = ({
         onClick={(e) => e.stopPropagation()}
       >
         <header
-          class="flex flex-col justify-between h-1/6 pt-3 px-3 bg-blueEB dark:bg-blue90"
+          className="flex flex-col justify-between h-1/6 pt-3 px-3 bg-green-500 dark:bg-blue90"
           style={{ minHeight: "calc(100vh / 6)" }}
         >
           <div className="flex flex-row justify-between">
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
index a2b625e..8e8d111 100644
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
@@ -1,32 +1,38 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import {connect} from 'react-redux';
-import arrowBlueIcon from "../../assets/icons/arrow-right-blue.svg";
+import { connect } from "react-redux";
+import arrowGreenIcon from "../../assets/icons/dropdown-blue.svg";
 import arrowWhiteIcon from "../../assets/icons/arrow-left-white.svg";
 
 function Header({ title, link, isDark }) {
   return (
     <header className="w-full flex flex-row justify-between items-center pl-0">
-      <strong className="text-blueC0 dark:text-white font-semibold text-sm">
+      <strong className="text-green7B dark:text-white font-semibold text-base lg:text-sm">
         {title}
       </strong>
       <Link to={link} className="ml-2">
-        <img
-          src={isDark ? arrowWhiteIcon : arrowBlueIcon}
-          alt=""
-          className={`transform ${isDark ? "w-6" : "w-6 rotate-180"}`}
-        />
+        {isDark ? (
+          <img
+            src={arrowWhiteIcon}
+            alt=""
+            className={`transform ${"w-6"}`}
+          />
+        ) : (
+          <img
+            src={arrowGreenIcon}
+            alt=""
+            className={`transform rotate-90 w-2}`}
+          />
+        )}
       </Link>
     </header>
   );
 }
 
 const mapStateToProps = (state) => ({
-  isDark: state.publicApi.isDark
-})
+  isDark: state.publicApi.isDark,
+});
 
-const mapDispatchToProps = {
-
-}
+const mapDispatchToProps = {};
 
 export default connect(mapStateToProps, mapDispatchToProps)(Header);
diff --git a/src/components/Input/index.js b/src/components/Input/index.js
index f768b79..06ea236 100644
--- a/src/components/Input/index.js
+++ b/src/components/Input/index.js
@@ -49,10 +49,13 @@ export default function Input(props) {
   return (
     <div
       className={_.join(
-        ["input flex flex-col relative my-2 dark:bg-opacity-10 w-full", langDetector(lang, "fa", "en")],
+        [
+          "input flex flex-col relative my-2 dark:bg-opacity-10  w-full",
+          langDetector(lang, "fa", "en"),
+        ],
         " "
       )}
-      style={{width}}
+      style={{ width }}
     >
       {/* <label
         className={_.join(
@@ -80,7 +83,9 @@ export default function Input(props) {
         placeholder={label}
         className={_.join(
           [
-            `flex-1 border border-gray-300 dark:bg-opacity-10  bg-transparent rounded-md outline-none py-3 px-4 text-tiny ${backgroundColor} ${align}`,
+            `flex-1 border border-gray-300 dark:bg-opacity-10  rounded-md outline-none py-3 px-4 text-tiny ${
+              backgroundColor ? backgroundColor : "bg-transparent"
+            } ${align}`,
             inputStatusHandler(
               value,
               focusToggle,
diff --git a/src/components/Navbar/index.js b/src/components/Navbar/index.js
index 277f093..97c1df5 100644
--- a/src/components/Navbar/index.js
+++ b/src/components/Navbar/index.js
@@ -129,7 +129,7 @@ function Navbar({
                 className={_.join(
                   [
                     "rounded-sm p-1.5",
-                    isDark ? "bg-gray36  ml-2" : "bg-blueFF1 ml-3 shadow-sm",
+                    isDark ? "bg-blueC0 bg-opacity-10  ml-2" : " ml-3 shadow-sm",
                   ],
                   " "
                 )}
@@ -148,7 +148,7 @@ function Navbar({
                 className={_.join(
                   [
                     "rounded-sm p-1.5",
-                    isDark ? "bg-gray36" : "bg-blueFF1 shadow-sm",
+                    isDark ? "bg-blueC0 bg-opacity-10" : " shadow-sm",
                   ],
                   " "
                 )}
diff --git a/src/components/Progress/index.js b/src/components/Progress/index.js
index 9ea1a4d..ff01077 100644
--- a/src/components/Progress/index.js
+++ b/src/components/Progress/index.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 
-function Progress({ percent, deskTop }) {
+function Progress({ percent, deskTop, direction = "float-left" }) {
   const [delayPercent, setDelayPercent] = useState(0);
   useEffect(() => {
     setTimeout(() => {
@@ -8,9 +8,13 @@ function Progress({ percent, deskTop }) {
     }, 1000);
   }, [percent]);
   return (
-    <div className={`flex-1 ${deskTop ? 'h-3' : 'h-1.5'} rounded-full overflow-hidden my-3 bg-blueC0 bg-opacity-10`}>
+    <div
+      className={`flex-1 ${
+        deskTop ? "h-3" : "h-1.5"
+      } rounded-full overflow-hidden my-3 bg-blueC0 bg-opacity-10`}
+    >
       <div
-        className="h-full bg-blueC0 float-left transition-all duration-500 rounded-full"
+        className={`h-full bg-blueC0 transition-all ${direction} duration-500 rounded-full`}
         style={{ width: delayPercent + "%" }}
       ></div>
     </div>
diff --git a/src/components/Search/index.js b/src/components/Search/index.js
index 26f4263..d49409a 100644
--- a/src/components/Search/index.js
+++ b/src/components/Search/index.js
@@ -1,10 +1,10 @@
 import React from "react";
-import {connect} from 'react-redux';
+import { connect } from "react-redux";
 import { publicApi } from "../../redux/actions";
 import _ from "lodash";
 import searchIcon from "./search.png";
 
-const langDetector = (lang = 'fa', option1, option2) => {
+const langDetector = (lang = "fa", option1, option2) => {
   return lang === "fa" ? option1 : option2;
 };
 
@@ -12,7 +12,15 @@ function Search(props) {
   return (
     <div className="flex items-center justify-center w-full my-3 bg-white z-50 overflow-hidden rounded-md">
       <div className="relative text-gray-600 focus-within:text-gray-400 w-full">
-        <span className={_.join(["absolute inset-y-0 flex items-center pl-2", langDetector(props.lang, "left-0", "right-0")], " ")}>
+        <span
+          className={_.join(
+            [
+              "absolute inset-y-0 flex items-center pl-2",
+              langDetector(props.lang, "left-0", "right-0"),
+            ],
+            " "
+          )}
+        >
           <button
             type="submit"
             className="p-1 focus:outline-none focus:shadow-outline"
@@ -23,8 +31,15 @@ function Search(props) {
         <input
           type="search"
           name={props.name}
-          className="z-50 w-full py-3 text-sm lg:text-tiny lg:font-semibold text-gray1 border border-solid border-gray-200 rounded-md pr-5 pl-14 outline-none focus:ring-1 focus:text-gray-900 "
-          placeholder={_.join([langDetector(props.lang , "جستجو...", "Search...")], " ")}
+          className={`z-50 w-full py-3 text-base lg:text-tiny lg:font-semibold ${
+            props.backgroundColor
+          } ${
+            props.textColor ? props.textColor : "text-gray1"
+          } border border-solid border-gray-200 rounded-md pr-5 pl-14 outline-none focus:ring-1 focus:text-gray-900 `}
+          placeholder={_.join(
+            [langDetector(props.lang, "جستجو...", "Search...")],
+            " "
+          )}
           autoComplete="off"
           onChange={(e) => props.onChange(e.target.value)}
           onFocus={() => props.setOverLayer(true)}
@@ -35,12 +50,10 @@ function Search(props) {
   );
 }
 
-const mapStateToProps = (state) => ({
-
-})
+const mapStateToProps = (state) => ({});
 
 const mapDispatchToProps = {
-  setOverLayer : publicApi.setOverLayer
-}
+  setOverLayer: publicApi.setOverLayer,
+};
 
-export default connect(mapStateToProps, mapDispatchToProps)(Search);
\ No newline at end of file
+export default connect(mapStateToProps, mapDispatchToProps)(Search);
diff --git a/src/components/Select/index.js b/src/components/Select/index.js
index ca73792..09d98b9 100644
--- a/src/components/Select/index.js
+++ b/src/components/Select/index.js
@@ -12,10 +12,10 @@ function Select({
 }) {
   return (
     <div
-      className={`inline-block w-1/2 relative group ${margin} ${backgroundColor}`}
+      className={`inline-block w-1/2 relative group rounded-md overflow-hidden ${margin} bg-transparent`}
     >
       <select
-        className={`text-gray70 text-tiny block appearance-none bg-transparent w-full border border-solid px-4 py-3 pr-3 rounded-md leading-tight focus:outline-none focus:border-blueC0 focus:text-blueC0 ${borderColor}`}
+        className={`text-gray70  text-base lg:text-tiny block appearance-none ${backgroundColor} w-full border border-solid px-4 py-3 pr-3 rounded-md leading-tight focus:outline-none focus:border-blueC0 focus:text-blueC0 ${borderColor}`}
         onChange={(e) => onChange(name, e.target.value)}
       >
         {options.map((option, index) => (
diff --git a/src/redux/reducers/book.js b/src/redux/reducers/book.js
index c1850d9..4e16a8d 100644
--- a/src/redux/reducers/book.js
+++ b/src/redux/reducers/book.js
@@ -28,6 +28,7 @@ const initialState = {
     productType: null,
     available: false,
     sort: null,
+    search : "",
   },
 };
 
diff --git a/src/redux/reducers/public.js b/src/redux/reducers/public.js
index 97e11cb..6b64485 100644
--- a/src/redux/reducers/public.js
+++ b/src/redux/reducers/public.js
@@ -1,7 +1,7 @@
 import location from "../../utils/location";
 
 const initialState = {
-  isDark: false,
+  isDark: localStorage.getItem("isDark") || false,
   isMobile: window.innerWidth < 1024,
   homeData: [],
   newProducts: [],
diff --git a/src/router.js b/src/router.js
index 72c6a33..ffec24d 100644
--- a/src/router.js
+++ b/src/router.js
@@ -59,9 +59,9 @@ function Router({
       <div
         className={_.join(
           [
-            "min-h-screen min-w-screen rtl overflow-x-hidden pb-20 lg:py-0",
+            "min-h-screen min-w-screen rtl overflow-x-hidden lg:pb-20 lg:py-0",
             isDark ? "" : "bg-white",
-            headerOptions?.shown ? "pt-16" : "pt-4",
+            headerOptions?.shown ? "pt-16" : "pt-0",
           ],
           " "
         )}
diff --git a/src/views/Home/Portrait/Private/Blogs/index.js b/src/views/Home/Portrait/Private/Blogs/index.js
index b320151..78990e9 100644
--- a/src/views/Home/Portrait/Private/Blogs/index.js
+++ b/src/views/Home/Portrait/Private/Blogs/index.js
@@ -1,29 +1,33 @@
 import React, { useEffect } from "react";
 import { Link } from "react-router-dom";
 import { connect } from "react-redux";
-import { blog } from "../../../../../redux/actions";
 import _ from "lodash";
-import arrowBlueIcon from "../../../../../assets/icons/arrow-right-blue.svg";
+import arrowGreenIcon from "../../../../../assets/icons/dropdown-blue.svg";
 import arrowWhiteIcon from "../../../../../assets/icons/arrow-left-white.svg";
 
-function Blogs({ list, getList, isDark }) {
-  useEffect(() => {
-    getList();
-  }, []);
+function Blogs({ list, isDark }) {
   return (
     <div className="w-full pr-4">
       <div className="w-full flex flex-col rounded-md py-4 overflow-hidden">
         <header className="w-full flex flex-row justify-between items-center">
-          <strong className="text-blueC0 dark:text-white font-bold text-sm">
+          <strong className="text-green7B dark:text-white font-bold text-base lg:text-sm">
             خواندنی‌ها
           </strong>
-          <img
-            src={isDark ? arrowWhiteIcon : arrowBlueIcon}
-            alt=""
-            className={`transform ml-4 ${isDark ? "w-7" : "rotate-180"}`}
-          />
+          {isDark ? (
+            <img
+              src={ arrowWhiteIcon}
+              alt=""
+              className={`transform ml-4 w-7`}
+            />
+          ) : (
+            <img
+              src={arrowGreenIcon}
+              alt=""
+              className={`transform ml-4 rotate-90`}
+            />
+          )}
         </header>
-        <ul className="list-none w-full overflow-x-scroll pt-3 flex flex-row pb-10">
+        <ul className="list-none w-full overflow-x-scroll pt-3 flex flex-row pb-10 no-scrollbar">
           {list.map((blog, index) => (
             <Blog blog={blog} key={index} />
           ))}
@@ -43,8 +47,12 @@ const Blog = ({ blog }) => {
           background: `url(https://dnvn.ir/api/v1/file/${blog?.fileIds})`,
           backgroundPosition: "contain",
           backgroundSize: "100% 100%",
-          width: 280,
-          minHeight: 220,
+          minWidth: 200,
+          width: 'calc(100vw / 1.6)',
+          maxWidth: 350,
+          minHeight : 160,
+          height : 'calc(100vw / 1.6 * 3 / 4)',
+          maxHeight : 300
         }}
       >
         <div className="w-11/12 bg-white rounded-md shadow-md flex flex-col transform translate-y-1/2 p-2 dark:bg-gray36">
@@ -58,12 +66,12 @@ const Blog = ({ blog }) => {
                 alt=""
                 className="w-5 h-5 rounded-full ml-2"
               />
-              <span className="text-blueC0 text-xs font-light dark:text-greenBA">
+              <span className="text-green7B text-xs font-light dark:text-greenBA">
                 {"حامد دژبانی نسب"}
               </span>
             </div>
             <div className="flex flex-row items-center">
-              <span className="text-xs font-light dark:text-greenBA">
+              <span className="text-xs font-light text-gray70 dark:text-greenBA">
                 {_.join(["زمان مناسب", "30"], " ")}
               </span>
             </div>
@@ -75,8 +83,7 @@ const Blog = ({ blog }) => {
 };
 
 const mapStateToProps = (state) => ({
-  list: state.publicApi.blogList,
   isDark: state.publicApi.isDark,
 });
 
-export default connect(mapStateToProps, { getList: blog.list })(Blogs);
+export default connect(mapStateToProps, {})(Blogs);
diff --git a/src/views/Home/Portrait/Private/MyBooks/index.js b/src/views/Home/Portrait/Private/MyBooks/index.js
index 30a676d..a3a9a2f 100644
--- a/src/views/Home/Portrait/Private/MyBooks/index.js
+++ b/src/views/Home/Portrait/Private/MyBooks/index.js
@@ -1,10 +1,10 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { Link } from "react-router-dom";
 import { connect } from "react-redux";
 import { ScrollingCarousel } from "@trendyol-js/react-carousel";
 import Progress from "../../../../../components/Progress";
 
-function MyBooks({ books, getList, grades, isMobile }) {
+function MyBooks({ books, grades, isMobile }) {
   const Book = ({ book }) => {
     return (
       <li className="flex flex-col lg:ml-6 lg:p-2 lg:border lg:border-solid lg:border-green-200 lg:rounded-md lg:pt-4">
@@ -18,15 +18,17 @@ function MyBooks({ books, getList, grades, isMobile }) {
               width: isMobile ? "" : "calc(100vh / 5 * 3 / 4)",
               minHeight: isMobile ? "calc(100vh / 5)" : "",
               minWidth: isMobile ? "calc(100vh / 5 * 3 / 4)" : "",
+              maxHeight: isMobile ? 100 : "",
+              maxWidth: isMobile ? 70 : ""
             }}
           />
-          <h2 className="mt-2 text-sm lg:text-tiny font-semibold text-blue5F dark:text-white lg:mt-4">
+          <h2 className="mt-2 text-tiny lg:text-tiny font-semibold text-blue5F dark:text-white lg:mt-4">
             {book.name}
           </h2>
-          <p className="font-medium text-green7B dark:text-greenBA text-xs lg:text-sm mt-1 lg:mt-2">{`پایه ${
+          <p className="font-medium text-green7B dark:text-greenBA text-sm lg:text-sm mt-2 lg:mt-2">{`پایه ${
             grades[book.gradeId]
           }`}</p>
-          <Progress percent={60} />
+          <Progress percent={60} direction="float-right" />
         </Link>
       </li>
     );
@@ -34,12 +36,12 @@ function MyBooks({ books, getList, grades, isMobile }) {
 
   return (
     <div className="px-4 mb-5 lg:mb-0" style={{maxWidth: '100%'}}>
-      <div className="w-full flex flex-col rounded-md pt-4 lg:py-5  px-2 lg:px-4 bg-blueC0 bg-opacity-5 border border-green-200 border-solid dark:bg-gray2077 overflow-hidden">
-        <strong className="text-green7B dark:text-white font-bold text-sm lg:text-base">
+      <div className="w-full flex flex-col rounded-md pt-4 lg:py-5  px-2 lg:px-4 bg-blueC0 bg-opacity-5 border border-green-200 border-solid dark:bg-gray2077 dark:border-opacity-40 overflow-hidden">
+        <strong className="text-green7B dark:text-white font-bold text-base lg:text-base mb-2">
           کتابهای من
         </strong>
         {isMobile ? (
-          <ul className="list-none w-full overflow-x-scroll pt-2 flex flex-row lg:pt-5 lg:flex-wrap lg:overflow-y-scroll gap-3 lg:gap-10">
+          <ul className="list-none w-full overflow-x-scroll pt-2 flex flex-row lg:pt-5 lg:flex-wrap lg:overflow-y-scroll gap-3 lg:gap-10 no-scrollbar">
             {books?.slice(0, 5)?.map((book, index) => (
               <Book book={book} key={index} />
             ))}
diff --git a/src/views/Home/Portrait/Private/Shop/index.js b/src/views/Home/Portrait/Private/Shop/index.js
index 5ca77f0..595865b 100644
--- a/src/views/Home/Portrait/Private/Shop/index.js
+++ b/src/views/Home/Portrait/Private/Shop/index.js
@@ -3,22 +3,18 @@ import { Link } from "react-router-dom";
 import { connect } from "react-redux";
 import { book } from "../../../../../redux/actions";
 import Header from '../../../../../components/Header'
+
 // assets
-import arrowBlueIcon from "../../../../../assets/icons/arrow-right-blue.svg";
-import arrowWhiteIcon from "../../../../../assets/icons/arrow-left-white.svg";
 
-function Shop({ list, getList, grades, isDark }) {
-  useEffect(() => {
-    getList();
-  }, []);
+function Shop({ list, grades }) {
   return (
     <div className="w-full pr-4">
       <div className="w-full flex flex-col rounded-md py-4 overflow-hidden">
         <Header title="فروشگاه" link="/products" />
         <ul
-          className="list-none w-full overflow-x-scroll mt-3 flex flex-col flex-wrap"
+          className="list-none w-full overflow-x-scroll mt-3 flex flex-col flex-wrap no-scrollbar"
           style={{
-            height: 320,
+            height: 'calc(100vh / 4)',
           }}
         >
           {list.map((book, index) => (
@@ -45,18 +41,20 @@ const Book = ({ book, index }) => {
             alt=""
             className="rounded-sm"
             style={{
-              width: 200,
-              height: 303,
+              width: 'calc(100vh / 4 * 3 / 4.3 )',
+              height: 'calc(100vh / 4)',
+              maxWidth: 200,
+              maxHeight: 275
             }}
           />
         ) : (
           <img
             src={`https://dnvn.ir/api/v1/file/${book.fileIds}`}
             alt=""
-            className="rounded-sm"
+            className="rounded-sm mb-0"
             style={{
-              width: 100,
-              height: 148,
+              width: 'calc(100vh / 4 / 2 * 3 / 4.3)',
+              height: 'calc(100vh / 4 / 2 - 4px)',
               marginBottom: index % 2 !== 0 ? "8px" : "0px",
             }}
           />
@@ -67,7 +65,6 @@ const Book = ({ book, index }) => {
 };
 
 const mapStateToProps = (state) => ({
-  list: state.book.list,
   isDark: state.publicApi.isDark,
 });
 
diff --git a/src/views/Home/Portrait/Private/Videos/index.js b/src/views/Home/Portrait/Private/Videos/index.js
index c044a09..408f948 100644
--- a/src/views/Home/Portrait/Private/Videos/index.js
+++ b/src/views/Home/Portrait/Private/Videos/index.js
@@ -3,7 +3,9 @@ import { Link } from "react-router-dom";
 import { ScrollingCarousel } from "@trendyol-js/react-carousel";
 import { connect } from "react-redux";
 import Progress from "../../../../../components/Progress";
-import arrowBlueIcon from "../../../../../assets/icons/arrow-right-blue.svg";
+
+//assets
+import arrowGreenIcon from "../../../../../assets/icons/dropdown-blue.svg";
 import arrowWhiteIcon from "../../../../../assets/icons/arrow-left-white.svg";
 
 function Videos({ videos, grades, isDark, isMobile }) {
@@ -12,7 +14,7 @@ function Videos({ videos, grades, isDark, isMobile }) {
       <li className="flex flex-col lg:ml-6 lg:p-2 lg:border lg:border-solid lg:border-green-200 lg:rounded-md">
         <Link to={"/products/" + video.id}>
           <img
-            src={`https://dnvn.ir/api/v1/file/${video.posterId}`}
+            src={`https://dnvn.ir/api/v1/file/${video?.fileIds}`}
             alt=""
             className="rounded-sm"
             style={{
@@ -22,13 +24,13 @@ function Videos({ videos, grades, isDark, isMobile }) {
               minWidth: isMobile ? "calc(100vw / 2)" : "",
             }}
           />
-          <h2 className="mt-2 text-sm font-normal text-blue5F dark:text-white lg:mt-4 lg:text-tiny lg:mb-5">
-            {"دوره ویدئویی" + " " + video.name}
+          <h2 className="mt-3 mb-4 text-sm font-semibold text-blue5F dark:text-white lg:mt-4 lg:text-tiny lg:mb-5">
+            {"دوره ویدئویی" + " " + video?.product[2]?.name}
           </h2>
           {/* <p className="font-medium text-blueC0 dark:text-greenBA text-xs mt-1 lg:mt-2 lg:text-sm">{`پایه ${
             grades[video.gradeId]
           }`}</p> */}
-          <Progress percent={60} />
+          <Progress percent={60} direction="float-right" />
         </Link>
       </li>
     );
@@ -37,18 +39,26 @@ function Videos({ videos, grades, isDark, isMobile }) {
     <div className="w-full px-4 lg:py-4">
       <div className="w-full flex flex-col py-4 lg:px-3 overflow-hidden lg:border lg:border-solid lg:border-gray-200 rounded-md lg:bg-blueC0 lg:bg-opacity-5">
         <header className="w-full flex flex-row justify-between items-center">
-          <strong className="text-green7B dark:text-white font-bold text-sm lg:text-base mt-2">
+          <strong className="text-green7B dark:text-white font-bold text-base lg:text-base mt-2">
             دوره‌های ویدئویی شما
           </strong>
-          <img
-            src={isDark ? arrowWhiteIcon : arrowBlueIcon}
-            alt=""
-            className={`transform lg:hidden ${isDark ? "w-7" : "rotate-180"}`}
-          />
+          {isDark ? (
+            <img
+              src={arrowWhiteIcon}
+              alt=""
+              className={`transform lg:hidden w-7`}
+            />
+          ) : (
+            <img
+              src={arrowGreenIcon}
+              alt=""
+              className={`transform lg:hidden rotate-90`}
+            />
+          )}
         </header>
         {isMobile ? (
-          <ul className="list-none w-full overflow-x-scroll pt-3 gap-3 lg:gap-5 flex flex-row lg:pt-5 lg:flex-wrap lg:overflow-y-scroll">
-            {videos.slice(0, 5)?.map((video, index) => (
+          <ul className="list-none w-full overflow-x-scroll pt-3 gap-3 lg:gap-5 flex flex-row lg:pt-5 lg:flex-wrap lg:overflow-y-scroll no-scrollbar">
+            {videos?.slice(0, 5)?.map((video, index) => (
               <Video video={video} key={index} />
             ))}
           </ul>
diff --git a/src/views/Home/Portrait/Private/index.js b/src/views/Home/Portrait/Private/index.js
index d91e021..4a58163 100644
--- a/src/views/Home/Portrait/Private/index.js
+++ b/src/views/Home/Portrait/Private/index.js
@@ -1,18 +1,40 @@
-import React from 'react';
-import MyBooks from './MyBooks';
-import Shop from './Shop';
-import Videos from './Videos';
-import Blogs from './Blogs';
+import React, { useEffect } from "react";
+import { connect } from "react-redux";
+import { book, blog } from "../../../../redux/actions";
+import MyBooks from "./MyBooks";
+import Shop from "./Shop";
+import Videos from "./Videos";
+import Blogs from "./Blogs";
 
-function Private() {
+function Private({ getList, products, blogs, getBlogList, grades }) {
+  useEffect(() => {
+    if (products.length === 0) {
+      getList({ vod: true });
+    }
+    if(blogs.length === 0){
+      getBlogList();
+    }
+    // console.log(getBlogList());
+  }, []);
   return (
     <div className="w-full flex-1 pb-6">
-      <MyBooks />
-      <Shop />
-      <Videos />
-      <Blogs />
+      <MyBooks books={products} grades={grades} />
+      <Shop list={products} grades={grades} />
+      <Videos videos={products} grades={grades} />
+      <Blogs list={blogs} />
     </div>
-  )
+  );
 }
 
-export default Private;
+const mapStateToProps = (state) => ({
+  products: state.book.list,
+  blogs: state.blog.list,
+  grades: state.publicApi.grades
+});
+
+const mapDispatchToProps = {
+  getList: book.list,
+  getBlogList: blog.list
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Private);
diff --git a/src/views/Home/Portrait/Public/GradiantText/index.js b/src/views/Home/Portrait/Public/GradiantText/index.js
index 0b6fe70..9a64352 100644
--- a/src/views/Home/Portrait/Public/GradiantText/index.js
+++ b/src/views/Home/Portrait/Public/GradiantText/index.js
@@ -7,10 +7,10 @@ function GradiantText() {
       className="w-full flex flex-col items-center py-10"
       style={{ background: `url(${phraseImage})` }}
     >
-      <h2 class="text-3xl font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-blue-900 to-blue-300">
+      <h2 className="text-3xl font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-blue-900 to-blue-300">
         یادگیری بدون وقفه
       </h2>
-      <h2 class="text-3xl font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-blue-300 to-blue-900">
+      <h2 className="text-3xl font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-blue-300 to-blue-900">
         لذت یادگیری هوشمند
       </h2>
     </div>
diff --git a/src/views/Products/index.js b/src/views/Products/index.js
index eb57916..5d2ee40 100644
--- a/src/views/Products/index.js
+++ b/src/views/Products/index.js
@@ -1,14 +1,14 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { Link } from "react-router-dom";
 import { connect } from "react-redux";
-import Search from "../../components/Search";
-import Select from "../../components/Select";
-import Sidebar from "./layouts/Sidebar";
-import Main from "./layouts/Main";
+
+import Sidebar from "./layouts/Desktop/Sidebar";
+import Main from "./layouts/Desktop/Main";
+import Header from "./layouts/Mobile/Header";
+import MobileMain from "./layouts/Mobile/Main";
 import { book, publicApi } from "../../redux/actions";
 
 //assets
-import searchLight from "../../assets/icons/search-light.svg";
 
 export const Products = ({
   isDark,
@@ -16,32 +16,15 @@ export const Products = ({
   books,
   getList,
   grades,
-  gradeFilter,
-  selectedGrade,
-  gradeFilterBooks,
   setHeaderOptions,
   headerOptions,
   desktopContentTransform,
 }) => {
-  const [filter, setFilter] = useState({
-    search: "",
-    grade: "",
-    productsType: "کتاب",
-  });
-
-  const onChange = (name, value) => {
-    setFilter({ ...filter, [name]: value });
-  };
-
   useEffect(() => {
-    getList({vod : true});
+    getList({ vod: true });
     setHeaderOptions(headerOptions);
   }, []);
 
-  useEffect(() => {
-    gradeFilter(filter.grade);
-  }, [filter]);
-
   const Product = ({ productsType, product, index }) => {
     return (
       <>
@@ -97,73 +80,21 @@ export const Products = ({
       {/* Portrait  */}
       <div
         className={`w-full flex flex-col bg-transparent relative  ${
-          desktopContentTransform ? "top-24 z-10" : ""
+          desktopContentTransform ? "lg:top-24 z-10" : ""
         }`}
       >
         {isMobile ? (
-          <>
-            <header className="w-full px-4">
-              <Search
-                backgroundColor="bg-grayF9 dark:bg-gray2077"
-                borderColor="border-grayDB dark:border-gray45"
-                textColor="text-blueC0 dark:text-white"
-                icon={searchLight}
-              />
-              <div className="w-full flex flex-row justify-between mt-3">
-                <Select
-                  margin="ml-1"
-                  fill="fill-blueC0 dark:fill-white"
-                  borderColor="border-grayDB dark:border-gray45"
-                  backgroundColor="bg-grayF9 dark:bg-gray2077"
-                  onChange={onChange}
-                  name="productsType"
-                  options={["کتاب", "ویديو", "اشتراک"]}
-                  // hoverFill="fill-greenBA"
-                />
-                <Select
-                  margin="mr-1"
-                  fill="fill-blueC0 dark:fill-white"
-                  borderColor="border-grayDB dark:border-gray45"
-                  backgroundColor="bg-grayF9 dark:bg-gray2077"
-                  onChange={onChange}
-                  name="grade"
-                  options={Object.values(grades)}
-                  // hoverFill="fill-grayBA"
-                />
-              </div>
-            </header>
-            <div className="w-full flex flex-row flex-wrap mt-3">
-              {selectedGrade
-                ? gradeFilterBooks?.map((product, index) => (
-                    <Product
-                      key={index}
-                      productsType={filter.productsType}
-                      product={product}
-                      index={Number(index)}
-                      grades={grades}
-                    />
-                  ))
-                : books?.map((product, index) => (
-                    <Product
-                      key={index}
-                      productsType={filter.productsType}
-                      product={product}
-                      index={Number(index)}
-                    />
-                  ))}
-            </div>
-          </>
+          <div className="h-screen w-full overflow-hidden">
+            <Header />
+            <MobileMain books={books} grades={grades} />
+          </div>
         ) : (
           <div
             className={`w-full flex flex-row gap-10 px-5 overflow-y-hidden mt-3 justify-center lg:pt-24 lg:mt-0`}
           >
             <div className="w-11/12 flex flex-row gap-5 justify-end">
-              <Sidebar onChange={onChange} />
-              <Main
-                filter={filter}
-                books={books}
-                grades={grades}
-              />
+              <Sidebar />
+              <Main books={books} grades={grades} />
             </div>
           </div>
         )}
@@ -176,10 +107,8 @@ const mapStateToProps = (state) => ({
   isDark: state.publicApi.isDark,
   isMobile: state.publicApi.isMobile,
   books: state.book.list,
-  listVOD: state.product.listVOD,
   grades: state.publicApi.grades,
-  gradeFilterBooks: state.book.gradeFilterBooks,
-  selectedGrade: state.book.selectedGrade,
+  filterOptions: state.book.filterOptions,
   desktopContentTransform: state.publicApi.desktopContentTransform,
 });
 
@@ -187,6 +116,7 @@ const mapDispatchToProps = {
   getList: book.list,
   gradeFilter: book.gradeFilter,
   setHeaderOptions: publicApi.setHeaderOptions,
+  setFilterOptions: book.setFilterOptions,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Products);
diff --git a/src/views/Products/layouts/Main.js b/src/views/Products/layouts/Desktop/Main.js
similarity index 96%
rename from src/views/Products/layouts/Main.js
rename to src/views/Products/layouts/Desktop/Main.js
index 1cef5bc..9c7c680 100644
--- a/src/views/Products/layouts/Main.js
+++ b/src/views/Products/layouts/Desktop/Main.js
@@ -3,10 +3,10 @@ import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import { ScrollingCarousel } from "@trendyol-js/react-carousel";
 
-import Product from "../../../components/Product";
-import VodProduct from "../../../components/VodProduct";
-import Loading from "../../../components/Loading";
-import { book, publicApi } from "../../../redux/actions";
+import Product from "../../../../components/Product";
+import VodProduct from "../../../../components/VodProduct";
+import Loading from "../../../../components/Loading";
+import { book, publicApi } from "../../../../redux/actions";
 
 export const Main = ({ books, grades, sortMethods, filterOptions }) => {
   const [filterLoading, setFilterLoading] = useState(false);
@@ -201,7 +201,6 @@ const mapStateToProps = (state) => ({
   isMobile: state.publicApi.isMobile,
   sortMethods: state.book.sortMethods,
   filterOptions: state.book.filterOptions,
-  filterResult: state.book.filterResult,
 });
 
 const mapDispatchToProps = {
diff --git a/src/views/Products/layouts/Sidebar.js b/src/views/Products/layouts/Desktop/Sidebar.js
similarity index 95%
rename from src/views/Products/layouts/Sidebar.js
rename to src/views/Products/layouts/Desktop/Sidebar.js
index 9220191..eb2aee8 100644
--- a/src/views/Products/layouts/Sidebar.js
+++ b/src/views/Products/layouts/Desktop/Sidebar.js
@@ -1,14 +1,13 @@
 import React, { useState, useMemo } from "react";
 import { connect } from "react-redux";
-import { book } from "../../../redux/actions";
-import Checkbox from "../../../components/Checkbox";
-import Switch from "../../../components/Switch";
+import { book } from "../../../../redux/actions";
+import Checkbox from "../../../../components/Checkbox";
+import Switch from "../../../../components/Switch";
 
 //assets
-import dropdownIcon from "../../../assets/icons/dropdown-blue.svg";
+import dropdownIcon from "../../../../assets/icons/dropdown-blue.svg";
 
 export const Sidebar = ({
-  onChange,
   levels,
   subjects,
   productTypes,
diff --git a/src/views/Products/layouts/Mobile/Header.js b/src/views/Products/layouts/Mobile/Header.js
new file mode 100644
index 0000000..68d0986
--- /dev/null
+++ b/src/views/Products/layouts/Mobile/Header.js
@@ -0,0 +1,69 @@
+import React from "react";
+import { connect } from "react-redux";
+import { book } from "../../../../redux/actions";
+import _ from "lodash";
+
+import Search from "../../../../components/Search";
+import Select from "../../../../components/Select";
+
+import searchLight from "../../../../assets/icons/search-light.svg";
+
+export const Header = ({
+  setFilterOptions,
+  filterOptions,
+  levels,
+  productTypes,
+  isDark
+}) => {
+  return (
+    <header className="w-full px-4 fixed top-0 left-0  pb-5 z-10" style={{backgroundColor: isDark ? '#061B30' : 'white'}}>
+      <Search
+        backgroundColor="bg-gray-100 dark:bg-blueC0 dark:bg-opacity-70"
+        borderColor="border-grayDB dark:border-gray45"
+        textColor="text-black dark:text-white"
+        icon={searchLight}
+        onChange={_.debounce(
+          (val) => setFilterOptions({ ...filterOptions, search: val }),
+          700
+        )}
+      />
+      <div className="w-full flex flex-row justify-between mt-3">
+        <Select
+          margin="ml-1"
+          fill="fill-green-700 dark:fill-white"
+          borderColor="border-grayDB dark:border-gray45"
+          backgroundColor="bg-gray-100"
+          onChange={(name, value) =>
+            setFilterOptions({ ...filterOptions, [name]: value })
+          }
+          name="productType"
+          options={productTypes}
+        />
+        <Select
+          margin="mr-1"
+          fill="fill-green-700 dark:fill-white"
+          borderColor="border-grayDB dark:border-gray45"
+          backgroundColor="bg-gray-100"
+          onChange={(name, value) =>
+            setFilterOptions({ ...filterOptions, [name]: value })
+          }
+          name="grade"
+          options={Object.values(levels)}
+        />
+      </div>
+    </header>
+  );
+};
+
+const mapStateToProps = (state) => ({
+  levels: state.publicApi.grades,
+  productTypes: state.book.productTypes,
+  filterOptions: state.book.filterOptions,
+  isDark: state.publicApi.isDark
+});
+
+const mapDispatchToProps = {
+  setFilterOptions: book.setFilterOptions,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Header);
diff --git a/src/views/Products/layouts/Mobile/Main.js b/src/views/Products/layouts/Mobile/Main.js
new file mode 100644
index 0000000..289063b
--- /dev/null
+++ b/src/views/Products/layouts/Mobile/Main.js
@@ -0,0 +1,164 @@
+import React, { useEffect, useState } from "react";
+import { connect } from "react-redux";
+import { Link } from "react-router-dom";
+
+import Loading from "../../../../components/Loading";
+
+//assets
+import whitePlayIcon from "../../../../components/VodProduct/white-play-button-icon.svg";
+
+export const Main = ({ books, filterOptions, grades }) => {
+  const [filterLoading, setFilterLoading] = useState(false);
+
+  useEffect(() => {
+    setFilterLoading(() => true);
+    setTimeout(() => {
+      setFilterLoading(() => false);
+    }, 500);
+  }, [filterOptions]);
+
+  const Items = (type) => {
+    const { grade, subject, available, sort, productType, search } =
+      filterOptions;
+    let byGradeFilter;
+    let bySubjectFilter;
+    let byAvailableFilter;
+    let bySearchFilter;
+    if (grade) {
+      byGradeFilter = books?.filter((book) => grades[book?.gradeId] === grade);
+    } else {
+      byGradeFilter = books;
+    }
+    if (subject) {
+      bySubjectFilter = byGradeFilter?.filter(
+        (book) =>
+          book?.product[type]?.name?.indexOf(subject) !== -1 ||
+          book?.name.indexOf(subject) !== -1
+      );
+    } else {
+      bySubjectFilter = byGradeFilter;
+    }
+    if (available) {
+      byAvailableFilter = bySubjectFilter?.filter(
+        (book) => book.product[type].price
+      );
+    } else {
+      byAvailableFilter = bySubjectFilter;
+    }
+    if (search) {
+      bySearchFilter = byAvailableFilter?.filter(
+        (book) =>
+          book?.product[type]?.name?.indexOf(search) !== -1 ||
+          book?.name.indexOf(search) !== -1
+      );
+    } else {
+      bySearchFilter = byAvailableFilter;
+    }
+
+    return filterOptions.productType === "دوره ویدئویی"
+      ? bySearchFilter?.map((product, index) => (
+          <Link
+            to={"/products" + product?.id}
+            className={`w-full flex flex-col border-grayDB dark:border-gray45 p-3 border-solid mb-5 shadow-md mx-4`}
+            key={index}
+          >
+            <div
+              className="relative w-full mb-2"
+              style={{ height: "calc(100vh / 5)" }}
+            >
+              <img
+                src={"https://dnvn.ir/api/v1/file/" + product?.fileIds}
+                className="w-full rounded-md h-full"
+              />
+              <div
+                className={`absolute left-1/2 top-1/2 rounded-full p-4 group-hover:scale-125 transform -translate-x-1/2 -translate-y-1/2 duration-300 bg-playButtonIcon bg-black bg-opacity-20 backdrop-filter backdrop-blur-md`}
+              >
+                <img src={whitePlayIcon} alt="" className="w-5 h-5" />
+              </div>
+            </div>
+
+            <strong className="text-blue5F dark:text-white text-lg lg:text-tiny font-bold mb-2">
+              {product?.name}
+            </strong>
+            <span className="text-tiny lg:text-sm text-green7B dark:text-white font-light mb-4">
+              {"پایه" + " " + grades[product?.gradeId]}
+            </span>
+            <div className="w-full flex flex-row justify-center font-bold lg:font-medium text-lg lg:text-tiny text-blue5F dark:text-white">
+              {product?.product[2]?.price + " " + "تومان"}
+            </div>
+          </Link>
+        ))
+      : bySearchFilter?.map((product, index) => (
+          <>
+            {(productType ? productType === "کتاب دیجیتال" : true) && (
+              <Link
+                key={index}
+                to={"/products/" + product?.id}
+                className={`w-1/2 flex flex-col border-t border-grayDB dark:border-gray45 p-3 border-solid ${
+                  index % 2 === 0 ? "border-l" : ""
+                }`}
+              >
+                <img
+                  src={"https://dnvn.ir/api/v1/file/" + product?.fileIds}
+                  className="w-full rounded-md mb-2"
+                />
+                <strong className="text-blue5F dark:text-white text-base lg:text-sm font-medium mb-2">
+                  {"کتاب دیجیتال" + " " + product?.name}
+                </strong>
+                <span className="text-tiny lg:text-xs text-green7B dark:text-white font-light mb-4">
+                  {"پایه" + " " + grades[product?.gradeId]}
+                </span>
+                <div className="w-full flex flex-row justify-center font-bold lg:font-medium text-lg lg:text-sm text-blue5F dark:text-white">
+                  {product?.product[0]?.price + " " + "تومان"}
+                </div>
+              </Link>
+            )}
+            {(productType ? productType === "کتاب فیزیکی" : true) && (
+              <Link
+                key={index}
+                to={"/products/" + product?.id}
+                className={`w-1/2 flex flex-col border-t border-grayDB dark:border-gray45 p-3 border-solid ${
+                  index % 2 === 0 ? "border-l" : ""
+                }`}
+              >
+                <img
+                  src={"https://dnvn.ir/api/v1/file/" + product?.fileIds}
+                  className="w-full rounded-md mb-2"
+                />
+                <strong className="text-blue5F dark:text-white text-lg lg:text-sm font-medium mb-2">
+                  {"کتاب فیزیکی" + " " + product?.name}
+                </strong>
+                <span className="text-tiny lg:text-xs text-green7B dark:text-white font-light mb-4">
+                  {"پایه" + " " + grades[product?.gradeId]}
+                </span>
+                <div className="w-full flex flex-row justify-center font-bold lg:font-medium text-lg lg:text-sm text-blue5F dark:text-white">
+                  {product?.product[1]?.price + " " + "تومان"}
+                </div>
+              </Link>
+            )}
+          </>
+        ));
+  };
+
+  return (
+    <div className="h-full overflow-y-scroll w-full flex flex-wrap py-32">
+      {filterOptions?.productType === "دوره ویدئویی" && Items(2)}
+      {filterOptions?.productType === "کتاب دیجیتال" && Items(0)}
+      {filterOptions?.productType === "کتاب فیزیکی" && Items(1)}
+      {!filterOptions?.productType && Items(0)}
+      {filterLoading && (
+        <div className="w-full h-screen flex justify-center items-center bg-white bg-opacity-20 backdrop-filter backdrop-blur-xl fixed left-0 top-0">
+          <Loading size={4} color="bg-green-400" />
+        </div>
+      )}
+    </div>
+  );
+};
+
+const mapStateToProps = (state) => ({
+  filterOptions: state.book.filterOptions,
+});
+
+const mapDispatchToProps = {};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Main);