diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 47ecb5e..7332549 100755
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -149,13 +149,14 @@ p {
   color: #fff;
   cursor: pointer;
   z-index: 5;
-  -webkit-transition: all 0.4s ease-out 0s;
+  /* -webkit-transition: all 0.4s ease-out 0s;
   -moz-transition: all 0.4s ease-out 0s;
   -ms-transition: all 0.4s ease-out 0s;
   -o-transition: all 0.4s ease-out 0s;
-  transition: all 0.4s ease-out 0s;
+  transition: all 0.4s ease-out 0s; */
   /* background-color: #4687ba; */
   /* border: 1px solid #4687ba; */
+  transition: all linear 0.3s;
   border: 1px solid #89216b;
   background-image: linear-gradient(90deg, #89216b 0%, #da4453 100%);
 }
@@ -1853,26 +1854,26 @@ p {
   line-height: 40px;
   padding: 0 23px;
   border-radius: 6px;
-  border: 2px solid #0e1133;
+  border: 2px solid #89216b;
 }
 .appie-hero-content ul li a i {
   padding-right: 6px;
 }
-.appie-hero-content ul li a:hover {
+/* .appie-hero-content ul li a:hover {
   background: transparent;
   color: #0e1133;
-}
-.appie-hero-content ul li a.item-2 {
+} */
+/* .appie-hero-content ul li a.item-2 {
   background: transparent;
   color: #0e1133;
-}
-.appie-hero-content ul li a.item-2:hover {
+} */
+/* .appie-hero-content ul li a.item-2:hover {
   background: #0e1133;
   color: #fff;
-}
-.appie-hero-content.appie-hero-content-4 {
+} */
+/* .appie-hero-content.appie-hero-content-4 {
   padding-right: 40px;
-}
+} */
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
   .appie-hero-content.appie-hero-content-4 {
     padding-right: 0;
@@ -1982,14 +1983,18 @@ p {
   border-color: #fff;
 }
 .appie-hero-content.appie-hero-content-6 ul li a.item-2 {
-  /* background: #fff; */
-  background-color: rgb(219, 237, 245);
-  border-color: #fff;
+  /* background-color: rgb(219, 237, 245);
+  border-color: #fff; */
+  color: #fff;
+  border-color:#89216b;
+  background-image: linear-gradient(90deg, #89216b 0%, #da4453 100%);
 }
 .appie-hero-content.appie-hero-content-6 ul li a.item-2:hover {
-  background: #9b2cfa;
+  /* background: #9b2cfa;
   border-color: #9b2cfa;
-  color: #fff;
+  color: #fff; */
+  background-image: linear-gradient(90deg, #000 0%, #000 100%);
+  border-color:#000;
 }
 .appie-hero-content.appie-hero-content-6.appie-hero-content-7 .appie-title {
   color: #fff;
@@ -6066,8 +6071,7 @@ blockquote cite {
   }
 }
 .footer-copyright .apps-download-btn ul li a {
-  background: #fff;
-  color: #0e1133;
+  color: #fff;
   line-height: 40px;
   padding: 0 23px;
   border-radius: 6px;
@@ -6076,19 +6080,13 @@ blockquote cite {
 .footer-copyright .apps-download-btn ul li a i {
   padding-right: 6px;
 }
+.footer-copyright .apps-download-btn ul li a {
+  border-color: #89216b;
+  background-image: linear-gradient(90deg, #89216b 0%, #da4453 100%);
+}
 .footer-copyright .apps-download-btn ul li a:hover {
-  background: transparent;
-  color: #0e1133;
-  border-color: #e7eaef;
-}
-.footer-copyright .apps-download-btn ul li a.item-2 {
-  background: transparent;
-  color: #0e1133;
-  border-color: #e7eaef;
-}
-.footer-copyright .apps-download-btn ul li a.item-2:hover {
-  background: #fff;
-  color: #0e1133;
+  background-image: linear-gradient(90deg, #000 0%, #000 100%);
+  border-color: #000;
 }
 
 .appie-error-area {
diff --git a/src/components/AboutUs/HeaderAbout.js b/src/components/AboutUs/HeaderAbout.js
index e5dd0a3..4b153be 100644
--- a/src/components/AboutUs/HeaderAbout.js
+++ b/src/components/AboutUs/HeaderAbout.js
@@ -3,6 +3,7 @@ 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';
 
 function HeaderAbout({ action }) {
     useEffect(() => {
@@ -18,9 +19,9 @@ function HeaderAbout({ action }) {
                         <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="/">
+                                    <Link to="/">
                                         <img src={logo} alt="" width="175px" height="38px" loading='eager' />
-                                    </a>
+                                    </Link>
                                 </div>
                             </div>
                             <div className="col-lg-6 col-md-1 col-sm-1 order-3 order-sm-2">
diff --git a/src/components/HomeOne/FooterHomeOne.js b/src/components/HomeOne/FooterHomeOne.js
index 3964d52..76cb271 100644
--- a/src/components/HomeOne/FooterHomeOne.js
+++ b/src/components/HomeOne/FooterHomeOne.js
@@ -22,13 +22,13 @@ function FooterHomeOne({ className }) {
                                 <p>
                                     {`It is simple. You can set goals, task, or anything that needs to be done and reward accomplishment. WrenchBoard is the platform to connect opportunities. `}
                                 </p>
-                                <a href="/service">
+                                <Link to="/service">
                                     Read More <i className="fal fa-arrow-right" />
-                                </a>
+                                </Link>
                                 <div className="social mt-30">
                                     <ul>
                                         <li>
-                                            <a href={site.facebook_link}>
+                                            <a to={site.facebook_link}>
                                                 <i className="fab fa-facebook-f" />
                                             </a>
                                         </li>
@@ -53,7 +53,7 @@ function FooterHomeOne({ className }) {
                                         <Link to="/service">Our Services</Link>
                                     </li>
                                     <li>
-                                        <a href="/use-cases">Use Cases</a>
+                                        <Link to="/use-cases">Use Cases</Link>
                                     </li>
                                     <li>
                                         <a target='_blank' href={process.env.REACT_APP_AGENT_LINK}>Agent</a>
@@ -73,16 +73,16 @@ function FooterHomeOne({ className }) {
                                         <Link to="/contact">Contact</Link>
                                     </li>
                                     <li>
-                                        <a href="/faq">Faqs</a>
+                                        <Link to="/faq">Faqs</Link>
                                     </li>
                                     <li>
                                         <a href="https://blog.wrenchboard.com/resources/">Resources</a>
                                     </li>
                                     <li>
-                                        <a href="/privacy">Privacy Policy</a>
+                                        <Link to="/privacy">Privacy Policy</Link>
                                     </li>
                                     <li>
-                                        <a href="/terms">Terms of use</a>
+                                        <Link to="/terms">Terms of use</Link>
                                     </li>
                                 </ul>
                             </div>
@@ -121,7 +121,7 @@ function FooterHomeOne({ className }) {
                                             </a>
                                         </li>
                                         <li>
-                                            <a className="item-2" href={process.env.REACT_APP_ANDROID_APP} target="_blank">
+                                            <a href={process.env.REACT_APP_ANDROID_APP} target="_blank">
                                                 <i className="fab fa-google-play" /> Download for
                                                 Android
                                             </a>
diff --git a/src/components/HomeOne/HomeOneHeader.js b/src/components/HomeOne/HomeOneHeader.js
index 90ae698..9a48c6e 100644
--- a/src/components/HomeOne/HomeOneHeader.js
+++ b/src/components/HomeOne/HomeOneHeader.js
@@ -3,6 +3,7 @@ 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';
 
 function HomeOneHeader({ action, showLogoOnly = false }) {
   var site = getConfig()[0];
@@ -16,9 +17,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">
-                <a href="/">
+                <Link to="/">
                   <img src={logo} alt="WrenchBoard" loading='eager' width="175px" height="38px" />
-                </a>
+                </Link>
               </div>
             </div>
 
diff --git a/src/components/Service/ServiceSideMenu.js b/src/components/Service/ServiceSideMenu.js
index 6e88f46..1467af7 100644
--- a/src/components/Service/ServiceSideMenu.js
+++ b/src/components/Service/ServiceSideMenu.js
@@ -5,6 +5,7 @@ import HomeIcon from '../../assets/images/icon/home-icon.ico'
 import UseCaseIcon from '../../assets/images/icon/use-case.ico'
 import PrivacyIcon from '../../assets/images/icon/privacy-policy.ico'
 import TermsIcon from '../../assets/images/icon/term-and-conditions.ico'
+import { Link } from 'react-router-dom';
 
 function ServiceSideMenu() {
     var site = getConfig()[0];
@@ -13,43 +14,43 @@ function ServiceSideMenu() {
             <div className="service-details-sidebar mr-50">
 
                 <div className="service-download-widget">
-                    <a href="/">
+                    <Link to="/">
                         {/* <i className="fal fa-download"></i> */}
                         <img src={HomeIcon} alt='sidenav-icon' />
                         <span>Home</span>
-                    </a>
+                    </Link>
                 </div>
 
                 <div className="service-download-widget">
-                    <a href="/about-us">
+                    <Link to="/about-us">
                         {/* <i className="fal fa-download"></i> */}
                         <img src={AboutIcon} alt='sidenav-icon' />
                         <span>About us</span>
-                    </a>
+                    </Link>
                 </div>
                 <div className="service-download-widget">
-                    <a href="/use-cases">
+                    <Link to="/use-cases">
                         {/* <i className="fal fa-file-pdf"></i> */}
                         <img src={UseCaseIcon} alt='sidenav-icon' />
                         <span>Use Cases</span>
-                    </a>
+                    </Link>
                 </div>
 
 
 
                 <div className="service-download-widget">
-                    <a href="/privacy">
+                    <Link to="/privacy">
                         {/* <i className="fal fa-download"></i> */}
                         <img src={PrivacyIcon} alt='sidenav-icon' />
                         <span>Privacy Policy</span>
-                    </a>
+                    </Link>
                 </div>
                 <div className="service-download-widget">
-                    <a href="/terms">
+                    <Link to="/terms">
                         {/* <i className="fal fa-file-pdf"></i> */}
                         <img src={TermsIcon} alt='sidenav-icon' />
                         <span>Terms of use</span>
-                    </a>
+                    </Link>
                 </div>
 
                 <div className="service-category-widget">