diff --git a/src/components/BookToggle/index.scss b/src/components/BookToggle/index.scss
index 8e06366..b1bdec6 100644
--- a/src/components/BookToggle/index.scss
+++ b/src/components/BookToggle/index.scss
@@ -19,8 +19,6 @@
     padding: 10px 35px;
     align-self: end;
     margin-top: 60px;
-    border: 1px solid white;
-    color: white;
     &:hover{
       border-color: $green;
       color: $green;
@@ -31,12 +29,20 @@
     p {
       color: $gray5;
     }
+    a {
+      box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1);
+      color: $gray7;
+    }
   }
   &-dark {
     strong,
     p {
       color: $gray12;
     }
+    a{
+      border: 1px solid white;
+      color: white;
+    }
   }
 }
 
diff --git a/src/components/Dialog/index.js b/src/components/Dialog/index.js
new file mode 100644
index 0000000..c3066d7
--- /dev/null
+++ b/src/components/Dialog/index.js
@@ -0,0 +1,39 @@
+import * as React from "react";
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+
+export default function AlertDialog({ open, setOpen, text }) {
+  return (
+    <div className="dialog">
+      <Dialog
+        open={open}
+        onClose={() => setOpen(false)}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+      >
+        {/* <DialogTitle id="alert-dialog-title">
+        {"Use Google's location service?"}
+      </DialogTitle> */}
+        <div className='dialog-box'>
+          <DialogContent>
+            <DialogContentText id="alert-dialog-description">
+              <p className="dialog-text">{text}</p>
+            </DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <button
+              className="dialog-submit"
+              onClick={() => setOpen(false)}
+              autoFocus
+            >
+              متوجه شدم!
+            </button>
+          </DialogActions>
+        </div>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/src/components/Dialog/index.scss b/src/components/Dialog/index.scss
new file mode 100644
index 0000000..876da41
--- /dev/null
+++ b/src/components/Dialog/index.scss
@@ -0,0 +1,15 @@
+.dialog{
+  &-text{
+    color: white;
+    font-family: numeralLight;
+  }
+  &-submit{
+    background-color: inherit;
+    border: none;
+    color: $green;
+    font-family: numeralLight;
+  }
+  &-box{
+    background-color: rgba($red, 0.2);
+  }
+}
\ No newline at end of file
diff --git a/src/components/Navbar/index.scss b/src/components/Navbar/index.scss
index bafaaeb..d659da9 100644
--- a/src/components/Navbar/index.scss
+++ b/src/components/Navbar/index.scss
@@ -8,8 +8,10 @@
   z-index: 150;
   &-light{
     .nav___share{
+      box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1);
       background-color: inherit !important;
-      border: 1px solid $green1 !important;
+      border: none;
+      // border: 1px solid $green1 !important;
       a{
         color: $green1 !important;
 
@@ -41,6 +43,7 @@
     border: 2px solid $gray5;
   }
   &___login{
+    box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1);
     background-color: $green1;
   }
   &___logo{
diff --git a/src/custom.scss b/src/custom.scss
index 4e34249..c42ea8c 100644
--- a/src/custom.scss
+++ b/src/custom.scss
@@ -1,5 +1,6 @@
 @import "./constants/colors.scss";
 @import "./constants/width.scss";
+@import "./components/Dialog/index.scss";
 @import "./components/BookToggle/index.scss";
 @import "./components/BreadCrumbs/index.scss";
 @import "./components/GradeFilter/index.scss";
@@ -29,6 +30,10 @@
   font-weight: 300;
 }
 
+button{
+  box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1) !important;
+}
+
 .mobile,
 .desktop {
   display: flex;
@@ -500,3 +505,4 @@ p {
     line-height: 1.5 !important;
   }
 }
+
diff --git a/src/views/VideoTube/LessonPlayList/index.tsx b/src/views/VideoTube/LessonPlayList/index.tsx
index 9069e74..34c57f8 100644
--- a/src/views/VideoTube/LessonPlayList/index.tsx
+++ b/src/views/VideoTube/LessonPlayList/index.tsx
@@ -1,8 +1,9 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { publicApi } from "../../../redux/actions";
 import { Link } from "react-router-dom";
 import _ from "lodash";
+import Dialog from "../../../components/Dialog";
 
 function LessonPlayList({
   category,
@@ -14,6 +15,7 @@ function LessonPlayList({
   theme,
 }: any) {
   const bookId = localStorage.getItem("bookId");
+  const [open, setOpen] = useState(false);
   useEffect(() => {
     if (localStorage.getItem("scroll-list") && vods) {
       const list: HTMLElement = document.getElementById("list") as HTMLElement;
@@ -25,8 +27,6 @@ function LessonPlayList({
       const index = vods?.findIndex(
         (item: any) => item?.name === selectedVideo?.name
       );
-      console.log(index);
-      console.log(listHeight, elementHeight * (Number(index) + 1));
 
       if (elementHeight * (Number(index) + 1) > listHeight) {
         list.scrollTo(0, elementHeight * (Number(index) + 1) + elementHeight);
@@ -37,99 +37,104 @@ function LessonPlayList({
 
   const light = theme === "light";
   return (
-    <>
-      {
-        <div
-          className={_.join(
-            [
-              "lesson-playlist d-flex flex-column",
-              light ? "lesson-playlist-light" : "lesson-playlist-dark",
-            ],
-            " "
-          )}
-        >
-          {bookId && (
-            <header>
-              <h3>
-                {
-                  realCategories.filter(
-                    (item: any) => item.id === category[0].categoryId
-                  )[0].name
-                }
-              </h3>
-              <span></span>
-            </header>
-          )}
+    <div
+      className={_.join(
+        [
+          "lesson-playlist d-flex flex-column",
+          light ? "lesson-playlist-light" : "lesson-playlist-dark",
+        ],
+        " "
+      )}
+    >
+      {bookId && (
+        <header>
+          <h3>
+            {
+              realCategories.filter(
+                (item: any) => item.id === category[0].categoryId
+              )[0].name
+            }
+          </h3>
+          <span></span>
+        </header>
+      )}
 
-          {bookId ? (
-            category.map((video: any, i: any) => (
-              <Link
-                to={"/video/" + video.id}
-                className={
-                  "lesson-playlist__item d-flex align-items-center" +
-                  " " +
-                  (video?.id === selectedVideo?.id &&
-                    "lesson-playlist__item--active")
-                }
-                key={i}
-                id={"listItem" + video.id}
-                onClick={() => video.isFreeVod ? setVideoActive(video) : {}}
-              >
-                <span className="lesson-playlist__item--count">
-                  {Number(i) + 1}
-                </span>
-                <div className="lesson-playlist__item--video">
-                  {/* <video>
+      {bookId ? (
+        category.map((video: any, i: any) => (
+          <Link
+            to={video.isFreeVod ? "/video/" + video.id : "#"}
+            className={
+              "lesson-playlist__item d-flex align-items-center" +
+              " " +
+              (video?.id === selectedVideo?.id &&
+                "lesson-playlist__item--active")
+            }
+            key={i}
+            id={"listItem" + video.id}
+            onClick={() =>
+              video.isFreeVod ? setVideoActive(video) : setOpen(true)
+            }
+          >
+            <span className="lesson-playlist__item--count">
+              {Number(i) + 1}
+            </span>
+            <div className="lesson-playlist__item--video">
+              {/* <video>
                   <source
                     src={`https://dnvn.ir/api/v1/file/${video.fileIds}`}
                   />
                 </video> */}
-                  <img
-                    src={`https://dnvn.ir/api/v1/file/${video.posterId}`}
-                    alt=""
-                  />
-                  <span>22:05</span>
-                </div>
-                <div className="lesson-playlist__item--text d-flex flex-column">
-                  <h4>{video.name}</h4>
-                  {/* <p>{file.text}</p> */}
-                </div>
-              </Link>
-            ))
-          ) : (
-            <Link
-              to={"/video/" + category.id}
-              className={
-                "lesson-playlist__item d-flex align-items-center" +
-                " " +
-                (category?.id === selectedVideo?.id &&
-                  "lesson-playlist__item--active")
-              }
-              onClick={() => category.isFreeVod ? setVideoActive(category) : ''}
-              id={"listItem" + category.id}
-            >
-              <span className="lesson-playlist__item--count"></span>
-              <div className="lesson-playlist__item--video">
-                {/* <video>
+              <img
+                src={`https://dnvn.ir/api/v1/file/${video.posterId}`}
+                alt=""
+              />
+              <span>22:05</span>
+            </div>
+            <div className="lesson-playlist__item--text d-flex flex-column">
+              <h4>{video.name}</h4>
+              {/* <p>{file.text}</p> */}
+            </div>
+          </Link>
+        ))
+      ) : (
+        <Link
+          to={category.isFreeVod ? "/video/" + category.id : "#"}
+          className={
+            "lesson-playlist__item d-flex align-items-center" +
+            " " +
+            (category?.id === selectedVideo?.id &&
+              "lesson-playlist__item--active")
+          }
+          onClick={() =>
+            category.isFreeVod ? setVideoActive(category) : setOpen(true)
+          }
+          id={"listItem" + category.id}
+        >
+          <span className="lesson-playlist__item--count"></span>
+          <div className="lesson-playlist__item--video">
+            {/* <video>
                   <source
                     src={`https://dnvn.ir/api/v1/file/${video.fileIds}`}
                   />
                 </video> */}
-                <img
-                  src={`https://dnvn.ir/api/v1/file/${category.posterId}`}
-                  alt=""
-                />
-                <span>22:05</span>
-              </div>
-              <div className="lesson-playlist__item--text d-flex flex-column">
-                <h4>{category.name}</h4>
-                {/* <p>{file.text}</p> */}
-              </div>
-            </Link>
-          )}
-        </div>
-      }
-    </>
+            <img
+              src={`https://dnvn.ir/api/v1/file/${category.posterId}`}
+              alt=""
+            />
+            <span>22:05</span>
+          </div>
+          <div className="lesson-playlist__item--text d-flex flex-column">
+            <h4>{category.name}</h4>
+            {/* <p>{file.text}</p> */}
+          </div>
+        </Link>
+      )}
+      <Dialog
+        open={open}
+        setOpen={setOpen}
+        text="برای مشاهده این فیلم باید دوره را خریداری کنید."
+      />
+    </div>
   );
 }