diff --git a/app/Mobile/Drawer.js b/app/Mobile/Drawer.js
index 08386e9..4be2598 100644
--- a/app/Mobile/Drawer.js
+++ b/app/Mobile/Drawer.js
@@ -1,23 +1,10 @@
-"use client"
-import React, { useState } from 'react';
-import { Link } from 'react-router-dom';
 import logo from '../assets/images/wrenchboard-logo-text.png';
 import getConfig from  "../../Config/config"; // './../../Config/config'
+import Image from 'next/image';
 
 
 function Drawer({ drawer, action }) {
     var site = getConfig()[0];
-
-    const [itemSize, setSize] = useState('0px');
-    const [item, setItem] = useState('home');
-    const handler = (e, value) => {
-        e.preventDefault();
-        const getItems = document.querySelectorAll(`#${value} li`).length;
-        if (getItems > 0) {
-            setSize(`${43 * getItems}px`);
-            setItem(value);
-        }
-    };
     return (
         <>
             <div
@@ -35,7 +22,7 @@ function Drawer({ drawer, action }) {
                                     </a>
                                 </div>
                                 <div className="offcanvas-brand text-center mb-40">
-                                    <img src={logo} alt="WrechBoard" />
+                                    <Image width='260' height='57' src={logo} alt="WrechBoard" />
                                 </div>
                                 <div id="menu" className="text-left ">
                                     <ul className="offcanvas_main_menu">
@@ -53,10 +40,10 @@ function Drawer({ drawer, action }) {
                                             id="service"
                                             className="menu-item-has-children active"
                                         >
-                                            <Link to="/service">Service</Link>
+                                            <a href="/service">Service</a>
                                         </li>
                                         <li>
-                                                    <Link to="/about-us">About Us</Link>
+                                                    <a href="/about-us">About Us</a>
                                                 </li>
 
                                         
@@ -66,7 +53,7 @@ function Drawer({ drawer, action }) {
                                             id="contact"
                                             className="menu-item-has-children active"
                                         >
-                                            <Link to="/contact">Contact</Link>
+                                            <a href="/contact">Contact</a>
                                         </li>
                                     </ul>
                                 </div>
diff --git a/app/components/HomeOne.js b/app/components/HomeOne.js
index 7c29622..c667db3 100644
--- a/app/components/HomeOne.js
+++ b/app/components/HomeOne.js
@@ -1,12 +1,10 @@
 import React from 'react';
-import useToggle from '../Hooks/useToggle';
 // import BackToTop from '../BackToTop';
-import Drawer from '../Mobile/Drawer';
+import HomeNav from './navigation/HomeNav'
 import BlogHomeOne from './BlogHomeOne';
 // import FeaturesHomeOne from './FeaturesHomeOne';
 import FooterHomeOne from './FooterHomeOne';
 import HeroHomeOne from './HeroHomeOne';
-// import HomeOneHeader from './HomeOneHeader';
 import ServicesHomeOne from './ServicesHomeOne';
 import TrafficHomeOne from './TrafficHomeOne';
 import TrafficHomeTwo from './TrafficHomeTwo';
@@ -19,12 +17,9 @@ import NextAfterHero from './NextAfterHero';
 
 
 function HomeOne() {
-    // needed  const [drawer, drawerAction] = useToggle(false);
-
     return (
         <>
-          {/* <Drawer drawer={drawer} action={drawerAction.toggle} /> */}
-           <div className='text-center'>THIS IS HOME </div>
+           <HomeNav />
            <HeroHomeOne />
            <AfterHero />
            <NextAfterHero />
diff --git a/app/components/HomeOneHeader.js b/app/components/HomeOneHeader.js
index 9a48c6e..2233091 100644
--- a/app/components/HomeOneHeader.js
+++ b/app/components/HomeOneHeader.js
@@ -1,12 +1,11 @@
+"use client"
 import React, { useEffect } from 'react';
-import logo from '../../assets/images/wrenchboard-logo-text.png';
-import StickyMenu from '../../lib/StickyMenu';
-import Navigation from '../Navigation';
-import getConfig from './../../Config/config'
-import { Link } from 'react-router-dom';
+import logo from '../assets/images/wrenchboard-logo-text.png';
+import StickyMenu from '../lib/StickyMenu';
+import Navigation from './navigation/Navigation';
+import Image from 'next/image';
 
 function HomeOneHeader({ action, showLogoOnly = false }) {
-  var site = getConfig()[0];
   useEffect(() => {
     StickyMenu();
   }, []);
@@ -17,9 +16,9 @@ function HomeOneHeader({ action, showLogoOnly = false }) {
           <div className="row align-items-center">
             <div className="col-lg-2 col-md-4 col-sm-5 col-6 order-1 order-sm-1">
               <div className="appie-logo-box">
-                <Link to="/">
-                  <img src={logo} alt="WrenchBoard" loading='eager' width="175px" height="38px" />
-                </Link>
+                <a href="/">
+                  <Image src={logo} alt="WrenchBoard" loading='eager' width="175" height="38" />
+                </a>
               </div>
             </div>
 
diff --git a/app/components/navigation/HomeNav.js b/app/components/navigation/HomeNav.js
new file mode 100644
index 0000000..44a64d2
--- /dev/null
+++ b/app/components/navigation/HomeNav.js
@@ -0,0 +1,15 @@
+"use client"
+import React from 'react'
+import useToggle from '../../Hooks/useToggle'
+import HomeOneHeader from '../HomeOneHeader'
+import Drawer from '../../Mobile/Drawer'
+
+export default function HomeNav() {
+    const [drawer, drawerAction] = useToggle(false);
+  return (
+    <>
+        <Drawer drawer={drawer} action={drawerAction.toggle} />
+        <HomeOneHeader action={drawerAction.toggle} />
+    </>
+  )
+}
diff --git a/app/components/navigation/Navigation.js b/app/components/navigation/Navigation.js
new file mode 100644
index 0000000..299ac00
--- /dev/null
+++ b/app/components/navigation/Navigation.js
@@ -0,0 +1,34 @@
+import React from 'react';
+
+function Navigation() {
+    return (
+        <>
+            <ul>
+                <li>
+                    <a href="/">Home</a>
+                </li>
+                <li>
+                    <a href="/about-us">About</a>
+                </li>
+                {/* <li>
+                    <a href="#">
+                        Resources <i className="fal fa-angle-down" />
+                    </a>
+                    <ul className="sub-menu">
+                        <li>
+                            <Link to="/about-us">About</Link>
+                        </li>
+                        <li>
+                            <Link to="/blog">Blog</Link>
+                        </li>
+                        <li>
+                            <Link to="/faq">FAQs</Link>
+                        </li>
+                    </ul>
+                </li> */}
+            </ul>
+        </>
+    );
+}
+
+export default Navigation;