diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
new file mode 100644
index 000000000..bcd20a4c7
--- /dev/null
+++ b/.devcontainer/devcontainer.json
@@ -0,0 +1,27 @@
+// https://github.com/microsoft/vscode-dev-containers/tree/v0.183.0/containers/python-3
+{
+	"name": "ESPHome - docs",
+	"image": "mcr.microsoft.com/vscode/devcontainers/python:0-3.6",
+	"postCreateCommand": "pip3 install -r requirements.txt",
+	"forwardPorts": [8000],
+	"settings": { 
+		"python.pythonPath": "/usr/local/bin/python",
+		"python.languageServer": "Pylance",
+		"python.linting.enabled": true,
+		"python.linting.pylintEnabled": true,
+		"python.formatting.autopep8Path": "/usr/local/py-utils/bin/autopep8",
+		"python.formatting.blackPath": "/usr/local/py-utils/bin/black",
+		"python.formatting.yapfPath": "/usr/local/py-utils/bin/yapf",
+		"python.linting.banditPath": "/usr/local/py-utils/bin/bandit",
+		"python.linting.flake8Path": "/usr/local/py-utils/bin/flake8",
+		"python.linting.mypyPath": "/usr/local/py-utils/bin/mypy",
+		"python.linting.pycodestylePath": "/usr/local/py-utils/bin/pycodestyle",
+		"python.linting.pydocstylePath": "/usr/local/py-utils/bin/pydocstyle",
+		"python.linting.pylintPath": "/usr/local/py-utils/bin/pylint"
+	},
+
+	"extensions": [
+		"ms-python.python",
+		"ms-python.vscode-pylance"
+	]
+}
diff --git a/Makefile b/Makefile
index 4ca8cfd59..b69a6870b 100644
--- a/Makefile
+++ b/Makefile
@@ -21,14 +21,16 @@ help:
 api:
 	mkdir -p _build/html/api
 	@if [ ! -d "$(ESPHOME_PATH)" ]; then \
-	  git clone --branch $(ESPHOME_REF) https://github.com/esphome/esphome.git $(ESPHOME_PATH); \
+	  git clone --branch $(ESPHOME_REF) https://github.com/esphome/esphome.git $(ESPHOME_PATH) || \
+	  git clone --branch beta https://github.com/esphome/esphome.git $(ESPHOME_PATH); \
 	fi
 	ESPHOME_PATH=$(ESPHOME_PATH) doxygen Doxygen
 
 netlify-api: netlify-dependencies
 	mkdir -p _build/html/api
 	@if [ ! -d "$(ESPHOME_PATH)" ]; then \
-	  git clone --branch $(ESPHOME_REF) https://github.com/esphome/esphome.git $(ESPHOME_PATH); \
+	  git clone --branch $(ESPHOME_REF) https://github.com/esphome/esphome.git $(ESPHOME_PATH) || \
+	  git clone --branch beta https://github.com/esphome/esphome.git $(ESPHOME_PATH); \
 	fi
 	ESPHOME_PATH=$(ESPHOME_PATH) ../doxybin/doxygen Doxygen
 
diff --git a/_static/custom.css b/_static/custom.css
index c0b666de4..d6723c9d8 100644
--- a/_static/custom.css
+++ b/_static/custom.css
@@ -9,6 +9,10 @@ div.document {
   margin-bottom: 50px;
 }
 
+div.body {
+  min-width: initial;
+}
+
 img.component-image {
   border: none;
   vertical-align: middle;
@@ -37,7 +41,7 @@ table.docutils {
   }
   100% {
     visibility: visible;
-}
+  }
 }
 @keyframes blink_effect {
   0% {
@@ -57,14 +61,14 @@ table.docutils {
   bottom: 0;
   right: 0;
   width: 100%;
-  background-color: rgba(20,20,20,0.8);
+  background-color: rgba(20, 20, 20, 0.8);
   min-height: 26px;
   font-size: 14px;
   color: #ccc;
   line-height: 26px;
   padding: 8px 0 8px 30px;
   z-index: 9999;
-  display: none
+  display: none;
 }
 .footer-button-container {
   margin: 0 60px 0 10px;
@@ -118,7 +122,6 @@ div.index-shields {
   margin-right: auto;
 }
 
-
 .guide-container {
   margin: 32px 0;
   display: flex;
@@ -126,18 +129,15 @@ div.index-shields {
 }
 
 .guide-card {
-  color: #004B6B;
+  color: #004b6b;
   display: block;
   height: auto;
   width: 300px;
   background-color: #f3f6f6;
   border-radius: 8px;
-  box-shadow: -10px 10px 32px -12px #000;
+  box-shadow: 4px 4px 8px -4px #00000075;
   padding-bottom: 8px;
-}
-
-.guide-card:not(:first-child) {
-    margin-left: -40px;
+  box-sizing: border-box;
 }
 
 .guide-card-title {
@@ -152,14 +152,28 @@ div.index-shields {
   white-space: pre-line;
 }
 
+@media screen and (min-width: 870px) {
+  .guide-card:first-child {
+    z-index: 100;
+  }
+  .guide-card:nth-child(2) {
+    z-index: 50;
+  }
+
+  .guide-card:not(:first-child) {
+    margin-left: -40px;
+    padding-left: 40px;
+  }
+}
 
 @media screen and (max-width: 870px) {
-  .guide-container  {
-    flex-direction: column-reverse;
+  .guide-container {
+    flex-direction: column;
   }
   .guide-card {
     width: 100%;
     margin: 8px 0;
+    padding: 0px;
   }
   .guide-card:not(:first-child) {
     margin-left: 0;
@@ -167,4 +181,4 @@ div.index-shields {
   .guide-card ul {
     margin-left: 32px;
   }
-}
\ No newline at end of file
+}
diff --git a/index.rst b/index.rst
index 5f8c588d5..298369206 100644
--- a/index.rst
+++ b/index.rst
@@ -17,27 +17,27 @@ ESPHome is a system to control your ESP8266/ESP32 by simple yet powerful configu
 
     <div class="guide-container">
         <div class="guide-card">
-            <h3 class="guide-card-title">Keeping up</h3>
+            <h3 class="guide-card-title">Getting started</h3>
             <ul>
                 <li>
-                    <a class="reference" href="/changelog/index.html">
-                        Changelog
+                    <a class="reference" href="/guides/getting_started_hassio.html">
+                        ESPHome Dashboard
                     </a>
                 </li>
                 <li>
-                    <a class="reference" href="/guides/supporters.html">
-                        Supporters
+                    <a class="reference" href="/guides/getting_started_command_line.html">
+                        Command Line Interface
                     </a>
                 </li>
                 <li>
-                    <a class="reference" href="/guides/contributing.html">
-                        Contributing
+                    <a class="reference" href="/guides/migrate_sonoff_tasmota.html">
+                        Migrating from Tasmota
                     </a>
                 </li>
             </ul>
             <pre class="guide-code">
                 esphome:
-                &nbsp;&nbsp;name: Awesome
+                &nbsp;&nbsp;name: awesome
                 &nbsp;&nbsp;platform: ESP32
                 &nbsp;&nbsp;board: nodemcu-32s
             </pre>
@@ -68,21 +68,21 @@ ESPHome is a system to control your ESP8266/ESP32 by simple yet powerful configu
             </ul>
         </div>
         <div class="guide-card">
-            <h3 class="guide-card-title">Getting started</h3>
+            <h3 class="guide-card-title">Keeping up</h3>
             <ul>
                 <li>
-                    <a class="reference" href="/guides/getting_started_hassio.html">
-                        ESPHome Dashboard
+                    <a class="reference" href="/changelog/index.html">
+                        Changelog
                     </a>
                 </li>
                 <li>
-                    <a class="reference" href="/guides/getting_started_command_line.html">
-                        Command Line Interface
+                    <a class="reference" href="/guides/supporters.html">
+                        Supporters
                     </a>
                 </li>
                 <li>
-                    <a class="reference" href="/guides/migrate_sonoff_tasmota.html">
-                        Migrating from Tasmota
+                    <a class="reference" href="/guides/contributing.html">
+                        Contributing
                     </a>
                 </li>
             </ul>