diff --git a/src/components/PrivateRouter/index.js b/src/components/PrivateRouter/index.js
index e9b84d1..7765f86 100644
--- a/src/components/PrivateRouter/index.js
+++ b/src/components/PrivateRouter/index.js
@@ -24,7 +24,7 @@ const PrivateRouter = ({
 
 export default connect(
   (state) => ({
-    status: state.publicApi.status,
+    status: state.user.status,
   }),
   {}
 )(PrivateRouter);
diff --git a/src/components/Select/index.tsx b/src/components/Select/index.tsx
index 1b893d1..937494a 100644
--- a/src/components/Select/index.tsx
+++ b/src/components/Select/index.tsx
@@ -46,7 +46,8 @@ export default function CustomizedSelects({
           style={{
             position: "absolute",
             left: 5,
-            top: 19,
+            top: '50%',
+            transform: "translateY(-50%)",
             fontSize: 30,
             color: "#a5a5a5",
           }}
diff --git a/src/custom.scss b/src/custom.scss
index 882c0ba..b623071 100644
--- a/src/custom.scss
+++ b/src/custom.scss
@@ -1,24 +1,25 @@
-.submit{
-  background-color: #4DD35B;
+.submit {
+  background-color: #4dd35b;
   color: white;
   border-radius: 10px;
   border: 0px;
 }
 
-.mobile, .desktop{
+.mobile,
+.desktop {
   display: flex;
 }
 
-.submit-large{
+.submit-large {
   padding: 12px 24px;
 }
 
-.submit-medium{
-  padding : 10px 20px;
+.submit-medium {
+  padding: 10px 20px;
 }
 
-.submit-small{
-  padding : 8px 16px;
+.submit-small {
+  padding: 8px 16px;
 }
 
 .rec-arrow-left {
@@ -122,10 +123,83 @@
 }
 
 .MuiMenu-list {
-  
 }
 
-.MuiMenuItem-root{
+//INPUT
+.MuiFormControl-root {
+  width: 100%;
+  margin: 10px auto !important;
+  .MuiSelect-iconOutlined {
+    display: none;
+  }
+  .MuiSelect-outlined.MuiSelect-outlined {
+    padding-right: 15px;
+  }
+  color: #797979 !important;
+  label {
+    background: black !important;
+    width: fit-content;
+    text-align: center;
+    color: #b5b5b5;
+  }
+}
+.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;
+  color: #84de56 !important;
+  &:focus {
+    border: 1px solid #84de56 !important;
+    border-radius: 10px;
+    transform: translateY(0px);
+    border-radius: 10px !important;
+    z-index: 120;
+  }
+}
+.MuiInputLabel-outlined {
+  font-family: numeralLight !important;
+  display: inline !important;
+  position: absolute;
+  text-align: right !important;
+  right: 15px !important;
+  top: 50% !important;
+  padding: 0px !important;
+  transform: translate(0px, -50%) scale(1) !important;
+}
+.MuiInputLabel-shrink {
+  text-align: center !important;
+  display: inline;
+  position: absolute;
+  right: 0px !important;
+  top: -8px !important;
+  transform: translate(0px, 0px) scale(0.85) !important;
+  padding: 0px 10px !important;
+  z-index: 130 !important;
+  background-color: black !important;
+  color: #84de56 !important;
+}
+
+.Mui-focused {
+  color: rgba(0, 0, 0, 1) !important;
+  border-color: #84de56 !important;
+  color: #84de56 !important;
+}
+
+.MuiInputBase-input {
+  height: auto !important;
+}
+
+//SELECT
+.MuiMenuItem-root {
   background: #272727 !important;
   border-bottom: 1px solid #707070 !important;
   color: white !important;
@@ -139,62 +213,98 @@
   color: white !important;
 }
 
-.MuiOutlinedInput-notchedOutline legend{
+.MuiOutlinedInput-notchedOutline legend {
   display: none !important;
 }
 
 @media screen and (min-width: 1441px) {
-  .submit{
+  .submit {
     font-size: 20px;
   }
-  .main{
+  .main {
     main {
       max-width: 1350px;
     }
   }
-  .mobile{
+  .mobile {
     display: none !important;
   }
+  .MuiFormControl-root {
+    label {
+      font-size: 14px;
+    }
+  }
+  .MuiOutlinedInput-input {
+    font-size: 20px;
+  }
 }
 
-@media screen and (min-width: 1008px) and (max-width: 1440px){
-  .submit{
-    font-size : calc(100vw / 80);
+@media screen and (min-width: 1008px) and (max-width: 1440px) {
+  .submit {
+    font-size: calc(100vw / 80);
   }
-  .main{
+  .main {
     main {
       max-width: 1250px;
     }
   }
-  .mobile{
+  .mobile {
     display: none !important;
   }
+  .MuiFormControl-root {
+    label {
+      font-size: calc(100vw / 110) !important;
+    }
+  }
+
+  .MuiOutlinedInput-input {
+    font-size: calc(100vw / 80) !important;
+  }
 }
 
 @media screen and (min-width: 641px) and (max-width: 1007px) {
-  .main{
+  .main {
     main {
       max-width: 900px;
     }
   }
-  .desktop{
+  .desktop {
     display: none !important;
   }
-  .submit-large{
-    font-size: calc(100vw / 38);
+  .submit-large {
+    font-size: calc(100vw / 38) !important;
+  }
+  .MuiFormControl-root {
+    label {
+      font-size: calc(100vw / 40) !important;
+    }
+  }
+  .MuiOutlinedInput-input {
+    font-size: calc(100vw / 45) !important;
   }
 }
 
 @media screen and (max-width: 640px) {
-  .main{
+  .main {
     main {
       max-width: 500px;
     }
   }
-  .desktop{
+  .desktop {
     display: none !important;
   }
-  .submit{
-    font-size: calc(100vw / 25);
+  .submit {
+    font-size: calc(100vw / 25) !important;
   }
-}
\ No newline at end of file
+  .MuiFormControl-root {
+    label {
+      font-size: calc(100vw / 30) !important;
+    }
+  }
+  .MuiOutlinedInput-input {
+    font-size: calc(100vw / 30) !important;
+  }
+  .MuiSelect-select {
+    line-height: 1.5 !important;
+  }
+}
diff --git a/src/views/Auth/Login/index.scss b/src/views/Auth/Login/index.scss
index ec1eceb..9096c34 100644
--- a/src/views/Auth/Login/index.scss
+++ b/src/views/Auth/Login/index.scss
@@ -3,8 +3,8 @@
   height: 100vh;
   position: relative;
   font-family: numeralLight;
-  &__options{
-    color: #B5B5B5;
+  &__options {
+    color: #b5b5b5;
     a {
       color: #84de56;
     }
@@ -12,7 +12,7 @@
   img {
     // transform: rotate(-90deg);
   }
-  .MuiButtonBase-root{
+  .MuiButtonBase-root {
     padding: 0px !important;
   }
   background: linear-gradient(
@@ -73,7 +73,7 @@
     }
     &__back {
       margin-bottom: 60px;
-      img{
+      img {
         transform: rotate(-90deg);
       }
       a {
@@ -81,83 +81,14 @@
         font-size: 13px;
       }
     }
-    &__options{
-      div{
+    &__options {
+      div {
         font-size: 13px;
       }
-      a{
+      a {
         font-size: 15px;
       }
     }
-    .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;
-    }
   }
 }
 
@@ -195,7 +126,7 @@
     }
     &__back {
       margin-bottom: 40px;
-      img{
+      img {
         transform: rotate(-90deg);
       }
       a {
@@ -203,92 +134,21 @@
         font-size: calc(100vw / 110);
       }
     }
-    &__options{
-      div{
+    &__options {
+      div {
         font-size: calc(100vw / 110);
       }
-      a{
+      a {
         font-size: calc(100vw / 110);
       }
     }
-    .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 / 80);
-      &: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: #2F2F2F;
-      width: fit-content;
-      text-align: center;
-      color: #B5B5B5 !important;
-      letter-spacing: -1px;
-      font-size: calc(100vw / 100);
-      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 (min-width: 641px) and (max-width: 1007px) {
   .login {
     background: black;
-    .footer{
+    .footer {
       display: none !important;
     }
     section {
@@ -308,7 +168,7 @@
         background-color: #84de56;
         color: white;
         font-size: calc(100vw / 30);
-        width : 100%;
+        width: 100%;
         max-width: 400px;
         margin: 50px auto 0px;
         padding: 10px 0px;
@@ -335,95 +195,22 @@
         color: white;
         font-size: calc(100vw / 110);
       }
-      img{
-        width : 50px;
+      img {
+        width: 50px;
       }
     }
-    &__options{
+    &__options {
       padding-top: 20px;
-      div{
+      div {
         font-size: calc(100vw / 40);
       }
-      a{
+      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;
@@ -468,96 +255,23 @@
     &__back {
       position: fixed;
       top: 70px;
-      left : 20px;
+      left: 20px;
       margin-bottom: 40px;
       a {
         color: white;
         font-size: calc(100vw / 110);
       }
-      img{
+      img {
         // transform: scale()
       }
     }
-    &__options{
-      div{
+    &__options {
+      div {
         font-size: calc(100vw / 30);
       }
-      a{
+      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;
-      border-radius: 10px;
-      &: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;
-    }
-    .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/Profile/Birthdate/index.js b/src/views/Auth/Profile/Birthdate/index.js
index 8fbc0dd..a1fd287 100644
--- a/src/views/Auth/Profile/Birthdate/index.js
+++ b/src/views/Auth/Profile/Birthdate/index.js
@@ -3,8 +3,7 @@ import onInput from "~/util/onInput";
 import Input from "../../../../components/Input/index";
 import "./index.scss";
 import moment from "jalali-moment";
-export default function Birthdate(props) {
-  const { defaultValue, parent, name } = props;
+export default function Birthdate({ defaultValue, name, ...props }) {
   let momentDate = moment(defaultValue[name]);
   let isvalid = momentDate.isValid();
   const day = isvalid ? momentDate.format("jDD") : null,
@@ -15,7 +14,7 @@ export default function Birthdate(props) {
     let _state = { ...state, [_name]: value };
     setState(_state);
 
-    parent.onChange(
+    props.onChange(
       name,
       moment
         .from(`${_state.year}/${_state.month}/${_state.day}`, "fa", "YYYY/M/D")
@@ -32,7 +31,7 @@ export default function Birthdate(props) {
           placeholder="روز"
           maxLength={2}
           onInput={onInput.dayHandler}
-          parent={{ onChange }}
+          onChange={onChange}
           defaultValue={state}
         />
         <span>/</span>
@@ -42,7 +41,7 @@ export default function Birthdate(props) {
           placeholder="ماه"
           maxLength={2}
           onInput={onInput.monthHandler}
-          parent={{ onChange }}
+          onChange={onChange}
           defaultValue={state}
         />
         <span>/</span>
@@ -52,7 +51,7 @@ export default function Birthdate(props) {
           placeholder="سال"
           maxLength={4}
           onInput={onInput.yearHandler}
-          parent={{ onChange }}
+          onChange={onChange}
           defaultValue={state}
         />
       </div>
diff --git a/src/views/Auth/Profile/Birthdate/index.scss b/src/views/Auth/Profile/Birthdate/index.scss
index 2ceef16..742adc0 100644
--- a/src/views/Auth/Profile/Birthdate/index.scss
+++ b/src/views/Auth/Profile/Birthdate/index.scss
@@ -11,44 +11,77 @@
   }
   span {
     color: #bfbfbf;
+    margin: 0px 5px;
   }
 
   input {
-    border: 0px;
+    border: none !important;
     background-color: rgba(204, 204, 204, 0.098);
-    font-family: numeralLight;
     color: #84de56;
     max-width: 40px;
     text-align: center !important;
     direction: ltr;
-    margin: 0px 5px;
+    margin: 0px 5px !important;
     border: none;
     &:focus {
       outline: 0px;
       border: 0px;
     }
     &::placeholder {
-      color: #bfbfbf;
+      color: #383737;
     }
   }
 
+  //INPUT
   
+  .MuiOutlinedInput-notchedOutline {
+    border : none !important;
+  }
+
+  .MuiOutlinedInput-input {
+    padding: 5px !important;
+    &:focus {
+      border: none !important;
+      border-radius: 0px !important;
+    }
+  }
 }
 
-@media screen and (max-width: 1000px) {
-  span {
-    font-size: 14px;
+@media screen and (min-width: 1441px) {
+  .birthdate {
+    label {
+      font-size: 14px !important;
+    }
+    span {
+      font-size: 16px;
+    }
+    input {
+      font-size: 16px;
+      &::placeholder {
+        font-size: 16px;
+      }
+    }
   }
-  input {
-    font-size: 14px;
+}
 
-    &::placeholder {
-      font-size: 15px;
+@media screen and (min-width: 1008px) and (max-width: 1440px) {
+  .birthdate {
+    label {
+      font-size: calc(100vw / 120) !important;
+    }
+    span {
+      font-size: calc(100vw / 90);
+    }
+    input {
+      font-size: calc(100vw / 90);
+      &::placeholder {
+        font-size: calc(100vw / 90);
+      }
     }
   }
 }
 
-@media screen and (min-width: 6401px) and (max-width: 1007px) {
+@media screen and (min-width: 640px) and (max-width: 1007px) {
   .birthdate {
     label {
       font-size: calc(100vw / 40) !important;
@@ -82,4 +115,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/views/Auth/Profile/Document/index.js b/src/views/Auth/Profile/Document/index.js
deleted file mode 100644
index 92fd674..0000000
--- a/src/views/Auth/Profile/Document/index.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import React from "react";
-import "./index.scss";
-
-const maxDesktopSize = 1250;
-const maxMobileSize = 550;
-
-const fontSize = {
-  desktop: {
-    span: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
-  },
-  mobile: {
-    span: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 30,
-  },
-};
-
-export default function Document(props) {
-  const { parent, name } = props;
-  return (
-    <>
-      {window.innerWidth < 1000 ? (
-        <div className="mobile-auth-profile__document d-flex justify-content-center align-items-center mb-3">
-          {parent.state[name] === "" ? (
-            <>
-              <input
-                type="file"
-                // parent.onChange(e.target.name, e.target.value)
-                name={name}
-                onChange={(e) =>
-                  parent.onChange(e.target.name, e.target.files[0])
-                }
-              />
-              <span style={{ fontSize: fontSize.mobile.span }}>
-                گواهی تدریس خود را آپلود کنید.
-              </span>
-            </>
-          ) : (
-            <>
-              <input
-                type="file"
-                name="file"
-                onChange={(e) =>
-                  parent.onChange(e.target.name, e.target.files[0])
-                }
-              />
-              <span
-                style={{
-                  fontSize: fontSize.mobile.span,
-                  width: "100%",
-                  textAlign: "center",
-                  margin: "auto",
-                }}
-              >
-                {parent.state[name].name ||
-                  "گواهی تدریس  ثبت شده و درحال بررسی می باشد"}
-              </span>
-            </>
-          )}
-        </div>
-      ) : null}
-      {window.innerWidth > 1000 ? (
-        <div className="mobile-auth-profile__document d-flex justify-content-center-align-items-center">
-          {parent.state[name] === "" ? (
-            <>
-              <input
-                type="file"
-                // parent.onChange(e.target.name, e.target.value)
-                name={name}
-                onChange={(e) =>
-                  parent.onChange(e.target.name, e.target.files[0])
-                }
-              />
-              <span
-                style={{
-                  fontSize: fontSize.mobile.span,
-                  width: "100%",
-                  textAlign: "center",
-                  margin: "auto",
-                }}
-              >
-                گواهی تدریس خود را آپلود کنید.
-              </span>
-            </>
-          ) : (
-            <>
-              <input
-                label={props.label}
-                onChange={(e) =>
-                  parent.onChange(e.target.name, e.target.files[0])
-                }
-                name={props.name}
-                defaultValue=""
-                type="file"
-              />
-              <span
-                style={{
-                  fontSize: fontSize.mobile.span,
-                  width: "100%",
-                  textAlign: "center",
-                  margin: "auto",
-                }}
-              >
-                {parent.state[name].name ||
-                  "گواهی تدریس  ثبت شده و درحال بررسی می باشد"}
-              </span>
-            </>
-          )}
-        </div>
-      ) : null}
-    </>
-  );
-}
diff --git a/src/views/Auth/Profile/Document/index.tsx b/src/views/Auth/Profile/Document/index.tsx
new file mode 100644
index 0000000..583a27b
--- /dev/null
+++ b/src/views/Auth/Profile/Document/index.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import "./index.scss";
+
+export default function Document({ defaultValue, name, onChange } : any) {
+  return (
+    <div className="mobile-auth-profile__document d-flex justify-content-center align-items-center mb-3">
+      {defaultValue?.docFileIds === "" ? (
+        <>
+          <input
+            type="file"
+            // parent.onChange(e.target.name, e.target.value)
+            name={name}
+            // onChange={(e) => onChange(e.target.name, e.target.files[0])}
+          />
+          <span>گواهی تدریس خود را آپلود کنید.</span>
+        </>
+      ) : (
+        <>
+          <input
+            type="file"
+            name="file"
+            // onChange={(e) => onChange(e.target.name, e.target.files[0])}
+          />
+          <span
+            style={{
+              width: "100%",
+              textAlign: "center",
+              margin: "auto",
+            }}
+          >
+            {defaultValue?.docFileIds.name ||
+              "گواهی تدریس  ثبت شده و درحال بررسی می باشد"}
+          </span>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/src/views/Auth/Profile/Upload/index.scss b/src/views/Auth/Profile/Upload/index.scss
index eb41ed6..7be20b5 100644
--- a/src/views/Auth/Profile/Upload/index.scss
+++ b/src/views/Auth/Profile/Upload/index.scss
@@ -5,6 +5,7 @@
   margin-top: 15px auto 0px;
   // border: 2px dotted #ccc;
   position: relative;
+  cursor: pointer;
   background-color: #272727;
   input {
     width: 100%;
diff --git a/src/views/Auth/Profile/index.scss b/src/views/Auth/Profile/index.scss
index 61be694..683f679 100644
--- a/src/views/Auth/Profile/index.scss
+++ b/src/views/Auth/Profile/index.scss
@@ -76,79 +76,9 @@
       flex-direction: row;
       justify-content: space-around;
       padding: 30px 10px;
+      margin-bottom: 50px;
     }
   }
-  .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;
-    color: #84de56 !important;
-    &:focus {
-      border: 0.2px solid #84de56 !important;
-      border-radius: 10px;
-      transform: translateY(0.5px);
-      border-radius: 10px !important;
-    }
-  }
-  .MuiInputLabel-outlined {
-    font-family: numeralLight !important;
-    display: inline !important;
-    position: absolute;
-    text-align: right !important;
-    right: 15px !important;
-    top: 50% !important;
-    padding: 0px !important;
-    transform: translate(0px, -50%) scale(1) !important;
-  }
-  .MuiInputLabel-shrink {
-    text-align: center !important;
-    display: inline;
-    position: absolute;
-    right: 0px !important; 
-    top: -8px !important;
-    transform: translate(0px, 0px) scale(0.85) !important;
-    padding: 0px 10px !important;
-  }
-
-  label {
-    background-color: black;
-    width: fit-content;
-    text-align: center;
-    color: #b5b5b5 !important;
-    letter-spacing: -1px;
-    font-size: 14px !important;
-  }
-  .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 (min-width: 1008px) and (max-width: 1440px) {
@@ -160,87 +90,17 @@
       padding: 30px 10px;
       flex-direction: row;
       justify-content: space-around;
+      margin-bottom: 50px;
     }
   }
-  .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 / 80) !important;
-    color: #84de56 !important;
-    &:focus {
-      border: 0.2px solid #84de56 !important;
-      border-radius: 10px;
-      transform: translateY(0px);
-      z-index: 100;
-      border-radius: 10px !important;
-    }
-  }
-  .MuiInputLabel-outlined {
-    font-family: numeralLight !important;
-    display: inline !important;
-    position: absolute;
-    text-align: right !important;
-    right: 10px !important;
-    top: 50% !important;
-    padding: 0px !important;
-    transform: translate(0px, -50%) scale(1) !important;
-  }
-  .MuiInputLabel-shrink {
-    text-align: center !important;
-    display: inline;
-    position: absolute;
-    right: 0px !important;
-    top: -5px !important;
-    transform: translate(0px, 0px) scale(0.85) !important;
-    padding: 0px 10px !important;
-    z-index: 120 !important;
-  }
-
-  label {
-    background-color: black;
-    width: fit-content;
-    text-align: center;
-    color: #b5b5b5 !important;
-    letter-spacing: -1px;
-    font-size: calc(100vw / 110) !important;
-    z-index: 120;
-  }
-  .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 (min-width: 641px) and (max-width: 1007px) {
   .profile {
     padding: 50px 100px 10px;
+    button {
+      font-size: calc(100vw / 40);
+    }
     header {
       margin: 0px;
       margin-top: 30px;
@@ -252,86 +112,15 @@
         width: 100%;
       }
     }
-    .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: inherit;
-      color: #84de56;
-      &:focus {
-        border: 0.2px solid #84de56 !important;
-        border-radius: 10px;
-        transform: translateY(0px);
-        z-index: 100;
-        border-radius: 10px !important;
-      }
-    }
-    .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: -10px;
-      transform: translate(0px, 0px) scale(0.85) !important;
-      padding: 0px 10px !important;
-    }
-
-    label {
-      background-color: black;
-      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) {
   .profile {
     padding: 0px 10px;
+    button {
+      font-size: calc(100vw / 30);
+    }
     header {
       margin: 0px;
       margin-top: 70px;
@@ -343,80 +132,5 @@
         width: 100%;
       }
     }
-    .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: inherit;
-      border-radius: 10px;
-      color: #84de56 !important;
-
-      &: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: -10px;
-      transform: translate(0px, 0px) scale(0.7) !important;
-      padding: 0px 10px !important;
-    }
-
-    label {
-      background-color: black;
-      width: fit-content;
-      text-align: center;
-      color: #b5b5b5 !important;
-      letter-spacing: -1px;
-      font-size: calc(100vw / 25);
-      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;
-    }
   }
 }
diff --git a/src/views/Auth/Profile/index.tsx b/src/views/Auth/Profile/index.tsx
index 2377cec..6e042b1 100644
--- a/src/views/Auth/Profile/index.tsx
+++ b/src/views/Auth/Profile/index.tsx
@@ -20,20 +20,6 @@ function Navigate({ path }: any) {
   return <>{history.push(path)}</>;
 }
 
-const maxDesktopSize = 1250;
-const maxMobileSize = 550;
-
-const fontSize = {
-  desktop: {
-    h1: window.innerWidth > maxDesktopSize ? 25 : window.innerWidth / 55,
-    p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 90,
-  },
-  mobile: {
-    h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 18,
-    p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 28,
-  },
-};
-
 function Profile({
   profile,
   uploads,
@@ -76,10 +62,10 @@ function Profile({
     getCity({ provinceId: profile.provinceId });
   }, []);
 
-  const grades= [
+  const grades = [
     {
-      name : 'پیش دبستانی',
-      value : 0,
+      name: "پیش دبستانی",
+      value: 0,
     },
     {
       name: "اول",
@@ -138,7 +124,7 @@ function Profile({
     } else if (name === "status") {
       setFormData({
         ...formData,
-        gradeIds: formData.gradeIds.slice(0, 1) || [],
+        gradeIds: formData.gradeIds?.slice(0, 1) || [],
         [name]: value,
       });
     } else if (name === "docFileIds") {
@@ -399,7 +385,13 @@ function Profile({
                 />
               </div>
             ) : null}
-            {formData.status == 2 ? <Document name="docFileIds" /> : null}
+            {formData.status == 2 ? (
+              <Document
+                onChange={onChange}
+                defaultValue={profile}
+                name="docFileIds"
+              />
+            ) : null}
             <div className="mb-2">
               <Input
                 name="postalCode"
diff --git a/src/views/Contact/index.scss b/src/views/Contact/index.scss
index 7192257..ce96fae 100644
--- a/src/views/Contact/index.scss
+++ b/src/views/Contact/index.scss
@@ -78,77 +78,6 @@
       }
       
     }
-    .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;
-      background-color: #272727;
-      line-height: 1.5;
-      &: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: 18px;
-      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: 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;
-    }
   }
 }
 
@@ -181,79 +110,6 @@
       }
       
     }
-    .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  / 80);
-      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: 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;
-    }
   }
 }
 
@@ -305,79 +161,7 @@
         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;
-    }
+    
   }
 }
 
@@ -429,77 +213,5 @@
         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;
-    }
-  
-    .MuiInputBase-input {
-      height: auto !important;
-    }
   }
 }
\ No newline at end of file
diff --git a/src/views/Subscription/SubscribeRadio/index.scss b/src/views/Subscription/SubscribeRadio/index.scss
index ba8b32e..6f13e46 100644
--- a/src/views/Subscription/SubscribeRadio/index.scss
+++ b/src/views/Subscription/SubscribeRadio/index.scss
@@ -57,7 +57,6 @@
   &-active{
     box-shadow: 0px 0px 6px #4DD35B;
     background-color: #4DD35B;
-    border: none;
     .subscribe-radio__name{
     }
     .subscribe-radio__factor{
diff --git a/src/views/Subscription/SubscribeRadio/index.tsx b/src/views/Subscription/SubscribeRadio/index.tsx
index 6ba2dbb..78b74f0 100644
--- a/src/views/Subscription/SubscribeRadio/index.tsx
+++ b/src/views/Subscription/SubscribeRadio/index.tsx
@@ -29,7 +29,7 @@ function SubscribeRadio({ data, selectedVOD, selectVOD }: any) {
           }
           checkedIcon={
             <CircleRoundedIcon
-              style={{ color: "white", fontSize: 40, padding: 0 }}
+              style={{ color: "white", fontSize: 37, padding: 0, margin : '6px 3px 3px' }}
             />
           }
           checked={selectedVOD?.id === data.id}