diff --git a/public/index.html b/public/index.html
index 19b741f..2c92801 100644
--- a/public/index.html
+++ b/public/index.html
@@ -29,7 +29,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Danovin VOD</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/src/components/Navbar/index.scss b/src/components/Navbar/index.scss
index 40935db..00be9d9 100644
--- a/src/components/Navbar/index.scss
+++ b/src/components/Navbar/index.scss
@@ -13,6 +13,18 @@
     a{
       color: white;
     }
+    &--buttons{
+      li{
+        text-align: center;
+        padding: 6px 0px;
+        border-radius: 7px;
+        min-width : 130px;
+        font-family: numeralLight;
+        a{
+          margin: 0px auto;
+        }
+      }
+    }
   }
   &___share{
     background-color: #46454A;
@@ -41,12 +53,7 @@
       }
       &--buttons{
         li{
-          padding: 6px;
-          border-radius: 7px;
-          min-width : 100px;
-          text-align: center;
-          font-size: 14px;
-          font-family: numeralLight;
+          font-size: 18px;
         }
       }
     }
@@ -79,13 +86,8 @@
       }
       &--buttons{
         li{
-          padding: 6px;
-          border-radius: 7px;
-          min-width : 100px;
-          text-align: center;
-          font-size: calc(100vw / 95);
-          font-family: numeralLight;
-          
+          font-size: calc(100vw / 100);  
+          min-width: 100px;      
         }
       }
     }
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index ba8643f..1d82a69 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -32,7 +32,7 @@ export default function Navbar(props: any) {
   const { page } = props;
 
   const toggleDrawer = (anchor: any, open: any) => (event: any) => {
-    console.log('on');
+    console.log("on");
     if (
       event &&
       event.type === "keydown" &&
@@ -41,7 +41,7 @@ export default function Navbar(props: any) {
       return;
     }
 
-    setState({...state, [anchor]: open });
+    setState({ ...state, [anchor]: open });
   };
 
   const list = (props: any, anchor: any) => (
@@ -59,6 +59,8 @@ export default function Navbar(props: any) {
       />
     </div>
   );
+
+  const userStatus = proxy.status();
   return (
     <nav className="nav align-items-center justify-content-center">
       <div className="nav__container d-flex align-items-center justify-content-between">
@@ -83,9 +85,11 @@ export default function Navbar(props: any) {
           <li className="nav___share desktop">
             <Link to="/subscribe">خرید اشتراک</Link>
           </li>
-          <li className="nav___login">
-            <Link to="/login">ورود</Link>
-          </li>
+          {!userStatus && (
+            <li className="nav___login">
+              <Link to="/login">ورود</Link>
+            </li>
+          )}
         </ul>
       </div>
       <SwipeableDrawer
diff --git a/src/components/PrivateRouter/index.js b/src/components/PrivateRouter/index.js
new file mode 100644
index 0000000..bf3530b
--- /dev/null
+++ b/src/components/PrivateRouter/index.js
@@ -0,0 +1,30 @@
+import React, { Component } from "react";
+import { Route, useHistory, Redirect } from "react-router-dom";
+import { connect } from "react-redux";
+
+const PrivateRouter = ({
+  component: Component,
+  restricted,
+  status,
+  ...rest
+}) => {
+  return (
+    <Route
+      {...rest}
+      render={(props) =>
+        1  ? (
+          <Component {...props} />
+        ) : (
+          <Redirect to="/login" />
+        )
+      }
+    />
+  );
+};
+
+export default connect(
+  (state) => ({
+    status: state.publicApi.status,
+  }),
+  {}
+)(PrivateRouter);
diff --git a/src/components/Timer/index.css b/src/components/Timer/index.css
new file mode 100644
index 0000000..b504c9d
--- /dev/null
+++ b/src/components/Timer/index.css
@@ -0,0 +1,8 @@
+.timer {
+  flex-direction: row;
+  direction: rtl !important;
+  margin-right: 10px;
+  margin-left: 10px;
+  color: #6cbe44;
+  font-family: numeralLight;
+}
diff --git a/src/components/Timer/index.js b/src/components/Timer/index.js
new file mode 100644
index 0000000..b480fd3
--- /dev/null
+++ b/src/components/Timer/index.js
@@ -0,0 +1,85 @@
+import { Component } from "react";
+import "./index.css";
+
+const maxDesktopSize = 1250;
+const maxMobileSize = 550;
+
+const fontSize = {
+  desktop: {
+    div: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95,
+  },
+  mobile: {
+    div: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30,
+  },
+};
+export default class Timer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      time: {
+        h: 0,
+        m: 0,
+        s: 0,
+      },
+      seconds : props.seconds,
+      flag: true,
+    };
+    this.timer = 0;
+    this.startTimer = this.startTimer.bind(this);
+    this.countDown = this.countDown.bind(this);
+  }
+
+  secondsToTime(secs) {
+    let hours = Math.floor(secs / (60 * 60));
+
+    let divisor_for_minutes = secs % (60 * 60);
+    let minutes = Math.floor(divisor_for_minutes / 60);
+
+    let divisor_for_seconds = divisor_for_minutes % 60;
+    let seconds = Math.ceil(divisor_for_seconds);
+
+    let obj = {
+      h: hours,
+      m: minutes,
+      s: seconds,
+    };
+    return obj;
+  }
+
+  componentDidMount() {
+    this.startTimer();
+    let timeLeftVar = this.secondsToTime(this.state.seconds);
+    this.setState({ time: timeLeftVar });
+  }
+
+  startTimer() {
+    if (this.timer === 0 && this.state.seconds > 0) {
+      this.timer = setInterval(this.countDown, 1000);
+    }
+  }
+
+  countDown = async () => {
+    // Remove one second, set state so a re-render happens.
+    let seconds = this.state.seconds - 1;
+    this.setState({
+      time: this.secondsToTime(seconds),
+      seconds: seconds,
+    });
+    if (seconds === 0) {
+      this.props.refresh(true);
+    }
+  };
+
+  componentWillUnmount() {
+    clearInterval(this.timer);
+  }
+  render() {
+    return (
+      <>
+        <div className="timer">
+          {this.state.time ? this.state.time.m : ''}:{this.state.time ? this.state.time.s : ''} 
+        </div>
+      </>
+    );
+  }
+}
diff --git a/src/redux/actions-type/book.tsx b/src/redux/actions-type/book.tsx
index 38f878c..b17c4b6 100644
--- a/src/redux/actions-type/book.tsx
+++ b/src/redux/actions-type/book.tsx
@@ -13,6 +13,11 @@ interface setLessonActive{
   data : any
 }
 
+interface setVideoActive{
+  type : "book/video/active"
+  data : any
+}
+
 interface error{
   type : "book/error"
   data : undefined
@@ -24,6 +29,6 @@ interface loading{
 }
 
 
-type BookAction = list | info | setLessonActive | loading | error;
+type BookAction = list | info | setVideoActive | setLessonActive | loading | error;
 
 export default BookAction;
diff --git a/src/redux/actions/book.tsx b/src/redux/actions/book.tsx
index 2d2ecbd..82fa4c2 100644
--- a/src/redux/actions/book.tsx
+++ b/src/redux/actions/book.tsx
@@ -12,6 +12,8 @@ const book = {
 
   setLessonActive: (data: undefined) => async (dispatch: Dispatch) =>
     await dispatch({ type: "book/lesson/active", data: data }),
+  setVideoActive: (data: undefined) => async (dispatch: Dispatch) =>
+    await dispatch({ type: "book/video/active", data: data }),
   // update:
   //   (data = {}, data2 = {}) =>
   //   async (dispatch : Dispatch) => {
@@ -36,7 +38,6 @@ const book = {
   // filterBook: (data) => async (dispatch) => {
   //   dispatch({ type: "book/filter", data: data });
   // },
-
 };
 
 export default book;
diff --git a/src/redux/reducers/book.tsx b/src/redux/reducers/book.tsx
index 53da1e1..5426a77 100644
--- a/src/redux/reducers/book.tsx
+++ b/src/redux/reducers/book.tsx
@@ -194,7 +194,7 @@ const initialState = {
   ],
   mockVideoList: {
     id: 0,
-    name: "لیست بخش درس علوم زیستی در دریا",
+    name: "لیست بخش درس علوم زیستی در دریا ",
     lessons: [
       {
         id: 0,
@@ -202,19 +202,19 @@ const initialState = {
         files: [
           {
             id : 0,
-            name: "ماهی های پرورشی و فواید آن",
+            name: "ماهی های پرورشی و فواید آن ی",
             src: sea,
             text: "لورم اپیوسرم یک متن آزمایشی است که برای",
           },
           {
             id : 1,
-            name: "ماهی های پرورشی و فواید آن",
+            name: "ماهی های پرورشی و فواید آن ذ",
             src: sea,
             text: "لورم اپیوسرم یک متن آزمایشی است که برای",
           },
           {
             id : 2,
-            name: "ماهی های پرورشی و فواید آن",
+            name: "ماهی های پرورشی و فواید آن ن",
             src: sea,
             text: "لورم اپیوسرم یک متن آزمایشی است که برای",
           },
@@ -227,15 +227,15 @@ const initialState = {
           {
             name: "ماهی های پرورشی و فواید آن",
             src: sea,
-            text: "لورم اپیوسرم یک متن آزمایشی است که برای",
+            text: "لورم اپیوسرم یک متن آزمایشی است که برای س",
           },
           {
-            name: "ماهی های پرورشی و فواید آن",
+            name: "ماهی های پرورشی و فواید آن خ",
             src: sea,
             text: "لورم اپیوسرم یک متن آزمایشی است که برای",
           },
           {
-            name: "ماهی های پرورشی و فواید آن",
+            name: "ماهی های پرورشی و فواید آن ظ",
             src: sea,
             text: "لورم اپیوسرم یک متن آزمایشی است که برای",
           },
@@ -270,7 +270,7 @@ const initialState = {
     ]
   },
   selectedVideo : {
-    name: "ماهی های پرورشی و فواید آن",
+    name: "ماهی های پرورشی و فواید آن ی",
     src: sea,
     text: "لورم اپیوسرم یک متن آزمایشی است که برای",
   },
@@ -349,6 +349,13 @@ export default function book(state = initialState, action: BookAction) {
             : { ...item, active: false }
         ),
       };
+      case "book/video/active":
+        return {
+          ...state,
+          loading: false,
+          error: null,
+          selectedVideo : data,
+        };
     // case "book/update":
     //   return { ...state, loading: false, error: null };
     // case "book/add":
diff --git a/src/router.js b/src/router.js
new file mode 100644
index 0000000..941e77a
--- /dev/null
+++ b/src/router.js
@@ -0,0 +1,53 @@
+import "./App.css";
+import {
+  BrowserRouter as Router,
+  Route,
+  Switch,
+} from "react-router-dom";
+import { connect } from "react-redux";
+
+import Auth from "./views/Auth/index";
+import Home from "./views/Home/index";
+import Course from "./views/Course/index";
+import VideoTube from "./views/VideoTube/index";
+import Subscription from "./views/Subscription/index";
+import Contact from "./views/Contact/index";
+import Faq from "./views/Faq/index";
+import PrivateRouter from "./components/PrivateRouter/index";
+
+function router({ status }) {
+  return (
+    <Router>
+      <Switch>
+        <PrivateRouter restricted={false} component={Home} path="/" exact />
+        <Route exact path={"/sign-up"}>
+          <Auth page="signup" />
+        </Route>
+        <Route exact path={"/login"}>
+          <Auth page="login" />
+        </Route>
+        <Route exact path={"/profile"}>
+          <Auth page="profile" />
+        </Route>
+        <PrivateRouter
+          restricted={false}
+          component={Course}
+          path="/courses/:id"
+          exact
+        />
+        <PrivateRouter restricted={false} component={VideoTube} path="/video-tube" exact />
+        <PrivateRouter restricted={false} component={Subscription} path="/subscribe" exact />
+        <Route exact path={"/contact"}>
+          <Contact />
+        </Route>
+        <Route exact path={"/faq"}>
+          <Faq />
+        </Route>
+      </Switch>
+    </Router>
+  );
+}
+
+export default connect((state) => ({
+  status: state.publicApi.status,
+}))(router);
diff --git a/src/router.tsx b/src/router.tsx
deleted file mode 100644
index cd13faf..0000000
--- a/src/router.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import "./App.css";
-import {
-  BrowserRouter as Router,
-  Route,
-  Switch,
-  Redirect,
-} from "react-router-dom";
-
-import Auth from './views/Auth/index';
-import Home from "./views/Home/index";
-import Course from "./views/Course/index";
-import VideoTube from "./views/VideoTube/index";
-import Subscription from "./views/Subscription/index";
-import Contact from "./views/Contact/index";
-import Faq from "./views/Faq/index";
-
-function router(){
-    return (
-      <Router>
-        <Switch>
-          <Route exact path={'/'}>
-            <Home />
-          </Route>
-          <Route exact path={'/sign-up'}>
-            <Auth page="signup" />
-          </Route>
-          <Route exact path={'/login'}>
-            <Auth page="login" />
-          </Route>
-          <Route exact path={'/profile'}>
-            <Auth page="profile" />
-          </Route>
-          <Route exact path={'/courses/:id'}>
-            <Course />
-          </Route>
-          <Route exact path={'/video-tube'}>
-            <VideoTube />
-          </Route>
-          <Route exact path={'/subscribe'}>
-            <Subscription />
-          </Route>
-          <Route exact path={'/contact'}>
-            <Contact />
-          </Route>
-          <Route exact path={'/faq'}>
-            <Faq />
-          </Route>
-        </Switch>
-      </Router>
-    );
-  
-}
-
-export default router;
-
diff --git a/src/views/Auth/Login/index.scss b/src/views/Auth/Login/index.scss
index e6d4c47..7e1e8be 100644
--- a/src/views/Auth/Login/index.scss
+++ b/src/views/Auth/Login/index.scss
@@ -35,6 +35,11 @@
     bottom: 0px;
     left: 0px;
   }
+  &__back{
+    img{
+      transform: rotate(-90deg);
+    }
+  }
 }
 
 @media screen and (min-width: 1441px) {
diff --git a/src/views/Auth/Login/index.tsx b/src/views/Auth/Login/index.tsx
index 779e3e4..9aab3fa 100644
--- a/src/views/Auth/Login/index.tsx
+++ b/src/views/Auth/Login/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import Navbar from "../../../components/Navbar/index";
 import Footer from "../../../views/Home/Footer/index";
 import Input from "../../../components/Input/index";
@@ -27,20 +27,23 @@ function Login(props: any) {
   const onChange = (name: string, value: string) => {
     setSignUpFiels({ ...loginFields, [name]: value });
   };
+  const usernameInput = useRef<any>();
+  const passwordInput = useRef<any>();
+
+  useEffect(() => {
+    
+  }, []);
   return (
     <div className="login d-flex flex-column align-items-center justify-content-center">
       <Navbar />
       <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">
-            {window.innerWidth > 1007 ? (
-              <>
-                بازگشت به صفحه قبل
-                <img src={arrow} />
-              </>
-            ) : (
-              <img src={arrowLeft} alt="" />
-            )}
+          <Link to="/" className="d-flex align-items-center">
+            <div className="desktop align-items-center">
+              بازگشت به صفحه قبل
+              <img src={arrow} />
+            </div>
+            <img className="mobile" src={arrowLeft} alt="" />
           </Link>
         </div>
         <b>
@@ -54,6 +57,7 @@ function Login(props: any) {
           align="left"
           onInput={onInput.englishAndNumberWithoutSpace}
           onChange={onChange}
+          ref={usernameInput}
         />
         <Input
           name="password"
@@ -61,6 +65,7 @@ function Login(props: any) {
           align="left"
           onInput={onInput.englishAndNumberWithoutSpace}
           onChange={onChange}
+          ref={passwordInput}
         />
         <div className="login__options d-flex justify-content-between align-items-center">
           <div className="d-flex align-items-center">
diff --git a/src/views/Auth/SignUp/index.scss b/src/views/Auth/SignUp/index.scss
index 9d55db7..0249804 100644
--- a/src/views/Auth/SignUp/index.scss
+++ b/src/views/Auth/SignUp/index.scss
@@ -84,6 +84,11 @@
         color: white;
         font-size: 13px;
       }
+      .desktop{
+        img{
+          transform: rotate(-90deg);
+        }
+      }
     }
     &__error{
       margin-top: 10px;
@@ -149,6 +154,11 @@
         color: white;
         font-size: calc(100vw / 110);
       }
+      .desktop{
+        img{
+          transform: rotate(-90deg);
+        }
+      }
     }
     &__error{
       margin-top: 10px;
diff --git a/src/views/Auth/SignUp/index.tsx b/src/views/Auth/SignUp/index.tsx
index c1c5759..dea7948 100644
--- a/src/views/Auth/SignUp/index.tsx
+++ b/src/views/Auth/SignUp/index.tsx
@@ -1,6 +1,7 @@
-import React, { useState } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import Navbar from "../../../components/Navbar/index";
 import Footer from "../../../views/Home/Footer/index";
+import Timer from "../../../components/Timer/index";
 import onInput from "../../../util/onInput";
 import { Link } from "react-router-dom";
 import arrow from "../../../assets/icons/dropdown.png";
@@ -8,7 +9,7 @@ import arrowLeft from "../../../assets/icons/arrow-left.png";
 
 import "./index.scss";
 
-import { connect, useSelector } from "react-redux";
+import { connect } from "react-redux";
 import { user } from "../../../redux/actions";
 
 interface SignUpFields {
@@ -16,39 +17,56 @@ interface SignUpFields {
   otp?: String;
 }
 
-function SignUp(props: any) {
+
+function SignUp({sendOtp, sendPhoneNumber} : any) {
   const [level, setLevel] = useState("phonenumber");
   const [signUpFields, setSignUpFiels] = useState<SignUpFields | undefined>(
     undefined
   );
   const [error, setError] = useState<string | undefined>(undefined);
+  const [resend, setResend] = useState(false);
 
   const onChange = (name: string, value: string) => {
     setSignUpFiels({ ...signUpFields, [name]: value });
   };
 
-  const submitPhoneNumber = () => {
+  const checkPhoneNumber = () => {
     if (
       signUpFields?.cellphone?.slice(0, 2) === "09" &&
       signUpFields?.cellphone.length === 11
     ) {
       setLevel("otp");
-      props.submitOtp({ cellphone: signUpFields?.cellphone });
+      sendPhoneNumber({ cellphone: signUpFields?.cellphone });
       setError(undefined);
     } else {
       setError("شماره موبایل خود را چک کنید.");
     }
   };
 
-  const submitOTP = () => {
+  const checkOtp = () => {
     if (signUpFields?.otp?.length === 4) {
-      props.submitOtp({ cellphone: signUpFields?.cellphone });
+      sendOtp({ cellphone: signUpFields?.cellphone, otp : signUpFields?.otp });
       setError(undefined);
     } else {
       setError("کد وارد شده را چک کنید.");
     }
   };
 
+  const otpInput = useRef<any | undefined>(undefined);
+  const numberInput = useRef<any | undefined>(undefined);
+
+  useEffect(() => {
+    numberInput.current.focus();
+  },[]);
+
+  useEffect(() => {
+    if(level === 'phonenumber'){
+      numberInput.current.focus();
+    }else{
+      otpInput.current.focus();
+    }
+  },[level])
+
   return (
     <div className="signup d-flex flex-column align-items-center justify-content-center">
       <Navbar />
@@ -71,9 +89,10 @@ function SignUp(props: any) {
                 (target as HTMLInputElement).value
               ))
             }
+            ref={numberInput}
           />
           <span className="signup__error">{error}</span>
-          <button type="submit" onClick={() => submitPhoneNumber()}>
+          <button type="submit" onClick={() => checkPhoneNumber()}>
             {" "}
             ادامه
           </button>
@@ -91,14 +110,11 @@ function SignUp(props: any) {
             onClick={() => setLevel("phonenumber")}
           >
             <Link to="/sign-up" className="d-flex align-items-center">
-              {window.innerWidth > 1007 ? (
-                <>
-                  بازگشت به صفحه قبل
-                  <img src={arrow} />
-                </>
-              ) : (
-                <img src={arrowLeft} alt="" />
-              )}
+              <div className="desktop align-items-center">
+                بازگشت به صفحه قبل
+                <img src={arrow} />
+              </div>
+              <img className="mobile" src={arrowLeft} alt="" />
             </Link>
           </div>
           <b>
@@ -116,12 +132,16 @@ function SignUp(props: any) {
                 (target as HTMLInputElement).value
               ))
             }
+            placeholder={"--  --  --  --"}
+            ref={otpInput}
           />
           <span className="signup__error">{error}</span>
-          <button type="submit" onClick={() => submitOTP()}>
+          <button type="submit" onClick={() => checkOtp()}>
             ادامه
           </button>
-          <p className="signup__info"></p>
+          <p className="signup__info d-flex justify-content-center">
+            ارسال مجدد کد در <Timer seconds={60} refresh={setResend} /> دیگر
+          </p>
         </section>
       )}
       <Footer />
@@ -130,6 +150,6 @@ function SignUp(props: any) {
 }
 
 export default connect(() => ({}), {
-  submitSignUp: user.otp_login,
-  submitOtp: user.otp,
+  sendOtp: user.otp_login,
+  sendPhoneNumber: user.otp,
 })(SignUp);
diff --git a/src/views/Auth/index.tsx b/src/views/Auth/index.tsx
index a122b9c..9846fd0 100644
--- a/src/views/Auth/index.tsx
+++ b/src/views/Auth/index.tsx
@@ -1,10 +1,13 @@
-import React, {useState} from 'react';
+import React, {useState, useEffect} from 'react';
 import SignUp from './SignUp/index';
 import Profile from './Profile/index';
 import Login from './Login/index';
 
 export default function Auth(props : any) {
   const [page, setPage] = useState(props.page);
+  useEffect(() => {
+    setPage(() => props.page);
+  },[props.page]);
   return (
     <>
       { page === 'signup' && <SignUp /> }
diff --git a/src/views/Home/Books/Book/index.tsx b/src/views/Home/Books/Book/index.tsx
index cd77f9d..e6fc20a 100644
--- a/src/views/Home/Books/Book/index.tsx
+++ b/src/views/Home/Books/Book/index.tsx
@@ -6,7 +6,7 @@ export default function Book(props: any) {
   const { data } = props;
   return (
     <Link to={`/courses/${data.id}`} className="home-books-book d-flex flex-column" draggable={'false'}>
-      <img src={data.imageUrl} alt={data.name} draggable={'false'} />
+      <img src={`https://dnvn.ir/api/v1/file/${data.fileIds}`} alt={data.name} draggable={'false'} />
       <footer className="d-flex">
         <div className="home-books-book__info d-flex flex-column">
           <h2>{data.name}</h2>
diff --git a/src/views/Home/Books/index.tsx b/src/views/Home/Books/index.tsx
index 8dc71aa..420d78b 100644
--- a/src/views/Home/Books/index.tsx
+++ b/src/views/Home/Books/index.tsx
@@ -5,7 +5,7 @@ import Book from "./Book/index";
 import { book } from "../../../redux/actions";
 import "./index.scss";
 
-function Books(props: any) {
+function Books({list, number, getList}: any) {
   const slideNumberHandler = () => {
     if (window.innerWidth >= 1440) {
       return 5;
@@ -17,18 +17,16 @@ function Books(props: any) {
       return 2;
     }
   };
-  const { number, courses } = props;
 
-  const list = useSelector((state: any) => state.book.list);
   console.log(list);
   useEffect(() => {
-    props.getList();
+    getList();
   }, []);
 
   return (
     <section
       className="home-books d-flex flex-column"
-      onClick={() => props.getList()}
+      onClick={() => getList()}
     >
       {window.innerWidth > 1007 && list?.length > 0 ? (
         <Carousel
@@ -44,7 +42,7 @@ function Books(props: any) {
         </Carousel>
       ) : (
         <div className="home-books__list d-flex">
-          {courses?.map((item: Object, i: Number) => (
+          {list?.map((item: Object, i: Number) => (
             <Book data={item} key={i} />
           ))}
         </div>
@@ -55,7 +53,7 @@ function Books(props: any) {
 
 export default connect(
   ( state : any) => ({
-    book,
+    list : state.book.list,
   }),
   { getList: book.list }
 )(Books);
diff --git a/src/views/Subscription/DiscountCode/index.scss b/src/views/Subscription/DiscountCode/index.scss
index c72741b..21b27fc 100644
--- a/src/views/Subscription/DiscountCode/index.scss
+++ b/src/views/Subscription/DiscountCode/index.scss
@@ -29,11 +29,11 @@
 @media screen and (min-width : 1441px) {
   .discount-code{
     h3{
-      font-size: 20px;
+      font-size: 18px;
     }
     input{
       padding: 20px 10px 20px 0px;
-      width: 200px;
+      width: 250px;
       font-size: 14px;
       &::placeholder{
         font-size: 10px;
diff --git a/src/views/Subscription/SubscribeRadio/index.scss b/src/views/Subscription/SubscribeRadio/index.scss
index d0203cc..ba8b32e 100644
--- a/src/views/Subscription/SubscribeRadio/index.scss
+++ b/src/views/Subscription/SubscribeRadio/index.scss
@@ -3,6 +3,7 @@
   border : 1px solid #DFDFDF;
   margin-bottom: 15px;
   border-radius: 10px;
+  cursor: pointer;
   &__name{
     border-top-right-radius: 10px;
     border-bottom-right-radius: 10px;
@@ -67,7 +68,7 @@
 
 @media screen and (min-width: 1441px) {
   .subscribe-radio{
-    height: 120px;
+    min-height: 60px;
     &__name{
       flex: 7;
       h2{
@@ -77,15 +78,16 @@
     }
     &__factor{
       flex: 3;
+      padding-right: 65px;
       &--tag{
-        font-size: 14px;
+        font-size: 11px;
       }
       &--off{
         b{
-          font-size: 20px;
+          font-size: 16px;
         }
         i{
-          font-size: 12px;
+          font-size: 10px;
         }
       }
       &--finalPrice{
@@ -102,7 +104,7 @@
 
 @media screen and (min-width: 1008px) and (max-width: 1440px) {
   .subscribe-radio{
-    min-height: 70px;
+    min-height: 60px;
     &__name{
       flex: 7;
       h2{
@@ -112,6 +114,7 @@
     }
     &__factor{
       flex: 3;
+      padding-right: 70px;
       &--tag{
         font-size: calc(100vw / 130);
       }
diff --git a/src/views/Subscription/SubscribeRadio/index.tsx b/src/views/Subscription/SubscribeRadio/index.tsx
index 9f70b97..be90c5a 100644
--- a/src/views/Subscription/SubscribeRadio/index.tsx
+++ b/src/views/Subscription/SubscribeRadio/index.tsx
@@ -4,7 +4,7 @@ import CustomCheckbox from "../../../components/CustomCheckbox";
 import CircleRoundedIcon from "@mui/icons-material/CircleRounded";
 import RadioButtonUncheckedRoundedIcon from "@mui/icons-material/RadioButtonUncheckedRounded";
 import { connect } from "react-redux";
-import {publicApi} from '../../../redux/actions';
+import { publicApi } from "../../../redux/actions";
 
 function SubscribeRadio({ data, selectedSubscribe, setSubscribe }: any) {
   return (
@@ -14,23 +14,25 @@ function SubscribeRadio({ data, selectedSubscribe, setSubscribe }: any) {
         " " +
         (selectedSubscribe.id === data.id ? "subscribe-radio-active" : "")
       }
+      onClick={() =>
+        selectedSubscribe.id === data.id
+          ? setSubscribe({})
+          : setSubscribe(data)
+      }
     >
       <div className="subscribe-radio__name d-flex align-items-center">
         <CustomCheckbox
           icon={
             <RadioButtonUncheckedRoundedIcon
-              style={{ color: "#707070", fontSize: 50, padding: 0 }}
+              style={{ color: "#707070", fontSize: 40, padding: 0 }}
             />
           }
           checkedIcon={
             <CircleRoundedIcon
-              style={{ color: "white", fontSize: 50, padding: 0 }}
+              style={{ color: "white", fontSize: 40, padding: 0 }}
             />
           }
           checked={selectedSubscribe.id === data.id}
-          onChange={() =>  
-            selectedSubscribe.id === data.id ? setSubscribe({}) : setSubscribe(data)
-          }
         />
         <h2>{data.name}</h2>
       </div>
@@ -60,5 +62,5 @@ export default connect(
   (state: any) => ({
     selectedSubscripe: state.publicApi.selectedSubscripe,
   }),
-  {setSubscribe : publicApi.setSubscribe,}
+  { setSubscribe: publicApi.setSubscribe }
 )(SubscribeRadio);
diff --git a/src/views/Subscription/index.scss b/src/views/Subscription/index.scss
index 78aed73..405e7ce 100644
--- a/src/views/Subscription/index.scss
+++ b/src/views/Subscription/index.scss
@@ -13,13 +13,13 @@
 @media screen and (min-width : 1441px) {
   .subscription{
     main{
-      margin-top: 50px;
+      margin-top: 30px;
       max-width: 700px;
       h1{
-        font-size: 44px;
+        font-size: 28px;
       }
       p{
-        font-size: 21px;
+        font-size: 16px;
       }
     }
   }
@@ -28,14 +28,14 @@
 @media screen and (min-width : 1008px) and (max-width : 1440px) {
   .subscription{
     main{
-      margin-top: 0px;
+      margin-top: 20px;
       max-width: 700px;
-      transform: scale(0.8) translateY(-20px);
+      transform: scale(0.8) translateY(-80px);
       h1{
         font-size: calc(100vw / 50);
       }
       p{
-        font-size: calc(100vw / 90);
+        font-size: calc(100vw / 95);
       }
     }
   }
diff --git a/src/views/VideoTube/Attachments/index.scss b/src/views/VideoTube/Attachments/index.scss
index 286b492..dcf5868 100644
--- a/src/views/VideoTube/Attachments/index.scss
+++ b/src/views/VideoTube/Attachments/index.scss
@@ -33,7 +33,7 @@
 @media screen and (min-width: 1008px) and (max-width: 1440px) {
   .download-attachments{
     width: calc(100% - 20px);
-    padding: 20px 0px;
+    padding: 10px 0px;
     a{
       font-size: calc(100vw / 100);
     }
diff --git a/src/views/VideoTube/Book/index.scss b/src/views/VideoTube/Book/index.scss
index 13c886d..20f5583 100644
--- a/src/views/VideoTube/Book/index.scss
+++ b/src/views/VideoTube/Book/index.scss
@@ -30,8 +30,8 @@
   .video-tube-suggest{
     width: 30%;
     img{
-      width: 130px;
-      height: 180px;
+      width: 100%;
+      // height: 180px;
     }
     h4{
       font-size: calc(100vw / 90);
diff --git a/src/views/VideoTube/LessonPlayList/index.scss b/src/views/VideoTube/LessonPlayList/index.scss
index fa17654..4477718 100644
--- a/src/views/VideoTube/LessonPlayList/index.scss
+++ b/src/views/VideoTube/LessonPlayList/index.scss
@@ -18,6 +18,9 @@
     &--count{
       color: white;
     }
+    &--active{
+      background: rgba(#ebebeb, 0.21);
+    }
     &--text{
       padding: 15px 10px;
       h4{
diff --git a/src/views/VideoTube/LessonPlayList/index.tsx b/src/views/VideoTube/LessonPlayList/index.tsx
index 8305662..9a1f2d8 100644
--- a/src/views/VideoTube/LessonPlayList/index.tsx
+++ b/src/views/VideoTube/LessonPlayList/index.tsx
@@ -1,17 +1,26 @@
 import React from "react";
-import './index.scss';
+import "./index.scss";
+import { connect } from "react-redux";
+import {book} from '../../../redux/actions';
 
-export default function LessonPlayList(props: any) {
-  const { lesson } = props;
+function LessonPlayList({ lesson, selectedVideo,setVideoActive }: any) {
   return (
     <div className="lesson-playlist d-flex flex-column">
       <header className="d-flex align-items-center">
         <h3>{lesson.name}</h3>
         <span></span>
       </header>
-      {lesson.files.map((file : any, i : any) => (
-        <div className="lesson-playlist__item d-flex align-items-center" key={i}>
-          <span className="lesson-playlist__item--count">{i+1}</span>
+      {lesson.files.map((file: any, i: any) => (
+        <div
+          className={
+            "lesson-playlist__item d-flex align-items-center" + ' ' +
+            (file.name === selectedVideo.name &&
+              "lesson-playlist__item--active")
+          }
+          key={i}
+          onClick={() => setVideoActive(file)}
+        >
+          <span className="lesson-playlist__item--count">{i + 1}</span>
           <div className="lesson-playlist__item--video">
             <video>
               <source src={file.src} />
@@ -27,3 +36,9 @@ export default function LessonPlayList(props: any) {
     </div>
   );
 }
+
+export default connect((state: any) => ({
+  selectedVideo: state.book.selectedVideo,
+}), {
+  setVideoActive : book.setVideoActive,
+})(LessonPlayList);
diff --git a/src/views/VideoTube/index.scss b/src/views/VideoTube/index.scss
index 2ce5121..5426df9 100644
--- a/src/views/VideoTube/index.scss
+++ b/src/views/VideoTube/index.scss
@@ -219,7 +219,7 @@
         max-height: 320px;
         header {
           padding: 14px 12px;
-          background-color: #2c2c2c;
+          background-color: rgba(#ebebeb, 0.21);
           h2 {
             font-size: 18px;
           }
@@ -229,9 +229,10 @@
         }
       }
       &--suggests {
+        background-color: #001702;
         header {
           padding: 26px 12px;
-          background-color: #8bd09746;
+          // background-color: #8bd09746;
           h2 {
             font-size: 18px;
           }
@@ -241,7 +242,7 @@
         }
         &___list{
           padding: 15px 12px;
-          background-color: #08793d58;
+          // background-color: #08793d58;
         }
       }
     }
@@ -313,10 +314,10 @@
         }
       }
       &--attachments {
-        max-height: 320px;
+        max-height: 250px;
         header {
           padding: 14px 12px;
-          background-color: #2c2c2c;
+          background-color: rgba(#ebebeb, 0.21);
           h2 {
             font-size: calc(100vw / 85);
           }
@@ -326,9 +327,10 @@
         }
       }
       &--suggests {
+        background-color: #001702;
         header {
           padding: 26px 12px;
-          background-color: #8bd09746;
+          background-color: rgba(#ebebeb, 0.21);
           h2 {
             font-size: calc(100vw / 85);
           }
@@ -338,7 +340,7 @@
         }
         &___list{
           padding: 15px 12px;
-          background-color: #08793d58;
+          background-color: #ffffff00;
         }
       }
     }
@@ -441,7 +443,7 @@
         }
         &___list{
           padding: 15px 12px;
-          background-color: #08793d58;
+          background-color: #ffffff00;
         }
       }
     }
