diff --git a/package-lock.json b/package-lock.json
index 83f3c05..4b88866 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1078,6 +1078,29 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "requires": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+    },
+    "@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -2687,6 +2710,22 @@
       "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.6.tgz",
       "integrity": "sha512-1aGDUfL1qOOIoqk9QKGIo2lANk+C7ko/fqH0uIyC71x3PEGz0uVP8ISgfEsFuG+FKmjHTvFK/nNM8dowpmUxLA=="
     },
+    "babel-plugin-styled-components": {
+      "version": "1.10.7",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.7.tgz",
+      "integrity": "sha512-MBMHGcIA22996n9hZRf/UJLVVgkEOITuR2SvjHLb5dSTUyR4ZRGn+ngITapes36FI3WLxZHfRhkA1ffHxihOrg==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.0.0",
+        "@babel/helper-module-imports": "^7.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.11"
+      }
+    },
+    "babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+    },
     "babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@@ -3319,6 +3358,11 @@
         }
       }
     },
+    "camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
+    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -3951,6 +3995,11 @@
         "postcss": "^7.0.5"
       }
     },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
+    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -4041,6 +4090,16 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "css-to-react-native": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
+      "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
+      "requires": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -6358,6 +6417,14 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
     "hosted-git-info": {
       "version": "2.8.8",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
@@ -11210,6 +11277,15 @@
         }
       }
     },
+    "react-spring": {
+      "version": "8.0.27",
+      "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz",
+      "integrity": "sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "prop-types": "^15.5.8"
+      }
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -12063,6 +12139,11 @@
         }
       }
     },
+    "shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -12783,6 +12864,23 @@
         }
       }
     },
+    "styled-components": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.1.0.tgz",
+      "integrity": "sha512-0Qs2wEkFBXHFlysz6CV831VG6HedcrFUwChjnWylNivsx14MtmqQsohi21rMHZxzuTba063dEyoe/SR6VGJI7Q==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^0.8.8",
+        "@emotion/stylis": "^0.8.4",
+        "@emotion/unitless": "^0.7.4",
+        "babel-plugin-styled-components": ">= 1",
+        "css-to-react-native": "^3.0.0",
+        "hoist-non-react-statics": "^3.0.0",
+        "shallowequal": "^1.1.0",
+        "supports-color": "^5.5.0"
+      }
+    },
     "stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
diff --git a/package.json b/package.json
index 8e7a1ab..b466ac2 100644
--- a/package.json
+++ b/package.json
@@ -8,9 +8,12 @@
     "@testing-library/user-event": "^7.2.1",
     "eslint-config-airbnb-base": "^14.1.0",
     "node-sass": "4.14.1",
+    "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react-scripts": "3.4.1",
+    "react-spring": "^8.0.27",
+    "styled-components": "^5.1.0"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/App.js b/src/App.js
index 34994f3..962b958 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,26 +1,8 @@
 import React from 'react';
-import logo from './logo.svg';
-import './App.scss';
+import HomePage from './components/HomePage';
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
+const App = () => (
+  <HomePage />
+);
 
 export default App;
diff --git a/src/assets/colored 1.png b/src/assets/colored 1.png
new file mode 100644
index 0000000..909f246
Binary files /dev/null and b/src/assets/colored 1.png differ
diff --git a/src/components/Footer.js b/src/components/Footer.js
new file mode 100644
index 0000000..5af3717
--- /dev/null
+++ b/src/components/Footer.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import Brand from './navbar/Brand';
+
+const Footer = () => (
+  <>
+    <Footer>
+      <Brand />
+      <div>
+        <p> Hey some shit us here</p>
+      </div>
+    </Footer>
+  </>
+);
+export default Footer;
diff --git a/src/components/HomePage.js b/src/components/HomePage.js
new file mode 100644
index 0000000..77f5b59
--- /dev/null
+++ b/src/components/HomePage.js
@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import Navbar from './navbar/Navbar';
+import Footer from './Footer';
+
+class HomePage extends Component {
+  constructor(props) {
+    super(props);
+    this.handleNavbar = this.handleNavbar.bind(this);
+    this.navState = this.navState.bind(this);
+    this.state = {
+      navbarOpen: false
+    };
+  }
+
+  handleNavbar() {
+    this.setState((prevState) => ({
+      navbarOpen: !prevState.navbarOpen
+    }));
+  }
+
+  navState() {
+    this.setState((prevState) => ({
+      navbarOpen: prevState.navbarOpen
+    }));
+  }
+
+  render() {
+    return (
+      <>
+        <Navbar
+          navbarOpen={this.navState}
+          handleNavbar={this.handleNavbar}
+        />
+        <Footer />
+      </>
+    );
+  }
+}
+
+export default HomePage;
diff --git a/src/components/navbar/Brand.js b/src/components/navbar/Brand.js
new file mode 100644
index 0000000..c3255cb
--- /dev/null
+++ b/src/components/navbar/Brand.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import styled from 'styled-components';
+import logo from '../../assets/colored 1.png';
+
+const Image = styled.img`
+  height: 45px;
+  width: 192.46px;
+  margin: auto 0;
+`;
+
+const Brand = () => <Image src={logo} alt="Farm Reach logo" />;
+
+export default Brand;
diff --git a/src/components/navbar/BurgerMenu.js b/src/components/navbar/BurgerMenu.js
new file mode 100644
index 0000000..d4f18a7
--- /dev/null
+++ b/src/components/navbar/BurgerMenu.js
@@ -0,0 +1,47 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import styled from 'styled-components';
+
+const Burgermenu = ({ handleNavbar, navState }) => (
+  <Wrapper onClick={handleNavbar}>
+    <div className={navState ? 'open' : ''}>
+      <span>&nbsp;</span>
+      <span>&nbsp;</span>
+      <span>&nbsp;</span>
+    </div>
+  </Wrapper>
+);
+
+export default Burgermenu;
+
+const Wrapper = styled.div`
+  position: relative;
+  padding-top: .7rem;
+  cursor: pointer;
+  display: block;
+
+  & span {
+    background: #fdcb6e;
+    display: block;
+    position: relative;
+    width: 1.9rem;
+    height: .2rem;
+    margin-bottom: .7rem;
+    transition: all ease-in-out 0.2s;
+  }
+
+  .open span:nth-child(2) {
+      opacity: 0;
+    }
+
+  .open span:nth-child(3) {
+    transform: rotate(45deg);
+    top: -11px;
+  }
+
+  .open span:nth-child(1) {
+    transform: rotate(-45deg);
+    top: 11px;
+  }
+
+`;
diff --git a/src/components/navbar/CollapseMenu.js b/src/components/navbar/CollapseMenu.js
new file mode 100644
index 0000000..d35d162
--- /dev/null
+++ b/src/components/navbar/CollapseMenu.js
@@ -0,0 +1,63 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import styled from 'styled-components';
+
+import { useSpring, animated } from 'react-spring';
+
+
+const CollapseMenu = ({ handleNavbar, navState }) => {
+  const { open } = useSpring({ open: navState ? 0 : 1 });
+
+  if (navState === true) {
+    return (
+      <CollapseWrapper style={{
+        transform: open.interpolate({
+          range: [0, 0.2, 0.3, 1],
+          output: [0, -20, 0, -200]
+        }).interpolate((openValue) => `translate3d(0, ${openValue}px, 0`)
+      }}
+      >
+        <NavLinks>
+          <li><a href="/" onClick={handleNavbar}>link n1</a></li>
+          <li><a href="/" onClick={handleNavbar}>link n2</a></li>
+          <li><a href="/" onClick={handleNavbar}>link n3</a></li>
+          <li><a href="/" onClick={handleNavbar}>link n4</a></li>
+        </NavLinks>
+      </CollapseWrapper>
+    );
+  }
+  return null;
+};
+
+export default CollapseMenu;
+
+const CollapseWrapper = styled(animated.div)`
+  background: #2d3436;
+  position: fixed;
+  top: 4.5rem;
+  left: 0;
+  right: 0;
+`;
+
+const NavLinks = styled.ul`
+  list-style-type: none;
+  padding: 2rem 1rem 2rem 2rem;
+
+  & li {
+    transition: all 300ms linear 0s;
+  }
+
+  & a {
+    font-size: 1.4rem;
+    line-height: 2;
+    color: #dfe6e9;
+    text-transform: uppercase;
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+      color: #fdcb6e;
+      border-bottom: 1px solid #fdcb6e;
+    }
+  }
+`;
diff --git a/src/components/navbar/Navbar.js b/src/components/navbar/Navbar.js
new file mode 100644
index 0000000..c66bee1
--- /dev/null
+++ b/src/components/navbar/Navbar.js
@@ -0,0 +1,102 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import styled from 'styled-components';
+import { useSpring, animated, config } from 'react-spring';
+import BurgerMenu from './BurgerMenu';
+import Brand from './Brand';
+import CollapseMenu from './CollapseMenu';
+
+const Navbar = ({ handleNavbar, navState }) => {
+  const barAnimation = useSpring({
+    from: { transform: 'translate3d(0, -10rem, 0)' },
+    transform: 'translate3d(0, 0, 0)'
+  });
+
+  const linkAnimation = useSpring({
+    from: { transform: 'translate3d(0, 30px, 0)', opacity: 0 },
+    to: { transform: 'translate3d(0, 0, 0)', opacity: 1 },
+    delay: 800,
+    config: config.wobbly
+  });
+
+  return (
+    <>
+      <NavBar style={barAnimation}>
+        <FlexContainer>
+          <NavLinks style={linkAnimation}>
+            <a href="/">link n1</a>
+            <a href="/">link n2</a>
+            <a href="/">link n3</a>
+            <a href="/">link n4</a>
+          </NavLinks>
+          <BurgerWrapper>
+            <BurgerMenu
+              navbarState={navState}
+              handleNavbar={handleNavbar}
+            />
+          </BurgerWrapper>
+          <Brand />
+        </FlexContainer>
+      </NavBar>
+      <CollapseMenu
+        navbarState={navState}
+        handleNavbar={handleNavbar}
+      />
+    </>
+  );
+};
+
+export default Navbar;
+
+const NavBar = styled(animated.nav)`
+  position: fixed;
+  width: 100%;
+  top: 0;
+  left: 0;
+  background: #111111;
+  z-index: 1;
+  font-size: 1.4rem;
+`;
+
+const FlexContainer = styled.div`
+  max-width: 120rem;
+  display: flex;
+  margin: auto;
+  padding: 0;
+  height: 5rem;
+`;
+
+const NavLinks = styled(animated.ul)`
+  justify-self: end;
+  list-style-type: none;
+  margin: auto 0;
+
+  & a {
+    color: #dfe6e9;
+    text-transform: uppercase;
+    font-weight: 600;
+    border-bottom: 1px solid transparent;
+    margin: 0 1.5rem;
+    transition: all 300ms linear 0s;
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+      color: #fdcb6e;
+      border-bottom: 1px solid #fdcb6e;
+    }
+
+    @media (max-width: 768px) {
+      display: none;
+    }
+  }
+`;
+
+const BurgerWrapper = styled.div`
+  margin: auto 0;
+  margin-right: auto;
+
+  @media (min-width: 769px) {
+    display: none;
+  }
+`;
diff --git a/src/components/navbar/Search.js b/src/components/navbar/Search.js
new file mode 100644
index 0000000..1dd2443
--- /dev/null
+++ b/src/components/navbar/Search.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Search = () => {
+  
+}
diff --git a/src/index.js b/src/index.js
index 4cb9410..b597a44 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,17 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.scss';
 import App from './App';
-import * as serviceWorker from './serviceWorker';
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/src/styles/Global.js b/src/styles/Global.js
new file mode 100644
index 0000000..b1e1887
--- /dev/null
+++ b/src/styles/Global.js
@@ -0,0 +1,25 @@
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStlyes = createGlobalStyle`;
+
+  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
+
+  *,
+  *::after,
+  *::before {
+    margin: 0px;
+    padding: 0px;
+    box-sizing: inherit;
+  }
+
+  html {
+    font-size: 12px;
+  }
+
+  body {
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+  }
+`;
+
+export default GlobalStlyes;