diff --git a/website/www/site/assets/scss/_global.sass b/website/www/site/assets/scss/_global.sass
index dcbb49f5d1c9..fae897ef3b04 100644
--- a/website/www/site/assets/scss/_global.sass
+++ b/website/www/site/assets/scss/_global.sass
@@ -26,6 +26,9 @@ body
 .body
   background: #fff
   margin: 0 auto
+  .body__contained
+    h1
+      text-align: center
   .no__padding
     padding: 0
   &:not(.body--index)
@@ -34,7 +37,6 @@ body
         padding: 0
       padding: 0 30px
       max-width: 1280px
-
       figure
         img
           width: 100%
diff --git a/website/www/site/i18n/home/en.yaml b/website/www/site/i18n/home/en.yaml
index 2d9157be2c1a..e44d3374edfd 100644
--- a/website/www/site/i18n/home/en.yaml
+++ b/website/www/site/i18n/home/en.yaml
@@ -22,6 +22,8 @@
   translation: "Python Quickstart"
 - id: home-go-quickstart
   translation: "Go Quickstart"
+- id: home-playground
+  translation: "Try Playground"
 - id: home-hero-blog-title
   translation: "The latest from the blog"
 - id: home-cards-title
diff --git a/website/www/site/layouts/_default/baseof.html b/website/www/site/layouts/_default/baseof.html
index 2a75558f5d85..56f5edc47802 100644
--- a/website/www/site/layouts/_default/baseof.html
+++ b/website/www/site/layouts/_default/baseof.html
@@ -21,6 +21,7 @@
     {{ block "hero-section" . }}{{ end }}
     {{ block "ctas-section" . }}{{ end }}
     {{ block "pillars-section" . }}{{ end }}
+    {{ block "playground-section" . }}{{ end }}
     {{ block "graphic-section" . }}{{ end }}
     {{ block "calendar-section" . }}{{ end }}
     {{ block "quotes-section" . }}{{ end }}
diff --git a/website/www/site/layouts/index.html b/website/www/site/layouts/index.html
index 10a9f213d916..146a21dd2587 100644
--- a/website/www/site/layouts/index.html
+++ b/website/www/site/layouts/index.html
@@ -60,6 +60,24 @@ <h2 class="pillars-title">
   </div>
 {{ end }}
 
+{{ define "playground-section" }}
+<div class="body__contained body__section-nav">
+  <h1>Try Beam Playground</h1>
+  <p>Beam Playground is an interactive environment to try out Beam transforms and examples without having to install Apache Beam in your environment.
+    You can try an Apache Beam examples at <a href="https://play.beam.apache.org/">Beam Playground (Beta)</a>.
+  </p>
+  <br>
+  <br>
+  <iframe
+          src="https://play.beam.apache.org/embedded?enabled=true&example=SDK_JAVA/PRECOMPILED_OBJECT_TYPE_EXAMPLE/MinimalWordCount&code="
+          width="100%"
+          height="700px"
+          class="code-snippet playground"
+          allow="clipboard-write">
+  </iframe>
+</div>
+{{ end }}
+
 {{ define "graphic-section" }}
   <div class="graphic">
     <div class="quotes">
@@ -232,5 +250,8 @@ <h2 class="calendar-title">
     <div class='ctas_row'>
       <a class="ctas_button" href={{ "/get-started/quickstart-go/" | relLangURL }}>{{ T "home-go-quickstart" }}</a>
     </div>
+    <div class='ctas_row'>
+      <a class="ctas_button" href={{ "https://play.beam.apache.org/" | relLangURL }}>{{ T "home-playground" }}</a>
+    </div>
   </div>
 {{ end }}