diff --git a/src/App.css b/src/App.css
index 76f93de..9a68d1c 100644
--- a/src/App.css
+++ b/src/App.css
@@ -16,6 +16,11 @@ html {
   background-color: black;
 }
 
+.fade-down-d3s {
+  opacity: 0;
+  animation: fade-down-anim 2s forwards 3s;
+}
+
 /* we do this because scroll snapping is broken on moz://a for some reason */
 @supports (-moz-appearance:none){
   html {
@@ -49,6 +54,17 @@ h1 {
   }
 }
 
+@keyframes fade-down-anim {
+  0% {
+    opacity: 0;
+    transform: translateY(-40px);
+  }
+  100% {
+    opacity:1;
+    transform: translateY(0px);
+  }
+}
+
 
 @media only screen and (max-width: 993px) {
   .fade-up-md {
diff --git a/src/Main.tsx b/src/Main.tsx
index ebf8941..e373602 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -14,10 +14,10 @@ import Projects from "./components/projects/Projects";
 const NavBarView = (props: {children: any}) => {
     return (
         <div>
+            <Navbar/>
             <div style={{height: "95vh"}}>
             {props.children}
             </div>
-            <Navbar/>
         </div>
     )
 }
diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
index 6c4302a..ed9f914 100644
--- a/src/components/navbar/Navbar.tsx
+++ b/src/components/navbar/Navbar.tsx
@@ -6,7 +6,7 @@ export default function Navbar() {
     const location = useLocation();
 
     return (
-        <div style={{maxWidth:"100%"}} className={"d-flex justify-content-center align-items-center " + (location.pathname === "/" ? "fade-up-d3s" : "")} >
+        <div style={{maxWidth:"100%", marginTop: 10}} className={"d-flex justify-content-center align-items-center " + (location.pathname === "/" ? "fade-down-d3s" : "")} >
             <div className={"d-flex flex-row justify-content-around"} style={{width: 700}}>
                 <div className={"d-flex flex-column justify-content-center align-items-center"}>
                     <Link to={"/home"} className={"mb-0 no-blue-link"}>Home</Link>