diff --git a/src/custom.scss b/src/custom.scss
index 7c41007..56142a4 100644
--- a/src/custom.scss
+++ b/src/custom.scss
@@ -84,21 +84,7 @@
 }
 
 .main {
-  background: linear-gradient(
-    90deg,
-    hsla(0, 0%, 31%, 1) 0%,
-    hsla(0, 0%, 0%, 1) 100%
-  );
-  background: -moz-linear-gradient(
-    90deg,
-    hsla(0, 0%, 31%, 1) 0%,
-    hsla(0, 0%, 0%, 1) 100%
-  );
-  background: -webkit-linear-gradient(
-    90deg,
-    hsla(0, 0%, 31%, 1) 0%,
-    hsla(0, 0%, 0%, 1) 100%
-  );
+  background: black;
   width: 100%;
   overflow-x: hidden;
   padding-top: 60px;
diff --git a/src/views/Auth/SignUp/index.scss b/src/views/Auth/SignUp/index.scss
index 0249804..0f4ccea 100644
--- a/src/views/Auth/SignUp/index.scss
+++ b/src/views/Auth/SignUp/index.scss
@@ -315,7 +315,7 @@
     &__error{
       margin-top: 10px;
       color: rgb(255, 115, 115);
-      font-size: calc(100vw / 110);
+      font-size: calc(100vw / 30);
     }
   }
 }
\ No newline at end of file
diff --git a/src/views/Course/Lesson/index.scss b/src/views/Course/Lesson/index.scss
index 1c0109e..b1e9358 100644
--- a/src/views/Course/Lesson/index.scss
+++ b/src/views/Course/Lesson/index.scss
@@ -1,8 +1,13 @@
 .lesson {
+  transition: all 0.5 ease-in;
+  &__active{
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+  }
   header {
     background-color: #414141;
     border: 1px solid #b3b3b3 !important;
-    padding: 10px 15px !important;
+    padding: 5px 15px !important;
     cursor: pointer;
     h4 {
       color: #9cdf52;
@@ -17,10 +22,12 @@
     }
   }
   &__files{
-    padding: 30px 15px 20px !important;
+    padding : 0px !important;
     border-left: 1px solid #b3b3b3;
     border-right: 1px solid #b3b3b3;
     border-bottom: 1px solid #b3b3b3;
+    // max-height: 0px
+    transition: all 0.4s ease-in;
     & img{
       width: 40px;
     }
@@ -32,8 +39,12 @@
       }
       h5{ 
         margin-right: 30px;
+        margin-bottom: 0px;
       }
     }
+    &--active{
+      padding : 30px 15px 20px !important;
+    }
   }
 }
 
@@ -90,6 +101,11 @@
         h5{
           font-size: calc(100vw/ 75);
         }
+        
+      }
+      &--active{
+        padding: 15px 5px !important;
+
       }
     }
   }
@@ -118,8 +134,9 @@
     &__files{
       border-bottom-left-radius: 10px;
       border-bottom-right-radius: 10px;
-      padding: 15px 5px !important;
+      padding : 0px !important;
       &--sample{
+        margin-bottom: 20px;
         img{
           width: 30px;
         }
@@ -132,6 +149,10 @@
           margin-right: 10px;
         }
       }
+      &--active{
+        padding: 25px 5px !important;
+
+      }
     }
   }
 }
@@ -159,7 +180,7 @@
     &__files{
       border-bottom-left-radius: 10px;
       border-bottom-right-radius: 10px;
-      padding: 15px 5px !important;
+      padding: 0px !important;
       &--sample{
         img{
           width: 30px;
@@ -173,6 +194,10 @@
           margin-right: 5px;
         }
       }
+      &--active{
+        padding: 15px 5px !important;
+
+      }
     }
   }
 }
diff --git a/src/views/Course/Lesson/index.tsx b/src/views/Course/Lesson/index.tsx
index 567eff5..5b2c613 100644
--- a/src/views/Course/Lesson/index.tsx
+++ b/src/views/Course/Lesson/index.tsx
@@ -6,6 +6,7 @@ import lock from "../../../assets/icons/lock.png";
 import "./index.scss";
 import { connect } from "react-redux";
 import { book } from "../../../redux/actions";
+import LessonPlayList from "../../VideoTube/LessonPlayList";
 
 function Lesson(props: any) {
   const { lesson } = props;
@@ -24,7 +25,11 @@ function Lesson(props: any) {
         </div>
       </header>
       <header
-        className="mobile justify-content-between align-items-center"
+        className={
+          "mobile justify-content-between align-items-center" +
+          " " +
+          (!lesson.active && "lesson__active")
+        }
         onClick={() => props.toggle(lesson.id)}
       >
         <div className="d-flex flex-column">
@@ -35,24 +40,41 @@ function Lesson(props: any) {
           <img src={whiteDropdown} alt="" />
         </div>
       </header>
-      {lesson.active && (
-        <ul className="lesson__files d-flex flex-column">
-          {lesson.files.map((data: any, i: any) => (
-            <li className="lesson__files--sample d-flex justify-content-between align-items-center">
-              <div className="d-flex align-items-center">
-                {data.type === "video" && <img src={whitePlay} alt="" />}
-                {data.type === "document" && <img src={document} alt="" />}
-                <h5>{data.name}</h5>
-              </div>
-              <ul className="d-flex">
-                <li>{data.type !== "document" && data.duration}</li>
-                <li>{data.view && "مشاهده"}</li>
-                <li>{data.download ? "دانلود" : <img src={lock} alt="" />}</li>
-              </ul>
-            </li>
-          ))}
-        </ul>
-      )}
+      <ul
+        className={
+          "lesson__files d-flex flex-column" +
+          " " +
+          (lesson.active && "lesson__files--active")
+        }
+        style={{
+          height: lesson.active
+            ? lesson.files.length *
+              (window.innerWidth > 1007
+                ? window.innerWidth / 75 + 45
+                : window.innerWidth / 33 + 45)
+            : "0px",
+        }}
+      >
+        {lesson.files.map((data: any, i: any) => (
+          <li
+            className="lesson__files--sample justify-content-between align-items-center"
+            style={{
+              display: lesson.active ? "flex" : "none",
+            }}
+          >
+            <div className="d-flex align-items-center">
+              {data.type === "video" && <img src={whitePlay} alt="" />}
+              {data.type === "document" && <img src={document} alt="" />}
+              <h5>{data.name}</h5>
+            </div>
+            <ul className="d-flex">
+              <li>{data.type !== "document" && data.duration}</li>
+              <li>{data.view && "مشاهده"}</li>
+              <li>{data.download ? "دانلود" : <img src={lock} alt="" />}</li>
+            </ul>
+          </li>
+        ))}
+      </ul>
     </div>
   );
 }
diff --git a/src/views/Course/index.scss b/src/views/Course/index.scss
index f3ed3e4..e737f20 100644
--- a/src/views/Course/index.scss
+++ b/src/views/Course/index.scss
@@ -66,7 +66,7 @@
     border-radius: 10px;
     
     header{
-      padding: 40px 0px 20px;
+      padding: 20px 0px 20px !important;
       border: 0px;
       h2{
         color: #4DD35B;
diff --git a/src/views/VideoTube/index.scss b/src/views/VideoTube/index.scss
index 5426df9..f6fc647 100644
--- a/src/views/VideoTube/index.scss
+++ b/src/views/VideoTube/index.scss
@@ -285,7 +285,7 @@
       &--addComment{
         width: 60%;
         button{
-          font-size: calc(100vw / 100);
+          font-size: calc(100vw / 110);
         }
         textarea{
           font-size: calc(100vw / 90);