diff --git a/package.json b/package.json
index e4e3d2af1..f3035fd90 100644
--- a/package.json
+++ b/package.json
@@ -203,7 +203,6 @@
     "remark": "^14.0.3",
     "remark-gfm": "^3.0.1",
     "remark-parse": "^10.0.2",
-    "remark-rehype": "^10.1.0",
     "remark-toc": "^8.0.1",
     "rimraf": "^4.3.1",
     "storybook": "^8.1.10",
@@ -223,7 +222,6 @@
     "ts-proto": "^1.138.0",
     "tslib": "^2.4.1",
     "typescript": "^5.2.2",
-    "unified": "^11.0.2",
     "unist-util-visit": "^5.0.0",
     "vite": "^5.0.12",
     "vite-node": "^0.23.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 219ffe0eb..772e0407a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,4 +1,4 @@
-lockfileVersion: '6.0'
+lockfileVersion: '6.1'
 
 settings:
   autoInstallPeers: true
@@ -382,9 +382,6 @@ devDependencies:
   remark-parse:
     specifier: ^10.0.2
     version: 10.0.2
-  remark-rehype:
-    specifier: ^10.1.0
-    version: 10.1.0
   remark-toc:
     specifier: ^8.0.1
     version: 8.0.1
@@ -442,9 +439,6 @@ devDependencies:
   typescript:
     specifier: ^5.2.2
     version: 5.2.2
-  unified:
-    specifier: ^11.0.2
-    version: 11.0.2
   unist-util-visit:
     specifier: ^5.0.0
     version: 5.0.0
@@ -604,7 +598,7 @@ packages:
       '@babel/traverse': 7.24.1
       '@babel/types': 7.24.0
       convert-source-map: 2.0.0
-      debug: 4.3.4
+      debug: 4.3.7
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -770,7 +764,7 @@ packages:
       '@babel/core': 7.24.4
       '@babel/helper-compilation-targets': 7.24.7
       '@babel/helper-plugin-utils': 7.24.7
-      debug: 4.3.4
+      debug: 4.3.7
       lodash.debounce: 4.0.8
       resolve: 1.22.8
     transitivePeerDependencies:
@@ -2329,7 +2323,7 @@ packages:
       '@babel/helper-split-export-declaration': 7.22.6
       '@babel/parser': 7.24.4
       '@babel/types': 7.24.0
-      debug: 4.3.4
+      debug: 4.3.7
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
@@ -2347,7 +2341,7 @@ packages:
       '@babel/helper-split-export-declaration': 7.24.7
       '@babel/parser': 7.24.7
       '@babel/types': 7.24.7
-      debug: 4.3.4
+      debug: 4.3.7
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
@@ -3410,7 +3404,7 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
       ajv: 6.12.6
-      debug: 4.3.4
+      debug: 4.3.7
       espree: 9.6.1
       globals: 13.21.0
       ignore: 5.2.4
@@ -3427,7 +3421,7 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
       ajv: 6.12.6
-      debug: 4.3.4
+      debug: 4.3.7
       espree: 9.6.1
       globals: 13.21.0
       ignore: 5.2.4
@@ -3490,7 +3484,7 @@ packages:
     engines: {node: '>=10.10.0'}
     dependencies:
       '@humanwhocodes/object-schema': 1.2.1
-      debug: 4.3.4
+      debug: 4.3.7
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -3502,7 +3496,7 @@ packages:
     deprecated: Use @eslint/config-array instead
     dependencies:
       '@humanwhocodes/object-schema': 1.2.1
-      debug: 4.3.4
+      debug: 4.3.7
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -6306,7 +6300,7 @@ packages:
     dependencies:
       '@typescript-eslint/types': 5.62.0
       '@typescript-eslint/visitor-keys': 5.62.0
-      debug: 4.3.4
+      debug: 4.3.7
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.5.4
@@ -6327,7 +6321,7 @@ packages:
     dependencies:
       '@typescript-eslint/types': 6.4.1
       '@typescript-eslint/visitor-keys': 6.4.1
-      debug: 4.3.4
+      debug: 4.3.7
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.5.4
@@ -6450,7 +6444,7 @@ packages:
     dependencies:
       '@mapbox/node-pre-gyp': 1.0.10
       '@rollup/pluginutils': 4.2.1
-      acorn: 8.11.3
+      acorn: 8.14.0
       async-sema: 3.1.1
       bindings: 1.5.0
       estree-walker: 2.0.2
@@ -6730,7 +6724,7 @@ packages:
   /acorn-globals@7.0.1:
     resolution: {integrity: sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==}
     dependencies:
-      acorn: 8.11.3
+      acorn: 8.14.0
       acorn-walk: 8.2.0
     dev: true
 
@@ -6742,12 +6736,12 @@ packages:
       acorn: 8.11.3
     dev: true
 
-  /acorn-jsx@5.3.2(acorn@8.11.3):
+  /acorn-jsx@5.3.2(acorn@8.14.0):
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      acorn: 8.11.3
+      acorn: 8.14.0
     dev: true
 
   /acorn-walk@8.2.0:
@@ -6769,6 +6763,12 @@ packages:
     resolution: {integrity: sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==}
     engines: {node: '>=0.4.0'}
     hasBin: true
+    dev: true
+
+  /acorn@8.14.0:
+    resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
 
   /acorn@8.8.1:
     resolution: {integrity: sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==}
@@ -6791,7 +6791,7 @@ packages:
     resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
     engines: {node: '>= 6.0.0'}
     dependencies:
-      debug: 4.3.4
+      debug: 4.3.7
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -6800,7 +6800,7 @@ packages:
     resolution: {integrity: sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==}
     engines: {node: '>= 14'}
     dependencies:
-      debug: 4.3.4
+      debug: 4.3.7
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -7754,7 +7754,7 @@ packages:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
       '@types/estree': 1.0.5
-      acorn: 8.11.3
+      acorn: 8.14.0
       estree-walker: 3.0.3
       periscopic: 3.1.0
 
@@ -7889,6 +7889,10 @@ packages:
       yargs: 17.7.2
     dev: true
 
+  /confbox@0.1.8:
+    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
+    dev: true
+
   /console-control-strings@1.1.0:
     resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==}
     dev: true
@@ -8227,6 +8231,18 @@ packages:
         optional: true
     dependencies:
       ms: 2.1.2
+    dev: true
+
+  /debug@4.3.7:
+    resolution: {integrity: sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.3
 
   /decamelize-keys@1.1.1:
     resolution: {integrity: sha512-WiPxgEirIV0/eIOMcnFBA3/IJZAZqKnwAwWyvvdi4lsr1WCN22nhdf/3db3DoZcUjTV2SqfzIwNyp6y2xs3nmg==}
@@ -8440,7 +8456,7 @@ packages:
     hasBin: true
     dependencies:
       address: 1.2.2
-      debug: 4.3.4
+      debug: 4.3.7
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -8453,6 +8469,7 @@ packages:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
     dependencies:
       dequal: 2.0.3
+    dev: false
 
   /didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
@@ -9136,7 +9153,7 @@ packages:
     peerDependencies:
       esbuild: '>=0.12 <1'
     dependencies:
-      debug: 4.3.4
+      debug: 4.3.7
       esbuild: 0.20.2
     transitivePeerDependencies:
       - supports-color
@@ -9634,7 +9651,7 @@ packages:
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.3
-      debug: 4.3.4
+      debug: 4.3.7
       doctrine: 3.0.0
       enquirer: 2.4.1
       escape-string-regexp: 4.0.0
@@ -9731,8 +9748,8 @@ packages:
     resolution: {integrity: sha512-oP3utRkynpZWF/F2x/HZJ+AGtnIclaR7z1pYPxy7NYM2fSO6LgK/Rkny8anRSPK/VwEA1eqm2squui0T7ZMOBg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      acorn: 8.11.3
-      acorn-jsx: 5.3.2(acorn@8.11.3)
+      acorn: 8.14.0
+      acorn-jsx: 5.3.2(acorn@8.14.0)
       eslint-visitor-keys: 3.4.3
     dev: true
 
@@ -9740,8 +9757,8 @@ packages:
     resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      acorn: 8.11.3
-      acorn-jsx: 5.3.2(acorn@8.11.3)
+      acorn: 8.14.0
+      acorn-jsx: 5.3.2(acorn@8.14.0)
       eslint-visitor-keys: 3.4.3
     dev: true
 
@@ -10086,7 +10103,7 @@ packages:
     dependencies:
       chalk: 4.1.2
       commander: 5.1.0
-      debug: 4.3.4
+      debug: 4.3.7
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -10999,7 +11016,7 @@ packages:
     dependencies:
       '@tootallnate/once': 2.0.0
       agent-base: 6.0.2
-      debug: 4.3.4
+      debug: 4.3.7
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -11009,7 +11026,7 @@ packages:
     engines: {node: '>= 6'}
     dependencies:
       agent-base: 6.0.2
-      debug: 4.3.4
+      debug: 4.3.7
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -11019,7 +11036,7 @@ packages:
     engines: {node: '>= 14'}
     dependencies:
       agent-base: 7.1.0
-      debug: 4.3.4
+      debug: 4.3.7
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -11572,7 +11589,7 @@ packages:
     resolution: {integrity: sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==}
     engines: {node: '>=10'}
     dependencies:
-      debug: 4.3.4
+      debug: 4.3.7
       istanbul-lib-coverage: 3.2.0
       source-map: 0.6.1
     transitivePeerDependencies:
@@ -11584,7 +11601,7 @@ packages:
     engines: {node: '>=10'}
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
-      debug: 4.3.4
+      debug: 4.3.7
       istanbul-lib-coverage: 3.2.2
     transitivePeerDependencies:
       - supports-color
@@ -12484,8 +12501,8 @@ packages:
     resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==}
     engines: {node: '>=14'}
     dependencies:
-      mlly: 1.5.0
-      pkg-types: 1.0.3
+      mlly: 1.7.2
+      pkg-types: 1.2.1
     dev: true
 
   /locate-character@3.0.0:
@@ -12706,14 +12723,6 @@ packages:
     resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==}
     dev: true
 
-  /mdast-util-definitions@5.1.2:
-    resolution: {integrity: sha512-8SVPMuHqlPME/z3gqVwWY4zVXn8lqKv/pAhC57FuJ40ImXyBpmO5ukh98zB2v7Blql2FiHjHv9LVztSIqjY+MA==}
-    dependencies:
-      '@types/mdast': 3.0.12
-      '@types/unist': 2.0.8
-      unist-util-visit: 4.1.2
-    dev: true
-
   /mdast-util-find-and-replace@2.2.2:
     resolution: {integrity: sha512-MTtdFRz/eMDHXzeK6W3dO7mXUlF82Gom4y0oOgvHhh/HXZAGvIQDUvQ0SuUx+j2tv44b8xTHOm8K/9OoRFnXKw==}
     dependencies:
@@ -12823,19 +12832,6 @@ packages:
       '@types/mdast': 3.0.12
       unist-util-is: 5.2.1
 
-  /mdast-util-to-hast@12.3.0:
-    resolution: {integrity: sha512-pits93r8PhnIoU4Vy9bjW39M2jJ6/tdHyja9rrot9uujkN7UTU9SDnE6WNJz/IGyQk3XHX6yNNtrBH6cQzm8Hw==}
-    dependencies:
-      '@types/hast': 2.3.5
-      '@types/mdast': 3.0.12
-      mdast-util-definitions: 5.1.2
-      micromark-util-sanitize-uri: 1.2.0
-      trim-lines: 3.0.1
-      unist-util-generated: 2.0.1
-      unist-util-position: 4.0.4
-      unist-util-visit: 4.1.2
-    dev: true
-
   /mdast-util-to-hast@13.2.0:
     resolution: {integrity: sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==}
     dependencies:
@@ -13324,7 +13320,7 @@ packages:
     resolution: {integrity: sha512-uD66tJj54JLYq0De10AhWycZWGQNUvDI55xPgk2sQM5kn1JYlhbCMTtEeT27+vAhW2FBQxLlOmS3pmA7/2z4aA==}
     dependencies:
       '@types/debug': 4.1.8
-      debug: 4.3.4
+      debug: 4.3.7
       decode-named-character-reference: 1.0.2
       micromark-core-commonmark: 1.1.0
       micromark-factory-space: 1.1.0
@@ -13348,7 +13344,7 @@ packages:
     resolution: {integrity: sha512-o/sd0nMof8kYff+TqcDx3VSrgBTcZpSvYcAHIfHhv5VAuNmisCxjhx6YmxS8PFEpb9z5WKWKPdzf0jM23ro3RQ==}
     dependencies:
       '@types/debug': 4.1.8
-      debug: 4.3.4
+      debug: 4.3.7
       decode-named-character-reference: 1.0.2
       devlop: 1.1.0
       micromark-core-commonmark: 2.0.1
@@ -13509,19 +13505,19 @@ packages:
   /mlly@0.5.17:
     resolution: {integrity: sha512-Rn+ai4G+CQXptDFSRNnChEgNr+xAEauYhwRvpPl/UHStTlgkIftplgJRsA2OXPuoUn86K4XAjB26+x5CEvVb6A==}
     dependencies:
-      acorn: 8.11.3
+      acorn: 8.14.0
       pathe: 1.1.2
-      pkg-types: 1.0.3
-      ufo: 1.0.1
+      pkg-types: 1.2.1
+      ufo: 1.5.4
     dev: true
 
-  /mlly@1.5.0:
-    resolution: {integrity: sha512-NPVQvAY1xr1QoVeG0cy8yUYC7FQcOx6evl/RjT1wL5FvzPnzOysoqB/jmx/DhssT2dYa8nxECLAaFI/+gVLhDQ==}
+  /mlly@1.7.2:
+    resolution: {integrity: sha512-tN3dvVHYVz4DhSXinXIk7u9syPYaJvio118uomkovAtWBT+RdbP6Lfh/5Lvo519YMmwBafwlh20IPTXIStscpA==}
     dependencies:
-      acorn: 8.11.3
+      acorn: 8.14.0
       pathe: 1.1.2
-      pkg-types: 1.0.3
-      ufo: 1.3.2
+      pkg-types: 1.2.1
+      ufo: 1.5.4
     dev: true
 
   /mock-socket@9.1.5:
@@ -13548,10 +13544,10 @@ packages:
 
   /ms@2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
+    dev: true
 
   /ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
-    dev: true
 
   /ms@3.0.0-canary.1:
     resolution: {integrity: sha512-kh8ARjh8rMN7Du2igDRO9QJnqCb2xYTJxyQYK7vJJS4TvLLmsbyhiKpSW+t+y26gyOyMd0riphX0GeWKU3ky5g==}
@@ -14243,11 +14239,11 @@ packages:
       find-up: 5.0.0
     dev: true
 
-  /pkg-types@1.0.3:
-    resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==}
+  /pkg-types@1.2.1:
+    resolution: {integrity: sha512-sQoqa8alT3nHjGuTjuKgOnvjo4cljkufdtLMnO2LBP/wRwuDlo1tkaEdMxCRhyGRPacv/ztlZgDPm2b7FAmEvw==}
     dependencies:
-      jsonc-parser: 3.2.0
-      mlly: 1.5.0
+      confbox: 0.1.8
+      mlly: 1.7.2
       pathe: 1.1.2
     dev: true
 
@@ -15404,15 +15400,6 @@ packages:
       - supports-color
     dev: true
 
-  /remark-rehype@10.1.0:
-    resolution: {integrity: sha512-EFmR5zppdBp0WQeDVZ/b66CWJipB2q2VLNFMabzDSGR66Z2fQii83G5gTBbgGEnEEA0QRussvrFHxk1HWGJskw==}
-    dependencies:
-      '@types/hast': 2.3.5
-      '@types/mdast': 3.0.12
-      mdast-util-to-hast: 12.3.0
-      unified: 10.1.2
-    dev: true
-
   /remark-stringify@10.0.3:
     resolution: {integrity: sha512-koyOzCMYoUHudypbj4XpnAKFbkddRMYZHwghnxd7ue5210WzGw6kOBwauJTRUMq16jsovXx8dYNvSSWP89kZ3A==}
     dependencies:
@@ -16794,7 +16781,7 @@ packages:
     hasBin: true
     dependencies:
       '@jridgewell/source-map': 0.3.5
-      acorn: 8.11.3
+      acorn: 8.14.0
       commander: 2.20.3
       source-map-support: 0.5.21
     dev: true
@@ -16926,6 +16913,7 @@ packages:
 
   /trim-lines@3.0.1:
     resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
+    dev: false
 
   /trim-newlines@4.1.1:
     resolution: {integrity: sha512-jRKj0n0jXWo6kh62nA5TEh3+4igKDXLvzBJcPpiizP7oOolUrYIxmVBG9TOtHYFHoddUk6YvAkGeGoSVTXfQXQ==}
@@ -17165,12 +17153,8 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
-  /ufo@1.0.1:
-    resolution: {integrity: sha512-boAm74ubXHY7KJQZLlXrtMz52qFvpsbOxDcZOnw/Wf+LS4Mmyu7JxmzD4tDLtUQtmZECypJ0FrCz4QIe6dvKRA==}
-    dev: true
-
-  /ufo@1.3.2:
-    resolution: {integrity: sha512-o+ORpgGwaYQXgqGDwd+hkS4PuZ3QnmqMMxRuajK/a38L6fTpcE5GPIfrf+L/KemFzfUpeUQc1rRS1iDBozvnFA==}
+  /ufo@1.5.4:
+    resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==}
     dev: true
 
   /uglify-js@3.17.4:
@@ -17229,18 +17213,6 @@ packages:
       trough: 2.1.0
       vfile: 5.3.7
 
-  /unified@11.0.2:
-    resolution: {integrity: sha512-Zta++onvS/dJ6xUvXQOR5q8XJZOkiMCE5wQ8Yv9mLR25pxRS567EX0GO6HZRxxNV/lznwfsvRZ/1pqe9K9QLeQ==}
-    dependencies:
-      '@types/unist': 3.0.0
-      '@ungap/structured-clone': 1.2.0
-      bail: 2.0.2
-      devlop: 1.1.0
-      is-plain-obj: 4.1.0
-      trough: 2.1.0
-      vfile: 6.0.1
-    dev: true
-
   /unionfs@4.5.1:
     resolution: {integrity: sha512-hn8pzkh0/80mpsIT/YBJKa4+BF/9pNh0IgysBi0CjL95Uok8Hus69TNfgeJckoUNwfTpBq26+F7edO1oBINaIw==}
     dependencies:
@@ -17261,10 +17233,6 @@ packages:
       crypto-random-string: 4.0.0
     dev: true
 
-  /unist-util-generated@2.0.1:
-    resolution: {integrity: sha512-qF72kLmPxAw0oN2fwpWIqbXAVyEqUzDHMsbtPvOudIlUzXYFIeQIuxXQCRCFh22B7cixvU0MG7m3MW8FTq/S+A==}
-    dev: true
-
   /unist-util-is@5.2.1:
     resolution: {integrity: sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==}
     dependencies:
@@ -17304,6 +17272,7 @@ packages:
     resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
     dependencies:
       '@types/unist': 3.0.0
+    dev: false
 
   /unist-util-visit-parents@5.1.3:
     resolution: {integrity: sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==}
@@ -17349,7 +17318,7 @@ packages:
   /unplugin@1.5.0:
     resolution: {integrity: sha512-9ZdRwbh/4gcm1JTOkp9lAkIDrtOyOxgHmY7cjuwI8L/2RTikMcVG25GsZwNAgRuap3iDw2jeq7eoqtAsz5rW3A==}
     dependencies:
-      acorn: 8.11.3
+      acorn: 8.14.0
       chokidar: 3.5.3
       webpack-sources: 3.2.3
       webpack-virtual-modules: 0.5.0
@@ -17529,6 +17498,7 @@ packages:
     dependencies:
       '@types/unist': 3.0.0
       unist-util-stringify-position: 4.0.0
+    dev: false
 
   /vfile@5.3.7:
     resolution: {integrity: sha512-r7qlzkgErKjobAmyNIkkSpizsFPYiUPuJb5pNW1RB4JcYVZhs4lIbVqk8XPk033CV/1z8ss5pkax8SuhGpcG8g==}
@@ -17544,6 +17514,7 @@ packages:
       '@types/unist': 3.0.0
       unist-util-stringify-position: 4.0.0
       vfile-message: 4.0.2
+    dev: false
 
   /vite-node@0.23.4(@types/node@18.15.3):
     resolution: {integrity: sha512-8VuDGwTWIvwPYcbw8ZycMlwAwqCmqZfLdFrDK75+o+6bWYpede58k6AAXN9ioU+icW82V4u1MzkxLVhhIoQ9xA==}
@@ -17570,7 +17541,7 @@ packages:
     hasBin: true
     dependencies:
       cac: 6.7.14
-      debug: 4.3.4
+      debug: 4.3.7
       pathe: 1.1.2
       picocolors: 1.1.0
       vite: 5.3.6(@types/node@18.15.3)
@@ -17764,7 +17735,7 @@ packages:
     dependencies:
       chalk: 2.4.2
       commander: 3.0.2
-      debug: 4.3.4
+      debug: 4.3.7
     transitivePeerDependencies:
       - supports-color
     dev: true
diff --git a/src/lib/components/event/payload-decoder.svelte b/src/lib/components/event/payload-decoder.svelte
index 416e67789..d0993cddd 100644
--- a/src/lib/components/event/payload-decoder.svelte
+++ b/src/lib/components/event/payload-decoder.svelte
@@ -54,6 +54,7 @@
       } else {
         decodedValue = stringifyWithBigInt(decodedAttributes);
       }
+
       if (onDecode) {
         onDecode(decodedValue);
       }
diff --git a/src/lib/components/lines-and-dots/input-and-results-payload.svelte b/src/lib/components/lines-and-dots/input-and-results-payload.svelte
index a289cf7bf..a1391849c 100644
--- a/src/lib/components/lines-and-dots/input-and-results-payload.svelte
+++ b/src/lib/components/lines-and-dots/input-and-results-payload.svelte
@@ -22,7 +22,7 @@
   $: showParsedContent = payloads.length > 0;
 </script>
 
-<div class="flex w-full grow flex-col gap-2 py-4 {$$restProps.class}">
+<div class="flex w-full grow flex-col gap-2 {$$restProps.class}">
   <h3 class="flex items-center gap-2">
     {title}
   </h3>
diff --git a/src/lib/components/lines-and-dots/workflow-detail.svelte b/src/lib/components/lines-and-dots/workflow-detail.svelte
index 1317faf39..08e25d0a2 100644
--- a/src/lib/components/lines-and-dots/workflow-detail.svelte
+++ b/src/lib/components/lines-and-dots/workflow-detail.svelte
@@ -13,6 +13,7 @@
   export let href: string = null;
   export let icon: IconName | undefined = undefined;
   export let tooltip: string = '';
+  export let badge = false;
 </script>
 
 <p class="flex items-center gap-2 whitespace-nowrap {$$restProps.class}">
@@ -28,12 +29,13 @@
         <Icon name={icon} />
       {/if}
       {#if title}
-        {title}
+        <i>{title}</i>
       {/if}
       {#if href}
         <Link
           {href}
-          class="surface-subtle flex w-fit flex-row items-center gap-1 truncate rounded-sm p-1 leading-4"
+          class="flex w-fit flex-row items-center gap-1 truncate rounded-sm p-1 leading-4 {badge &&
+            'surface-subtle'}"
           ><span class="truncate">{content}</span>
           {#if filterable}
             <Icon name="filter" class="shrink-0" />
@@ -42,26 +44,30 @@
       {:else}
         <Tooltip text={tooltip} hide={!tooltip} top>
           <span
-            class="surface-subtle w-fit select-all truncate rounded-sm p-1 leading-4"
-            >{content}</span
+            class="w-fit select-all truncate rounded-sm p-1 leading-4"
+            class:surface-subtle={badge}>{content}</span
           >
         </Tooltip>
       {/if}
     </Copyable>
   {:else}
     {#if title}
-      {title}
+      <i>{title}</i>
     {/if}
     {#if icon}
       <Icon name={icon} />
     {/if}
     {#if href}
-      <Link {href} class="value">{content}</Link>
+      <Link
+        {href}
+        class="value truncate rounded-sm p-1 leading-4 {badge &&
+          'surface-subtle'}">{content}</Link
+      >
     {:else}
       <Tooltip text={tooltip} hide={!tooltip} top>
         <span
-          class="surface-subtle w-fit select-all truncate rounded-sm p-1 leading-4"
-          >{content}</span
+          class="w-fit select-all truncate rounded-sm p-1 leading-4"
+          class:surface-subtle={badge}>{content}</span
         >
       </Tooltip>
     {/if}
diff --git a/src/lib/components/lines-and-dots/workflow-details.svelte b/src/lib/components/lines-and-dots/workflow-details.svelte
index 7ccc70730..954ed9308 100644
--- a/src/lib/components/lines-and-dots/workflow-details.svelte
+++ b/src/lib/components/lines-and-dots/workflow-details.svelte
@@ -23,10 +23,14 @@
 </script>
 
 <div class="flex flex-col gap-2">
-  <h3 class="flex items-center">Summary</h3>
   <div
-    class="surface-primary grid w-full grid-flow-row grid-cols-1 gap-2 rounded border-2 border-subtle p-2 md:grid-cols-2 xl:grid-cols-3"
+    class="grid w-full grid-flow-row grid-cols-1 gap-x-4 gap-y-2 text-sm lg:grid-cols-3 xl:grid-cols-4"
   >
+    <WorkflowDetail
+      content={elapsedTime}
+      class="order-1 font-mono text-xl"
+      icon="clock"
+    />
     <WorkflowDetail
       title={translate('common.start')}
       tooltip={$relativeTime
@@ -39,8 +43,11 @@
       content={formatDate(workflow?.startTime, $timeFormat, {
         relative: $relativeTime,
       })}
-      class="order-1 text-sm "
+      class="order-2"
     />
+
+    <div class="hidden lg:order-4 lg:block xl:order-5" />
+    <div class="hidden lg:order-7 lg:block xl:hidden" />
     <WorkflowDetail
       title={translate('common.end')}
       tooltip={$relativeTime
@@ -55,17 +62,12 @@
             relative: $relativeTime,
           })
         : '-'}
-      class="order-2 text-sm md:order-3 xl:order-4"
-    />
-    <WorkflowDetail
-      content={elapsedTime}
-      class="order-3 text-sm md:order-5 xl:order-7"
-      icon="clock"
+      class="order-3 lg:order-5 xl:order-6"
     />
     <WorkflowDetail
       title={translate('common.task-queue')}
       content={workflow?.taskQueue}
-      class="order-4 text-sm md:order-8"
+      class="order-6 xl:order-4"
       href={routeForWorkers({
         namespace: $page.params.namespace,
         workflow: workflow?.id,
@@ -77,7 +79,7 @@
       content={workflow?.name}
       copyable
       filterable
-      class="order-4 text-sm md:order-2 xl:order-2"
+      class="order-3"
       href={routeForWorkflowsWithQuery({
         namespace,
         query: `WorkflowType="${workflow?.name}"`,
@@ -87,17 +89,12 @@
       title={translate('common.run-id')}
       content={workflow?.runId}
       copyable
-      class="order-5 text-sm md:order-4 xl:order-5"
+      class="order-8 xl:order-7"
     />
     <WorkflowDetail
       title={translate('common.history-size-bytes')}
       content={workflow?.historySizeBytes}
-      class="order-6 text-sm md:order-6 xl:order-3"
-    />
-    <WorkflowDetail
-      title={translate('workflows.state-transitions')}
-      content={workflow?.stateTransitionCount}
-      class="order-7 text-sm md:order-8 xl:order-6"
+      class="order-9 xl:order-8"
     />
   </div>
 </div>
diff --git a/src/lib/components/payload-input-with-encoding.svelte b/src/lib/components/payload-input-with-encoding.svelte
index 23979c410..9879feb5e 100644
--- a/src/lib/components/payload-input-with-encoding.svelte
+++ b/src/lib/components/payload-input-with-encoding.svelte
@@ -24,6 +24,7 @@
   export let encoding: Writable<PayloadInputEncoding>;
   export let error = false;
   export let loading = false;
+  export let label = translate('workflows.input');
   export let editing = true;
 
   const clearValues = () => {
@@ -34,7 +35,7 @@
 </script>
 
 <div>
-  <h5 class="pb-1 text-sm font-medium">{translate('workflows.input')}</h5>
+  <h5 class="pb-1 text-sm font-medium">{label}</h5>
   <Card class="flex flex-col gap-2">
     <PayloadInput bind:input bind:loading {error} {id} {editing} />
     <div class="flex items-end {editing ? 'justify-between' : 'justify-end'}">
diff --git a/src/lib/components/workflow/client-actions/signal-confirmation-modal.svelte b/src/lib/components/workflow/client-actions/signal-confirmation-modal.svelte
index 4082c4e28..8d4f4789b 100644
--- a/src/lib/components/workflow/client-actions/signal-confirmation-modal.svelte
+++ b/src/lib/components/workflow/client-actions/signal-confirmation-modal.svelte
@@ -6,9 +6,12 @@
   } from '$lib/components/payload-input-with-encoding.svelte';
   import Input from '$lib/holocene/input/input.svelte';
   import Modal from '$lib/holocene/modal.svelte';
+  import Option from '$lib/holocene/select/option.svelte';
+  import Select from '$lib/holocene/select/select.svelte';
   import { translate } from '$lib/i18n/translate';
   import { signalWorkflow } from '$lib/services/workflow-service';
   import { toaster } from '$lib/stores/toaster';
+  import { workflowRun } from '$lib/stores/workflow-run';
   import type { WorkflowExecution } from '$lib/types/workflows';
   import { isNetworkError } from '$lib/utilities/is-network-error';
 
@@ -17,11 +20,15 @@
   export let namespace: string;
   export let refresh: Writable<number>;
 
+  $: ({ metadata } = $workflowRun);
+  $: signalDefinitions = metadata?.definition?.signalDefinitions;
+
   const defaultEncoding: PayloadInputEncoding = 'json/plain';
 
   let error: string = '';
   let loading = false;
   let name = '';
+  let customSignal = false;
 
   let encoding: Writable<PayloadInputEncoding> = writable(defaultEncoding);
   let input = '';
@@ -30,6 +37,7 @@
     open = false;
     name = '';
     input = '';
+    customSignal = false;
     $encoding = defaultEncoding;
   };
 
@@ -58,6 +66,11 @@
       loading = false;
     }
   };
+
+  const handleCustom = () => {
+    customSignal = true;
+    name = '';
+  };
 </script>
 
 <Modal
@@ -74,12 +87,33 @@
 >
   <h3 slot="title">{translate('workflows.signal-modal-title')}</h3>
   <div slot="content" class="flex flex-col gap-4">
-    <Input
-      id="signal-name"
-      label={translate('workflows.signal-name-label')}
-      required
-      bind:value={name}
-    />
+    {#if signalDefinitions?.length > 0 && !customSignal}
+      <Select
+        id="signal-select"
+        label={translate('workflows.signal-name-label')}
+        class="min-w-fit"
+        bind:value={name}
+        data-testid="signal-select"
+        placeholder="Select a signal"
+        required
+      >
+        {#each signalDefinitions as { name: value, description = '' }}
+          <Option {value} {description}>{value}</Option>
+        {/each}
+        <Option
+          on:click={handleCustom}
+          value="custom"
+          description="Input Signal name">Custom</Option
+        >
+      </Select>
+    {:else}
+      <Input
+        id="signal-name"
+        label={translate('workflows.signal-name-label')}
+        required
+        bind:value={name}
+      />
+    {/if}
     <PayloadInputWithEncoding bind:input bind:encoding />
   </div>
 </Modal>
diff --git a/src/lib/holocene/accordion/accordion-light.svelte b/src/lib/holocene/accordion/accordion-light.svelte
new file mode 100644
index 000000000..0a2b540b4
--- /dev/null
+++ b/src/lib/holocene/accordion/accordion-light.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { noop } from 'svelte/internal';
+  import { slide } from 'svelte/transition';
+
+  import { v4 } from 'uuid';
+
+  import type { IconName } from '$lib/holocene/icon';
+  import Icon from '$lib/holocene/icon/icon.svelte';
+
+  interface $$Props extends HTMLAttributes<HTMLDivElement> {
+    id?: string;
+    icon?: IconName;
+    open?: boolean;
+    expandable?: boolean;
+    error?: string;
+    onToggle?: () => void;
+    'data-testid'?: string;
+  }
+
+  export let id: string = v4();
+  export let open = false;
+  export let onToggle = noop;
+
+  const toggleAccordion = () => {
+    open = !open;
+    onToggle();
+  };
+</script>
+
+<div class="w-full" {...$$restProps}>
+  <button
+    id="{id}-trigger"
+    aria-expanded={open}
+    aria-controls="{id}-content"
+    class="w-full cursor-pointer hover:bg-interactive-secondary-hover focus-visible:bg-interactive focus-visible:outline-none"
+    type="button"
+    on:click={toggleAccordion}
+  >
+    <div class="flex w-full flex-row items-center justify-between gap-2">
+      <slot name="title" />
+      <slot name="description" />
+      <div
+        class="flex flex-row items-center gap-2 pr-2"
+        on:click|stopPropagation
+        on:keyup|stopPropagation
+        role="none"
+      >
+        <slot name="action" />
+        <Icon class="m-2 shrink-0" name={open ? 'arrow-down' : 'arrow-right'} />
+      </div>
+    </div>
+  </button>
+  <div
+    id="{id}-content"
+    aria-labelledby="{id}-trigger"
+    role="textbox"
+    class="rounded-b-2 block w-full bg-primary p-2"
+    class:hidden={!open}
+    transition:slide
+  >
+    <slot {open} />
+  </div>
+</div>
diff --git a/src/lib/holocene/icon/svg/flag.svelte b/src/lib/holocene/icon/svg/flag.svelte
index 07ac4ad10..c89ce7183 100644
--- a/src/lib/holocene/icon/svg/flag.svelte
+++ b/src/lib/holocene/icon/svg/flag.svelte
@@ -3,6 +3,7 @@
 </script>
 
 <Svg {...$$props}>
+  <line x1="5" y1="5" x2="5" y2="22" stroke="currentColor" stroke-width="1.5" />
   <path
     d="M5.75 19.25L5.75 13.25M5.75 13.25L5.75 5.75C5.75 5.75 8.5 3.5 12 5.75C15.5 8 18.25 5.75 18.25 5.75L18.25 13.25C18.25 13.25 15.5 15.5 12 13.25C8.5 11 5.75 13.25 5.75 13.25Z"
     fill="currentColor"
diff --git a/src/lib/holocene/monaco/editor.svelte b/src/lib/holocene/monaco/editor.svelte
index 16daa563d..9e775acbe 100644
--- a/src/lib/holocene/monaco/editor.svelte
+++ b/src/lib/holocene/monaco/editor.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import type * as Monaco from 'monaco-editor/esm/vs/editor/editor.api';
   import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+  import { twMerge as merge } from 'tailwind-merge';
 
   import { useDarkMode } from '$lib/utilities/dark-mode/dark-mode';
 
@@ -43,4 +44,7 @@
   });
 </script>
 
-<div class="h-full min-h-80" bind:this={container} />
+<div
+  class={merge('h-full min-h-80', $$restProps.class)}
+  bind:this={container}
+></div>
diff --git a/src/lib/holocene/monaco/markdown.svelte b/src/lib/holocene/monaco/markdown.svelte
index 31b903be0..692b13546 100644
--- a/src/lib/holocene/monaco/markdown.svelte
+++ b/src/lib/holocene/monaco/markdown.svelte
@@ -1,7 +1,12 @@
 <script lang="ts">
+  import { fade } from 'svelte/transition';
+
+  import { page } from '$app/stores';
+
   import { useDarkMode } from '$lib/utilities/dark-mode';
 
   export let content: string;
+
   let iframe;
 
   $: theme = $useDarkMode ? 'dark' : 'light';
@@ -11,16 +16,33 @@
     iframe.height = '';
     iframe.height = iframe.contentWindow.document.body.scrollHeight + 2 + 'px';
   };
+
+  const { workflow: workflowId, run: runId, namespace } = $page.params;
+
+  const replaceTemplate = (content: string) => {
+    if (namespace) {
+      content = content.replace(/\{namespace\}/g, namespace);
+    }
+    if (workflowId) {
+      content = content.replace(/\{workflowId\}/g, workflowId);
+    }
+    if (runId) {
+      content = content.replace(/\{runId\}/g, runId);
+    }
+    return content;
+  };
+
+  const templatedContent = replaceTemplate(content);
 </script>
 
-<section class="h-full w-full">
+<section class="h-full w-full" in:fade={{ duration: 1000 }}>
   {#key theme}
     <iframe
       bind:this={iframe}
       on:load={resizeIframe}
       title="output"
-      src="/render?content={encodeURIComponent(content)}&theme={theme}"
-      class="w-full rounded-md shadow-md dark:shadow-slate-900"
+      src="/render?content={encodeURIComponent(templatedContent)}&theme={theme}"
+      class="w-full rounded-md"
     />
   {/key}
 </section>
diff --git a/src/lib/i18n/locales/en/workflows.ts b/src/lib/i18n/locales/en/workflows.ts
index ac44cdfca..b52f900a5 100644
--- a/src/lib/i18n/locales/en/workflows.ts
+++ b/src/lib/i18n/locales/en/workflows.ts
@@ -182,7 +182,9 @@ export const Strings = {
   'refresh-query': 'Refresh Query',
   'pending-activities-empty-state': 'No Pending Activities',
   'activity-id': 'Activity ID',
+  summary: 'Summary',
   details: 'Details',
+  'summary-and-details': 'Summary & Details',
   'maximum-attempts': 'Maximum Attempts',
   'retry-expiration': 'Retry Expiration',
   state: 'State',
@@ -253,4 +255,8 @@ export const Strings = {
   'start-workflow-success': 'Workflow started successfully',
   'start-workflow-error': 'Error starting Workflow',
   encoding: 'Encoding',
+  'user-metadata': 'User Metadata',
+  'markdown-supported': 'Markdown Supported',
+  'markdown-description':
+    'Markdown is supported in the summary and details fields. You can use {namespace}, {workflowId} or {runId} syntax in link href to create dynamic links based on the page you are on. Images are not allowed.',
 } as const;
diff --git a/src/lib/layouts/workflow-header.svelte b/src/lib/layouts/workflow-header.svelte
index 0dd495706..b6a3948a6 100644
--- a/src/lib/layouts/workflow-header.svelte
+++ b/src/lib/layouts/workflow-header.svelte
@@ -3,14 +3,17 @@
 
   import { page } from '$app/stores';
 
+  import WorkflowDetails from '$lib/components/lines-and-dots/workflow-details.svelte';
   import WorkflowActions from '$lib/components/workflow-actions.svelte';
   import WorkflowStatus from '$lib/components/workflow-status.svelte';
   import WorkflowVersioningHeader from '$lib/components/workflow-versioning-header.svelte';
+  import AccordionLight from '$lib/holocene/accordion/accordion-light.svelte';
   import Alert from '$lib/holocene/alert.svelte';
   import Badge from '$lib/holocene/badge.svelte';
   import Copyable from '$lib/holocene/copyable/index.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';
   import Link from '$lib/holocene/link.svelte';
+  import Markdown from '$lib/holocene/monaco/markdown.svelte';
   import TabList from '$lib/holocene/tab/tab-list.svelte';
   import Tab from '$lib/holocene/tab/tab.svelte';
   import Tabs from '$lib/holocene/tab/tabs.svelte';
@@ -63,6 +66,10 @@
     $fullEventHistory,
     $namespaces,
   );
+
+  $: summary = $workflowRun?.userMetadata?.summary;
+  $: details = $workflowRun?.userMetadata?.details;
+  $: hasUserMetadata = summary || details;
 </script>
 
 <div class="flex items-center justify-between pb-4">
@@ -91,12 +98,10 @@
     {/if}
   </div>
 </div>
-<header class="rounded-top flex flex-col gap-0">
+<header class="rounded-top flex flex-col gap-1">
   <div class="flex flex-col items-center justify-between gap-4 lg:flex-row">
     <div class="flex flex-col items-center gap-4 lg:flex-row">
-      <div class="px-2">
-        <WorkflowStatus status={workflow?.status} big />
-      </div>
+      <WorkflowStatus status={workflow?.status} big />
       <div class="flex flex-col flex-wrap gap-0">
         <h1 data-testid="workflow-id-heading" class="gap-0 overflow-hidden">
           <Copyable
@@ -117,8 +122,32 @@
       <WorkflowActions {isRunning} {cancelInProgress} {workflow} {namespace} />
     </div>
   </div>
+  {#if hasUserMetadata}
+    <AccordionLight let:open>
+      <div
+        slot="title"
+        class="flex w-full items-center gap-2 rounded p-2 text-xl"
+      >
+        <Icon
+          name="flag"
+          class="text-indigo-600/80"
+          width={32}
+          height={32}
+        />{translate('workflows.summary-and-details')}
+      </div>
+      {#if open && summary}
+        <h3>{translate('workflows.summary')}</h3>
+        <Markdown content={summary} />
+      {/if}
+      {#if open && details}
+        <h3>{translate('workflows.details')}</h3>
+        <Markdown content={details} />
+      {/if}
+    </AccordionLight>
+  {/if}
+  <WorkflowDetails />
   <Tabs>
-    <TabList class="flex flex-wrap gap-6 p-4 pl-0" label="workflow detail">
+    <TabList class="flex flex-wrap gap-6 pb-1 pt-4" label="workflow detail">
       <Tab
         label={translate('workflows.history-tab')}
         id="history-tab"
diff --git a/src/lib/layouts/workflow-history-layout.svelte b/src/lib/layouts/workflow-history-layout.svelte
index 3f59d3da7..7b35af46b 100644
--- a/src/lib/layouts/workflow-history-layout.svelte
+++ b/src/lib/layouts/workflow-history-layout.svelte
@@ -5,7 +5,6 @@
   import InputAndResults from '$lib/components/lines-and-dots/input-and-results.svelte';
   import TimelineGraph from '$lib/components/lines-and-dots/svg/timeline-graph.svelte';
   import WorkflowCallback from '$lib/components/lines-and-dots/workflow-callback.svelte';
-  import WorkflowDetails from '$lib/components/lines-and-dots/workflow-details.svelte';
   import WorkflowError from '$lib/components/lines-and-dots/workflow-error.svelte';
   import WorkflowCallStackError from '$lib/components/workflow/workflow-call-stack-error.svelte';
   import { translate } from '$lib/i18n/translate';
@@ -62,7 +61,6 @@
 <div class="flex flex-col gap-0 px-8">
   <WorkflowCallStackError />
   <div class="flex flex-col gap-2">
-    <WorkflowDetails />
     <InputAndResults />
     {#if workflowTaskFailedError}
       <WorkflowError
diff --git a/src/lib/layouts/workflow-run-layout.svelte b/src/lib/layouts/workflow-run-layout.svelte
index bf6281533..18d5e91c0 100644
--- a/src/lib/layouts/workflow-run-layout.svelte
+++ b/src/lib/layouts/workflow-run-layout.svelte
@@ -15,6 +15,7 @@
     throttleRefresh,
   } from '$lib/services/events-service';
   import { getPollers } from '$lib/services/pollers-service';
+  import { getWorkflowMetadata } from '$lib/services/query-service';
   import { fetchWorkflow } from '$lib/services/workflow-service';
   import { authUser } from '$lib/stores/auth-user';
   import { resetLastDataEncoderSuccess } from '$lib/stores/data-encoder-config';
@@ -31,7 +32,9 @@
     workflowRun,
   } from '$lib/stores/workflow-run';
   import type { NetworkError } from '$lib/types/global';
+  import type { WorkflowExecution } from '$lib/types/workflows';
   import { copyToClipboard } from '$lib/utilities/copy-to-clipboard';
+  import { decodeSingleReadablePayloadWithCodec } from '$lib/utilities/decode-payload';
   import { stringifyWithBigInt } from '$lib/utilities/parse-with-big-int';
 
   $: ({ namespace, workflow: workflowId, run: runId } = $page.params);
@@ -39,7 +42,7 @@
   $: fullJson = { ...$workflowRun, eventHistory: $fullEventHistory };
 
   let workflowError: NetworkError;
-  let eventHistoryController: AbortController;
+  let workflowRunController: AbortController;
   let refreshInterval;
 
   const { copy, copied } = copyToClipboard();
@@ -48,6 +51,29 @@
     copy(e, stringifyWithBigInt(fullJson));
   };
 
+  const decodeUserMetadata = async (workflow: WorkflowExecution) => {
+    try {
+      if (workflow?.summary) {
+        const decodedSummary = await decodeSingleReadablePayloadWithCodec(
+          workflow.summary,
+        );
+        if (typeof decodedSummary === 'string') {
+          $workflowRun.userMetadata.summary = decodedSummary;
+        }
+      }
+      if (workflow?.details) {
+        const decodedDetails = await decodeSingleReadablePayloadWithCodec(
+          workflow.details,
+        );
+        if (typeof decodedDetails === 'string') {
+          $workflowRun.userMetadata.details = decodedDetails;
+        }
+      }
+    } catch (e) {
+      console.error('Error decoding user metadata', e);
+    }
+  };
+
   const getWorkflowAndEventHistory = async (
     namespace: string,
     workflowId: string,
@@ -65,23 +91,42 @@
       return;
     }
 
+    await decodeUserMetadata(workflow);
+
     const { taskQueue } = workflow;
     const workers = await getPollers({ queue: taskQueue, namespace });
 
+    $workflowRun = { ...$workflowRun, workflow, workers };
+
     workflow.pendingActivities = await toDecodedPendingActivities(
       workflow,
       namespace,
       settings,
       $authUser?.accessToken,
     );
-    $workflowRun = { workflow, workers };
-    eventHistoryController = new AbortController();
+
+    workflowRunController = new AbortController();
+    getWorkflowMetadata(
+      {
+        namespace,
+        workflow: {
+          id: workflowId,
+          runId,
+        },
+      },
+      settings,
+      $authUser?.accessToken,
+      workflowRunController.signal,
+    ).then((metadata) => {
+      $workflowRun.metadata = metadata;
+    });
+
     $fullEventHistory = await fetchAllEvents({
       namespace,
       workflowId,
       runId,
       sort: 'ascending',
-      signal: eventHistoryController.signal,
+      signal: workflowRunController.signal,
       historySize: workflow.historyEvents,
     });
   };
@@ -100,20 +145,20 @@
         workflowError = error;
         return;
       }
+      $workflowRun.workflow = workflow;
       workflow.pendingActivities = await toDecodedPendingActivities(
         workflow,
         namespace,
         settings,
         $authUser?.accessToken,
       );
-      $workflowRun = { ...$workflowRun, workflow };
     }
   };
 
   const abortPolling = () => {
     $fullEventHistory = [];
-    if (eventHistoryController) {
-      eventHistoryController.abort();
+    if (workflowRunController) {
+      workflowRunController.abort();
     }
   };
 
@@ -171,14 +216,14 @@
     class="absolute bottom-0 left-0 right-0 {$viewDataEncoderSettings
       ? 'top-[540px]'
       : 'top-0'}
-    } flex h-full flex-col gap-0"
+    } flex h-full flex-col gap-4"
   >
     {#if workflowError}
       <WorkflowError error={workflowError} />
     {:else if !$workflowRun.workflow}
       <Loading class="pt-24" />
     {:else}
-      <div class="px-8 pt-8 md:pt-20">
+      <div class="border-b-2 border-subtle px-8 pt-8 md:pt-20">
         <WorkflowHeader namespace={$page.params.namespace} />
       </div>
       <slot />
diff --git a/src/lib/models/__snapshots__/workflow-execution.test.ts.snap b/src/lib/models/__snapshots__/workflow-execution.test.ts.snap
index 5a6883206..6397028c8 100644
--- a/src/lib/models/__snapshots__/workflow-execution.test.ts.snap
+++ b/src/lib/models/__snapshots__/workflow-execution.test.ts.snap
@@ -6,6 +6,7 @@ exports[`toWorkflowExecution > should match the snapshot for Canceled workflows
   "callbacks": [],
   "canBeTerminated": false,
   "defaultWorkflowTaskTimeout": "20s",
+  "details": undefined,
   "endTime": "2022-07-01T20:20:50.181506253Z",
   "executionTime": "2022-07-01T20:20:50.157120545Z",
   "historyEvents": "13",
@@ -41,6 +42,7 @@ exports[`toWorkflowExecution > should match the snapshot for Canceled workflows
   "startTime": "2022-07-01T20:20:50.157120545Z",
   "stateTransitionCount": "6",
   "status": "Canceled",
+  "summary": undefined,
   "taskQueue": "canary-task-queue",
   "url": "/workflows/temporal.fixture.cancelled.workflow.id/346e7a24-c660-4f91-a777-ffe3274d8144",
 }
@@ -52,6 +54,7 @@ exports[`toWorkflowExecution > should match the snapshot for Completed workflows
   "callbacks": [],
   "canBeTerminated": false,
   "defaultWorkflowTaskTimeout": "20s",
+  "details": undefined,
   "endTime": "2022-07-01T20:28:52.916373379Z",
   "executionTime": "2022-07-01T20:28:48.796369169Z",
   "historyEvents": "18",
@@ -87,6 +90,7 @@ exports[`toWorkflowExecution > should match the snapshot for Completed workflows
   "startTime": "2022-07-01T20:28:48.796369169Z",
   "stateTransitionCount": "11",
   "status": "Completed",
+  "summary": undefined,
   "taskQueue": "canary-task-queue",
   "url": "/workflows/temporal.fixture.completed.workflow.id/202dcff6-7f35-4c65-995c-bcadce524fb1",
 }
@@ -98,6 +102,7 @@ exports[`toWorkflowExecution > should match the snapshot for Failed workflows 1`
   "callbacks": [],
   "canBeTerminated": false,
   "defaultWorkflowTaskTimeout": "20s",
+  "details": undefined,
   "endTime": "2022-07-01T20:22:50.027441003Z",
   "executionTime": "2022-07-01T20:22:50.015107253Z",
   "historyEvents": "7",
@@ -126,6 +131,7 @@ exports[`toWorkflowExecution > should match the snapshot for Failed workflows 1`
   "startTime": "2022-07-01T20:22:49.015107253Z",
   "stateTransitionCount": "4",
   "status": "Failed",
+  "summary": undefined,
   "taskQueue": "canary-task-queue",
   "url": "/workflows/temporal.fixture.failed.workflow.id/7e00b341-c579-4bb5-9e28-810d34ef4329",
 }
@@ -137,6 +143,7 @@ exports[`toWorkflowExecution > should match the snapshot for Running workflows 1
   "callbacks": [],
   "canBeTerminated": true,
   "defaultWorkflowTaskTimeout": "20s",
+  "details": undefined,
   "endTime": null,
   "executionTime": "2022-07-01T20:23:49.104303753Z",
   "historyEvents": "13",
@@ -198,6 +205,7 @@ exports[`toWorkflowExecution > should match the snapshot for Running workflows 1
   "startTime": "2022-07-01T20:23:49.104303753Z",
   "stateTransitionCount": "21",
   "status": "Running",
+  "summary": undefined,
   "taskQueue": "canary-task-queue",
   "url": "/workflows/temporal.fixture.running.workflow.id/2a7ba421-f74b-4b8b-b9d8-e6e30e4caac7",
 }
@@ -209,6 +217,7 @@ exports[`toWorkflowExecution > should match the snapshot for Terminated workflow
   "callbacks": [],
   "canBeTerminated": false,
   "defaultWorkflowTaskTimeout": "20s",
+  "details": undefined,
   "endTime": "2022-07-01T20:14:51.002030504Z",
   "executionTime": "2022-07-01T20:14:48.911627544Z",
   "historyEvents": "30",
@@ -275,6 +284,7 @@ exports[`toWorkflowExecution > should match the snapshot for Terminated workflow
   "startTime": "2022-07-01T20:14:48.911627544Z",
   "stateTransitionCount": "21",
   "status": "Terminated",
+  "summary": undefined,
   "taskQueue": "canary-task-queue",
   "url": "/workflows/temporal.fixture.completed.workflow.id/16c5fbe5-f82d-43c1-acbc-18c65c449ace",
 }
@@ -286,6 +296,7 @@ exports[`toWorkflowExecution > should match the snapshot for TimedOut workflows
   "callbacks": [],
   "canBeTerminated": false,
   "defaultWorkflowTaskTimeout": "20s",
+  "details": undefined,
   "endTime": "2022-07-01T14:16:18.804308503Z",
   "executionTime": "2022-07-01T13:56:18.803016378Z",
   "historyEvents": "18",
@@ -327,6 +338,7 @@ exports[`toWorkflowExecution > should match the snapshot for TimedOut workflows
   "startTime": "2022-07-01T13:56:18.803016378Z",
   "stateTransitionCount": "16",
   "status": "TimedOut",
+  "summary": undefined,
   "taskQueue": "canary-task-queue",
   "url": "/workflows/temporal.fixture.timed-out.workflow.id/workflow.advanced-visibility/445a17cb-6cb4-4508-bc59-187d08c6c6e2",
 }
@@ -339,6 +351,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "callbacks": [],
     "canBeTerminated": false,
     "defaultWorkflowTaskTimeout": undefined,
+    "details": undefined,
     "endTime": "2022-07-01T20:20:50.181506253Z",
     "executionTime": "2022-07-01T20:20:50.157120545Z",
     "historyEvents": "13",
@@ -371,6 +384,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "startTime": "2022-07-01T20:20:50.157120545Z",
     "stateTransitionCount": "6",
     "status": "Canceled",
+    "summary": undefined,
     "taskQueue": "canary-task-queue",
     "url": "/workflows/temporal.fixture.cancelled.workflow.id/346e7a24-c660-4f91-a777-ffe3274d8144",
   },
@@ -379,6 +393,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "callbacks": [],
     "canBeTerminated": false,
     "defaultWorkflowTaskTimeout": undefined,
+    "details": undefined,
     "endTime": "2022-07-01T20:28:52.916373379Z",
     "executionTime": "2022-07-01T20:28:48.796369169Z",
     "historyEvents": "18",
@@ -411,6 +426,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "startTime": "2022-07-01T20:28:48.796369169Z",
     "stateTransitionCount": "11",
     "status": "Completed",
+    "summary": undefined,
     "taskQueue": "canary-task-queue",
     "url": "/workflows/temporal.fixture.completed.workflow.id/202dcff6-7f35-4c65-995c-bcadce524fb1",
   },
@@ -419,6 +435,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "callbacks": [],
     "canBeTerminated": false,
     "defaultWorkflowTaskTimeout": undefined,
+    "details": undefined,
     "endTime": "2022-07-01T20:22:50.027441003Z",
     "executionTime": "2022-07-01T20:22:50.015107253Z",
     "historyEvents": "7",
@@ -447,6 +464,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "startTime": "2022-07-01T20:22:49.015107253Z",
     "stateTransitionCount": "4",
     "status": "Failed",
+    "summary": undefined,
     "taskQueue": "canary-task-queue",
     "url": "/workflows/temporal.fixture.failed.workflow.id/7e00b341-c579-4bb5-9e28-810d34ef4329",
   },
@@ -455,6 +473,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "callbacks": [],
     "canBeTerminated": true,
     "defaultWorkflowTaskTimeout": undefined,
+    "details": undefined,
     "endTime": null,
     "executionTime": "2022-07-01T20:23:49.104303753Z",
     "historyEvents": "19",
@@ -487,6 +506,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "startTime": "2022-07-01T20:23:49.104303753Z",
     "stateTransitionCount": "27",
     "status": "Running",
+    "summary": undefined,
     "taskQueue": "canary-task-queue",
     "url": "/workflows/temporal.fixture.running.workflow.id/2a7ba421-f74b-4b8b-b9d8-e6e30e4caac7",
   },
@@ -495,6 +515,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "callbacks": [],
     "canBeTerminated": false,
     "defaultWorkflowTaskTimeout": undefined,
+    "details": undefined,
     "endTime": "2022-07-01T20:14:51.073853795Z",
     "executionTime": "2022-07-01T20:14:51.002662504Z",
     "historyEvents": "42",
@@ -527,6 +548,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "startTime": "2022-07-01T20:14:51.002662504Z",
     "stateTransitionCount": "13",
     "status": "Completed",
+    "summary": undefined,
     "taskQueue": "canary-task-queue",
     "url": "/workflows/temporal.fixture.completed.workflow.id/dfd4039d-4bc0-4864-9a24-85d136814977",
   },
@@ -535,6 +557,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "callbacks": [],
     "canBeTerminated": false,
     "defaultWorkflowTaskTimeout": undefined,
+    "details": undefined,
     "endTime": "2022-07-01T20:14:51.002030504Z",
     "executionTime": "2022-07-01T20:14:48.911627544Z",
     "historyEvents": "30",
@@ -567,6 +590,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "startTime": "2022-07-01T20:14:48.911627544Z",
     "stateTransitionCount": "21",
     "status": "Terminated",
+    "summary": undefined,
     "taskQueue": "canary-task-queue",
     "url": "/workflows/temporal.fixture.terminated.workflow.id/16c5fbe5-f82d-43c1-acbc-18c65c449ace",
   },
@@ -575,6 +599,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "callbacks": [],
     "canBeTerminated": false,
     "defaultWorkflowTaskTimeout": undefined,
+    "details": undefined,
     "endTime": "2022-07-01T14:16:18.804308503Z",
     "executionTime": "2022-07-01T13:56:18.803016378Z",
     "historyEvents": "18",
@@ -607,6 +632,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "startTime": "2022-07-01T13:56:18.803016378Z",
     "stateTransitionCount": "16",
     "status": "TimedOut",
+    "summary": undefined,
     "taskQueue": "canary-task-queue",
     "url": "/workflows/temporal.fixture.timed-out.workflow.id/445a17cb-6cb4-4508-bc59-187d08c6c6e2",
   },
diff --git a/src/lib/models/__snapshots__/workflow-execution.write-disabled.test.ts.snap b/src/lib/models/__snapshots__/workflow-execution.write-disabled.test.ts.snap
index 0ce90f6b5..a718e1540 100644
--- a/src/lib/models/__snapshots__/workflow-execution.write-disabled.test.ts.snap
+++ b/src/lib/models/__snapshots__/workflow-execution.write-disabled.test.ts.snap
@@ -6,6 +6,7 @@ exports[`toWorkflowExecution > should match the snapshot for Canceled workflows
   "callbacks": [],
   "canBeTerminated": false,
   "defaultWorkflowTaskTimeout": "20s",
+  "details": undefined,
   "endTime": "2022-07-01T20:20:50.181506253Z",
   "executionTime": "2022-07-01T20:20:50.157120545Z",
   "historyEvents": "13",
@@ -41,6 +42,7 @@ exports[`toWorkflowExecution > should match the snapshot for Canceled workflows
   "startTime": "2022-07-01T20:20:50.157120545Z",
   "stateTransitionCount": "6",
   "status": "Canceled",
+  "summary": undefined,
   "taskQueue": "canary-task-queue",
   "url": "/workflows/temporal.fixture.cancelled.workflow.id/346e7a24-c660-4f91-a777-ffe3274d8144",
 }
@@ -52,6 +54,7 @@ exports[`toWorkflowExecution > should match the snapshot for Completed workflows
   "callbacks": [],
   "canBeTerminated": false,
   "defaultWorkflowTaskTimeout": "20s",
+  "details": undefined,
   "endTime": "2022-07-01T20:28:52.916373379Z",
   "executionTime": "2022-07-01T20:28:48.796369169Z",
   "historyEvents": "18",
@@ -87,6 +90,7 @@ exports[`toWorkflowExecution > should match the snapshot for Completed workflows
   "startTime": "2022-07-01T20:28:48.796369169Z",
   "stateTransitionCount": "11",
   "status": "Completed",
+  "summary": undefined,
   "taskQueue": "canary-task-queue",
   "url": "/workflows/temporal.fixture.completed.workflow.id/202dcff6-7f35-4c65-995c-bcadce524fb1",
 }
@@ -98,6 +102,7 @@ exports[`toWorkflowExecution > should match the snapshot for Failed workflows 1`
   "callbacks": [],
   "canBeTerminated": false,
   "defaultWorkflowTaskTimeout": "20s",
+  "details": undefined,
   "endTime": "2022-07-01T20:22:50.027441003Z",
   "executionTime": "2022-07-01T20:22:50.015107253Z",
   "historyEvents": "7",
@@ -126,6 +131,7 @@ exports[`toWorkflowExecution > should match the snapshot for Failed workflows 1`
   "startTime": "2022-07-01T20:22:49.015107253Z",
   "stateTransitionCount": "4",
   "status": "Failed",
+  "summary": undefined,
   "taskQueue": "canary-task-queue",
   "url": "/workflows/temporal.fixture.failed.workflow.id/7e00b341-c579-4bb5-9e28-810d34ef4329",
 }
@@ -137,6 +143,7 @@ exports[`toWorkflowExecution > should match the snapshot for Running workflows 1
   "callbacks": [],
   "canBeTerminated": false,
   "defaultWorkflowTaskTimeout": "20s",
+  "details": undefined,
   "endTime": null,
   "executionTime": "2022-07-01T20:23:49.104303753Z",
   "historyEvents": "13",
@@ -198,6 +205,7 @@ exports[`toWorkflowExecution > should match the snapshot for Running workflows 1
   "startTime": "2022-07-01T20:23:49.104303753Z",
   "stateTransitionCount": "21",
   "status": "Running",
+  "summary": undefined,
   "taskQueue": "canary-task-queue",
   "url": "/workflows/temporal.fixture.running.workflow.id/2a7ba421-f74b-4b8b-b9d8-e6e30e4caac7",
 }
@@ -209,6 +217,7 @@ exports[`toWorkflowExecution > should match the snapshot for Terminated workflow
   "callbacks": [],
   "canBeTerminated": false,
   "defaultWorkflowTaskTimeout": "20s",
+  "details": undefined,
   "endTime": "2022-07-01T20:14:51.002030504Z",
   "executionTime": "2022-07-01T20:14:48.911627544Z",
   "historyEvents": "30",
@@ -275,6 +284,7 @@ exports[`toWorkflowExecution > should match the snapshot for Terminated workflow
   "startTime": "2022-07-01T20:14:48.911627544Z",
   "stateTransitionCount": "21",
   "status": "Terminated",
+  "summary": undefined,
   "taskQueue": "canary-task-queue",
   "url": "/workflows/temporal.fixture.completed.workflow.id/16c5fbe5-f82d-43c1-acbc-18c65c449ace",
 }
@@ -286,6 +296,7 @@ exports[`toWorkflowExecution > should match the snapshot for TimedOut workflows
   "callbacks": [],
   "canBeTerminated": false,
   "defaultWorkflowTaskTimeout": "20s",
+  "details": undefined,
   "endTime": "2022-07-01T14:16:18.804308503Z",
   "executionTime": "2022-07-01T13:56:18.803016378Z",
   "historyEvents": "18",
@@ -327,6 +338,7 @@ exports[`toWorkflowExecution > should match the snapshot for TimedOut workflows
   "startTime": "2022-07-01T13:56:18.803016378Z",
   "stateTransitionCount": "16",
   "status": "TimedOut",
+  "summary": undefined,
   "taskQueue": "canary-task-queue",
   "url": "/workflows/temporal.fixture.timed-out.workflow.id/workflow.advanced-visibility/445a17cb-6cb4-4508-bc59-187d08c6c6e2",
 }
@@ -339,6 +351,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "callbacks": [],
     "canBeTerminated": false,
     "defaultWorkflowTaskTimeout": undefined,
+    "details": undefined,
     "endTime": "2022-07-01T20:20:50.181506253Z",
     "executionTime": "2022-07-01T20:20:50.157120545Z",
     "historyEvents": "13",
@@ -371,6 +384,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "startTime": "2022-07-01T20:20:50.157120545Z",
     "stateTransitionCount": "6",
     "status": "Canceled",
+    "summary": undefined,
     "taskQueue": "canary-task-queue",
     "url": "/workflows/temporal.fixture.cancelled.workflow.id/346e7a24-c660-4f91-a777-ffe3274d8144",
   },
@@ -379,6 +393,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "callbacks": [],
     "canBeTerminated": false,
     "defaultWorkflowTaskTimeout": undefined,
+    "details": undefined,
     "endTime": "2022-07-01T20:28:52.916373379Z",
     "executionTime": "2022-07-01T20:28:48.796369169Z",
     "historyEvents": "18",
@@ -411,6 +426,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "startTime": "2022-07-01T20:28:48.796369169Z",
     "stateTransitionCount": "11",
     "status": "Completed",
+    "summary": undefined,
     "taskQueue": "canary-task-queue",
     "url": "/workflows/temporal.fixture.completed.workflow.id/202dcff6-7f35-4c65-995c-bcadce524fb1",
   },
@@ -419,6 +435,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "callbacks": [],
     "canBeTerminated": false,
     "defaultWorkflowTaskTimeout": undefined,
+    "details": undefined,
     "endTime": "2022-07-01T20:22:50.027441003Z",
     "executionTime": "2022-07-01T20:22:50.015107253Z",
     "historyEvents": "7",
@@ -447,6 +464,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "startTime": "2022-07-01T20:22:49.015107253Z",
     "stateTransitionCount": "4",
     "status": "Failed",
+    "summary": undefined,
     "taskQueue": "canary-task-queue",
     "url": "/workflows/temporal.fixture.failed.workflow.id/7e00b341-c579-4bb5-9e28-810d34ef4329",
   },
@@ -455,6 +473,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "callbacks": [],
     "canBeTerminated": false,
     "defaultWorkflowTaskTimeout": undefined,
+    "details": undefined,
     "endTime": null,
     "executionTime": "2022-07-01T20:23:49.104303753Z",
     "historyEvents": "19",
@@ -487,6 +506,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "startTime": "2022-07-01T20:23:49.104303753Z",
     "stateTransitionCount": "27",
     "status": "Running",
+    "summary": undefined,
     "taskQueue": "canary-task-queue",
     "url": "/workflows/temporal.fixture.running.workflow.id/2a7ba421-f74b-4b8b-b9d8-e6e30e4caac7",
   },
@@ -495,6 +515,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "callbacks": [],
     "canBeTerminated": false,
     "defaultWorkflowTaskTimeout": undefined,
+    "details": undefined,
     "endTime": "2022-07-01T20:14:51.073853795Z",
     "executionTime": "2022-07-01T20:14:51.002662504Z",
     "historyEvents": "42",
@@ -527,6 +548,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "startTime": "2022-07-01T20:14:51.002662504Z",
     "stateTransitionCount": "13",
     "status": "Completed",
+    "summary": undefined,
     "taskQueue": "canary-task-queue",
     "url": "/workflows/temporal.fixture.completed.workflow.id/dfd4039d-4bc0-4864-9a24-85d136814977",
   },
@@ -535,6 +557,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "callbacks": [],
     "canBeTerminated": false,
     "defaultWorkflowTaskTimeout": undefined,
+    "details": undefined,
     "endTime": "2022-07-01T20:14:51.002030504Z",
     "executionTime": "2022-07-01T20:14:48.911627544Z",
     "historyEvents": "30",
@@ -567,6 +590,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "startTime": "2022-07-01T20:14:48.911627544Z",
     "stateTransitionCount": "21",
     "status": "Terminated",
+    "summary": undefined,
     "taskQueue": "canary-task-queue",
     "url": "/workflows/temporal.fixture.terminated.workflow.id/16c5fbe5-f82d-43c1-acbc-18c65c449ace",
   },
@@ -575,6 +599,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "callbacks": [],
     "canBeTerminated": false,
     "defaultWorkflowTaskTimeout": undefined,
+    "details": undefined,
     "endTime": "2022-07-01T14:16:18.804308503Z",
     "executionTime": "2022-07-01T13:56:18.803016378Z",
     "historyEvents": "18",
@@ -607,6 +632,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "startTime": "2022-07-01T13:56:18.803016378Z",
     "stateTransitionCount": "16",
     "status": "TimedOut",
+    "summary": undefined,
     "taskQueue": "canary-task-queue",
     "url": "/workflows/temporal.fixture.timed-out.workflow.id/445a17cb-6cb4-4508-bc59-187d08c6c6e2",
   },
diff --git a/src/lib/models/workflow-execution.ts b/src/lib/models/workflow-execution.ts
index 020dab70f..ecbe1846c 100644
--- a/src/lib/models/workflow-execution.ts
+++ b/src/lib/models/workflow-execution.ts
@@ -117,6 +117,13 @@ export const toWorkflowExecution = (
   const pendingWorkflowTask = response?.pendingWorkflowTask;
   const callbacks = toCallbacks(response?.callbacks);
 
+  let summary;
+  let details;
+  if (response?.executionConfig?.userMetadata) {
+    summary = response?.executionConfig?.userMetadata?.summary;
+    details = response?.executionConfig?.userMetadata?.details;
+  }
+
   return {
     name,
     id,
@@ -138,6 +145,8 @@ export const toWorkflowExecution = (
     pendingNexusOperations,
     pendingWorkflowTask,
     callbacks,
+    summary,
+    details,
     parentNamespaceId,
     parent,
     stateTransitionCount,
diff --git a/src/lib/pages/start-workflow.svelte b/src/lib/pages/start-workflow.svelte
index 0b8034f79..02f0daf12 100644
--- a/src/lib/pages/start-workflow.svelte
+++ b/src/lib/pages/start-workflow.svelte
@@ -12,8 +12,13 @@
   import AddSearchAttributes from '$lib/components/workflow/add-search-attributes.svelte';
   import Alert from '$lib/holocene/alert.svelte';
   import Button from '$lib/holocene/button.svelte';
+  import Card from '$lib/holocene/card.svelte';
+  import Icon from '$lib/holocene/icon/icon.svelte';
   import Input from '$lib/holocene/input/input.svelte';
+  import Label from '$lib/holocene/label.svelte';
   import Link from '$lib/holocene/link.svelte';
+  import Editor from '$lib/holocene/monaco/editor.svelte';
+  import Tooltip from '$lib/holocene/tooltip.svelte';
   import { translate } from '$lib/i18n/translate';
   import { getPollers } from '$lib/services/pollers-service';
   import {
@@ -41,6 +46,8 @@
   let taskQueue = '';
   let workflowType = '';
   let input = '';
+  let summary = '';
+  let details = '';
   let encoding: Writable<PayloadInputEncoding> = writable('json/plain');
   let inputRetrieved = 0;
 
@@ -76,6 +83,8 @@
         taskQueue,
         workflowType,
         input,
+        summary,
+        details,
         encoding: $encoding,
         searchAttributes,
       });
@@ -124,6 +133,9 @@
     });
     input = initialValues.input;
     inputRetrieved = Date.now();
+    summary = initialValues.summary;
+    details = initialValues.details;
+
     if (initialValues?.searchAttributes) {
       const customSAKeys = Object.keys($customSearchAttributes);
       Object.entries(initialValues.searchAttributes).forEach(([key, value]) => {
@@ -134,6 +146,13 @@
           ];
         }
       });
+    }
+
+    if (
+      initialValues?.searchAttributes?.length ||
+      initialValues?.summary ||
+      initialValues?.details
+    ) {
       viewAdvancedOptions = true;
     }
   };
@@ -244,6 +263,32 @@
       <PayloadInputWithEncoding bind:input bind:encoding />
     {/key}
     {#if viewAdvancedOptions}
+      <Card class="flex flex-col gap-2">
+        <div class="flex justify-between">
+          <h3>{translate('workflows.user-metadata')}</h3>
+          <p class="flex items-center gap-1 text-sm text-subtle">
+            {translate('workflows.markdown-supported')}
+            <Tooltip
+              topRight
+              width={200}
+              text={translate('workflows.markdown-description')}
+            >
+              <Icon name="info" /></Tooltip
+            >
+          </p>
+        </div>
+        <Label label={translate('workflows.summary')} for="summary" />
+        <Editor
+          content={summary}
+          on:change={(event) => (summary = event.detail.value)}
+          class="min-h-48"
+        />
+        <Label label={translate('workflows.details')} for="details" />
+        <Editor
+          content={details}
+          on:change={(event) => (details = event.detail.value)}
+        />
+      </Card>
       <AddSearchAttributes bind:attributesToAdd={searchAttributes} />
     {/if}
     <div class="mt-4 flex w-full justify-between">
diff --git a/src/lib/pages/workflow-metadata.svelte b/src/lib/pages/workflow-metadata.svelte
index 7b692e371..047038ab3 100644
--- a/src/lib/pages/workflow-metadata.svelte
+++ b/src/lib/pages/workflow-metadata.svelte
@@ -13,7 +13,6 @@
       <h3>
         {translate('events.attribute-group.search-attributes')}
       </h3>
-      <div class="h-0.5 rounded-full bg-inverse" />
       <PayloadDecoder
         value={{ searchAttributes: workflow.searchAttributes }}
         key="searchAttributes"
@@ -31,7 +30,6 @@
   {#if workflow?.memo}
     <div class="mt-4 flex flex-col gap-2">
       <h3>{translate('common.memo')}</h3>
-      <div class="h-0.5 rounded-full bg-inverse" />
       <PayloadDecoder
         value={{ memo: workflow.memo }}
         key="memo"
diff --git a/src/lib/pages/workflow-query.svelte b/src/lib/pages/workflow-query.svelte
index 3406630ff..6d6471e1b 100644
--- a/src/lib/pages/workflow-query.svelte
+++ b/src/lib/pages/workflow-query.svelte
@@ -11,12 +11,9 @@
   import Select from '$lib/holocene/select/select.svelte';
   import ToggleSwitch from '$lib/holocene/toggle-switch.svelte';
   import { translate } from '$lib/i18n/translate';
-  import {
-    getQuery,
-    getQueryTypes,
-    type ParsedQuery,
-  } from '$lib/services/query-service';
+  import { getQuery, type ParsedQuery } from '$lib/services/query-service';
   import { authUser } from '$lib/stores/auth-user';
+  import { workflowRun } from '$lib/stores/workflow-run';
   import type { Payloads } from '$lib/types';
   import { encodePayloads } from '$lib/utilities/encode-payload';
   import { stringifyWithBigInt } from '$lib/utilities/parse-with-big-int';
@@ -37,18 +34,14 @@
 
   $: edited = initialQueryType !== queryType || input !== initialInput;
 
-  let queryTypes = getQueryTypes(
-    {
-      namespace,
-      workflow: params,
+  $: metadataError = $workflowRun.metadata?.error?.message;
+  $: queryTypes = $workflowRun?.metadata?.definition?.queryDefinitions?.filter(
+    (query) => {
+      return query?.name !== '__stack_trace';
     },
-    $page.data?.settings,
-    $authUser?.accessToken,
-  ).then((queryTypes) => {
-    queryType = queryType || queryTypes[0]?.name;
-    query(queryType);
-    return queryTypes;
-  });
+  );
+
+  $: queryType = queryType || queryTypes?.[0]?.name;
 
   let queryResult: Promise<ParsedQuery>;
   let encodePayloadResult: Promise<Payloads>;
@@ -89,12 +82,18 @@
 </script>
 
 <section>
-  {#await queryTypes}
+  {#if metadataError}
+    <EmptyState
+      title={translate('common.error-occurred')}
+      content={translate('workflows.no-workers-running-message')}
+      error={$workflowRun.metadata?.error?.message}
+    />
+  {:else if !queryTypes.length}
     <div class="text-center">
       <Loading />
       <p class="-mt-10">{translate('workflows.no-workers-failure-message')}</p>
     </div>
-  {:then types}
+  {:else}
     <div class="flex w-3/4 gap-4 max-2xl:w-full max-lg:flex-col">
       <Card class="mt-7 flex h-fit w-full flex-col gap-2">
         <Select
@@ -105,7 +104,7 @@
           data-testid="query-select"
           required
         >
-          {#each types as { name: value, description = '' }}
+          {#each queryTypes as { name: value, description = '' }}
             <Option {value} {description}>{value}</Option>
           {/each}
         </Select>
@@ -155,11 +154,5 @@
         {/await}
       </div>
     </div>
-  {:catch _error}
-    <EmptyState
-      title={translate('common.error-occurred')}
-      content={translate('workflows.no-workers-running-message')}
-      error={_error?.body?.message}
-    />
-  {/await}
+  {/if}
 </section>
diff --git a/src/lib/services/query-service.ts b/src/lib/services/query-service.ts
index 1be933fd2..3fe569f28 100644
--- a/src/lib/services/query-service.ts
+++ b/src/lib/services/query-service.ts
@@ -1,6 +1,7 @@
 import type { Payloads } from '$lib/types';
 import type { WorkflowQueryRouteParameters } from '$lib/types/api';
 import type { Eventual, Settings } from '$lib/types/global';
+import type { WorkflowMetadata } from '$lib/types/workflows';
 import { convertPayloadToJsonWithCodec } from '$lib/utilities/decode-payload';
 import { getQueryTypesFromError } from '$lib/utilities/get-query-types-from-error';
 import { has } from '$lib/utilities/has';
@@ -53,12 +54,7 @@ const formatParameters = async (
 
 async function fetchQuery(
   { workflow, namespace, queryType, queryArgs }: QueryRequestParameters,
-  request = fetch,
-  onError?: (error: {
-    status: number;
-    statusText: string;
-    body: unknown;
-  }) => void,
+  signal?: AbortSignal,
 ): Promise<QueryResponse> {
   workflow = await workflow;
   const parameters = await formatParameters(namespace, workflow, queryType);
@@ -77,32 +73,39 @@ async function fetchQuery(
           queryArgs,
         },
       }),
+      signal,
     },
-    request,
-    onError,
+    request: fetch,
     notifyOnError: false,
   });
 }
 
-export async function getQueryTypes(
+export async function getWorkflowMetadata(
   options: WorkflowParameters,
   settings: Settings,
   accessToken: string,
-): Promise<{ name: string; description?: string }[]> {
+  signal?: AbortSignal,
+): Promise<WorkflowMetadata> {
   try {
-    const result = await getQuery(
+    const metadata = await getQuery(
       { ...options, queryType: '__temporal_workflow_metadata' },
       settings,
       accessToken,
+      signal,
     );
-    return result?.definition?.queryDefinitions?.filter((query) => {
-      return query?.name !== '__stack_trace';
-    });
+    return metadata;
   } catch (e) {
     if (e.message?.includes('__temporal_workflow_metadata')) {
-      return getQueryTypesFromError(e.message);
+      const queryDefinitions = getQueryTypesFromError(e.message);
+      return {
+        definition: {
+          queryDefinitions,
+        },
+      };
     } else {
-      throw e;
+      return {
+        error: e,
+      };
     }
   }
 }
@@ -111,9 +114,9 @@ export async function getQuery(
   options: QueryRequestParameters,
   settings: Settings,
   accessToken: string,
-  request = fetch,
+  signal?: AbortSignal,
 ): Promise<ParsedQuery> {
-  return fetchQuery(options, request).then(async (execution) => {
+  return fetchQuery(options, signal).then(async (execution) => {
     const { queryResult } = execution ?? { queryResult: { payloads: [] } };
 
     let data: ParsedQuery = queryResult.payloads;
diff --git a/src/lib/services/workflow-service.ts b/src/lib/services/workflow-service.ts
index af748b4dd..d961216a7 100644
--- a/src/lib/services/workflow-service.ts
+++ b/src/lib/services/workflow-service.ts
@@ -4,6 +4,7 @@ import { v4 } from 'uuid';
 
 import { page } from '$app/stores';
 
+import type { PayloadInputEncoding } from '$lib/components/payload-input-with-encoding.svelte';
 import { Action } from '$lib/models/workflow-actions';
 import {
   toWorkflowExecution,
@@ -37,6 +38,7 @@ import type {
 } from '$lib/types/workflows';
 import {
   cloneAllPotentialPayloadsWithCodec,
+  decodeSingleReadablePayloadWithCodec,
   type PotentiallyDecodable,
 } from '$lib/utilities/decode-payload';
 import {
@@ -82,7 +84,7 @@ type SignalWorkflowOptions = {
   workflow: WorkflowExecution;
   name: string;
   input: string;
-  encoding: string;
+  encoding: PayloadInputEncoding;
 };
 
 type StartWorkflowOptions = {
@@ -91,7 +93,9 @@ type StartWorkflowOptions = {
   taskQueue: string;
   workflowType: string;
   input: string;
-  encoding: string;
+  encoding: PayloadInputEncoding;
+  summary: string;
+  details: string;
   searchAttributes: SearchAttributeInput[];
 };
 
@@ -498,6 +502,8 @@ export async function startWorkflow({
   taskQueue,
   workflowType,
   input,
+  summary,
+  details,
   encoding,
   searchAttributes,
 }: StartWorkflowOptions): Promise<{ runId: string }> {
@@ -506,15 +512,33 @@ export async function startWorkflow({
     workflowId,
   });
   let payloads;
+  let summaryPayload;
+  let detailsPayload;
 
   if (input) {
     try {
       payloads = await encodePayloads(input, encoding);
     } catch (_) {
-      console.error('Could not decode input for starting workflow');
+      throw new Error('Could not encode input for starting workflow');
     }
   }
 
+  try {
+    if (summary) {
+      summaryPayload = (
+        await encodePayloads(stringifyWithBigInt(summary), 'json/plain')
+      )[0];
+    }
+
+    if (details) {
+      detailsPayload = (
+        await encodePayloads(stringifyWithBigInt(details), 'json/plain')
+      )[0];
+    }
+  } catch (e) {
+    console.error('Could not encode summary or details for starting workflow');
+  }
+
   const body = stringifyWithBigInt({
     workflowId,
     taskQueue: {
@@ -524,6 +548,10 @@ export async function startWorkflow({
       name: workflowType,
     },
     input: payloads ? { payloads } : null,
+    userMetadata: {
+      summary: summaryPayload,
+      details: detailsPayload,
+    },
     searchAttributes:
       searchAttributes.length === 0
         ? null
@@ -554,6 +582,8 @@ export const fetchInitialValuesForStartWorkflow = async ({
 }): Promise<{
   input: string;
   searchAttributes: Record<string, string | Payload> | undefined;
+  summary: string;
+  details: string;
 }> => {
   const handleError: ErrorCallback = (err) => {
     console.error(err);
@@ -561,6 +591,8 @@ export const fetchInitialValuesForStartWorkflow = async ({
   const emptyValues = {
     input: '',
     searchAttributes: undefined,
+    summary: '',
+    details: '',
   };
   try {
     let query = '';
@@ -582,13 +614,14 @@ export const fetchInitialValuesForStartWorkflow = async ({
     );
 
     if (!workflows?.executions?.[0]) return emptyValues;
-    const workflow = toWorkflowExecutions(workflows)[0];
-
-    const firstEvent = await fetchInitialEvent({
+    const listWorkflow = toWorkflowExecutions(workflows)[0];
+    const params = {
       namespace,
-      workflowId: workflow.id,
-      runId: workflow.runId,
-    });
+      workflowId: listWorkflow.id,
+      runId: listWorkflow.runId,
+    };
+    const { workflow } = await fetchWorkflow(params);
+    const firstEvent = await fetchInitialEvent(params);
 
     const startEvent = firstEvent as WorkflowExecutionStartedEvent;
     const convertedAttributes = (await cloneAllPotentialPayloadsWithCodec(
@@ -598,10 +631,32 @@ export const fetchInitialValuesForStartWorkflow = async ({
       get(authUser).accessToken,
     )) as PotentiallyDecodable;
 
+    let summary = '';
+    if (workflow.summary) {
+      const decodedSummary = await decodeSingleReadablePayloadWithCodec(
+        workflow.summary,
+      );
+      if (typeof decodedSummary === 'string') {
+        summary = decodedSummary;
+      }
+    }
+
+    let details = '';
+    if (workflow.details) {
+      const decodedDetails = await decodeSingleReadablePayloadWithCodec(
+        workflow.details,
+      );
+      if (typeof decodedDetails === 'string') {
+        details = decodedDetails;
+      }
+    }
+
     const input = stringifyWithBigInt(convertedAttributes?.payloads[0]);
     return {
       input,
       searchAttributes: workflow?.searchAttributes?.indexedFields,
+      summary,
+      details,
     };
   } catch (e) {
     return emptyValues;
diff --git a/src/lib/stores/workflow-run.ts b/src/lib/stores/workflow-run.ts
index a265fac82..3ffdd7628 100644
--- a/src/lib/stores/workflow-run.ts
+++ b/src/lib/stores/workflow-run.ts
@@ -2,18 +2,32 @@ import { writable } from 'svelte/store';
 
 import type { GetPollersResponse } from '$lib/services/pollers-service';
 import { persistStore } from '$lib/stores/persist-store';
-import type { WorkflowExecution } from '$lib/types/workflows';
+import type { WorkflowExecution, WorkflowMetadata } from '$lib/types/workflows';
 
 export const refresh = writable(0);
 
 export type WorkflowRunWithWorkers = {
   workflow: WorkflowExecution | null;
   workers: GetPollersResponse;
+  metadata: WorkflowMetadata;
+  userMetadata: {
+    summary: string;
+    details: string;
+  };
 };
 
 export const initialWorkflowRun: WorkflowRunWithWorkers = {
   workflow: null,
   workers: { pollers: [], taskQueueStatus: null },
+  metadata: {
+    definition: {
+      queryDefinitions: [],
+    },
+  },
+  userMetadata: {
+    summary: '',
+    details: '',
+  },
 };
 
 export const workflowRun = writable<WorkflowRunWithWorkers>(initialWorkflowRun);
diff --git a/src/lib/types/schedule.ts b/src/lib/types/schedule.ts
index ca9632b31..ebad002b2 100644
--- a/src/lib/types/schedule.ts
+++ b/src/lib/types/schedule.ts
@@ -1,3 +1,4 @@
+import type { PayloadInputEncoding } from '$lib/components/payload-input-with-encoding.svelte';
 import type { SearchAttributeInput } from '$lib/stores/search-attributes';
 import type {
   CalendarSpec,
@@ -38,7 +39,7 @@ export type ScheduleActionParameters = {
   workflowId: string;
   taskQueue: string;
   input: string;
-  encoding: string;
+  encoding: PayloadInputEncoding;
   searchAttributes: SearchAttributeInput[];
 };
 
diff --git a/src/lib/types/workflows.ts b/src/lib/types/workflows.ts
index 392d447b0..33ac99d78 100644
--- a/src/lib/types/workflows.ts
+++ b/src/lib/types/workflows.ts
@@ -53,12 +53,37 @@ export type WorkflowExecutionConfig = Replace<
   { defaultWorkflowTaskTimeout: Duration }
 >;
 
+export type WorkflowInteractionDefinition = {
+  name?: string;
+  description?: string;
+};
+
+export type WorkflowMetadata = {
+  currentDetails?: string;
+  error?: Error;
+  definition?: {
+    type?: string;
+    queryDefinitions?: WorkflowInteractionDefinition[];
+    signalDefinitions?: WorkflowInteractionDefinition[];
+    updateDefinitions?: WorkflowInteractionDefinition[];
+  };
+};
+
+export type UserMetadata = {
+  summary?: Payload;
+  details?: Payload;
+};
+
+export type WorkflowExecutionConfigWithMetadata = WorkflowExecutionConfig & {
+  userMetadata?: UserMetadata;
+};
+
 export type WorkflowExecutionAPIResponse = Optional<{
   workflowExecutionInfo: WorkflowExecutionInfo;
   pendingActivities: PendingActivityInfo[];
   pendingChildren: PendingChildren[];
   pendingNexusOperations: PendingNexusOperation[];
-  executionConfig: WorkflowExecutionConfig;
+  executionConfig: WorkflowExecutionConfigWithMetadata;
   callbacks: Callbacks;
   pendingWorkflowTask: PendingWorkflowTaskInfo;
 }>;
@@ -153,6 +178,8 @@ export type WorkflowExecution = {
   defaultWorkflowTaskTimeout: Duration;
   canBeTerminated: boolean;
   callbacks: Callbacks;
+  summary?: Payload;
+  details?: Payload;
 };
 
 export type WorkflowTaskFailedCause =
diff --git a/src/lib/utilities/decode-payload.ts b/src/lib/utilities/decode-payload.ts
index 11238469e..7b871ff29 100644
--- a/src/lib/utilities/decode-payload.ts
+++ b/src/lib/utilities/decode-payload.ts
@@ -177,13 +177,13 @@ const keyIs = (key: string, ...validKeys: string[]) => {
 };
 
 export const decodeSingleReadablePayloadWithCodec = async (
-  payload: RawPayload,
+  payload: RawPayload | Payload,
   settings: Settings = get(page).data.settings,
-): Promise<string> => {
+): Promise<string | Payload> => {
   try {
     const decode = decodeReadablePayloads(settings);
     const data = await decode([payload]);
-    const result = data[0] as string;
+    const result = data[0];
     return result || '';
   } catch {
     return '';
diff --git a/src/lib/utilities/encode-payload.ts b/src/lib/utilities/encode-payload.ts
index a4bb0910e..f0871447d 100644
--- a/src/lib/utilities/encode-payload.ts
+++ b/src/lib/utilities/encode-payload.ts
@@ -1,5 +1,6 @@
 import { get } from 'svelte/store';
 
+import type { PayloadInputEncoding } from '$lib/components/payload-input-with-encoding.svelte';
 import { encodePayloadsWithCodec } from '$lib/services/data-encoder';
 import { dataEncoder } from '$lib/stores/data-encoder';
 import type { Payloads } from '$lib/types';
@@ -20,7 +21,10 @@ export const getSinglePayload = (decodedValue: string): string => {
   return '';
 };
 
-export const setBase64Payload = (payload: string, encoding = 'json/plain') => {
+export const setBase64Payload = (
+  payload: string,
+  encoding: PayloadInputEncoding = 'json/plain',
+) => {
   return {
     metadata: {
       encoding: btoa(encoding),
@@ -31,7 +35,7 @@ export const setBase64Payload = (payload: string, encoding = 'json/plain') => {
 
 export const encodePayloads = async (
   input: string,
-  encoding: string,
+  encoding: PayloadInputEncoding,
   encodeWithCodec: boolean = true,
 ): Promise<Payloads> => {
   let payloads = null;
diff --git a/src/markdown.reset.css b/src/markdown.reset.css
index 04a71b0a2..d6a6f0bbd 100644
--- a/src/markdown.reset.css
+++ b/src/markdown.reset.css
@@ -4,7 +4,6 @@ body {
   padding: 0;
   border: 0;
   font-size: 100%;
-  font: inherit;
   vertical-align: baseline;
 }
 
@@ -40,11 +39,6 @@ h6 {
   font-size: 0.67em;
 }
 
-ol,
-ul {
-  list-style: none;
-}
-
 blockquote,
 q {
   quotes: none;
@@ -62,12 +56,17 @@ table {
   border-spacing: 0;
 }
 
-ul {
+ul,
+ol {
   white-space: normal;
 }
 
 li {
-  list-style: inside;
+  list-style-position: inside;
+}
+
+li * {
+  display: inline;
 }
 
 a {
diff --git a/src/routes/(app)/nexus/[id]/+layout.ts b/src/routes/(app)/nexus/[id]/+layout.ts
index 6523eaee8..b33c2c060 100644
--- a/src/routes/(app)/nexus/[id]/+layout.ts
+++ b/src/routes/(app)/nexus/[id]/+layout.ts
@@ -15,7 +15,10 @@ export const load = async ({ params, fetch, parent }) => {
           endpoint.spec.description,
           data.settings,
         );
-        description = decodedDescription;
+
+        if (typeof decodedDescription === 'string') {
+          description = decodedDescription;
+        }
       }
     } catch (e) {
       console.error('Error decoding Nexus Endpoint description:', e);
diff --git a/src/routes/(app)/render/+server.ts b/src/routes/(app)/render/+server.ts
index c3e025094..27c1c2a25 100644
--- a/src/routes/(app)/render/+server.ts
+++ b/src/routes/(app)/render/+server.ts
@@ -25,7 +25,7 @@ const generateNonce = (): string => crypto.randomBytes(16).toString('hex');
  * @returns
  */
 const generateContentSecurityPolicy = ({ nonce }: RenderOptions) => {
-  return `base-uri 'self'; default-src 'none'; style-src 'nonce-${nonce}'; script-src 'nonce-${nonce}'; frame-ancestors 'self'; form-action 'none'; sandbox allow-same-origin allow-popups;`;
+  return `base-uri 'self'; default-src 'none'; style-src 'nonce-${nonce}'; script-src 'nonce-${nonce}'; frame-ancestors 'self'; form-action 'none'; sandbox allow-same-origin allow-popups allow-popups-to-escape-sandbox;`;
 };
 
 /**