diff --git a/README.md b/README.md
index 423ff360b603..b35371d25e4e 100644
--- a/README.md
+++ b/README.md
@@ -25,7 +25,7 @@
 
 Docusaurus is a project for building, deploying, and maintaining open source project websites easily.
 
-Try Docusaurus on **CodeSandbox** immediately with [new.docusaurus.io](http://new.docusaurus.io/)
+Use **[new.docusaurus.io](https://new.docusaurus.io)** to test Docusaurus immediately in CodeSandbox.
 
 - **Simple to Start**
 
diff --git a/website/docs/installation.md b/website/docs/installation.md
index 63e5d5a14c32..227ef58492a2 100644
--- a/website/docs/installation.md
+++ b/website/docs/installation.md
@@ -5,6 +5,12 @@ title: Installation
 
 Docusaurus is essentially a set of npm [packages](https://github.com/facebook/docusaurus/tree/master/packages) that can be installed over npm.
 
+:::tip
+
+Use **[new.docusaurus.io](https://new.docusaurus.io)** to test Docusaurus immediately in CodeSandbox.
+
+:::
+
 ## Requirements
 
 - [Node.js](https://nodejs.org/en/download/) version >= 10.15.1 or above (which can be checked by running `node -v`). You can use [nvm](https://github.com/nvm-sh/nvm) for managing multiple Node versions on a single machine installed
diff --git a/website/docs/introduction.md b/website/docs/introduction.md
index 9df13d66e91e..362593859b6d 100644
--- a/website/docs/introduction.md
+++ b/website/docs/introduction.md
@@ -20,6 +20,12 @@ Most users are already using v2 ([trends](https://www.npmtrends.com/docusaurus-v
 - :white_check_mark: You want the full power of React and MDX
 - :white_check_mark: You do not need support for IE11
 
+:::tip
+
+Use **[new.docusaurus.io](https://new.docusaurus.io)** to test Docusaurus immediately in CodeSandbox.
+
+:::
+
 **Use [Docusaurus v1](https://docusaurus.io/) if:**
 
 - :x: You don't want a single-page application (SPA)
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index fef1bb41a2e8..ce491f619c3a 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -114,6 +114,11 @@ function Home() {
                 to={useBaseUrl('docs/')}>
                 <Translate>Get Started</Translate>
               </Link>
+              <Link
+                className={styles.indexCtaTryNowButton}
+                to="https://new.docusaurus.io">
+                <Translate>Playground</Translate>
+              </Link>
               <span className={styles.indexCtasGitHubButtonWrapper}>
                 <iframe
                   className={styles.indexCtasGitHubButton}
diff --git a/website/src/pages/styles.module.css b/website/src/pages/styles.module.css
index 982a14f6a56a..0ec989c63a30 100644
--- a/website/src/pages/styles.module.css
+++ b/website/src/pages/styles.module.css
@@ -122,10 +122,23 @@
 
 .indexCtasGitHubButton {
   border: none;
-  margin-left: 24px;
   overflow: hidden;
 }
 
+.indexCtaTryNowButton {
+  line-height: 1.2em;
+  text-decoration: underline;
+  text-transform: uppercase;
+  transition: background 0.3s, color 0.3s;
+  color: #fff;
+  font-size: 14px;
+  font-weight: bold;
+  margin: 0 36px;
+}
+.indexCtaTryNowButton:hover {
+  color: var(--ifm-color-primary);
+}
+
 @media only screen and (max-width: 768px) {
   .hero {
     padding-left: 20px;