diff --git a/app/assets/stylesheets/dashboard/dashboard_content.scss b/app/assets/stylesheets/dashboard/dashboard_content.scss
index ece417e16b..5cbf789bb6 100644
--- a/app/assets/stylesheets/dashboard/dashboard_content.scss
+++ b/app/assets/stylesheets/dashboard/dashboard_content.scss
@@ -4,9 +4,11 @@
   padding: $size-0 25px 50px 25px;
   display: flex;
   flex-direction: row;
+  margin-top: 86px;
 
   @media screen and (max-width: $medium) {
     flex-direction: column;
     padding: 0;
+    margin-top: 0;
   }
 }
diff --git a/app/assets/stylesheets/static/static_content.scss b/app/assets/stylesheets/static/static_content.scss
index b130e12bc8..d005263d57 100644
--- a/app/assets/stylesheets/static/static_content.scss
+++ b/app/assets/stylesheets/static/static_content.scss
@@ -5,10 +5,11 @@
   box-sizing: border-box;
   padding: $size-40 34px;
   scroll-behavior: smooth;
-  margin: 0 auto;
+  margin: 86px auto 0 auto;
 
   @media screen and (max-width: $medium) {
     padding: $size-20;
+    margin: 0 auto;
   }
 
   @media screen and (max-width: $small) {
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 9ef6923d8c..9c948237a7 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -52,8 +52,8 @@
     <%= react_component('SkipToContent', props: { id: 'mainContent' })%>
     <%= react_component('Header', props: header_props) %>
     <main>
-      <%= react_component('Toast', props: { 
-        notice: notice.present? ? notice : '', 
+      <%= react_component('Toast', props: {
+        notice: notice.present? ? notice : '',
         alert: alert.present? ? alert : '' ,
         appendDashboardClass: (user_signed_in? && !static_page?) || secret_share_path? }) %>
       <% if user_signed_in? && !static_page? %>
diff --git a/client/app/components/Header/Header.scss b/client/app/components/Header/Header.scss
index b8ebae68be..674d9724a9 100644
--- a/client/app/components/Header/Header.scss
+++ b/client/app/components/Header/Header.scss
@@ -57,6 +57,14 @@
     }
   }
 
+  &Scroll {
+    background-color: $black-80;
+
+    @media screen and (max-width: $medium) {
+      background-color: unset;
+    }
+  }
+
   &Mobile {
     background: transparent;
     position: static;
@@ -105,9 +113,12 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
+    position: fixed;
+    z-index: $z-index-front;
 
     @media screen and (max-width: $medium) {
       padding: 15px $size-10;
+      position: static;
     }
 
     &Home {
diff --git a/client/app/components/Header/index.jsx b/client/app/components/Header/index.jsx
index 4dd789e0e2..8dce093ec4 100644
--- a/client/app/components/Header/index.jsx
+++ b/client/app/components/Header/index.jsx
@@ -1,5 +1,7 @@
 // @flow
-import React, { useState, useRef, type Node } from 'react';
+import React, {
+  useState, useRef, useEffect, type Node,
+} from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons';
 import renderHTML from 'react-render-html';
@@ -25,6 +27,7 @@ export const Header = ({
   home, links, mobileOnly, profile,
 }: Props): Node => {
   const [mobileNavOpen, setMobileNavOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
   const navigationRef = useRef(null);
 
   useFocusTrap(navigationRef, mobileNavOpen);
@@ -73,7 +76,7 @@ export const Header = ({
 
   const displayDesktop = (): Node => (
     <div
-      className={css.headerDesktop}
+      className={`${css.headerDesktop} ${scrolled ? css.headerScroll : ''}`}
       aria-label={I18n.t('navigation.main_menu')}
       role="navigation"
     >
@@ -109,6 +112,22 @@ export const Header = ({
     </div>
   );
 
+  useEffect(() => {
+    const handleScroll = (event) => {
+      if (event.currentTarget.scrollY > 0) {
+        setScrolled(true);
+      } else {
+        setScrolled(false);
+      }
+    };
+    if (!mobileNavOpen) {
+      window.addEventListener('scroll', handleScroll);
+    }
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [mobileNavOpen]);
+
   return (
     <header
       id="header"
diff --git a/client/app/components/Modal/index.jsx b/client/app/components/Modal/index.jsx
index 7ee1c0bdbf..daa286fd59 100644
--- a/client/app/components/Modal/index.jsx
+++ b/client/app/components/Modal/index.jsx
@@ -68,10 +68,13 @@ export const Modal = (props: Props): Node => {
 
   useFocusTrap(modalEl, open);
 
-  useEffect(() => () => {
-    const documentBody = ((document.body: any): HTMLBodyElement);
-    documentBody.classList.remove('bodyModalOpen');
-  }, []);
+  useEffect(
+    () => () => {
+      const documentBody = ((document.body: any): HTMLBodyElement);
+      documentBody.classList.remove('bodyModalOpen');
+    },
+    [],
+  );
 
   const handleKeyPress = (
     event: SyntheticKeyboardEvent<HTMLDivElement>,