diff --git a/src/components/Content.tsx b/src/components/Content.tsx
index 3ced1c42..23e80a59 100644
--- a/src/components/Content.tsx
+++ b/src/components/Content.tsx
@@ -101,26 +101,41 @@ const LearnContent: React.FC<LearnContentProps> = ({ file }) => {
 
   return (
     <ContentContainer>
-	  {currentIndex !== steps.length - 1 && (
-  		<div style={{ display: "flex", justifyContent: "flex-end", marginBottom: "12px" }}>
-    	  <Button
-			type="link"
-			onClick={handleExitLearning}
-			style={{
-    		  background: "transparent",
-			  border: "none",
-			  color: "#6b7280",
-			  cursor: "pointer",
-			  fontSize: "0.9rem",
-			  textDecoration: "underline",
-			  padding: 0,
-			  height: "auto"
-			}}
-		  >
-			Exit learning
-		  </Button>
-	    </div>
-	  )}
+      <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: "12px", gap: "10px" }}>
+        {steps[currentIndex]?.sampleName && (
+          <Button
+            type="primary"
+            onClick={() => navigate(`/?sample=${encodeURIComponent(steps[currentIndex].sampleName!)}`)}
+            style={{
+              backgroundColor: colors.primary,
+              borderColor: colors.primary,
+              fontSize: "0.9rem",
+              height: "auto",
+              padding: "4px 12px"
+            }}
+          >
+            Open in Playground
+          </Button>
+        )}
+        {currentIndex !== steps.length - 1 && (
+          <Button
+            type="link"
+            onClick={handleExitLearning}
+            style={{
+              background: "transparent",
+              border: "none",
+              color: "#6b7280",
+              cursor: "pointer",
+              fontSize: "0.9rem",
+              textDecoration: "underline",
+              padding: 0,
+              height: "auto"
+            }}
+          >
+            Exit learning
+          </Button>
+        )}
+      </div>
       {content && (
         <ReactMarkdown
           rehypePlugins={[rehypeRaw, rehypeHighlight]}
@@ -153,14 +168,14 @@ const LearnContent: React.FC<LearnContentProps> = ({ file }) => {
           <LeftOutlined /> Previous
         </NavigationButton>
         {currentIndex === steps.length - 1 ? (
-		  <NavigationButton onClick={handleExitLearning}>
-		  Finish
-		  </NavigationButton>
-		) : (
-		  <NavigationButton onClick={handleNext}>
-		  Next <RightOutlined />
-		  </NavigationButton>
-		)}
+          <NavigationButton onClick={handleExitLearning}>
+            Finish
+          </NavigationButton>
+        ) : (
+          <NavigationButton onClick={handleNext}>
+            Next <RightOutlined />
+          </NavigationButton>
+        )}
       </NavigationButtons>
     </ContentContainer>
   );
diff --git a/src/constants/learningSteps/steps.ts b/src/constants/learningSteps/steps.ts
index 7c53c2f5..ed49643e 100644
--- a/src/constants/learningSteps/steps.ts
+++ b/src/constants/learningSteps/steps.ts
@@ -2,7 +2,7 @@
 
 export const steps = [
   { title: "Overview", link: "/learn/intro" },
-  { title: "Module 1", link: "/learn/module1" },
-  { title: "Module 2", link: "/learn/module2" },
-  { title: "Module 3", link: "/learn/module3" },
+  { title: "Module 1", link: "/learn/module1", sampleName: "Hello World" },
+  { title: "Module 2", link: "/learn/module2", sampleName: "Formula Now" },
+  { title: "Module 3", link: "/learn/module3", sampleName: "Join" },
 ];
diff --git a/src/store/store.ts b/src/store/store.ts
index 82e2dba3..8e3d8258 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -234,8 +234,11 @@ const useAppStore = create<AppState>()(
         init: async () => {
           const params = new URLSearchParams(window.location.search);
           const compressedData = params.get("data");
+          const sampleName = params.get("sample");
           if (compressedData) {
             await get().loadFromLink(compressedData);
+          } else if (sampleName) {
+            await get().loadSample(sampleName);
           } else {
             await get().rebuild();
           }