diff --git a/package-lock.json b/package-lock.json
index 719c938..da83241 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14667,6 +14667,22 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-3.0.0.tgz",
       "integrity": "sha512-XzgvowFrwDo6TWcpJ/WTiarb9UI6lhA4PMzS7n1joK3sHfBBBOQHUc0U4u57D6DWO9vHv6lVSWx2Q/Ymfyv4hw=="
     },
+    "react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
+    "react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      }
+    },
     "react-hot-loader": {
       "version": "4.13.0",
       "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.13.0.tgz",
@@ -14704,6 +14720,11 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
       "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
     },
+    "react-side-effect": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz",
+      "integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ=="
+    },
     "read": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
diff --git a/package.json b/package.json
index 5517ea2..6052d68 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "npm": "^7.9.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-helmet": "^6.1.0",
     "sass": "^1.32.8",
     "styled-components": "^5.2.1"
   },
diff --git a/src/components/header/header-styles.js b/src/components/header/header-styles.js
index 816aa08..1f25c03 100644
--- a/src/components/header/header-styles.js
+++ b/src/components/header/header-styles.js
@@ -4,15 +4,21 @@ import colors from "../../style/colors"
 
 export const NavContainer = styled.div`
   z-index: 1;
-  background-color: ${colors.gray_image};
   padding-bottom: 32px;
   &.colorChange {
-    background-color: ${colors.gray_CTA};
+    background-color: rgb(0, 0, 0, 0.55);
+    color: ${colors.white900};
+
   }
 
   position: fixed;
   width: 100%;
   transition: 0.5s all ease;
+  color: ${colors.black900};
+
+  &.home-header {
+    color: ${colors.white900};
+  }
 `
 
 export const Logo = styled.div`
@@ -20,6 +26,7 @@ export const Logo = styled.div`
   font-size: 24px;
   padding-top: 32px;
   padding-left: 80px;
+  color: ${colors.black900};
 
   @media (max-width: ${dimensions.maxwidthTablet}px) {
     text-align: center;
@@ -27,6 +34,10 @@ export const Logo = styled.div`
     padding-top: 24px;
     padding-left: 0px;
   }
+
+  &.home-header {
+    color: ${colors.white900};
+  }
 `
 
 export const NavLinks = styled.div`
@@ -34,17 +45,31 @@ export const NavLinks = styled.div`
   right: 80px;
   top: 40px;
   display: flex;
+  color: ${colors.black900};
+
+  &.home-header {
+    a {
+      color: ${colors.white900};
+    }
+  }
 
   @media (max-width: ${dimensions.maxwidthTablet}px) {
     display: none;
   }
 `
 
-export const NavLink = styled.div`
+export const NavLink = styled.a`
   font-weight: bold;
   padding-left: 100px;
   text-decoration: none;
+
+
   color: ${colors.black900};
+
+  &.home-header {
+    color: ${colors.white900};
+  }
+
 `
 
 export const MobileIcon = styled.div`
diff --git a/src/components/header/header.jsx b/src/components/header/header.jsx
index 759811c..a740d58 100644
--- a/src/components/header/header.jsx
+++ b/src/components/header/header.jsx
@@ -10,7 +10,7 @@ import {
 
 import { NavText } from "../../style/type-styles"
 
-export const Header = () => {
+export const Header = ({ home }) => {
   const [open, setOpen] = useState(false)
   const [colorChange, setColorchange] = useState(false)
   const changeNavbarColor = () => {
@@ -22,15 +22,19 @@ export const Header = () => {
   }
   typeof window !== "undefined" &&
     window.addEventListener("scroll", changeNavbarColor)
-
   return (
-    <NavContainer className={colorChange ? "navbar colorChange" : "navbar"}>
-      <Logo>PowerHouse</Logo>
+    <NavContainer
+      className={
+        (colorChange ? "navbar colorChange" : "navbar") ||
+        (home === true ? "home-header" : "")
+      }
+    >
+      <Logo alt="PowerHouse Logo" className={home === true ? "home-header" : ""}>PowerHouse</Logo>
 
       <MobileIcon onClick={() => setOpen(!open)} className={open ? "open" : ""}>
-        <Hamburger />
+        <Hamburger className="hamburger" />
       </MobileIcon>
-      <NavLinks>
+      <NavLinks className={home === true ? "home-header" : ""}>
         <NavLink href="/about">
           <NavText>ABOUT</NavText>
         </NavLink>
@@ -40,7 +44,7 @@ export const Header = () => {
         <NavLink href="/products">
           <NavText>PRODUCTS</NavText>
         </NavLink>
-        <NavLink href="/solutions">
+        <NavLink href="/UseCases">
           <NavText>SOLUTIONS</NavText>
         </NavLink>
       </NavLinks>
diff --git a/src/components/homepage/index-styles.js b/src/components/homepage/index-styles.js
index ba375dc..9a4615d 100644
--- a/src/components/homepage/index-styles.js
+++ b/src/components/homepage/index-styles.js
@@ -8,6 +8,20 @@ import {
 import "../../style/colors"
 import colors from "../../style/colors"
 
+
+export const HeroImage = styled.div`
+position: absolute;
+top: 0;
+z-index: 0;
+img {
+
+  width: 100vw;
+  height: 100vh;
+  object-fit: cover;
+
+}
+`
+
 export const HeroContainer = styled.div`
   height: 100vh;
   background-color: ${colors.gray_image};
@@ -21,6 +35,9 @@ export const HeroContainer = styled.div`
 
 export const HeroTextSection = styled.div`
   padding-top: 275px;
+  z-index: 2;
+  color: ${colors.white900};
+  position: relative;
   padding-left: ${layoutPaddingDesktop};
   @media (max-width: ${dimensions.maxwidthTablet}px) {
     padding-left: ${layoutPaddingMobile};
@@ -34,7 +51,7 @@ export const HeroDescription = styled.div``
 export const HeroCTA = styled.div`
   margin-top: 64px;
   a {
-    background-color: ${colors.gray_CTA};
+    background-color: ${colors.orange900};
     text-transform: uppercase;
     color: ${colors.white900};
     padding-left: 48px;
diff --git a/src/components/homepage/index.js b/src/components/homepage/index.js
index f4f774a..fb7ed1c 100644
--- a/src/components/homepage/index.js
+++ b/src/components/homepage/index.js
@@ -14,48 +14,58 @@ import {
   FutureCTA,
   FutureImage,
   HomePageContainer,
+  HeroImage,
 } from "./index-styles"
 
+import { Helmet } from "react-helmet"
+
 export default function HomePage({ data }) {
   return (
-    <HomePageContainer>
-      <HeroContainer>
-        <HeroTextSection>
-          <HeroHeadline>
-            <H1>{data.hero_headline}</H1>
-          </HeroHeadline>
-          <HeroDescription>
-            <P>{data.hero_subtext}</P>
-          </HeroDescription>
-          <HeroCTA>
-            <a
-              target="_blank"
-              s
-              rel="noreferrer"
-              href={data.hero_button_destination.text}
-            >
-              {data.hero_cta_text}
-            </a>
-          </HeroCTA>
-        </HeroTextSection>
-      </HeroContainer>
+    <>
+      <Helmet bodyAttributes={{ class: "home-header" }} />
+
+      <HomePageContainer>
+        <HeroContainer>
+          <HeroImage>
+            <img alt="hero image" src={data.hero_background_image.url} />
+          </HeroImage>
+          <HeroTextSection>
+            <HeroHeadline>
+              <H1>{data.hero_headline}</H1>
+            </HeroHeadline>
+            <HeroDescription>
+              <P>{data.hero_subtext}</P>
+            </HeroDescription>
+            <HeroCTA>
+              <a
+                target="_blank"
+                s
+                rel="noreferrer"
+                href={data.hero_button_destination.text}
+              >
+                {data.hero_cta_text}
+              </a>
+            </HeroCTA>
+          </HeroTextSection>
+        </HeroContainer>
 
-      <FutureSection>
-        <FutureText>
-          <FutureSolarIcon></FutureSolarIcon>
-          <FutureHeader>
-            <H2>{data.section_title}</H2>
-          </FutureHeader>
-          <FutureDescription>
-            <P>{data.section_description}</P>
-          </FutureDescription>
+        <FutureSection>
+          <FutureText>
+            <FutureSolarIcon alt="Future of Solar Icon"></FutureSolarIcon>
+            <FutureHeader>
+              <H2>{data.section_title}</H2>
+            </FutureHeader>
+            <FutureDescription>
+              <P>{data.section_description}</P>
+            </FutureDescription>
 
-          <FutureCTA>
-            <a href={data.button_destination}>{data.button_text}</a>
-          </FutureCTA>
-        </FutureText>
-        <FutureImage></FutureImage>
-      </FutureSection>
-    </HomePageContainer>
+            <FutureCTA>
+              <a href={data.button_destination}>{data.button_text}</a>
+            </FutureCTA>
+          </FutureText>
+          <FutureImage></FutureImage>
+        </FutureSection>
+      </HomePageContainer>
+    </>
   )
 }
diff --git a/src/components/layout.js b/src/components/layout.js
index ee0c856..0d2e5b4 100644
--- a/src/components/layout.js
+++ b/src/components/layout.js
@@ -18,10 +18,10 @@ const LayoutBody = styled.div`
   }
 `
 
-const Layout = ({ children }) => {
+const Layout = ({ children, home }) => {
   return (
     <LayoutContainer>
-      <Header />
+      <Header home={home} />
       <LayoutBody>{children}</LayoutBody>
       <Footer />
     </LayoutContainer>
diff --git a/src/pages/about.js b/src/pages/about.js
index f500a48..17afb0f 100644
--- a/src/pages/about.js
+++ b/src/pages/about.js
@@ -1,14 +1,15 @@
 import { graphql } from "gatsby"
 
 import React from "react"
+import Layout from "../components/layout"
 
 export default function About({ data }) {
     const aboutData = data.prismicAboutPage.data
 
     return (
-        <div>
+        <Layout>
             <h1>{aboutData.company_background_section_heading}</h1>
-        </div>
+        </Layout>
     )
 }
 
diff --git a/src/pages/index.js b/src/pages/index.js
index f9d0f33..220a5e0 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -7,7 +7,7 @@ export default function Home({ data }) {
   const homepageData = data.prismicHomepage.data
 
   return (
-    <Layout>
+    <Layout home={true}>
       <Homepage data={homepageData} />
     </Layout>
   )
diff --git a/src/vectors/hamburger.svg b/src/vectors/hamburger.svg
index 365600c..b538294 100644
--- a/src/vectors/hamburger.svg
+++ b/src/vectors/hamburger.svg
@@ -1,5 +1,5 @@
 <svg width="27" height="17" viewBox="0 0 27 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="27" height="3" fill="black"/>
-<rect y="7" width="27" height="3" fill="black"/>
-<rect y="14" width="27" height="3" fill="black"/>
+<rect width="27" height="3" fill="white"/>
+<rect y="7" width="27" height="3" fill="white"/>
+<rect y="14" width="27" height="3" fill="white"/>
 </svg>