diff --git a/components/NewsletterSubscribe.js b/components/NewsletterSubscribe.js
index 524dd3c9e8be..9268783713c0 100644
--- a/components/NewsletterSubscribe.js
+++ b/components/NewsletterSubscribe.js
@@ -11,17 +11,20 @@ export default function NewsletterSubscribe ({
 }) {
   if (!formName) throw new Error('Parameter formName is required for the NewsletterSubscribe component.')
 
+  const headTextColor = dark ? 'text-white' : ''
+  const paragraphTextColor = dark ? 'text-gray-300' : ''
+
   return (
     <div className={className}>
       <Heading 
         level="h3"
-        textColor="text-white"
+        textColor={headTextColor}
         typeStyle="heading-lg"
         className="mb-4"
       >
         {title}
       </Heading>
-      <Paragraph className="mb-8" textColor="text-gray-300">
+      <Paragraph className="mb-8" textColor={paragraphTextColor}>
         We respect your inbox. No spam, promise ✌️
       </Paragraph>
       <form className="md:flex" data-netlify="true">
diff --git a/components/layout/BlogLayout.js b/components/layout/BlogLayout.js
index a72958bf006d..3203a6cec3bf 100644
--- a/components/layout/BlogLayout.js
+++ b/components/layout/BlogLayout.js
@@ -86,7 +86,6 @@ export default function BlogLayout({ post, children }) {
           </article>
         </main>
       </Container>
-      <Footer />
     </BlogContext.Provider>
   )
 }
diff --git a/components/layout/DocsLayout.js b/components/layout/DocsLayout.js
index 8494f422c354..baf9f8a11dfb 100644
--- a/components/layout/DocsLayout.js
+++ b/components/layout/DocsLayout.js
@@ -24,7 +24,6 @@ function generateEditLink(post) {
 }
 
 export default function DocsLayout({ post, navItems = {}, children }) {
-  
   if (!post) return <ErrorPage statusCode={404} />
   if (post.title === undefined) throw new Error('Post title is required')
 
@@ -49,7 +48,7 @@ export default function DocsLayout({ post, navItems = {}, children }) {
       <StickyNavbar>
             <NavBar className="max-w-screen-xl block px-4 sm:px-6 lg:px-8 mx-auto" />
         </StickyNavbar>
-      <div className="bg-white px-4 sm:px-6 lg:px-8 xl:max-w-7xl xl:mx-auto">
+      <div className="bg-white px-4 sm:px-6 lg:px-8 w-full xl:max-w-7xl xl:mx-auto">
         { showMenu && (
           <DocsMobileMenu onClickClose={() => setShowMenu(false)} post={post} navigation={navigation} />
         ) }
@@ -114,7 +113,6 @@ export default function DocsLayout({ post, navItems = {}, children }) {
         </div>
         </div>
       </div>
-      <Footer/>
     </DocsContext.Provider>
   )
 }
diff --git a/components/layout/GenericLayout.js b/components/layout/GenericLayout.js
index f9230c6b5f12..0cc07d70b06f 100644
--- a/components/layout/GenericLayout.js
+++ b/components/layout/GenericLayout.js
@@ -28,7 +28,6 @@ export default function GenericLayout({
         <AnnouncementHero className="text-center m-4" small={true} />
         {children}
       </Container>
-      <Footer />
     </>
   )
 }
diff --git a/components/layout/GenericPostLayout.js b/components/layout/GenericPostLayout.js
index aa3c63bdc459..af2872721921 100644
--- a/components/layout/GenericPostLayout.js
+++ b/components/layout/GenericPostLayout.js
@@ -38,7 +38,6 @@ export default function GenericPostLayout({ post, children }) {
           </article>
         </main>
       </Container>
-      <Footer />
     </GenericPostContext.Provider>
   )
 }
diff --git a/components/layout/GenericWideLayout.js b/components/layout/GenericWideLayout.js
index d52c6d06d81a..3a9e068bbe82 100644
--- a/components/layout/GenericWideLayout.js
+++ b/components/layout/GenericWideLayout.js
@@ -28,7 +28,6 @@ export default function GenericWideLayout({
         <AnnouncementHero className="text-center m-4" small={true} />
         {children}
       </Row>
-      <Footer />
     </>
   )
 }
diff --git a/components/layout/JobsLayout.js b/components/layout/JobsLayout.js
index 2f35b20900c7..3a55cce95d08 100644
--- a/components/layout/JobsLayout.js
+++ b/components/layout/JobsLayout.js
@@ -42,7 +42,6 @@ export default function JobsLayout({ post, children }) {
           </div>
         </main>
       </Container>
-      <Footer />
     </JobsContext.Provider>
   )
 }
diff --git a/pages/_app.js b/pages/_app.js
index feb69bbde33d..8279d7524333 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -19,6 +19,7 @@ import Banner from '../components/campaigns/Banner'
 import Link from 'next/link'
 import DocsButton from '../components/buttons/DocsButton';
 import AppContext from '../context/AppContext'
+import Footer from "../components/Footer";
 import '../css/styles.css'
 
 export default function MyApp({ Component, pageProps, router }) {
@@ -28,11 +29,16 @@ export default function MyApp({ Component, pageProps, router }) {
       <Head>
           <script async defer src="https://buttons.github.io/buttons.js"></script>
       </Head>
-      <Banner />
       <MDXProvider components={getMDXComponents()}>
-        <Layout>
-          <Component {...pageProps} />
-        </Layout>
+        <div className="flex flex-col min-h-screen">
+          <Banner />
+          <Layout>
+            <Component {...pageProps} />
+          </Layout>
+          <div className="mt-auto">
+            <Footer />
+          </div>
+        </div>
       </MDXProvider>
     </AppContext.Provider>
   )
diff --git a/pages/blog/index.js b/pages/blog/index.js
index e8983922931d..0f295292cef4 100644
--- a/pages/blog/index.js
+++ b/pages/blog/index.js
@@ -111,7 +111,6 @@ export default function BlogIndexPage() {
           </div>
         </div>
       </div>
-      <Footer />
     </div>
   );
 }
diff --git a/pages/index.js b/pages/index.js
index 46a579a030ee..37596cba67e5 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -256,7 +256,6 @@ function HomePage() {
           <Button bgClassName="bg-none border border-gray-200 text-gray-800 hover:text-gray-700 shadow-none" href="/blog" text="View more blog posts" />
         </div>
       </Container>
-      <Footer />
     </>
   )
 }
diff --git a/pages/jobs/index.js b/pages/jobs/index.js
index 9daae7a76d79..c5daf766f92c 100644
--- a/pages/jobs/index.js
+++ b/pages/jobs/index.js
@@ -171,7 +171,6 @@ Join us!
           </div>
         </div>
       </div>
-      <Footer />
     </div>
   );
 }
diff --git a/pages/newsletter/index.js b/pages/newsletter/index.js
new file mode 100644
index 000000000000..e4ec3b78b997
--- /dev/null
+++ b/pages/newsletter/index.js
@@ -0,0 +1,21 @@
+import NavBar from "../../components/navigation/NavBar";
+import Head from "../../components/Head";
+import Container from '../../components/layout/Container'
+import StickyNavbar from "../../components/navigation/StickyNavbar"
+import NewsletterSubscribe from '../../components/NewsletterSubscribe'
+
+export default function NewsletterIndexPage() {
+  return (
+    <div>
+      <Head title="Newsletter"/>
+      <StickyNavbar>
+        <NavBar className="max-w-screen-xl block px-4 sm:px-6 lg:px-8 mx-auto" />
+      </StickyNavbar>
+      <div className="py-12 mt-12">
+        <Container wide>
+          <NewsletterSubscribe formName="form 1" />
+        </Container>
+      </div>
+    </div>
+  );
+}