diff --git a/src/components/BookToggle/index.scss b/src/components/BookToggle/index.scss
index b1bdec6..e0a8691 100644
--- a/src/components/BookToggle/index.scss
+++ b/src/components/BookToggle/index.scss
@@ -2,34 +2,42 @@
   width: calc(100% - 60px);
   background-color: transparent;
   height: calc(100vh / 1.8);
+  transition: all 0.3s;
+
   &__info {
     width: calc(100% / 2.5);
+    &--link {
+      transition: all 0.3s;
+      width: fit-content;
+      border-radius: 4px;
+      padding: 10px 35px;
+      align-self: end;
+      margin-top: 60px;
+      &:hover{
+        border-color: $green;
+        color: $green;
+      }
+    }
   }
-  img {
+  
+  &__img {
     height: 90%;
     border-radius: 8px;
+    img{
+      width : 100%;
+      height : 100%;
+    }
   }
   p {
     margin-top: 20px;
   }
-  a {
-    transition: all 0.3s;
-    width: fit-content;
-    border-radius: 4px;
-    padding: 10px 35px;
-    align-self: end;
-    margin-top: 60px;
-    &:hover{
-      border-color: $green;
-      color: $green;
-    }
-  }
+  
   &-light {
     strong,
     p {
       color: $gray5;
     }
-    a {
+    .book-toggle__info--link{
       box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1);
       color: $gray7;
     }
@@ -39,7 +47,7 @@
     p {
       color: $gray12;
     }
-    a{
+    .book-toggle__info--link{
       border: 1px solid white;
       color: white;
     }
diff --git a/src/components/BookToggle/index.tsx b/src/components/BookToggle/index.tsx
index 1e28789..d593905 100644
--- a/src/components/BookToggle/index.tsx
+++ b/src/components/BookToggle/index.tsx
@@ -1,15 +1,24 @@
-import React from "react";
-import {Link} from 'react-router-dom';
+import React, { useState, useEffect } from "react";
+import { Link } from "react-router-dom";
 import _ from "lodash";
 import { connect } from "react-redux";
 
 function BookToggle({ book, theme }: any) {
+  const [fade, setFade] = useState(false);
+  useEffect(() => {}, []);
+  useEffect(() => {
+    setFade(false);
+    setTimeout(() => {
+      setFade(true);
+    }, 500);
+  }, [book]);
   return (
     <div
       className={_.join(
         [
           "book-toggle desktop justify-content-between align-items-center mx-auto px-2",
           theme === "light" ? "book-toggle-light" : "book-toggle-dark",
+          fade ? "opacity-100" : "opacity-0",
         ],
         " "
       )}
@@ -21,9 +30,11 @@ function BookToggle({ book, theme }: any) {
           توجه است، ناگهان با اتهام‌هایی جدی مواجه می‌شود که خود و خانواده اش را
           در موقعیت پیچیده‌ای قرار می‌دهد و...
         </p>
-        <Link to={'/courses/' + book.id}>ادامه</Link>
+        <Link className="book-toggle__info--link" to={"/courses/" + book.id}>ادامه</Link>
       </div>
-      <img src={`https://dnvn.ir/api/v1/file/${book.fileIds}`} alt="" />
+      <Link to={"/courses/" + book.id} className="book-toggle__img">
+        <img src={`https://dnvn.ir/api/v1/file/${book.fileIds}`} alt="" />
+      </Link>
     </div>
   );
 }
diff --git a/src/components/GradeFilter/index.scss b/src/components/GradeFilter/index.scss
index 54fa5d5..3d27b38 100644
--- a/src/components/GradeFilter/index.scss
+++ b/src/components/GradeFilter/index.scss
@@ -85,7 +85,7 @@
 
 @media screen and (min-width: 1008px) and (max-width: 1440px){
   .grade-filter{
-    max-width: 1250px;
+    max-width: $maxWidth;
     ul{
       position: relative;
     }
diff --git a/src/components/GradeFilter/index.tsx b/src/components/GradeFilter/index.tsx
index eeb2cab..5475b12 100644
--- a/src/components/GradeFilter/index.tsx
+++ b/src/components/GradeFilter/index.tsx
@@ -34,6 +34,12 @@ function GradeFilter({
         ],
         " "
       )}
+      style={{
+        transform:
+          window.innerWidth > 1027
+            ? `translateY(-${window.innerHeight / 2}px)`
+            : "",
+      }}
     >
       <h1 className="d-flex align-items-center">
         پایه تحصیلی
@@ -84,7 +90,9 @@ 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 252429f..c98334b 100644
--- a/src/components/HomeSearchBox/index.scss
+++ b/src/components/HomeSearchBox/index.scss
@@ -124,7 +124,7 @@
 
 @media screen and (min-width: 1008px) and (max-width: 1440px) {
   .home-search-box {
-    max-width: 1250px;
+    max-width: $maxWidth;
     padding: 40px 0px 10px;
     &__voice {
       display: none;
diff --git a/src/components/Navbar/index.scss b/src/components/Navbar/index.scss
index d659da9..afe1f83 100644
--- a/src/components/Navbar/index.scss
+++ b/src/components/Navbar/index.scss
@@ -6,10 +6,11 @@
   top: 0px !important;
   left: 0px;
   z-index: 150;
+  backdrop-filter: blur(8px);
   &-light{
     .nav___share{
       box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1);
-      background-color: inherit !important;
+      background-color: inherit;
       border: none;
       // border: 1px solid $green1 !important;
       a{
@@ -100,7 +101,7 @@
 @media screen and (min-width: 1008px) and (max-width: 1440px){
   .nav{
     &__container{
-      max-width: 1250px;
+      max-width: $maxWidth;
       &--links{
         li{
           padding: 0px 20px;
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 8d3fa7c..96cfba0 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -73,10 +73,14 @@ function Navbar(props: any) {
       className={_.join(
         [
           "nav align-items-center justify-content-center",
-          theme === "light" ? "nav-light bg-white" : "nav-dark bg-black",
+          theme === "light" ? "bg-white nav-light" : "nav-dark bg-dark",
         ],
         " "
       )}
+      style={{
+        backgroundColor:
+          theme === "light" ? "rgba(255,255,255, 0.5)" : "rgba(0,0,0, 0.85)",
+      }}
     >
       <div className="nav__container d-flex align-items-center justify-content-between">
         <ul className="nav__container--links desktop align-items-center">
diff --git a/src/constants/width.scss b/src/constants/width.scss
index fb9223e..cdf03c8 100644
--- a/src/constants/width.scss
+++ b/src/constants/width.scss
@@ -1 +1 @@
-$maxWidth : calc(100% - 120px);
+$maxWidth : 100%;
diff --git a/src/custom.scss b/src/custom.scss
index c42ea8c..850cdf3 100644
--- a/src/custom.scss
+++ b/src/custom.scss
@@ -192,8 +192,8 @@ p {
 .main {
   width: 100%;
   overflow-x: hidden;
-  padding-top: 60px;
   min-height: 100vh;
+  padding-top: 60px;
   position: relative;
   padding-bottom: 20px;
   font-family: numeralLight;
@@ -432,7 +432,7 @@ p {
   }
   .main {
     main {
-      max-width: 1250px;
+      max-width: $maxWidth;
     }
   }
   .mobile {
diff --git a/src/redux/reducers/public.tsx b/src/redux/reducers/public.tsx
index 79992f9..9311f80 100644
--- a/src/redux/reducers/public.tsx
+++ b/src/redux/reducers/public.tsx
@@ -1,5 +1,5 @@
 import { PublicAction } from "../actions-type";
-import proxy from "../proxy";
+import _ from 'lodash';
 import location from '../../util/location';
 
 const initialState = {
@@ -54,7 +54,7 @@ const grades = [
   "یازدهم",
   "دوازدهم",
 ];
-export default function publicApi(state = initialState, action: PublicAction) {
+export default function publicApi( state = initialState, action: PublicAction) {
   let { type, data } = action;
   switch (type) {
     case "public/setTheme":
@@ -91,6 +91,8 @@ export default function publicApi(state = initialState, action: PublicAction) {
           data.vods.map((item: any) => item.categoryId && item.categoryId)
         )
       );
+      // allCats =  _.sortedUniq(allCats);
+      allCats.sort((a : any , b : any) => a - b);
       return {
         ...state,
         loading: false,
diff --git a/src/util/scroll.js b/src/util/scroll.js
index ce2baa5..3126bb5 100644
--- a/src/util/scroll.js
+++ b/src/util/scroll.js
@@ -9,12 +9,12 @@ class scroll {
     const bookToggle1 = localStorage.getItem('bookToggle1');
     if (option === 1) {
       localStorage.setItem('bookToggle1', 1);
-      window.scrollTo(0, 1.1 * height);
+      window.scrollTo(0, 0.9 * height);
     } else if (option === 2) {
       if(bookToggle1) {
-        window.scrollTo(0, 2.3 * height);
+        window.scrollTo(0, 2.1 * height);
       }else{
-        window.scrollTo(0, 1.8 * height);
+        window.scrollTo(0, 1.6 * height);
       }
     }
   };
diff --git a/src/views/Contact/index.scss b/src/views/Contact/index.scss
index 93a9ac9..7c609e6 100644
--- a/src/views/Contact/index.scss
+++ b/src/views/Contact/index.scss
@@ -132,7 +132,7 @@
 @media screen and (min-width: 1008px) and (max-width: 1440px) {
   .contact{
     main{
-      max-width: 1250px;
+      max-width: $maxWidth;
       padding: 40px 10px;
       header{
         padding-bottom: 20px;
diff --git a/src/views/Course/index.scss b/src/views/Course/index.scss
index c2cf915..c4b6467 100644
--- a/src/views/Course/index.scss
+++ b/src/views/Course/index.scss
@@ -261,7 +261,7 @@
 @media screen and (min-width: 1008px) and (max-width: 1440px) {
   .course {
     main {
-      max-width: 1250px;
+      max-width: $maxWidth;
       padding: 0px 10px;
     }
     &__info {
diff --git a/src/views/Home/AppDownload/index.scss b/src/views/Home/AppDownload/index.scss
index 977605a..61e0e48 100644
--- a/src/views/Home/AppDownload/index.scss
+++ b/src/views/Home/AppDownload/index.scss
@@ -101,7 +101,7 @@
 
 @media screen and (min-width: 1008px) and (max-width: 1440px) {
   .app-download {
-    max-width: 1250px;
+    max-width: $maxWidth;
     h1 {
       font-size: calc(100vw / 40);
       line-height: 2em;
diff --git a/src/views/Home/AppDownload/index.tsx b/src/views/Home/AppDownload/index.tsx
index 58e3c33..719cf54 100644
--- a/src/views/Home/AppDownload/index.tsx
+++ b/src/views/Home/AppDownload/index.tsx
@@ -14,6 +14,12 @@ export default function AppDownload(props: any) {
         ],
         " "
       )}
+      style={{
+        transform:
+          window.innerWidth > 1027
+            ? `translateY(-${window.innerHeight / 2}px)`
+            : "",
+      }}
     >
       <h1>دریافت اپلیکیشن دانوین</h1>
       <figure className="app-download__figure d-flex flex-column align-items-center">
diff --git a/src/views/Home/Blogs/index.scss b/src/views/Home/Blogs/index.scss
index 40a64eb..b4b5be5 100644
--- a/src/views/Home/Blogs/index.scss
+++ b/src/views/Home/Blogs/index.scss
@@ -65,7 +65,7 @@
 
 @media screen and (min-width: 1008px) and (max-width: 1440px) {
   .home-blogs {
-    max-width: 1250px;
+    max-width: $maxWidth;
     header{
       h1{
         font-size: calc(100vw / 60);
diff --git a/src/views/Home/Blogs/index.tsx b/src/views/Home/Blogs/index.tsx
index c9ee502..2867403 100644
--- a/src/views/Home/Blogs/index.tsx
+++ b/src/views/Home/Blogs/index.tsx
@@ -33,6 +33,12 @@ function Blogs(props: any) {
         ],
         " "
       )}
+      style={{
+        transform:
+          window.innerWidth > 1027
+            ? `translateY(-${window.innerHeight / 2}px)`
+            : "",
+      }}
     >
       <header className="d-flex flex-column">
         <h1>پیشنهادهای داغ برای شما</h1>
diff --git a/src/views/Home/Books/index.scss b/src/views/Home/Books/index.scss
index 195c850..152666d 100644
--- a/src/views/Home/Books/index.scss
+++ b/src/views/Home/Books/index.scss
@@ -55,7 +55,7 @@
 
 @media screen and (min-width: 1008px) and (max-width: 1440px) {
   .home-books {
-    max-width: 1250px;
+    max-width: $maxWidth;
     header{
       h1{
         font-size: calc(100vw / 60);
diff --git a/src/views/Home/Books/index.tsx b/src/views/Home/Books/index.tsx
index b68f535..f86a31d 100644
--- a/src/views/Home/Books/index.tsx
+++ b/src/views/Home/Books/index.tsx
@@ -20,7 +20,15 @@ function Books({ list, number }: any) {
   };
 
   return (
-    <section className="home-books d-flex flex-column">
+    <section
+      className="home-books d-flex flex-column"
+      style={{
+        transform:
+          window.innerWidth > 1027
+            ? `translateY(-${window.innerHeight / 2}px)`
+            : "",
+      }}
+    >
       <div className="desktop flex-column" onClick={() => scroll.bookScroll(2)}>
         <div className="position-relative">
           <Carousel
diff --git a/src/views/Home/Courses/index.scss b/src/views/Home/Courses/index.scss
index a13c1e8..4324182 100644
--- a/src/views/Home/Courses/index.scss
+++ b/src/views/Home/Courses/index.scss
@@ -4,28 +4,38 @@
   width: 100%;
   margin: 0px auto;
   position: relative;
-  padding: 20px 10px 30px;
   font-family: numeralLight;
   &-dark {
-    border-top: 1px solid $gray8;
-    border-bottom: 1px solid $gray8;
+    background: rgb(0, 0, 0);
+    background: linear-gradient(
+      0deg,
+      rgba(0, 0, 0, 1) 50%,
+      rgba(255, 255, 255, 0) 100%
+    );
   }
-  &-light{
+  &-light {
+    background: rgb(255, 255, 255);
+    background: linear-gradient(
+      0deg,
+      rgba(255, 255, 255, 1) 70%,
+      rgba(255, 255, 255, 0) 100%
+    );
     border-top: none !important;
-    header{
-      h1{
-        color : $green !important;
+    header {
+      h1 {
+        color: $green !important;
       }
-      a{
+      a {
         color: $green !important;
       }
     }
-    .home-courses__more{
+    .home-courses__more {
       background-color: white !important;
     }
   }
   header {
-    margin-bottom: 20px;
+    margin-bottom: 10px;
+    padding: 0px 50px 0px;
     h1 {
       font-family: numeralMedium;
       color: white;
@@ -78,7 +88,7 @@
 
 @media screen and (min-width: 1008px) and (max-width: 1440px) {
   .home-courses {
-    max-width: 1250px;
+    max-width: $maxWidth;
     header {
       h1 {
         font-size: calc(100vw / 75);
diff --git a/src/views/Home/Courses/index.tsx b/src/views/Home/Courses/index.tsx
index 58a521f..bd87208 100644
--- a/src/views/Home/Courses/index.tsx
+++ b/src/views/Home/Courses/index.tsx
@@ -7,6 +7,7 @@ import { connect } from "react-redux";
 import _ from "lodash";
 import BookToggle from "../../../components/BookToggle";
 import scroll from "../../../util/scroll";
+import { transform } from "@babel/core";
 
 function Courses({ number, courses, selectedSort, theme }: any) {
   const [activeBook, setActiveBook] = useState(null);
@@ -31,6 +32,13 @@ function Courses({ number, courses, selectedSort, theme }: any) {
         ],
         " "
       )}
+      style={{
+        transform:
+          window.innerWidth > 1027
+            ? `translateY(-${window.innerHeight / 1.9}px)`
+            : "",
+        padding: `calc(${window.innerHeight / 3}px) 10px 30px`,
+      }}
     >
       <header className="d-flex justify-content-between align-items-center">
         <div className="d-flex flex-column">
diff --git a/src/views/Home/Footer/index.scss b/src/views/Home/Footer/index.scss
index 593eaf5..744bc2a 100644
--- a/src/views/Home/Footer/index.scss
+++ b/src/views/Home/Footer/index.scss
@@ -47,7 +47,7 @@
 @media screen and (min-width: 1008px) and (max-width: 1440px){
   .footer{
     &__container{
-      max-width: 1250px;
+      max-width: $maxWidth;
     }
     li{
       font-size: calc(100vw / 100);
diff --git a/src/views/Home/Header/index.scss b/src/views/Home/Header/index.scss
index 6436288..9b6ff3f 100644
--- a/src/views/Home/Header/index.scss
+++ b/src/views/Home/Header/index.scss
@@ -1,8 +1,8 @@
 
 .home-slider {
   width: 100%;
-  padding: 2px 0px 0px;
-  margin: 20px auto 10px;
+  padding: 0px 0px 0px;
+  margin: 0px auto 10px;
   position: relative;
   .rec-arrow-left {
     top: calc(50% - 22px) !important;
@@ -64,13 +64,13 @@
 }
 
 .rec-slider-container {
-  border-radius: 10px;
+  border-radius: 0px !important;
 }
 
 .slider-header {
   width: 100%;
   justify-content: flex-end;
-  min-height : calc(100vh - 150px);
+  height : calc(100vh - 50px);
   img{
     width: 100%;
 
@@ -128,6 +128,6 @@
 
 @media screen and (min-width : 1008px) and (max-width: 1440px){
   .home-slider{
-    max-width: 1250px;
+    max-width: $maxWidth;
   }
 }
\ No newline at end of file
diff --git a/src/views/Home/Header/index.tsx b/src/views/Home/Header/index.tsx
index 1403c2f..e4d62e5 100644
--- a/src/views/Home/Header/index.tsx
+++ b/src/views/Home/Header/index.tsx
@@ -12,7 +12,7 @@ const HomeSlider = ({ headerData }: any) => {
         isRTL={true}
         enableTilt={true}
         showArrows={true}
-        pagination={true}
+        pagination={false}
         enableAutoPlay={true}
       >
         {headerData.map((item: any, i: any) => (
@@ -23,6 +23,7 @@ const HomeSlider = ({ headerData }: any) => {
               backgroundRepeat : 'no-repeat',
               backgroundClip : 'content-box',
               backgroundSize : '100% 100%',
+              borderRadius : 0
             }}
           >
             {/* <
diff --git a/src/views/Home/index.scss b/src/views/Home/index.scss
index 4b1420a..9dd0a27 100644
--- a/src/views/Home/index.scss
+++ b/src/views/Home/index.scss
@@ -8,14 +8,14 @@
 
 @media screen and (min-width: 641px) and (max-width: 1007px){
   .home{
-    padding: 60px 10px 0px;
+    padding: 0px 10px 0px;
     position: relative;
   }
 }
 
 @media screen and (max-width: 640px) {
   .home{
-    padding: 60px 10px 0px;
+    padding: 0px 10px 0px;
     position: relative;
     background: rgb(0, 0, 0);
   
diff --git a/src/views/Subscription/index.tsx b/src/views/Subscription/index.tsx
index 1f3e809..cb0e097 100644
--- a/src/views/Subscription/index.tsx
+++ b/src/views/Subscription/index.tsx
@@ -35,7 +35,7 @@ function Subscription({
     >
       <Navbar />
       <main className={"d-flex flex-column" + " " + (loading && "blur")}>
-        <h1>خرید اشتراک دانوین</h1>
+        <h1>خرید اشتراک ویديو</h1>
         <p>
           اینجا هم برای هر کتاب امکان خرید اشتراک جداگانه هست و هم اشتراک های
           مدت دار. با خرید اشتراک های مدت دار دانوین می تونید در هزینه هاتون
diff --git a/src/views/VideoTube/index.scss b/src/views/VideoTube/index.scss
index 812da7c..70b51d3 100644
--- a/src/views/VideoTube/index.scss
+++ b/src/views/VideoTube/index.scss
@@ -370,7 +370,7 @@
 @media screen and (min-width: 1008px) and (max-width: 1440px) {
   .video-tube {
     main {
-      max-width: 1250px;
+      max-width: $maxWidth;
       margin-top: 10px;
       padding: 0px 10px;
     }