diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 4a525c8..9a388ff 100755
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -6436,18 +6436,20 @@ blockquote cite {
 }
 .appie-about-page-content p {
   color: #fff;
-  padding-top: 15px;
+  padding-top: 18px;
+  line-height: 28px;
   opacity: 0.7;
 }
 .appie-about-page-content a {
-  color: #fff;
+  color: red;
   border: 2px solid #fff;
   border-radius: 10px;
-  line-height: 40px;
+  padding: 0px 10px;
+  font-weight: 500;
+  /* line-height: 40px;
   padding: 0 30px;
   font-size: 14px;
-  font-weight: 500;
-  margin-top: 43px;
+  margin-top: 43px; */
 }
 .appie-about-page-content a:hover {
   background: #fff;
diff --git a/src/components/AboutUs/HeroAbout.js b/src/components/AboutUs/HeroAbout.js
index 65c1765..88583b4 100644
--- a/src/components/AboutUs/HeroAbout.js
+++ b/src/components/AboutUs/HeroAbout.js
@@ -17,7 +17,8 @@ function HeroAbout() {
             <section className="appie-about-page-area">
                 <div className="container">
                     <div className="row">
-                        <div className="col-lg-8">
+                        {/* col-lg-8 */}
+                        <div className="col-12">
                             <div className="appie-about-page-content">
                                 <h3 className="title">
                                     Online Marketplace Platform to Get Paid.
@@ -25,7 +26,7 @@ function HeroAbout() {
                                 <p>
                                 WrenchBoard is the marketplace that connects independent talent with businesses that require their skill set and get paid. 
                                 We serve everyone from one-person startups to a powerful, trust-driven platform that facilitates businesses and freelancers to work concurrently in unique patterns that unlock their potential. 
-                                Our platform provides a range of skills in categories including consulting, finance & accounting, website & app development, creative & design, customer support and operations. Learn more at www.wrenchBoard.com
+                                Our platform provides a range of skills in categories including consulting, finance & accounting, website & app development, creative & design, customer support and operations. Learn more at <a href={process.env.REACT_APP_DASH_URL}>www.WrenchBoard.com</a>
                                 </p>
                                
                             </div>
diff --git a/src/components/AboutUs/ServicesAbout.js b/src/components/AboutUs/ServicesAbout.js
index 7f7a1d6..8954c70 100644
--- a/src/components/AboutUs/ServicesAbout.js
+++ b/src/components/AboutUs/ServicesAbout.js
@@ -17,7 +17,7 @@ function ServicesAbout() {
             <section className="appie-services-2-area pt-90 pb-55" id="service">
                 <div className="container">
                     <div className="row align-items-end">
-                        <div className="col-12 col-md-8">
+                        <div className="col-12 col-lg-8">
                             <div className="appie-section-title">
                                 <h3 className="appie-title">We’re driven by our values</h3>
                                 <p>The app provides design and digital marketing. </p>
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={[