diff --git a/src/App.css b/src/App.css
index 5ce1d6b..8fbf717 100644
--- a/src/App.css
+++ b/src/App.css
@@ -6,7 +6,7 @@
 
 .navbarStyle {
   padding: .75rem 1.5rem !important;
-  background-color: white !important;
+  background-color: var(--color-bluespruce) !important;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }
 
diff --git a/src/components/PageLayout.jsx b/src/components/PageLayout.jsx
index 354cdf0..f09174e 100644
--- a/src/components/PageLayout.jsx
+++ b/src/components/PageLayout.jsx
@@ -20,7 +20,7 @@ export const PageLayout = (props) => {
 
     return (
         <>
-            <Navbar style={{ color: 'var(--color-bluespruce)' }} className="navbarStyle mb-4 sticky-top">
+            <Navbar className="navbarStyle mb-4 sticky-top">
                 <Container>
                     <a className="navbar-brand" href="/" style={{ color: 'var(--color-energy)', fontWeight: 600 }}>
                         Relai Suggestions