diff --git a/src/components/GradeFilter/index.tsx b/src/components/GradeFilter/index.tsx
index e17fb83..9d0adeb 100644
--- a/src/components/GradeFilter/index.tsx
+++ b/src/components/GradeFilter/index.tsx
@@ -6,15 +6,20 @@ import "./index.scss";
 import dropdown from "../../assets/icons/dropdown.png";
 
 
-function GradeFilter({selectedGrade, gradeFilter, grades}: any) {
+function GradeFilter({selectedGrade, gradeFilter, grades, gradeDropdown, setGradeDropdown}: any) {
   const [arrowTop, setArrowTop] = useState(false);
 
   useEffect(() => {
-    setArrowTop(false);
+    setGradeDropdown(false);
   }, [selectedGrade]);
 
   const mobileList = useRef<HTMLUListElement>(null);
 
+  const setDropdown = (e : any) => {
+    e.stopPropagation();
+    setGradeDropdown(!gradeDropdown);
+  }
+
   return (
     <section className="grade-filter d-flex align-items-center">
       <h1 className="d-flex align-items-center">
@@ -23,7 +28,7 @@ function GradeFilter({selectedGrade, gradeFilter, grades}: any) {
       </h1>
       <div
         className="grade-filter__box d-flex"
-        onClick={() => setArrowTop(!arrowTop)}
+        onClick={(e : any) => setDropdown(e)}
       >
         {selectedGrade ? (
           <h2>{grades[selectedGrade - 1].name}</h2>
@@ -33,9 +38,10 @@ function GradeFilter({selectedGrade, gradeFilter, grades}: any) {
         <img
           src={dropdown}
           style={{ transform: !arrowTop ? "rotate(180deg)" : "rotate(0deg)" }}
+          alt=""
         />
       </div>
-      {arrowTop ? (
+      {gradeDropdown ? (
         <ul className="grade-filter__list d-flex flex-wrap">
           {grades.map((item: any, i: any) => (
             <li
diff --git a/src/components/HomeSearchBox/index.scss b/src/components/HomeSearchBox/index.scss
index a8dd2f3..e8aaa46 100644
--- a/src/components/HomeSearchBox/index.scss
+++ b/src/components/HomeSearchBox/index.scss
@@ -2,6 +2,9 @@
   width: 100%;
   font-family: numeralLight;
   margin: 0px auto;
+  * {
+    transition: all 0.5s;
+  }
   form {
     button {
       background-color: #39383d;
@@ -168,7 +171,7 @@
       width: 55px;
       background : inherit !important;
       & img{
-        width: 35px;
+        width: 28px;
       }
     }
     &__searchIcon {
@@ -176,7 +179,7 @@
       left: 62px;
       top: 50%;
       transform: translateY(-50%);
-      width: 27px;
+      width: 20px;
     }
     form {
       width: 100%;
@@ -185,13 +188,13 @@
       border-radius: 8px;
       input {
         width: 100%;
-        padding: 10px 10px;
-        font-size: calc(100vw / 25);
+        padding: 5px 10px;
+        font-size: calc(100vw / 30);
         padding-right: 20px;
         border-radius: 8px;
         background: #383838;
         &::placeholder {
-          font-size: calc(100vw / 30);
+          font-size: calc(100vw / 34);
           color: white !important;
         }
       }
diff --git a/src/components/HomeSearchBox/index.tsx b/src/components/HomeSearchBox/index.tsx
index 41d0686..db75312 100644
--- a/src/components/HomeSearchBox/index.tsx
+++ b/src/components/HomeSearchBox/index.tsx
@@ -51,7 +51,7 @@ function HomeSearchBox({
           <img src={voice} alt="" />
         </button>
       </form>
-      <footer className="d-flex">
+      <footer className="desktop">
         <strong>جدیدترین‌ها</strong>
         <ul className="d-flex">
           {lastItems.map((item: any, i: any) => (
diff --git a/src/components/Navbar/index.scss b/src/components/Navbar/index.scss
index 82cbdcb..3ada980 100644
--- a/src/components/Navbar/index.scss
+++ b/src/components/Navbar/index.scss
@@ -7,6 +7,7 @@
   top: 0px !important;
   left: 0px;
   z-index: 150;
+  
   &__container{
     width: 100%;
     font-family: numeralLight;
diff --git a/src/components/NavbarDrawer/NavbarDrawer.scss b/src/components/NavbarDrawer/NavbarDrawer.scss
index ff7f3f9..df152ce 100644
--- a/src/components/NavbarDrawer/NavbarDrawer.scss
+++ b/src/components/NavbarDrawer/NavbarDrawer.scss
@@ -1,8 +1,8 @@
 .MuiDrawer-paperAnchorRight {
   background: rgb(28, 28, 28) !important;
   &::-webkit-scrollbar {
-    display: none;
-    width: 0px;
+    display: none !important;
+    width: 0px !important;
   }
 }
 .navbar-drawer {
@@ -127,6 +127,15 @@
   }
 }
 
+.PrivateSwipeArea-root{
+  width: 0px !important;
+}
+
+.MuiPaper-root{
+  transform: translateX(0px) !important;
+  transition: all 0.5s !important;
+}
+
 .navbar-drawer__bottom a {
   width: 100%;
   height: 100px;
diff --git a/src/redux/actions-type/index.tsx b/src/redux/actions-type/index.tsx
index 1f42bfe..a43c16c 100644
--- a/src/redux/actions-type/index.tsx
+++ b/src/redux/actions-type/index.tsx
@@ -7,6 +7,7 @@ export type { default as productAction } from "./product";
 export type { default as FaqAction } from "./faq";
 export type { default as FileAction } from "./file";
 export type { default as UserFactorAction } from "./userFactor";
+export type { default as UserProductAction } from "./userProduct";
 
 
 
diff --git a/src/redux/actions-type/userFactor.tsx b/src/redux/actions-type/userFactor.tsx
index 8a21e58..e3f58e6 100644
--- a/src/redux/actions-type/userFactor.tsx
+++ b/src/redux/actions-type/userFactor.tsx
@@ -14,12 +14,12 @@ interface update {
 }
 
 interface payment {
-  type: "userFactor/payment";
+  type: "userFactor/paymentVOD";
   data: any;
 }
 
 interface verify {
-  type: "userFactor/verify";
+  type: "userFactor/verifyVOD";
   data: any;
 }
 
diff --git a/src/redux/actions-type/userProduct.tsx b/src/redux/actions-type/userProduct.tsx
new file mode 100644
index 0000000..5e50b1f
--- /dev/null
+++ b/src/redux/actions-type/userProduct.tsx
@@ -0,0 +1,20 @@
+interface addVOD {
+  type: "userProduct/addVOD";
+  data: any;
+}
+
+interface error{
+  type : "userProduct/error"
+  data : undefined
+}
+
+interface loading{
+  type : "userProduct/loading"
+  data : undefined
+}
+
+
+type UserProductAction = addVOD | error | loading;
+  
+
+export default UserProductAction;
diff --git a/src/redux/actions/userFactor.tsx b/src/redux/actions/userFactor.tsx
index 58d6428..567536e 100644
--- a/src/redux/actions/userFactor.tsx
+++ b/src/redux/actions/userFactor.tsx
@@ -2,13 +2,15 @@ import proxy from "../proxy";
 import { Dispatch } from "redux";
 const userFactor = {
   payment:
-    (data = {}) =>
-    async (dispatch: Dispatch) =>
-      await proxy.get("userFactor/payment", data, { dispatch }),
+    (data1 = {}, data2 = {}) =>
+    async (dispatch: Dispatch) => {
+      await proxy.post("userProduct/addVOD", data1, { dispatch });
+      await proxy.post("userFactor/paymentVOD", data2, { dispatch });
+    },
   verify:
     (data = {}) =>
     async (dispatch: Dispatch) =>
-      await proxy.get("userFactor/verify", data, { dispatch }),
+      await proxy.post("userFactor/verifyVOD", data, { dispatch }),
   info:
     (data = {}) =>
     async (dispatch: Dispatch) =>
diff --git a/src/redux/actions/userProduct.tsx b/src/redux/actions/userProduct.tsx
index b74946d..5417a75 100644
--- a/src/redux/actions/userProduct.tsx
+++ b/src/redux/actions/userProduct.tsx
@@ -7,4 +7,4 @@ const userProduct = {
       await proxy.post("userProduct/addVOD", data, { dispatch }),
 };
 
-export default userProduct;
+export default userProduct;
\ No newline at end of file
diff --git a/src/redux/reducers/index.tsx b/src/redux/reducers/index.tsx
index d84d04c..e5ec6b1 100644
--- a/src/redux/reducers/index.tsx
+++ b/src/redux/reducers/index.tsx
@@ -7,5 +7,7 @@ export { default as product } from "./product";
 export { default as faq } from "./faq";
 export { default as file } from "./file";
 export { default as userFactor } from "./userFactor";
+export { default as userProduct } from "./userProduct";
+
 
 
diff --git a/src/redux/reducers/public.tsx b/src/redux/reducers/public.tsx
index a43c101..a1f1e7e 100644
--- a/src/redux/reducers/public.tsx
+++ b/src/redux/reducers/public.tsx
@@ -75,7 +75,9 @@ export default function publicApi(state = initialState, action: PublicAction) {
         loading: false,
         bookSection: data,
         error: null,
-        selectedVideo: data?.vods?.filter((item: any) => item.name === videoId)[0],
+        selectedVideo: videoId
+          ? data?.vods?.filter((item: any) => item.name === videoId)[0]
+          : data?.vods[0],
       };
 
     case "public/vod/bookCourse":
@@ -98,6 +100,7 @@ export default function publicApi(state = initialState, action: PublicAction) {
         categories: allCats.map((item: any) =>
           data.vods.filter((item1: any) => item1.categoryId === item)
         ),
+        selectedVideo: data?.vods[0],
       };
     case "public/homePage":
       let itemsLevel;
diff --git a/src/redux/reducers/userFactor.tsx b/src/redux/reducers/userFactor.tsx
index aa0ac22..57c787e 100644
--- a/src/redux/reducers/userFactor.tsx
+++ b/src/redux/reducers/userFactor.tsx
@@ -24,10 +24,10 @@ export default function userFactor(state = initialState, action : UserFactorActi
     //   return { ...state, loading: false, error: null, sum: data.payPrice };
     case "userFactor/deleteUserOffCode":
       return { ...state, loading: false, error: null };
-    case "userFactor/payment":
+    case "userFactor/paymentVOD":
       window.location.replace(data);
       return { ...state, loading: false, error: null, isVerified: false };
-    case "userFactor/verify":
+    case "userFactor/verifyVOD":
       return { ...state, loading: false, error: null, isVerified: true };
     case "userFactor/loading":
       return { ...state, loading: true };
diff --git a/src/redux/reducers/userProduct.tsx b/src/redux/reducers/userProduct.tsx
new file mode 100644
index 0000000..e08bd9f
--- /dev/null
+++ b/src/redux/reducers/userProduct.tsx
@@ -0,0 +1,20 @@
+import { toast } from "react-toastify";
+import {UserProductAction} from '../actions-type';
+const initialState = {
+  loading: false,
+  error: null,
+};
+export default function userFactor(state = initialState, action : UserProductAction) {
+  let { type, data } = action;
+  switch (type) {
+    case "userProduct/addVOD":
+      return { ...state, loading: false, error: null };
+    case "userProduct/loading":
+      return { ...state, loading: true };
+    case "userProduct/error":
+      toast.error(data.message);
+      return { ...state, loading: false, error: data.message };
+    default:
+      return state;
+  }
+}
diff --git a/src/views/Home/index.tsx b/src/views/Home/index.tsx
index 8a6a589..de2eb29 100644
--- a/src/views/Home/index.tsx
+++ b/src/views/Home/index.tsx
@@ -32,6 +32,7 @@ function Home({
   const [grade, setGrade] = useState(null);
   const [vocal, setVocal] = useState(false);
   const [inputValue, setInputValue] = useState("");
+  const [gradeDropdown, setGradeDropdown] = useState(false);
 
   useEffect(() => {
     if (inputValue) {
@@ -42,13 +43,16 @@ function Home({
   useEffect(() => {
     getCourseList();
     scroll.goToTop();
-    getHeader({device : 1});
+    getHeader({ device: 1 });
   }, []);
   return (
     <>
       <div
         className="home main d-flex flex-column"
-        style={{ filter: (vocal || bookLoading || publicLoading)  ? "blur(8px)" : "" }}
+        style={{
+          filter: vocal || bookLoading || publicLoading ? "blur(8px)" : "",
+        }}
+        onClick={() => setGradeDropdown(false)}
       >
         <Navbar />
         <div className="desktop">
@@ -60,7 +64,13 @@ function Home({
           setInputValue={setInputValue}
         />
         <Courses courses={sortFilterCourse ? sortFilterCourse : courseList} />
-        <GradeFilter grades={grades} grade={grade} setGrade={setGrade} />
+        <GradeFilter
+          grades={grades}
+          grade={grade}
+          setGrade={setGrade}
+          gradeDropdown={gradeDropdown}
+          setGradeDropdown={setGradeDropdown}
+        />
         <Books list={gradeFilterBooks ? gradeFilterBooks : courseList} />
         <Blogs />
         <AppDownload />
@@ -69,11 +79,11 @@ function Home({
       {vocal ? (
         <Vocal setVocal={setVocal} setInputValue={setInputValue} />
       ) : null}
-      {
-        (bookLoading || publicLoading ) && <div className="full-loader">
+      {(bookLoading || publicLoading) && (
+        <div className="full-loader">
           <Loader size={50} />
         </div>
-      }
+      )}
     </>
   );
 }
@@ -86,7 +96,7 @@ export default connect(
     selectedSort: state.book.selectedSort,
     headerData: state.publicApi.header,
     bookLoading: state.book.loading,
-    publicLoading : state.publicApi.loading,
+    publicLoading: state.publicApi.loading,
   }),
   {
     getCourseList: book.list,
diff --git a/src/views/Subscription/SubscribeRadio/index.tsx b/src/views/Subscription/SubscribeRadio/index.tsx
index 05a7f5c..d13ed3a 100644
--- a/src/views/Subscription/SubscribeRadio/index.tsx
+++ b/src/views/Subscription/SubscribeRadio/index.tsx
@@ -4,9 +4,16 @@ import CustomCheckbox from "../../../components/CustomCheckbox";
 import CircleRoundedIcon from "@mui/icons-material/CircleRounded";
 import RadioButtonUncheckedRoundedIcon from "@mui/icons-material/RadioButtonUncheckedRounded";
 import { connect } from "react-redux";
-import {product } from "../../../redux/actions";
+import { product, userProduct } from "../../../redux/actions";
 
 function SubscribeRadio({ data, selectedVOD, selectVOD }: any) {
+  const submitVOD = (value : any) => {
+    if(selectedVOD?.id === data.id){
+      selectVOD(null);
+    }else{
+      selectVOD(data)
+    }
+  }
   return (
     <div
       className={
@@ -15,9 +22,7 @@ function SubscribeRadio({ data, selectedVOD, selectVOD }: any) {
         (selectedVOD?.id === data.id ? "subscribe-radio-active" : "")
       }
       onClick={() =>
-        selectedVOD?.id === data.id
-          ? selectVOD(null)
-          : selectVOD(data)
+         submitVOD(data)
       }
     >
       <div className="subscribe-radio__name d-flex align-items-center">
@@ -29,7 +34,12 @@ function SubscribeRadio({ data, selectedVOD, selectVOD }: any) {
           }
           checkedIcon={
             <CircleRoundedIcon
-              style={{ color: "white", fontSize: 37, padding: 0, margin : '6px 3px 3px' }}
+              style={{
+                color: "white",
+                fontSize: 37,
+                padding: 0,
+                margin: "6px 3px 3px",
+              }}
             />
           }
           checked={selectedVOD?.id === data.id}
@@ -38,20 +48,20 @@ function SubscribeRadio({ data, selectedVOD, selectVOD }: any) {
       </div>
       <div className="subscribe-radio__factor d-flex flex-column justify-content-center align-items-center">
         {/* {data.offPercent !== 0 && ( */}
-          <div className="subscribe-radio__factor--off d-flex align-items-center">
-            <b>
-              {data.offerPrice}
-              <span></span>
-            </b>
-            <i>تومان</i>
-          </div>
+        <div className="subscribe-radio__factor--off d-flex align-items-center">
+          <b>
+            {data.offerPrice}
+            <span></span>
+          </b>
+          <i>تومان</i>
+        </div>
         {/* )} */}
         <div className="subscribe-radio__factor--finalPrice d-flex align-items-center">
           <strong>{data.price}</strong>
           <i>تومان</i>
         </div>
         {/* {data.offPercent !== 0 && ( */}
-          {/* <span className="subscribe-radio__factor--tag">{`${30}% تخفیف ویژه`}</span> */}
+        {/* <span className="subscribe-radio__factor--tag">{`${30}% تخفیف ویژه`}</span> */}
         {/* )} */}
       </div>
     </div>
@@ -62,5 +72,5 @@ export default connect(
   (state: any) => ({
     selectedVOD: state.product.selectedVOD,
   }),
-  { selectVOD: product.selectVOD }
+  { selectVOD: product.selectVOD, addVOD: userProduct.addVOD }
 )(SubscribeRadio);
diff --git a/src/views/Subscription/index.tsx b/src/views/Subscription/index.tsx
index ad46292..38a0ab5 100644
--- a/src/views/Subscription/index.tsx
+++ b/src/views/Subscription/index.tsx
@@ -4,12 +4,12 @@ import Footer from "../Home/Footer";
 import SubscribeRadio from "./SubscribeRadio";
 import DiscountCode from "./DiscountCode";
 import { connect } from "react-redux";
-import { product } from "../../redux/actions";
+import { product, userFactor } from "../../redux/actions";
 import scroll from "../../util/scroll";
 import Loader from "../../components/Loader";
 import "./index.scss";
 
-function Subscription({ listVOD, getList, loading }: any) {
+function Subscription({ listVOD, getList, loading, selectedVOD, payment, verify }: any) {
   useEffect(() => {
     getList();
     scroll.goToTop();
@@ -17,7 +17,7 @@ function Subscription({ listVOD, getList, loading }: any) {
   return (
     <div className={"subscription main d-flex flex-column"}>
       <Navbar />
-      <main className={"d-flex flex-column" + ' ' + (loading && 'blur')}>
+      <main className={"d-flex flex-column" + " " + (loading && "blur")}>
         <h1>خرید اشتراک دانوین</h1>
         <p>
           لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده
@@ -29,7 +29,7 @@ function Subscription({ listVOD, getList, loading }: any) {
         ))}
         <DiscountCode />
         <div className="d-flex justify-content-end py-4">
-          <button className="submit submit-large">تایید و پرداخت</button>
+          <button className="submit submit-large" onClick={() => payment({productId : selectedVOD.id }, {}) }>تایید و پرداخت</button>
         </div>
       </main>
       <Footer />
@@ -46,6 +46,11 @@ export default connect(
   (state: any) => ({
     listVOD: state.product.listVOD,
     loading: state.product.loading,
+    selectedVOD: state.product.selectedVOD
   }),
-  { getList: product.listVOD }
+  {
+    getList: product.listVOD,
+    payment: userFactor.payment,
+    verify: userFactor.verify,
+  }
 )(Subscription);
diff --git a/src/views/VideoTube/AddComment/index.tsx b/src/views/VideoTube/AddComment/index.tsx
index 255aad4..e0b0cc0 100644
--- a/src/views/VideoTube/AddComment/index.tsx
+++ b/src/views/VideoTube/AddComment/index.tsx
@@ -5,7 +5,7 @@ import user3 from "../../../assets/images/user3.png";
 export default function AddComment() {
   return (
     <>
-      <Avatar src={user3} style={{ width: 65, height: 65, marginLeft: 10 }} />
+      <Avatar style={{ width: 60, height: 60, marginLeft: 10 }} />
       <div className="d-flex flex-column" style={{width : '100%'}}>
         <textarea rows={5} placeholder="نظر خود را در این قسمت بنویسید " />
         <div className="d-flex justify-content-end">
diff --git a/src/views/VideoTube/index.tsx b/src/views/VideoTube/index.tsx
index 4d488ef..9df7ef4 100644
--- a/src/views/VideoTube/index.tsx
+++ b/src/views/VideoTube/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import Navbar from "../../components/Navbar";
 import Footer from "../Home/Footer";
 import LessonPlayList from "./LessonPlayList";
@@ -24,6 +24,7 @@ function VodTube({
   categories,
   setVideoActive,
 }: any) {
+  const videoListTag = useRef(null);
   useEffect(() => {
     scroll.goToTop();
     // getInfo({
@@ -37,13 +38,12 @@ function VodTube({
   }, []);
 
   useEffect(() => {
-    if (localStorage.getItem("bookId")) {
-      setVideoActive(categories[0][0]);
-    } else {
-      if (!info) {
-        const cat: any = localStorage.getItem("category")?.split(",");
-        bookSection({ bookId: cat[0], categoryId: cat[1] });
-      }
+    if (!info && localStorage.getItem("category")) {
+      const cat: any = localStorage.getItem("category")?.split(",");
+      bookSection({ bookId: cat[0], categoryId: cat[1] });
+    }
+    if(info && localStorage.getItem("category")){
+      // document.getElementsByClassName('video-tube__sidebar--playlist___list').scrollTo(0,)
     }
   }, [info]);
   return (
@@ -86,18 +86,20 @@ function VodTube({
             <section className="video-tube__sidebar--playlist d-flex flex-column">
               <header className="d-flex justify-content-between align-items-center">
                 <div className="d-flex flex-column">
-                  <h2>{localStorage.getItem("category")?.split(',')[1] || 'لیست فیلم‌ها' }</h2>
+                  <h2>
+                    {localStorage.getItem("category")?.split(",")[1] ||
+                      "لیست فیلم‌ها"}
+                  </h2>
                   <p>در این قسمت توضیحی کوتاه قرار می گیرد</p>
                 </div>
                 <img src={listIcon} alt="" />
               </header>
-              <div className="video-tube__sidebar--playlist___list d-flex flex-column">
-                { localStorage.getItem("bookId")
+              <div ref={videoListTag} className="video-tube__sidebar--playlist___list d-flex flex-column">
+                {localStorage.getItem("bookId")
                   ? categories?.map((video: any, i: any) => (
                       <LessonPlayList category={video} key={i} />
                     ))
-                  : 
-                  info?.vods?.map((video: any, i: any) => (
+                  : info?.vods?.map((video: any, i: any) => (
                       <LessonPlayList category={video} key={i} />
                     ))}
               </div>