diff --git a/apps/knapsack/data/blocks/block.Cb5upJUkpf.json b/apps/knapsack/data/blocks/block.Cb5upJUkpf.json
new file mode 100644
index 000000000..eb36b868b
--- /dev/null
+++ b/apps/knapsack/data/blocks/block.Cb5upJUkpf.json
@@ -0,0 +1,9 @@
+{
+  "id": "Cb5upJUkpf",
+  "data": {
+    "patternId": "button",
+    "demoId": "LVG5iF-p9d",
+    "templateId": "web-components-raE1x4tYL"
+  },
+  "blockType": "pattern-template-block"
+}
diff --git a/apps/knapsack/data/blocks/block.UjlWiJB4V3.json b/apps/knapsack/data/blocks/block.UjlWiJB4V3.json
new file mode 100644
index 000000000..11627ca8a
--- /dev/null
+++ b/apps/knapsack/data/blocks/block.UjlWiJB4V3.json
@@ -0,0 +1,24 @@
+{
+  "id": "UjlWiJB4V3",
+  "data": {
+    "content": {
+      "type": "doc",
+      "content": [
+        {
+          "type": "heading",
+          "attrs": {
+            "level": 2,
+            "textAlign": "left"
+          },
+          "content": [
+            {
+              "text": "Web component",
+              "type": "text"
+            }
+          ]
+        }
+      ]
+    }
+  },
+  "blockType": "text-editor"
+}
diff --git a/apps/knapsack/data/blocks/block.glvDIXMeB7.json b/apps/knapsack/data/blocks/block.glvDIXMeB7.json
new file mode 100644
index 000000000..33c944bd5
--- /dev/null
+++ b/apps/knapsack/data/blocks/block.glvDIXMeB7.json
@@ -0,0 +1,24 @@
+{
+  "id": "glvDIXMeB7",
+  "data": {
+    "content": {
+      "type": "doc",
+      "content": [
+        {
+          "type": "heading",
+          "attrs": {
+            "level": 2,
+            "textAlign": "left"
+          },
+          "content": [
+            {
+              "text": "Angular",
+              "type": "text"
+            }
+          ]
+        }
+      ]
+    }
+  },
+  "blockType": "text-editor"
+}
diff --git a/apps/knapsack/data/blocks/block.pJB-kOoTbN.json b/apps/knapsack/data/blocks/block.pJB-kOoTbN.json
new file mode 100644
index 000000000..fe2a00439
--- /dev/null
+++ b/apps/knapsack/data/blocks/block.pJB-kOoTbN.json
@@ -0,0 +1,9 @@
+{
+  "id": "pJB-kOoTbN",
+  "data": {
+    "patternId": "button",
+    "demoId": "CRFHBobaZj",
+    "templateId": "angular-i3OR9O7kXg"
+  },
+  "blockType": "pattern-template-block"
+}
diff --git a/apps/knapsack/data/knapsack.pattern.action-ribbon.json b/apps/knapsack/data/knapsack.pattern.action-ribbon.json
index 111c3cd96..59afbc27b 100644
--- a/apps/knapsack/data/knapsack.pattern.action-ribbon.json
+++ b/apps/knapsack/data/knapsack.pattern.action-ribbon.json
@@ -84,6 +84,10 @@
       "id": "DGBIlJlEO",
       "type": "designSrc",
       "minRoleNeeded": "ADMIN"
+    },
+    {
+      "id": "34uA0en9tB",
+      "type": "subPage"
     }
   ],
   "subPages": [
@@ -134,6 +138,11 @@
         "OEyAa6Yh6",
         "gYAVv4-IHV"
       ]
+    },
+    {
+      "id": "34uA0en9tB",
+      "title": "Code",
+      "blockIds": ["UjlWiJB4V3", "Cb5upJUkpf", "glvDIXMeB7", "pJB-kOoTbN"]
     }
   ],
   "designSrcComponentsById": {