diff --git a/package.json b/package.json
index 7b1098c..20eb59a 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "@emotion/react": "^11.4.1",
     "@mui/icons-material": "^5.0.0",
     "@mui/material": "^5.0.0",
+    "@mui/styles": "^5.0.1",
     "@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
     "@svgr/webpack": "5.5.0",
     "@testing-library/jest-dom": "^5.11.4",
diff --git a/src/App.css b/src/App.css
index 59057dd..19197c3 100644
--- a/src/App.css
+++ b/src/App.css
@@ -34,6 +34,7 @@
   color: white;
 }
 
+
 .App-link {
   color: #61dafb;
 }
diff --git a/src/assets/icons/list.png b/src/assets/icons/list.png
new file mode 100644
index 0000000..cb95ce1
Binary files /dev/null and b/src/assets/icons/list.png differ
diff --git a/src/assets/images/user1.png b/src/assets/images/user1.png
new file mode 100644
index 0000000..ca073f0
Binary files /dev/null and b/src/assets/images/user1.png differ
diff --git a/src/assets/images/user2.png b/src/assets/images/user2.png
new file mode 100644
index 0000000..7db78e9
Binary files /dev/null and b/src/assets/images/user2.png differ
diff --git a/src/assets/images/user3.png b/src/assets/images/user3.png
new file mode 100644
index 0000000..269b43e
Binary files /dev/null and b/src/assets/images/user3.png differ
diff --git a/src/assets/videos/sea.mp4 b/src/assets/videos/sea.mp4
new file mode 100644
index 0000000..1485507
Binary files /dev/null and b/src/assets/videos/sea.mp4 differ
diff --git a/src/components/CustomCheckbox/index.tsx b/src/components/CustomCheckbox/index.tsx
new file mode 100644
index 0000000..553b401
--- /dev/null
+++ b/src/components/CustomCheckbox/index.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+import Checkbox from "@mui/material/Checkbox";
+
+export default function CustomCheckbox({ icon, checkedIcon }: any) {
+  return (
+    <>
+      <Checkbox icon={icon} checkedIcon={checkedIcon} />
+    </>
+    
+  );
+}
diff --git a/src/components/Input/index.js b/src/components/Input/index.js
index 3bd279d..3c732f8 100644
--- a/src/components/Input/index.js
+++ b/src/components/Input/index.js
@@ -1,6 +1,6 @@
 import React from "react";
 import TextField from "@mui/material/TextField";
-import { makeStyles } from "@mui/material/styles";
+import { makeStyles } from "@mui/styles";
 
 export default function FormPropsTextFields(props) {
   const useStyles = makeStyles((theme) => ({
diff --git a/src/custom.scss b/src/custom.scss
index a28bd14..c085c94 100644
--- a/src/custom.scss
+++ b/src/custom.scss
@@ -60,4 +60,38 @@
 
 .rec-slider-container {
   border-radius: 10px;
+}
+
+.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%
+  );
+  width: 100%;
+  overflow-x: hidden;
+  padding-top: 60px;
+  min-height: 100vh;
+  position: relative;
+  padding-bottom: 100px;
+  font-family: numeralLight;
+  .footer {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+  }
+  main {
+    width: 100%;
+    margin: 0px auto;
+  }
 }
\ No newline at end of file
diff --git a/src/redux/reducers/book.tsx b/src/redux/reducers/book.tsx
index 153ee3c..03fa243 100644
--- a/src/redux/reducers/book.tsx
+++ b/src/redux/reducers/book.tsx
@@ -1,5 +1,8 @@
 import { toast } from "react-toastify";
 import { BookAction } from "../actions-type";
+import sea from "../../assets/videos/sea.mp4";
+import user1 from "../../assets/images/user1.png";
+import user2 from "../../assets/images/user2.png";
 
 const initialState = {
   loading: false,
@@ -189,6 +192,106 @@ const initialState = {
       ],
     },
   ],
+  mockVideoList: {
+    id: 0,
+    name: "لیست بخش درس علوم زیستی در دریا",
+    lessons: [
+      {
+        id: 0,
+        name: "درس اول",
+        files: [
+          {
+            id : 0,
+            name: "ماهی های پرورشی و فواید آن",
+            src: sea,
+            text: "لورم اپیوسرم یک متن آزمایشی است که برای",
+          },
+          {
+            id : 1,
+            name: "ماهی های پرورشی و فواید آن",
+            src: sea,
+            text: "لورم اپیوسرم یک متن آزمایشی است که برای",
+          },
+          {
+            id : 2,
+            name: "ماهی های پرورشی و فواید آن",
+            src: sea,
+            text: "لورم اپیوسرم یک متن آزمایشی است که برای",
+          },
+        ],
+      },
+      {
+        id: 1,
+        name: "درس دوم",
+        files: [
+          {
+            name: "ماهی های پرورشی و فواید آن",
+            src: sea,
+            text: "لورم اپیوسرم یک متن آزمایشی است که برای",
+          },
+          {
+            name: "ماهی های پرورشی و فواید آن",
+            src: sea,
+            text: "لورم اپیوسرم یک متن آزمایشی است که برای",
+          },
+          {
+            name: "ماهی های پرورشی و فواید آن",
+            src: sea,
+            text: "لورم اپیوسرم یک متن آزمایشی است که برای",
+          },
+        ],
+      },
+    ],
+    attachments : [
+      {
+        name : "تمرین بخش اول از درس دوم",
+        file : ''
+      },
+      {
+        name : "تمرین بخش اول از درس دوم",
+        file : ''
+      },
+      {
+        name : "تمرین بخش اول از درس دوم",
+        file : ''
+      },
+      {
+        name : "تمرین بخش اول از درس دوم",
+        file : ''
+      },
+      {
+        name : "تمرین بخش اول از درس دوم",
+        file : ''
+      },
+      {
+        name : "تمرین بخش اول از درس دوم",
+        file : ''
+      },
+    ]
+  },
+  selectedVideo : {
+    name: "ماهی های پرورشی و فواید آن",
+    src: sea,
+    text: "لورم اپیوسرم یک متن آزمایشی است که برای",
+  },
+  comments : [
+    {
+      id : 0,
+      imageUrl : user1,
+      name : 'حمد عظیمی',
+      text : 'متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد',
+      repliedTo : null,
+      date : '1400/07/29',
+    },
+    {
+      id : 1,
+      imageUrl : user2,
+      name : 'حمد عظیمی',
+      text : 'متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد',
+      repliedTo : null,
+      date : '1400/07/29',
+    },
+  ] 
 };
 
 const grades = [
diff --git a/src/redux/reducers/public.tsx b/src/redux/reducers/public.tsx
index b5ec61e..c2eedb7 100644
--- a/src/redux/reducers/public.tsx
+++ b/src/redux/reducers/public.tsx
@@ -11,6 +11,43 @@ const initialState = {
   arList: [],
   blogList: [],
   blog: null,
+  mockSubscribes : [
+    {
+      id : 0,
+      name : 'اشتراک 3 ماهه',
+      finalPrice : '19.000',
+      offPercent : 0,
+      off : 0,
+    },
+    {
+      id : 1,
+      name : 'اشتراک 3 ماهه',
+      finalPrice : '19.000',
+      offPercent : 0,
+      off : 0,
+    },
+    {
+      id : 2,
+      name : 'اشتراک 6 ماهه',
+      finalPrice : '30.000',
+      offPercent : 30,
+      off : '10.000',
+    },
+    {
+      id : 3,
+      name : 'اشتراک 6 ماهه',
+      finalPrice : '40.000',
+      offPercent : 0,
+      off : 0,
+    }
+  ],
+  selectedSubscripe: {
+    id : 0,
+    name : 'اشتراک 3 ماهه',
+    finalPrice : '19.000',
+    offPercent : 0,
+    off : 0,
+  },
 };
 
 const grades = [
diff --git a/src/router.tsx b/src/router.tsx
index 4b7d5b9..9e7ba76 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -9,6 +9,9 @@ import {
 import Auth from './views/Auth/index';
 import Home from "./views/Home/index";
 import Course from "./views/Course/index";
+import VideoTube from "./views/VideoTube/index";
+import Subscription from "./views/Subscription/index";
+import Contact from "./views/Contact/index";
 
 function router(){
     return (
@@ -29,6 +32,15 @@ function router(){
           <Route exact path={'/courses/:id'}>
             <Course />
           </Route>
+          <Route exact path={'/video-tube'}>
+            <VideoTube />
+          </Route>
+          <Route exact path={'/subscribe'}>
+            <Subscription />
+          </Route>
+          <Route exact path={'/contact'}>
+            <Contact />
+          </Route>
         </Switch>
       </Router>
     );
diff --git a/src/types/images.d.ts b/src/types/images.d.ts
index a189d4d..2d09f6f 100644
--- a/src/types/images.d.ts
+++ b/src/types/images.d.ts
@@ -1,4 +1,5 @@
 declare module '*.jpg';
 declare module '*.jpeg';
 declare module '*.png';
-declare module '*.svg';
\ No newline at end of file
+declare module '*.svg';
+declare module '*.mp4';
\ No newline at end of file
diff --git a/src/views/Auth/Login/index.tsx b/src/views/Auth/Login/index.tsx
index fe8a339..41b1dd2 100644
--- a/src/views/Auth/Login/index.tsx
+++ b/src/views/Auth/Login/index.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import Navbar from "../../../components/Navbar/index";
 import Footer from "../../../views/Home/Footer/index";
 import Input from "../../../components/Input/index";
-import Checkbox from "@mui/material/Checkbox";
+import CustomCheckbox from '../../../components/CustomCheckbox/index';
 import CheckBoxOutlineBlankTwoToneIcon from "@mui/icons-material/CheckBoxOutlineBlankTwoTone";
 import CheckBoxRoundedIcon from "@mui/icons-material/CheckBoxRounded";
 
@@ -57,7 +57,7 @@ function Login(props: any) {
         />
         <div className="login__options d-flex justify-content-between align-items-center">
           <div className="d-flex align-items-center">
-            <Checkbox
+            <CustomCheckbox
               icon={
                 <CheckBoxOutlineBlankTwoToneIcon
                   style={{ color: "#666666", fontSize: 30, padding: 0 }}
diff --git a/src/views/Contact/index.scss b/src/views/Contact/index.scss
new file mode 100644
index 0000000..3108c46
--- /dev/null
+++ b/src/views/Contact/index.scss
@@ -0,0 +1,84 @@
+.contact{
+  header{
+    color: white;
+  }
+}
+
+@media screen and (min-width: 1441px) {
+  .contact{
+    main{
+      max-width: 1350px;
+      padding-top: 40px;
+    }
+    .MuiFormControl-root {
+      width: 100%;
+      margin: 10px auto !important;
+      .MuiSelect-iconOutlined {
+        display: none;
+      }
+      .MuiSelect-outlined.MuiSelect-outlined {
+        padding-right: 15px;
+      }
+      color: #797979 !important;
+    }
+    .MuiOutlinedInput-notchedOutline {
+      top: 0px !important;
+    }
+    .MuiOutlinedInput-notchedOutline {
+      border-color: #666666 !important;
+      border-width: 1px !important;
+      color: green !important;
+      border-radius: 10px !important;
+    }
+  
+    .MuiOutlinedInput-input {
+      padding: 15px 14px !important;
+      font-family: numeralLight;
+      font-size: 20px;
+      &:focus{
+        border: 0.2px solid #84de56 !important;
+        border-radius: 10px;
+        transform : translateY(0.5px);
+      }
+    }
+    .MuiInputLabel-outlined {
+      font-family: numeralLight !important;
+      display: inline !important;
+      position: absolute;
+      text-align: right !important;
+      right: 15px;
+      top: 22px;
+      padding: 0px !important;
+      transform: translate(0px, 0px) scale(1) !important;
+    }
+    .MuiInputLabel-shrink {
+      text-align: center !important;
+      display: inline;
+      position: absolute;
+      right: 0px;
+      top: -8px;
+      transform: translate(0px, 0px) scale(0.85) !important;
+      padding: 0px 10px !important;
+    }
+  
+    label {
+      background-color: #2F2F2F;
+      width: fit-content;
+      text-align: center;
+      color: #B5B5B5 !important;
+      letter-spacing: -1px;
+      font-size: 16px;
+    }
+    .Mui-focused {
+      color: rgba(0, 0, 0, 1) !important;
+      border-color: #84de56 !important;
+      // background-color: white;
+      color: #84de56 !important;
+    }
+  
+    .MuiInputBase-input {
+      height: auto !important;
+    }
+  }
+
+}
\ No newline at end of file
diff --git a/src/views/Contact/index.tsx b/src/views/Contact/index.tsx
new file mode 100644
index 0000000..9c77351
--- /dev/null
+++ b/src/views/Contact/index.tsx
@@ -0,0 +1,60 @@
+import React, { useState } from "react";
+import "./index.scss";
+import Navbar from "../../components/Navbar/index";
+import Footer from "../../views/Home/Footer/index";
+import Input from "../../components/Input/index";
+import onInput from "../../util/onInput";
+
+interface FormData {
+  name?: string;
+  cellphone?: string;
+  departman?: string;
+  text?: string;
+}
+
+export default function Contact() {
+  const [formData, setFormData] = useState<FormData | undefined>(undefined);
+
+  const onChange = (e: any) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+
+  return (
+    <div className="contact main d-flex flex-column">
+      <Navbar />
+      <main className="d-flex flex-column">
+        <header>
+          <h1>تماس با ما</h1>
+        </header>
+        <div className="d-flex">
+          <section className="contact__form d-flex flex-column">
+            <form action="">
+              <div className="contact__form--name">
+                <Input
+                  name="name"
+                  label="نام"
+                  align="right"
+                  // onInput={onInput.englishAndNumberWithoutSpace}
+                  onChange={onChange}
+                />
+              </div>
+              <div className="contact__form--name">
+                <Input
+                  name="cellphone"
+                  label="شماره موبایل"
+                  align="left"
+                  onInput={onInput.numberOnly}
+                  onChange={onChange}
+                />
+              </div>
+            </form>
+          </section>
+          <section className="contact__info d-flex flex-column">
+
+          </section>
+        </div>
+      </main>
+      <Footer />
+    </div>
+  );
+}
diff --git a/src/views/Course/index.scss b/src/views/Course/index.scss
index e495c4a..11b5c3b 100644
--- a/src/views/Course/index.scss
+++ b/src/views/Course/index.scss
@@ -1,286 +1,263 @@
 .course{
-  background: hsla(0, 0%, 31%, 1);
-  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%
-  );
-  width: 100%;
-  overflow-x: hidden;
-  padding-top: 60px;
-  min-height: 100vh;
-  font-family: numeralLight;
-  &-container{
-    margin: 0px auto;
-    width: 100%;
+  main{
     header{
       padding: 70px 0px 45px;
       border-bottom:3px solid #4a4a4a;
 
     }
+  }
+  &__info{
+    &--image{
+      margin-left: 20px;
+      img{
+        border-top-left-radius: 9px;
+        border-top-right-radius: 9px;
+        border-bottom-right-radius: 9px;
+        border-bottom-left-radius: 24px;
+      }
+    }
+    &--description{
+      padding-top: 5px;
+      a{
+        color: #424242;
+      }
+      li{
+        color: #424242;
+      }
+      h1{
+        color: white;
+        margin-top: 12px;
+      }
+      p{
+        color: #D3D3D3;
+        margin-top: 25px;
+      }
+      .course-info-items{
+        padding: 10px;
+        background-color: #08793d23;
+        border-radius: 10px;
+        i{
+          color: #4DD35B;
+        }
+      }
+    }
+  }
+  &__options{
+    &--rate{
+      border: 2px solid #707070;
+      box-shadow: 0px 0px 39px #f7ff01b3;
+      border-radius: 15px;
+      padding-top: 20px;
+      color: white;
+    }
+    &--button{
+      background-color: #313131;
+      border: 1px solid #707070;
+      color: white;
+      padding: 8px;
+      text-align: center;
+      margin-top: 15px;
+      &:hover{
+        color: white;
+      }
+    }
+  }
+  &__list{
+    margin-bottom: 30px;
+    border-radius: 10px;
+    
+    header{
+      padding: 40px 0px 20px;
+      border: 0px;
+      h2{
+        color: #4DD35B;
+      }
+      p{
+        color: #707070;
+      }
+    }
+  }
+}
+
+
+@media screen and (min-width: 1441px) {
+  .course{
+    main {
+      max-width: 1350px;
+    }
     &__info{
+      flex: 4;
       &--image{
-        margin-left: 20px;
         img{
-          border-top-left-radius: 9px;
-          border-top-right-radius: 9px;
-          border-bottom-right-radius: 9px;
-          border-bottom-left-radius: 24px;
+          width: 320px;
+          height: 420px;
         }
       }
       &--description{
-        padding-top: 5px;
         a{
-          color: #424242;
+          font-size: 17px;
         }
         li{
-          color: #424242;
+          font-size: 17px;
         }
         h1{
-          color: white;
-          margin-top: 12px;
+          font-size: 50px;
         }
         p{
-          color: #D3D3D3;
-          margin-top: 25px;
+          font-size: 16px;
         }
         .course-info-items{
-          padding: 10px;
-          background-color: #08793d23;
-          border-radius: 10px;
+          width: 220px;
+          margin-top: 20px;
+          & img{
+            margin-left: 5px;
+            width : 50px;
+          }
           i{
-            color: #4DD35B;
+            font-size: 18px;
+            font-family: numeralLight;
+          }
+          p{
+            font-size: 14px;
+            margin: 0px;
           }
         }
       }
     }
     &__options{
+      flex: 2;
       &--rate{
-        border: 2px solid #707070;
-        box-shadow: 0px 0px 39px #f7ff01b3;
-        border-radius: 15px;
-        padding-top: 20px;
-        color: white;
-      }
-      &--button{
-        background-color: #313131;
-        border: 1px solid #707070;
-        color: white;
-        padding: 8px;
-        text-align: center;
-        margin-top: 15px;
-        &:hover{
-          color: white;
+        width: 315px;
+        height: 200px;
+        margin-bottom: 30px;
+        &__number{
+          div{
+            font-size: 20px;
+          }
+          i{
+            font-size: 15px;
+          }
+          b{
+            font-size: 50px;
+          }
+          span{
+            font-size: 18px;
+            transform: translateY(4px);
+            margin-right: 10px;
+          }
+        }
+        h2{
+          margin-top: 15px;
+          font-size: 20px;
         }
+        
       }
+     &--button{
+       width: 315px;
+       height: 66px;
+       padding: 0px 30px;
+       font-size: 18px;
+       border-radius: 40px;
+     }
     }
     &__list{
-      margin-bottom: 30px;
-      border-radius: 10px;
-      
       header{
-        padding: 40px 0px 20px;
-        border: 0px;
         h2{
-          color: #4DD35B;
+          font-size: 25px;
         }
         p{
-          color: #707070;
+          font-size: 13px;
         }
       }
     }
   }
 }
 
-
-@media screen and (min-width: 1441px) {
+@media screen and (min-width: 1008px) and (max-width: 1440px) {
   .course{
-    &-container {
-      max-width: 1350px;
-      &__info{
-        flex: 4;
-        &--image{
-          img{
-            width: 320px;
-            height: 420px;
-          }
-        }
-        &--description{
-          a{
-            font-size: 17px;
-          }
-          li{
-            font-size: 17px;
-          }
-          h1{
-            font-size: 50px;
-          }
-          p{
-            font-size: 16px;
-          }
-          .course-info-items{
-            width: 220px;
-            margin-top: 20px;
-            & img{
-              margin-left: 5px;
-              width : 50px;
-            }
-            i{
-              font-size: 18px;
-              font-family: numeralLight;
-            }
-            p{
-              font-size: 14px;
-              margin: 0px;
-            }
-          }
+    main {
+      max-width: 1250px;
+      padding: 0px 10px;
+    }
+    &__info{
+      flex: 3;
+      &--image{
+        img{
+          width: 250px;
+          height: 380px;
         }
       }
-      &__options{
-        flex: 2;
-        &--rate{
-          width: 315px;
-          height: 200px;
-          margin-bottom: 30px;
-          &__number{
-            div{
-              font-size: 20px;
-            }
-            i{
-              font-size: 15px;
-            }
-            b{
-              font-size: 50px;
-            }
-            span{
-              font-size: 18px;
-              transform: translateY(4px);
-              margin-right: 10px;
-            }
-          }
-          h2{
-            margin-top: 15px;
-            font-size: 20px;
-          }
-          
+      &--description{
+        a{
+          font-size: calc(100vw / 90);
         }
-       &--button{
-         width: 315px;
-         height: 66px;
-         padding: 0px 30px;
-         font-size: 18px;
-         border-radius: 40px;
-       }
-      }
-      &__list{
-        header{
-          h2{
-            font-size: 25px;
-          }
-          p{
-            font-size: 13px;
-          }
+        li{
+          font-size: calc(100vw / 90);
         }
-      }
-    }
-  }
-}
-
-@media screen and (min-width: 1008px) and (max-width: 1440px) {
-  .course{
-    &-container {
-      max-width: 1250px;
-      padding: 0px 10px;
-      &__info{
-        flex: 3;
-        &--image{
-          img{
-            width: 250px;
-            height: 380px;
-          }
+        h1{
+          font-size: calc(100vw / 40);
         }
-        &--description{
-          a{
-            font-size: calc(100vw / 90);
-          }
-          li{
-            font-size: calc(100vw / 90);
+        p{
+          font-size: calc(100vw / 80);;
+        }
+        .course-info-items{
+          width: 45%;
+          margin-top: 20px;
+          & img{
+            margin-left: 10px;
+            width : 45px;
           }
-          h1{
-            font-size: calc(100vw / 40);
+          i{
+            font-size: calc(100vw / 95);
+            font-family: numeralLight;
           }
           p{
-            font-size: calc(100vw / 80);;
-          }
-          .course-info-items{
-            width: 45%;
-            margin-top: 20px;
-            & img{
-              margin-left: 10px;
-              width : 45px;
-            }
-            i{
-              font-size: calc(100vw / 95);
-              font-family: numeralLight;
-            }
-            p{
-              font-size: calc(100vw / 100);
-              margin: 0px;
-            }
+            font-size: calc(100vw / 100);
+            margin: 0px;
           }
         }
       }
-      &__options{
-        flex: 2;
-        &--rate{
-          width: 70%;
-          height: 160px;
-          margin-bottom: 30px;
-          &__number{
-            i{
-              font-size: calc(100vw / 100);
-            }
-            b{
-              font-size: calc(100vw / 50);
-            }
-            span{
-              font-size: 18px;
-              transform: translateY(4px);
-              margin-right: 10px;
-            }
+    }
+    &__options{
+      flex: 2;
+      &--rate{
+        width: 70%;
+        height: 160px;
+        margin-bottom: 30px;
+        &__number{
+          i{
+            font-size: calc(100vw / 100);
           }
-          h2{
-            margin-top: 5px;
-            font-size: calc(100vw / 80);
+          b{
+            font-size: calc(100vw / 50);
           }
-          
+          span{
+            font-size: 18px;
+            transform: translateY(4px);
+            margin-right: 10px;
+          }
+        }
+        h2{
+          margin-top: 5px;
+          font-size: calc(100vw / 80);
         }
-       &--button{
-         width: 70%;
-         height: 59px;
-         padding: 0px 30px;
-         font-size: calc(100vw / 75);
-         border-radius: 40px;
-       }
+        
       }
-      &__list{
-        header{
-          h2{
-            font-size: calc(100vw / 65);
-          }
-          p{
-            font-size: calc(100vw / 100);
-          }
+     &--button{
+       width: 70%;
+       height: 59px;
+       padding: 0px 30px;
+       font-size: calc(100vw / 75);
+       border-radius: 40px;
+     }
+    }
+    &__list{
+      header{
+        h2{
+          font-size: calc(100vw / 65);
+        }
+        p{
+          font-size: calc(100vw / 100);
         }
       }
     }
diff --git a/src/views/Course/index.tsx b/src/views/Course/index.tsx
index 547a2c3..1444017 100644
--- a/src/views/Course/index.tsx
+++ b/src/views/Course/index.tsx
@@ -44,15 +44,15 @@ function Course({ lessons }: any) {
     );
   };
   return (
-    <div className="course d-flex flex-column">
+    <div className="course main d-flex flex-column">
       <Navbar />
-      <div className="course-container d-flex flex-column">
+      <main>
         <header className="d-flex align-items-end">
-          <div className="course-container__info d-flex">
-            <div className="course-container__info--image d-flex align-items-end">
+          <div className="course__info d-flex">
+            <div className="course__info--image d-flex align-items-end">
               <img src={course?.thumbnailUrl} alt="" />
             </div>
-            <div className="course-container__info--description d-flex flex-column justify-content-between">
+            <div className="course__info--description d-flex flex-column justify-content-between">
               <div>
                 <BreadCrumbs links={links} />
                 <h1>{course?.title?.slice(0, 25)}</h1>
@@ -84,9 +84,9 @@ function Course({ lessons }: any) {
               </div>
             </div>
           </div>
-          <div className="course-container__options d-flex flex-column align-items-end justify-content-end">
-            <div className="course-container__options--rate d-flex flex-column align-items-center justify-content-start">
-              <div className="course-container__options--rate__number d-flex align-items-center">
+          <div className="course__options d-flex flex-column align-items-end justify-content-end">
+            <div className="course__options--rate d-flex flex-column align-items-center justify-content-start">
+              <div className="course__options--rate__number d-flex align-items-center">
                 <div>
                   <b>10</b>
                   <i>/2</i>
@@ -96,20 +96,20 @@ function Course({ lessons }: any) {
               <StyledRating />
               <h2>میانگین رای کاربران</h2>
             </div>
-            <button className="course-container__options--button d-flex align-items-center justify-content-between">
+            <button className="course__options--button d-flex align-items-center justify-content-between">
               اضافه کردن به علاقه‌مندی‌ها
               <img src={bookmark} alt="" />
             </button>
             <Link
               to="/"
-              className="course-container__options--button d-flex align-items-center justify-content-between"
+              className="course__options--button d-flex align-items-center justify-content-between"
             >
               مشاهده پیشنمایش دوره
               <img src={play} alt="" />
             </Link>
           </div>
         </header>
-        <section className="course-container__list d-flex flex-column">
+        <section className="course__list d-flex flex-column">
           <header>
             <h2>سر فصل دوره</h2>
             <p>در این قسمت شاید یک متن جهت زیباسازی قرار بگیرد </p>
@@ -118,7 +118,7 @@ function Course({ lessons }: any) {
             <Lesson key={i} lesson={lesson} />
           ))}
         </section>
-      </div>
+      </main>
       <Footer />
     </div>
   );
diff --git a/src/views/Home/index.scss b/src/views/Home/index.scss
index e0cf3ea..f8b4fb8 100644
--- a/src/views/Home/index.scss
+++ b/src/views/Home/index.scss
@@ -1,23 +1,5 @@
 .home {
-  background: hsla(0, 0%, 31%, 1);
-  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%
-  );
-  width: 100%;
-  overflow-x: hidden;
-  padding-top: 60px;
+ 
 }
 
 @media screen and (min-width: 641px) and (max-width: 1007px){
diff --git a/src/views/Home/index.tsx b/src/views/Home/index.tsx
index cbbeac9..0a561be 100644
--- a/src/views/Home/index.tsx
+++ b/src/views/Home/index.tsx
@@ -33,7 +33,7 @@ export default function Home(props: any) {
   return (
     <>
       <div
-        className="home d-flex flex-column"
+        className="home main d-flex flex-column"
         style={{ filter: vocal ? "blur(8px)" : "" }}
       >
         <Navbar />
diff --git a/src/views/Subscription/DiscountCode/index.scss b/src/views/Subscription/DiscountCode/index.scss
new file mode 100644
index 0000000..60e6b6d
--- /dev/null
+++ b/src/views/Subscription/DiscountCode/index.scss
@@ -0,0 +1,66 @@
+.discount-code{
+  width: 100%;
+  border: 1px solid #707070;
+  border-radius: 10px;
+  padding: 20px 30px;
+  h3{
+    color: white;
+    margin: 0px;
+  }
+  input{
+    background-color : rgba(255, 255, 255, 0.06);
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+    border: 0px;
+    color: white;
+    &::placeholder{
+      color: white;
+    }
+  }
+  button{
+    background-color : #9CDF52;
+    border-top-left-radius: 10px;
+    color: white;
+    border-bottom-left-radius: 10px;
+  }
+}
+
+@media screen and (min-width : 1441px) {
+  .discount-code{
+    h3{
+      font-size: 20px;
+    }
+    input{
+      padding: 20px 10px 20px 0px;
+      width: 200px;
+      font-size: 14px;
+      &::placeholder{
+        font-size: 10px;
+      }
+    }
+    button{
+      padding: 0px 20px;
+      font-size: 14px;
+    }
+  }
+}
+
+@media screen and (min-width: 1008px) and (max-width: 1440px) {
+  .discount-code{
+    h3{
+      font-size: calc(100vw / 72);
+    }
+    input{
+      padding: 20px 10px 20px 0px;
+      width: 200px;
+      font-size: calc(100vw / 90);
+      &::placeholder{
+        font-size: calc(100vw / 110);
+      }
+    }
+    button{
+      padding: 0px 20px;
+      font-size: calc(100vw / 90);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/Subscription/DiscountCode/index.tsx b/src/views/Subscription/DiscountCode/index.tsx
new file mode 100644
index 0000000..d231c67
--- /dev/null
+++ b/src/views/Subscription/DiscountCode/index.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import './index.scss';
+
+export default function DiscountCode() {
+  return (
+    <div className="discount-code d-flex align-items-center justify-content-between">
+      <h3>کارت هدیه یا کد تخفیف دارید؟ </h3>
+      <div className="d-flex flex-column">
+        <div className="d-flex">
+          <input type="text" placeholder="کد خود را در این قسمت وارد نمائید" />
+          <button>تایید کد</button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/views/Subscription/SubscribeRadio/index.scss b/src/views/Subscription/SubscribeRadio/index.scss
new file mode 100644
index 0000000..b73faad
--- /dev/null
+++ b/src/views/Subscription/SubscribeRadio/index.scss
@@ -0,0 +1,133 @@
+.subscribe-radio{
+  width: 100%;
+  border : 1px solid #DFDFDF;
+  margin-bottom: 15px;
+  border-radius: 10px;
+  &__name{
+    padding: 12px;
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+  }
+  &__factor{
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+    background-color: rgba(255, 255, 255, 0.18);
+    padding : 10px 20px 10px 0px;
+
+    strong, b{
+      color: white;
+    }
+    &--tag{
+      background-color: yellow;
+      padding: 4px 20px;
+      border-radius: 30px;
+      width: fit-content;
+    }
+    &--finalPrice{
+      i{
+        color: white;
+        margin-right: 10px;
+      }
+    }
+    &--off{
+      color: #707070;
+      b{
+        color: #707070;
+        position: relative;
+        span{
+          position: absolute;
+          width: 100%;
+          height: 2px;
+          top: 50%;
+          left: 0px;
+          transform: translateY(-50%) rotate(-15deg);
+          background-color: rgb(211, 211, 211);
+          opacity: 0.5;
+        }
+      }
+      i{
+        margin-right: 10px;
+      }
+    }
+  }
+  &-active{
+    box-shadow: 0px 0px 6px #4DD35B;
+    background-color: #4DD35B;
+    border: none;
+    .subscribe-radio__name{
+    }
+    .subscribe-radio__factor{
+      background-color: rgba(255, 255, 255, 0.18);
+    }
+  }
+}
+
+@media screen and (min-width: 1441px) {
+  .subscribe-radio{
+    height: 120px;
+    &__name{
+      flex: 7;
+      h2{
+        font-size: 20px;
+        margin-right: 40px;
+      }
+    }
+    &__factor{
+      flex: 3;
+      &--tag{
+        font-size: 14px;
+      }
+      &--off{
+        b{
+          font-size: 20px;
+        }
+        i{
+          font-size: 12px;
+        }
+      }
+      &--finalPrice{
+        i{
+          font-size: 12px;
+        }
+        strong{
+          font-size: 26px;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 1008px) and (max-width: 1440px) {
+  .subscribe-radio{
+    min-height: 100px;
+    &__name{
+      flex: 7;
+      h2{
+        font-size: calc(100vw / 70);
+        margin-right: 40px;
+      }
+    }
+    &__factor{
+      flex: 3;
+      &--tag{
+        font-size: calc(100vw / 110);
+      }
+      &--off{
+        b{
+          font-size: calc(100vw / 80);
+        }
+        i{
+          font-size: calc(100vw / 115);
+        }
+      }
+      &--finalPrice{
+        i{
+          font-size: calc(100vw / 115);
+        }
+        strong{
+          font-size: calc(100vw / 64);
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/Subscription/SubscribeRadio/index.tsx b/src/views/Subscription/SubscribeRadio/index.tsx
new file mode 100644
index 0000000..c05aa92
--- /dev/null
+++ b/src/views/Subscription/SubscribeRadio/index.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import "./index.scss";
+import CustomCheckbox from "../../../components/CustomCheckbox";
+import CircleRoundedIcon from "@mui/icons-material/CircleRounded";
+import RadioButtonUncheckedRoundedIcon from "@mui/icons-material/RadioButtonUncheckedRounded";
+import { connect } from "react-redux";
+
+function SubscribeRadio({ data, selectedSubscripe }: any) {
+  return (
+    <div
+      className={
+        "subscribe-radio d-flex" +
+        " " +
+        (selectedSubscripe.id === data.id ? "subscribe-radio-active" : "")
+      }
+    >
+      <div className="subscribe-radio__name d-flex align-items-center">
+        <CustomCheckbox
+          icon={
+            <RadioButtonUncheckedRoundedIcon
+              style={{ color: "#707070", fontSize: 50, padding: 0 }}
+            />
+          }
+          checkedIcon={
+            <CircleRoundedIcon
+              style={{ color: "white", fontSize: 50, padding: 0 }}
+            />
+          }
+        />
+        <h2>{data.name}</h2>
+      </div>
+      <div className="subscribe-radio__factor d-flex flex-column justify-content-center">
+        {data.offPercent !== 0 && (
+          <div className="subscribe-radio__factor--off d-flex align-items-center">
+            <b>{data.off}<span></span></b>
+            <i>تومان</i>
+          </div>
+        )}
+        <div className="subscribe-radio__factor--finalPrice d-flex align-items-center">
+          <strong>{data.finalPrice}</strong>
+          <i>تومان</i>
+        </div>
+        {data.offPercent !== 0 && (
+          <span className="subscribe-radio__factor--tag">{`${data.offPercent}% تخفیف ویژه`}</span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default connect(
+  (state: any) => ({
+    selectedSubscripe: state.publicApi.selectedSubscripe,
+  }),
+  {}
+)(SubscribeRadio);
diff --git a/src/views/Subscription/index.scss b/src/views/Subscription/index.scss
new file mode 100644
index 0000000..780444b
--- /dev/null
+++ b/src/views/Subscription/index.scss
@@ -0,0 +1,41 @@
+.subscription {
+  main {
+    h1,h2{
+      color: white;
+    }
+    p{
+      color : #969696;
+      margin : 5px 0px 35px;
+    }
+  }
+}
+
+@media screen and (min-width : 1441px) {
+  .subscription{
+    main{
+      margin-top: 50px;
+      max-width: 700px;
+      h1{
+        font-size: 44px;
+      }
+      p{
+        font-size: 21px;
+      }
+    }
+  }
+}
+
+@media screen and (min-width : 1008px) and (max-width : 1440px) {
+  .subscription{
+    main{
+      margin-top: 50px;
+      max-width: 700px;
+      h1{
+        font-size: calc(100vw / 30);
+      }
+      p{
+        font-size: calc(100vw / 70);
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/Subscription/index.tsx b/src/views/Subscription/index.tsx
new file mode 100644
index 0000000..e10cc80
--- /dev/null
+++ b/src/views/Subscription/index.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import Navbar from "../../components/Navbar/index";
+import Footer from "../../views/Home/Footer/index";
+import SubscribeRadio from "./SubscribeRadio/index";
+import DiscountCode from "./DiscountCode/index";
+import {connect} from 'react-redux';
+import "./index.scss";
+
+function Subscription({subscribes} : any) {
+  return (
+    <div className="subscription main d-flex flex-column">
+      <Navbar />
+      <main className="d-flex flex-column">
+        <h1>خرید اشتراک دانوین</h1>
+        <p>
+          لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده
+          از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و
+          سطرآنچنان که لازم است و برای شرایط{" "}
+        </p>
+        {
+          subscribes?.map((subscribe : any , i : any) => (
+            <SubscribeRadio data={subscribe} />
+          ))
+        }
+        <DiscountCode />
+      </main>
+      <Footer />
+    </div>
+  );
+}
+
+export default connect((state : any) => ({
+  subscribes : state.publicApi.mockSubscribes,
+}), {})(Subscription);
diff --git a/src/views/VideoTube/AddComment/index.tsx b/src/views/VideoTube/AddComment/index.tsx
new file mode 100644
index 0000000..bc7fc72
--- /dev/null
+++ b/src/views/VideoTube/AddComment/index.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import Avatar from "@mui/material/Avatar";
+import user3 from "../../../assets/images/user3.png";
+
+export default function AddComment() {
+  return (
+    <>
+      <Avatar src={user3} style={{ width: 65, height: 65, marginLeft: 10 }} />
+      <div className="d-flex flex-column" style={{width : '100%'}}>
+        <textarea rows={5} placeholder="نظر خود را در این قسمت بنویسید " />
+        <div className="d-flex justify-content-end">
+          <button>ارسال نظر</button>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/views/VideoTube/Attachments/index.scss b/src/views/VideoTube/Attachments/index.scss
new file mode 100644
index 0000000..d90def5
--- /dev/null
+++ b/src/views/VideoTube/Attachments/index.scss
@@ -0,0 +1,44 @@
+.download-attachments{
+  color: white;
+  margin: 0px auto;
+  border-bottom: 1px solid #2c2c2c;
+  span{
+
+  }
+  h4{
+    margin: 0px;
+  }
+  a{
+    padding: 5px 15px;
+    border: 1px solid #707070;
+    color: white;
+    text-decoration: none;
+    border-radius: 8px;
+  }
+}
+
+@media screen and (min-width: 1441px) {
+  .download-attachments{
+    width: calc(100% - 20px);
+    padding: 20px 0px;
+    a{
+      font-size: 18px;
+    }
+    h4{
+      font-size: 18px;
+    }
+  }
+}
+
+@media screen and (min-width: 1008px) and (max-width: 1440px) {
+  .download-attachments{
+    width: calc(100% - 20px);
+    padding: 20px 0px;
+    a{
+      font-size: calc(100vw / 100);
+    }
+    h4{
+      font-size: calc(100vw / 100);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/VideoTube/Attachments/index.tsx b/src/views/VideoTube/Attachments/index.tsx
new file mode 100644
index 0000000..e2eeee7
--- /dev/null
+++ b/src/views/VideoTube/Attachments/index.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import './index.scss';
+
+export default function Attachments({file,num} : any) {
+  return (
+    <div className="download-attachments d-flex justify-content-between align-items-center">
+      <div className="d-flex">
+        <span>{num}</span>
+        <h4>{file.name}</h4>
+      </div>
+      <a href={file.file} download>دریافت</a>
+    </div>
+  )
+}
diff --git a/src/views/VideoTube/Book/index.scss b/src/views/VideoTube/Book/index.scss
new file mode 100644
index 0000000..96873b0
--- /dev/null
+++ b/src/views/VideoTube/Book/index.scss
@@ -0,0 +1,43 @@
+.video-tube-suggest{
+  color: white;
+  img{
+    border-top-right-radius: 10px;
+    border-top-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    border-bottom-left-radius: 24px;
+    margin-bottom: 10px;
+  }
+}
+
+@media screen and (min-width: 1441px) {
+  .video-tube-suggest{
+    width: 30%;
+    img{
+      width: 130px;
+      height: 180px;
+    }
+    h4{
+      font-size: 16px;
+    }
+    p{
+      font-size: 12px;
+    }
+  }
+}
+
+
+@media screen and (min-width: 1008px) and (max-width: 1440px) {
+  .video-tube-suggest{
+    width: 30%;
+    img{
+      width: 130px;
+      height: 180px;
+    }
+    h4{
+      font-size: calc(100vw / 90);
+    }
+    p{
+      font-size: calc(100vw / 110);
+    }
+  }
+}
diff --git a/src/views/VideoTube/Book/index.tsx b/src/views/VideoTube/Book/index.tsx
new file mode 100644
index 0000000..03199de
--- /dev/null
+++ b/src/views/VideoTube/Book/index.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import './index.scss';
+
+export default function Book({data} : any) {
+  return (
+    <div className="video-tube-suggest d-flex flex-column">
+      <img src={`https://dnvn.ir/api/v1/file/${data.fileIds}`} alt="" />
+      <h4>{data.name}</h4>
+      <p>{'لورم ایپسوم و اینجور چیزا'}</p>
+    </div>
+  )
+}
+
diff --git a/src/views/VideoTube/Comment/index.scss b/src/views/VideoTube/Comment/index.scss
new file mode 100644
index 0000000..d482a9b
--- /dev/null
+++ b/src/views/VideoTube/Comment/index.scss
@@ -0,0 +1,50 @@
+.video-tube-comment{
+  padding: 10px 0px;
+  color: white;
+  div{
+  }
+  button{
+    background-color: inherit;
+    color: #4DD35B;
+    border: none;
+    margin-left: 20px;
+  }
+}
+
+@media screen and (min-width: 1441px){
+  .video-tube-comment{
+    width: 90%;
+    p{
+      font-size: 16px;
+      strong{
+        font-size: 18px;
+        margin-left: 5px;
+      }
+    }
+    button{
+      font-size: 13px;
+    }
+    span{
+      font-size: 15px;
+    }
+  }
+}
+
+@media screen and (min-width: 1008px) and (max-width: 1440px) {
+  .video-tube-comment{
+    width: 90%;
+    p{
+      font-size: calc(100vw / 105);
+      strong{
+        font-size: calc(100vw / 90);
+        margin-left: 5px;
+      }
+    }
+    button{
+      font-size: calc(100vw / 100) !important;
+    }
+    span{
+      font-size: calc(100vw / 90);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/VideoTube/Comment/index.tsx b/src/views/VideoTube/Comment/index.tsx
new file mode 100644
index 0000000..a40d31b
--- /dev/null
+++ b/src/views/VideoTube/Comment/index.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import Avatar from "@mui/material/Avatar";
+
+import "./index.scss";
+
+export default function Comment({ comment }: any) {
+  return (
+    <div className="video-tube-comment d-flex">
+      <Avatar src={comment.imageUrl} style={{ width: 65, height: 65, marginLeft: 10 }} />
+      <div className="d-flex flex-column">
+        <p>
+          <strong>{comment.name}</strong> {comment.text}
+        </p>
+        <div className="d-flex justify-content-end align-items-center">
+          <button>پاسخ</button>
+          <span>{comment.date}</span>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/views/VideoTube/LessonPlayList/index.scss b/src/views/VideoTube/LessonPlayList/index.scss
new file mode 100644
index 0000000..92bc490
--- /dev/null
+++ b/src/views/VideoTube/LessonPlayList/index.scss
@@ -0,0 +1,134 @@
+.lesson-playlist{
+  width: 100%;
+  header{
+    background-color: inherit !important;
+    h3{
+      background-color : #707070;
+      padding: 5px 10px;
+      margin: 0px;
+    }
+    span{
+      background-color : #707070;
+      display: flex;
+      flex: 1;
+      height : 1px;
+    }
+  }
+  &__item{
+    &--count{
+      color: white;
+    }
+    &--text{
+      padding: 15px 10px;
+      h4{
+        color: white;
+        margin: 0px;
+      }
+      p{
+        color: #767676;
+        margin: 0px;
+      }
+    }
+    &--video{
+      span{
+        background-color : #0000006d;
+        padding: 0px 5px;
+        position: absolute;
+        left: 5px;
+        bottom: 10px;
+        color: white;
+      }
+    }
+  }
+}
+
+
+@media screen and (min-width: 1441px) {
+  .lesson-playlist{
+    width: 100%;
+    header{
+      padding: 10px 40px 0px 0px !important; 
+      h3{
+        font-size: 16px;
+      }
+      span{
+        
+      }
+    }
+    &__item{
+      padding: 10px 0px 5px 0px;
+      cursor: pointer;
+      &--count{
+        font-size: 18px;
+        width : 40px;
+        text-align: center;
+      }
+      &--text{
+        max-width: 55%;
+        h4{
+          font-size: 17px;
+        }
+        p{
+          font-size: 14px;
+        }
+      }
+      &--video{
+        width: 142px;
+        height: 90px;
+        position: relative;
+        video{
+          width : 100%;
+          height : 100%;
+        }
+        span{
+          font-size: 18px;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 1008px) and (max-width: 1440px) {
+  .lesson-playlist{
+    width: 100%;
+    header{
+      padding: 10px 40px 0px 0px !important; 
+      h3{
+        font-size: calc(100vw / 95);
+      }
+      span{
+        
+      }
+    }
+    &__item{
+      padding: 10px 0px 5px 0px;
+      cursor: pointer;
+      &--count{
+        font-size: calc(100vw / 72);
+        width : 40px;
+        text-align: center;
+      }
+      &--text{
+        max-width: 55%;
+        h4{
+          font-size: calc(100vw / 90);
+        }
+        p{
+          font-size: calc(100vw / 100);
+        }
+      }
+      &--video{
+        width: 132px;
+        height: 90px;
+        position: relative;
+        video{
+          width : 100%;
+          height : 100%;
+        }
+        span{
+          font-size:  calc(100vw / 100);
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/VideoTube/LessonPlayList/index.tsx b/src/views/VideoTube/LessonPlayList/index.tsx
new file mode 100644
index 0000000..8305662
--- /dev/null
+++ b/src/views/VideoTube/LessonPlayList/index.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import './index.scss';
+
+export default function LessonPlayList(props: any) {
+  const { lesson } = props;
+  return (
+    <div className="lesson-playlist d-flex flex-column">
+      <header className="d-flex align-items-center">
+        <h3>{lesson.name}</h3>
+        <span></span>
+      </header>
+      {lesson.files.map((file : any, i : any) => (
+        <div className="lesson-playlist__item d-flex align-items-center" key={i}>
+          <span className="lesson-playlist__item--count">{i+1}</span>
+          <div className="lesson-playlist__item--video">
+            <video>
+              <source src={file.src} />
+            </video>
+            <span>22:05</span>
+          </div>
+          <div className="lesson-playlist__item--text d-flex flex-column">
+            <h4>{file.name}</h4>
+            <p>{file.text}</p>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/views/VideoTube/index.scss b/src/views/VideoTube/index.scss
new file mode 100644
index 0000000..0dd8917
--- /dev/null
+++ b/src/views/VideoTube/index.scss
@@ -0,0 +1,346 @@
+.video-tube {
+  &__content {
+    margin-left: 15px;
+    
+    &--display {
+      border-bottom: 1px solid #707070;
+      padding-bottom: 30px;
+      video{
+        border: 1px solid #707070;
+      }
+      span{
+        color: #84DE56;
+        padding: 15px 0px;
+      }
+      h1{
+        color: white;
+      }
+      p{
+        color: white;
+        margin-top: 20px;
+      }
+    }
+    &--comments{
+      color: white;
+      border-bottom: 1px solid #707070;
+      header{
+        padding: 20px 0px;
+        h2{
+          margin: 0px;
+        }
+      }
+      button{
+        background-color: inherit;
+        border: none;
+        color: #4DD35B;
+      }
+    }
+    &--addComment{
+      padding: 15px 0px;
+      button{
+        background-color: #4DD35B;
+        border: none;
+        color: white;
+        border-radius: 20px;
+        padding: 8px 12px;
+        margin-top: 10px;
+      }
+      textarea{
+        width: 100%;
+        border-radius: 12px;
+        background-color: #2D2D2D;
+        padding: 10px;
+        color: white;
+        &:focus{
+          outline: none;
+        }
+        &::placeholder{
+          color: #666666;
+        }
+      }
+    }
+  }
+  &__sidebar {
+    &--playlist {
+      border: 1px solid #707070;
+      margin-bottom: 30px;
+      header {
+        width: 100%;
+        color: white;
+        h2,
+        p {
+          margin: 0px;
+        }
+        p {
+          margin-top: 5px;
+        }
+      }
+      &___list {
+        overflow-y: scroll;
+        &::-webkit-scrollbar {
+          width: 8px;
+        }
+
+        /* Track */
+        &::-webkit-scrollbar-track {
+          box-shadow: inset 0 0 5px inherit;
+          border-radius: 10px;
+        }
+
+        /* Handle */
+        &::-webkit-scrollbar-thumb {
+          background: #bbbbbb;
+          border-radius: 10px;
+        }
+
+        /* Handle on hover */
+        &::-webkit-scrollbar-thumb:hover {
+          background: white;
+        }
+      }
+    }
+    &--attachments {
+      border: 1px solid #707070;
+      margin-bottom: 30px;
+      header {
+        width: 100%;
+        color: white;
+        h2,
+        p {
+          margin: 0px;
+        }
+        p {
+          margin-top: 5px;
+        }
+      }
+      &___list {
+        overflow-y: scroll;
+        &::-webkit-scrollbar {
+          width: 8px;
+        }
+
+        /* Track */
+        &::-webkit-scrollbar-track {
+          box-shadow: inset 0 0 5px inherit;
+          border-radius: 10px;
+        }
+
+        /* Handle */
+        &::-webkit-scrollbar-thumb {
+          background: #bbbbbb;
+          border-radius: 10px;
+        }
+
+        /* Handle on hover */
+        &::-webkit-scrollbar-thumb:hover {
+          background: white;
+        }
+      }
+    }
+    &--suggests {
+      border: 1px solid #707070;
+      header {
+        width: 100%;
+        color: white;
+        h2{
+          margin: 0px;
+        }
+        span{
+          background-color: #00fff74f;
+          color: #00FFF8;
+          padding: 5px 8px;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 1441px) {
+  .video-tube {
+    main {
+      max-width: 1350px;
+      margin-top: 30px;
+    }
+    &__content {
+      flex: 8;
+      &--display {
+        span{
+          font-size: 21px;
+        }
+        h1{
+          font-size: 36px;
+        }
+        p{
+          font-size: 25px;
+        }
+      }
+      &--comments{
+        header{
+          h2{
+            font-size: 26px;
+          }
+        }
+        button{
+          font-size: 19px;
+        }
+      }
+      &--addComment{
+        width: 60%;
+        button{
+          font-size: 18px;
+        }
+        textarea{
+          font-size: 18px;
+          &::placeholder{
+            font-size: 18px;
+          }
+        }
+      }
+    }
+    &__sidebar {
+      flex: 4;
+      &--playlist {
+        max-height: calc(100vh - 140px);
+        header {
+          padding: 14px 12px;
+          background-color: #2c2c2c;
+          img {
+            transform: translateY(-5px);
+          }
+          h2 {
+            font-size: 18px;
+          }
+          p {
+            font-size: 13px;
+          }
+        }
+      }
+      &--attachments {
+        max-height: 320px;
+        header {
+          padding: 14px 12px;
+          background-color: #2c2c2c;
+          h2 {
+            font-size: 18px;
+          }
+          p {
+            font-size: 13px;
+          }
+        }
+      }
+      &--suggests {
+        header {
+          padding: 26px 12px;
+          background-color: #8bd09746;
+          h2 {
+            font-size: 18px;
+          }
+          span{
+            font-size: 13px;
+          }
+        }
+        &___list{
+          padding: 15px 12px;
+          background-color: #08793d58;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 1008px) and (max-width: 1440px) {
+  .video-tube {
+    main {
+      max-width: 1250px;
+      margin-top: 30px;
+      padding: 0px 10px;
+    }
+    &__content {
+      flex: 8;
+      &--display {
+        video{
+          width: 100%;
+        }
+        span{
+          font-size: calc(100vw / 100);
+        }
+        h1{
+          font-size: calc(100vw / 60);
+        }
+        p{
+          font-size: calc(100vw / 100);
+        }
+      }
+      &--comments{
+        header{
+          h2{
+            font-size: calc(100vw / 80);
+          }
+        }
+        button{
+          font-size: calc(100vw / 90);
+        }
+      }
+      &--addComment{
+        width: 60%;
+        button{
+          font-size: calc(100vw / 100);
+        }
+        textarea{
+          font-size: calc(100vw / 90);
+          &::placeholder{
+            font-size: calc(100vw / 90);
+          }
+        }
+      }
+    }
+    &__sidebar {
+      flex: 4;
+      &--playlist {
+        max-height: calc(100vh - 140px);
+        header {
+          padding: 14px 12px;
+          background-color: #2c2c2c;
+          img {
+            transform: translateY(-5px);
+          }
+          h2 {
+            font-size: calc(100vw / 85);
+          }
+          p {
+            font-size: calc(100vw / 120);
+          }
+        }
+      }
+      &--attachments {
+        max-height: 320px;
+        header {
+          padding: 14px 12px;
+          background-color: #2c2c2c;
+          h2 {
+            font-size: calc(100vw / 85);
+          }
+          p {
+            font-size: calc(100vw / 120);
+          }
+        }
+      }
+      &--suggests {
+        header {
+          padding: 26px 12px;
+          background-color: #8bd09746;
+          h2 {
+            font-size: calc(100vw / 85);
+          }
+          span{
+            font-size: calc(100vw / 120);
+          }
+        }
+        &___list{
+          padding: 15px 12px;
+          background-color: #08793d58;
+        }
+      }
+    }
+  }
+}
diff --git a/src/views/VideoTube/index.tsx b/src/views/VideoTube/index.tsx
new file mode 100644
index 0000000..ff4fb5b
--- /dev/null
+++ b/src/views/VideoTube/index.tsx
@@ -0,0 +1,106 @@
+import React, { useEffect } from "react";
+import Navbar from "../../components/Navbar/index";
+import Footer from "../../views/Home/Footer/index";
+import LessonPlayList from "./LessonPlayList/index";
+import Attachments from "./Attachments/index";
+import Book from "./Book/index";
+import Comment from "./Comment/index";
+import AddComment from "./AddComment/index";
+
+import "./index.scss";
+import listIcon from "../../assets/icons/list.png";
+import { connect } from "react-redux";
+import { book } from "../../redux/actions";
+
+
+import user from '../../assets/images/user3.png';
+
+function VodTube({ videoList, getList, list, selectedVideo, comments }: any) {
+  useEffect(() => {
+    getList();
+  }, []);
+  return (
+    <div className="video-tube main d-flex flex-column">
+      <Navbar />
+      <main className="d-flex">
+        <div className="video-tube__content d-flex flex-column">
+          <section className="video-tube__content--display d-flex flex-column">
+            <video controls>
+              <source src={selectedVideo.src} />
+            </video>
+            <span>درس دوم / بیست و یکم</span>
+            <h1>{selectedVideo.name}</h1>
+            <p>{selectedVideo.text}</p>
+          </section>
+          <section className="video-tube__content--comments d-flex flex-column">
+            <header className="d-flex justify-content-between align-items-center">
+              <h2>نظرات</h2>
+              <button>بستن نظرات</button>
+            </header>
+            <div className="video-tube__content-comments___list d-flex flex-column">
+              {
+                comments?.map((comment : any, i : any) => (
+                  <Comment comment={comment} key={i} />
+                ))
+              }
+            </div>
+          </section>
+          <section className="video-tube__content--addComment d-flex">
+            <AddComment />
+          </section>
+        </div>
+        <div className="video-tube__sidebar d-flex flex-column">
+          <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>{videoList.name}</h2>
+                <p>در این قسمت توضیحی کوتاه قرار می گیرد</p>
+              </div>
+              <img src={listIcon} alt="" />
+            </header>
+            <div className="video-tube__sidebar--playlist___list d-flex flex-column">
+              {videoList.lessons?.map((lesson: any, i: any) => (
+                <LessonPlayList lesson={lesson} key={i} num={i + 1} />
+              ))}
+            </div>
+          </section>
+          <section className="video-tube__sidebar--attachments d-flex flex-column">
+            <header className="d-flex align-items-center">
+              <div className="d-flex flex-column">
+                <h2>فایل پیوست تمارین این فصل</h2>
+                <p>در این قسمت توضیحی کوتاه قرار می گیرد</p>
+              </div>
+            </header>
+            <div className="video-tube__sidebar--attachments___list d-flex flex-column">
+              {videoList.attachments?.map((file: any, i: any) => (
+                <Attachments file={file} key={i} />
+              ))}
+            </div>
+          </section>
+          <section className="video-tube__sidebar--suggests d-flex flex-column">
+            <header className="d-flex justify-content-between align-items-center">
+              <h2>پیشنهاد دانوین برای شما</h2>
+              <span>تا 50% تخفیف </span>
+            </header>
+            <div className="video-tube__sidebar--suggests___list d-flex justify-content-between align-items-center">
+              {list?.slice(0, 3).map((item: any, i: any) => (
+                <Book data={item} key={i} />
+              ))}
+            </div>
+          </section>
+        </div>
+      </main>
+      <Footer />
+    </div>
+  );
+}
+
+export default connect(
+  (state: any) => ({
+    videoList: state.book.mockVideoList,
+    selectedVideo: state.book.selectedVideo,
+    list: state.book.list,
+    comments: state.book.comments,
+  }),
+  { getList: book.list }
+)(VodTube);
diff --git a/yarn.lock b/yarn.lock
index a277904..81fbbd9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1172,7 +1172,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.8", "@babel/runtime@^7.3.1", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.8", "@babel/runtime@^7.15.4", "@babel/runtime@^7.3.1", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.15.4"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz"
   integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==
@@ -1726,6 +1726,15 @@
     "@mui/utils" "^5.0.0"
     prop-types "^15.7.2"
 
+"@mui/private-theming@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.0.1.tgz#50a0ea6ad5a8d1d78072859c4bdaaa6b6584d986"
+  integrity sha512-R8Cf2+32cG1OXFAqTighA5Mx9R5BQ57cN1ZVaNgfgdbI87Yig2fVMdFSPrw3txcjKlnwsvFJF8AdwQMqq1tJ3Q==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@mui/utils" "^5.0.1"
+    prop-types "^15.7.2"
+
 "@mui/styled-engine@^5.0.0":
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.0.0.tgz#caa1e9c0dd434c3b0c5db32be0e17d8237a4b17d"
@@ -1735,6 +1744,29 @@
     "@emotion/cache" "^11.4.0"
     prop-types "^15.7.2"
 
+"@mui/styles@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@mui/styles/-/styles-5.0.1.tgz#1634d08d892b5c7e85c9f84e4fc8bc02a5fb0f7a"
+  integrity sha512-hCtR2ZVOkoIhpTan02I4UEShnZxe59WwhKRJqauMs/addXByhAHHCNheTdiV++Irl/fyyFObmzPM0CUD3q6FIA==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@emotion/hash" "^0.8.0"
+    "@mui/private-theming" "^5.0.1"
+    "@mui/types" "^7.0.0"
+    "@mui/utils" "^5.0.1"
+    clsx "^1.1.1"
+    csstype "^3.0.9"
+    hoist-non-react-statics "^3.3.2"
+    jss "^10.8.0"
+    jss-plugin-camel-case "^10.8.0"
+    jss-plugin-default-unit "^10.8.0"
+    jss-plugin-global "^10.8.0"
+    jss-plugin-nested "^10.8.0"
+    jss-plugin-props-sort "^10.8.0"
+    jss-plugin-rule-value-function "^10.8.0"
+    jss-plugin-vendor-prefixer "^10.8.0"
+    prop-types "^15.7.2"
+
 "@mui/system@^5.0.0":
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.0.0.tgz#ed520742e417aa2b1ad34a7bbaa6ab04758305ef"
@@ -1765,6 +1797,17 @@
     prop-types "^15.7.2"
     react-is "^17.0.2"
 
+"@mui/utils@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.0.1.tgz#d4f0f41b82db6ac273920a1b5b6a4de7879271f5"
+  integrity sha512-GWO104N+o9KG5fKiTEYnAg7kONKEg3vLN+VROAU0f3it6lFGLCVPcQYex/1gJ4QAy96u6Ez8/Hmmhi1+3cX0tQ==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@types/prop-types" "^15.7.4"
+    "@types/react-is" "^16.7.1 || ^17.0.0"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+
 "@nodelib/fs.scandir@2.1.4":
   version "2.1.4"
   resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz"
@@ -4286,6 +4329,14 @@ css-tree@^1.1.2:
     mdn-data "2.0.14"
     source-map "^0.6.1"
 
+css-vendor@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.8.tgz#e47f91d3bd3117d49180a3c935e62e3d9f7f449d"
+  integrity sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==
+  dependencies:
+    "@babel/runtime" "^7.8.3"
+    is-in-browser "^1.0.2"
+
 css-what@^3.2.1:
   version "3.4.2"
   resolved "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz"
@@ -4432,7 +4483,7 @@ csstype@^3.0.2:
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz"
   integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==
 
-csstype@^3.0.8:
+csstype@^3.0.8, csstype@^3.0.9:
   version "3.0.9"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.9.tgz#6410af31b26bd0520933d02cbc64fce9ce3fbf0b"
   integrity sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==
@@ -6242,6 +6293,11 @@ human-signals@^1.1.1:
   resolved "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz"
   integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
 
+hyphenate-style-name@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
+  integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
+
 iconv-lite@0.4.24:
   version "0.4.24"
   resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz"
@@ -6598,6 +6654,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-in-browser@^1.0.2, is-in-browser@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835"
+  integrity sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=
+
 is-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz"
@@ -7403,6 +7464,76 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
+jss-plugin-camel-case@^10.8.0:
+  version "10.8.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.8.0.tgz#575fd849202d36713a6970796458e375754446c7"
+  integrity sha512-yxlXrXwcCdGw+H4BC187dEu/RFyW8joMcWfj8Rk9UPgWTKu2Xh7Sib4iW3xXjHe/t5phOHF1rBsHleHykWix7g==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    hyphenate-style-name "^1.0.3"
+    jss "10.8.0"
+
+jss-plugin-default-unit@^10.8.0:
+  version "10.8.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.8.0.tgz#98db5962e62abbf43f1cc111e62cb70ffb09db59"
+  integrity sha512-9XJV546cY9zV9OvIE/v/dOaxSi4062VfYQQfwbplRExcsU2a79Yn+qDz/4ciw6P4LV1Naq90U+OffAGRHfNq/Q==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.8.0"
+
+jss-plugin-global@^10.8.0:
+  version "10.8.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.8.0.tgz#0c2b0c056087f5846d600f3332eeb7a1a8b9c9f2"
+  integrity sha512-H/8h/bHd4e7P0MpZ9zaUG8NQSB2ie9rWo/vcCP6bHVerbKLGzj+dsY22IY3+/FNRS8zDmUyqdZx3rD8k4nmH4w==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.8.0"
+
+jss-plugin-nested@^10.8.0:
+  version "10.8.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.8.0.tgz#7ef9a815e9c9fbede41a8f52ce75cffb4c3b86d5"
+  integrity sha512-MhmINZkSxyFILcFBuDoZmP1+wj9fik/b9SsjoaggkGjdvMQCES21mj4K5ZnRGVm448gIXyi9j/eZjtDzhaHUYQ==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.8.0"
+    tiny-warning "^1.0.2"
+
+jss-plugin-props-sort@^10.8.0:
+  version "10.8.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.8.0.tgz#2a83e8ca80d72828495bad57b485f7d55a33543b"
+  integrity sha512-VY+Wt5WX5GMsXDmd+Ts8+O16fpiCM81svbox++U3LDbJSM/g9FoMx3HPhwUiDfmgHL9jWdqEuvSl/JAk+mh6mQ==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.8.0"
+
+jss-plugin-rule-value-function@^10.8.0:
+  version "10.8.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.8.0.tgz#e011ed180789229e7ea8f75c222d34810bcab520"
+  integrity sha512-R8N8Ma6Oye1F9HroiUuHhVjpPsVq97uAh+rMI6XwKLqirIu2KFb5x33hPj+vNBMxSHc9jakhf5wG0BbQ7fSDOg==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.8.0"
+    tiny-warning "^1.0.2"
+
+jss-plugin-vendor-prefixer@^10.8.0:
+  version "10.8.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.8.0.tgz#024b6d77be50b68e5dfca2c75f68091d8b722d61"
+  integrity sha512-G1zD0J8dFwKZQ+GaZaay7A/Tg7lhDw0iEkJ/iFFA5UPuvZFpMprCMQttXcTBhLlhhWnyZ8YPn4yqp+amrhQekw==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    css-vendor "^2.0.8"
+    jss "10.8.0"
+
+jss@10.8.0, jss@^10.8.0:
+  version "10.8.0"
+  resolved "https://registry.yarnpkg.com/jss/-/jss-10.8.0.tgz#5063ee73aabd9f228ea3849df7962f0d2e213a42"
+  integrity sha512-6fAMLJrVQ8epM5ghghxWqCwRR0ZamP2cKbOAtzPudcCMSNdAqtvmzQvljUZYR8OXJIeb/IpZeOXA1sDXms4R1w==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    csstype "^3.0.2"
+    is-in-browser "^1.1.3"
+    tiny-warning "^1.0.2"
+
 "jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.1.0:
   version "3.2.0"
   resolved "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.2.0.tgz"
@@ -11268,7 +11399,7 @@ tiny-invariant@^1.0.2:
   resolved "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz"
   integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
 
-tiny-warning@^1.0.0, tiny-warning@^1.0.3:
+tiny-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3:
   version "1.0.3"
   resolved "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==