diff --git a/src/components/GradeFilter/index.scss b/src/components/GradeFilter/index.scss
index 30523f9..54fa5d5 100644
--- a/src/components/GradeFilter/index.scss
+++ b/src/components/GradeFilter/index.scss
@@ -43,14 +43,14 @@
       top: 0px;
       right: 0px;
       height: 100%;
-      width : calc(100% / 12);
+      width : calc(100% / 11);
       transition: right 0.5s;
       background-color: $green5;
       box-shadow: 0px 0px 20px $green;
       z-index: 50;
     }
     li{
-      width: calc(100% / 12);
+      width: calc(100% / 11);
       text-align: center;
       cursor: pointer;
       padding: 6px 0px;
@@ -60,12 +60,14 @@
   }
   &__active{
     border-radius: 5px;
+    color: white;
+    transition: all 0.3s;
   }
 }
 
 @media screen and (min-width: 1441px){
   .grade-filter{
-    max-width: 1350px;
+    max-width: $maxWidth;
     ul{
       position: relative;
     }
@@ -172,12 +174,13 @@
     position: relative;
     h1{
       font-size: calc(100vw / 30);
-      background-color: $green5;
+      background-color: $green;
       box-shadow: 0px 0px 2px $green;
       border-top-right-radius: 8px;
       border-bottom-right-radius: 8px;
-      padding: 13px 15px;
+      // padding: 13px 15px;
       color: white;
+      height: 100%;
     }
     &__box{
       flex: 1;
diff --git a/src/components/GradeFilter/index.tsx b/src/components/GradeFilter/index.tsx
index 889f25d..eeb2cab 100644
--- a/src/components/GradeFilter/index.tsx
+++ b/src/components/GradeFilter/index.tsx
@@ -75,7 +75,7 @@ function GradeFilter({
           <figure
             style={{
               right:
-                ((mobileList as any).current?.offsetWidth / 12) *
+                ((mobileList as any).current?.offsetWidth / 11) *
                 (selectedGrade - 1),
             }}
           ></figure>
@@ -84,7 +84,7 @@ function GradeFilter({
           <li
             key={i}
             onClick={(e) => gradeFilter(item.value)}
-            // className={selectedGrade === item.value ? "grade-filter__active" : ""}
+            className={selectedGrade === item.value ? "grade-filter__active" : ""}
           >
             {item.name}
           </li>
diff --git a/src/components/HomeSearchBox/index.scss b/src/components/HomeSearchBox/index.scss
index 8c563cc..252429f 100644
--- a/src/components/HomeSearchBox/index.scss
+++ b/src/components/HomeSearchBox/index.scss
@@ -5,6 +5,9 @@
   * {
     transition: all 0.5s;
   }
+  button{
+    border: none;
+  }
   &-dark{
     form {
       button {
@@ -80,7 +83,7 @@
 @media screen and (min-width: 1441px) {
   .home-search-box {
     width: 100%;
-    max-width: 1350px;
+    max-width: $maxWidth;
     padding: 40px 0px 10px;
     &__voice {
       display: none;
@@ -125,6 +128,7 @@
     padding: 40px 0px 10px;
     &__voice {
       display: none;
+
     }
     form {
       width: 850px;
@@ -204,10 +208,10 @@
       display: flex !important;
       justify-content: center;
       align-items: center;
-      width: 55px;
+      width: 45px;
       background : inherit !important;
       & img{
-        width: 28px;
+        width: 25px;
       }
     }
     &__searchIcon {
diff --git a/src/components/Navbar/index.scss b/src/components/Navbar/index.scss
index 3df1f0a..bafaaeb 100644
--- a/src/components/Navbar/index.scss
+++ b/src/components/Navbar/index.scss
@@ -61,7 +61,7 @@
 @media screen and (min-width: 1441px){
   .nav{
     &__container{
-      max-width: 1350px;
+      max-width: $maxWidth;
       &--links{
         li{
           padding: 0px;
@@ -171,5 +171,11 @@
     }
     &___login{
     }
+    &__search{
+      min-width : 50px !important;
+      & img{
+        width : 22px;
+      }
+    }
   }
 }
\ No newline at end of file
diff --git a/src/components/NavbarDrawer/NavbarDrawer.scss b/src/components/NavbarDrawer/NavbarDrawer.scss
index 1c6868a..78a2dec 100644
--- a/src/components/NavbarDrawer/NavbarDrawer.scss
+++ b/src/components/NavbarDrawer/NavbarDrawer.scss
@@ -1,6 +1,6 @@
 .navbar-drawer-light{
   .MuiDrawer-paperAnchorRight {
-    background: white !important;
+    // background: white !important;
     &::-webkit-scrollbar {
       display: none !important;
       width: 0px !important;
@@ -13,7 +13,7 @@
 
 .navbar-drawer-dark{
   .MuiDrawer-paperAnchorRight {
-    background: rgb(28, 28, 28) !important;
+    // background: rgb(28, 28, 28) !important;
     &::-webkit-scrollbar {
       display: none !important;
       width: 0px !important;
@@ -26,6 +26,8 @@
   text-align: right !important;
   direction: rtl;
   padding: 30px 0px 10px 0px;
+  height: 100vh;
+  border-left: 1px solid $gray5;
   a {
     text-decoration: none;
   }
diff --git a/src/components/NavbarDrawer/NavbarDrawer.tsx b/src/components/NavbarDrawer/NavbarDrawer.tsx
index be5a9c9..dd96e65 100644
--- a/src/components/NavbarDrawer/NavbarDrawer.tsx
+++ b/src/components/NavbarDrawer/NavbarDrawer.tsx
@@ -185,7 +185,7 @@ const NavbarDrawer = ({ status, logout, theme }: any) => {
       className={_.join(
         [
           "navbar-drawer d-flex flex-column",
-          light ? "navbar-drawer-light" : "navbar-drawer-dark",
+          light ? "navbar-drawer-light bg-light" : "navbar-drawer-dark bg-black",
         ],
         " "
       )}
diff --git a/src/constants/width.scss b/src/constants/width.scss
new file mode 100644
index 0000000..b2e113b
--- /dev/null
+++ b/src/constants/width.scss
@@ -0,0 +1 @@
+$maxWidth : calc(100% - 120px);
\ No newline at end of file
diff --git a/src/custom.scss b/src/custom.scss
index 6f5952d..ba8a284 100644
--- a/src/custom.scss
+++ b/src/custom.scss
@@ -1,4 +1,5 @@
 @import "./constants/colors.scss";
+@import "./constants/width.scss";
 @import "./components/BreadCrumbs/index.scss";
 @import "./components/GradeFilter/index.scss";
 @import "./components/HomeSearchBox/index.scss";
@@ -32,7 +33,6 @@
 }
 
 .bg-black {
-  background-color: black !important;
   .MuiButton-root {
     color: white !important;
   }
@@ -289,13 +289,26 @@ p {
 }
 
 //SELECT
+
+.MuiList-root {
+  background-color: inherit !important;
+}
+
+.MuiPaper-root {
+  backdrop-filter: blur(7px) !important;
+  background-color: rgba($gray5, 0.4) !important;
+}
+
 .MuiMenuItem-root {
-  background: #272727 !important;
-  border-bottom: 1px solid #707070 !important;
-  color: white !important;
+  background-color: inherit !important;
+  border-bottom: 1px solid $gray !important;
   font-size: 14px !important;
   font-family: numeralLight !important;
   padding: 20px !important;
+  a {
+    background-color: inherit !important;
+    color: $gray13 !important;
+  }
 }
 
 .MuiSelect-root {
@@ -345,7 +358,7 @@ p {
         padding: 5px 0px;
       }
       &:nth-child(even) {
-        border-right: 1px solid #555 !important;
+        border-right: 1px solid $gray7 !important;
       }
     }
   }
@@ -383,7 +396,7 @@ p {
   }
   .main {
     main {
-      max-width: 1350px;
+      max-width: $maxWidth;
     }
   }
   .mobile {
diff --git a/src/views/Contact/index.scss b/src/views/Contact/index.scss
index c154e5c..93a9ac9 100644
--- a/src/views/Contact/index.scss
+++ b/src/views/Contact/index.scss
@@ -100,7 +100,7 @@
 @media screen and (min-width: 1441px) {
   .contact{
     main{
-      max-width: 1350px;
+      max-width: $maxWidth;
       padding-top: 60px;
       header{
         padding-bottom: 30px;
diff --git a/src/views/Course/Lesson/index.tsx b/src/views/Course/Lesson/index.tsx
index f28dde2..71ba2a9 100644
--- a/src/views/Course/Lesson/index.tsx
+++ b/src/views/Course/Lesson/index.tsx
@@ -109,18 +109,21 @@ function Lesson({
               }
             >
               <div className="d-flex align-items-center">
-                {data.type === "video" &&
-                  (light ? (
-                    <img src={greenPlay} alt="" />
-                  ) : (
-                    <img src={whitePlay} alt="" />
-                  ))}
-                {data.type === "pdf" &&
-                  (light ? (
-                    <img src={greenDocument} alt="" />
-                  ) : (
-                    <img src={document} alt="" />
-                  ))}
+                <Link to={"/video/" + data.id}>
+                  {data.type === "video" &&
+                    (light ? (
+                      <img src={greenPlay} alt="" />
+                    ) : (
+                      <img src={whitePlay} alt="" />
+                    ))}
+                  {data.type === "pdf" &&
+                    (light ? (
+                      <img src={greenDocument} alt="" />
+                    ) : (
+                      <img src={document} alt="" />
+                    ))}
+                </Link>
+                <Link to={"/video/" + data.id}  >
                 <img
                   className={
                     selectedLesson === data.id
@@ -130,6 +133,7 @@ function Lesson({
                   src={`https://dnvn.ir/api/v1/file/${data.posterId}`}
                   alt=""
                 />
+                </Link>
                 <h5>{data.name}</h5>
               </div>
               <ul className="d-flex">
diff --git a/src/views/Course/index.scss b/src/views/Course/index.scss
index 1b62202..c2cf915 100644
--- a/src/views/Course/index.scss
+++ b/src/views/Course/index.scss
@@ -169,7 +169,7 @@
 @media screen and (min-width: 1441px) {
   .course {
     main {
-      max-width: 1350px;
+      max-width: $maxWidth;
     }
     &__info {
       flex: 4;
diff --git a/src/views/Courses/Course/index.scss b/src/views/Courses/Course/index.scss
index 0699eb5..cdd92b0 100644
--- a/src/views/Courses/Course/index.scss
+++ b/src/views/Courses/Course/index.scss
@@ -15,8 +15,8 @@
   &-dark{
     border-bottom: 1px solid $gray8;
     &:hover {
-      background-color: $gray6;
-      box-shadow: 0px 0px 10px rgba(146, 146, 146, 0.6);
+      background-color: $gray1;
+      box-shadow: 0px 0px 10px rgb(214, 214, 214);
       img {
         transform: translateX(10px) scale(1.14);
       }
@@ -111,7 +111,6 @@
 @media screen and (min-width: 641px) and (max-width: 1007px) {
   .courses-course {
     margin-top: 20px;
-    background-color: $gray;
     border-radius: 10px;
     box-shadow: 0px 0px 10px rgba(146, 146, 146, 0.6);
     img {
@@ -137,7 +136,6 @@
 @media screen and (max-width: 640px) {
   .courses-course {
     margin-top: 20px;
-    background-color: $gray;
     border-radius: 10px;
     box-shadow: 0px 0px 10px rgba(146, 146, 146, 0.6);
     img {
diff --git a/src/views/Courses/index.scss b/src/views/Courses/index.scss
index 487d6ea..29d8bc6 100644
--- a/src/views/Courses/index.scss
+++ b/src/views/Courses/index.scss
@@ -2,12 +2,21 @@
 
 .courses {
   position: relative;
+  &-light{
+    h3{
+      color: $gray5;
+    }
+  }
+  &-dark{
+    h3{
+      color: $gray;
+    }
+  }
   main {
     margin-top: 30px;
     h3{
       margin-top : 100px;
       text-align: center;
-      color: $gray5;
       transition: all 0.5s;
       opacity: 0;
       transform : translateY(-50px);
diff --git a/src/views/Courses/index.tsx b/src/views/Courses/index.tsx
index 7c1145b..3c508d0 100644
--- a/src/views/Courses/index.tsx
+++ b/src/views/Courses/index.tsx
@@ -10,6 +10,7 @@ import BreadCrumbs from "../../components/BreadCrumbs";
 import Loader from "../../components/Loader";
 import Vocal from "../../components/Vocal/Vocal";
 import { info } from "console";
+import _ from "lodash";
 
 function Courses({
   getList,
@@ -39,10 +40,16 @@ function Courses({
       setVocal(false);
     }
   }, [inputValue]);
-
+  const light = theme === "light";
   return (
     <div
-      className="courses main d-flex flex-column"
+      className={_.join(
+        [
+          "courses main d-flex flex-column",
+          light ? "courses-light bg-white" : "courses-dark bg-black",
+        ],
+        " "
+      )}
       style={{ filter: loading ? "blur(8px)" : "" }}
     >
       <Navbar />
@@ -72,9 +79,19 @@ function Courses({
                 item.gradeId ===
                 (selectedMenu || Number(localStorage.getItem("selectedGrade")))
             )
-            .map((item: any, i: any) => <Course data={item} key={i} theme={theme} />)}
+            .map((item: any, i: any) => (
+              <Course data={item} key={i} theme={theme} />
+            ))}
 
-        <h3 className={(inputValue && sortFilterCourse.length === 0 ) ? "courses-notFound" : ""}>محصولی یافت نشد.</h3>
+        <h3
+          className={
+            inputValue && sortFilterCourse.length === 0
+              ? "courses-notFound"
+              : ""
+          }
+        >
+          محصولی یافت نشد.
+        </h3>
         {page === "search" && vocal ? (
           <Vocal setVocal={setVocal} setInputValue={setInputValue} />
         ) : null}
diff --git a/src/views/Home/AppDownload/index.scss b/src/views/Home/AppDownload/index.scss
index 62da0b3..977605a 100644
--- a/src/views/Home/AppDownload/index.scss
+++ b/src/views/Home/AppDownload/index.scss
@@ -51,7 +51,7 @@
 
 @media screen and (min-width: 1441px) {
   .app-download {
-    max-width: 1350px;
+    max-width: $maxWidth;
     h1 {
       font-size: 40px;
       line-height: 2em;
diff --git a/src/views/Home/Blogs/index.scss b/src/views/Home/Blogs/index.scss
index 27d2af3..40a64eb 100644
--- a/src/views/Home/Blogs/index.scss
+++ b/src/views/Home/Blogs/index.scss
@@ -48,7 +48,7 @@
 
 @media screen and (min-width: 1441px) {
   .home-blogs {
-    max-width: 1350px;
+    max-width: $maxWidth;
     header{
       h1{
         font-size: 20px;
diff --git a/src/views/Home/Books/Book/index.scss b/src/views/Home/Books/Book/index.scss
index 4d129ca..fa46784 100644
--- a/src/views/Home/Books/Book/index.scss
+++ b/src/views/Home/Books/Book/index.scss
@@ -2,8 +2,8 @@
   cursor: pointer;
   transition: all 0.5s;
   border: 1px solid black;
-  margin: 10px;
   border-radius: 10px;
+  margin: 0px 10px;
   &-light{
     border : none !important;
     border-bottom: 1px solid $gray12 !important;
@@ -42,12 +42,13 @@
 
 @media screen and (min-width : 1441px){
   .home-books-book{
+    max-width: 246px;
     &:hover{
       transform : scale(0.95);
       background-color: #86868628;
     }
     img{
-      height: 300px;
+      height: 340px;
     }
     h2{
       font-size: 20px;
@@ -63,13 +64,13 @@
 
 @media screen and (min-width : 1008px) and (max-width : 1440px){
   .home-books-book{
+    max-width: 240px;
     &:hover{
       transform : scale(0.95);
       background-color: #86868628;
     }
     img{
-      height: 250px;
-      // width: 100%;
+      height: 340px;
     }
     h2{
       font-size: calc(100vw / 80);
@@ -86,7 +87,7 @@
 @media screen and (min-width : 641px) and (max-width : 1007px){
   .home-books-book{
     img{
-      height: 200px;
+      height: 250px;
       border-bottom-left-radius: 25px !important;
     }
     h2{
diff --git a/src/views/Home/Books/index.scss b/src/views/Home/Books/index.scss
index 16d9026..195c850 100644
--- a/src/views/Home/Books/index.scss
+++ b/src/views/Home/Books/index.scss
@@ -38,7 +38,7 @@
 
 @media screen and (min-width: 1441px) {
   .home-books {
-    max-width: 1350px;
+    max-width: $maxWidth;
     header{
       h1{
         font-size: 20px;
diff --git a/src/views/Home/Books/index.tsx b/src/views/Home/Books/index.tsx
index 6f8732c..f3bcc90 100644
--- a/src/views/Home/Books/index.tsx
+++ b/src/views/Home/Books/index.tsx
@@ -9,9 +9,9 @@ function Books({list, number}: any) {
     if (window.innerWidth >= 1440) {
       return 5;
     } else if (window.innerWidth >= 1008 && window.innerWidth < 1440) {
-      return 5;
-    } else if (window.innerWidth > 640 && window.innerWidth < 1008) {
       return 4;
+    } else if (window.innerWidth > 640 && window.innerWidth < 1008) {
+      return 3;
     } else {
       return 2;
     }
diff --git a/src/views/Home/Courses/index.scss b/src/views/Home/Courses/index.scss
index 6335471..a13c1e8 100644
--- a/src/views/Home/Courses/index.scss
+++ b/src/views/Home/Courses/index.scss
@@ -12,7 +12,6 @@
   }
   &-light{
     border-top: none !important;
-    border-bottom: 1px solid $gray12;
     header{
       h1{
         color : $green !important;
@@ -62,7 +61,7 @@
 
 @media screen and (min-width: 1441px) {
   .home-courses {
-    max-width: 1350px;
+    max-width: $maxWidth;
     header {
       h1 {
         font-size: 20px;
diff --git a/src/views/Home/Courses/index.tsx b/src/views/Home/Courses/index.tsx
index 9de5970..3af28d0 100644
--- a/src/views/Home/Courses/index.tsx
+++ b/src/views/Home/Courses/index.tsx
@@ -54,7 +54,7 @@ function Courses({ number, courses, selectedSort, theme }: any) {
       )}
 
       <Link
-        className="home-courses__more align-items-center desktop"
+        className="home-courses__more align-items-center hidden"
         to="/courses"
       >
         مشاهده بیشتر{" "}
diff --git a/src/views/Home/Footer/index.scss b/src/views/Home/Footer/index.scss
index 329b708..593eaf5 100644
--- a/src/views/Home/Footer/index.scss
+++ b/src/views/Home/Footer/index.scss
@@ -27,7 +27,7 @@
 @media screen and (min-width: 1441px){
   .footer{
     &__container{
-      max-width: 1350px;
+      max-width: $maxWidth;
     }
     li{
       font-size: 14px;
diff --git a/src/views/Home/Footer/index.tsx b/src/views/Home/Footer/index.tsx
index 4423b7a..292244e 100644
--- a/src/views/Home/Footer/index.tsx
+++ b/src/views/Home/Footer/index.tsx
@@ -37,7 +37,7 @@ export default connect((state : any) => ({
 
 Footer.defaultProps = {
   links: [
-    { name: "تعرفه‌ها", link: "/subscribe" },
+    // { name: "تعرفه‌ها", link: "/subscribe" },
     { name: "سوالات متداول", link: "/faq" },
     { name: "درباره ما", link: "/about" },
     { name: "فروشگاه", link: "https://dnvn.ir/products" },
diff --git a/src/views/Home/Header/index.scss b/src/views/Home/Header/index.scss
index df6def2..2ea9ba9 100644
--- a/src/views/Home/Header/index.scss
+++ b/src/views/Home/Header/index.scss
@@ -119,7 +119,7 @@
 
 @media screen and (min-width: 1441px) {
   .home-slider {
-    max-width: 1340px;
+    max-width: $maxWidth;
     width: 100%;
     justify-content: flex-end;
   }
diff --git a/src/views/Home/Header/index.tsx b/src/views/Home/Header/index.tsx
index 290381e..2670d51 100644
--- a/src/views/Home/Header/index.tsx
+++ b/src/views/Home/Header/index.tsx
@@ -4,8 +4,6 @@ import Carousel from "react-elastic-carousel";
 
 import dropdown from "../../../assets/icons/dropdown.png";
 
-import "./index.scss";
-
 const HomeSlider = ({ headerData}: any) => {
   return (
     <div className="home-slider d-flex">
diff --git a/src/views/Home/index.tsx b/src/views/Home/index.tsx
index 275736a..df1c3d4 100644
--- a/src/views/Home/index.tsx
+++ b/src/views/Home/index.tsx
@@ -143,9 +143,5 @@ Home.defaultProps = {
       name: "یازدهم",
       value: 11,
     },
-    {
-      name: "دوازدهم",
-      value: 12,
-    },
   ],
 };
diff --git a/src/views/Subscription/index.scss b/src/views/Subscription/index.scss
index 02fd86a..f929973 100644
--- a/src/views/Subscription/index.scss
+++ b/src/views/Subscription/index.scss
@@ -2,6 +2,7 @@
 @import './SubscribeRadio/index.scss';
 
 .subscription {
+  margin-top: 20px;
   &-dark{
     main {
       h1,h2{
diff --git a/src/views/VideoTube/index.scss b/src/views/VideoTube/index.scss
index 6a14cc2..091fc06 100644
--- a/src/views/VideoTube/index.scss
+++ b/src/views/VideoTube/index.scss
@@ -279,7 +279,7 @@
 @media screen and (min-width: 1441px) {
   .video-tube {
     main {
-      max-width: 1350px;
+      max-width: $maxWidth;
       margin-top: 10px;
     }
     &__content {