diff --git a/src/components/header/header.css b/src/components/header/header.css
index fa6c718..19c8701 100644
--- a/src/components/header/header.css
+++ b/src/components/header/header.css
@@ -9,4 +9,41 @@
   background-size: cover;
   background-position: top;
   clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
+  position: relative;
+}
+
+.text-box {
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.logo-box {
+  position: absolute;
+  top: 40px;
+  left: 40px;
+}
+
+.logo {
+  height: 35px;
+}
+
+.heading-primary {
+  color: #ffff;
+  text-transform: uppercase;
+}
+
+.heading-primary-main {
+  display: block;
+  font-size: 60px;
+  font-weight: 400;
+  letter-spacing: 35px;
+}
+
+.heading-primary-sub {
+  display: block;
+  font-size: 20px;
+  font-weight: 700;
+  letter-spacing: 17.4px;
 }
diff --git a/src/components/header/header.js b/src/components/header/header.js
index 812f746..3853925 100644
--- a/src/components/header/header.js
+++ b/src/components/header/header.js
@@ -1,7 +1,20 @@
 import "./header.css";
+import logoWhite from "../../commons/images/logo-white.png";
 
 function Header() {
-  return <header className="header">Text...</header>;
+  return (
+    <header className="header">
+      <div className="logo-box">
+        <img src={logoWhite} alt="Logo" className="logo"></img>
+      </div>
+      <div className="text-box">
+        <h1 className="heading-primary">
+          <span className="heading-primary-main">Outdoors</span>
+          <span className="heading-primary-sub">is where life happens</span>
+        </h1>
+      </div>
+    </header>
+  );
 }
 
 export default Header;