diff --git a/package.json b/package.json
index 2b62a45..362b996 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
     "jest-circus": "26.6.0",
     "jest-resolve": "26.6.0",
     "jest-watch-typeahead": "0.6.1",
-    "jol-player": "git+https://git.sitenevis.com/Reza_ashrafi/JoL-player.git",
+    "jol-player": "^2.5.0",
     "mapir-react-component": "^2.0.1",
     "mini-css-extract-plugin": "0.11.3",
     "optimize-css-assets-webpack-plugin": "5.0.4",
diff --git a/src/App.tsx b/src/App.tsx
index 8a4448b..7b8306a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,25 +4,26 @@ import "react-toastify/dist/ReactToastify.css";
 import store from "./redux/store";
 import Router from "./router";
 import { Provider } from "react-redux";
-import {ToastContainer} from "react-toastify";
+import { ToastContainer } from "react-toastify";
 
 function App() {
   return (
     <Provider store={store}>
       <Router />
       <ToastContainer
-          position="bottom-left"
-          autoClose={3000}
-          hideProgressBar={true}
-          newestOnTop={true}
-          closeOnClick
-          rtl={true}
-          pauseOnFocusLoss
-          draggable
-          pauseOnHover
-        />
+        position="bottom-left"
+        autoClose={3000}
+        hideProgressBar={true}
+        newestOnTop={true}
+        closeOnClick
+        rtl={true}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+      />
     </Provider>
   );
 }
 
+
 export default App;
diff --git a/src/views/Home/Header/index.scss b/src/views/Home/Header/index.scss
index 8abd797..dcdbe1a 100644
--- a/src/views/Home/Header/index.scss
+++ b/src/views/Home/Header/index.scss
@@ -50,7 +50,7 @@
       &--author{
         position: absolute;
         left: 30px;
-        bottom: 150px;
+        bottom: 100px;
         h3{
           margin-right: 5px;
           font-size: 15px;
@@ -91,7 +91,8 @@
   .home-header {
     max-width: 1250px;
     .item {
-      padding-top: 130px;
+
+       padding-top: 360px;
       h1 {
         font-size: calc(100vw / 65);
       }
@@ -103,7 +104,7 @@
       &--author{
         position: absolute;
         left: 30px;
-        bottom: 150px;
+        bottom: 100px;
         h3{
           margin-right: 5px;
           font-size: calc(100vw / 100);
diff --git a/src/views/Home/Header/index.tsx b/src/views/Home/Header/index.tsx
index 4f6eeda..ad5631a 100644
--- a/src/views/Home/Header/index.tsx
+++ b/src/views/Home/Header/index.tsx
@@ -12,7 +12,7 @@ export default function Header(props: any) {
             <div
               className={i === 0 ? "item active" : "item"}
               style={{
-                background: `url(${"https://dnvn.ir/api/v1/file/"+ item.fileId})`,
+                background: `url(${"https://dnvn.ir/api/v1/file/" + item.fileId})`,
               }}
               // dataBackgroundImage={`https://dnvn.ir/api/v1/file/${item.fileId}`}
               key={i}
@@ -20,13 +20,13 @@ export default function Header(props: any) {
               <div className="home-header__cover"></div>
               <div className="home-header__info d-flex flex-column">
                 <div className="home-header__info--author d-flex">
-                  <Avatar src={item.authorImage} />
+                  {item.authorImage && <Avatar src={item.authorImage} />}
                   <div className="d-flex flex-column">
                     <h3>{item.extraText}</h3>
-                    <i>نویسنده</i>
+                    {/* <i>نویسنده</i> */}
                   </div>
                 </div>
-                <h1>{"0" + (Number(i) + 1)}</h1>
+                {/* <h1>{(Number(i) + 1)}</h1> */}
                 <h1>{item.title}</h1>
                 <h2>{item.subTitle}</h2>
               </div>
@@ -43,7 +43,7 @@ export default function Header(props: any) {
             >
               <span className={i === 0 ? "active" : ""}></span>
               <div className="d-flex flex-column">
-                <b>{"0" + (Number(i) + 1)}</b>
+                <b>{"."}</b>
                 <strong>{item1.title}</strong>
               </div>
             </li>
diff --git a/yarn.lock b/yarn.lock
index 28e8202..8f9e1d3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6323,6 +6323,11 @@ history@^4.9.0:
     tiny-warning "^1.0.0"
     value-equal "^1.0.1"
 
+hls.js@^1.0.11:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/hls.js/-/hls.js-1.0.12.tgz#ad80ee6444217f4f22de7cdf0da0a49ce1dad845"
+  integrity sha512-YnyujGMZAofraBzl5PjPI6kw7HMt/Dhpnr+PrTtmoIApKUPFmeKWqvdIGhdmxQcrSHoCHDEqSX79m+Zpu924Kg==
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz"
@@ -7570,11 +7575,13 @@ jest@26.6.0:
     import-local "^3.0.2"
     jest-cli "^26.6.0"
 
-"jol-player@git+https://git.sitenevis.com/Reza_ashrafi/JoL-player.git":
-  version "2.2.0"
-  resolved "git+https://git.sitenevis.com/Reza_ashrafi/JoL-player.git#636f3ae9aa3c5f53a10a3b85c7dc4b479b3be40d"
+jol-player@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/jol-player/-/jol-player-2.5.0.tgz#a1cc95746066e759d036a7a64a5690ca36f48430"
+  integrity sha512-zAGERLbo9i3e+gLv+CC7Viv0HU851PhE94F3c8umqT1rUXUty6Gx+z8GDUFt3VtjGsHWx4BbBTnLogSmQt97vQ==
   dependencies:
     core-js "^2.6.10"
+    hls.js "^1.0.11"
     react "^17.0.2"
     react-dom "^17.0.2"
     screenfull "^5.0.0"