diff --git a/src/router.js b/src/router.js
index 22bf210..919d0ba 100644
--- a/src/router.js
+++ b/src/router.js
@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
 import { Navigate } from "react-router-dom";
 import { connect } from "react-redux";
 import {
@@ -10,11 +10,14 @@ import {
   book,
   blog,
 } from "./redux/actions";
+
+//components
 import Navbar from "./components/Navbar";
 import BG from "./components/BG";
 import BottomNavigation from "./components/BottomNavigation";
+import FooterDesign1 from "./components/Footer";
 
-import _ from "lodash";
+//pages
 import Home from "./views/Home";
 import Auth from "./views/Auth";
 import Products from "./views/Products";
@@ -33,7 +36,6 @@ import Activation from "./views/Activation";
 import Faq from "./views/Faq";
 import Contact from "./views/Contact";
 import Dashboard from "./views/Dashboard";
-import FooterDesign1 from "./components/Footer";
 import Blogs from "./views/Blogs";
 import Blog from "./views/Blog";
 import About from "./views/About";
@@ -110,14 +112,9 @@ function Router({
   return (
     <div className={`${isDark ? "dark" : ""}`}>
       <div
-        className={_.join(
-          [
-            "min-h-screen min-w-screen rtl overflow-x-hidden lg:py-0",
-            isDark ? "" : "bg-white",
-            headerOptions?.shown ? "pt-16" : "pt-0",
-          ],
-          " "
-        )}
+        className={`min-h-screen min-w-screen rtl overflow-x-hidden lg:py-0 ${
+          isDark ? "" : "bg-white"
+        } ${headerOptions?.shown ? "pt-16" : "pt-0"}`}
       >
         {menu && (
           <div
diff --git a/src/views/Home/Desktop/index.js b/src/views/Home/Desktop/index.js
index 90556a1..dca978f 100644
--- a/src/views/Home/Desktop/index.js
+++ b/src/views/Home/Desktop/index.js
@@ -1,10 +1,13 @@
 import React, { useEffect } from "react";
 import { connect } from "react-redux";
-import SalesContainer from "./SalesContainer";
-
 import { publicApi } from "../../../redux/actions";
-import Part2 from "./Part2";
+
+//assets
 import HomeImg from "../../../assets/images/HomeImg.png";
+
+//components
+import SalesContainer from "./SalesContainer";
+import Part2 from "./Part2";
 import Part4 from "./Part4";
 import Design2D from "../../../components/Design2D";
 
@@ -68,7 +71,7 @@ const DesktopHome = ({ grades, books }) => {
 
 const mapStateToProps = (state) => ({
   isDark: state.publicApi.isDark,
-  isMobile: state.publicApi.isMobile,
+  isMobile: state.config.device === 'mobile',
   books: state.book.list,
   gradeFilterBooks: state.book.gradeFilterBooks,
   selectedGrade: state.book.selectedGrade,
diff --git a/src/views/Home/Portrait/Public/Header/index.js b/src/views/Home/Portrait/Public/Header/index.js
index 450f839..4a2f995 100644
--- a/src/views/Home/Portrait/Public/Header/index.js
+++ b/src/views/Home/Portrait/Public/Header/index.js
@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
 import { Carousel } from "@trendyol-js/react-carousel";
 
 //components
-import Video from "../../../../../components/JolPlayer";
+// import Video from "../../../../../components/JolPlayer";
 import Book from "../../../Landscape/Page1/Book";
 import Lights from "../../../Landscape/Page1/Lights";
 
@@ -11,7 +11,7 @@ import Lights from "../../../Landscape/Page1/Lights";
 import arrow from "../../../../../assets/icons/dropdown-blue.svg";
 import sheffImage from "../../../../../assets/images/sheff.svg";
 import flatFlower from "../../../../../assets/icons/flat-flower-white.svg";
-import jojoImage from "../../../../../assets/images/jojo.svg";
+// import jojoImage from "../../../../../assets/images/jojo.svg";
 
 function Header({ bookList }) {
   const [show, setShow] = useState(2);