diff --git a/src/redux/actions-type/public.tsx b/src/redux/actions-type/public.tsx
index 328e647..371135b 100644
--- a/src/redux/actions-type/public.tsx
+++ b/src/redux/actions-type/public.tsx
@@ -43,6 +43,11 @@ interface selectMenu {
   data: any;
 }
 
+interface getHeader{
+  type: "public/homePageVOD";
+  data: any;
+}
+
 interface error {
   type: "error";
   data: undefined;
@@ -67,6 +72,7 @@ type PublicAction =
   | getCity
   | getContactData
   | selectMenu
+  | getHeader
   | loading
   | error;
 
diff --git a/src/redux/actions/public.tsx b/src/redux/actions/public.tsx
index c740924..192d8d5 100644
--- a/src/redux/actions/public.tsx
+++ b/src/redux/actions/public.tsx
@@ -29,6 +29,10 @@ const publicApi = {
       await proxy.get("public/city", data, { dispatch }),
   selectMenu: (data: Object) => async (dispatch: Dispatch) =>
     await dispatch({ type: "public/selectMenu", data: data }),
+  getHeader:
+    (data = {}) =>
+    async (dispatch: Dispatch) =>
+      await proxy.get("public/homePageVOD", data, { dispatch }),
 };
 
 export default publicApi;
diff --git a/src/redux/reducers/public.tsx b/src/redux/reducers/public.tsx
index 9c27170..0231b0f 100644
--- a/src/redux/reducers/public.tsx
+++ b/src/redux/reducers/public.tsx
@@ -26,6 +26,7 @@ const initialState = {
       name: "برنامه نویسی",
     },
   ],
+  header : [],
   selectedMenu : null,
   contactData: null
 };
@@ -175,6 +176,8 @@ export default function publicApi(state = initialState, action: PublicAction) {
       return { ...state, loading: false, error: null, city: data };
     case "public/selectMenu":
       return { ...state, loading: false, error: null, selectedMenu : data };
+    case "public/homePageVOD":
+      return { ...state, loading: false, error: null, header : data };
     case "loading":
       return { ...state, loading: true };
     case "error":
diff --git a/src/views/Home/Books/Book/index.scss b/src/views/Home/Books/Book/index.scss
index cc37e47..446bc33 100644
--- a/src/views/Home/Books/Book/index.scss
+++ b/src/views/Home/Books/Book/index.scss
@@ -37,7 +37,7 @@
   .home-books-book{
     &:hover{
       transform : scale(0.95);
-      border: 1px solid #84de56;
+      background-color: #86868628;
     }
     img{
       height: 300px;
diff --git a/src/views/Home/Courses/Course/index.scss b/src/views/Home/Courses/Course/index.scss
index 7af0ab4..d5ab24d 100644
--- a/src/views/Home/Courses/Course/index.scss
+++ b/src/views/Home/Courses/Course/index.scss
@@ -36,7 +36,7 @@
 @media screen and (min-width : 1441px){
   .home-courses-course{
     &:hover{
-      border: 1px solid #84de56;
+      background-color: #86868628;
       transform: scale(0.95);
     }
     img{
diff --git a/src/views/Home/Header/Item/index.scss b/src/views/Home/Header/Item/index.scss
deleted file mode 100644
index 98ff880..0000000
--- a/src/views/Home/Header/Item/index.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-.home-header-item{
-  width: 100%;
-  color: white;
-  font-family: numeralLight;
-  border-radius: 10px;
-}
-
-@media screen and (min-width: 1441px){
-  .home-header-item{
-    max-width: 1250px;
-    height: 400px;
-    div{
-      width: 29%;
-      h1{
-        font-family: numeralMedium;
-        font-size: 24px;
-      }
-      h2{
-        font-size: 20px;
-      }
-      p{
-        margin-top: 20px;
-        font-size: 16px;
-      }
-    }
-    
-  }
-}
-
-@media screen and (min-width: 1008px) and (max-width: 1440px) { 
-  .home-header-item{
-    max-width: 1250px;
-    height: 400px;
-    div{
-      width: 31%;
-      h1{
-        font-family: numeralBold;
-        font-size: calc(100vw / 60);
-      }
-      h2{
-        font-size: calc(100vw / 70);
-        font-family: numeralMedium;
-      }
-      p{
-        margin-top: 20px;
-        font-size:calc(100vw / 90);
-      }
-    }
-  }
-}
-
-@media screen and (min-width: 640px) and (max-width: 1007px) { 
-  .home-header-item{
-    max-width: 900px;
-    height: 235px;
-    div{
-      width: 31%;
-      h1{
-        font-family: numeralBold;
-        font-size: calc(100vw / 50);
-      }
-      h2{
-        font-size: calc(100vw / 60);
-      }
-      p{
-        margin-top: 20px;
-        font-size: calc(100vw / 70);
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/views/Home/Header/Item/index.tsx b/src/views/Home/Header/Item/index.tsx
deleted file mode 100644
index 24005af..0000000
--- a/src/views/Home/Header/Item/index.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react";
-import './index.scss';
-
-export default function Item(props: any) {
-  const { data } = props;
-  const style = {
-    background: `url(${data.imageUrl})`,
-    backgroundSize : '100% 100%',
-    backgroundRepeat : 'no-repeat',
-    backgroundAttachment : 'fixed',
-    backgroundPosition: '0px 0px',
-  };
-  return (
-    <div
-      className="home-header-item d-flex justify-content-end align-items-center"
-      style={style}
-    >
-      <div>
-        <h1>{data.name}</h1>
-        <h2>{data.subTitle}</h2>
-        <p>{data.text}</p>
-      </div>
-    </div>
-  );
-}
diff --git a/src/views/Home/Header/index.tsx b/src/views/Home/Header/index.tsx
index 448bd72..d6b3d22 100644
--- a/src/views/Home/Header/index.tsx
+++ b/src/views/Home/Header/index.tsx
@@ -8,24 +8,26 @@ export default function Header(props: any) {
     <header className="home-header">
       <div id="myCarousel" className="carousel slide" data-ride="carousel">
         <div className="carousel-inner">
-          {headerData.map((item: any, i: Number) => (
+          {headerData.map((item: any, i: any) => (
             <div
-              className={item.id === 0 ? "item active" : "item"}
+              className={i === 0 ? "item active" : "item"}
               style={{
-                background: `url(${item.imageUrl})`,
+                background: `url(${"https://dnvn.ir/api/v1/file/"+ item.fileId})`,
               }}
+              // dataBackgroundImage={`https://dnvn.ir/api/v1/file/${item.fileId}`}
+              key={i}
             >
               <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} />
                   <div className="d-flex flex-column">
-                    <h3>{item.author}</h3>
+                    <h3>{item.extraText}</h3>
                     <i>نویسنده</i>
                   </div>
                 </div>
-                <h1>{'0' + (item.id + 1)}</h1>
-                <h1>{item.name}</h1>
+                <h1>{"0" + (Number(i) + 1)}</h1>
+                <h1>{item.title}</h1>
                 <h2>{item.subTitle}</h2>
               </div>
             </div>
@@ -41,8 +43,8 @@ export default function Header(props: any) {
             >
               <span className={i === 0 ? "active" : ""}></span>
               <div className="d-flex flex-column">
-                <b>0{item1.id + 1}</b>
-                <strong>{item1.name}</strong>
+                <b>{"0" + (Number(i) + 1)}</b>
+                <strong>{item1.title}</strong>
               </div>
             </li>
           ))}
diff --git a/src/views/Home/index.tsx b/src/views/Home/index.tsx
index beebbb7..600e7b1 100644
--- a/src/views/Home/index.tsx
+++ b/src/views/Home/index.tsx
@@ -12,7 +12,7 @@ import AppDownload from "./AppDownload/index";
 import Vocal from "../../components/Vocal/Vocal";
 import scroll from "../../util/scroll";
 import { connect } from "react-redux";
-import { book } from "../../redux/actions";
+import { book, publicApi } from "../../redux/actions";
 
 import olum7 from "../../assets/images/olum7.jpg";
 import olum8 from "../../assets/images/olum8.jpg";
@@ -31,7 +31,8 @@ function Home({
   gradeFilterBooks,
   sortFilterCourse,
   selectedSort,
-  sortFilter
+  sortFilter,
+  getHeader,
 }: any) {
   const [grade, setGrade] = useState(null);
   const [vocal, setVocal] = useState(false);
@@ -39,13 +40,14 @@ function Home({
 
   useEffect(() => {
     if (inputValue) {
-      sortFilter({search : inputValue, sort : selectedSort});
+      sortFilter({ search: inputValue, sort: selectedSort });
       setVocal(false);
     }
   }, [inputValue]);
   useEffect(() => {
     getCourseList();
     scroll.goToTop();
+    getHeader({device : 1});
   }, []);
   return (
     <>
@@ -82,8 +84,13 @@ export default connect(
     gradeFilterBooks: state.book.gradeFilterBooks,
     sortFilterCourse: state.book.sortFilterCourse,
     selectedSort: state.book.selectedSort,
+    headerData: state.publicApi.header,
   }),
-  { getCourseList: book.list, sortFilter: book.sortFilter }
+  {
+    getCourseList: book.list,
+    sortFilter: book.sortFilter,
+    getHeader: publicApi.getHeader,
+  }
 )(Home);
 Home.defaultProps = {
   grades: [
@@ -136,30 +143,4 @@ Home.defaultProps = {
       value: 12,
     },
   ],
-  headerData: [
-    {
-      id: 0,
-      name: "آیا هیجان زندگی همچنان باقی است؟",
-      subTitle: "سوالاتی که پاسخی برای آنها نیست!",
-      text: "آیا ذهن نویسنده به این سمت رفته که شما این متن را بخوانید؟ نویسنده درست حدس زده شما در حال خواندن هستید. لطفا خواندن را تمام کنید ",
-      author: "جورج جونیور",
-      imageUrl: header,
-    },
-    {
-      id: 1,
-      name: "آیا هیجان زندگی همچنان باقی است؟",
-      subTitle: "سوالاتی که پاسخی برای آنها نیست!",
-      text: "آیا ذهن نویسنده به این سمت رفته که شما این متن را بخوانید؟ نویسنده درست حدس زده شما در حال خواندن هستید. لطفا خواندن را تمام کنید ",
-      author: "جورج جونیور",
-      imageUrl: header,
-    },
-    {
-      id: 2,
-      name: "آیا هیجان زندگی همچنان باقی است؟",
-      subTitle: "سوالاتی که پاسخی برای آنها نیست!",
-      text: "آیا ذهن نویسنده به این سمت رفته که شما این متن را بخوانید؟ نویسنده درست حدس زده شما در حال خواندن هستید. لطفا خواندن را تمام کنید ",
-      author: "جورج جونیور",
-      imageUrl: header,
-    },
-  ],
 };