diff --git a/client/src/components/Layout.js b/client/src/components/Layout.js
index 0ffe239960..c7ccf936bf 100644
--- a/client/src/components/Layout.js
+++ b/client/src/components/Layout.js
@@ -11,12 +11,14 @@ import { flashMessagesSelector, removeFlashMessage } from './Flash/redux';
 import Flash from './Flash';
 import Header from './Header';
 
-import './layout.css';
 import './global.css';
+import './layout.css';
+import './night.css';
 
 const propTypes = {
   children: PropTypes.node.isRequired,
   disableSettings: PropTypes.bool,
+  fetchUser: PropTypes.func.isRequired,
   flashMessages: PropTypes.arrayOf(
     PropTypes.shape({
       id: PropTypes.string,
@@ -26,6 +28,7 @@ const propTypes = {
   ),
   hasMessages: PropTypes.bool,
   isSignedIn: PropTypes.bool,
+  landingPage: PropTypes.bool,
   removeFlashMessage: PropTypes.func.isRequired
 };
 
@@ -54,7 +57,8 @@ class Layout extends Component {
       disableSettings,
       hasMessages,
       flashMessages = [],
-      removeFlashMessage
+      removeFlashMessage,
+      landingPage
     } = this.props;
     return (
       <StaticQuery
@@ -77,12 +81,12 @@ class Layout extends Component {
               title={data.site.siteMetadata.title}
             />
             <Header disableSettings={disableSettings} />
-            <div style={{ marginTop: '38px' }}>
+            <main className={landingPage && 'landing-page'}>
               {hasMessages ? (
                 <Flash messages={flashMessages} onClose={removeFlashMessage} />
               ) : null}
               {children}
-            </div>
+            </main>
           </Fragment>
         )}
       />
diff --git a/client/src/components/global.css b/client/src/components/global.css
index 04c52aa971..bca8e8f0fb 100644
--- a/client/src/components/global.css
+++ b/client/src/components/global.css
@@ -27,5 +27,4 @@ h6 {
 .btn-invert {
   background-color: #fff;
   color: #006400;
-
 }
\ No newline at end of file
diff --git a/client/src/components/layout.css b/client/src/components/layout.css
index 1b76e8ebec..e5dd350ced 100644
--- a/client/src/components/layout.css
+++ b/client/src/components/layout.css
@@ -622,3 +622,6 @@ pre tt:after {
     font-size: 100%;
   }
 }
+main {
+  margin-top: 38px;
+}
\ No newline at end of file
diff --git a/client/src/components/night.css b/client/src/components/night.css
new file mode 100644
index 0000000000..bad4728115
--- /dev/null
+++ b/client/src/components/night.css
@@ -0,0 +1,31 @@
+.night body {
+  background-color: #333;
+  color: #ddd;
+}
+
+.night .btn-invert {
+  background-color: #ddd;
+  color: #006400;
+}
+
+.night .btn-invert:hover, .night .btn-invert:focus {
+  background-color: #006400;
+  color: #ddd;
+}
+
+.night .toggle-active {
+  color: #ddd;
+}
+
+.night input, .night textarea {
+  background-color: #ddd;
+  color: #333;
+}
+
+.night #top-right-nav li > a, .night #top-right-nav li > span {
+  color: #ddd;
+}
+
+.night .btn.btn-primary {
+  color: #ddd;
+}
\ No newline at end of file
diff --git a/client/src/pages/index.css b/client/src/pages/index.css
index 6e1d251655..eb68b8ba3c 100644
--- a/client/src/pages/index.css
+++ b/client/src/pages/index.css
@@ -1,3 +1,17 @@
+
+/*
+  Embrace the cascade to override night mode styles
+  This ensures a consistent landing page, even for users with nigt mode enabled
+*/
+.night body .landing-page{
+  background-color: #fff;
+  color: #333;
+}
+.night .landing-page #top-right-nav li > a, .night #top-right-nav li > span {
+  color: #fff;
+}
+/* End night mode override */
+
 .black-text {
   color: #333;
   font-weight: 400;
diff --git a/client/src/pages/index.js b/client/src/pages/index.js
index 259ab8c064..006959e675 100644
--- a/client/src/pages/index.js
+++ b/client/src/pages/index.js
@@ -26,7 +26,7 @@ const BigCallToAction = () => (
 );
 
 const IndexPage = () => (
-  <Layout disableSettings={true}>
+  <Layout disableSettings={true} landingPage={true}>
     <Spacer />
     <Spacer />
     <Grid className='text-center'>