diff --git a/src/Landing.css b/src/Landing.css
index a028452..c47f8b1 100644
--- a/src/Landing.css
+++ b/src/Landing.css
@@ -1,69 +1,68 @@
 .Landing {
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-family: "HalisR-Regular";
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-family: "HalisR-Regular";
 }
 
 .Landing-header {
-  top: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  z-index: 0;
+    top: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 0;
 }
 
 .Landing-head-img {
-  top: 0;
-  width: 100vw;
-  height: auto;
-  position: fixed;
-  z-index: 0;
+    top: 0;
+    width: 100vw;
+    height: auto;
+    position: fixed;
+    z-index: 0;
 }
 
 .Landing-nav {
-  width: 100%;
-  height: 5rem;
-  margin: calc(100vw * 2048 / 2890) 0 0 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  background-color: white;
-  filter: drop-shadow(0 3px 3px darkgray);
-  z-index: 1;
-  text-align: left;
+    width: 100%;
+    height: 5rem;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    background-color: white;
+    filter: drop-shadow(0 3px 3px darkgray);
+    z-index: 1;
+    text-align: left;
 }
 
 .Landing-nav h3 {
-  padding-left: 1rem;
+    padding-left: 1rem;
 }
 
 .Landing-body {
-  width: 100%;
-  padding-top: 5%;
-  display: flex;
-  justify-content: center;
-  background-color: #D3F0EF;
-  z-index: 1;
+    width: 100%;
+    padding-top: 5%;
+    display: flex;
+    justify-content: center;
+    background-color: #D3F0EF;
+    z-index: 1;
 }
 
 .Landing-container {
-  max-width: 961px;
-  width: 75%;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-self: center;
-  z-index: 1;
+    max-width: 961px;
+    width: 75%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-self: center;
+    z-index: 1;
 }
 
 .Landing-section {
-  text-align: left;
-  margin-bottom: 5%;
-  flex-direction: column;
-  justify-content: left;
+    text-align: left;
+    margin-bottom: 5%;
+    flex-direction: column;
+    justify-content: left;
 }
\ No newline at end of file
diff --git a/src/Landing.js b/src/Landing.js
index b741606..714b15e 100644
--- a/src/Landing.js
+++ b/src/Landing.js
@@ -1,3 +1,4 @@
+import {useLayoutEffect, useState, useEffect, useRef} from 'react'
 import './index.css';
 import './Landing.css';
 import Card from './Card.js';
@@ -198,17 +199,44 @@ const guideContent = (
   </div>
 );
 
+function useWindowSize() {
+  const [size, setSize] = useState([0, 0]);
+  useLayoutEffect(() => {
+    function updateSize() {
+      setSize([window.innerWidth, window.innerHeight]);
+    }
+    window.addEventListener('resize', updateSize);
+    updateSize();
+    return () => window.removeEventListener('resize', updateSize);
+  }, []);
+  return size;
+}
+
 function Landing() {
+  const inital = useRef(true);
+  const imgRef = useRef();
+  const [navMargin, setNavMargin] = useState(0);
+  const [width, height] = useWindowSize();
+
+  const onImgLoad = ({ target:img }) => {
+    //5rem = 80px
+    console.log(height)
+    console.log(img.clientHeight)
+    setNavMargin(img.clientHeight < height ? img.clientHeight : (height - 80))
+  }
+
   return (
     <div className="Landing">
       <header className="Landing-header">
         <img
+          ref={imgRef}
           src="/landing-page.png"
           className="Landing-head-img"
           alt="landing"
+          onLoad={onImgLoad}
         />
       </header>
-      <nav className="Landing-nav">
+      <nav className="Landing-nav" style={{marginTop: navMargin}}>
         <h3>PennApps Mentoring</h3>
       </nav>
       <div className="Landing-body">