diff --git a/frontend/src/assets/img/logo.png b/frontend/src/assets/img/logo.png
new file mode 100644
index 0000000..41681ad
Binary files /dev/null and b/frontend/src/assets/img/logo.png differ
diff --git a/frontend/src/assets/styles/header.scss b/frontend/src/assets/styles/header.scss
new file mode 100644
index 0000000..552f0cf
--- /dev/null
+++ b/frontend/src/assets/styles/header.scss
@@ -0,0 +1,18 @@
+.top-header {
+    padding-bottom: 3.2vw;
+}
+
+.header-logo {
+    max-height: 110px;
+}
+
+.nav-link {
+    color: white !important;
+    font-weight: 200;
+    font-size: 16px !important;
+    padding: 0px !important;
+}
+
+.nav-item {
+    margin-left: 26.8667px;
+}
diff --git a/frontend/src/assets/styles/main.scss b/frontend/src/assets/styles/main.scss
index aa97eba..1297dca 100644
--- a/frontend/src/assets/styles/main.scss
+++ b/frontend/src/assets/styles/main.scss
@@ -1,8 +1,13 @@
 @import "./theme.scss";
+@import "./header.scss";
 
 // Core styles here...
 .App {
     font-family: $primary-font;
     color: $text-color-primary;
     background-color: $background-color-primary;
+    padding-top: 3.2vw;
+    padding-left: 3vw;
+    padding-right: 3vw;
+    padding-bottom: 3.2vw;
 }
diff --git a/frontend/src/assets/styles/theme.scss b/frontend/src/assets/styles/theme.scss
index 64ce5c3..bb50d67 100644
--- a/frontend/src/assets/styles/theme.scss
+++ b/frontend/src/assets/styles/theme.scss
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
 
 // COLOURS
 $background-color-primary: #000000;
diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js
new file mode 100644
index 0000000..2e85058
--- /dev/null
+++ b/frontend/src/components/Header.js
@@ -0,0 +1,13 @@
+import TopNav from './TopNav'
+import logo from '../assets/img/logo.png'
+
+export default function Header() {
+    return (
+        <div className='d-flex justify-content-between top-header'>
+            <a href="https://www.b4c3.com/">
+                <img className='header-logo' src={logo} alt="Biosphere Capital Limited" />
+            </a>
+            <TopNav />
+        </div>
+    );
+}
diff --git a/frontend/src/components/TopNav.js b/frontend/src/components/TopNav.js
new file mode 100644
index 0000000..cef9643
--- /dev/null
+++ b/frontend/src/components/TopNav.js
@@ -0,0 +1,30 @@
+export default function TopNav() {
+    return (
+        <nav class="navbar navbar-expand-lg">
+            <div class="container-fluid">
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarNavDropdown">
+                    <ul class="navbar-nav">
+                        <li class="nav-item">
+                            <a class="nav-link" href="#">Advisory</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#">Ecology</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#">Renewables</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#">About</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="https://www.b4c3.com/contact">Contact</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    );
+}
diff --git a/frontend/src/components/steps/Location.js b/frontend/src/components/steps/Location.js
index 436d9ae..315925a 100644
--- a/frontend/src/components/steps/Location.js
+++ b/frontend/src/components/steps/Location.js
@@ -5,9 +5,9 @@ import { Container } from 'reactstrap';
 export default class Step1 extends React.Component {
     render() {
         return (
-            <Container className="pt-4">
+            <div className="pt-4">
                 <p>Please choose your location...</p>
-            </Container>
+            </div>
         )
     }
 }
diff --git a/frontend/src/pages/SamplePage.js b/frontend/src/pages/SamplePage.js
index 9d75d39..314f682 100644
--- a/frontend/src/pages/SamplePage.js
+++ b/frontend/src/pages/SamplePage.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import { Container } from 'reactstrap';
 import Stepper from '../components/Stepper'
+import Header from '../components/Header'
 
 import PlantRepsostory from '../repository/PlantRepository'
 
@@ -30,9 +31,8 @@ export default class SamplePage extends React.Component {
 
     render() {
         return (
-            <Container className="p-2">
-                <h1>Right Tree</h1>
-                <h4>Right Plant Right Place Right Time</h4>
+            <Container fluid className='p-0'>
+                <Header/>
 
                 <div className="pt-4">
                     <Stepper plants={this.state.plants} />