diff --git a/src/components/AboutUs/index.js b/src/components/AboutUs/index.js
index 856d2a9..6389a13 100644
--- a/src/components/AboutUs/index.js
+++ b/src/components/AboutUs/index.js
@@ -9,13 +9,15 @@ import HeaderAbout from './HeaderAbout';
 import HeroAbout from './HeroAbout';
 import ServicesAbout from './ServicesAbout';
 import TeamAbout from './TeamAbout';
+import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
 
 function AboutUs() {
     const [drawer, drawerAction] = useToggle(false);
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
-            <HeaderAbout drawer={drawer} action={drawerAction.toggle} />
+            <StickyHeaderNav action={drawerAction.toggle} />
+            {/* <HeaderAbout drawer={drawer} action={drawerAction.toggle} /> */}
             <HeroAbout />
             <ServicesAbout />
             {/* <TeamAbout />*/}
diff --git a/src/components/Contact/index.js b/src/components/Contact/index.js
index 2e60f4b..92f029c 100644
--- a/src/components/Contact/index.js
+++ b/src/components/Contact/index.js
@@ -6,13 +6,15 @@ import Drawer from '../Mobile/Drawer';
 import HeaderNews from '../News/HeaderNews';
 import HeroNews from '../News/HeroNews';
 import Forms from './Forms';
+import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
 
 function Contact() {
     const [drawer, drawerAction] = useToggle(false);
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
-            <HeaderNews drawer={drawer} action={drawerAction.toggle} />
+            <StickyHeaderNav action={drawerAction.toggle} />
+            {/* <HeaderNews drawer={drawer} action={drawerAction.toggle} /> */}
             <HeroNews
                 title="Contact us"
                 breadcrumb={[
diff --git a/src/components/FAQ/Index.js b/src/components/FAQ/Index.js
index d03c2ce..e331655 100644
--- a/src/components/FAQ/Index.js
+++ b/src/components/FAQ/Index.js
@@ -7,6 +7,7 @@ import StickyMenu from '../../lib/StickyMenu';
 import FAQService from '../Service/FAQServices';
 import HeroNews from '../News/HeroNews';
 import HeaderNews from '../News/HeaderNews';
+import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
 
 
 function FAQ() {
@@ -17,7 +18,8 @@ function FAQ() {
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
-            <HeaderNews action={drawerAction.toggle} />
+            <StickyHeaderNav action={drawerAction.toggle} />
+            {/* <HeaderNews action={drawerAction.toggle} /> */}
             <HeroNews
                 title="Frequently asked questions"
                 breadcrumb={[
diff --git a/src/components/HomeOne/index.js b/src/components/HomeOne/index.js
index 7314e90..4a11916 100644
--- a/src/components/HomeOne/index.js
+++ b/src/components/HomeOne/index.js
@@ -17,6 +17,7 @@ import TestimonialHomeOne from './TestimonialHomeOne';
 import TrafficHomeTwo from './TrafficHomeTwo';
 import WrenchBoardHome from './WrenchBoardHome';
 import RecentJobsOne from './RecentJobsOne';
+import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
 //import BlogData from './../../Services/BlogData';
 
 function HomeOne() {
@@ -26,7 +27,8 @@ function HomeOne() {
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
-            <HomeOneHeader action={drawerAction.toggle} />
+            <StickyHeaderNav action={drawerAction.toggle} />
+            {/* <HomeOneHeader action={drawerAction.toggle} /> */}
             <HeroHomeOne />
             <ServicesHomeOne />
             {/*<RecentJobsOne />*/}
diff --git a/src/components/News/SingleNews.js b/src/components/News/SingleNews.js
index e549053..fe170f2 100644
--- a/src/components/News/SingleNews.js
+++ b/src/components/News/SingleNews.js
@@ -7,13 +7,15 @@ import Blog from './Blog';
 import BlogSideBar from './BlogSideBar';
 import HeaderNews from './HeaderNews';
 import HeroNews from './HeroNews';
+import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
 
 function SingleNews() {
     const [drawer, drawerAction] = useToggle(false);
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
-            <HeaderNews action={drawerAction.toggle} />
+            <StickyHeaderNav action={drawerAction.toggle} />
+            {/* <HeaderNews action={drawerAction.toggle} /> */}
             <HeroNews
                 title="Blog"
                 breadcrumb={[
diff --git a/src/components/News/index.js b/src/components/News/index.js
index b5f2a84..d03841d 100644
--- a/src/components/News/index.js
+++ b/src/components/News/index.js
@@ -7,13 +7,15 @@ import Blogs from './Blogs';
 import BlogSideBar from './BlogSideBar';
 import HeaderNews from './HeaderNews';
 import HeroNews from './HeroNews';
+import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
 
 function News() {
     const [drawer, drawerAction] = useToggle(false);
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
-            <HeaderNews action={drawerAction.toggle} />
+            <StickyHeaderNav action={drawerAction.toggle} />
+            {/* <HeaderNews action={drawerAction.toggle} /> */}
             <HeroNews
                 title="Blogs"
                 breadcrumb={[
diff --git a/src/components/Service/Privacy.js b/src/components/Service/Privacy.js
index 4ad28e1..7175f80 100644
--- a/src/components/Service/Privacy.js
+++ b/src/components/Service/Privacy.js
@@ -9,17 +9,19 @@ import DetailsService from './DetailsService';
 import HeaderService from './HeaderService';
 import HeroService from './HeroService';
 import DetailsPrivacy from './DetailsPrivacy';
+import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
 
 
 function Privacy() {
-    useEffect(() => {
-        StickyMenu();
-    });
+    // useEffect(() => {
+    //     StickyMenu();
+    // });
     const [drawer, drawerAction] = useToggle(false);
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
-            <HeaderService action={drawerAction.toggle} />
+            <StickyHeaderNav action={drawerAction.toggle} />
+            {/* <HeaderService action={drawerAction.toggle} /> */}
             <HeroService title="Privacy Policy" />
             <DetailsPrivacy />
             {/*<ProjectHomeOne />*/}
diff --git a/src/components/Service/Terms.js b/src/components/Service/Terms.js
index ceaac1f..1cc151c 100644
--- a/src/components/Service/Terms.js
+++ b/src/components/Service/Terms.js
@@ -9,16 +9,18 @@ import DetailsService from './DetailsService';
 import HeaderService from './HeaderService';
 import HeroService from './HeroService';
 import DetailsTerms from './DetailsTerms';
+import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
 
 function Terms() {
-    useEffect(() => {
-        StickyMenu();
-    });
+    // useEffect(() => {
+    //     StickyMenu();
+    // });
     const [drawer, drawerAction] = useToggle(false);
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
-            <HeaderService action={drawerAction.toggle} />
+            <StickyHeaderNav action={drawerAction.toggle} />
+            {/* <HeaderService action={drawerAction.toggle} /> */}
             <HeroService title="Terms of use" />
             <DetailsTerms />
             {/*<ProjectHomeOne />*/}
diff --git a/src/components/Service/index.js b/src/components/Service/index.js
index 9705664..3c13b70 100644
--- a/src/components/Service/index.js
+++ b/src/components/Service/index.js
@@ -11,16 +11,18 @@ import HeroService from './HeroService';
 import HeroNews from '../News/HeroNews';
 import MissionStatement from "./MissionStatement";
 import ServiceTopart from "./ServiceTopart";
+import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
 
 function Service() {
-    useEffect(() => {
-        StickyMenu();
-    });
+    // useEffect(() => {
+    //     StickyMenu();
+    // });
     const [drawer, drawerAction] = useToggle(false);
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
-            <HeaderService action={drawerAction.toggle} />
+            <StickyHeaderNav action={drawerAction.toggle} />
+            {/* <HeaderService action={drawerAction.toggle} /> */}
             {/* <HeroService title="Our Service to you" /> */}
             <HeroNews
                 title="Services"
diff --git a/src/components/StickyHeader/StickyHeaderNav.js b/src/components/StickyHeader/StickyHeaderNav.js
new file mode 100644
index 0000000..2afcb28
--- /dev/null
+++ b/src/components/StickyHeader/StickyHeaderNav.js
@@ -0,0 +1,51 @@
+import React, { useEffect } from 'react';
+import logo from '../../assets/images/wrenchboard-logo-text.png';
+import StickyMenu from '../../lib/StickyMenu';
+import Navigation from '../Navigation';
+
+
+function StickyHeaderNav({action}) {
+    useEffect(() => {
+        StickyMenu();
+    }, []);
+    return (
+        <header className="appie-header-area appie-sticky">
+            <div className="container">
+                <div className="header-nav-box">
+                    <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">
+                                <a href="/">
+                                    <img src={logo} alt="WrenchBoard" />
+                                </a>
+                            </div>
+                        </div>
+                        <div className="col-lg-6 col-md-1 col-sm-1 order-3 order-sm-2">
+                            <div className="appie-header-main-menu">
+                                <Navigation />
+                            </div>
+                        </div>
+                        <div className="col-lg-4  col-md-7 col-sm-6 col-6 order-2 order-sm-3">
+                            <div className="appie-btn-box text-right">
+                                <a className="login-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
+                                    <i className="fal fa-user" /> Login
+                                </a>
+                                <a className="main-btn ml-30" href={process.env.REACT_APP_DASH_URL_SIGNUP}>
+                                    Get Started
+                                </a>
+                                <div
+                                    onClick={(e) => action(e)}
+                                    className="toggle-btn ml-30 canvas_open d-lg-none d-block"
+                                >
+                                    <i className="fa fa-bars" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </header>
+    );
+}
+
+export default StickyHeaderNav
\ No newline at end of file
diff --git a/src/components/UseCases/index.js b/src/components/UseCases/index.js
index 4d0ed9f..f488a14 100644
--- a/src/components/UseCases/index.js
+++ b/src/components/UseCases/index.js
@@ -7,13 +7,15 @@ import UseCase from './UseCase';
 // import BlogSideBar from './BlogSideBar';
 import HeaderNews from './HeaderNews';
 import HeroNews from './HeroNews';
+import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
 
 function UseCases() {
     const [drawer, drawerAction] = useToggle(false);
     return (
         <>
             <Drawer drawer={drawer} action={drawerAction.toggle} />
-            <HeaderNews action={drawerAction.toggle} />
+            <StickyHeaderNav action={drawerAction.toggle} />
+            {/* <HeaderNews action={drawerAction.toggle} /> */}
             <HeroNews
                 title="Use Cases"
                 breadcrumb={[