diff --git a/src/components/Navbar/index.scss b/src/components/Navbar/index.scss
index b8cc369..40935db 100644
--- a/src/components/Navbar/index.scss
+++ b/src/components/Navbar/index.scss
@@ -100,6 +100,7 @@
 
 @media screen and (min-width: 641px) and (max-width: 1007px){
   .nav{
+    background-color: black;
     &__container{
       max-width: 900px;
       &--buttons{
@@ -121,7 +122,7 @@
 
 @media screen and (max-width: 640px){
   .nav{
-    background-color: hsla(0, 0%, 31%, 1);
+    background-color: black;
     &__container{
       max-width: 500px;
       &--buttons{
diff --git a/src/components/StyledRating/index.tsx b/src/components/StyledRating/index.tsx
index a07d24f..0e0ecf1 100644
--- a/src/components/StyledRating/index.tsx
+++ b/src/components/StyledRating/index.tsx
@@ -12,8 +12,8 @@ export default function StyledRating(props : any) {
         name="customized-color"
         defaultValue={2}
         precision={0.5}
-        icon={<StarIcon style={{ fontSize : 40, color : '#FFED00'  }} />}
-        emptyIcon={<StarIcon style={{ fontSize : 40, color : '#494949' }} />}
+        icon={<StarIcon style={{ fontSize : 20, color : '#FFED00'  }} />}
+        emptyIcon={<StarIcon style={{ fontSize : 20, color : '#494949' }} />}
       />
     </>
   )
diff --git a/src/components/Textarea/index.scss b/src/components/Textarea/index.scss
index 8c80231..ca70370 100644
--- a/src/components/Textarea/index.scss
+++ b/src/components/Textarea/index.scss
@@ -29,9 +29,27 @@
 
 @media screen and (min-width: 1008px) and (max-width: 1440px) {
   .custom-textarea{
-    font-size: calc(100vw / 72);
+    font-size: calc(100vw / 85);
     &::placeholder{
-      font-size: calc(100vw / 72);
+      font-size: calc(100vw / 85);
+    }
+  }
+}
+
+@media screen and (min-width: 641px) and (max-width: 1007px) {
+  .custom-textarea{
+    font-size: calc(100vw / 40);
+    &::placeholder{
+      font-size: calc(100vw / 40);
+    }
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .custom-textarea{
+    font-size: calc(100vw / 30);
+    &::placeholder{
+      font-size: calc(100vw / 30);
     }
   }
 }
\ No newline at end of file
diff --git a/src/custom.scss b/src/custom.scss
index e3f6fa7..debe871 100644
--- a/src/custom.scss
+++ b/src/custom.scss
@@ -5,6 +5,10 @@
   border: 0px;
 }
 
+.mobile, .desktop{
+  display: flex;
+}
+
 .submit-large{
   padding: 12px 24px;
 }
@@ -126,8 +130,9 @@
 }
 
 .MuiSelect-select:focus {
-  background-color: inherit !important;
-  color: #4d4d4d !important;
+  // background-color: inherit !important;
+  // color: #4d4d4d !important;
+  border: 1px solid #707070;
 }
 
 .MuiMenu-list {
@@ -163,6 +168,9 @@
       max-width: 1350px;
     }
   }
+  .mobile{
+    display: none !important;
+  }
 }
 
 @media screen and (min-width: 1008px) and (max-width: 1440px){
@@ -174,4 +182,25 @@
       max-width: 1250px;
     }
   }
+  .mobile{
+    display: none !important;
+  }
+}
+
+@media screen and (min-width: 641px) and (max-width: 1007px) {
+  .desktop{
+    display: none !important;
+  }
+  .submit-large{
+    font-size: calc(100vw / 38);
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .desktop{
+    display: none !important;
+  }
+  .submit-large{
+    font-size: calc(100vw / 25);
+  }
 }
\ No newline at end of file
diff --git a/src/views/Auth/Login/index.scss b/src/views/Auth/Login/index.scss
index 2d714f5..e6d4c47 100644
--- a/src/views/Auth/Login/index.scss
+++ b/src/views/Auth/Login/index.scss
@@ -10,7 +10,7 @@
     }
   }
   img {
-    transform: rotate(-90deg);
+    // transform: rotate(-90deg);
   }
   .MuiButtonBase-root{
     padding: 0px !important;
@@ -278,3 +278,280 @@
     }
   }
 }
+
+@media screen and (min-width: 641px) and (max-width: 1007px) {
+  .login {
+    background: black;
+    .footer{
+      display: none !important;
+    }
+    section {
+      // background-color: red;
+      width: 90%;
+      max-width: 700px;
+      height: calc(100% - 60px);
+      justify-content: center;
+      b {
+        color: white;
+        font-size: calc(100vw / 30);
+        margin-bottom: 30px;
+        font-weight: 500;
+      }
+
+      button {
+        background-color: #84de56;
+        color: white;
+        font-size: calc(100vw / 30);
+        width : 100%;
+        max-width: 400px;
+        margin: 50px auto 0px;
+        padding: 10px 0px;
+        border: 0px;
+        border-radius: 10px;
+      }
+    }
+    &__info {
+      width: 300px;
+      margin: 40px auto 0px;
+      text-align: center;
+      color: white;
+      font-size: calc(100vw / 40);
+      a {
+        color: #84de56;
+      }
+    }
+    &__back {
+      position: fixed;
+      top: 100px;
+      margin-bottom: 40px;
+      left: 30px;
+      a {
+        color: white;
+        font-size: calc(100vw / 110);
+      }
+      img{
+        width : 50px;
+      }
+    }
+    &__options{
+      padding-top: 20px;
+      div{
+        font-size: calc(100vw / 40);
+      }
+      a{
+        font-size: calc(100vw / 45);
+      }
+    }
+    .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: 10px 14px !important;
+      font-family: numeralLight;
+      font-size: calc(100vw / 30);
+      background-color: #2A2A2A;
+      &:focus{
+        border: 0.2px solid #84de56 !important;
+        border-radius: 10px;
+        transform : translateY(0px);
+        z-index: 100;
+      }
+    }
+    .MuiInputLabel-outlined {
+      font-family: numeralLight !important;
+      display: inline !important;
+      position: absolute;
+      text-align: right !important;
+      right: 15px;
+      top: calc(50%);
+      padding: 0px !important;
+      transform: translate(0px, -50%) 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: #2A2A2A;
+      width: fit-content;
+      text-align: center;
+      color: #B5B5B5 !important;
+      letter-spacing: -1px;
+      font-size: calc(100vw / 40);
+      z-index: 110;
+    }
+    .Mui-focused {
+      color: rgba(0, 0, 0, 1) !important;
+      border-color: #84de56 !important;
+      // background-color: white;
+      color: #84de56 !important;
+    }
+  
+    .MuiInputBase-input {
+      height: auto !important;
+    }
+  }
+}
+
+
+@media screen and (max-width: 640px) {
+  .login {
+    background: black;
+    section {
+      // background-color: red;
+      width: 90%;
+      max-width: 400px;
+      height: calc(100% - 60px);
+      // transform: scale(0.9);
+      justify-content: center;
+      // align-items: center;
+      b {
+        color: white;
+        font-size: calc(100vw / 18);
+        margin-bottom: 30px;
+        font-weight: 500;
+      }
+
+      button {
+        // position: absolute;
+        // top: 100px;
+        // left: 20px;
+        margin-top: 25px;
+        background-color: #84de56;
+        color: white;
+        font-size: calc(100vw / 25);
+        padding: 10px 0px;
+        border: 0px;
+        border-radius: 10px;
+      }
+    }
+    &__info {
+      width: 300px;
+      margin: 40px auto 0px;
+      text-align: center;
+      color: white;
+      font-size: calc(100vw / 30);
+      a {
+        color: #84de56;
+      }
+    }
+    &__back {
+      position: fixed;
+      top: 70px;
+      left : 20px;
+      margin-bottom: 40px;
+      a {
+        color: white;
+        font-size: calc(100vw / 110);
+      }
+      img{
+        // transform: scale()
+      }
+    }
+    &__options{
+      div{
+        font-size: calc(100vw / 30);
+      }
+      a{
+        font-size: calc(100vw / 30);
+      }
+    }
+    .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: 10px 14px !important;
+      font-family: numeralLight;
+      font-size: calc(100vw / 20);
+      background-color: #2A2A2A;
+      &:focus{
+        border: 0.2px solid #84de56 !important;
+        border-radius: 10px;
+        transform : translateY(0px);
+        z-index: 100;
+      }
+    }
+    .MuiInputLabel-outlined {
+      font-family: numeralLight !important;
+      display: inline !important;
+      position: absolute;
+      text-align: right !important;
+      right: 15px;
+      top: calc(50%);
+      padding: 0px !important;
+      transform: translate(0px, -50%) 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: #2A2A2A;
+      width: fit-content;
+      text-align: center;
+      color: #B5B5B5 !important;
+      letter-spacing: -1px;
+      font-size: calc(100vw / 30);
+      z-index: 110;
+      border-radius: 50%;
+    }
+    .Mui-focused {
+      color: rgba(0, 0, 0, 1) !important;
+      border-color: #84de56 !important;
+      // background-color: white;
+      color: #84de56 !important;
+    }
+  
+    .MuiInputBase-input {
+      height: auto !important;
+    }
+  }
+}
diff --git a/src/views/Auth/Login/index.tsx b/src/views/Auth/Login/index.tsx
index 41b1dd2..779e3e4 100644
--- a/src/views/Auth/Login/index.tsx
+++ b/src/views/Auth/Login/index.tsx
@@ -2,14 +2,15 @@ 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 CustomCheckbox from '../../../components/CustomCheckbox/index';
+import CustomCheckbox from "../../../components/CustomCheckbox/index";
 import CheckBoxOutlineBlankTwoToneIcon from "@mui/icons-material/CheckBoxOutlineBlankTwoTone";
 import CheckBoxRoundedIcon from "@mui/icons-material/CheckBoxRounded";
+import arrowLeft from "../../../assets/icons/arrow-left.png";
 
 import { Link } from "react-router-dom";
 import arrow from "../../../assets/icons/dropdown.png";
 import onInput from "../../../util/onInput";
-import { connect, useSelector } from "react-redux";
+import { connect } from "react-redux";
 import { user } from "../../../redux/actions";
 
 import "./index.scss";
@@ -32,8 +33,14 @@ function Login(props: any) {
       <section className="d-flex flex-column">
         <div className="login__back d-flex justify-content-end">
           <Link to="/sign-up" className="d-flex align-items-center">
-            بازگشت به صفحه قبل
-            <img src={arrow} />
+            {window.innerWidth > 1007 ? (
+              <>
+                بازگشت به صفحه قبل
+                <img src={arrow} />
+              </>
+            ) : (
+              <img src={arrowLeft} alt="" />
+            )}
           </Link>
         </div>
         <b>
diff --git a/src/views/Auth/SignUp/index.scss b/src/views/Auth/SignUp/index.scss
index c61c2ff..9d55db7 100644
--- a/src/views/Auth/SignUp/index.scss
+++ b/src/views/Auth/SignUp/index.scss
@@ -4,7 +4,7 @@
   position: relative;
   font-family: numeralLight;
   img {
-    transform: rotate(-90deg);
+    // transform: rotate(-90deg);
   }
   background: linear-gradient(
     135deg,
@@ -156,4 +156,156 @@
       font-size: calc(100vw / 110);
     }
   }
+}
+
+@media screen and (min-width: 641px) and (max-width: 1007px) {
+  .signup {
+    background: black;
+    .footer{
+      display: none !important;
+    }
+    section {
+      width: 90%;
+      max-width: 700px;
+      height: calc(100% - 60px);
+      justify-content: center;
+      b {
+        color: white;
+        font-size: calc(100vw / 35);
+        margin-bottom: 70px;
+        font-weight: 500;
+        p{
+          // font-size: calc(100vw / 30) !important;
+        }
+      }
+      input {
+        text-align: center;
+        background-color: #2a2a2a;
+        border: 1px solid #a2a2a2;
+        border-radius: 8px;
+        font-size: calc(100vw / 30);
+        padding: 10px 14px;
+        color: #84de56;
+        direction: ltr;
+        &:focus {
+          border: 1px solid #84de56;
+          &::placeholder {
+            color: #84de56;
+            opacity: 0.3;
+          }
+        }
+      }
+      button {
+        background-color: #84de56;
+        color: white;
+        font-size: calc(100vw / 30);
+        padding: 10px 0px;
+        border: 0px;
+        border-radius: 10px;
+        width: 100%;
+        max-width: 400px;
+        margin: 50px auto 0px;
+      }
+    }
+    &__info {
+      width: 400px;
+      margin: 20px auto 0px;
+      text-align: center;
+      color: white;
+      font-size: calc(100vw / 40);
+      a {
+        color: #84de56;
+      }
+    }
+    &__back {
+      position: fixed;
+      top: 100px;
+      left: 30px;
+      margin-bottom: 50px;
+      a {
+        color: white;
+        font-size: calc(100vw / 110);
+      }
+      img{
+        width: 50px;
+      }
+    }
+    &__error{
+      margin-top: 10px;
+      color: rgb(255, 115, 115);
+      font-size: calc(100vw / 110);
+    }
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .signup {
+    background: black;
+    section {
+      width: 90%;
+      max-width: 400px;
+      height: calc(100% - 60px);
+      justify-content: center;
+      b {
+        color: white;
+        font-size: calc(100vw / 20);
+        margin-bottom: 30px;
+        font-weight: 500;
+        p{
+          // font-size: calc(100vw / 30) !important;
+        }
+      }
+      input {
+        text-align: center;
+        background-color: #2a2a2a;
+        border: 1px solid #a2a2a2;
+        border-radius: 8px;
+        font-size: calc(100vw / 20);
+        padding: 10px 14px;
+        color: white;
+        direction: ltr;
+        &:focus {
+          border: 1px solid #84de56;
+          &::placeholder {
+            color: #84de56;
+            opacity: 0.3;
+          }
+        }
+      }
+      button {
+        margin-top: 20px;
+        background-color: #84de56;
+        color: white;
+        font-size: calc(100vw / 20);
+        padding: 10px 0px;
+        border: 0px;
+        border-radius: 10px;
+      }
+    }
+    &__info {
+      width: 300px;
+      margin: 20px auto 0px;
+      text-align: center;
+      color: white;
+      font-size: calc(100vw / 30);
+      a {
+        color: #84de56;
+      }
+    }
+    &__back {
+      position: fixed;
+      top: 70px;
+      left: 20px;
+      margin-bottom: 50px;
+      a {
+        color: white;
+        font-size: calc(100vw / 110);
+      }
+    }
+    &__error{
+      margin-top: 10px;
+      color: rgb(255, 115, 115);
+      font-size: calc(100vw / 110);
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/views/Auth/SignUp/index.tsx b/src/views/Auth/SignUp/index.tsx
index a979b11..c1c5759 100644
--- a/src/views/Auth/SignUp/index.tsx
+++ b/src/views/Auth/SignUp/index.tsx
@@ -4,19 +4,19 @@ import Footer from "../../../views/Home/Footer/index";
 import onInput from "../../../util/onInput";
 import { Link } from "react-router-dom";
 import arrow from "../../../assets/icons/dropdown.png";
+import arrowLeft from "../../../assets/icons/arrow-left.png";
 
 import "./index.scss";
 
 import { connect, useSelector } from "react-redux";
 import { user } from "../../../redux/actions";
 
-
 interface SignUpFields {
   cellphone?: String;
   otp?: String;
 }
 
-function SignUp(props : any) {
+function SignUp(props: any) {
   const [level, setLevel] = useState("phonenumber");
   const [signUpFields, setSignUpFiels] = useState<SignUpFields | undefined>(
     undefined
@@ -28,35 +28,32 @@ function SignUp(props : any) {
   };
 
   const submitPhoneNumber = () => {
-    if(signUpFields?.cellphone?.slice(0,2) === '09' && signUpFields?.cellphone.length === 11){
+    if (
+      signUpFields?.cellphone?.slice(0, 2) === "09" &&
+      signUpFields?.cellphone.length === 11
+    ) {
       setLevel("otp");
-      props.submitOtp({cellphone : signUpFields?.cellphone});
+      props.submitOtp({ cellphone: signUpFields?.cellphone });
       setError(undefined);
-    }else{
-      setError('شماره موبایل خود را چک کنید.');
+    } else {
+      setError("شماره موبایل خود را چک کنید.");
     }
-  }
+  };
 
   const submitOTP = () => {
-    if( signUpFields?.otp?.length === 4){
-      props.submitOtp({cellphone : signUpFields?.cellphone});
+    if (signUpFields?.otp?.length === 4) {
+      props.submitOtp({ cellphone: signUpFields?.cellphone });
       setError(undefined);
-    }else{
-      setError('کد وارد شده را چک کنید.');
+    } else {
+      setError("کد وارد شده را چک کنید.");
     }
-  }
+  };
 
   return (
     <div className="signup d-flex flex-column align-items-center justify-content-center">
       <Navbar />
       {level === "phonenumber" && (
         <section className="d-flex flex-column">
-          {/* <div className="signup__back d-flex justify-content-end">
-            <Link to="/sign-up" className="d-flex align-items-center">
-              بازگشت به صفحه قبل
-              <img src={arrow} />
-            </Link>
-          </div> */}
           <b>
             ثبت نام
             <br />
@@ -76,7 +73,10 @@ function SignUp(props : any) {
             }
           />
           <span className="signup__error">{error}</span>
-          <button type="submit" onClick={() => submitPhoneNumber()}> ادامه</button>
+          <button type="submit" onClick={() => submitPhoneNumber()}>
+            {" "}
+            ادامه
+          </button>
           <p className="signup__info">
             با ثبت نام در سرویس ویدئویی دانوین قوانین
             <Link to="/"> شرایط استفاده و حریم خصوصی </Link>
@@ -86,18 +86,25 @@ function SignUp(props : any) {
       )}
       {level === "otp" && (
         <section className="d-flex flex-column">
-          <div className="signup__back d-flex justify-content-end" onClick={() => setLevel('phonenumber')}>
+          <div
+            className="signup__back d-flex justify-content-end"
+            onClick={() => setLevel("phonenumber")}
+          >
             <Link to="/sign-up" className="d-flex align-items-center">
-              بازگشت به صفحه قبل
-              <img src={arrow} />
+              {window.innerWidth > 1007 ? (
+                <>
+                  بازگشت به صفحه قبل
+                  <img src={arrow} />
+                </>
+              ) : (
+                <img src={arrowLeft} alt="" />
+              )}
             </Link>
           </div>
           <b>
             تاییدیه شماره موبایل
             <br />
-            <p>
-              کد ارسال شده به شماره {signUpFields?.cellphone} را وارد کنید.
-            </p>
+            <p>کد ارسال شده به شماره {signUpFields?.cellphone} را وارد کنید.</p>
           </b>
           <input
             type="text"
@@ -110,8 +117,10 @@ function SignUp(props : any) {
               ))
             }
           />
-            <span className="signup__error">{error}</span>
-          <button type="submit" onClick={() => submitOTP()}>ادامه</button>
+          <span className="signup__error">{error}</span>
+          <button type="submit" onClick={() => submitOTP()}>
+            ادامه
+          </button>
           <p className="signup__info"></p>
         </section>
       )}
@@ -120,5 +129,7 @@ function SignUp(props : any) {
   );
 }
 
-export default connect(() => ({
-}), {submitSignUp : user.otp_login, submitOtp : user.otp})(SignUp);
\ No newline at end of file
+export default connect(() => ({}), {
+  submitSignUp: user.otp_login,
+  submitOtp: user.otp,
+})(SignUp);
diff --git a/src/views/Contact/index.scss b/src/views/Contact/index.scss
index db00a80..0691140 100644
--- a/src/views/Contact/index.scss
+++ b/src/views/Contact/index.scss
@@ -30,6 +30,23 @@
       }
     }
   }
+  &__tab{
+    margin-bottom: 30px;
+    border-radius: 10px !important;
+    border: 1px solid #4DD35B;
+    button{
+      width: 50%;
+      padding: 10px 0px;
+      border: none;
+      background-color: inherit;
+      border-radius: 10px !important;
+      color: #4DD35B;
+    }
+    &--active{
+      background-color: #4DD35B !important;
+      color: white !important;
+    }
+  }
 }
 
 @media screen and (min-width: 1441px) {
@@ -138,11 +155,11 @@
   .contact{
     main{
       max-width: 1250px;
-      padding: 60px 10px;
+      padding: 40px 10px;
       header{
         padding-bottom: 20px;
         h1{
-          font-size: calc(100vw / 35);
+          font-size: calc(100vw / 45);
         }
       }
     }
@@ -155,10 +172,10 @@
       margin-right: 20px;
       &--data{
         h2{
-          font-size: calc(100vw / 60);
+          font-size: calc(100vw / 70);
         }
         p{
-          font-size: calc(100vw / 80);
+          font-size: calc(100vw / 90);
         }
       }
       
@@ -187,8 +204,11 @@
     .MuiOutlinedInput-input {
       padding: 15px 14px !important;
       font-family: numeralLight;
-      font-size: 20px;
+      font-size: calc(100vw  / 80);
       background-color: #272727;
+      color: #84de56;
+      line-height: 1.5;
+      border-radius: 10px;
       &:focus{
         border: 0.2px solid #84de56 !important;
         border-radius: 10px;
@@ -201,7 +221,7 @@
       position: absolute;
       text-align: right !important;
       right: 15px;
-      top: 22px;
+      top: 18px;
       padding: 0px !important;
       transform: translate(0px, 0px) scale(1) !important;
     }
@@ -224,7 +244,255 @@
       font-size: 16px;
     }
     .Mui-focused {
-      color: rgba(0, 0, 0, 1) !important;
+      // color: rgba(0, 0, 0, 1) !important;
+      border-color: #84de56 !important;
+      // background-color: white;
+      color: #84de56 !important;
+    }
+  
+    .MuiInputBase-input {
+      height: auto !important;
+    }
+  }
+}
+
+@media screen and (min-width: 641px) and (max-width: 1007px) {
+  .contact{
+    background : black;
+    main{
+      max-width: 900px;
+      padding: 30px 20px;
+      header{
+        padding-bottom: 20px;
+        h1{
+          font-size: calc(100vw / 27);
+        }
+      }
+    }
+    &__tab{
+      button{
+        font-size: calc(100vw / 37);
+      }
+    }
+    &__form{
+      &--name{
+        width: 100%;
+      }
+      button{
+        // width: 100%;
+      }
+    }
+    &__info{
+      &--data{
+        width : 100% !important;
+        background-color: #83de564b;
+        padding: 10px;
+        border-radius: 10px;
+        h2{
+          font-size: calc(100vw / 35);
+          color: #4DD35B;
+        }
+        p{
+          text-align: center;
+          margin-top: 10px;
+          font-size: calc(100vw / 40);
+        }
+      }
+      &--map{
+        border : none;
+        padding-top: 0px;
+        height: 260px;
+      }
+    }
+    .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: calc(100vw  / 40);
+      background-color: #272727;
+      color: #84de56;
+      line-height: 1.5;
+      border-radius: 10px;
+      &: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: 15px;
+      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: #272727;
+      width: fit-content;
+      text-align: center;
+      color: #B5B5B5 !important;
+      letter-spacing: -1px;
+      font-size: calc(100vw / 40);
+    }
+    .Mui-focused {
+      // color: rgba(0, 0, 0, 1) !important;
+      border-color: #84de56 !important;
+      // background-color: white;
+      color: #84de56 !important;
+    }
+  
+    .MuiInputBase-input {
+      height: auto !important;
+    }
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .contact{
+    background : black;
+    main{
+      max-width: 500px;
+      padding: 40px 10px;
+      header{
+        padding-bottom: 20px;
+        h1{
+          font-size: calc(100vw / 18);
+        }
+      }
+    }
+    &__tab{
+      button{
+        font-size: calc(100vw / 30);
+      }
+    }
+    &__form{
+      &--name{
+        width: 100%;
+      }
+      button{
+        // width: 100%;
+      }
+    }
+    &__info{
+      &--data{
+        width : 100% !important;
+        background-color: #83de564b;
+        padding: 10px;
+        border-radius: 10px;
+        h2{
+          font-size: calc(100vw / 27);
+          color: #4DD35B;
+        }
+        p{
+          text-align: center;
+          margin-top: 10px;
+          font-size: calc(100vw / 32);
+        }
+      }
+      &--map{
+        border : none;
+        padding-top: 0px;
+        height: 260px;
+      }
+    }
+    .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: calc(100vw  / 30);
+      background-color: #272727;
+      color: #84de56;
+      line-height: 1.5;
+      border-radius: 10px;
+      &: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: 15px;
+      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: #272727;
+      width: fit-content;
+      text-align: center;
+      color: #B5B5B5 !important;
+      letter-spacing: -1px;
+      font-size: calc(100vw / 30);
+    }
+    .Mui-focused {
+      // color: rgba(0, 0, 0, 1) !important;
       border-color: #84de56 !important;
       // background-color: white;
       color: #84de56 !important;
diff --git a/src/views/Contact/index.tsx b/src/views/Contact/index.tsx
index c30ecd8..ebd883b 100644
--- a/src/views/Contact/index.tsx
+++ b/src/views/Contact/index.tsx
@@ -18,7 +18,7 @@ interface FormData {
 
 function Contact({ departmans, selectedDepartman, contactData }: any) {
   const [formData, setFormData] = useState<FormData | undefined>(undefined);
-
+  const [unit, setUnit] = useState("info");
   const onChange = (e: any) => {
     setFormData({ ...formData, [e.target.name]: e.target.value });
   };
@@ -30,9 +30,78 @@ function Contact({ departmans, selectedDepartman, contactData }: any) {
         <header>
           <h1>تماس با ما</h1>
         </header>
-        <div className="d-flex py-5">
+        <div className="mobile d-flex flex-column">
+          <div className="d-flex  contact__tab">
+            <button
+              className={unit === "info" ? "contact__tab--active" : ""}
+              onClick={() => setUnit("info")}
+            >
+              اطلاعات تماس
+            </button>
+            <button
+              className={unit === "form" ? "contact__tab--active" : ""}
+              onClick={() => setUnit("form")}
+            >
+              فرم تماس
+            </button>
+          </div>
+          {unit === "info" && (
+            <section className="contact__info d-flex flex-column py-3">
+              <div className="d-flex flex-column">
+                {contactData.map((item: any, i: any) => (
+                  <div
+                    className="contact__info--data d-flex flex-column"
+                    key={i}
+                  >
+                    <h2>{item.name}</h2>
+                    <p>{item.value}</p>
+                  </div>
+                ))}
+              </div>
+              <div className="contact__info--map d-flex">
+                <Location />
+              </div>
+            </section>
+          )}
+          {unit === "form" && (
+            <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>
+                <Select
+                  onChange={onChange}
+                  options={departmans}
+                  name="departman"
+                  label={"انتخاب دپارتمان"}
+                  selectedOptions={selectedDepartman}
+                />
+                <Textarea placeholder="متن پیام را اینجا تایپ کنید" />
+                <div className="d-flex justify-content-end py-4">
+                  <button className="submit submit-large">ارسال پیام</button>
+                </div>
+              </form>
+            </section>
+          )}
+        </div>
+        <div className="desktop py-5">
           <section className="contact__form d-flex flex-column">
-            <form action="">
+            <form action="" className="main-311">
               <div className="contact__form--name">
                 <Input
                   name="name"
@@ -75,7 +144,6 @@ function Contact({ departmans, selectedDepartman, contactData }: any) {
             </div>
             <div className="contact__info--map d-flex">
               <Location />
-            
             </div>
           </section>
         </div>
diff --git a/src/views/Course/Lesson/index.scss b/src/views/Course/Lesson/index.scss
index aa4cddc..1c0109e 100644
--- a/src/views/Course/Lesson/index.scss
+++ b/src/views/Course/Lesson/index.scss
@@ -94,3 +94,85 @@
     }
   }
 }
+
+@media screen and (min-width: 641px) and (max-width: 1007px) {
+  .lesson {
+    border-radius: 10px;
+    margin-bottom: 15px;
+    header {
+      border-top-right-radius: 10px;
+      border-top-left-radius: 10px;
+      h4 {
+        font-size: calc(100vw / 40);
+      }
+      div {
+        font-size: calc(100vw / 50);
+      }
+      img{
+        width: 30px;
+      }
+    }
+    &__duration{
+      text-align: center;
+    }
+    &__files{
+      border-bottom-left-radius: 10px;
+      border-bottom-right-radius: 10px;
+      padding: 15px 5px !important;
+      &--sample{
+        img{
+          width: 30px;
+        }
+        li{
+          font-size: calc(100vw / 40);
+          width: 100px;
+        }
+        h5{
+          font-size: calc(100vw/ 43);
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .lesson {
+    border-radius: 10px;
+    margin-bottom: 15px;
+    header {
+      border-top-right-radius: 10px;
+      border-top-left-radius: 10px;
+      h4 {
+        font-size: calc(100vw / 30);
+      }
+      div {
+        font-size: calc(100vw / 35);
+      }
+      img{
+        width: 30px;
+      }
+    }
+    &__duration{
+      text-align: center;
+    }
+    &__files{
+      border-bottom-left-radius: 10px;
+      border-bottom-right-radius: 10px;
+      padding: 15px 5px !important;
+      &--sample{
+        img{
+          width: 30px;
+        }
+        li{
+          font-size: calc(100vw / 33);
+          width: 60px;
+        }
+        h5{
+          font-size: calc(100vw/ 33);
+          margin-right: 5px;
+        }
+      }
+    }
+  }
+}
diff --git a/src/views/Course/Lesson/index.tsx b/src/views/Course/Lesson/index.tsx
index 9e74432..567eff5 100644
--- a/src/views/Course/Lesson/index.tsx
+++ b/src/views/Course/Lesson/index.tsx
@@ -1,17 +1,20 @@
-import React from 'react';
+import React from "react";
 import whiteDropdown from "../../../assets/icons/white-dropdown.png";
 import whitePlay from "../../../assets/icons/white-play.png";
 import document from "../../../assets/icons/document.png";
 import lock from "../../../assets/icons/lock.png";
-import './index.scss';
-import {connect} from 'react-redux';
-import {book} from '../../../redux/actions';
+import "./index.scss";
+import { connect } from "react-redux";
+import { book } from "../../../redux/actions";
 
-function Lesson(props : any) {
-  const {lesson} = props;
+function Lesson(props: any) {
+  const { lesson } = props;
   return (
     <div className="lesson d-flex flex-column">
-      <header className="d-flex justify-content-between align-items-center" onClick={() => props.toggle(lesson.id)}>
+      <header
+        className="desktop justify-content-between align-items-center"
+        onClick={() => props.toggle(lesson.id)}
+      >
         <div className="d-flex align-items-center">
           <img src={whiteDropdown} alt="" />
           <h4>{lesson.title}</h4>
@@ -20,43 +23,40 @@ function Lesson(props : any) {
           مدت زمان درس {lesson.duration}
         </div>
       </header>
-      {
-        lesson.active && <ul className="lesson__files d-flex flex-column">
-        {
-          lesson.files.map((data:any, i:any) => (
+      <header
+        className="mobile justify-content-between align-items-center"
+        onClick={() => props.toggle(lesson.id)}
+      >
+        <div className="d-flex flex-column">
+          <h4>{lesson.title}</h4>
+          <span> مدت زمان درس {lesson.duration}</span>
+        </div>
+        <div className="lesson__duration d-flex">
+          <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="" />
-                }
+                {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>
+                <li>{data.type !== "document" && data.duration}</li>
+                <li>{data.view && "مشاهده"}</li>
+                <li>{data.download ? "دانلود" : <img src={lock} alt="" />}</li>
               </ul>
             </li>
-          ))
-        }
-      </ul>
-      }
-      
+          ))}
+        </ul>
+      )}
     </div>
-  )
+  );
 }
 
-export default connect((state : any) => ({
-
-}),{toggle : book.setLessonActive})(Lesson);
\ No newline at end of file
+export default connect((state: any) => ({}), { toggle: book.setLessonActive })(
+  Lesson
+);
diff --git a/src/views/Course/index.scss b/src/views/Course/index.scss
index 11b5c3b..f903a8f 100644
--- a/src/views/Course/index.scss
+++ b/src/views/Course/index.scss
@@ -2,8 +2,7 @@
   main{
     header{
       padding: 70px 0px 45px;
-      border-bottom:3px solid #4a4a4a;
-
+      border-bottom:2px solid #4a4a4a;
     }
   }
   &__info{
@@ -262,4 +261,200 @@
       }
     }
   }
+}
+
+@media screen and (min-width: 641px) and (max-width: 1007px) {
+  .course{
+    background : black;
+    main {
+      max-width: 900px;
+      padding: 0px 20px;
+      header{
+        padding: 0px;
+        padding-bottom: 20px;
+        padding-top: 20px;
+      }
+      p{
+        margin-top: 20px;
+        color: #d3d3d3;
+        font-size: calc(100vw / 45);
+      }
+    }
+    &__info{
+      flex: 3;
+      &--image{
+        img{
+          width: 200px;
+          height: 280px;
+        }
+      }
+      &--description{
+        a{
+          font-size: calc(100vw / 50);
+        }
+        // li{
+        //   font-size: calc(100vw / 90);
+        // }
+        h1{
+          font-size: calc(100vw / 25);
+          margin-top: 0px;
+        }
+        i{
+          color: #4DD35B;
+          font-size: calc(100vw / 40);
+        }
+      }
+    }
+    &__options{
+      // display : none !important;
+      flex: 2;
+      &--rate{
+        // width: 70%;
+        // height: 160px;
+        // margin-bottom: 30px;
+        border: none;
+        box-shadow: 0px 0px 0px #f7ff01b3;
+        &__number{
+          i{
+            font-size: calc(100vw / 40);
+            color: white;
+          }
+          b{
+            font-size: calc(100vw / 40);
+          }
+          span{
+            font-size: calc(100vw / 28);
+            transform: translateY(4px);
+          }
+        }
+        h2{
+          margin-top: 5px;
+          font-size: calc(100vw / 40);
+        }
+        
+      }
+     &--button{
+       width: 48%;
+      //  height: 59px;
+       padding: 10px 5px;
+       font-size: calc(100vw / 45);
+       border-radius: 30px;
+       color: #D3D3D3;
+       margin-top: 30px;
+       img{
+         width: 30px;
+       }
+     }
+    }
+    &__list{
+      header{
+        h2{
+          font-size: calc(100vw / 35);
+          margin-top: 20px;
+        }
+        p{
+          margin-top: 0px;
+          font-size: calc(100vw / 50);
+          color: #d3d3d3;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .course{
+    background : black;
+    main {
+      max-width: 500px;
+      padding: 0px 10px;
+      header{
+        padding: 0px;
+        padding-bottom: 20px;
+      }
+      p{
+        margin-top: 20px;
+        color: #d3d3d3;
+        font-size: calc(100vw / 30);
+      }
+    }
+    &__info{
+      flex: 3;
+      &--image{
+        img{
+          width: 150px;
+          height: 220px;
+        }
+      }
+      &--description{
+        a{
+          font-size: calc(100vw / 30);
+        }
+        li{
+          font-size: calc(100vw / 90);
+        }
+        h1{
+          font-size: calc(100vw / 18);
+          margin-top: 0px;
+        }
+        i{
+          color: #4DD35B;
+          font-size: calc(100vw / 30);
+        }
+      }
+    }
+    &__options{
+      // display : none !important;
+      flex: 2;
+      &--rate{
+        // width: 70%;
+        // height: 160px;
+        // margin-bottom: 30px;
+        border: none;
+        box-shadow: 0px 0px 0px #f7ff01b3;
+        &__number{
+          i{
+            font-size: calc(100vw / 40);
+            color: white;
+          }
+          b{
+            font-size: calc(100vw / 30);
+          }
+          span{
+            font-size: calc(100vw / 28);
+            transform: translateY(4px);
+          }
+        }
+        h2{
+          margin-top: 5px;
+          font-size: calc(100vw / 40);
+        }
+        
+      }
+     &--button{
+       width: 48%;
+      //  height: 59px;
+       padding: 5px 5px;
+       font-size: calc(100vw / 35);
+       border-radius: 40px;
+       color: #D3D3D3;
+       img{
+         width: 25px;
+       }
+     }
+    }
+    &__list{
+      header{
+        h2{
+          font-size: calc(100vw / 25);
+          margin-top: 20px;
+        }
+        p{
+          margin-top: 0px;
+          font-size: calc(100vw / 35);
+          color: #d3d3d3;
+        }
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/views/Course/index.tsx b/src/views/Course/index.tsx
index 1444017..f9cb048 100644
--- a/src/views/Course/index.tsx
+++ b/src/views/Course/index.tsx
@@ -32,22 +32,11 @@ function Course({ lessons }: any) {
       });
   }, []);
 
-  const InfoItems = (props: any) => {
-    return (
-      <div className="course-info-items d-flex align-items-center justify-content-between">
-        <img src="" alt="" />
-        <div className="d-flex flex-column">
-          <i></i>
-          <p></p>
-        </div>
-      </div>
-    );
-  };
   return (
     <div className="course main d-flex flex-column">
       <Navbar />
       <main>
-        <header className="d-flex align-items-end">
+        <header className="desktop align-items-end">
           <div className="course__info d-flex">
             <div className="course__info--image d-flex align-items-end">
               <img src={course?.thumbnailUrl} alt="" />
@@ -56,15 +45,6 @@ function Course({ lessons }: any) {
               <div>
                 <BreadCrumbs links={links} />
                 <h1>{course?.title?.slice(0, 25)}</h1>
-                <p>
-                  لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
-                  استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و
-                  مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی
-                  تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای
-                  کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و
-                  آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم
-                  افزارها شناخت بیشتری دارد.
-                </p>
               </div>
               <div className="d-flex justify-content-between">
                 <div className="course-info-items d-flex align-items-center justify-content-around">
@@ -109,6 +89,50 @@ function Course({ lessons }: any) {
             </Link>
           </div>
         </header>
+        <header className="mobile flex-column">
+          <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__info--description d-flex flex-column justify-content-between">
+                <BreadCrumbs links={links} />
+                <h1>{course?.title?.slice(0, 25)}</h1>
+                <i>240 ساعت</i>
+                <div className="course__options--rate d-flex align-items-center justify-content-between">
+                  <div className="course__options--rate__number d-flex flex-column align-items-center">
+                    <h2>میانگین رای کاربران</h2>
+                    <div>
+                      <b>10</b>
+                      <i>/2</i>
+                    </div>
+                  </div>
+                  <StyledRating />
+              </div>
+            </div>
+          </div>
+          <div className="course__options d-flex align-items-center justify-content-between">
+            <button className="course__options--button d-flex align-items-center justify-content-around">
+              اضافه کردن به علاقه‌مندی‌ها
+              <img src={bookmark} alt="" />
+            </button>
+            <Link
+              to="/"
+              className="course__options--button d-flex align-items-center justify-content-around"
+            >
+              مشاهده پیشنمایش دوره
+              <img src={play} alt="" />
+            </Link>
+          </div>
+          <p>
+            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
+            استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در
+            ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و
+            کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی
+            در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را
+            می طلبد تا با نرم افزارها شناخت بیشتری دارد.
+          </p>
+        </header>
+
         <section className="course__list d-flex flex-column">
           <header>
             <h2>سر فصل دوره</h2>
diff --git a/src/views/Faq/index.scss b/src/views/Faq/index.scss
index 816dc11..87f4d20 100644
--- a/src/views/Faq/index.scss
+++ b/src/views/Faq/index.scss
@@ -27,7 +27,8 @@
       margin-right: 2px;
       width: 70px;
       height: 60px;
-      border-radius: 5px;
+      border-top-left-radius: 6px;
+      border-bottom-left-radius: 6px;
     }
   }
   &__list {
@@ -35,7 +36,7 @@
     margin: 0px auto !important;
     padding-top: 30px !important;
     li{
-      background-color: #242424;
+      background-color: #272727;
       margin-bottom: 15px;
       cursor: pointer;
       border-radius: 5px;
@@ -119,3 +120,76 @@
     }
   }
 }
+
+@media screen and (min-width: 641px) and (max-width: 1007px) {
+  .faq {
+    background : black;
+    padding: 50px 20px 20px;
+    header {
+      max-width: 700px;
+      h1 {
+        font-size: calc(100vw / 25);
+      }
+      p {
+        font-size: calc(100vw / 35);
+        margin-bottom: 30px;
+      }
+      input {
+        padding: 5px 10px 5px 0px;
+        font-size: calc(100vw / 40);
+      }
+      img {
+        width: 35px;
+      }
+      button{
+        width: 60px;
+        height: 55px;
+      }
+    }
+    &__list{
+      max-width: 700px;
+      strong{
+        font-size: calc(100vw / 40);
+      }
+      p{
+        font-size: calc(100vw / 45);
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .faq {
+    background : black;
+    padding: 50px 20px 20px;
+    header {
+      max-width: 700px;
+      h1 {
+        font-size: calc(100vw / 18);
+      }
+      p {
+        font-size: calc(100vw / 30);
+        margin-bottom: 30px;
+      }
+      input {
+        padding: 5px 10px 5px 0px;
+        font-size: calc(100vw / 30);
+      }
+      img {
+        width: 30px;
+      }
+      button{
+        width: 50px;
+        height: 45px;
+      }
+    }
+    &__list{
+      strong{
+        font-size: calc(100vw / 30);
+      }
+      p{
+        font-size: calc(100vw / 34);
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/Home/Footer/index.tsx b/src/views/Home/Footer/index.tsx
index cdaf229..3b119db 100644
--- a/src/views/Home/Footer/index.tsx
+++ b/src/views/Home/Footer/index.tsx
@@ -5,7 +5,7 @@ import './index.scss';
 export default function Footer(props: any) {
   const { links } = props;
   return (
-    <footer className="footer d-flex">
+    <footer className="footer desktop">
       <div className="footer__container d-flex justify-content-between align-items-center">
         <ul className="d-flex">
           {links.map((item: any, i: any) => (
diff --git a/src/views/Subscription/DiscountCode/index.scss b/src/views/Subscription/DiscountCode/index.scss
index e16c977..c72741b 100644
--- a/src/views/Subscription/DiscountCode/index.scss
+++ b/src/views/Subscription/DiscountCode/index.scss
@@ -64,4 +64,49 @@
       font-size: calc(100vw / 90);
     }
   }
+}
+
+@media screen and (min-width: 641px) and (max-width: 1007px) {
+  .discount-code{
+    padding: 10px;
+    h3{
+      font-size: calc(100vw / 40);
+    }
+    input{
+      padding: 10px;
+      width: 300px;
+      font-size: calc(100vw / 45);
+      &::placeholder{
+        font-size: calc(100vw / 50);
+      }
+      margin-right: 5px;
+    }
+    button{
+      width : 90px;
+      font-size: calc(100vw / 40);
+    }
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .discount-code{
+    padding: 10px;
+    h3{
+      font-size: calc(100vw / 34);
+      max-width: 100px;
+    }
+    input{
+      padding: 10px;
+      width: 180px;
+      font-size: calc(100vw / 30);
+      &::placeholder{
+        font-size: calc(100vw / 40);
+      }
+      margin-right: 5px;
+    }
+    button{
+      width : 60px;
+      font-size: calc(100vw / 30);
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/views/Subscription/SubscribeRadio/index.scss b/src/views/Subscription/SubscribeRadio/index.scss
index a96fb69..d0203cc 100644
--- a/src/views/Subscription/SubscribeRadio/index.scss
+++ b/src/views/Subscription/SubscribeRadio/index.scss
@@ -133,4 +133,74 @@
       }
     }
   }
+}
+
+@media screen and (min-width: 641px) and (max-width: 1007px) {
+  .subscribe-radio{
+    min-height: 70px;
+    &__name{
+      flex: 7;
+      h2{
+        font-size: calc(100vw / 35);
+        margin-right: 10px;
+      }
+    }
+    &__factor{
+      flex: 3;
+      &--tag{
+        font-size: calc(100vw / 55);
+      }
+      &--off{
+        b{
+          font-size: calc(100vw / 50);
+        }
+        i{
+          font-size: calc(100vw / 60);
+        }
+      }
+      &--finalPrice{
+        i{
+          font-size: calc(100vw / 45);
+        }
+        strong{
+          font-size: calc(100vw / 30);
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .subscribe-radio{
+    min-height: 70px;
+    &__name{
+      flex: 7;
+      h2{
+        font-size: calc(100vw / 25);
+        margin-right: 10px;
+      }
+    }
+    &__factor{
+      flex: 3;
+      &--tag{
+        font-size: calc(100vw / 45);
+      }
+      &--off{
+        b{
+          font-size: calc(100vw / 30);
+        }
+        i{
+          font-size: calc(100vw / 45);
+        }
+      }
+      &--finalPrice{
+        i{
+          font-size: calc(100vw / 45);
+        }
+        strong{
+          font-size: calc(100vw / 20);
+        }
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/views/Subscription/index.scss b/src/views/Subscription/index.scss
index ac07666..78aed73 100644
--- a/src/views/Subscription/index.scss
+++ b/src/views/Subscription/index.scss
@@ -39,4 +39,40 @@
       }
     }
   }
-}
\ No newline at end of file
+}
+
+@media screen and (min-width: 641px) and (max-width : 1007px) {
+  .subscription{
+    background : black;
+    padding: 80px 20px 0px;
+    main{
+      margin-top: 0px;
+      max-width: 900px;
+      h1{
+        font-size: calc(100vw / 30);
+      }
+      p{
+        font-size: calc(100vw / 40);
+      }
+    }
+  }
+}
+
+@media screen and (max-width : 640px) {
+  .subscription{
+    background : black;
+    padding: 80px 10px 0px;
+    main{
+      margin-top: 0px;
+      max-width: 500px;
+      // transform: scale(0.8) translateY(-20px);
+      h1{
+        font-size: calc(100vw / 18);
+      }
+      p{
+        font-size: calc(100vw / 30);
+      }
+    }
+  }
+}
+
diff --git a/src/views/VideoTube/Attachments/index.scss b/src/views/VideoTube/Attachments/index.scss
index d90def5..286b492 100644
--- a/src/views/VideoTube/Attachments/index.scss
+++ b/src/views/VideoTube/Attachments/index.scss
@@ -41,4 +41,30 @@
       font-size: calc(100vw / 100);
     }
   }
+}
+
+@media screen and (min-width: 641px) and (max-width: 1007px) {
+  .download-attachments{
+    width: calc(100% - 20px);
+    padding: 10px 0px;
+    a{
+      font-size: calc(100vw / 50);
+    }
+    h4{
+      font-size: calc(100vw / 50);
+    }
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .download-attachments{
+    width: calc(100% - 20px);
+    padding: 10px 0px;
+    a{
+      font-size: calc(100vw / 40);
+    }
+    h4{
+      font-size: calc(100vw / 40);
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/views/VideoTube/Book/index.scss b/src/views/VideoTube/Book/index.scss
index 96873b0..13c886d 100644
--- a/src/views/VideoTube/Book/index.scss
+++ b/src/views/VideoTube/Book/index.scss
@@ -41,3 +41,35 @@
     }
   }
 }
+
+@media screen and (min-width: 641px) and (max-width: 1007px) {
+  .video-tube-suggest{
+    width: 30%;
+    img{
+      width: 200px;
+      // height: 180px;
+    }
+    h4{
+      font-size: calc(100vw / 43);
+    }
+    p{
+      font-size: calc(100vw / 52);
+    }
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .video-tube-suggest{
+    width: 30%;
+    img{
+      width: 100px;
+      // height: 180px;
+    }
+    h4{
+      font-size: calc(100vw / 36);
+    }
+    p{
+      font-size: calc(100vw / 43);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/VideoTube/Comment/index.scss b/src/views/VideoTube/Comment/index.scss
index d482a9b..bb2704b 100644
--- a/src/views/VideoTube/Comment/index.scss
+++ b/src/views/VideoTube/Comment/index.scss
@@ -47,4 +47,42 @@
       font-size: calc(100vw / 90);
     }
   }
+}
+
+@media screen and (min-width: 641px) and (max-width: 1007px) {
+  .video-tube-comment{
+    width: 95%;
+    p{
+      font-size: calc(100vw / 50);
+      strong{
+        font-size: calc(100vw / 45);
+        margin-left: 5px;
+      }
+    }
+    button{
+      font-size: calc(100vw / 50) !important;
+    }
+    span{
+      font-size: calc(100vw / 45);
+    }
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .video-tube-comment{
+    width: 95%;
+    p{
+      font-size: calc(100vw / 42);
+      strong{
+        font-size: calc(100vw / 35);
+        margin-left: 5px;
+      }
+    }
+    button{
+      font-size: calc(100vw / 40) !important;
+    }
+    span{
+      font-size: calc(100vw / 35);
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/views/VideoTube/LessonPlayList/index.scss b/src/views/VideoTube/LessonPlayList/index.scss
index 92bc490..fa17654 100644
--- a/src/views/VideoTube/LessonPlayList/index.scss
+++ b/src/views/VideoTube/LessonPlayList/index.scss
@@ -131,4 +131,94 @@
       }
     }
   }
+}
+
+@media screen and (min-width: 641px) and (max-width: 1007px) {
+  .lesson-playlist{
+    width: 100%;
+    header{
+      padding: 10px 50px 0px 0px !important; 
+      h3{
+        font-size: calc(100vw / 45);
+      }
+      span{
+        
+      }
+    }
+    &__item{
+      padding: 10px 0px 5px 0px;
+      cursor: pointer;
+      &--count{
+        font-size: calc(100vw / 35);
+        width : 50px;
+        text-align: center;
+      }
+      &--text{
+        max-width: 55%;
+        h4{
+          font-size: calc(100vw / 45);
+        }
+        p{
+          font-size: calc(100vw / 50);
+        }
+      }
+      &--video{
+        width: 182px;
+        // height: 90px;
+        position: relative;
+        video{
+          width : 100%;
+          height : 100%;
+        }
+        span{
+          font-size:  calc(100vw / 45);
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .lesson-playlist{
+    width: 100%;
+    header{
+      padding: 10px 40px 0px 0px !important; 
+      h3{
+        font-size: calc(100vw / 38);
+      }
+      span{
+        
+      }
+    }
+    &__item{
+      padding: 10px 0px 5px 0px;
+      cursor: pointer;
+      &--count{
+        font-size: calc(100vw / 25);
+        width : 40px;
+        text-align: center;
+      }
+      &--text{
+        max-width: 55%;
+        h4{
+          font-size: calc(100vw / 35);
+        }
+        p{
+          font-size: calc(100vw / 40);
+        }
+      }
+      &--video{
+        width: 132px;
+        height: 90px;
+        position: relative;
+        video{
+          width : 100%;
+          height : 100%;
+        }
+        span{
+          font-size:  calc(100vw / 40);
+        }
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/views/VideoTube/index.scss b/src/views/VideoTube/index.scss
index 0dd8917..2ce5121 100644
--- a/src/views/VideoTube/index.scss
+++ b/src/views/VideoTube/index.scss
@@ -344,3 +344,210 @@
     }
   }
 }
+
+@media screen and (min-width: 641px) and (max-width: 1007px) {
+  .video-tube {
+    background : black;
+    main {
+      max-width: 900px;
+      margin-top: 10px;
+      padding: 0px 10px;
+      flex-direction: column;
+    }
+    &__content {
+      flex: 8;
+      margin: 0px;
+      &--display {
+        padding: 0px;
+        video{
+          width: 100%;
+          margin-bottom: 10px;
+        }
+        span{
+          font-size: calc(100vw / 40);
+        }
+        h1{
+          font-size: calc(100vw / 30);
+        }
+        p{
+          font-size: calc(100vw / 40);
+        }
+      }
+      &--comments{
+        header{
+          h2{
+            font-size: calc(100vw / 40);
+          }
+        }
+        button{
+          font-size: calc(100vw / 50);
+        }
+      }
+      &--addComment{
+        width: 100%;
+        button{
+          font-size: calc(100vw / 45);
+        }
+        textarea{
+          font-size: calc(100vw / 45);
+          &::placeholder{
+            font-size: calc(100vw / 45);
+          }
+        }
+      }
+    }
+    &__sidebar {
+      flex: 4;
+      &--playlist {
+        max-height: 450px;
+        header {
+          padding: 12px 12px;
+          background-color: #2c2c2c;
+          img {
+            transform: translateY(-5px);
+            width : 40px;
+          }
+          h2 {
+            font-size: calc(100vw / 40);
+          }
+          p {
+            font-size: calc(100vw / 55);
+          }
+        }
+      }
+      &--attachments {
+        max-height: 250px;
+        header {
+          padding: 14px 12px;
+          background-color: #2c2c2c;
+          h2 {
+            font-size: calc(100vw / 40);
+          }
+          p {
+            font-size: calc(100vw / 55);
+          }
+        }
+      }
+      &--suggests {
+        header {
+          padding: 14px 12px;
+          background-color: #8bd09746;
+          h2 {
+            font-size: calc(100vw / 40);
+          }
+          span{
+            font-size: calc(100vw / 55);
+          }
+        }
+        &___list{
+          padding: 15px 12px;
+          background-color: #08793d58;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .video-tube {
+    background : black;
+    main {
+      max-width: 500px;
+      margin-top: 0px;
+      padding: 0px 10px;
+      flex-direction: column;
+    }
+    &__content {
+      flex: 8;
+      margin: 0px;
+      &--display {
+        padding: 0px;
+        video{
+          width: 100%;
+          margin-bottom: 10px;
+        }
+        span{
+          font-size: calc(100vw / 40);
+        }
+        h1{
+          font-size: calc(100vw / 30);
+        }
+        p{
+          font-size: calc(100vw / 40);
+        }
+      }
+      &--comments{
+        header{
+          h2{
+            font-size: calc(100vw / 30);
+          }
+        }
+        button{
+          font-size: calc(100vw / 37);
+        }
+      }
+      &--addComment{
+        width: 100%;
+        button{
+          font-size: calc(100vw / 40);
+        }
+        textarea{
+          font-size: calc(100vw / 35);
+          &::placeholder{
+            font-size: calc(100vw / 35);
+          }
+        }
+      }
+    }
+    &__sidebar {
+      flex: 4;
+      &--playlist {
+        max-height: calc(60vh);
+        header {
+          padding: 8px 12px;
+          background-color: #2c2c2c;
+          img {
+            transform: translateY(-5px);
+            width : 30px;
+          }
+          h2 {
+            font-size: calc(100vw / 30);
+          }
+          p {
+            font-size: calc(100vw / 45);
+          }
+        }
+      }
+      &--attachments {
+        max-height: 200px;
+        header {
+          padding: 14px 12px;
+          background-color: #2c2c2c;
+          h2 {
+            font-size: calc(100vw / 30);
+          }
+          p {
+            font-size: calc(100vw / 45);
+          }
+        }
+      }
+      &--suggests {
+        header {
+          padding: 10px 12px;
+          background-color: #8bd09746;
+          h2 {
+            font-size: calc(100vw / 30);
+          }
+          span{
+            font-size: calc(100vw / 45);
+          }
+        }
+        &___list{
+          padding: 15px 12px;
+          background-color: #08793d58;
+        }
+      }
+    }
+  }
+}
+
diff --git a/src/views/VideoTube/index.tsx b/src/views/VideoTube/index.tsx
index ff4fb5b..86ce42f 100644
--- a/src/views/VideoTube/index.tsx
+++ b/src/views/VideoTube/index.tsx
@@ -12,8 +12,7 @@ import listIcon from "../../assets/icons/list.png";
 import { connect } from "react-redux";
 import { book } from "../../redux/actions";
 
-
-import user from '../../assets/images/user3.png';
+import user from "../../assets/images/user3.png";
 
 function VodTube({ videoList, getList, list, selectedVideo, comments }: any) {
   useEffect(() => {
@@ -28,24 +27,22 @@ function VodTube({ videoList, getList, list, selectedVideo, comments }: any) {
             <video controls>
               <source src={selectedVideo.src} />
             </video>
-            <span>درس دوم / بیست و یکم</span>
-            <h1>{selectedVideo.name}</h1>
-            <p>{selectedVideo.text}</p>
+            <span className="desktop">درس دوم / بیست و یکم</span>
+            <h1 className="desktop">{selectedVideo.name}</h1>
+            <p className="desktop">{selectedVideo.text}</p>
           </section>
-          <section className="video-tube__content--comments d-flex flex-column">
+          <section className="desktop video-tube__content--comments 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} />
-                ))
-              }
+              {comments?.map((comment: any, i: any) => (
+                <Comment comment={comment} key={i} />
+              ))}
             </div>
           </section>
-          <section className="video-tube__content--addComment d-flex">
+          <section className="desktop video-tube__content--addComment">
             <AddComment />
           </section>
         </div>
@@ -88,7 +85,21 @@ function VodTube({ videoList, getList, list, selectedVideo, comments }: any) {
               ))}
             </div>
           </section>
+          <section className="mobile video-tube__content--comments 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>
         </div>
+        <section className="mobile video-tube__content--addComment">
+          <AddComment />
+        </section>
       </main>
       <Footer />
     </div>