diff --git a/src/pages/guides/getting_started/hello-world.md b/src/pages/guides/getting_started/hello-world.md
index b30d911f3..acd4b99a6 100644
--- a/src/pages/guides/getting_started/hello-world.md
+++ b/src/pages/guides/getting_started/hello-world.md
@@ -61,6 +61,15 @@ A pre-requisite for both tracks is to have enabled the **Add-on Development** mo
   </ol>
 </details>
 
+<!-- Replace with URL "https://new.express.adobe.com/new?category=add-ons&mode=playground&session=saved before merging -->
+<div className="playground-button-container">
+<button className="open-playground-button"
+     onclick="window.open(`https://205504.prenv.projectx.corp.adobe.com/new?category=add-ons&mode=playground&session=saved`, '_blank');"
+     >
+  Launch Code Playground
+</button>
+</div>
+
 ## Code Playground
 
 We have a [dedicated page](./code_playground.md) for the Code Playground, which you can always refer to for more detailed information. Here, we'll focus on the basics to get you started, linking to the relevant sections of the full documentation and including screenshots to help you navigate the interface.
diff --git a/src/styles.css b/src/styles.css
index 30288440e..6778c1d4d 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -180,3 +180,20 @@ section:has(> div > p > span > picture) {
 .developers-live-announcement a:hover span {
   color: #fff !important;
 }
+
+.open-playground-button {
+  padding: 10px 20px;
+  border-radius: 20px;
+  font-weight: 700;
+  border: 2px solid #000000;
+  background-color: #ffffff;
+  cursor: pointer;
+  font-family: "adobe-clean" !important;
+}
+
+.playground-button-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 20px 0;
+}