diff --git a/docs/pages/_app.js b/docs/pages/_app.js
index 8c21428fe6d471..00d52ca2875b92 100644
--- a/docs/pages/_app.js
+++ b/docs/pages/_app.js
@@ -300,8 +300,6 @@ function AppWrapper(props) {
     fonts = [
       'https://fonts.googleapis.com/css?family=Roboto+Condensed:700|Work+Sans:300,400&display=swap',
     ];
-  } else if (pathname.match(/blog/)) {
-    fonts.push('https://fonts.googleapis.com/css?family=Roboto+Slab:300&display=swap');
   }
 
   return (
diff --git a/docs/pages/blog/2019-developer-survey-results.js b/docs/pages/blog/2019-developer-survey-results.js
index adb9872bcfc56c..1efae03a9c899b 100644
--- a/docs/pages/blog/2019-developer-survey-results.js
+++ b/docs/pages/blog/2019-developer-survey-results.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
 import markdown from './2019-developer-survey-results.md';
 
 export default function Page() {
-  return <MarkdownDocs markdown={markdown} blog disableAd disableToc disableEdit />;
+  return <TopLayoutBlog markdown={markdown} />;
 }
diff --git a/docs/pages/blog/2019-developer-survey-results.md b/docs/pages/blog/2019-developer-survey-results.md
index 0c1db9119a262f..3a99245328d022 100644
--- a/docs/pages/blog/2019-developer-survey-results.md
+++ b/docs/pages/blog/2019-developer-survey-results.md
@@ -4,9 +4,7 @@ description: 2019 Material-UI Developer Survey results
 
 # 2019 Material-UI Developer Survey results
 
-**Olivier Tassinari, Matt Brookes**
-
-*March 16, 2019*
+Olivier Tassinari, Matt Brookes. March 16, 2019.
 
 While we are currently working on the upcoming release of Material-UI v4, we need to prioritize our
 roadmap for the coming year. To refine our focus, we launched a developer survey last month,
@@ -323,7 +321,3 @@ If you want to continue to influence our roadmap, please upvote 👍 the issues
 
 <img src="/static/blog/2019-survey/vote.gif" style="display: block; margin: 0 auto;" alt="How to upvote on GitHub" />
 <div style="font-style: italic; text-align: center; margin: 8px;">Help us prioritize by upvoting.</div>
-
-<hr />
-
-Material-UI is an MIT-licensed open source project. It’s an independent project with ongoing development helped by the support of these awesome [backers](https://material-ui.com/discover-more/backers/). Please join them ✨.
diff --git a/docs/pages/blog/april-2019-update.js b/docs/pages/blog/april-2019-update.js
index bf4a5b38c4afef..b9643f2038e2c0 100644
--- a/docs/pages/blog/april-2019-update.js
+++ b/docs/pages/blog/april-2019-update.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
 import markdown from './april-2019-update.md';
 
 export default function Page() {
-  return <MarkdownDocs markdown={markdown} blog disableAd disableToc disableEdit />;
+  return <TopLayoutBlog markdown={markdown} />;
 }
diff --git a/docs/pages/blog/april-2019-update.md b/docs/pages/blog/april-2019-update.md
index 231aad3ec8ebe0..82a0928489a133 100644
--- a/docs/pages/blog/april-2019-update.md
+++ b/docs/pages/blog/april-2019-update.md
@@ -4,9 +4,7 @@ description: Here are the most significant improvements in April.
 
 # April 2019 Update
 
-**Olivier Tassinari**
-
-*May 7, 2019*
+Olivier Tassinari. May 7, 2019.
 
 Here are the most significant improvements in April:
 
@@ -62,7 +60,3 @@ But this summary is just scratching the surface. We have accepted 243 commits fr
 - Something big 🌈
 
 - ❓ Please upvote our [GitHub issues](https://github.com/mui-org/material-ui/issues) if you want something specific. The number of 👍 helps us to prioritize.
-
-<hr />
-
-Material-UI is an MIT-licensed open source project. It’s an independent project with ongoing development helped by the support of these awesome [backers](/discover-more/backers/). Please join them ✨.
diff --git a/docs/pages/blog/august-2019-update.js b/docs/pages/blog/august-2019-update.js
index 0738c22c416625..ee89b462907018 100644
--- a/docs/pages/blog/august-2019-update.js
+++ b/docs/pages/blog/august-2019-update.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
 import markdown from './august-2019-update.md';
 
 export default function Page() {
-  return <MarkdownDocs markdown={markdown} blog disableAd disableToc disableEdit />;
+  return <TopLayoutBlog markdown={markdown} />;
 }
diff --git a/docs/pages/blog/august-2019-update.md b/docs/pages/blog/august-2019-update.md
index 64f2557e163514..83865989c34c2f 100644
--- a/docs/pages/blog/august-2019-update.md
+++ b/docs/pages/blog/august-2019-update.md
@@ -4,9 +4,7 @@ description: Here are the most significant improvements in August.
 
 # August 2019 Update
 
-**Olivier Tassinari**
-
-*September 7, 2019*
+Olivier Tassinari. September 7, 2019.
 
 Here are the most significant improvements in August:
 
@@ -38,7 +36,3 @@ But this summary is just scratching the surface. We have accepted 193 commits fr
 - 🔍 We will keep working on providing ready to use autocomplete, combo box, and multi-select components. We announced it last month but have made little progress so far due to focusing on fixing bugs in existing components. Let's make it happen!
 
 - ❓ Please upvote our [GitHub issues](https://github.com/mui-org/material-ui/issues) if you want something specific. The number of 👍 helps us to prioritize.
-
-<hr />
-
-Material-UI is an MIT-licensed open source project. It’s an independent project with ongoing development helped by the support of these awesome [backers](/discover-more/backers/). Please join them ✨.
diff --git a/docs/pages/blog/december-2019-update.js b/docs/pages/blog/december-2019-update.js
index 920c48e4c0f14b..577e6e8d3a7b93 100644
--- a/docs/pages/blog/december-2019-update.js
+++ b/docs/pages/blog/december-2019-update.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
 import markdown from './december-2019-update.md';
 
 export default function Page() {
-  return <MarkdownDocs markdown={markdown} blog disableAd disableToc disableEdit />;
+  return <TopLayoutBlog markdown={markdown} />;
 }
diff --git a/docs/pages/blog/december-2019-update.md b/docs/pages/blog/december-2019-update.md
index 75d8bf39715eda..d9d159b078005a 100644
--- a/docs/pages/blog/december-2019-update.md
+++ b/docs/pages/blog/december-2019-update.md
@@ -4,9 +4,7 @@ description: Here are the most significant improvements in December.
 
 # December 2019 Update
 
-**Olivier Tassinari**
-
-*January 7, 2020*
+Olivier Tassinari. January 7, 2020.
 
 Here are the most significant improvements in December:
 
@@ -49,7 +47,3 @@ But this summary is just scratching the surface. We have accepted 168 commits fr
   ![Data grid](/static/blog/december-2019-update/data-grid.png)
 
 ❓ Please upvote our [GitHub issues](https://github.com/mui-org/material-ui/issues) if you want something specific. The number of 👍 helps us to prioritize.
-
-<hr />
-
-Material-UI is an MIT-licensed open source project. It’s an independent project with ongoing development helped by the support of these awesome [backers](/discover-more/backers/). Please join them ✨.
diff --git a/docs/pages/blog/july-2019-update.js b/docs/pages/blog/july-2019-update.js
index 6d6d91a8c6cfbc..228462f919c5a8 100644
--- a/docs/pages/blog/july-2019-update.js
+++ b/docs/pages/blog/july-2019-update.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
 import markdown from './july-2019-update.md';
 
 export default function Page() {
-  return <MarkdownDocs markdown={markdown} blog disableAd disableToc disableEdit />;
+  return <TopLayoutBlog markdown={markdown} />;
 }
diff --git a/docs/pages/blog/july-2019-update.md b/docs/pages/blog/july-2019-update.md
index bd9347ddd60a64..ac235a383ef0e6 100644
--- a/docs/pages/blog/july-2019-update.md
+++ b/docs/pages/blog/july-2019-update.md
@@ -4,9 +4,7 @@ description: Here are the most significant improvements in July.
 
 # July 2019 Update
 
-**Olivier Tassinari**
-
-*August 4, 2019*
+Olivier Tassinari. August 4, 2019.
 
 Here are the most significant improvements in July:
 
@@ -42,7 +40,3 @@ But this summary is just scratching the surface. We have accepted 146 commits fr
   ![Skeleton](/static/blog/july-2019-update/skeleton.png)
 
 - ❓ Please upvote our [GitHub issues](https://github.com/mui-org/material-ui/issues) if you want something specific. The number of 👍 helps us to prioritize.
-
-<hr />
-
-Material-UI is an MIT-licensed open source project. It’s an independent project with ongoing development helped by the support of these awesome [backers](/discover-more/backers/). Please join them ✨.
diff --git a/docs/pages/blog/june-2019-update.js b/docs/pages/blog/june-2019-update.js
index d3ee08f8766c79..5087c3f427b986 100644
--- a/docs/pages/blog/june-2019-update.js
+++ b/docs/pages/blog/june-2019-update.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
 import markdown from './june-2019-update.md';
 
 export default function Page() {
-  return <MarkdownDocs markdown={markdown} blog disableAd disableToc disableEdit />;
+  return <TopLayoutBlog markdown={markdown} />;
 }
diff --git a/docs/pages/blog/june-2019-update.md b/docs/pages/blog/june-2019-update.md
index 941754652a1960..ca0a817957406b 100644
--- a/docs/pages/blog/june-2019-update.md
+++ b/docs/pages/blog/june-2019-update.md
@@ -4,9 +4,7 @@ description: Here are the most significant improvements in June.
 
 # June 2019 Update
 
-**Olivier Tassinari**
-
-*July 8, 2019*
+Olivier Tassinari. July 8, 2019.
 
 Here are the most significant improvements in June:
 
@@ -34,7 +32,3 @@ But this summary is just scratching the surface. We have accepted 198 commits fr
   ![Rating](/static/blog/june-2019-update/rating.png)
 
 - ❓ Please upvote our [GitHub issues](https://github.com/mui-org/material-ui/issues) if you want something specific. The number of 👍 helps us to prioritize.
-
-<hr />
-
-Material-UI is an MIT-licensed open source project. It’s an independent project with ongoing development helped by the support of these awesome [backers](/discover-more/backers/). Please join them ✨.
diff --git a/docs/pages/blog/march-2019-update.js b/docs/pages/blog/march-2019-update.js
index afe76bc59be44d..09c3ae74833013 100644
--- a/docs/pages/blog/march-2019-update.js
+++ b/docs/pages/blog/march-2019-update.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
 import markdown from './march-2019-update.md';
 
 export default function Page() {
-  return <MarkdownDocs markdown={markdown} blog disableAd disableToc disableEdit />;
+  return <TopLayoutBlog markdown={markdown} />;
 }
diff --git a/docs/pages/blog/march-2019-update.md b/docs/pages/blog/march-2019-update.md
index 7211149f7be950..8bcf695140939b 100644
--- a/docs/pages/blog/march-2019-update.md
+++ b/docs/pages/blog/march-2019-update.md
@@ -4,9 +4,7 @@ description: Here are the most significant improvements in March.
 
 # March 2019 Update
 
-**Olivier Tassinari**
-
-*April 5, 2019*
+Olivier Tassinari. April 5, 2019.
 
 Here are the most significant improvements in March:
 
@@ -36,7 +34,3 @@ Don't worry, it's almost over! We will focus on providing more components once w
   - Migration from Classes to Hooks, removal of unnecessary internal components.
   - Removal of `findDOMNode()`, support of `StrictMode`, forward of references.
 - ❓ Please upvote our [GitHub issues](https://github.com/mui-org/material-ui/issues) if you want something specific. The number of 👍 helps us to prioritize.
-
-<hr />
-
-Material-UI is an MIT-licensed open source project. It’s an independent project with ongoing development helped by the support of these awesome [backers](/discover-more/backers/). Please join them ✨.
diff --git a/docs/pages/blog/material-ui-v1-is-out.js b/docs/pages/blog/material-ui-v1-is-out.js
index fdc106827c83c8..b3b374eddb82e5 100644
--- a/docs/pages/blog/material-ui-v1-is-out.js
+++ b/docs/pages/blog/material-ui-v1-is-out.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
 import markdown from './material-ui-v1-is-out.md';
 
 export default function Page() {
-  return <MarkdownDocs markdown={markdown} blog disableAd disableToc disableEdit />;
+  return <TopLayoutBlog markdown={markdown} />;
 }
diff --git a/docs/pages/blog/material-ui-v1-is-out.md b/docs/pages/blog/material-ui-v1-is-out.md
index 4121074538f2f9..ae8d1fcb476a03 100644
--- a/docs/pages/blog/material-ui-v1-is-out.md
+++ b/docs/pages/blog/material-ui-v1-is-out.md
@@ -4,7 +4,7 @@ description: Material-UI v1 is out 🎉
 
 # Material-UI v1 is out 🎉
 
-*May 18, 2018*
+The core team. May 18, 2018.
 
 > React components that implement Google’s Material Design.
 
diff --git a/docs/pages/blog/material-ui-v4-is-out.js b/docs/pages/blog/material-ui-v4-is-out.js
index dc91dd9ff45024..0a3f8d7739926c 100644
--- a/docs/pages/blog/material-ui-v4-is-out.js
+++ b/docs/pages/blog/material-ui-v4-is-out.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
 import markdown from './material-ui-v4-is-out.md';
 
 export default function Page() {
-  return <MarkdownDocs markdown={markdown} blog disableAd disableToc disableEdit />;
+  return <TopLayoutBlog markdown={markdown} />;
 }
diff --git a/docs/pages/blog/material-ui-v4-is-out.md b/docs/pages/blog/material-ui-v4-is-out.md
index 4d2e27ea8e677c..43ea484eb1dab1 100644
--- a/docs/pages/blog/material-ui-v4-is-out.md
+++ b/docs/pages/blog/material-ui-v4-is-out.md
@@ -4,7 +4,7 @@ description: Material-UI v4 is out 🎉
 
 # Material-UI v4 is out 🎉
 
-*May 23, 2019*
+The core team. May 23, 2019.
 
 > React components for faster and easier web development. Build your own design system, or start with Material Design.
 
diff --git a/docs/pages/blog/may-2019-update.js b/docs/pages/blog/may-2019-update.js
index f2334cadd4e818..5b9c635f878d76 100644
--- a/docs/pages/blog/may-2019-update.js
+++ b/docs/pages/blog/may-2019-update.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
 import markdown from './may-2019-update.md';
 
 export default function Page() {
-  return <MarkdownDocs markdown={markdown} blog disableAd disableToc disableEdit />;
+  return <TopLayoutBlog markdown={markdown} />;
 }
diff --git a/docs/pages/blog/may-2019-update.md b/docs/pages/blog/may-2019-update.md
index 12701a64342442..380e84d9752f32 100644
--- a/docs/pages/blog/may-2019-update.md
+++ b/docs/pages/blog/may-2019-update.md
@@ -4,9 +4,7 @@ description: Here are the most significant improvements in May.
 
 # May 2019 Update
 
-**Olivier Tassinari**
-
-*June 8, 2019*
+Olivier Tassinari. June 8, 2019.
 
 Here are the most significant improvements in May:
 
@@ -38,7 +36,3 @@ If you are an enterprise and are looking for one of the following:
 You can contact us at advisory@material-ui.com.
 
 - ❓ Please upvote our [GitHub issues](https://github.com/mui-org/material-ui/issues) if you want something specific. The number of 👍 helps us to prioritize.
-
-<hr />
-
-Material-UI is an MIT-licensed open source project. It’s an independent project with ongoing development helped by the support of these awesome [backers](/discover-more/backers/). Please join them ✨.
diff --git a/docs/pages/blog/november-2019-update.js b/docs/pages/blog/november-2019-update.js
index 4bd3553e76d4d4..14b2e77ad02adf 100644
--- a/docs/pages/blog/november-2019-update.js
+++ b/docs/pages/blog/november-2019-update.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
 import markdown from './november-2019-update.md';
 
 export default function Page() {
-  return <MarkdownDocs markdown={markdown} blog disableAd disableToc disableEdit />;
+  return <TopLayoutBlog markdown={markdown} />;
 }
diff --git a/docs/pages/blog/november-2019-update.md b/docs/pages/blog/november-2019-update.md
index 1d66ab632419a6..87b683cb153c1d 100644
--- a/docs/pages/blog/november-2019-update.md
+++ b/docs/pages/blog/november-2019-update.md
@@ -4,9 +4,7 @@ description: Here are the most significant improvements in November.
 
 # November 2019 Update
 
-**Olivier Tassinari**
-
-*December 12, 2019*
+Olivier Tassinari. December 12, 2019.
 
 Here are the most significant improvements in November:
 
@@ -57,7 +55,3 @@ To get a rough idea of what's coming, you can read [this blog post](https://uxde
 We want to cover styled-component [#6115](https://github.com/mui-org/material-ui/pull/#6115), the system [#15561](https://github.com/mui-org/material-ui/issues/15561), dynamic props [#15573](https://github.com/mui-org/material-ui/issues/15573) and an unstyled version [#6218](https://github.com/mui-org/material-ui/pull/6218).
 
 ❓ Please upvote our [GitHub issues](https://github.com/mui-org/material-ui/issues) if you want something specific. The number of 👍 helps us to prioritize.
-
-<hr />
-
-Material-UI is an MIT-licensed open source project. It’s an independent project with ongoing development helped by the support of these awesome [backers](/discover-more/backers/). Please join them ✨.
diff --git a/docs/pages/blog/october-2019-update.js b/docs/pages/blog/october-2019-update.js
index 8a5c70c109dd21..1129bb9657112e 100644
--- a/docs/pages/blog/october-2019-update.js
+++ b/docs/pages/blog/october-2019-update.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
 import markdown from './october-2019-update.md';
 
 export default function Page() {
-  return <MarkdownDocs markdown={markdown} blog disableAd disableToc disableEdit />;
+  return <TopLayoutBlog markdown={markdown} />;
 }
diff --git a/docs/pages/blog/october-2019-update.md b/docs/pages/blog/october-2019-update.md
index 8f1e55e9d29683..e2dcb8e4cac32c 100644
--- a/docs/pages/blog/october-2019-update.md
+++ b/docs/pages/blog/october-2019-update.md
@@ -4,9 +4,7 @@ description: Here are the most significant improvements in October.
 
 # October 2019 Update
 
-**Olivier Tassinari**
-
-*November 8, 2019*
+Olivier Tassinari. November 8, 2019.
 
 Here are the most significant improvements in October:
 
@@ -41,7 +39,3 @@ This is an effort [of our roadmap](/discover-more/roadmap/) to better answer ent
 - ❓ Please upvote our [GitHub issues](https://github.com/mui-org/material-ui/issues) if you want something specific. The number of 👍 helps us to prioritize.
 
 These are three major efforts, we will likely need the whole quarter (Q4) to make significant progress. Stay tuned.
-
-<hr />
-
-Material-UI is an MIT-licensed open source project. It’s an independent project with ongoing development helped by the support of these awesome [backers](/discover-more/backers/). Please join them ✨.
diff --git a/docs/pages/blog/september-2019-update.js b/docs/pages/blog/september-2019-update.js
index c5037c7efd95f0..8e835fd8566c53 100644
--- a/docs/pages/blog/september-2019-update.js
+++ b/docs/pages/blog/september-2019-update.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
 import markdown from './september-2019-update.md';
 
 export default function Page() {
-  return <MarkdownDocs markdown={markdown} blog disableAd disableToc disableEdit />;
+  return <TopLayoutBlog markdown={markdown} />;
 }
diff --git a/docs/pages/blog/september-2019-update.md b/docs/pages/blog/september-2019-update.md
index 74316633b9f069..2876fc616b2445 100644
--- a/docs/pages/blog/september-2019-update.md
+++ b/docs/pages/blog/september-2019-update.md
@@ -4,9 +4,7 @@ description: Here are the most significant improvements in September.
 
 # September 2019 Update
 
-**Olivier Tassinari**
-
-*October 12, 2019*
+Olivier Tassinari. October 12, 2019.
 
 Here are the most significant improvements in September:
 
@@ -65,7 +63,3 @@ But this summary is just scratching the surface. We have accepted 199 commits fr
 ⭐️ Notice that the advanced features of the data grid will be paid, behind an enterprise subscription. This is an effort part of [our roadmap](/discover-more/roadmap/) to answer enterprise needs.
 
 - ❓ Please upvote our [GitHub issues](https://github.com/mui-org/material-ui/issues) if you want something specific. The number of 👍 helps us to prioritize.
-
-<hr />
-
-Material-UI is an MIT-licensed open source project. It’s an independent project with ongoing development helped by the support of these awesome [backers](/discover-more/backers/). Please join them ✨.
diff --git a/docs/pages/index.js b/docs/pages/index.js
index f8f083fd443caa..759f527912a7d4 100644
--- a/docs/pages/index.js
+++ b/docs/pages/index.js
@@ -9,7 +9,7 @@ import HomeQuickWord from 'docs/src/modules/components/HomeQuickWord';
 import HomeBackers from 'docs/src/modules/components/HomeBackers';
 import HomeUsers from 'docs/src/modules/components/HomeUsers';
 import HomePro from 'docs/src/modules/components/HomePro';
-import HomeFooter from 'docs/src/modules/components/HomeFooter';
+import AppFooter from 'docs/src/modules/components/AppFooter';
 import AppFrame from 'docs/src/modules/components/AppFrame';
 import Link from 'docs/src/modules/components/Link';
 import Head from 'docs/src/modules/components/Head';
@@ -31,9 +31,6 @@ function loadDependencies() {
 const useStyles = makeStyles(theme => ({
   root: {
     flex: '1 0 100%',
-    '& #main-content': {
-      outline: 0,
-    },
   },
   hero: {
     paddingTop: 64,
@@ -165,7 +162,7 @@ export default function HomePage() {
           <HomeBackers />
           <HomeUsers />
         </main>
-        <HomeFooter />
+        <AppFooter />
       </div>
       <script
         type="application/ld+json"
diff --git a/docs/src/modules/components/AppContainer.js b/docs/src/modules/components/AppContainer.js
new file mode 100644
index 00000000000000..653197e47f6c16
--- /dev/null
+++ b/docs/src/modules/components/AppContainer.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { makeStyles } from '@material-ui/core/styles';
+import Container from '@material-ui/core/Container';
+
+const useStyles = makeStyles({
+  root: {
+    paddingTop: 80 + 16,
+  },
+});
+
+export default function AppContainer(props) {
+  const { className, ...other } = props;
+  const classes = useStyles();
+
+  return (
+    <Container
+      component="main"
+      id="main-content"
+      maxWidth="md"
+      tabIndex={-1}
+      className={clsx(classes.root, className)}
+      {...other}
+    />
+  );
+}
+
+AppContainer.propTypes = {
+  className: PropTypes.string,
+};
diff --git a/docs/src/modules/components/AppContent.js b/docs/src/modules/components/AppContent.js
deleted file mode 100644
index 20170d813cc94f..00000000000000
--- a/docs/src/modules/components/AppContent.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
-import Container from '@material-ui/core/Container';
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    paddingTop: 80 + 16,
-    flex: '1 1 100%',
-    position: 'relative',
-    maxWidth: '100%',
-    margin: '0 auto',
-    outline: 0,
-    [theme.breakpoints.up('sm')]: {
-      paddingRight: theme.spacing(1),
-      maxWidth: 'calc(100% - 175px)',
-    },
-    [theme.breakpoints.up('lg')]: {
-      paddingLeft: theme.spacing(6),
-      paddingRight: theme.spacing(6),
-      maxWidth: 'calc(100% - 175px - 240px)',
-    },
-  },
-  ad: {
-    '& .description': {
-      marginBottom: 196,
-    },
-    '& .description.ad': {
-      marginBottom: 40,
-    },
-  },
-  disableToc: {
-    [theme.breakpoints.up('sm')]: {
-      maxWidth: 'calc(100%)',
-    },
-    [theme.breakpoints.up('lg')]: {
-      maxWidth: 'calc(100% - 240px)',
-    },
-  },
-}));
-
-export default function AppContent(props) {
-  const { children, className, disableAd, disableToc } = props;
-  const classes = useStyles();
-
-  return (
-    <Container
-      component="main"
-      id="main-content"
-      tabIndex={-1}
-      className={clsx(
-        classes.root,
-        {
-          [classes.ad]: !disableAd,
-          [classes.disableToc]: disableToc,
-        },
-        className,
-      )}
-    >
-      {children}
-    </Container>
-  );
-}
-
-AppContent.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  disableAd: PropTypes.bool.isRequired,
-  disableToc: PropTypes.bool.isRequired,
-};
diff --git a/docs/src/modules/components/AppDrawer.js b/docs/src/modules/components/AppDrawer.js
index 22cf2b3f5624fb..ff73c60354b0f4 100644
--- a/docs/src/modules/components/AppDrawer.js
+++ b/docs/src/modules/components/AppDrawer.js
@@ -99,7 +99,7 @@ function reduceChildRoutes({ props, activePage, items, page, depth, t }) {
 
   if (page.children && page.children.length > 1) {
     const title = pageToTitleI18n(page, t);
-    const topLevel = activePage.pathname.indexOf(`${page.pathname}/`) === 0;
+    const topLevel = !activePage || activePage.pathname.indexOf(`${page.pathname}/`) === 0;
 
     items.push(
       <AppDrawerNavItem
diff --git a/docs/src/modules/components/HomeFooter.js b/docs/src/modules/components/AppFooter.js
similarity index 98%
rename from docs/src/modules/components/HomeFooter.js
rename to docs/src/modules/components/AppFooter.js
index a028ba95a4b5eb..ce385bcb63e588 100644
--- a/docs/src/modules/components/HomeFooter.js
+++ b/docs/src/modules/components/AppFooter.js
@@ -47,7 +47,7 @@ const styles = theme => ({
   },
 });
 
-function HomeFooter(props) {
+function AppFooter(props) {
   const { classes } = props;
   const t = useSelector(state => state.options.t);
 
@@ -174,8 +174,8 @@ function HomeFooter(props) {
   );
 }
 
-HomeFooter.propTypes = {
+AppFooter.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
-export default withStyles(styles)(HomeFooter);
+export default withStyles(styles)(AppFooter);
diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
index 8101f884bd5a0c..b9beb7520cbc44 100644
--- a/docs/src/modules/components/AppFrame.js
+++ b/docs/src/modules/components/AppFrame.js
@@ -77,6 +77,11 @@ function DeferredAppSearch() {
 }
 
 const styles = theme => ({
+  '@global': {
+    '#main-content': {
+      outline: 0,
+    },
+  },
   root: {
     display: 'flex',
     backgroundColor: theme.palette.background.level1,
@@ -184,8 +189,7 @@ function AppFrame(props) {
   let navIconClassName = '';
   let appBarClassName = classes.appBar;
 
-  if (activePage.title === false) {
-    // home route, don't shift app bar or dock drawer
+  if (!activePage || activePage.disableDrawer === true) {
     disablePermanent = true;
     appBarClassName += ` ${classes.appBarHome}`;
   } else {
diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js
index ba9d753cd47d4a..cb85ef1ea9bf0a 100644
--- a/docs/src/modules/components/AppTableOfContents.js
+++ b/docs/src/modules/components/AppTableOfContents.js
@@ -20,7 +20,6 @@ const useStyles = makeStyles(theme => ({
     marginTop: 70,
     width: 175,
     flexShrink: 0,
-    order: 2,
     position: 'sticky',
     height: 'calc(100vh - 70px)',
     overflowY: 'auto',
diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
index fa06739536264d..e5c00f8ad27c5e 100644
--- a/docs/src/modules/components/MarkdownDocs.js
+++ b/docs/src/modules/components/MarkdownDocs.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
 import clsx from 'clsx';
+import { useSelector } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
 import Portal from '@material-ui/core/Portal';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
@@ -10,45 +10,41 @@ import Button from '@material-ui/core/Button';
 import Divider from '@material-ui/core/Divider';
 import Head from 'docs/src/modules/components/Head';
 import useMarkdownDocs from 'docs/src/modules/components/useMarkdownDocs';
-import AppContent from 'docs/src/modules/components/AppContent';
 import AppFrame from 'docs/src/modules/components/AppFrame';
 import AppTableOfContents from 'docs/src/modules/components/AppTableOfContents';
 import Ad from 'docs/src/modules/components/Ad';
 import EditPage from 'docs/src/modules/components/EditPage';
+import AppContainer from 'docs/src/modules/components/AppContainer';
 import PageContext from 'docs/src/modules/components/PageContext';
 import { getHeaders, getTitle, getDescription } from 'docs/src/modules/utils/parseMarkdown';
 import { pageToTitleI18n } from 'docs/src/modules/utils/helpers';
 import Link from 'docs/src/modules/components/Link';
 
 const styles = theme => ({
-  header: {
+  container: {
+    position: 'relative',
+  },
+  actions: {
     position: 'absolute',
     right: 16,
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'flex-end',
   },
-  markdownElementBlog: {
-    maxWidth: 700,
-    margin: 'auto',
-    padding: 0,
-    fontSize: theme.typography.pxToRem(18),
-    fontFamily: `Roboto Slab, ${theme.typography.fontFamily}`,
-    fontWeight: 300,
-    '& p, & ul, & ol': {
-      lineHeight: 1.7,
+  ad: {
+    '& .description': {
+      marginBottom: 196,
     },
-    '& strong': {
-      fontWeight: 400,
-      fontFamily: theme.typography.fontFamily,
+    '& .description.ad': {
+      marginBottom: 40,
     },
-    '& img': {
-      display: 'block',
-      margin: 'auto',
+  },
+  toc: {
+    [theme.breakpoints.up('md')]: {
+      width: 'calc(100% - 175px)',
     },
-    '& .blog-description': {
-      fontSize: theme.typography.pxToRem(14),
-      textAlign: 'center',
+    [theme.breakpoints.up('lg')]: {
+      width: 'calc(100% - 175px - 240px)',
     },
   },
   footer: {
@@ -89,10 +85,8 @@ function findIndex(array, comp) {
 
 function MarkdownDocs(props) {
   const {
-    blog,
     classes,
     disableAd = false,
-    disableEdit,
     disableToc = false,
     markdown: markdownProp,
     markdownLocation: markdownLocationProp,
@@ -126,7 +120,6 @@ function MarkdownDocs(props) {
         title={`${headers.title || getTitle(markdownDocs.markdown)} - Material-UI`}
         description={headers.description || getDescription(markdownDocs.markdown)}
       />
-      {disableToc ? null : <AppTableOfContents contents={markdownDocs.contents} />}
       {disableAd ? null : (
         <Portal
           container={() => {
@@ -138,60 +131,64 @@ function MarkdownDocs(props) {
           <Ad />
         </Portal>
       )}
-      <AppContent disableAd={disableAd} disableToc={disableToc}>
-        {!disableEdit ? (
-          <div className={classes.header}>
+      <div
+        className={clsx({
+          [classes.ad]: !disableAd,
+          [classes.toc]: !disableToc,
+        })}
+      >
+        <AppContainer className={classes.container}>
+          <div className={classes.actions}>
             <EditPage markdownLocation={markdownDocs.location} />
           </div>
-        ) : null}
-        <div className={clsx({ [classes.markdownElementBlog]: blog })}>{markdownDocs.element}</div>
-        <footer className={classes.footer}>
-          {!currentPage ||
-          currentPage.displayNav === false ||
-          (nextPage.displayNav === false && !prevPage) ? null : (
-            <React.Fragment>
-              <Divider />
-              <div className={classes.pagination}>
-                {prevPage ? (
-                  <Button
-                    component={Link}
-                    naked
-                    href={prevPage.pathname}
-                    size="large"
-                    className={classes.pageLinkButton}
-                    startIcon={<ChevronLeftIcon />}
-                  >
-                    {pageToTitleI18n(prevPage, t)}
-                  </Button>
-                ) : (
-                  <div />
-                )}
-                {nextPage.displayNav === false ? null : (
-                  <Button
-                    component={Link}
-                    naked
-                    href={nextPage.pathname}
-                    size="large"
-                    className={classes.pageLinkButton}
-                    endIcon={<ChevronRightIcon />}
-                  >
-                    {pageToTitleI18n(nextPage, t)}
-                  </Button>
-                )}
-              </div>
-            </React.Fragment>
-          )}
-        </footer>
-      </AppContent>
+          {markdownDocs.element}
+          <footer className={classes.footer}>
+            {!currentPage ||
+            currentPage.displayNav === false ||
+            (nextPage.displayNav === false && !prevPage) ? null : (
+              <React.Fragment>
+                <Divider />
+                <div className={classes.pagination}>
+                  {prevPage ? (
+                    <Button
+                      component={Link}
+                      naked
+                      href={prevPage.pathname}
+                      size="large"
+                      className={classes.pageLinkButton}
+                      startIcon={<ChevronLeftIcon />}
+                    >
+                      {pageToTitleI18n(prevPage, t)}
+                    </Button>
+                  ) : (
+                    <div />
+                  )}
+                  {nextPage.displayNav === false ? null : (
+                    <Button
+                      component={Link}
+                      naked
+                      href={nextPage.pathname}
+                      size="large"
+                      className={classes.pageLinkButton}
+                      endIcon={<ChevronRightIcon />}
+                    >
+                      {pageToTitleI18n(nextPage, t)}
+                    </Button>
+                  )}
+                </div>
+              </React.Fragment>
+            )}
+          </footer>
+        </AppContainer>
+      </div>
+      {disableToc ? null : <AppTableOfContents contents={markdownDocs.contents} />}
     </AppFrame>
   );
 }
 
 MarkdownDocs.propTypes = {
-  blog: PropTypes.bool,
   classes: PropTypes.object.isRequired,
   disableAd: PropTypes.bool,
-  disableEdit: PropTypes.bool,
   disableToc: PropTypes.bool,
   markdown: PropTypes.string,
   // You can define the direction location of the markdown file.
diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index 54515435d01c30..4ab7860e2c30e2 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/docs/src/modules/components/MarkdownElement.js
@@ -181,9 +181,8 @@ const styles = theme => ({
       margin: '32px 0 16px',
     },
     '& p, & ul, & ol': {
-      lineHeight: 1.6,
       marginTop: 0,
-      marginBottom: '16px',
+      marginBottom: 16,
     },
     '& ul': {
       paddingLeft: 30,
diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js
new file mode 100644
index 00000000000000..9d94126e1fac21
--- /dev/null
+++ b/docs/src/modules/components/TopLayoutBlog.js
@@ -0,0 +1,93 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Head from 'docs/src/modules/components/Head';
+import AppFrame from 'docs/src/modules/components/AppFrame';
+import AppContainer from 'docs/src/modules/components/AppContainer';
+import Link from '@material-ui/core/Link';
+import useMarkdownDocs from 'docs/src/modules/components/useMarkdownDocs';
+import { getHeaders, getTitle, getDescription } from 'docs/src/modules/utils/parseMarkdown';
+import AppFooter from 'docs/src/modules/components/AppFooter';
+
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+  },
+  back: {
+    display: 'block',
+    marginBottom: theme.spacing(4),
+  },
+  container: {
+    marginBottom: theme.spacing(20),
+    maxWidth: 680 + 64,
+    '& .markdownElement': {
+      fontSize: 18,
+      lineHeight: 1.7,
+    },
+    '& img': {
+      display: 'block',
+      margin: 'auto',
+    },
+    '& .blog-description': {
+      fontSize: theme.typography.pxToRem(14),
+      textAlign: 'center',
+    },
+  },
+});
+
+function TopLayoutCompany(props) {
+  const {
+    classes,
+    markdown: markdownProp,
+    markdownLocation: markdownLocationProp,
+    req,
+    reqPrefix,
+    reqSource,
+  } = props;
+
+  const markdownDocs = useMarkdownDocs({
+    markdown: markdownProp,
+    markdownLocation: markdownLocationProp,
+    req,
+    reqPrefix,
+    reqSource,
+  });
+
+  const headers = getHeaders(markdownDocs.markdown);
+
+  return (
+    <AppFrame>
+      <Head
+        title={`${headers.title || getTitle(markdownDocs.markdown)} - Material-UI`}
+        description={headers.description || getDescription(markdownDocs.markdown)}
+      />
+      <div className={classes.root}>
+        <AppContainer className={classes.container}>
+          <Link
+            href="https://medium.com/material-ui"
+            rel="nofollow"
+            color="textSecondary"
+            className={classes.back}
+          >
+            {'< Back to blog'}
+          </Link>
+          {markdownDocs.element}
+        </AppContainer>
+        <AppFooter />
+      </div>
+    </AppFrame>
+  );
+}
+
+TopLayoutCompany.propTypes = {
+  classes: PropTypes.object.isRequired,
+  markdown: PropTypes.string,
+  // You can define the direction location of the markdown file.
+  // Otherwise, we try to determine it with an heuristic.
+  markdownLocation: PropTypes.string,
+  req: PropTypes.func,
+  reqPrefix: PropTypes.string,
+  reqSource: PropTypes.func,
+};
+
+export default withStyles(styles)(TopLayoutCompany);
diff --git a/docs/src/modules/components/TopLayoutCompany.js b/docs/src/modules/components/TopLayoutCompany.js
index a869efff83d8d5..0e01b0ddfadc48 100644
--- a/docs/src/modules/components/TopLayoutCompany.js
+++ b/docs/src/modules/components/TopLayoutCompany.js
@@ -3,16 +3,16 @@ import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import Head from 'docs/src/modules/components/Head';
 import AppFrame from 'docs/src/modules/components/AppFrame';
-import AppContent from 'docs/src/modules/components/AppContent';
+import AppContainer from 'docs/src/modules/components/AppContainer';
 import useMarkdownDocs from 'docs/src/modules/components/useMarkdownDocs';
 import { getHeaders, getTitle, getDescription } from 'docs/src/modules/utils/parseMarkdown';
-import HomeFooter from 'docs/src/modules/components/HomeFooter';
+import AppFooter from 'docs/src/modules/components/AppFooter';
 
 const styles = theme => ({
   root: {
     flex: '1 0 100%',
   },
-  appContent: {
+  container: {
     marginBottom: theme.spacing(20),
   },
 });
@@ -44,10 +44,8 @@ function TopLayoutCompany(props) {
         description={headers.description || getDescription(markdownDocs.markdown)}
       />
       <div className={classes.root}>
-        <AppContent disableAd disableToc className={classes.appContent}>
-          {markdownDocs.element}
-        </AppContent>
-        <HomeFooter />
+        <AppContainer className={classes.container}>{markdownDocs.element}</AppContainer>
+        <AppFooter />
       </div>
     </AppFrame>
   );
diff --git a/docs/src/pages.js b/docs/src/pages.js
index e99760c34a486a..382e60e7fc7e20 100644
--- a/docs/src/pages.js
+++ b/docs/src/pages.js
@@ -212,34 +212,11 @@ const pages = [
       { pathname: '/discover-more/languages' },
     ],
   },
-  {
-    pathname: '/blog',
-    children: [
-      { pathname: '/blog/december-2019-update' },
-      { pathname: '/blog/november-2019-update' },
-      { pathname: '/blog/october-2019-update' },
-      { pathname: '/blog/september-2019-update' },
-      { pathname: '/blog/august-2019-update' },
-      { pathname: '/blog/july-2019-update' },
-      { pathname: '/blog/june-2019-update' },
-      { pathname: '/blog/may-2019-update' },
-      {
-        pathname: '/blog/material-ui-v4-is-out',
-        title: 'Material-UI v4 is out',
-      },
-      { pathname: '/blog/april-2019-update' },
-      { pathname: '/blog/march-2019-update' },
-      { pathname: '/blog/2019-developer-survey-results' },
-      {
-        pathname: '/blog/material-ui-v1-is-out',
-        title: 'Material-UI v1 is out',
-      },
-    ],
-  },
   { pathname: '/versions', displayNav: false },
-  { pathname: '/', displayNav: false, title: false },
-  { pathname: '/company/about', displayNav: false, title: false },
-  { pathname: '/company/contact', displayNav: false, title: false },
+  { pathname: '/', displayNav: false, disableDrawer: true },
+  { pathname: 'https://medium.com/material-ui', title: 'Blog' },
+  { pathname: '/company/about', displayNav: false, disableDrawer: true },
+  { pathname: '/company/contact', displayNav: false, disableDrawer: true },
 ];
 
 export default pages;
diff --git a/docs/src/pages/discover-more/team/Team.js b/docs/src/pages/discover-more/team/Team.js
index cba470b1eea255..65fe37899e758b 100644
--- a/docs/src/pages/discover-more/team/Team.js
+++ b/docs/src/pages/discover-more/team/Team.js
@@ -139,7 +139,7 @@ function Group(props) {
       <Grid container spacing={2} className={classes.container}>
         {members.map(member => (
           <Grid key={member.name} item xs={12} md={6}>
-            <Paper>
+            <Paper variant="outlined">
               <Grid container wrap="nowrap">
                 <Grid item>
                   <CardMedia
diff --git a/docs/src/pages/discover-more/team/team.md b/docs/src/pages/discover-more/team/team.md
index abf517134b73bc..912d68d77b5e23 100644
--- a/docs/src/pages/discover-more/team/team.md
+++ b/docs/src/pages/discover-more/team/team.md
@@ -4,7 +4,7 @@
 
 Material-UI is maintained by a small group of invaluable core contributors, with the massive support and involvement of the community.
 
-{{"demo": "pages/discover-more/team/Team.js", "hideHeader": true, "bg": true}}
+{{"demo": "pages/discover-more/team/Team.js", "hideHeader": true, "bg": "inline"}}
 
 Get involved with Material-UI development by [opening an issue](https://github.com/mui-org/material-ui/issues/new) or submitting a pull request.
 Read the [contributing guidelines](https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md) for information on how we develop.