diff --git a/web/e.cash/components/navbar/index.js b/web/e.cash/components/navbar/index.js
index 6b4071fd0..da54d628e 100644
--- a/web/e.cash/components/navbar/index.js
+++ b/web/e.cash/components/navbar/index.js
@@ -1,175 +1,193 @@
 import Link from 'next/link';
 import Image from 'next/image';
 import { useEffect, useState } from 'react';
 import { navitems } from '../../data/navitems';
 import { NavbarOuter, NavbarCtn } from './styles';
 
 export default function Navbar({ announcementbar }) {
     const [priceLinkText, setPriceLinkText] = useState('Buy XEC');
     const [mobileMenu, setMobileMenu] = useState(false);
     const [selectedDropDownMenu, setSelectedDropDownMenu] = useState(-1);
     const [windowWidth, setWindowWidth] = useState('');
+    const [windowHeight, setWindowHeight] = useState(0);
+    const [navBackground, setNavBackground] = useState(false);
 
     const handleResize = () => {
         setWindowWidth(window.innerWidth);
     };
 
+    const handleScroll = () => {
+        setWindowHeight(window.scrollY);
+    };
+
     const getPrice = () => {
         const api =
             'https://api.coingecko.com/api/v3/simple/price?ids=ecash&vs_currencies=usd';
         fetch(api)
             .then(response => response.json())
             .then(data =>
                 setPriceLinkText('1 XEC = $' + data.ecash.usd.toFixed(6)),
             )
             .catch(err => console.log(err));
     };
 
     useEffect(() => {
         // set the window width so logic for mobile or desktop menus is applied correctly
         setWindowWidth(window.innerWidth);
-        // add event listeners for resize so we can update the screen width
+        // add event listener for resize so we can update the screen width
         window.addEventListener('resize', handleResize);
+        // add event listerner for scroll so we can change the nav background on scroll
+        window.addEventListener('scroll', handleScroll);
         // get XEC price
         getPrice();
-        // remove the event listener after mount to avoid memory leak
+        // remove the event listeners after mount to avoid memory leak
         return () => {
             window.removeEventListener('resize', handleResize);
+            window.removeEventListener('scroll', handleScroll);
         };
     }, []);
 
+    useEffect(() => {
+        // change the navBackground state based when windowHeight changes
+        if (windowHeight >= 100) {
+            setNavBackground(true);
+        } else {
+            setNavBackground(false);
+        }
+    }, [windowHeight]);
+
     return (
-        <NavbarOuter>
+        <NavbarOuter navBackground={navBackground}>
             {announcementbar && (
                 <Link
                     href={announcementbar.link}
                     className="announcementbar_ctn"
                     target="_blank"
                     rel="noreferrer"
                 >
                     {announcementbar.text}
                 </Link>
             )}
-            <NavbarCtn>
+            <NavbarCtn navBackground={navBackground}>
                 <div className="navbar">
                     <Link href="/" className="nav_logo">
                         <Image
                             src="/images/ecash-logo.svg"
                             alt="ecash logo"
                             fill
                         />
                     </Link>
                     <nav
                         role="navigation"
                         className="navbar_links_ctn"
                         style={{ left: mobileMenu ? '0' : '-400px' }}
                     >
                         {navitems.map((navitem, index) => (
                             <div className="nav_outer" key={navitem.nav_item}>
                                 {navitem.link ? (
                                     <Link
                                         className="nav_item"
                                         href={navitem.link}
                                     >
                                         {navitem.nav_item}
                                         <div className="majabar" />
                                     </Link>
                                 ) : (
                                     <>
                                         <div
                                             className="nav_item"
                                             onClick={
                                                 windowWidth < 920
                                                     ? () =>
                                                           setSelectedDropDownMenu(
                                                               selectedDropDownMenu ===
                                                                   index
                                                                   ? -1
                                                                   : index,
                                                           )
                                                     : null
                                             }
                                         >
                                             {navitem.nav_item}
                                         </div>
                                         <div
                                             className="nav_dropdown_ctn"
                                             style={
                                                 selectedDropDownMenu ===
                                                     index && windowWidth < 920
                                                     ? { display: 'flex' }
                                                     : null
                                             }
                                         >
                                             {navitem.dropdown_items.map(
                                                 dropdownitem => (
                                                     <div
                                                         key={dropdownitem.title}
                                                     >
                                                         <Link
                                                             className="dropdown_nav_item"
                                                             href={
                                                                 dropdownitem.link
                                                             }
                                                             target={
                                                                 dropdownitem.link.substring(
                                                                     0,
                                                                     8,
                                                                 ) === 'https://'
                                                                     ? '_blank'
                                                                     : null
                                                             }
                                                             rel={
                                                                 dropdownitem.link.substring(
                                                                     0,
                                                                     8,
                                                                 ) === 'https://'
                                                                     ? 'noreferrer'
                                                                     : null
                                                             }
                                                         >
                                                             <div className="dropdown_icon_ctn">
                                                                 <Image
                                                                     src={
                                                                         dropdownitem.icon
                                                                     }
                                                                     alt={
                                                                         dropdownitem.title
                                                                     }
                                                                     fill
                                                                 />
                                                             </div>
                                                             {dropdownitem.title}
                                                         </Link>
                                                     </div>
                                                 ),
                                             )}
                                         </div>
                                     </>
                                 )}
                             </div>
                         ))}
                     </nav>
                     <Link href="/" className="pricelink_ctn">
                         <div className="righttop"></div>
                         <div className="rightdown"></div>
                         <div className="leftdown"></div>
                         <div className="lefttop"></div>
                         <div>{priceLinkText}</div>
                     </Link>
                     <div className="menubtn_ctn_outer">
                         <input
                             id="menu__toggle"
                             className="menubtn_ctn"
                             type="checkbox"
                             onClick={() => setMobileMenu(!mobileMenu)}
                         />
                         <label className="menu_btn" htmlFor="menu__toggle">
                             <span></span>
                         </label>
                     </div>
                 </div>
             </NavbarCtn>
         </NavbarOuter>
     );
 }
diff --git a/web/e.cash/components/navbar/styles.js b/web/e.cash/components/navbar/styles.js
index 2ba401091..94ca4f121 100644
--- a/web/e.cash/components/navbar/styles.js
+++ b/web/e.cash/components/navbar/styles.js
@@ -1,361 +1,366 @@
 import styled from 'styled-components';
 
 export const NavbarOuter = styled.div`
     position: fixed;
     top: 0;
     width: 100%;
     z-index: 9999;
 
     .announcementbar_ctn {
         width: 100%;
         background-color: ${props => props.theme.colors.black};
         padding: 0px 24px;
         text-align: center;
         color: ${props => props.theme.colors.contrast};
         font-weight: 600;
         letter-spacing: 1px;
         text-transform: uppercase;
         font-size: 14px;
         height: 34px;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: all 200ms ease-in-out;
+        margin-top: ${props => (props.navBackground ? '-34px' : '0')};
         &:hover {
             background-color: ${props => props.theme.colors.accent};
             color: ${props => props.theme.colors.contrast};
         }
     }
 `;
 
 export const NavbarCtn = styled.div`
     width: 100%;
-    background-color: rgba(0, 0, 0, 0);
+    background-color: ${props =>
+        props.navBackground
+            ? props.theme.colors.navbarBackground
+            : 'transparent'};
     position: relative;
     padding: 0 24px;
 
     .navbar {
         width: 100%;
         max-width: 1400px;
         margin: auto;
         position: relative;
         display: flex;
         justify-content: space-between;
         align-items: center;
         transition: all 200ms ease-in-out;
     }
 
     .nav_logo {
         width: 110px;
         height: 33px;
         position: relative;
         ${props => props.theme.filters.grayscale};
     }
 
     .navbar_links_ctn {
         display: flex;
         align-items: center;
     }
 
     .navbar_links_ctn .nav_item:hover + .nav_dropdown_ctn,
     .nav_dropdown_ctn:hover {
         display: flex;
     }
 
     .navbar_links_ctn .nav_item:hover .majabar {
         height: 2px;
         background-color: ${props => props.theme.colors.accent};
     }
 
     .nav_outer {
         position: relative;
         display: flex;
 
         .nav_item {
             color: ${props => props.theme.colors.contrast};
             font-size: 15px;
             font-weight: 500;
             letter-spacing: 1px;
             position: relative;
-            padding: 36px 20px;
             transition: all 200ms ease-in-out;
             cursor: pointer;
+            padding: ${props =>
+                props.navBackground ? '28px 20px' : '36px 20px'};
         }
     }
 
     .nav_dropdown_ctn {
         position: absolute;
         flex-direction: column;
-        top: 90px;
+        top: ${props => (props.navBackground ? '80px' : '90px')};
         left: 0;
         width: 300px;
         z-index: 99;
         transition: all ease-in-out 200ms;
         display: none;
     }
 
     .navbar_outer_scroll .nav_dropdown_ctn {
         top: 80px;
     }
 
     .dropdown_nav_item {
         background-color: ${props => props.theme.colors.contrast};
         width: 100%;
         padding: 25px 20px;
         display: flex;
         align-items: center;
         border-bottom: 1px solid rgba(0, 0, 0, 0.13);
         color: ${props => props.theme.colors.darkBackground};
         line-height: 1;
         font-weight: 500;
         font-size: 14px;
         transition: all ease-in-out 200ms;
     }
 
     .dropdown_nav_item:last-child {
         border-bottom: none;
     }
 
     .dropdown_icon_ctn {
         width: 35px;
         height: 35px;
         position: relative;
         margin-right: 10px;
     }
 
     .dropdown_nav_item img {
         object-fit: contain;
         ${props => props.theme.filters.grayscale};
     }
 
     .dropdown_nav_item:hover {
         padding-left: 30px;
         background-color: #f0f0f0;
     }
 
     .navbar_links_ctn .nav_item:hover + .nav_dropdown_ctn,
     .nav_dropdown_ctn:hover {
         display: flex;
     }
 
     .majabar {
         position: absolute;
         left: 0%;
         top: auto;
         right: 0%;
         bottom: 0%;
         width: 100%;
         height: 0px;
         background-color: ${props => props.theme.colors.accent}
         transition: all ease-in-out 300ms;
     }
 
     .navbar_links_ctn .nav_item:hover .majabar {
         height: 2px;
     }
 
     .pricelink_ctn {
         position: relative;
         padding: 16px 23px;
         background-color: rgba(0, 0, 0, 0.5);
         transition: all 300ms ease-in-out;
         color: ${props => props.theme.colors.contrast};
         font-weight: 400;
         text-decoration: none;
         font-size: 14px;
     }
 
     .pricelink_ctn:hover {
         box-shadow: inset 0 0 13px 2px hsla(0, 0%, 100%, 0.73),
             inset 0 0 0 1px #fff;
     }
 
     .lefttop {
         position: absolute;
         left: 0%;
         top: 0%;
         right: auto;
         bottom: auto;
         width: 10px;
         height: 10px;
         border-top: 1px solid #fff;
         border-left: 1px solid #fff;
     }
 
     .leftdown {
         position: absolute;
         left: 0%;
         top: auto;
         right: auto;
         bottom: 0%;
         width: 10px;
         height: 10px;
         border-bottom: 1px solid #fff;
         border-left: 1px solid #fff;
     }
 
     .righttop {
         position: absolute;
         left: auto;
         top: 0%;
         right: 0%;
         bottom: auto;
         width: 10px;
         height: 10px;
         border-top: 1px solid #fff;
         border-right: 1px solid #fff;
     }
 
     .rightdown {
         position: absolute;
         left: auto;
         top: auto;
         right: 0%;
         bottom: 0%;
         width: 10px;
         height: 10px;
         border-right: 1px solid #fff;
         border-bottom: 1px solid #fff;
     }
 
     .menubtn_ctn_outer {
         display: none;
     }
 
     ${props => props.theme.breakpoint.medium} {
         padding: 15px 20px;
 
         .announcementbar_ctn {
             padding: 0px 10px;
             font-size: 12px;
             height: 30px;
         }
 
         .navbar {
             position: unset;
         }
 
         .navbar_links_ctn {
             background-color: ${props => props.theme.colors.darkBackground};
             position: absolute;
             left: 0;
             top: 0px;
             flex-direction: column;
             width: calc(100% - 60px);
             max-width: 400px;
             min-height: 100vh;
             align-items: flex-start;
             transition: all ease-in-out 200ms;
         }
 
         .nav_outer {
             width: 100%;
             flex-direction: column;
             background-color: ${props => props.theme.colors.darkBackground};
         }
 
         .nav_outer .nav_item {
             font-size: 15px;
             padding: 18px 0 18px 40px;
             text-align: left;
             transition: all 200ms ease-in-out;
             width: 100%;
             border-bottom: 1px solid rgba(255, 255, 255, 0.13);
         }
 
         .nav_dropdown_ctn {
             position: unset;
             width: 100%;
         }
 
         .navbar_links_ctn .nav_item:hover + .nav_dropdown_ctn,
         .nav_dropdown_ctn:hover {
             display: none;
         }
 
         .dropdown_nav_item {
             padding: 15px 0 15px 40px;
             width: 100%;
         }
 
         .dropdown_nav_item:hover {
             padding-left: 45px;
         }
 
         .dropdown_icon_ctn {
             width: 25px;
             height: 25px;
             margin-right: 8px;
         }
 
         .pricelink_ctn {
             display: none;
         }
 
         /****************************************  HAMBURGER  ****************************************/
 
         .menubtn_ctn_outer {
             position: relative;
             height: 100%;
             width: 40px;
             display: block;
         }
 
         .menubtn_ctn {
             opacity: 0;
             top: 0px;
             right: 0px;
             width: 40px !important;
 
             margin: 0 !important;
             border: none !important;
             background-color: transparent;
             padding: 0 !important;
         }
         .menubtn_ctn:checked + .menu_btn > span {
             transform: rotate(45deg);
         }
         .menubtn_ctn:checked + .menu_btn > span::before {
             top: 0;
             transform: rotate(0deg);
             width: 100%;
         }
         .menubtn_ctn:checked + .menu_btn > span::after {
             top: 0;
             transform: rotate(90deg);
             width: 100%;
         }
 
         .menu_btn {
             position: absolute;
             top: -5px;
             right: 0px;
             width: 30px;
             height: 40px;
             cursor: pointer;
             z-index: 99999;
         }
         .menu_btn > span,
         .menu_btn > span::before,
         .menu_btn > span::after {
             display: block;
             position: absolute;
             width: 100%;
             height: 3px;
             background-color: ${props => props.theme.colors.contrast};
             transition-duration: 0.25s;
             top: 19px;
             border-radius: 4px;
         }
         .menu_btn > span::before {
             content: '';
             top: -8px;
             width: 80%;
         }
         .menu_btn > span::after {
             content: '';
             top: 8px;
             width: 60%;
         }
     }
 `;
diff --git a/web/e.cash/styles/theme.js b/web/e.cash/styles/theme.js
index f010f337b..e38a082df 100644
--- a/web/e.cash/styles/theme.js
+++ b/web/e.cash/styles/theme.js
@@ -1,65 +1,67 @@
 export const ecash = {
     colors: {
         primary: '#0074c2',
         primaryLight: '#00abe7',
         accent: '#ff21d0',
         darkBackground: '#050d27',
         contrast: '#ffffff',
         black: '#000',
         darkBlue: '#001137',
         videocover:
             'linear-gradient(9deg,#001137 18%,transparent 91%),linear-gradient(180deg,rgba(0, 0, 0, 0.46),rgba(0, 0, 0, 0.46))',
+        navbarBackground: 'rgba(0, 0, 0, 0.65)',
     },
     roadmap: {
         sectionHeader: '#00abe7',
         complete: '#ffffff',
         underway: '#ff21d0',
         planning: '#00abe7',
         whiteIcon:
             'invert(100%) sepia(1%) saturate(0%) hue-rotate(56deg) brightness(106%) contrast(100%)',
         primaryIcon:
             'invert(59%) sepia(96%) saturate(2939%) hue-rotate(159deg) brightness(94%) contrast(101%)',
         accentIcon:
             'invert(52%) sepia(100%) saturate(6184%) hue-rotate(295deg) brightness(100%) contrast(109%)',
     },
     filters: {
         grayscale: null,
         videospeed: 1,
     },
     breakpoint: {
         medium: '@media (max-width: 920px)',
     },
 };
 
 export const stealth = {
     colors: {
         primary: '#000',
         primaryLight: '#a0a0a0',
         accent: '#8a8a8a',
         darkBackground: '#232324',
         contrast: '#ffffff',
         black: '#000',
         darkBlue: '#181818',
         videocover:
             'linear-gradient(9deg,#181818 18%,transparent 91%),linear-gradient(180deg,rgba(0, 0, 0, 0.46),rgba(0, 0, 0, 0.46))',
+        navbarBackground: 'rgba(0, 0, 0, 0.65)',
     },
     roadmap: {
         sectionHeader: '#ffffff',
         complete: '#01ff85',
         underway: '#e9fe01',
         planning: '#ffffff',
         whiteIcon:
             'invert(82%) sepia(11%) saturate(7038%) hue-rotate(89deg) brightness(104%) contrast(100%)',
         primaryIcon:
             'invert(100%) sepia(1%) saturate(0%) hue-rotate(56deg) brightness(106%) contrast(100%)',
         accentIcon:
             'invert(82%) sepia(98%) saturate(2292%) hue-rotate(8deg) brightness(102%) contrast(104%)',
     },
     filters: {
         grayscale: 'filter: grayscale(100%);',
         videospeed: 0.4,
     },
     breakpoint: {
         medium: '@media (max-width: 920px)',
     },
 };