diff --git a/apps/hello/main.py b/apps/hello/main.py
index 40462ed07..f45f4b4b1 100644
--- a/apps/hello/main.py
+++ b/apps/hello/main.py
@@ -75,7 +75,7 @@ def _get_editable_df():
         'object': [{"updatedAt": None}, {"updatedAt": None}, {"updatedAt": None}],
         'text': ['one', 'two', 'three'],
     })
-    return wf.EditableDataframe(df)
+    return wf.EditableDataFrame(df)
 
 def _get_highlighted_members():
     sample_df = _get_main_df().sample(3).set_index("name", drop=False)
diff --git a/docs/framework/builder-basics.mdx b/docs/framework/builder-basics.mdx
index e44369400..6c215d857 100644
--- a/docs/framework/builder-basics.mdx
+++ b/docs/framework/builder-basics.mdx
@@ -10,13 +10,13 @@ You can switch modes between _User Interface_, _Code_ and _Preview_ using the bu
 
 ### User Interface
 
-![Framework Builder - Mode: User Interface](/framework/images/builder-basics.ui.png#framework)
+![Framework Builder - Mode: User Interface](/framework/images/builder-basics.ui.png)
 
 The default mode. Allows you to focus on building the interface.
 
 ### Code
 
-![Framework Builder - Mode: Code](/framework/images/builder-basics.code.png#framework)
+![Framework Builder - Mode: Code](/framework/images/builder-basics.code.png)
 
 This mode displays the **code editor** and the **application log**, while still allowing you to access the _Component Tree_ and _Settings_.
 
@@ -35,7 +35,7 @@ This mode displays the **code editor** and the **application log**, while still
 
 ### Preview
 
-![Framework Builder - Mode: Preview](/framework/images/builder-basics.preview.png#framework)
+![Framework Builder - Mode: Preview](/framework/images/builder-basics.preview.png)
 
 The _Preview_ mode shows the application exactly like the user will see it. It allocates the whole width of the viewport to the app.
 
diff --git a/docs/framework/dataframe.mdx b/docs/framework/dataframe.mdx
index ec52caf57..6a6ddc483 100644
--- a/docs/framework/dataframe.mdx
+++ b/docs/framework/dataframe.mdx
@@ -9,7 +9,7 @@ it offers components as `dataframe` to manipulate dataframes. These components a
 |--------------------|---------------------------------------|
 | `pandas.DataFrame` | x                                     |
 | `polar.DataFrame`  | x                                     |
-| `list of records`  | x (with `EditableDataframe`)          |
+| `list of records`  | x (with `EditableDataFrame`)          |
 
 ## Use a dataframe
 
@@ -26,7 +26,7 @@ wf.init_state({
 
 ## Prepare a dataframe for editing
 
-**writer provides `EditableDataframe` as a helper to facilitate manipulation**. it makes it easier to write event handlers such as adding a line,
+**writer provides `EditableDataFrame` as a helper to facilitate manipulation**. it makes it easier to write event handlers such as adding a line,
 deleting it or modifying a value, etc...
 
 ```python
@@ -36,7 +36,7 @@ import writer as wf
 df = pandas.DataFrame({'a': [1, 2, 3], 'b': [4, 5, 6]})
 
 wf.init_state({
-	'mydf': wf.EditableDataframe(df)
+	'mydf': wf.EditableDataFrame(df)
 })
 ```
 
@@ -50,7 +50,7 @@ import writer as wf
 
 df = pandas.DataFrame({'a': [1, 2, 3], 'b': [4, 5, 6]})
 wf.init_state({
-	'mydf': wf.EditableDataframe(df)
+	'mydf': wf.EditableDataFrame(df)
 })
 
 # Subscribe this event handler to the `wf-dataframe-add` event
@@ -76,9 +76,9 @@ def on_record_action(state, payload):
 		state['record'] = state['df'].record(record_index) # dict representation of record
 ```
 
-### Datastructures supported by `EditableDataframe`
+### Datastructures supported by `EditableDataFrame`
 
-`EditableDataframe` can be used with a panda dataframe, a polar dataframe and list of records.
+`EditableDataFrame` can be used with a panda dataframe, a polar dataframe and list of records.
 
 ```python
 import pandas
@@ -91,8 +91,8 @@ polars_df = polars.DataFrame({'a': [1, 2, 3], 'b': [4, 5, 6]})
 list_of_records = [{'a': 1, 'b': 4}, {'a': 2, 'b': 5}, {'a': 3, 'b': 6}]
 
 wf.init_state({
-	'mypandas': wf.EditableDataframe(panda_df),
-	'mypolars': wf.EditableDataframe(polars_df),
-	'mylistofrecords': wf.EditableDataframe(list_of_records)
+	'mypandas': wf.EditableDataFrame(panda_df),
+	'mypolars': wf.EditableDataFrame(polars_df),
+	'mylistofrecords': wf.EditableDataFrame(list_of_records)
 })
 ```
diff --git a/docs/framework/introduction.mdx b/docs/framework/introduction.mdx
index 70fc2a4c6..20af83e1f 100644
--- a/docs/framework/introduction.mdx
+++ b/docs/framework/introduction.mdx
@@ -4,7 +4,7 @@ title: "Introduction"
 
 The Writer Framework lets you build feature-rich apps by using a drag-and-drop visual editor called **the Builder** and writing the back-end code in Python. It's fast and flexible, with clean, easy-to-test syntax. It provides separation of concerns between UI and business logic, enabling more complex apps.
 
-![Framework Builder screenshot](/framework/public/builder.png#framework) 
+![Framework Builder screenshot](/framework/public/builder.png) 
 
 Build AI apps with the Writer Framework when:
 
diff --git a/poetry.lock b/poetry.lock
index 95edbbaef..b4244e6b1 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -1,4 +1,4 @@
-# This file is automatically @generated by Poetry 1.8.3 and should not be changed by hand.
+# This file is automatically @generated by Poetry 1.8.2 and should not be changed by hand.
 
 [[package]]
 name = "alfred-cli"
@@ -54,41 +54,52 @@ files = [
 
 [[package]]
 name = "anyio"
-version = "4.6.2.post1"
+version = "4.7.0"
 description = "High level compatibility layer for multiple asynchronous event loop implementations"
 optional = false
 python-versions = ">=3.9"
 files = [
-    {file = "anyio-4.6.2.post1-py3-none-any.whl", hash = "sha256:6d170c36fba3bdd840c73d3868c1e777e33676a69c3a72cf0a0d5d6d8009b61d"},
-    {file = "anyio-4.6.2.post1.tar.gz", hash = "sha256:4c8bc31ccdb51c7f7bd251f51c609e038d63e34219b44aa86e47576389880b4c"},
+    {file = "anyio-4.7.0-py3-none-any.whl", hash = "sha256:ea60c3723ab42ba6fff7e8ccb0488c898ec538ff4df1f1d5e642c3601d07e352"},
+    {file = "anyio-4.7.0.tar.gz", hash = "sha256:2f834749c602966b7d456a7567cafcb309f96482b5081d14ac93ccd457f9dd48"},
 ]
 
 [package.dependencies]
 exceptiongroup = {version = ">=1.0.2", markers = "python_version < \"3.11\""}
 idna = ">=2.8"
 sniffio = ">=1.1"
-typing-extensions = {version = ">=4.1", markers = "python_version < \"3.11\""}
+typing_extensions = {version = ">=4.5", markers = "python_version < \"3.13\""}
 
 [package.extras]
-doc = ["Sphinx (>=7.4,<8.0)", "packaging", "sphinx-autodoc-typehints (>=1.2.0)", "sphinx-rtd-theme"]
-test = ["anyio[trio]", "coverage[toml] (>=7)", "exceptiongroup (>=1.2.0)", "hypothesis (>=4.0)", "psutil (>=5.9)", "pytest (>=7.0)", "pytest-mock (>=3.6.1)", "trustme", "truststore (>=0.9.1)", "uvloop (>=0.21.0b1)"]
+doc = ["Sphinx (>=7.4,<8.0)", "packaging", "sphinx-autodoc-typehints (>=1.2.0)", "sphinx_rtd_theme"]
+test = ["anyio[trio]", "coverage[toml] (>=7)", "exceptiongroup (>=1.2.0)", "hypothesis (>=4.0)", "psutil (>=5.9)", "pytest (>=7.0)", "pytest-mock (>=3.6.1)", "trustme", "truststore (>=0.9.1)", "uvloop (>=0.21)"]
 trio = ["trio (>=0.26.1)"]
 
+[[package]]
+name = "async-timeout"
+version = "5.0.1"
+description = "Timeout context manager for asyncio programs"
+optional = false
+python-versions = ">=3.8"
+files = [
+    {file = "async_timeout-5.0.1-py3-none-any.whl", hash = "sha256:39e3809566ff85354557ec2398b55e096c8364bacac9405a7a1fa429e77fe76c"},
+    {file = "async_timeout-5.0.1.tar.gz", hash = "sha256:d9321a7a3d5a6a5e187e824d2fa0793ce379a202935782d555d6e9d2735677d3"},
+]
+
 [[package]]
 name = "attrs"
-version = "24.2.0"
+version = "24.3.0"
 description = "Classes Without Boilerplate"
 optional = false
-python-versions = ">=3.7"
+python-versions = ">=3.8"
 files = [
-    {file = "attrs-24.2.0-py3-none-any.whl", hash = "sha256:81921eb96de3191c8258c199618104dd27ac608d9366f5e35d011eae1867ede2"},
-    {file = "attrs-24.2.0.tar.gz", hash = "sha256:5cfb1b9148b5b086569baec03f20d7b6bf3bcacc9a42bebf87ffaaca362f6346"},
+    {file = "attrs-24.3.0-py3-none-any.whl", hash = "sha256:ac96cd038792094f438ad1f6ff80837353805ac950cd2aa0e0625ef19850c308"},
+    {file = "attrs-24.3.0.tar.gz", hash = "sha256:8f5c07333d543103541ba7be0e2ce16eeee8130cb0b3f9238ab904ce1e85baff"},
 ]
 
 [package.extras]
 benchmark = ["cloudpickle", "hypothesis", "mypy (>=1.11.1)", "pympler", "pytest (>=4.3.0)", "pytest-codspeed", "pytest-mypy-plugins", "pytest-xdist[psutil]"]
 cov = ["cloudpickle", "coverage[toml] (>=5.3)", "hypothesis", "mypy (>=1.11.1)", "pympler", "pytest (>=4.3.0)", "pytest-mypy-plugins", "pytest-xdist[psutil]"]
-dev = ["cloudpickle", "hypothesis", "mypy (>=1.11.1)", "pre-commit", "pympler", "pytest (>=4.3.0)", "pytest-mypy-plugins", "pytest-xdist[psutil]"]
+dev = ["cloudpickle", "hypothesis", "mypy (>=1.11.1)", "pre-commit-uv", "pympler", "pytest (>=4.3.0)", "pytest-mypy-plugins", "pytest-xdist[psutil]"]
 docs = ["cogapp", "furo", "myst-parser", "sphinx", "sphinx-notfound-page", "sphinxcontrib-towncrier", "towncrier (<24.7)"]
 tests = ["cloudpickle", "hypothesis", "mypy (>=1.11.1)", "pympler", "pytest (>=4.3.0)", "pytest-mypy-plugins", "pytest-xdist[psutil]"]
 tests-mypy = ["mypy (>=1.11.1)", "pytest-mypy-plugins"]
@@ -109,13 +120,13 @@ cryptography = "*"
 
 [[package]]
 name = "certifi"
-version = "2024.8.30"
+version = "2024.12.14"
 description = "Python package for providing Mozilla's CA Bundle."
 optional = false
 python-versions = ">=3.6"
 files = [
-    {file = "certifi-2024.8.30-py3-none-any.whl", hash = "sha256:922820b53db7a7257ffbda3f597266d435245903d80737e34f8a45ff3e3230d8"},
-    {file = "certifi-2024.8.30.tar.gz", hash = "sha256:bec941d2aa8195e248a60b31ff9f0558284cf01a52591ceda73ea9afffd69fd9"},
+    {file = "certifi-2024.12.14-py3-none-any.whl", hash = "sha256:1275f7a45be9464efc1173084eaa30f866fe2e47d389406136d332ed4967ec56"},
+    {file = "certifi-2024.12.14.tar.gz", hash = "sha256:b650d30f370c2b724812bee08008be0c4163b163ddaec3f2546c1caf65f191db"},
 ]
 
 [[package]]
@@ -349,7 +360,6 @@ files = [
     {file = "cryptography-44.0.0-cp37-abi3-manylinux_2_28_aarch64.whl", hash = "sha256:761817a3377ef15ac23cd7834715081791d4ec77f9297ee694ca1ee9c2c7e5eb"},
     {file = "cryptography-44.0.0-cp37-abi3-manylinux_2_28_x86_64.whl", hash = "sha256:3c672a53c0fb4725a29c303be906d3c1fa99c32f58abe008a82705f9ee96f40b"},
     {file = "cryptography-44.0.0-cp37-abi3-manylinux_2_34_aarch64.whl", hash = "sha256:4ac4c9f37eba52cb6fbeaf5b59c152ea976726b865bd4cf87883a7e7006cc543"},
-    {file = "cryptography-44.0.0-cp37-abi3-manylinux_2_34_x86_64.whl", hash = "sha256:60eb32934076fa07e4316b7b2742fa52cbb190b42c2df2863dbc4230a0a9b385"},
     {file = "cryptography-44.0.0-cp37-abi3-musllinux_1_2_aarch64.whl", hash = "sha256:ed3534eb1090483c96178fcb0f8893719d96d5274dfde98aa6add34614e97c8e"},
     {file = "cryptography-44.0.0-cp37-abi3-musllinux_1_2_x86_64.whl", hash = "sha256:f3f6fdfa89ee2d9d496e2c087cebef9d4fcbb0ad63c40e821b39f74bf48d9c5e"},
     {file = "cryptography-44.0.0-cp37-abi3-win32.whl", hash = "sha256:eb33480f1bad5b78233b0ad3e1b0be21e8ef1da745d8d2aecbb20671658b9053"},
@@ -360,7 +370,6 @@ files = [
     {file = "cryptography-44.0.0-cp39-abi3-manylinux_2_28_aarch64.whl", hash = "sha256:c5eb858beed7835e5ad1faba59e865109f3e52b3783b9ac21e7e47dc5554e289"},
     {file = "cryptography-44.0.0-cp39-abi3-manylinux_2_28_x86_64.whl", hash = "sha256:f53c2c87e0fb4b0c00fa9571082a057e37690a8f12233306161c8f4b819960b7"},
     {file = "cryptography-44.0.0-cp39-abi3-manylinux_2_34_aarch64.whl", hash = "sha256:9e6fc8a08e116fb7c7dd1f040074c9d7b51d74a8ea40d4df2fc7aa08b76b9e6c"},
-    {file = "cryptography-44.0.0-cp39-abi3-manylinux_2_34_x86_64.whl", hash = "sha256:9abcc2e083cbe8dde89124a47e5e53ec38751f0d7dfd36801008f316a127d7ba"},
     {file = "cryptography-44.0.0-cp39-abi3-musllinux_1_2_aarch64.whl", hash = "sha256:d2436114e46b36d00f8b72ff57e598978b37399d2786fd39793c36c6d5cb1c64"},
     {file = "cryptography-44.0.0-cp39-abi3-musllinux_1_2_x86_64.whl", hash = "sha256:a01956ddfa0a6790d594f5b34fc1bfa6098aca434696a03cfdbe469b8ed79285"},
     {file = "cryptography-44.0.0-cp39-abi3-win32.whl", hash = "sha256:eca27345e1214d1b9f9490d200f9db5a874479be914199194e746c893788d417"},
@@ -414,13 +423,13 @@ test = ["pytest (>=6)"]
 
 [[package]]
 name = "fastapi"
-version = "0.115.5"
+version = "0.115.6"
 description = "FastAPI framework, high performance, easy to learn, fast to code, ready for production"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "fastapi-0.115.5-py3-none-any.whl", hash = "sha256:596b95adbe1474da47049e802f9a65ab2ffa9c2b07e7efee70eb8a66c9f2f796"},
-    {file = "fastapi-0.115.5.tar.gz", hash = "sha256:0e7a4d0dc0d01c68df21887cce0945e72d3c48b9f4f79dfe7a7d53aa08fbb289"},
+    {file = "fastapi-0.115.6-py3-none-any.whl", hash = "sha256:e9240b29e36fa8f4bb7290316988e90c381e5092e0cbe84e7818cc3713bcf305"},
+    {file = "fastapi-0.115.6.tar.gz", hash = "sha256:9ec46f7addc14ea472958a96aae5b5de65f39721a46aaf5705c480d9a8b76654"},
 ]
 
 [package.dependencies]
@@ -476,13 +485,13 @@ trio = ["trio (>=0.22.0,<1.0)"]
 
 [[package]]
 name = "httpx"
-version = "0.28.0"
+version = "0.28.1"
 description = "The next generation HTTP client."
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "httpx-0.28.0-py3-none-any.whl", hash = "sha256:dc0b419a0cfeb6e8b34e85167c0da2671206f5095f1baa9663d23bcfd6b535fc"},
-    {file = "httpx-0.28.0.tar.gz", hash = "sha256:0858d3bab51ba7e386637f22a61d8ccddaeec5f3fe4209da3a6168dbb91573e0"},
+    {file = "httpx-0.28.1-py3-none-any.whl", hash = "sha256:d909fcccc110f8c7faf814ca82a9a4d816bc5a6dbfea25d6591d6985b8ba59ad"},
+    {file = "httpx-0.28.1.tar.gz", hash = "sha256:75e98c5f16b0f35b567856f597f06ff2270a374470a5c2392242528e3e3e42fc"},
 ]
 
 [package.dependencies]
@@ -711,13 +720,13 @@ files = [
 
 [[package]]
 name = "narwhals"
-version = "1.14.3"
+version = "1.18.4"
 description = "Extremely lightweight compatibility layer between dataframe libraries"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "narwhals-1.14.3-py3-none-any.whl", hash = "sha256:49bfcd80387e1377a353c5274f63d12bade364fd2feac45742be9c0f69c60ae9"},
-    {file = "narwhals-1.14.3.tar.gz", hash = "sha256:3a9484c69c36bbc44a28a36627eede502946e60d6e0401b4b351202b42b18419"},
+    {file = "narwhals-1.18.4-py3-none-any.whl", hash = "sha256:c6bb6b6fba59caeab28a7d6ec1e79ab0040c75baef2e4152199ad1a9c266ef96"},
+    {file = "narwhals-1.18.4.tar.gz", hash = "sha256:b1da4e2e4ab185824781760319ac1ec8ee2944a929795064c3a64ffff16b00c4"},
 ]
 
 [package.extras]
@@ -727,6 +736,7 @@ modin = ["modin"]
 pandas = ["pandas (>=0.25.3)"]
 polars = ["polars (>=0.20.3)"]
 pyarrow = ["pyarrow (>=11.0.0)"]
+pyspark = ["pyspark (>=3.3.0)"]
 
 [[package]]
 name = "numpy"
@@ -1029,13 +1039,13 @@ files = [
 
 [[package]]
 name = "pydantic"
-version = "2.10.2"
+version = "2.10.3"
 description = "Data validation using Python type hints"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "pydantic-2.10.2-py3-none-any.whl", hash = "sha256:cfb96e45951117c3024e6b67b25cdc33a3cb7b2fa62e239f7af1378358a1d99e"},
-    {file = "pydantic-2.10.2.tar.gz", hash = "sha256:2bc2d7f17232e0841cbba4641e65ba1eb6fafb3a08de3a091ff3ce14a197c4fa"},
+    {file = "pydantic-2.10.3-py3-none-any.whl", hash = "sha256:be04d85bbc7b65651c5f8e6b9976ed9c6f41782a55524cef079a34a0bb82144d"},
+    {file = "pydantic-2.10.3.tar.gz", hash = "sha256:cb5ac360ce894ceacd69c403187900a02c4b20b693a9dd1d643e1effab9eadf9"},
 ]
 
 [package.dependencies]
@@ -1215,13 +1225,13 @@ six = ">=1.5"
 
 [[package]]
 name = "python-multipart"
-version = "0.0.18"
+version = "0.0.19"
 description = "A streaming multipart parser for Python"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "python_multipart-0.0.18-py3-none-any.whl", hash = "sha256:efe91480f485f6a361427a541db4796f9e1591afc0fb8e7a4ba06bfbc6708996"},
-    {file = "python_multipart-0.0.18.tar.gz", hash = "sha256:7a68db60c8bfb82e460637fa4750727b45af1d5e2ed215593f917f64694d34fe"},
+    {file = "python_multipart-0.0.19-py3-none-any.whl", hash = "sha256:f8d5b0b9c618575bf9df01c684ded1d94a338839bdd8223838afacfb4bb2082d"},
+    {file = "python_multipart-0.0.19.tar.gz", hash = "sha256:905502ef39050557b7a6af411f454bc19526529ca46ae6831508438890ce12cc"},
 ]
 
 [[package]]
@@ -1235,6 +1245,24 @@ files = [
     {file = "pytz-2024.2.tar.gz", hash = "sha256:2aa355083c50a0f93fa581709deac0c9ad65cca8a9e9beac660adcbd493c798a"},
 ]
 
+[[package]]
+name = "redis"
+version = "5.2.1"
+description = "Python client for Redis database and key-value store"
+optional = false
+python-versions = ">=3.8"
+files = [
+    {file = "redis-5.2.1-py3-none-any.whl", hash = "sha256:ee7e1056b9aea0f04c6c2ed59452947f34c4940ee025f5dd83e6a6418b6989e4"},
+    {file = "redis-5.2.1.tar.gz", hash = "sha256:16f2e22dff21d5125e8481515e386711a34cbec50f0e44413dd7d9c060a54e0f"},
+]
+
+[package.dependencies]
+async-timeout = {version = ">=4.0.3", markers = "python_full_version < \"3.11.3\""}
+
+[package.extras]
+hiredis = ["hiredis (>=3.0.0)"]
+ocsp = ["cryptography (>=36.0.1)", "pyopenssl (==23.2.1)", "requests (>=2.31.0)"]
+
 [[package]]
 name = "referencing"
 version = "0.35.1"
@@ -1273,101 +1301,114 @@ use-chardet-on-py3 = ["chardet (>=3.0.2,<6)"]
 
 [[package]]
 name = "rpds-py"
-version = "0.21.0"
+version = "0.22.3"
 description = "Python bindings to Rust's persistent data structures (rpds)"
 optional = false
 python-versions = ">=3.9"
 files = [
-    {file = "rpds_py-0.21.0-cp310-cp310-macosx_10_12_x86_64.whl", hash = "sha256:a017f813f24b9df929674d0332a374d40d7f0162b326562daae8066b502d0590"},
-    {file = "rpds_py-0.21.0-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:20cc1ed0bcc86d8e1a7e968cce15be45178fd16e2ff656a243145e0b439bd250"},
-    {file = "rpds_py-0.21.0-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:ad116dda078d0bc4886cb7840e19811562acdc7a8e296ea6ec37e70326c1b41c"},
-    {file = "rpds_py-0.21.0-cp310-cp310-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:808f1ac7cf3b44f81c9475475ceb221f982ef548e44e024ad5f9e7060649540e"},
-    {file = "rpds_py-0.21.0-cp310-cp310-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:de552f4a1916e520f2703ec474d2b4d3f86d41f353e7680b597512ffe7eac5d0"},
-    {file = "rpds_py-0.21.0-cp310-cp310-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:efec946f331349dfc4ae9d0e034c263ddde19414fe5128580f512619abed05f1"},
-    {file = "rpds_py-0.21.0-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:b80b4690bbff51a034bfde9c9f6bf9357f0a8c61f548942b80f7b66356508bf5"},
-    {file = "rpds_py-0.21.0-cp310-cp310-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:085ed25baac88953d4283e5b5bd094b155075bb40d07c29c4f073e10623f9f2e"},
-    {file = "rpds_py-0.21.0-cp310-cp310-musllinux_1_2_aarch64.whl", hash = "sha256:daa8efac2a1273eed2354397a51216ae1e198ecbce9036fba4e7610b308b6153"},
-    {file = "rpds_py-0.21.0-cp310-cp310-musllinux_1_2_i686.whl", hash = "sha256:95a5bad1ac8a5c77b4e658671642e4af3707f095d2b78a1fdd08af0dfb647624"},
-    {file = "rpds_py-0.21.0-cp310-cp310-musllinux_1_2_x86_64.whl", hash = "sha256:3e53861b29a13d5b70116ea4230b5f0f3547b2c222c5daa090eb7c9c82d7f664"},
-    {file = "rpds_py-0.21.0-cp310-none-win32.whl", hash = "sha256:ea3a6ac4d74820c98fcc9da4a57847ad2cc36475a8bd9683f32ab6d47a2bd682"},
-    {file = "rpds_py-0.21.0-cp310-none-win_amd64.whl", hash = "sha256:b8f107395f2f1d151181880b69a2869c69e87ec079c49c0016ab96860b6acbe5"},
-    {file = "rpds_py-0.21.0-cp311-cp311-macosx_10_12_x86_64.whl", hash = "sha256:5555db3e618a77034954b9dc547eae94166391a98eb867905ec8fcbce1308d95"},
-    {file = "rpds_py-0.21.0-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:97ef67d9bbc3e15584c2f3c74bcf064af36336c10d2e21a2131e123ce0f924c9"},
-    {file = "rpds_py-0.21.0-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:4ab2c2a26d2f69cdf833174f4d9d86118edc781ad9a8fa13970b527bf8236027"},
-    {file = "rpds_py-0.21.0-cp311-cp311-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:4e8921a259f54bfbc755c5bbd60c82bb2339ae0324163f32868f63f0ebb873d9"},
-    {file = "rpds_py-0.21.0-cp311-cp311-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:8a7ff941004d74d55a47f916afc38494bd1cfd4b53c482b77c03147c91ac0ac3"},
-    {file = "rpds_py-0.21.0-cp311-cp311-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:5145282a7cd2ac16ea0dc46b82167754d5e103a05614b724457cffe614f25bd8"},
-    {file = "rpds_py-0.21.0-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:de609a6f1b682f70bb7163da745ee815d8f230d97276db049ab447767466a09d"},
-    {file = "rpds_py-0.21.0-cp311-cp311-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:40c91c6e34cf016fa8e6b59d75e3dbe354830777fcfd74c58b279dceb7975b75"},
-    {file = "rpds_py-0.21.0-cp311-cp311-musllinux_1_2_aarch64.whl", hash = "sha256:d2132377f9deef0c4db89e65e8bb28644ff75a18df5293e132a8d67748397b9f"},
-    {file = "rpds_py-0.21.0-cp311-cp311-musllinux_1_2_i686.whl", hash = "sha256:0a9e0759e7be10109645a9fddaaad0619d58c9bf30a3f248a2ea57a7c417173a"},
-    {file = "rpds_py-0.21.0-cp311-cp311-musllinux_1_2_x86_64.whl", hash = "sha256:9e20da3957bdf7824afdd4b6eeb29510e83e026473e04952dca565170cd1ecc8"},
-    {file = "rpds_py-0.21.0-cp311-none-win32.whl", hash = "sha256:f71009b0d5e94c0e86533c0b27ed7cacc1239cb51c178fd239c3cfefefb0400a"},
-    {file = "rpds_py-0.21.0-cp311-none-win_amd64.whl", hash = "sha256:e168afe6bf6ab7ab46c8c375606298784ecbe3ba31c0980b7dcbb9631dcba97e"},
-    {file = "rpds_py-0.21.0-cp312-cp312-macosx_10_12_x86_64.whl", hash = "sha256:30b912c965b2aa76ba5168fd610087bad7fcde47f0a8367ee8f1876086ee6d1d"},
-    {file = "rpds_py-0.21.0-cp312-cp312-macosx_11_0_arm64.whl", hash = "sha256:ca9989d5d9b1b300bc18e1801c67b9f6d2c66b8fd9621b36072ed1df2c977f72"},
-    {file = "rpds_py-0.21.0-cp312-cp312-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:6f54e7106f0001244a5f4cf810ba8d3f9c542e2730821b16e969d6887b664266"},
-    {file = "rpds_py-0.21.0-cp312-cp312-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:fed5dfefdf384d6fe975cc026886aece4f292feaf69d0eeb716cfd3c5a4dd8be"},
-    {file = "rpds_py-0.21.0-cp312-cp312-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:590ef88db231c9c1eece44dcfefd7515d8bf0d986d64d0caf06a81998a9e8cab"},
-    {file = "rpds_py-0.21.0-cp312-cp312-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:f983e4c2f603c95dde63df633eec42955508eefd8d0f0e6d236d31a044c882d7"},
-    {file = "rpds_py-0.21.0-cp312-cp312-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:b229ce052ddf1a01c67d68166c19cb004fb3612424921b81c46e7ea7ccf7c3bf"},
-    {file = "rpds_py-0.21.0-cp312-cp312-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:ebf64e281a06c904a7636781d2e973d1f0926a5b8b480ac658dc0f556e7779f4"},
-    {file = "rpds_py-0.21.0-cp312-cp312-musllinux_1_2_aarch64.whl", hash = "sha256:998a8080c4495e4f72132f3d66ff91f5997d799e86cec6ee05342f8f3cda7dca"},
-    {file = "rpds_py-0.21.0-cp312-cp312-musllinux_1_2_i686.whl", hash = "sha256:98486337f7b4f3c324ab402e83453e25bb844f44418c066623db88e4c56b7c7b"},
-    {file = "rpds_py-0.21.0-cp312-cp312-musllinux_1_2_x86_64.whl", hash = "sha256:a78d8b634c9df7f8d175451cfeac3810a702ccb85f98ec95797fa98b942cea11"},
-    {file = "rpds_py-0.21.0-cp312-none-win32.whl", hash = "sha256:a58ce66847711c4aa2ecfcfaff04cb0327f907fead8945ffc47d9407f41ff952"},
-    {file = "rpds_py-0.21.0-cp312-none-win_amd64.whl", hash = "sha256:e860f065cc4ea6f256d6f411aba4b1251255366e48e972f8a347cf88077b24fd"},
-    {file = "rpds_py-0.21.0-cp313-cp313-macosx_10_12_x86_64.whl", hash = "sha256:ee4eafd77cc98d355a0d02f263efc0d3ae3ce4a7c24740010a8b4012bbb24937"},
-    {file = "rpds_py-0.21.0-cp313-cp313-macosx_11_0_arm64.whl", hash = "sha256:688c93b77e468d72579351a84b95f976bd7b3e84aa6686be6497045ba84be560"},
-    {file = "rpds_py-0.21.0-cp313-cp313-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:c38dbf31c57032667dd5a2f0568ccde66e868e8f78d5a0d27dcc56d70f3fcd3b"},
-    {file = "rpds_py-0.21.0-cp313-cp313-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:2d6129137f43f7fa02d41542ffff4871d4aefa724a5fe38e2c31a4e0fd343fb0"},
-    {file = "rpds_py-0.21.0-cp313-cp313-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:520ed8b99b0bf86a176271f6fe23024323862ac674b1ce5b02a72bfeff3fff44"},
-    {file = "rpds_py-0.21.0-cp313-cp313-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:aaeb25ccfb9b9014a10eaf70904ebf3f79faaa8e60e99e19eef9f478651b9b74"},
-    {file = "rpds_py-0.21.0-cp313-cp313-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:af04ac89c738e0f0f1b913918024c3eab6e3ace989518ea838807177d38a2e94"},
-    {file = "rpds_py-0.21.0-cp313-cp313-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:b9b76e2afd585803c53c5b29e992ecd183f68285b62fe2668383a18e74abe7a3"},
-    {file = "rpds_py-0.21.0-cp313-cp313-musllinux_1_2_aarch64.whl", hash = "sha256:5afb5efde74c54724e1a01118c6e5c15e54e642c42a1ba588ab1f03544ac8c7a"},
-    {file = "rpds_py-0.21.0-cp313-cp313-musllinux_1_2_i686.whl", hash = "sha256:52c041802a6efa625ea18027a0723676a778869481d16803481ef6cc02ea8cb3"},
-    {file = "rpds_py-0.21.0-cp313-cp313-musllinux_1_2_x86_64.whl", hash = "sha256:ee1e4fc267b437bb89990b2f2abf6c25765b89b72dd4a11e21934df449e0c976"},
-    {file = "rpds_py-0.21.0-cp313-none-win32.whl", hash = "sha256:0c025820b78817db6a76413fff6866790786c38f95ea3f3d3c93dbb73b632202"},
-    {file = "rpds_py-0.21.0-cp313-none-win_amd64.whl", hash = "sha256:320c808df533695326610a1b6a0a6e98f033e49de55d7dc36a13c8a30cfa756e"},
-    {file = "rpds_py-0.21.0-cp39-cp39-macosx_10_12_x86_64.whl", hash = "sha256:2c51d99c30091f72a3c5d126fad26236c3f75716b8b5e5cf8effb18889ced928"},
-    {file = "rpds_py-0.21.0-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:cbd7504a10b0955ea287114f003b7ad62330c9e65ba012c6223dba646f6ffd05"},
-    {file = "rpds_py-0.21.0-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:6dcc4949be728ede49e6244eabd04064336012b37f5c2200e8ec8eb2988b209c"},
-    {file = "rpds_py-0.21.0-cp39-cp39-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:f414da5c51bf350e4b7960644617c130140423882305f7574b6cf65a3081cecb"},
-    {file = "rpds_py-0.21.0-cp39-cp39-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:9afe42102b40007f588666bc7de82451e10c6788f6f70984629db193849dced1"},
-    {file = "rpds_py-0.21.0-cp39-cp39-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:3b929c2bb6e29ab31f12a1117c39f7e6d6450419ab7464a4ea9b0b417174f044"},
-    {file = "rpds_py-0.21.0-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:8404b3717da03cbf773a1d275d01fec84ea007754ed380f63dfc24fb76ce4592"},
-    {file = "rpds_py-0.21.0-cp39-cp39-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:e12bb09678f38b7597b8346983d2323a6482dcd59e423d9448108c1be37cac9d"},
-    {file = "rpds_py-0.21.0-cp39-cp39-musllinux_1_2_aarch64.whl", hash = "sha256:58a0e345be4b18e6b8501d3b0aa540dad90caeed814c515e5206bb2ec26736fd"},
-    {file = "rpds_py-0.21.0-cp39-cp39-musllinux_1_2_i686.whl", hash = "sha256:c3761f62fcfccf0864cc4665b6e7c3f0c626f0380b41b8bd1ce322103fa3ef87"},
-    {file = "rpds_py-0.21.0-cp39-cp39-musllinux_1_2_x86_64.whl", hash = "sha256:c2b2f71c6ad6c2e4fc9ed9401080badd1469fa9889657ec3abea42a3d6b2e1ed"},
-    {file = "rpds_py-0.21.0-cp39-none-win32.whl", hash = "sha256:b21747f79f360e790525e6f6438c7569ddbfb1b3197b9e65043f25c3c9b489d8"},
-    {file = "rpds_py-0.21.0-cp39-none-win_amd64.whl", hash = "sha256:0626238a43152918f9e72ede9a3b6ccc9e299adc8ade0d67c5e142d564c9a83d"},
-    {file = "rpds_py-0.21.0-pp310-pypy310_pp73-macosx_10_12_x86_64.whl", hash = "sha256:6b4ef7725386dc0762857097f6b7266a6cdd62bfd209664da6712cb26acef035"},
-    {file = "rpds_py-0.21.0-pp310-pypy310_pp73-macosx_11_0_arm64.whl", hash = "sha256:6bc0e697d4d79ab1aacbf20ee5f0df80359ecf55db33ff41481cf3e24f206919"},
-    {file = "rpds_py-0.21.0-pp310-pypy310_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:da52d62a96e61c1c444f3998c434e8b263c384f6d68aca8274d2e08d1906325c"},
-    {file = "rpds_py-0.21.0-pp310-pypy310_pp73-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:98e4fe5db40db87ce1c65031463a760ec7906ab230ad2249b4572c2fc3ef1f9f"},
-    {file = "rpds_py-0.21.0-pp310-pypy310_pp73-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:30bdc973f10d28e0337f71d202ff29345320f8bc49a31c90e6c257e1ccef4333"},
-    {file = "rpds_py-0.21.0-pp310-pypy310_pp73-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:faa5e8496c530f9c71f2b4e1c49758b06e5f4055e17144906245c99fa6d45356"},
-    {file = "rpds_py-0.21.0-pp310-pypy310_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:32eb88c30b6a4f0605508023b7141d043a79b14acb3b969aa0b4f99b25bc7d4a"},
-    {file = "rpds_py-0.21.0-pp310-pypy310_pp73-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:a89a8ce9e4e75aeb7fa5d8ad0f3fecdee813802592f4f46a15754dcb2fd6b061"},
-    {file = "rpds_py-0.21.0-pp310-pypy310_pp73-musllinux_1_2_aarch64.whl", hash = "sha256:241e6c125568493f553c3d0fdbb38c74babf54b45cef86439d4cd97ff8feb34d"},
-    {file = "rpds_py-0.21.0-pp310-pypy310_pp73-musllinux_1_2_i686.whl", hash = "sha256:3b766a9f57663396e4f34f5140b3595b233a7b146e94777b97a8413a1da1be18"},
-    {file = "rpds_py-0.21.0-pp310-pypy310_pp73-musllinux_1_2_x86_64.whl", hash = "sha256:af4a644bf890f56e41e74be7d34e9511e4954894d544ec6b8efe1e21a1a8da6c"},
-    {file = "rpds_py-0.21.0-pp310-pypy310_pp73-win_amd64.whl", hash = "sha256:3e30a69a706e8ea20444b98a49f386c17b26f860aa9245329bab0851ed100677"},
-    {file = "rpds_py-0.21.0-pp39-pypy39_pp73-macosx_10_12_x86_64.whl", hash = "sha256:031819f906bb146561af051c7cef4ba2003d28cff07efacef59da973ff7969ba"},
-    {file = "rpds_py-0.21.0-pp39-pypy39_pp73-macosx_11_0_arm64.whl", hash = "sha256:b876f2bc27ab5954e2fd88890c071bd0ed18b9c50f6ec3de3c50a5ece612f7a6"},
-    {file = "rpds_py-0.21.0-pp39-pypy39_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:dc5695c321e518d9f03b7ea6abb5ea3af4567766f9852ad1560f501b17588c7b"},
-    {file = "rpds_py-0.21.0-pp39-pypy39_pp73-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:b4de1da871b5c0fd5537b26a6fc6814c3cc05cabe0c941db6e9044ffbb12f04a"},
-    {file = "rpds_py-0.21.0-pp39-pypy39_pp73-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:878f6fea96621fda5303a2867887686d7a198d9e0f8a40be100a63f5d60c88c9"},
-    {file = "rpds_py-0.21.0-pp39-pypy39_pp73-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:a8eeec67590e94189f434c6d11c426892e396ae59e4801d17a93ac96b8c02a6c"},
-    {file = "rpds_py-0.21.0-pp39-pypy39_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:1ff2eba7f6c0cb523d7e9cff0903f2fe1feff8f0b2ceb6bd71c0e20a4dcee271"},
-    {file = "rpds_py-0.21.0-pp39-pypy39_pp73-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:a429b99337062877d7875e4ff1a51fe788424d522bd64a8c0a20ef3021fdb6ed"},
-    {file = "rpds_py-0.21.0-pp39-pypy39_pp73-musllinux_1_2_aarch64.whl", hash = "sha256:d167e4dbbdac48bd58893c7e446684ad5d425b407f9336e04ab52e8b9194e2ed"},
-    {file = "rpds_py-0.21.0-pp39-pypy39_pp73-musllinux_1_2_i686.whl", hash = "sha256:4eb2de8a147ffe0626bfdc275fc6563aa7bf4b6db59cf0d44f0ccd6ca625a24e"},
-    {file = "rpds_py-0.21.0-pp39-pypy39_pp73-musllinux_1_2_x86_64.whl", hash = "sha256:e78868e98f34f34a88e23ee9ccaeeec460e4eaf6db16d51d7a9b883e5e785a5e"},
-    {file = "rpds_py-0.21.0-pp39-pypy39_pp73-win_amd64.whl", hash = "sha256:4991ca61656e3160cdaca4851151fd3f4a92e9eba5c7a530ab030d6aee96ec89"},
-    {file = "rpds_py-0.21.0.tar.gz", hash = "sha256:ed6378c9d66d0de903763e7706383d60c33829581f0adff47b6535f1802fa6db"},
+    {file = "rpds_py-0.22.3-cp310-cp310-macosx_10_12_x86_64.whl", hash = "sha256:6c7b99ca52c2c1752b544e310101b98a659b720b21db00e65edca34483259967"},
+    {file = "rpds_py-0.22.3-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:be2eb3f2495ba669d2a985f9b426c1797b7d48d6963899276d22f23e33d47e37"},
+    {file = "rpds_py-0.22.3-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:70eb60b3ae9245ddea20f8a4190bd79c705a22f8028aaf8bbdebe4716c3fab24"},
+    {file = "rpds_py-0.22.3-cp310-cp310-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:4041711832360a9b75cfb11b25a6a97c8fb49c07b8bd43d0d02b45d0b499a4ff"},
+    {file = "rpds_py-0.22.3-cp310-cp310-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:64607d4cbf1b7e3c3c8a14948b99345eda0e161b852e122c6bb71aab6d1d798c"},
+    {file = "rpds_py-0.22.3-cp310-cp310-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:81e69b0a0e2537f26d73b4e43ad7bc8c8efb39621639b4434b76a3de50c6966e"},
+    {file = "rpds_py-0.22.3-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:bc27863442d388870c1809a87507727b799c8460573cfbb6dc0eeaef5a11b5ec"},
+    {file = "rpds_py-0.22.3-cp310-cp310-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:e79dd39f1e8c3504be0607e5fc6e86bb60fe3584bec8b782578c3b0fde8d932c"},
+    {file = "rpds_py-0.22.3-cp310-cp310-musllinux_1_2_aarch64.whl", hash = "sha256:e0fa2d4ec53dc51cf7d3bb22e0aa0143966119f42a0c3e4998293a3dd2856b09"},
+    {file = "rpds_py-0.22.3-cp310-cp310-musllinux_1_2_i686.whl", hash = "sha256:fda7cb070f442bf80b642cd56483b5548e43d366fe3f39b98e67cce780cded00"},
+    {file = "rpds_py-0.22.3-cp310-cp310-musllinux_1_2_x86_64.whl", hash = "sha256:cff63a0272fcd259dcc3be1657b07c929c466b067ceb1c20060e8d10af56f5bf"},
+    {file = "rpds_py-0.22.3-cp310-cp310-win32.whl", hash = "sha256:9bd7228827ec7bb817089e2eb301d907c0d9827a9e558f22f762bb690b131652"},
+    {file = "rpds_py-0.22.3-cp310-cp310-win_amd64.whl", hash = "sha256:9beeb01d8c190d7581a4d59522cd3d4b6887040dcfc744af99aa59fef3e041a8"},
+    {file = "rpds_py-0.22.3-cp311-cp311-macosx_10_12_x86_64.whl", hash = "sha256:d20cfb4e099748ea39e6f7b16c91ab057989712d31761d3300d43134e26e165f"},
+    {file = "rpds_py-0.22.3-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:68049202f67380ff9aa52f12e92b1c30115f32e6895cd7198fa2a7961621fc5a"},
+    {file = "rpds_py-0.22.3-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:fb4f868f712b2dd4bcc538b0a0c1f63a2b1d584c925e69a224d759e7070a12d5"},
+    {file = "rpds_py-0.22.3-cp311-cp311-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:bc51abd01f08117283c5ebf64844a35144a0843ff7b2983e0648e4d3d9f10dbb"},
+    {file = "rpds_py-0.22.3-cp311-cp311-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:0f3cec041684de9a4684b1572fe28c7267410e02450f4561700ca5a3bc6695a2"},
+    {file = "rpds_py-0.22.3-cp311-cp311-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:7ef9d9da710be50ff6809fed8f1963fecdfecc8b86656cadfca3bc24289414b0"},
+    {file = "rpds_py-0.22.3-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:59f4a79c19232a5774aee369a0c296712ad0e77f24e62cad53160312b1c1eaa1"},
+    {file = "rpds_py-0.22.3-cp311-cp311-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:1a60bce91f81ddaac922a40bbb571a12c1070cb20ebd6d49c48e0b101d87300d"},
+    {file = "rpds_py-0.22.3-cp311-cp311-musllinux_1_2_aarch64.whl", hash = "sha256:e89391e6d60251560f0a8f4bd32137b077a80d9b7dbe6d5cab1cd80d2746f648"},
+    {file = "rpds_py-0.22.3-cp311-cp311-musllinux_1_2_i686.whl", hash = "sha256:e3fb866d9932a3d7d0c82da76d816996d1667c44891bd861a0f97ba27e84fc74"},
+    {file = "rpds_py-0.22.3-cp311-cp311-musllinux_1_2_x86_64.whl", hash = "sha256:1352ae4f7c717ae8cba93421a63373e582d19d55d2ee2cbb184344c82d2ae55a"},
+    {file = "rpds_py-0.22.3-cp311-cp311-win32.whl", hash = "sha256:b0b4136a252cadfa1adb705bb81524eee47d9f6aab4f2ee4fa1e9d3cd4581f64"},
+    {file = "rpds_py-0.22.3-cp311-cp311-win_amd64.whl", hash = "sha256:8bd7c8cfc0b8247c8799080fbff54e0b9619e17cdfeb0478ba7295d43f635d7c"},
+    {file = "rpds_py-0.22.3-cp312-cp312-macosx_10_12_x86_64.whl", hash = "sha256:27e98004595899949bd7a7b34e91fa7c44d7a97c40fcaf1d874168bb652ec67e"},
+    {file = "rpds_py-0.22.3-cp312-cp312-macosx_11_0_arm64.whl", hash = "sha256:1978d0021e943aae58b9b0b196fb4895a25cc53d3956b8e35e0b7682eefb6d56"},
+    {file = "rpds_py-0.22.3-cp312-cp312-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:655ca44a831ecb238d124e0402d98f6212ac527a0ba6c55ca26f616604e60a45"},
+    {file = "rpds_py-0.22.3-cp312-cp312-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:feea821ee2a9273771bae61194004ee2fc33f8ec7db08117ef9147d4bbcbca8e"},
+    {file = "rpds_py-0.22.3-cp312-cp312-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:22bebe05a9ffc70ebfa127efbc429bc26ec9e9b4ee4d15a740033efda515cf3d"},
+    {file = "rpds_py-0.22.3-cp312-cp312-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:3af6e48651c4e0d2d166dc1b033b7042ea3f871504b6805ba5f4fe31581d8d38"},
+    {file = "rpds_py-0.22.3-cp312-cp312-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:e67ba3c290821343c192f7eae1d8fd5999ca2dc99994114643e2f2d3e6138b15"},
+    {file = "rpds_py-0.22.3-cp312-cp312-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:02fbb9c288ae08bcb34fb41d516d5eeb0455ac35b5512d03181d755d80810059"},
+    {file = "rpds_py-0.22.3-cp312-cp312-musllinux_1_2_aarch64.whl", hash = "sha256:f56a6b404f74ab372da986d240e2e002769a7d7102cc73eb238a4f72eec5284e"},
+    {file = "rpds_py-0.22.3-cp312-cp312-musllinux_1_2_i686.whl", hash = "sha256:0a0461200769ab3b9ab7e513f6013b7a97fdeee41c29b9db343f3c5a8e2b9e61"},
+    {file = "rpds_py-0.22.3-cp312-cp312-musllinux_1_2_x86_64.whl", hash = "sha256:8633e471c6207a039eff6aa116e35f69f3156b3989ea3e2d755f7bc41754a4a7"},
+    {file = "rpds_py-0.22.3-cp312-cp312-win32.whl", hash = "sha256:593eba61ba0c3baae5bc9be2f5232430453fb4432048de28399ca7376de9c627"},
+    {file = "rpds_py-0.22.3-cp312-cp312-win_amd64.whl", hash = "sha256:d115bffdd417c6d806ea9069237a4ae02f513b778e3789a359bc5856e0404cc4"},
+    {file = "rpds_py-0.22.3-cp313-cp313-macosx_10_12_x86_64.whl", hash = "sha256:ea7433ce7e4bfc3a85654aeb6747babe3f66eaf9a1d0c1e7a4435bbdf27fea84"},
+    {file = "rpds_py-0.22.3-cp313-cp313-macosx_11_0_arm64.whl", hash = "sha256:6dd9412824c4ce1aca56c47b0991e65bebb7ac3f4edccfd3f156150c96a7bf25"},
+    {file = "rpds_py-0.22.3-cp313-cp313-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:20070c65396f7373f5df4005862fa162db5d25d56150bddd0b3e8214e8ef45b4"},
+    {file = "rpds_py-0.22.3-cp313-cp313-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:0b09865a9abc0ddff4e50b5ef65467cd94176bf1e0004184eb915cbc10fc05c5"},
+    {file = "rpds_py-0.22.3-cp313-cp313-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:3453e8d41fe5f17d1f8e9c383a7473cd46a63661628ec58e07777c2fff7196dc"},
+    {file = "rpds_py-0.22.3-cp313-cp313-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:f5d36399a1b96e1a5fdc91e0522544580dbebeb1f77f27b2b0ab25559e103b8b"},
+    {file = "rpds_py-0.22.3-cp313-cp313-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:009de23c9c9ee54bf11303a966edf4d9087cd43a6003672e6aa7def643d06518"},
+    {file = "rpds_py-0.22.3-cp313-cp313-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:1aef18820ef3e4587ebe8b3bc9ba6e55892a6d7b93bac6d29d9f631a3b4befbd"},
+    {file = "rpds_py-0.22.3-cp313-cp313-musllinux_1_2_aarch64.whl", hash = "sha256:f60bd8423be1d9d833f230fdbccf8f57af322d96bcad6599e5a771b151398eb2"},
+    {file = "rpds_py-0.22.3-cp313-cp313-musllinux_1_2_i686.whl", hash = "sha256:62d9cfcf4948683a18a9aff0ab7e1474d407b7bab2ca03116109f8464698ab16"},
+    {file = "rpds_py-0.22.3-cp313-cp313-musllinux_1_2_x86_64.whl", hash = "sha256:9253fc214112405f0afa7db88739294295f0e08466987f1d70e29930262b4c8f"},
+    {file = "rpds_py-0.22.3-cp313-cp313-win32.whl", hash = "sha256:fb0ba113b4983beac1a2eb16faffd76cb41e176bf58c4afe3e14b9c681f702de"},
+    {file = "rpds_py-0.22.3-cp313-cp313-win_amd64.whl", hash = "sha256:c58e2339def52ef6b71b8f36d13c3688ea23fa093353f3a4fee2556e62086ec9"},
+    {file = "rpds_py-0.22.3-cp313-cp313t-macosx_10_12_x86_64.whl", hash = "sha256:f82a116a1d03628a8ace4859556fb39fd1424c933341a08ea3ed6de1edb0283b"},
+    {file = "rpds_py-0.22.3-cp313-cp313t-macosx_11_0_arm64.whl", hash = "sha256:3dfcbc95bd7992b16f3f7ba05af8a64ca694331bd24f9157b49dadeeb287493b"},
+    {file = "rpds_py-0.22.3-cp313-cp313t-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:59259dc58e57b10e7e18ce02c311804c10c5a793e6568f8af4dead03264584d1"},
+    {file = "rpds_py-0.22.3-cp313-cp313t-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:5725dd9cc02068996d4438d397e255dcb1df776b7ceea3b9cb972bdb11260a83"},
+    {file = "rpds_py-0.22.3-cp313-cp313t-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:99b37292234e61325e7a5bb9689e55e48c3f5f603af88b1642666277a81f1fbd"},
+    {file = "rpds_py-0.22.3-cp313-cp313t-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:27b1d3b3915a99208fee9ab092b8184c420f2905b7d7feb4aeb5e4a9c509b8a1"},
+    {file = "rpds_py-0.22.3-cp313-cp313t-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:f612463ac081803f243ff13cccc648578e2279295048f2a8d5eb430af2bae6e3"},
+    {file = "rpds_py-0.22.3-cp313-cp313t-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:f73d3fef726b3243a811121de45193c0ca75f6407fe66f3f4e183c983573e130"},
+    {file = "rpds_py-0.22.3-cp313-cp313t-musllinux_1_2_aarch64.whl", hash = "sha256:3f21f0495edea7fdbaaa87e633a8689cd285f8f4af5c869f27bc8074638ad69c"},
+    {file = "rpds_py-0.22.3-cp313-cp313t-musllinux_1_2_i686.whl", hash = "sha256:1e9663daaf7a63ceccbbb8e3808fe90415b0757e2abddbfc2e06c857bf8c5e2b"},
+    {file = "rpds_py-0.22.3-cp313-cp313t-musllinux_1_2_x86_64.whl", hash = "sha256:a76e42402542b1fae59798fab64432b2d015ab9d0c8c47ba7addddbaf7952333"},
+    {file = "rpds_py-0.22.3-cp313-cp313t-win32.whl", hash = "sha256:69803198097467ee7282750acb507fba35ca22cc3b85f16cf45fb01cb9097730"},
+    {file = "rpds_py-0.22.3-cp313-cp313t-win_amd64.whl", hash = "sha256:f5cf2a0c2bdadf3791b5c205d55a37a54025c6e18a71c71f82bb536cf9a454bf"},
+    {file = "rpds_py-0.22.3-cp39-cp39-macosx_10_12_x86_64.whl", hash = "sha256:378753b4a4de2a7b34063d6f95ae81bfa7b15f2c1a04a9518e8644e81807ebea"},
+    {file = "rpds_py-0.22.3-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:3445e07bf2e8ecfeef6ef67ac83de670358abf2996916039b16a218e3d95e97e"},
+    {file = "rpds_py-0.22.3-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:7b2513ba235829860b13faa931f3b6846548021846ac808455301c23a101689d"},
+    {file = "rpds_py-0.22.3-cp39-cp39-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:eaf16ae9ae519a0e237a0f528fd9f0197b9bb70f40263ee57ae53c2b8d48aeb3"},
+    {file = "rpds_py-0.22.3-cp39-cp39-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:583f6a1993ca3369e0f80ba99d796d8e6b1a3a2a442dd4e1a79e652116413091"},
+    {file = "rpds_py-0.22.3-cp39-cp39-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:4617e1915a539a0d9a9567795023de41a87106522ff83fbfaf1f6baf8e85437e"},
+    {file = "rpds_py-0.22.3-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:0c150c7a61ed4a4f4955a96626574e9baf1adf772c2fb61ef6a5027e52803543"},
+    {file = "rpds_py-0.22.3-cp39-cp39-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:2fa4331c200c2521512595253f5bb70858b90f750d39b8cbfd67465f8d1b596d"},
+    {file = "rpds_py-0.22.3-cp39-cp39-musllinux_1_2_aarch64.whl", hash = "sha256:214b7a953d73b5e87f0ebece4a32a5bd83c60a3ecc9d4ec8f1dca968a2d91e99"},
+    {file = "rpds_py-0.22.3-cp39-cp39-musllinux_1_2_i686.whl", hash = "sha256:f47ad3d5f3258bd7058d2d506852217865afefe6153a36eb4b6928758041d831"},
+    {file = "rpds_py-0.22.3-cp39-cp39-musllinux_1_2_x86_64.whl", hash = "sha256:f276b245347e6e36526cbd4a266a417796fc531ddf391e43574cf6466c492520"},
+    {file = "rpds_py-0.22.3-cp39-cp39-win32.whl", hash = "sha256:bbb232860e3d03d544bc03ac57855cd82ddf19c7a07651a7c0fdb95e9efea8b9"},
+    {file = "rpds_py-0.22.3-cp39-cp39-win_amd64.whl", hash = "sha256:cfbc454a2880389dbb9b5b398e50d439e2e58669160f27b60e5eca11f68ae17c"},
+    {file = "rpds_py-0.22.3-pp310-pypy310_pp73-macosx_10_12_x86_64.whl", hash = "sha256:d48424e39c2611ee1b84ad0f44fb3b2b53d473e65de061e3f460fc0be5f1939d"},
+    {file = "rpds_py-0.22.3-pp310-pypy310_pp73-macosx_11_0_arm64.whl", hash = "sha256:24e8abb5878e250f2eb0d7859a8e561846f98910326d06c0d51381fed59357bd"},
+    {file = "rpds_py-0.22.3-pp310-pypy310_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:4b232061ca880db21fa14defe219840ad9b74b6158adb52ddf0e87bead9e8493"},
+    {file = "rpds_py-0.22.3-pp310-pypy310_pp73-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:ac0a03221cdb5058ce0167ecc92a8c89e8d0decdc9e99a2ec23380793c4dcb96"},
+    {file = "rpds_py-0.22.3-pp310-pypy310_pp73-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:eb0c341fa71df5a4595f9501df4ac5abfb5a09580081dffbd1ddd4654e6e9123"},
+    {file = "rpds_py-0.22.3-pp310-pypy310_pp73-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:bf9db5488121b596dbfc6718c76092fda77b703c1f7533a226a5a9f65248f8ad"},
+    {file = "rpds_py-0.22.3-pp310-pypy310_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:0b8db6b5b2d4491ad5b6bdc2bc7c017eec108acbf4e6785f42a9eb0ba234f4c9"},
+    {file = "rpds_py-0.22.3-pp310-pypy310_pp73-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:b3d504047aba448d70cf6fa22e06cb09f7cbd761939fdd47604f5e007675c24e"},
+    {file = "rpds_py-0.22.3-pp310-pypy310_pp73-musllinux_1_2_aarch64.whl", hash = "sha256:e61b02c3f7a1e0b75e20c3978f7135fd13cb6cf551bf4a6d29b999a88830a338"},
+    {file = "rpds_py-0.22.3-pp310-pypy310_pp73-musllinux_1_2_i686.whl", hash = "sha256:e35ba67d65d49080e8e5a1dd40101fccdd9798adb9b050ff670b7d74fa41c566"},
+    {file = "rpds_py-0.22.3-pp310-pypy310_pp73-musllinux_1_2_x86_64.whl", hash = "sha256:26fd7cac7dd51011a245f29a2cc6489c4608b5a8ce8d75661bb4a1066c52dfbe"},
+    {file = "rpds_py-0.22.3-pp310-pypy310_pp73-win_amd64.whl", hash = "sha256:177c7c0fce2855833819c98e43c262007f42ce86651ffbb84f37883308cb0e7d"},
+    {file = "rpds_py-0.22.3-pp39-pypy39_pp73-macosx_10_12_x86_64.whl", hash = "sha256:bb47271f60660803ad11f4c61b42242b8c1312a31c98c578f79ef9387bbde21c"},
+    {file = "rpds_py-0.22.3-pp39-pypy39_pp73-macosx_11_0_arm64.whl", hash = "sha256:70fb28128acbfd264eda9bf47015537ba3fe86e40d046eb2963d75024be4d055"},
+    {file = "rpds_py-0.22.3-pp39-pypy39_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:44d61b4b7d0c2c9ac019c314e52d7cbda0ae31078aabd0f22e583af3e0d79723"},
+    {file = "rpds_py-0.22.3-pp39-pypy39_pp73-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:5f0e260eaf54380380ac3808aa4ebe2d8ca28b9087cf411649f96bad6900c728"},
+    {file = "rpds_py-0.22.3-pp39-pypy39_pp73-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:b25bc607423935079e05619d7de556c91fb6adeae9d5f80868dde3468657994b"},
+    {file = "rpds_py-0.22.3-pp39-pypy39_pp73-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:fb6116dfb8d1925cbdb52595560584db42a7f664617a1f7d7f6e32f138cdf37d"},
+    {file = "rpds_py-0.22.3-pp39-pypy39_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:a63cbdd98acef6570c62b92a1e43266f9e8b21e699c363c0fef13bd530799c11"},
+    {file = "rpds_py-0.22.3-pp39-pypy39_pp73-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:2b8f60e1b739a74bab7e01fcbe3dddd4657ec685caa04681df9d562ef15b625f"},
+    {file = "rpds_py-0.22.3-pp39-pypy39_pp73-musllinux_1_2_aarch64.whl", hash = "sha256:2e8b55d8517a2fda8d95cb45d62a5a8bbf9dd0ad39c5b25c8833efea07b880ca"},
+    {file = "rpds_py-0.22.3-pp39-pypy39_pp73-musllinux_1_2_i686.whl", hash = "sha256:2de29005e11637e7a2361fa151f780ff8eb2543a0da1413bb951e9f14b699ef3"},
+    {file = "rpds_py-0.22.3-pp39-pypy39_pp73-musllinux_1_2_x86_64.whl", hash = "sha256:666ecce376999bf619756a24ce15bb14c5bfaf04bf00abc7e663ce17c3f34fe7"},
+    {file = "rpds_py-0.22.3-pp39-pypy39_pp73-win_amd64.whl", hash = "sha256:5246b14ca64a8675e0a7161f7af68fe3e910e6b90542b4bfb5439ba752191df6"},
+    {file = "rpds_py-0.22.3.tar.gz", hash = "sha256:e32fee8ab45d3c2db6da19a5323bc3362237c8b653c70194414b892fd06a080d"},
 ]
 
 [[package]]
@@ -1409,13 +1450,13 @@ files = [
 
 [[package]]
 name = "six"
-version = "1.16.0"
+version = "1.17.0"
 description = "Python 2 and 3 compatibility utilities"
 optional = false
-python-versions = ">=2.7, !=3.0.*, !=3.1.*, !=3.2.*"
+python-versions = "!=3.0.*,!=3.1.*,!=3.2.*,>=2.7"
 files = [
-    {file = "six-1.16.0-py2.py3-none-any.whl", hash = "sha256:8abb2f1d86890a2dfb989f9a77cfcfd3e47c2a354b01111771326f8aa26e0254"},
-    {file = "six-1.16.0.tar.gz", hash = "sha256:1e61c37477a1626458e36f7b1d82aa5c9b094fa4802892072e49de9c60c4c926"},
+    {file = "six-1.17.0-py2.py3-none-any.whl", hash = "sha256:4721f391ed90541fddacab5acf947aa0d3dc7d27b2e1e8eda2be8970586c3274"},
+    {file = "six-1.17.0.tar.gz", hash = "sha256:ff70335d468e7eb6ec65b95b99d3a2836546063f63acc5171de367e834932a81"},
 ]
 
 [[package]]
@@ -1516,13 +1557,13 @@ files = [
 
 [[package]]
 name = "types-python-dateutil"
-version = "2.9.0.20241003"
+version = "2.9.0.20241206"
 description = "Typing stubs for python-dateutil"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "types-python-dateutil-2.9.0.20241003.tar.gz", hash = "sha256:58cb85449b2a56d6684e41aeefb4c4280631246a0da1a719bdbe6f3fb0317446"},
-    {file = "types_python_dateutil-2.9.0.20241003-py3-none-any.whl", hash = "sha256:250e1d8e80e7bbc3a6c99b907762711d1a1cdd00e978ad39cb5940f6f0a87f3d"},
+    {file = "types_python_dateutil-2.9.0.20241206-py3-none-any.whl", hash = "sha256:e248a4bc70a486d3e3ec84d0dc30eec3a5f979d6e7ee4123ae043eedbb987f53"},
+    {file = "types_python_dateutil-2.9.0.20241206.tar.gz", hash = "sha256:18f493414c26ffba692a72369fea7a154c502646301ebfe3d56a04b3767284cb"},
 ]
 
 [[package]]
@@ -1591,13 +1632,13 @@ zstd = ["zstandard (>=0.18.0)"]
 
 [[package]]
 name = "uvicorn"
-version = "0.32.1"
+version = "0.34.0"
 description = "The lightning-fast ASGI server."
 optional = false
-python-versions = ">=3.8"
+python-versions = ">=3.9"
 files = [
-    {file = "uvicorn-0.32.1-py3-none-any.whl", hash = "sha256:82ad92fd58da0d12af7482ecdb5f2470a04c9c9a53ced65b9bbb4a205377602e"},
-    {file = "uvicorn-0.32.1.tar.gz", hash = "sha256:ee9519c246a72b1c084cea8d3b44ed6026e78a4a309cbedae9c37e4cb9fbb175"},
+    {file = "uvicorn-0.34.0-py3-none-any.whl", hash = "sha256:023dc038422502fa28a09c7a30bf2b6991512da7dcdb8fd35fe57cfc154126f4"},
+    {file = "uvicorn-0.34.0.tar.gz", hash = "sha256:404051050cd7e905de2c9a7e61790943440b3416f49cb409f965d9dcd0fa73e9"},
 ]
 
 [package.dependencies]
@@ -1758,7 +1799,10 @@ pydantic = ">=1.9.0,<3"
 sniffio = "*"
 typing-extensions = ">=4.7,<5"
 
+[extras]
+redis = []
+
 [metadata]
 lock-version = "2.0"
 python-versions = ">=3.9.2, <4.0"
-content-hash = "ddd67e80eb5e5990db930710506e771990d96c0af8647ec2c0c9e15cefdfd7a5"
+content-hash = "eef09bbf43e87914f27d85100a012608014f55be3d4e89c5b70f4d0810579a10"
diff --git a/pyproject.toml b/pyproject.toml
index ab7e2d602..1dac4d093 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -4,7 +4,7 @@ build-backend = "poetry.core.masonry.api"
 
 [tool.poetry]
 name = "writer"
-version = "0.8.3rc2"
+version = "0.8.3rc3"
 description = "An open-source, Python framework for building feature-rich apps that are fully integrated with the Writer platform."
 authors = ["Writer, Inc."]
 readme = "README.md"
@@ -49,7 +49,6 @@ websockets = ">= 12, < 13"
 writer-sdk = ">= 1.5.0, < 2"
 python-multipart = ">=0.0.7, < 1"
 
-
 [tool.poetry.group.build]
 optional = true
 
@@ -68,6 +67,11 @@ pytest-asyncio = ">= 0.23.4, < 1"
 ruff = "^0.3.4"
 types-requests = "^2.31.0.20240406"
 
+[tool.poetry.group.redis]
+optional = true
+
+[tool.poetry.group.redis.dependencies]
+redis = "^5.2.1"
 
 [tool.poetry.group.dev.dependencies]
 types-python-dateutil = "^2.9.0.20240316"
@@ -75,6 +79,8 @@ types-python-dateutil = "^2.9.0.20240316"
 [tool.poetry.scripts]
 writer = 'writer.command_line:main'
 
+[tool.poetry.extras]
+redis = ["redis"]
 
 [tool.ruff]
 exclude = [
diff --git a/src/ui/public/components/progressbar.svg b/src/ui/public/components/progressbar.svg
new file mode 100644
index 000000000..6f1828f72
--- /dev/null
+++ b/src/ui/public/components/progressbar.svg
@@ -0,0 +1,5 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="18" width="18" height="18" rx="4" transform="rotate(90 18 0)" fill="#333333"/>
+<rect x="4.5" y="6.5" width="9" height="5" stroke="white"/>
+<rect x="5" y="7" width="2" height="4" fill="white"/>
+</svg>
diff --git a/src/ui/src/builder/BuilderApp.vue b/src/ui/src/builder/BuilderApp.vue
index 421a08bac..739e924ec 100644
--- a/src/ui/src/builder/BuilderApp.vue
+++ b/src/ui/src/builder/BuilderApp.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="BuilderApp" tabindex="-1">
+	<div class="BuilderApp" tabindex="-1" :style="WDS_CSS_PROPERTIES">
 		<div
 			class="mainGrid"
 			:class="{ openPanels: ssbm.openPanels.value.size > 0 }"
@@ -81,6 +81,7 @@ import BuilderHeader from "./BuilderHeader.vue";
 import BuilderTooltip from "./BuilderTooltip.vue";
 import BuilderAsyncLoader from "./BuilderAsyncLoader.vue";
 import BuilderPanelSwitcher from "./panels/BuilderPanelSwitcher.vue";
+import { WDS_CSS_PROPERTIES } from "@/wds/tokens";
 
 const BuilderSettings = defineAsyncComponent({
 	loader: () => import("./settings/BuilderSettings.vue"),
@@ -270,34 +271,33 @@ onMounted(() => {
 @import "./sharedStyles.css";
 
 .BuilderApp {
-	--builderBackgroundColor: #ffffff;
-	--builderAccentColor: #5551ff;
-	--builderSuccessColor: #3be19b;
-	--builderErrorColor: #ff3d00;
-	--builderHeaderBackgroundColor: #333333;
-	--builderHeaderBackgroundHoleColor: #000000;
+	--builderBackgroundColor: var(--wdsColorWhite);
+	--builderAccentColor: var(--wdsColorBlue5);
+	--builderSuccessColor: var(--wdsColorGreen5);
+	--builderErrorColor: var(--wdsColorOrange5);
+	--builderHeaderBackgroundColor: var(--wdsColorGray6);
+	--builderHeaderBackgroundHoleColor: var(--wdsColorBlack);
 	--builderPrimaryTextColor: rgba(0, 0, 0, 0.9);
 	--builderSecondaryTextColor: rgba(0, 0, 0, 0.6);
 	--builderAreaSeparatorColor: rgba(0, 0, 0, 0.2);
-	--builderSeparatorColor: #e4e7ed;
-	--builderSubtleSeparatorColor: #f5f5f9;
-	--builderIntenseSeparatorColor: #d2d4d7;
-	--builderSelectedColor: #e4e9ff;
-	--builderMatchingColor: #f8dccc;
-	--builderIntenseSelectedColor: #0094d1;
+	--builderSeparatorColor: var(--wdsColorGray2);
+	--builderSubtleSeparatorColor: var(--wdsColorGray1);
+	--builderIntenseSeparatorColor: var(--wdsColorGray3);
+	--builderSelectedColor: var(--wdsColorBlue2);
+	--builderMatchingColor: var(--wdsColorOrange2);
+	--builderIntenseSelectedColor: var(--wdsColorBlue4);
 	--builderSubtleHighlightColor: rgba(0, 0, 0, 0.05);
-	--builderSubtleHighlightColorSolid: #f2f2f2;
-	--builderDisabledColor: rgb(180, 180, 180);
+	--builderSubtleHighlightColorSolid: var(--wdsColorGray1);
 	--builderSidebarWidth: 265px;
 	--builderSettingsWidth: 450px;
-	--builderActionOngoingColor: #333333;
+	--builderActionOngoingColor: var(--wdsColorGray6);
 	--builderTopBarHeight: 48px;
 	--builderWarningTextColor: white;
-	--builderWarningColor: #ff3d00;
+	--builderWarningColor: var(--wdsColorOrange5);
 	--builderPanelSwitcherHeight: 48px;
 	--builderPanelSwitcherExpandedHeight: calc(50% - 24px);
 
-	--buttonColor: #5551ff;
+	--buttonColor: var(--wdsColorBlue5);
 	--buttonTextColor: white;
 	--accentColor: var(--builderAccentColor);
 	--primaryTextColor: var(--builderPrimaryTextColor);
diff --git a/src/ui/src/builder/BuilderEmbeddedCodeEditor.vue b/src/ui/src/builder/BuilderEmbeddedCodeEditor.vue
index 4a2e3c923..7c348f1ac 100644
--- a/src/ui/src/builder/BuilderEmbeddedCodeEditor.vue
+++ b/src/ui/src/builder/BuilderEmbeddedCodeEditor.vue
@@ -59,6 +59,7 @@ onMounted(() => {
 	editor = monaco.editor.create(editorContainerEl.value, {
 		value: modelValue.value,
 		language: props.language,
+		readOnly: props.disabled,
 		...VARIANTS_SETTINGS[props.variant],
 	});
 	editor.getModel().onDidChangeContent(() => {
@@ -84,11 +85,11 @@ onUnmounted(() => {
 .BuilderEmbeddedCodeEditor {
 	height: 100%;
 	width: 100%;
-	min-height: 200px;
+	min-height: 100px;
 }
 
 .editorContainer {
-	min-height: 200px;
+	min-height: 100px;
 	width: 100%;
 	height: 100%;
 	overflow: hidden;
diff --git a/src/ui/src/builder/BuilderHeader.vue b/src/ui/src/builder/BuilderHeader.vue
index f64f7c06b..67e08d202 100644
--- a/src/ui/src/builder/BuilderHeader.vue
+++ b/src/ui/src/builder/BuilderHeader.vue
@@ -5,12 +5,13 @@
 		<div class="undoRedo">
 			<button
 				class="undo"
-				:title="
+				:data-writer-tooltip="
 					undoRedoSnapshot.isUndoAvailable
-						? `Undo ${undoRedoSnapshot.undoDesc}`
+						? `Undo: ${undoRedoSnapshot.undoDesc}`
 						: 'Nothing to undo'
 				"
 				:disabled="!undoRedoSnapshot.isUndoAvailable"
+				data-writer-tooltip-placement="bottom"
 				@click="undo()"
 			>
 				<i class="material-symbols-outlined"> undo </i>
@@ -18,12 +19,13 @@
 			</button>
 			<button
 				class="redo"
-				:title="
+				:data-writer-tooltip="
 					undoRedoSnapshot.isRedoAvailable
-						? `Redo ${undoRedoSnapshot.redoDesc}`
+						? `Redo: ${undoRedoSnapshot.redoDesc}`
 						: 'Nothing to redo'
 				"
 				:disabled="!undoRedoSnapshot.isRedoAvailable"
+				data-writer-tooltip-placement="bottom"
 				@click="redo()"
 			>
 				<i class="material-symbols-outlined"> redo </i>
@@ -140,7 +142,7 @@ const customHandlerModalCloseAction: ModalAction = {
 .panelToggler:hover {
 	font-size: 12px;
 	--buttonColor: black;
-	--builderSeparatorColor: #303030;
+	--builderSeparatorColor: var(--wdsColorGray6);
 	--buttonTextColor: white;
 }
 
diff --git a/src/ui/src/builder/BuilderModal.vue b/src/ui/src/builder/BuilderModal.vue
index 62cbf4a4d..12ab381a7 100644
--- a/src/ui/src/builder/BuilderModal.vue
+++ b/src/ui/src/builder/BuilderModal.vue
@@ -1,7 +1,12 @@
 <!-- eslint-disable @typescript-eslint/ban-types -->
 <template>
 	<Teleport to="#modal">
-		<div class="BuilderModal" tabindex="-1" @keydown="handleKeydown">
+		<div
+			class="BuilderModal"
+			:class="{ 'BuilderModal--overflow': allowOverflow }"
+			tabindex="-1"
+			@keydown="handleKeydown"
+		>
 			<div class="main">
 				<div class="titleContainer">
 					<i v-if="icon" class="material-symbols-outlined">{{
@@ -38,19 +43,24 @@
 
 <script setup lang="ts">
 import WdsButton from "@/wds/WdsButton.vue";
-import { toRefs } from "vue";
+import { PropType, toRefs } from "vue";
 
 export type ModalAction = {
 	desc: string;
 	fn: (..._args: unknown[]) => unknown;
 };
 
-const props = defineProps<{
-	modalTitle: string;
-	icon?: string;
-	closeAction: ModalAction;
-	menuActions?: ModalAction[];
-}>();
+const props = defineProps({
+	modalTitle: { type: String, required: true },
+	icon: { type: String, required: false, default: undefined },
+	closeAction: { type: Object as PropType<ModalAction>, required: true },
+	menuActions: {
+		type: Array as PropType<ModalAction[]>,
+		required: false,
+		default: undefined,
+	},
+	allowOverflow: { type: Boolean, required: false },
+});
 
 const { modalTitle, icon, closeAction, menuActions } = toRefs(props);
 
@@ -82,6 +92,10 @@ const handleKeydown = (ev: KeyboardEvent) => {
 	box-shadow: 0px 3px 40px 0px rgba(172, 185, 220, 0.4);
 }
 
+.BuilderModal--overflow .main {
+	overflow: unset;
+}
+
 .titleContainer {
 	border-bottom: 1px solid var(--builderSubtleSeparatorColor);
 	padding: 8px 8px 8px 16px;
@@ -100,6 +114,9 @@ const handleKeydown = (ev: KeyboardEvent) => {
 	max-height: 60vh;
 	overflow: auto;
 }
+.BuilderModal--overflow .slotContainer {
+	overflow: unset;
+}
 
 .actionContainer {
 	border-top: 1px solid var(--builderSubtleSeparatorColor);
diff --git a/src/ui/src/builder/BuilderSelect.vue b/src/ui/src/builder/BuilderSelect.vue
index d454a3171..5eb9ca793 100644
--- a/src/ui/src/builder/BuilderSelect.vue
+++ b/src/ui/src/builder/BuilderSelect.vue
@@ -1,9 +1,5 @@
 <template>
-	<div
-		ref="trigger"
-		class="BuilderSelect"
-		:class="{ 'BuilderSelect--embedded': variant === 'embedded' }"
-	>
+	<div ref="trigger" class="BuilderSelect">
 		<button
 			class="BuilderSelect__trigger"
 			role="button"
@@ -57,14 +53,6 @@ const props = defineProps({
 	defaultIcon: { type: String, required: false, default: undefined },
 	hideIcons: { type: Boolean, required: false },
 	enableSearch: { type: Boolean, required: false },
-	/**
-	 * Customize the appareance of the selector.
-	 * In embeded mode, we remove the padding and the border around the trigger. Usefull when the selector is embed into a field wrapper.
-	 */
-	variant: {
-		type: String as PropType<"normal" | "embedded">,
-		default: "normal",
-	},
 });
 
 const currentValue = defineModel({ type: String, required: false });
@@ -77,7 +65,7 @@ const { floatingStyles, update: updateFloatingStyle } = useFloating(
 	dropdown,
 	{
 		placement: "bottom",
-		middleware: [autoPlacement()],
+		middleware: [autoPlacement({ allowedPlacements: ["bottom", "top"] })],
 	},
 );
 
@@ -125,26 +113,28 @@ function onSelect(value: string) {
 
 .BuilderSelect__trigger {
 	display: flex;
-	height: 32px;
+	align-items: center;
+	gap: 8px;
+
+	height: 40px;
 	width: 100%;
+	padding: 8.5px 12px 8.5px 12px;
 
-	gap: 8px;
+	border: 1px solid var(--separatorColor);
+	border-radius: 8px;
 
-	align-items: center;
-	padding: 8px;
 	font-weight: 400;
-	color: #3b3b3b;
-	background: #ffffff;
-}
+	font-size: 0.875rem;
 
-.BuilderSelect__trigger {
-	/* reset button */
-	border: none;
-	cursor: pointer;
+	color: var(--primaryTextColor);
+	background: transparent;
 
-	font-size: 0.75rem;
-	display: flex;
-	align-items: center;
+	cursor: pointer;
+}
+.BuilderSelect__trigger:focus {
+	border: 1px solid var(--softenedAccentColor);
+	box-shadow: 0px 0px 0px 3px rgba(81, 31, 255, 0.05);
+	outline: none;
 }
 .BuilderSelect__trigger__label {
 	text-overflow: ellipsis;
@@ -159,12 +149,6 @@ function onSelect(value: string) {
 	align-items: center;
 	justify-content: space-between;
 	font-weight: 300;
-	color: #000000e6;
 	cursor: pointer;
 }
-
-.BuilderSelect--embedded .BuilderSelect__trigger {
-	padding: 0;
-	height: 18px;
-}
 </style>
diff --git a/src/ui/src/builder/BuilderTooltip.vue b/src/ui/src/builder/BuilderTooltip.vue
index 889ec1e87..cbca66472 100644
--- a/src/ui/src/builder/BuilderTooltip.vue
+++ b/src/ui/src/builder/BuilderTooltip.vue
@@ -37,7 +37,9 @@ const position = ref<{
 }>({ top: 0, left: 0 });
 
 async function setUpAndShowTooltip() {
+	if (!trackedElement) return;
 	tooltipText.value = trackedElement.dataset.writerTooltip;
+	if (!tooltipText.value) return;
 	const gapPx = trackedElement.dataset.writerTooltipGap
 		? parseInt(trackedElement.dataset.writerTooltipGap)
 		: DEFAULT_GAP_PX;
diff --git a/src/ui/src/builder/panels/BuilderCodePanel.vue b/src/ui/src/builder/panels/BuilderCodePanel.vue
index 0f331cc39..129acd83c 100644
--- a/src/ui/src/builder/panels/BuilderCodePanel.vue
+++ b/src/ui/src/builder/panels/BuilderCodePanel.vue
@@ -117,7 +117,7 @@ async function save() {
 }
 
 .status.error {
-	border: 1px solid #ffcfc2;
-	background: #fff4f1;
+	border: 1px solid var(--wdsColorOrange2);
+	background: var(--wdsColorOrange1);
 }
 </style>
diff --git a/src/ui/src/builder/panels/BuilderLogIndicator.vue b/src/ui/src/builder/panels/BuilderLogIndicator.vue
index 503b729d1..ddaf1e9fb 100644
--- a/src/ui/src/builder/panels/BuilderLogIndicator.vue
+++ b/src/ui/src/builder/panels/BuilderLogIndicator.vue
@@ -64,10 +64,10 @@ const entryCountByType = computed(() => {
 }
 
 .number.error .icon {
-	background: #ff643c;
+	background: var(--wdsColorOrange5);
 }
 
 .number.info .icon {
-	background: #6985ff;
+	background: var(--wdsColorBlue4);
 }
 </style>
diff --git a/src/ui/src/builder/panels/BuilderLogPanel.vue b/src/ui/src/builder/panels/BuilderLogPanel.vue
index 58d2f058a..8a9749c7c 100644
--- a/src/ui/src/builder/panels/BuilderLogPanel.vue
+++ b/src/ui/src/builder/panels/BuilderLogPanel.vue
@@ -113,8 +113,8 @@ const logEntries = computed(() => {
 }
 
 .entry.error {
-	border: 1px solid #ffcfc2;
-	background: #fff4f1;
+	border: 1px solid var(--wdsColorOrange2);
+	background: var(--wdsColorOrange1);
 }
 
 .entry .icon {
diff --git a/src/ui/src/builder/panels/BuilderLogWorkflowExecution.vue b/src/ui/src/builder/panels/BuilderLogWorkflowExecution.vue
index 805fda66c..69837003e 100644
--- a/src/ui/src/builder/panels/BuilderLogWorkflowExecution.vue
+++ b/src/ui/src/builder/panels/BuilderLogWorkflowExecution.vue
@@ -267,15 +267,15 @@ function formatExecutionTime(timeInSeconds: number): string {
 }
 
 .item .outcome .ball.success {
-	background: #3bdcab;
+	background: var(--wdsColorGreen5);
 }
 
 .item .outcome .ball.error {
-	background: #ff643c;
+	background: var(--wdsColorOrange5);
 }
 
 .item .outcome .ball.dynamic {
-	background: #a95ef8;
+	background: var(--wdsColorPurple4);
 }
 
 .item .result {
diff --git a/src/ui/src/builder/settings/BuilderFieldsAlign.vue b/src/ui/src/builder/settings/BuilderFieldsAlign.vue
index 261f663aa..71da71685 100644
--- a/src/ui/src/builder/settings/BuilderFieldsAlign.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsAlign.vue
@@ -5,39 +5,11 @@
 		tabindex="-1"
 		:data-automation-key="props.fieldKey"
 	>
-		<div class="chipStackContainer">
-			<div class="chipStack">
-				<button
-					class="chip"
-					tabindex="0"
-					:class="{ active: mode == 'default' }"
-					@click="
-						() => {
-							setMode('default');
-							setContentValue(component.id, fieldKey, undefined);
-						}
-					"
-				>
-					Default
-				</button>
-				<button
-					class="chip"
-					tabindex="0"
-					:class="{ active: mode == 'css' }"
-					@click="setMode('css')"
-				>
-					CSS
-				</button>
-				<button
-					class="chip"
-					:class="{ active: mode == 'pick' }"
-					tabindex="0"
-					@click="setMode('pick')"
-				>
-					Pick
-				</button>
-			</div>
-		</div>
+		<WdsTabs
+			:tabs="tabs"
+			:model-value="mode"
+			@update:model-value="setMode"
+		/>
 
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
 			<div v-if="mode == 'pick'" class="pickerContainer">
@@ -75,6 +47,11 @@ import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "@/injectionKeys";
 import BuilderSelect from "../BuilderSelect.vue";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
+import WdsTabs from "@/wds/WdsTabs.vue";
+import {
+	BuilderFieldCssMode as Mode,
+	BUILDER_FIELD_CSS_TAB_OPTIONS as tabs,
+} from "./constants/builderFieldsCssTabs";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -84,8 +61,6 @@ const rootEl: Ref<HTMLElement> = ref(null);
 const pickerEl: Ref<HTMLInputElement> = ref(null);
 const freehandInputEl: Ref<HTMLInputElement> = ref(null);
 
-type Mode = "pick" | "css" | "default";
-
 enum SubMode {
 	hleft = "start",
 	hcenter = "center",
@@ -231,6 +206,10 @@ const setMode = async (newMode: Mode) => {
 	mode.value = newMode;
 	await nextTick();
 	autofocus();
+
+	if (newMode === "default") {
+		setContentValue(component.value.id, fieldKey.value, undefined);
+	}
 };
 
 const handleInputSelect = (select: string) => {
@@ -263,13 +242,7 @@ onBeforeUnmount(() => {
 <style scoped>
 @import "../sharedStyles.css";
 
-.chipStackContainer {
-	padding: 12px;
-	margin-top: 4px;
-	padding-bottom: 12px;
-}
 .main {
-	border-top: 1px solid var(--builderSeparatorColor);
-	padding: 12px;
+	margin-top: 4px;
 }
 </style>
diff --git a/src/ui/src/builder/settings/BuilderFieldsColor.vue b/src/ui/src/builder/settings/BuilderFieldsColor.vue
index e96a65755..87114caa0 100644
--- a/src/ui/src/builder/settings/BuilderFieldsColor.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsColor.vue
@@ -5,40 +5,11 @@
 		tabindex="-1"
 		:data-automation-key="fieldKey"
 	>
-		<div class="chipStackContainer">
-			<div class="chipStack">
-				<button
-					class="chip"
-					tabindex="0"
-					:class="{ active: mode == 'default' }"
-					@click="
-						() => {
-							setMode('default');
-							setContentValue(component.id, fieldKey, undefined);
-						}
-					"
-				>
-					Default
-				</button>
-				<button
-					class="chip"
-					tabindex="0"
-					:class="{ active: mode == 'css' }"
-					@click="setMode('css')"
-				>
-					CSS
-				</button>
-				<button
-					class="chip"
-					:class="{ active: mode == 'pick' }"
-					tabindex="0"
-					@click="setMode('pick')"
-				>
-					Pick
-				</button>
-			</div>
-		</div>
-
+		<WdsTabs
+			:tabs="tabs"
+			:model-value="mode"
+			@update:model-value="setMode"
+		/>
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
 			<div v-if="mode == 'pick'" class="pickerContainer">
 				<input
@@ -74,6 +45,11 @@ import { Component } from "@/writerTypes";
 import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "../../injectionKeys";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
+import WdsTabs from "@/wds/WdsTabs.vue";
+import {
+	BuilderFieldCssMode as Mode,
+	BUILDER_FIELD_CSS_TAB_OPTIONS as tabs,
+} from "./constants/builderFieldsCssTabs";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -83,8 +59,6 @@ const rootEl: Ref<HTMLElement> = ref(null);
 const pickerEl: Ref<HTMLInputElement> = ref(null);
 const freehandInputEl: Ref<HTMLInputElement> = ref(null);
 
-type Mode = "pick" | "css" | "default";
-
 const focusEls: Record<Mode, Ref<HTMLInputElement>> = {
 	pick: pickerEl,
 	css: freehandInputEl,
@@ -123,6 +97,10 @@ const setMode = async (newMode: Mode) => {
 	mode.value = newMode;
 	await nextTick();
 	autofocus();
+
+	if (newMode === "default") {
+		setContentValue(component.value.id, fieldKey.value, undefined);
+	}
 };
 
 const handleInput = (ev: Event) =>
@@ -144,13 +122,16 @@ onBeforeUnmount(() => {
 <style scoped>
 @import "../sharedStyles.css";
 
-.chipStackContainer {
-	padding: 12px;
+.main {
 	margin-top: 4px;
-	padding-bottom: 12px;
 }
-.main {
-	border-top: 1px solid var(--builderSeparatorColor);
-	padding: 12px;
+input[type="color"] {
+	width: 100%;
+	height: 34px;
+	border-radius: 8px;
+	border: 1px solid var(--separatorColor);
+
+	display: block;
+	height: 40px;
 }
 </style>
diff --git a/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue b/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue
index 9742227ab..506a3fe56 100644
--- a/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue
@@ -5,26 +5,12 @@
 		tabindex="-1"
 		:data-automation-key="props.fieldKey"
 	>
-		<div class="chipStackContainer">
-			<div class="chipStack">
-				<button
-					class="chip"
-					:class="{ active: mode == 'assisted' }"
-					tabindex="0"
-					@click="setMode('assisted')"
-				>
-					Static List
-				</button>
-				<button
-					class="chip"
-					tabindex="0"
-					:class="{ active: mode == 'freehand' }"
-					@click="setMode('freehand')"
-				>
-					JSON
-				</button>
-			</div>
-		</div>
+		<WdsTabs
+			class="BuilderFieldsOptions__tabs"
+			:tabs="tabs"
+			:model-value="mode"
+			@update:model-value="setMode"
+		/>
 
 		<template v-if="mode == 'assisted'">
 			<div class="staticList">
@@ -91,6 +77,7 @@ import type { InstancePath } from "@/writerTypes";
 import BuilderFieldsObject from "./BuilderFieldsObject.vue";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 import { useComponentActions } from "../useComponentActions";
+import WdsTabs, { WdsTabOptions } from "@/wds/WdsTabs.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -115,6 +102,11 @@ const formAdd: Ref<{ key: string; value: string }> = ref({
 	value: "",
 });
 
+const tabs: WdsTabOptions<Mode>[] = [
+	{ label: "Static List", value: "assisted" },
+	{ label: "JSON", value: "freehand" },
+];
+
 const { getEvaluatedFields } = useEvaluator(wf);
 
 const evaluatedValue = computed<Record<string, string | number | null>>(
@@ -191,16 +183,14 @@ onMounted(async () => {
 <style scoped>
 @import "../sharedStyles.css";
 
-.chipStackContainer {
-	padding: 12px;
-	margin-top: 4px;
-	padding-bottom: 12px;
-	border-bottom: 1px solid var(--builderSeparatorColor);
+.BuilderFieldsOptions__tabs {
+	margin-bottom: 8px;
 }
 
 .staticList {
-	padding: 12px;
-	border-bottom: 1px solid var(--builderSeparatorColor);
+	padding: 8.5px 12px 8.5px 12px;
+	border: 1px solid var(--builderSeparatorColor);
+	border-radius: 8px;
 }
 
 .staticList:empty::before {
@@ -227,7 +217,7 @@ onMounted(async () => {
 }
 
 .formAdd {
-	padding: 12px;
+	margin-top: 8px;
 }
 
 .BuilderTemplateInput {
diff --git a/src/ui/src/builder/settings/BuilderFieldsObject.vue b/src/ui/src/builder/settings/BuilderFieldsObject.vue
index e52726c03..8dba465c6 100644
--- a/src/ui/src/builder/settings/BuilderFieldsObject.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsObject.vue
@@ -46,7 +46,6 @@ const templateField = computed(() => {
 @import "../sharedStyles.css";
 
 .BuilderFieldsObject {
-	padding: 16px 12px 12px 12px;
 	font-size: inherit;
 }
 </style>
diff --git a/src/ui/src/builder/settings/BuilderFieldsPadding.vue b/src/ui/src/builder/settings/BuilderFieldsPadding.vue
index bf4c9dfc8..0312f516c 100644
--- a/src/ui/src/builder/settings/BuilderFieldsPadding.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsPadding.vue
@@ -5,39 +5,11 @@
 		tabindex="-1"
 		:data-automation-key="props.fieldKey"
 	>
-		<div class="chipStackContainer">
-			<div class="chipStack">
-				<button
-					class="chip"
-					tabindex="0"
-					:class="{ active: mode == 'default' }"
-					@click="
-						() => {
-							setMode('default');
-							setContentValue(component.id, fieldKey, undefined);
-						}
-					"
-				>
-					Default
-				</button>
-				<button
-					class="chip"
-					tabindex="0"
-					:class="{ active: mode == 'css' }"
-					@click="setMode('css')"
-				>
-					CSS
-				</button>
-				<button
-					class="chip"
-					:class="{ active: mode == 'pick' }"
-					tabindex="0"
-					@click="setMode('pick')"
-				>
-					Pick
-				</button>
-			</div>
-		</div>
+		<WdsTabs
+			:tabs="tabs"
+			:model-value="mode"
+			@update:model-value="setMode"
+		/>
 
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
 			<div v-if="mode == 'pick'" class="pickerContainer">
@@ -46,75 +18,75 @@
 					:options="selectOptions"
 					@update:model-value="handleInputSelect"
 				/>
-				<div v-if="subMode == SubMode.all_sides" class="row">
-					<i>All</i>
-					<input
-						ref="fixedEl"
-						type="text"
-						:value="valuePadding[0]"
-						@input="handleInputs($event, subMode)"
-					/>
-					<div>px</div>
-				</div>
-				<div v-if="subMode == SubMode.xy_sides">
-					<div class="row">
-						<i>X</i>
-						<input
+				<div class="BuilderFieldsPadding__options">
+					<template v-if="subMode == SubMode.all_sides">
+						<i>All</i>
+						<WdsTextInput
 							ref="fixedEl"
-							type="text"
-							:value="valuePadding[0]"
-							@input="handleInputs($event, subMode, 'x')"
+							type="number"
+							:model-value="valuePadding[0]"
+							@update:model-value="handleInputs($event, subMode)"
+						/>
+						<div>px</div>
+					</template>
+					<template v-if="subMode == SubMode.xy_sides">
+						<i>X</i>
+						<WdsTextInput
+							type="number"
+							:model-value="valuePadding[0]"
+							@update:model-value="
+								handleInputs($event, subMode, 'x')
+							"
 						/>
 						<div>px</div>
-					</div>
-					<div class="row">
 						<i>Y</i>
-						<input
-							type="text"
-							:value="valuePadding[2]"
-							@input="handleInputs($event, subMode, 'y')"
+						<WdsTextInput
+							type="number"
+							:model-value="valuePadding[2]"
+							@update:model-value="
+								handleInputs($event, subMode, 'y')
+							"
 						/>
 						<div>px</div>
-					</div>
-				</div>
-				<div v-if="subMode == SubMode.per_side">
-					<div class="row">
+					</template>
+					<template v-if="subMode == SubMode.per_side">
 						<i>Left</i>
-						<input
-							ref="fixedEl"
-							type="text"
-							:value="valuePadding[0]"
-							@input="handleInputs($event, subMode, 'left')"
+						<WdsTextInput
+							type="number"
+							:model-value="valuePadding[0]"
+							@update:model-value="
+								handleInputs($event, subMode, 'left')
+							"
 						/>
 						<div>px</div>
-					</div>
-					<div class="row">
 						<i>Right</i>
-						<input
-							type="text"
-							:value="valuePadding[1]"
-							@input="handleInputs($event, subMode, 'right')"
+						<WdsTextInput
+							type="number"
+							:model-value="valuePadding[1]"
+							@update:model-value="
+								handleInputs($event, subMode, 'right')
+							"
 						/>
 						<div>px</div>
-					</div>
-					<div class="row">
 						<i>Top</i>
-						<input
-							type="text"
-							:value="valuePadding[2]"
-							@input="handleInputs($event, subMode, 'top')"
+						<WdsTextInput
+							type="number"
+							:model-value="valuePadding[2]"
+							@update:model-value="
+								handleInputs($event, subMode, 'top')
+							"
 						/>
 						<div>px</div>
-					</div>
-					<div class="row">
 						<i>Bottom</i>
-						<input
-							type="text"
-							:value="valuePadding[3]"
-							@input="handleInputs($event, subMode, 'bottom')"
+						<WdsTextInput
+							type="number"
+							:model-value="valuePadding[3]"
+							@update:model-value="
+								handleInputs($event, subMode, 'bottom')
+							"
 						/>
 						<div>px</div>
-					</div>
+					</template>
 				</div>
 			</div>
 
@@ -130,6 +102,7 @@
 
 <script setup lang="ts">
 import {
+	ComponentInstance,
 	computed,
 	inject,
 	nextTick,
@@ -144,6 +117,12 @@ import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "@/injectionKeys";
 import BuilderSelect from "../BuilderSelect.vue";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
+import WdsTextInput from "@/wds/WdsTextInput.vue";
+import WdsTabs from "@/wds/WdsTabs.vue";
+import {
+	BuilderFieldCssMode as Mode,
+	BUILDER_FIELD_CSS_TAB_OPTIONS as tabs,
+} from "./constants/builderFieldsCssTabs";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -151,11 +130,9 @@ const { setContentValue } = useComponentActions(wf, ssbm);
 
 const rootEl: Ref<HTMLElement> = ref(null);
 const pickerEl: Ref<HTMLInputElement> = ref(null);
-const fixedEl: Ref<HTMLInputElement> = ref(null);
+const fixedEl = ref<ComponentInstance<typeof WdsTextInput>>(null);
 const freehandInputEl: Ref<HTMLInputElement> = ref(null);
 
-type Mode = "pick" | "css" | "default";
-
 enum SubMode {
 	all_sides = "all_sides",
 	xy_sides = "XY sides",
@@ -315,6 +292,10 @@ const setMode = async (newMode: Mode) => {
 	mode.value = newMode;
 	await nextTick();
 	autofocus();
+
+	if (newMode === "default") {
+		setContentValue(component.value.id, fieldKey.value, undefined);
+	}
 };
 
 const handleInputSelect = (select: string) => {
@@ -327,7 +308,7 @@ const handleInputSelect = (select: string) => {
 	}
 
 	nextTick(() => {
-		fixedEl.value.focus();
+		fixedEl.value?.focus();
 	});
 };
 
@@ -339,8 +320,8 @@ const handleInputCss = (ev: Event) => {
 	);
 };
 
-const handleInputs = (ev: Event, subMode: SubMode, inputType?: string) => {
-	const value = (ev.target as HTMLInputElement).value;
+const handleInputs = (ev: string, subMode: SubMode, inputType?: string) => {
+	const value = Number(ev);
 	const cssValue = component.value.content[fieldKey.value];
 
 	if (subMode == SubMode.all_sides) {
@@ -391,27 +372,19 @@ onBeforeUnmount(() => {
 @import "../sharedStyles.css";
 @import "../ico.css";
 
-.chipStackContainer {
-	padding: 12px;
-	margin-top: 4px;
-	padding-bottom: 12px;
-}
-
 .main {
-	border-top: 1px solid var(--builderSeparatorColor);
-	padding: 12px;
+	margin-top: 4px;
 }
 
-.row {
-	display: flex;
-	flex-direction: row;
+.BuilderFieldsPadding__options {
+	margin-top: 8px;
+	display: grid;
+	grid-template-columns: auto minmax(0, 100%) auto;
 	gap: 8px;
-	padding: 8px;
 	align-items: baseline;
+	width: 100%;
 }
-
-.row input {
-	width: calc(100% - 32px) !important;
+.BuilderFieldsPadding__options input {
 	text-align: right;
 }
 </style>
diff --git a/src/ui/src/builder/settings/BuilderFieldsShadow.vue b/src/ui/src/builder/settings/BuilderFieldsShadow.vue
index 2c9912d9d..03cddfb69 100644
--- a/src/ui/src/builder/settings/BuilderFieldsShadow.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsShadow.vue
@@ -5,40 +5,11 @@
 		tabindex="-1"
 		:data-automation-key="props.fieldKey"
 	>
-		<div class="chipStackContainer">
-			<div class="chipStack">
-				<button
-					class="chip"
-					tabindex="0"
-					:class="{ active: mode == 'default' }"
-					@click="
-						() => {
-							setMode('default');
-							setContentValue(component.id, fieldKey, undefined);
-						}
-					"
-				>
-					Default
-				</button>
-				<button
-					class="chip"
-					tabindex="0"
-					:class="{ active: mode == 'css' }"
-					@click="setMode('css')"
-				>
-					CSS
-				</button>
-				<button
-					class="chip"
-					:class="{ active: mode == 'pick' }"
-					tabindex="0"
-					@click="setMode('pick')"
-				>
-					Pick
-				</button>
-			</div>
-		</div>
-
+		<WdsTabs
+			:tabs="tabs"
+			:model-value="mode"
+			@update:model-value="setMode"
+		/>
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
 			<div v-if="mode == 'pick'" class="pickerContainer">
 				<div class="param">
@@ -143,6 +114,11 @@ import { Component } from "@/writerTypes";
 import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "../../injectionKeys";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
+import WdsTabs from "@/wds/WdsTabs.vue";
+import {
+	BuilderFieldCssMode as Mode,
+	BUILDER_FIELD_CSS_TAB_OPTIONS as tabs,
+} from "./constants/builderFieldsCssTabs";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -156,8 +132,6 @@ const paramBlurRadiusEl: Ref<HTMLInputElement> = ref(null);
 const paramSpreadRadiusEl: Ref<HTMLInputElement> = ref(null);
 const paramColorEl: Ref<HTMLInputElement> = ref(null);
 
-type Mode = "pick" | "css" | "default";
-
 const focusEls: Record<Mode, Ref<HTMLInputElement>> = {
 	pick: paramOffsetXEl,
 	css: freehandInputEl,
@@ -198,6 +172,10 @@ const setMode = async (newMode: Mode) => {
 	mode.value = newMode;
 	await nextTick();
 	autofocus();
+
+	if (newMode === "default") {
+		setContentValue(component.value.id, fieldKey.value, undefined);
+	}
 };
 
 const handleInput = () => {
@@ -236,25 +214,19 @@ onBeforeUnmount(() => {
 <style scoped>
 @import "../sharedStyles.css";
 
-.chipStackContainer {
-	padding: 12px;
-	margin-top: 4px;
-	padding-bottom: 12px;
-}
 .main {
-	border-top: 1px solid var(--builderSeparatorColor);
-	padding: 12px;
+	margin-top: 4px;
 }
 
 .pickerContainer {
 	display: flex;
-	gap: 8px;
+	gap: 4px;
 	flex-direction: column;
 }
 
 .param > .header {
 	display: flex;
-	margin-bottom: 8px;
+	margin-bottom: 4px;
 }
 
 .param > .header > .name {
@@ -264,4 +236,17 @@ onBeforeUnmount(() => {
 .param > .header > .value {
 	margin-left: auto;
 }
+.param input[type="range"] {
+	width: 100%;
+}
+
+input[type="color"] {
+	width: 100%;
+	height: 34px;
+	border-radius: 8px;
+	border: 1px solid var(--separatorColor);
+
+	display: block;
+	height: 40px;
+}
 </style>
diff --git a/src/ui/src/builder/settings/BuilderFieldsText.vue b/src/ui/src/builder/settings/BuilderFieldsText.vue
index 577e7ec8f..f6e0db840 100644
--- a/src/ui/src/builder/settings/BuilderFieldsText.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsText.vue
@@ -75,7 +75,6 @@ const handleInput = (ev: Event) => {
 
 <style>
 .BuilderFieldsText .content {
-	padding: 16px 12px 12px 12px;
 	width: 100%;
 }
 </style>
diff --git a/src/ui/src/builder/settings/BuilderFieldsWidth.vue b/src/ui/src/builder/settings/BuilderFieldsWidth.vue
index 89f99e43c..12e898fae 100644
--- a/src/ui/src/builder/settings/BuilderFieldsWidth.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsWidth.vue
@@ -5,39 +5,11 @@
 		tabindex="-1"
 		:data-automation-key="props.fieldKey"
 	>
-		<div class="chipStackContainer">
-			<div class="chipStack">
-				<button
-					class="chip"
-					tabindex="0"
-					:class="{ active: mode == 'default' }"
-					@click="
-						() => {
-							setMode('default');
-							setContentValue(component.id, fieldKey, undefined);
-						}
-					"
-				>
-					Default
-				</button>
-				<button
-					class="chip"
-					tabindex="0"
-					:class="{ active: mode == 'css' }"
-					@click="setMode('css')"
-				>
-					CSS
-				</button>
-				<button
-					class="chip"
-					:class="{ active: mode == 'pick' }"
-					tabindex="0"
-					@click="setMode('pick')"
-				>
-					Pick
-				</button>
-			</div>
-		</div>
+		<WdsTabs
+			:tabs="tabs"
+			:model-value="mode"
+			@update:model-value="setMode"
+		/>
 
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
 			<div v-if="mode == 'pick'" class="pickerContainer">
@@ -47,11 +19,11 @@
 					@update:model-value="handleInputSelect"
 				/>
 				<div v-if="subMode == SubMode.fixed" class="fixedContainer">
-					<input
+					<WdsTextInput
 						ref="fixedEl"
-						type="text"
-						:value="valuePickFixed"
-						@input="handleInputFixed"
+						type="number"
+						:model-value="valuePickFixed"
+						@update:model-value="handleInputFixed"
 					/>
 					<div>px</div>
 				</div>
@@ -69,6 +41,7 @@
 
 <script setup lang="ts">
 import {
+	ComponentInstance,
 	computed,
 	inject,
 	nextTick,
@@ -83,6 +56,12 @@ import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "../../injectionKeys";
 import BuilderSelect from "../BuilderSelect.vue";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
+import WdsTextInput from "@/wds/WdsTextInput.vue";
+import WdsTabs from "@/wds/WdsTabs.vue";
+import {
+	BuilderFieldCssMode as Mode,
+	BUILDER_FIELD_CSS_TAB_OPTIONS as tabs,
+} from "./constants/builderFieldsCssTabs";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -90,11 +69,9 @@ const { setContentValue } = useComponentActions(wf, ssbm);
 
 const rootEl: Ref<HTMLElement> = ref(null);
 const pickerEl: Ref<HTMLInputElement> = ref(null);
-const fixedEl: Ref<HTMLInputElement> = ref(null);
+const fixedEl = ref<ComponentInstance<typeof WdsTextInput>>(null);
 const freehandInputEl: Ref<HTMLInputElement> = ref(null);
 
-type Mode = "pick" | "css" | "default";
-
 enum SubMode {
 	fixed = "fixed",
 	fit_content = "fit-content",
@@ -213,6 +190,10 @@ const setMode = async (newMode: Mode) => {
 	mode.value = newMode;
 	await nextTick();
 	autofocus();
+
+	if (newMode === "default") {
+		setContentValue(component.value.id, fieldKey.value, undefined);
+	}
 };
 
 const handleInputSelect = (select: string) => {
@@ -239,12 +220,8 @@ const handleInputCss = (ev: Event) => {
 	);
 };
 
-const handleInputFixed = (ev: Event) => {
-	setContentValue(
-		component.value.id,
-		fieldKey.value,
-		(ev.target as HTMLInputElement).value + "px",
-	);
+const handleInputFixed = (ev: string) => {
+	setContentValue(component.value.id, fieldKey.value, `${ev}px`);
 };
 
 onMounted(() => {
@@ -259,20 +236,15 @@ onBeforeUnmount(() => {
 <style scoped>
 @import "../sharedStyles.css";
 
-.chipStackContainer {
-	padding: 12px;
-	margin-top: 4px;
-	padding-bottom: 12px;
-}
 .main {
-	border-top: 1px solid var(--builderSeparatorColor);
-	padding: 12px;
+	margin-top: 4px;
 }
 
 .fixedContainer {
+	margin-top: 8px;
 	display: flex;
 	flex-direction: row;
+	align-items: center;
 	gap: 8px;
-	padding: 8px;
 }
 </style>
diff --git a/src/ui/src/builder/settings/BuilderSectionTitle.vue b/src/ui/src/builder/settings/BuilderSectionTitle.vue
new file mode 100644
index 000000000..34ed2d88a
--- /dev/null
+++ b/src/ui/src/builder/settings/BuilderSectionTitle.vue
@@ -0,0 +1,23 @@
+<template>
+	<div class="BuilderSectionTitle">
+		<i class="material-symbols-outlined">{{ icon }}</i>
+		<h3>{{ label }}</h3>
+	</div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+	icon: { type: String, required: true },
+	label: { type: String, required: true },
+});
+</script>
+
+<style lang="css" scoped>
+@import "../sharedStyles.css";
+.BuilderSectionTitle {
+	display: flex;
+	gap: 8px;
+	align-items: center;
+	font-size: 1rem;
+}
+</style>
diff --git a/src/ui/src/builder/settings/BuilderSettings.vue b/src/ui/src/builder/settings/BuilderSettings.vue
index 06edb8b10..9a1750112 100644
--- a/src/ui/src/builder/settings/BuilderSettings.vue
+++ b/src/ui/src/builder/settings/BuilderSettings.vue
@@ -114,7 +114,7 @@ const toggleMiniDocs = () => {
 	overflow: hidden;
 	border-width: 1px solid var(--builderAreaSeparatorColor);
 	background: var(--builderBackgroundColor);
-	box-shadow: 0px 3px 40px 0px rgba(172, 185, 220, 0.4);
+	box-shadow: var(--wdsShadowLarge);
 	border-radius: 12px;
 	top: v-bind("ssbm.getMode() == `workflows` ? `72px` : `20px`");
 }
diff --git a/src/ui/src/builder/settings/BuilderSettingsAPICode.vue b/src/ui/src/builder/settings/BuilderSettingsAPICode.vue
new file mode 100644
index 000000000..9586c4b1d
--- /dev/null
+++ b/src/ui/src/builder/settings/BuilderSettingsAPICode.vue
@@ -0,0 +1,132 @@
+<template>
+	<div v-if="isWorkflow" class="BuilderSettingsAPICode">
+		<BuilderModal
+			v-if="isModalVisible"
+			:close-action="modalCloseAction"
+			icon="code"
+			modal-title="API Code"
+		>
+			<div class="modalContents">
+				<template v-if="isHashAvailable">
+					The following call will create the job and provide you with
+					a job ID and a job token.
+					<div class="codeContainer">
+						<BuilderEmbeddedCodeEditor
+							v-model="code"
+							class="editor"
+							variant="minimal"
+							language="shell"
+						></BuilderEmbeddedCodeEditor>
+					</div>
+					Using the job ID and token obtained in the previous call,
+					check the status of the job. You can use the code below,
+					after replacing JOB_ID and JOB_TOKEN for the right values.
+					<div class="codeContainer">
+						<BuilderEmbeddedCodeEditor
+							v-model="codePost"
+							class="editor"
+							variant="minimal"
+							language="shell"
+						></BuilderEmbeddedCodeEditor>
+					</div>
+					<strong
+						>Note: For API calls to work, the --enable-jobs-api flag
+						must be active.</strong
+					>
+				</template>
+				<template v-else>
+					API code cannot be generated. Please make sure the
+					environment variable WRITER_SECRET_KEY has been set up.
+				</template>
+			</div>
+		</BuilderModal>
+		<template v-if="workflowKey">
+			<WdsButton variant="tertiary" size="small" @click="showCode">
+				<i class="material-symbols-outlined"> code </i> Call via
+				API</WdsButton
+			>
+		</template>
+		<template v-else>
+			<WdsButton
+				:disabled="true"
+				variant="tertiary"
+				size="small"
+				data-writer-tooltip="You need to specify a workflow key before this workflow can be
+				used in the UI or called via API."
+			>
+				<i class="material-symbols-outlined"> code </i> Call via
+				API</WdsButton
+			>
+		</template>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref } from "vue";
+import injectionKeys from "../../injectionKeys";
+import BuilderModal, { ModalAction } from "../BuilderModal.vue";
+import BuilderEmbeddedCodeEditor from "../BuilderEmbeddedCodeEditor.vue";
+import WdsButton from "@/wds/WdsButton.vue";
+
+const wf = inject(injectionKeys.core);
+const wfbm = inject(injectionKeys.builderManager);
+
+const component = computed(() => wf.getComponentById(wfbm.getSelectedId()));
+
+const isWorkflow = computed(
+	() => component.value?.type === "workflows_workflow",
+);
+
+const workflowKey = computed(() => {
+	if (!isWorkflow.value) return;
+	return component.value.content?.["key"];
+});
+
+const isModalVisible = ref(false);
+
+const code = ref("");
+const codePost = ref("");
+const isHashAvailable = ref(false);
+
+const modalCloseAction: ModalAction = {
+	desc: "Close",
+	fn: () => {
+		isModalVisible.value = false;
+	},
+};
+
+function showCode() {
+	generateCode();
+	isModalVisible.value = true;
+}
+
+async function generateCode() {
+	const bearerToken = await wf.hashMessage(`create_job_${workflowKey.value}`);
+	isHashAvailable.value = Boolean(bearerToken);
+	if (!isHashAvailable.value) return;
+
+	const baseURL = window.location.origin + window.location.pathname;
+	code.value = `
+curl --location --request POST '${baseURL}api/job/workflow/${workflowKey.value}' \\
+--header 'Content-Type: application/json' \\
+--header 'Authorization: Bearer ${bearerToken}' \\
+--data '{
+    "my_var": 1
+}'`.trim();
+	codePost.value = `
+curl --location '${baseURL}api/job/JOB_ID' \\
+--header 'Authorization: Bearer JOB_TOKEN'`.trim();
+}
+</script>
+
+<style scoped>
+.modalContents {
+	display: flex;
+	gap: 16px;
+	flex-direction: column;
+}
+
+.codeContainer {
+	height: 100px;
+}
+</style>
diff --git a/src/ui/src/builder/settings/BuilderSettingsBinding.vue b/src/ui/src/builder/settings/BuilderSettingsBinding.vue
index b6ffcc419..b025f7742 100644
--- a/src/ui/src/builder/settings/BuilderSettingsBinding.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsBinding.vue
@@ -1,15 +1,10 @@
 <template>
 	<div v-if="ssbm.isSelectionActive()" class="BuilderSettingsBinding">
-		<div class="sectionTitle">
-			<i class="material-symbols-outlined">link</i>
-			<h3>Binding</h3>
-		</div>
+		<BuilderSectionTitle icon="link" label="Binding" />
 		<div class="main">
-			<div class="fieldWrapper">
-				<span class="name">State element</span>
+			<WdsFieldWrapper label="State element" :hint="hint">
 				<BuilderTemplateInput
 					type="state"
-					class="content"
 					:value="component.binding?.stateRef"
 					placeholder="my_var"
 					@input="
@@ -20,12 +15,7 @@
 							)
 					"
 				/>
-				<div class="desc">
-					Links this component to a state element, in a two-way
-					fashion. Reference the state element directly, i.e. use
-					"my_var" instead of "@{my_var}".
-				</div>
-			</div>
+			</WdsFieldWrapper>
 		</div>
 	</div>
 </template>
@@ -35,6 +25,10 @@ import { computed, inject } from "vue";
 import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "../../injectionKeys";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
+import WdsFieldWrapper from "@/wds/WdsFieldWrapper.vue";
+
+const hint =
+	'Links this component to a state element, in a two-way fashion. Reference the state element directly, i.e. use "my_var" instead of "@{my_var}".';
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
diff --git a/src/ui/src/builder/settings/BuilderSettingsHandlers.vue b/src/ui/src/builder/settings/BuilderSettingsHandlers.vue
index 96d74fc6f..d93c3d43e 100644
--- a/src/ui/src/builder/settings/BuilderSettingsHandlers.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsHandlers.vue
@@ -1,47 +1,39 @@
 <template>
 	<div v-if="ssbm.isSelectionActive()" class="BuilderSettingsHandlers">
-		<div class="sectionTitle">
+		<div class="BuilderSettingsHandlers__title">
 			<i class="material-symbols-outlined">bolt</i>
 			<h3>Events</h3>
 		</div>
-		<div class="list">
+		<div class="BuilderSettingsHandlers__list">
 			<div
 				v-for="(eventInfo, eventType) in recognisedEvents"
 				:key="eventType"
-				class="fieldWrapper"
 			>
 				<div class="columns">
-					<div class="fieldWrapperMain">
-						<span class="name">{{ eventType }}</span>
-						<div class="content">
-							<BuilderSelect
-								:model-value="
-									component.handlers?.[eventType] ?? ''
-								"
-								:options="getOptions(eventType)"
-								variant="embedded"
-								enable-search
-								@update:model-value="
-									handleHandlerChange($event, eventType)
-								"
-							/>
-						</div>
-					</div>
-					<div class="fieldActions">
-						<button
-							v-if="getStubCode(eventType)"
-							variant="subtle"
-							title="Show event handler stub"
-							@click="showStub(eventType)"
-						>
-							<i class="material-symbols-outlined">help</i>
-						</button>
-					</div>
-				</div>
-				<div v-if="eventInfo?.desc" class="desc">
-					{{ eventInfo.desc }}
+					<WdsFieldWrapper
+						:label="eventType"
+						:hint="eventInfo?.desc"
+						:help-button="
+							getStubCode(eventType)
+								? 'Show event handler stub'
+								: false
+						"
+						@help-click="showStub(eventType)"
+					>
+						<BuilderSelect
+							:model-value="component.handlers?.[eventType] ?? ''"
+							:options="getOptions(eventType)"
+							enable-search
+							@update:model-value="
+								handleHandlerChange($event, eventType)
+							"
+						/>
+					</WdsFieldWrapper>
 				</div>
 			</div>
+			<WdsButton variant="tertiary" @click="showCustomHandlerModal">
+				<i class="material-symbols-outlined">add</i>Add custom handler
+			</WdsButton>
 		</div>
 		<BuilderModal
 			v-if="stubModal"
@@ -56,87 +48,57 @@
 			<div class="codeContainer">
 				<code v-dompurify-html="stubModal.highlightedCodeHtml"> </code>
 			</div>
-			<button @click="copyToClipboard(stubModal.code)">
-				<i class="material-symbols-outlined"> content_copy </i>
+			<WdsButton
+				variant="tertiary"
+				@click="copyToClipboard(stubModal.code)"
+			>
+				<i class="material-symbols-outlined">content_copy</i>
 				Copy code to clipboard
-			</button>
+			</WdsButton>
 		</BuilderModal>
-		<div class="customHandler">
-			<button
-				title="Add a custom event handler"
-				@click="showCustomHandlerModal"
-			>
-				<i class="material-symbols-outlined">add</i>Add custom handler
-			</button>
-			<BuilderModal
-				v-if="customHandlerModal"
-				:close-action="customHandlerModalCloseAction"
-				icon="bolt"
-				modal-title="Add Custom Event Handler"
-			>
-				<div class="customHandlerModalForm">
-					<div class="fieldWrapper">
-						<div class="fieldWrapperMain">
-							<span class="name">Event type</span>
-							<input
-								v-model="customHandlerModal.eventType"
-								class="content"
-								type="text"
-								list="commonEventTypes"
-							/>
-							<datalist id="commonEventTypes">
-								<option
-									v-for="commonEventType in commonEventTypes"
-									:key="commonEventType"
-									:value="commonEventType"
-								>
-									{{ commonEventType }}
-								</option>
-							</datalist>
-						</div>
-						<span class="desc">Can be any event type.</span>
-					</div>
-					<div class="fieldWrapper">
-						<div class="fieldWrapperMain">
-							<span class="name">Handler function</span>
-						</div>
-						<select
-							v-model="customHandlerModal.handlerFunctionName"
-							class="content"
-						>
-							<option
-								v-for="userFunction in userFunctions"
-								:key="userFunction.name"
-								:value="userFunction.name"
-							>
-								{{ userFunction.name }}
-							</option>
-							<option
-								v-for="pageKey in pageKeys"
-								:key="`$goToPage_${pageKey}`"
-								:value="`$goToPage_${pageKey}`"
-							>
-								Go to page "{{ pageKey }}"
-							</option>
-							<option
-								v-for="workflowKey in workflowKeys"
-								:key="`$runWorkflow_${workflowKey}`"
-								:value="`$runWorkflow_${workflowKey}`"
-							>
-								Run workflow "{{ workflowKey }}"
-							</option>
-						</select>
-						<span class="desc"
-							>The function that will handle the event.</span
+		<BuilderModal
+			v-if="customHandlerModal"
+			:close-action="customHandlerModalCloseAction"
+			icon="bolt"
+			modal-title="Add Custom Event Handler"
+			allow-overflow
+		>
+			<div class="customHandlerModalForm">
+				<WdsFieldWrapper
+					label="Event type"
+					hint="Can be any event type."
+				>
+					<WdsTextInput
+						v-model="customHandlerModal.eventType"
+						type="text"
+						list="commonEventTypes"
+					/>
+					<datalist id="commonEventTypes">
+						<option
+							v-for="commonEventType in commonEventTypes"
+							:key="commonEventType"
+							:value="commonEventType"
 						>
-					</div>
-				</div>
+							{{ commonEventType }}
+						</option>
+					</datalist>
+				</WdsFieldWrapper>
+				<WdsFieldWrapper
+					label="Handler function"
+					hint="The function that will handle the event."
+				>
+					<BuilderSelect
+						v-model="customHandlerModal.handlerFunctionName"
+						:options="options"
+						enable-search
+					/>
+				</WdsFieldWrapper>
+			</div>
 
-				<button @click="addCustomEventHandler()">
-					<i class="material-symbols-outlined">add</i>Add
-				</button>
-			</BuilderModal>
-		</div>
+			<WdsButton variant="tertiary" @click="addCustomEventHandler()">
+				<i class="material-symbols-outlined">add</i>Add
+			</WdsButton>
+		</BuilderModal>
 	</div>
 </template>
 
@@ -150,6 +112,9 @@ import BuilderModal, { ModalAction } from "../BuilderModal.vue";
 import { WriterComponentDefinition } from "@/writerTypes";
 import BuilderSelect from "../BuilderSelect.vue";
 import type { Option } from "../BuilderSelect.vue";
+import WdsFieldWrapper from "@/wds/WdsFieldWrapper.vue";
+import WdsTextInput from "@/wds/WdsTextInput.vue";
+import WdsButton from "@/wds/WdsButton.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -182,7 +147,7 @@ const options = computed<Option[]>(() => {
 	];
 });
 
-function getOptions(eventType: string): Option[] {
+function getOptions(eventType?: string): Option[] {
 	if (!isHandlerInvalid(eventType)) return options.value;
 
 	const handler = component.value.handlers?.[eventType];
@@ -359,38 +324,22 @@ const copyToClipboard = (text: string) => {
 <style scoped>
 @import "../sharedStyles.css";
 
-.list {
-	border-radius: 4px;
+.BuilderSettingsHandlers {
+	padding: 24px;
 }
 
-.fieldWrapper .columns {
-	display: grid;
-	grid-template-columns: minmax(0, 100%) auto;
-	gap: 12px;
+.BuilderSettingsHandlers__title {
+	padding-bottom: 24px;
+	display: flex;
+	gap: 8px;
 	align-items: center;
-	max-width: 100%;
-}
-
-.fieldWrapperMain {
-	width: 100%;
-}
-
-.fieldWrapper .content {
-	padding: 16px 8px 12px 8px;
-	width: 100%;
-}
-.fieldWrapper .content .select {
-	padding: 0;
-	height: auto;
+	font-size: 1rem;
 }
 
-.fieldActions > button {
-	border-radius: 16px;
-	font-size: 0.875rem;
-}
-
-.customHandler {
-	margin-top: 24px;
+.BuilderSettingsHandlers__list {
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
 }
 
 .addHandler .fields {
@@ -421,14 +370,10 @@ const copyToClipboard = (text: string) => {
 }
 
 .customHandlerModalForm {
-	display: flex;
+	display: grid;
+	grid-template-columns: 1fr 1fr;
 	align-items: center;
 	gap: 16px;
 	margin-bottom: 16px;
 }
-
-.customHandlerModalForm .fieldWrapper {
-	flex: 1 1 auto;
-	margin-top: 0;
-}
 </style>
diff --git a/src/ui/src/builder/settings/BuilderSettingsMain.vue b/src/ui/src/builder/settings/BuilderSettingsMain.vue
index 68ddd2564..fd98b7f47 100644
--- a/src/ui/src/builder/settings/BuilderSettingsMain.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsMain.vue
@@ -22,6 +22,7 @@
 				<BuilderSettingsHandlers></BuilderSettingsHandlers>
 				<BuilderSettingsVisibility></BuilderSettingsVisibility>
 			</template>
+			<BuilderSettingsAPICode>Execute via API</BuilderSettingsAPICode>
 		</div>
 
 		<div class="sections debug">
@@ -42,6 +43,7 @@ import BuilderSettingsBinding from "./BuilderSettingsBinding.vue";
 import BuilderSettingsVisibility from "./BuilderSettingsVisibility.vue";
 import BuilderCopyText from "../BuilderCopyText.vue";
 import BuilderAsyncLoader from "../BuilderAsyncLoader.vue";
+import BuilderSettingsAPICode from "./BuilderSettingsAPICode.vue";
 
 const BuilderSettingsHandlers = defineAsyncComponent({
 	loader: () => import("./BuilderSettingsHandlers.vue"),
diff --git a/src/ui/src/builder/settings/BuilderSettingsProperties.vue b/src/ui/src/builder/settings/BuilderSettingsProperties.vue
index 950184fda..b760fac0a 100644
--- a/src/ui/src/builder/settings/BuilderSettingsProperties.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsProperties.vue
@@ -4,44 +4,46 @@
 		class="BuilderSettingsProperties"
 	>
 		<div
-			v-for="propertyCategory in fieldCategories.filter(
-				(fc) => fieldsByCategory[fc].length > 0,
-			)"
+			v-for="propertyCategory in fieldCategories"
 			:key="propertyCategory"
-			class="propertyCategory"
+			class="BuilderSettingsProperties__category"
 		>
-			<div class="title">
-				<h4>{{ propertyCategory }}</h4>
-			</div>
+			<h4
+				v-if="fieldsByCategory[propertyCategory].length > 0"
+				class="BuilderSettingsProperties__category__title"
+			>
+				{{ propertyCategory }}
+			</h4>
 			<div
 				v-for="[fieldKey, fieldValue] in fieldsByCategory[
 					propertyCategory
 				]"
 				:key="fieldKey"
+				class="BuilderSettingsProperties__category__field"
 			>
-				<div class="fieldWrapper">
-					<div v-if="propertyCategory != 'Tools'" class="name">
-						{{ fieldValue.name ?? fieldKey
-						}}<span class="type"> : {{ fieldValue.type }}</span>
-					</div>
-
+				<WdsFieldWrapper
+					:label="
+						propertyCategory === 'Tools'
+							? undefined
+							: fieldValue.name ?? fieldKey
+					"
+					:hint="fieldValue.desc"
+					:unit="fieldValue.type"
+				>
 					<BuilderFieldsColor
 						v-if="fieldValue.type == FieldType.Color"
-						class="content"
 						:field-key="fieldKey"
 						:component-id="selectedComponent.id"
 					></BuilderFieldsColor>
 
 					<BuilderFieldsShadow
 						v-if="fieldValue.type == FieldType.Shadow"
-						class="content"
 						:field-key="fieldKey"
 						:component-id="selectedComponent.id"
 					></BuilderFieldsShadow>
 
 					<BuilderFieldsKeyValue
 						v-if="fieldValue.type == FieldType.KeyValue"
-						class="content"
 						:field-key="fieldKey"
 						:component-id="selectedComponent.id"
 						:instance-path="selectedInstancePath"
@@ -67,21 +69,18 @@
 
 					<BuilderFieldsObject
 						v-if="fieldValue.type == FieldType.Object"
-						class="content"
 						:field-key="fieldKey"
 						:component-id="selectedComponent.id"
 					></BuilderFieldsObject>
 
 					<BuilderFieldsWidth
 						v-if="fieldValue.type == FieldType.Width"
-						class="content"
 						:field-key="fieldKey"
 						:component-id="selectedComponent.id"
 					></BuilderFieldsWidth>
 
 					<BuilderFieldsAlign
 						v-if="fieldValue.type == FieldType.HAlign"
-						class="content"
 						direction="horizontal"
 						:field-key="fieldKey"
 						:component-id="selectedComponent.id"
@@ -89,7 +88,6 @@
 
 					<BuilderFieldsAlign
 						v-if="fieldValue.type == FieldType.VAlign"
-						class="content"
 						direction="vertical"
 						:field-key="fieldKey"
 						:component-id="selectedComponent.id"
@@ -97,7 +95,6 @@
 
 					<BuilderFieldsPadding
 						v-if="fieldValue.type == FieldType.Padding"
-						class="content"
 						:field-key="fieldKey"
 						:component-id="selectedComponent.id"
 					></BuilderFieldsPadding>
@@ -108,11 +105,7 @@
 						:component-id="selectedComponent.id"
 					>
 					</BuilderFieldsTools>
-
-					<div v-if="fieldValue.desc" class="desc">
-						{{ fieldValue.desc }}
-					</div>
-				</div>
+				</WdsFieldWrapper>
 			</div>
 		</div>
 	</div>
@@ -132,6 +125,7 @@ import BuilderFieldsShadow from "./BuilderFieldsShadow.vue";
 import BuilderFieldsText from "./BuilderFieldsText.vue";
 import BuilderFieldsWidth from "./BuilderFieldsWidth.vue";
 import BuilderFieldsTools from "./BuilderFieldsTools.vue";
+import WdsFieldWrapper from "@/wds/WdsFieldWrapper.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -150,11 +144,13 @@ const fields = computed(() => {
 	return definition.fields;
 });
 
-const fieldCategories = [
-	FieldCategory.General,
-	FieldCategory.Style,
-	FieldCategory.Tools,
-];
+const fieldCategories = computed(() => {
+	return [
+		FieldCategory.General,
+		FieldCategory.Style,
+		FieldCategory.Tools,
+	].filter((c) => fieldsByCategory.value[c]?.length);
+});
 
 const fieldsByCategory = computed(() => {
 	const entries = Object.entries(fields.value);
@@ -179,17 +175,22 @@ const fieldsByCategory = computed(() => {
 @import "../sharedStyles.css";
 
 .BuilderSettingsProperties {
+	padding: 24px;
+
 	display: flex;
 	flex-direction: column;
-	gap: 24px;
+	gap: 16px;
 }
 
-textarea.content {
-	resize: vertical;
-	height: 8em;
+.BuilderSettingsProperties__category {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
 }
 
-input[type="color"].content {
-	height: 48px;
+.BuilderSettingsProperties__category__title {
+	color: var(--builderSecondaryTextColor);
+	font-weight: 500;
+	font-size: 12px;
 }
 </style>
diff --git a/src/ui/src/builder/settings/BuilderSettingsVisibility.vue b/src/ui/src/builder/settings/BuilderSettingsVisibility.vue
index 9e2f7358f..5eb6fcd32 100644
--- a/src/ui/src/builder/settings/BuilderSettingsVisibility.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsVisibility.vue
@@ -1,59 +1,18 @@
 <template>
 	<div v-if="ssbm.isSelectionActive()" class="BuilderSettingsVisibility">
-		<div class="sectionTitle">
-			<i class="material-symbols-outlined"> visibility </i>
-			<h3>Visibility</h3>
-		</div>
+		<BuilderSectionTitle icon="visibility" label="Visibility" />
 		<div class="main">
-			<div class="chipStack">
-				<div
-					class="chip"
-					:class="{
-						active:
-							typeof component.visible == 'undefined' ||
-							component.visible.expression === true,
-					}"
-					@click="() => setVisibleValue(component.id, true)"
-				>
-					Yes
-				</div>
-				<div
-					class="chip"
-					:class="{ active: component.visible?.expression === false }"
-					@click="() => setVisibleValue(component.id, false)"
-				>
-					No
-				</div>
-				<div
-					class="chip"
-					:class="{
-						active: component.visible?.expression === 'custom',
-					}"
-					@click="
-						() =>
-							setVisibleValue(
-								component.id,
-								'custom',
-								component.visible?.binding,
-								component.visible?.reversed,
-							)
-					"
-				>
-					Custom
-				</div>
-			</div>
-			<div
+			<WdsTabs v-model="tab" :tabs="tabs" />
+			<WdsFieldWrapper
 				v-if="
 					typeof component.visible != 'undefined' &&
 					component.visible.expression === 'custom'
 				"
-				class="fieldWrapper"
+				:hint="hint"
 			>
-				<span class="name">Visibility value</span>
 				<BuilderTemplateInput
 					:value="component.visible.binding"
 					type="state"
-					class="content"
 					placeholder="my_visibility_state_value"
 					@input="
 						(ev: Event) =>
@@ -80,12 +39,7 @@
 						"
 					/><span>Reverse</span>
 				</div>
-				<div class="desc">
-					Reference a state or context element that will evaluate to
-					true or false. Reference the element directly, i.e. use
-					"my_var" instead of "@{my_var}".
-				</div>
-			</div>
+			</WdsFieldWrapper>
 		</div>
 	</div>
 </template>
@@ -95,12 +49,49 @@ import { computed, inject } from "vue";
 import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "../../injectionKeys";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
+import WdsFieldWrapper from "@/wds/WdsFieldWrapper.vue";
+import BuilderSectionTitle from "./BuilderSectionTitle.vue";
+import WdsTabs, { WdsTabOptions } from "@/wds/WdsTabs.vue";
+
+type Mode = "yes" | "no" | "custom";
+
+const tabs: WdsTabOptions<Mode>[] = [
+	{ label: "Yes", value: "yes" },
+	{ label: "No", value: "no" },
+	{ label: "Custom", value: "custom" },
+];
+
+const tab = computed<Mode>({
+	get() {
+		const visible = component.value.visible;
+		if (visible?.expression === "custom") return "custom";
+
+		return visible === undefined || visible.expression === true
+			? "yes"
+			: "no";
+	},
+	set(value: Mode) {
+		if (value === "custom") {
+			setVisibleValue(
+				component.value.id,
+				"custom",
+				component.value.visible?.binding,
+				component.value.visible?.reversed,
+			);
+		} else {
+			setVisibleValue(component.value.id, value === "yes");
+		}
+	},
+});
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 const { setVisibleValue } = useComponentActions(wf, ssbm);
 
 const component = computed(() => wf.getComponentById(ssbm.getSelectedId()));
+
+const hint =
+	'Reference a state or context element that will evaluate to true or false. Reference the element directly, i.e. use "my_var" instead of "@{my_var}".';
 </script>
 
 <style scoped>
@@ -108,13 +99,13 @@ const component = computed(() => wf.getComponentById(ssbm.getSelectedId()));
 
 .main {
 	margin-top: 16px;
-}
-
-.content {
-	padding: 16px 12px 12px 12px;
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
 }
 
 .flexRow {
+	margin-top: 4px;
 	display: flex;
 	flex-direction: row;
 	gap: 8px;
diff --git a/src/ui/src/builder/settings/BuilderTemplateInput.vue b/src/ui/src/builder/settings/BuilderTemplateInput.vue
index 2c13fccb8..37596b9d7 100644
--- a/src/ui/src/builder/settings/BuilderTemplateInput.vue
+++ b/src/ui/src/builder/settings/BuilderTemplateInput.vue
@@ -1,11 +1,9 @@
 <template>
 	<div class="BuilderTemplateInput">
 		<template v-if="!props.multiline">
-			<input
+			<WdsTextInput
 				ref="input"
-				class="templateInput"
-				type="text"
-				:value="props.value"
+				:model-value="props.value"
 				autocorrect="off"
 				autocomplete="off"
 				spellcheck="false"
@@ -30,19 +28,18 @@
 		</template>
 
 		<template v-if="props.multiline">
-			<textarea
+			<WdsTextareaInput
 				ref="input"
 				v-capture-tabs
-				class="templateInput"
 				:variant="props.variant"
-				:value="props.value"
+				:model-value="props.value"
 				autocorrect="off"
 				autocomplete="off"
 				spellcheck="false"
 				rows="3"
 				:placeholder="props.placeholder"
 				@input="handleInput"
-			></textarea>
+			/>
 		</template>
 
 		<div
@@ -68,8 +65,17 @@
 
 <script setup lang="ts">
 import Fuse from "fuse.js";
-import { PropType, inject, nextTick, ref, shallowRef } from "vue";
 import injectionKeys from "../../injectionKeys";
+import {
+	PropType,
+	inject,
+	nextTick,
+	ref,
+	shallowRef,
+	ComponentInstance,
+} from "vue";
+import WdsTextInput from "@/wds/WdsTextInput.vue";
+import WdsTextareaInput from "@/wds/WdsTextareaInput.vue";
 
 const emit = defineEmits(["input", "update:value"]);
 
@@ -97,7 +103,7 @@ const props = defineProps({
 
 const ss = inject(injectionKeys.core);
 const autocompleteOptions = shallowRef<{ text: string; type: string }[]>([]);
-const input = ref<HTMLInputElement | null>(null);
+const input = ref<ComponentInstance<typeof WdsTextInput> | null>(null);
 
 defineExpose({
 	focus: () => input.value?.focus(),
@@ -107,24 +113,23 @@ function _get(object: object, path: string[]) {
 	return path.reduce((acc, key) => acc?.[key], object);
 }
 
-const handleComplete = (selectedText) => {
+const handleComplete = (selectedText: string) => {
 	let newValue = input.value?.value ?? "";
-	const { selectionStart, selectionEnd } = input.value ?? {};
+	const { selectionStart, selectionEnd } = input.value?.getSelection() ?? {};
 	const text = newValue.slice(0, selectionStart);
 	const full = getPath(text);
 	if (full === null) return;
 	const keyword = full.at(-1);
 	const regexKeyword = keyword.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + "$"; // escape the keyword to handle properly on a regex
 	const replaced = text.replace(new RegExp(regexKeyword), selectedText);
-
 	newValue = replaced + newValue.slice(selectionEnd);
 	emit("input", { target: { value: newValue } });
 	emit("update:value", newValue);
 	autocompleteOptions.value = [];
 	input.value.focus();
 	nextTick(() => {
-		input.value.selectionEnd = replaced.length;
-		input.value.selectionStart = replaced.length;
+		input.value.setSelectionEnd(replaced.length);
+		input.value.setSelectionStart(replaced.length);
 	});
 };
 
@@ -160,7 +165,8 @@ const handleInput = (ev) => {
 };
 
 const showAutocomplete = () => {
-	const { selectionStart, selectionEnd, value: newValue } = input.value ?? {};
+	const { selectionStart, selectionEnd } = input.value?.getSelection() ?? {};
+	const newValue = input.value?.value;
 	const collapsed = selectionStart === selectionEnd;
 	if (!collapsed) {
 		autocompleteOptions.value = [];
diff --git a/src/ui/src/builder/settings/constants/builderFieldsCssTabs.ts b/src/ui/src/builder/settings/constants/builderFieldsCssTabs.ts
new file mode 100644
index 000000000..2e1f78b57
--- /dev/null
+++ b/src/ui/src/builder/settings/constants/builderFieldsCssTabs.ts
@@ -0,0 +1,20 @@
+import type { WdsTabOptions } from "@/wds/WdsTabs.vue";
+
+export type BuilderFieldCssMode = "pick" | "css" | "default";
+
+export const BUILDER_FIELD_CSS_TAB_OPTIONS = Object.freeze<
+	WdsTabOptions<BuilderFieldCssMode>[]
+>([
+	{
+		label: "Default",
+		value: "default",
+	},
+	{
+		label: "CSS",
+		value: "css",
+	},
+	{
+		label: "Pick",
+		value: "pick",
+	},
+]);
diff --git a/src/ui/src/builder/sharedStyles.css b/src/ui/src/builder/sharedStyles.css
index d4aff5ee0..5c76f9df6 100644
--- a/src/ui/src/builder/sharedStyles.css
+++ b/src/ui/src/builder/sharedStyles.css
@@ -1,26 +1,3 @@
-.BuilderApp {
-	--builderBackgroundColor: #ffffff;
-	--builderAccentColor: #5551ff;
-	--builderSuccessColor: #29cf00;
-	--builderErrorColor: #ff3d00;
-	--builderHeaderBackgroundColor: #353535;
-	--builderHeaderBackgroundHoleColor: #202020;
-	--builderPrimaryTextColor: rgba(0, 0, 0, 0.9);
-	--builderSecondaryTextColor: rgba(0, 0, 0, 0.6);
-	--builderAreaSeparatorColor: rgba(0, 0, 0, 0.2);
-	--builderSeparatorColor: rgba(0, 0, 0, 0.1);
-	--builderSubtleSeparatorColor: rgba(0, 0, 0, 0.05);
-	--builderIntenseSeparatorColor: rgba(0, 0, 0, 0.2);
-	--builderSelectedColor: rgba(210, 234, 244, 0.8);
-	--builderIntenseSelectedColor: #6985ff;
-	--builderSubtleHighlightColor: rgba(0, 0, 0, 0.05);
-	--builderSubtleHighlightColorSolid: #f2f2f2;
-	--builderDisabledColor: rgb(180, 180, 180);
-	--builderSidebarWidth: max(265px, 27vh);
-	--builderSettingsWidth: max(265px, 27vh);
-	--builderActionOngoingColor: rgba(0, 0, 0, 0.7);
-}
-
 h1,
 h2,
 h3 {
@@ -118,101 +95,3 @@ code {
 	background-color: var(--builderSubtleSeparatorColor);
 	padding: 2px;
 }
-
-.sectionTitle {
-	display: flex;
-	gap: 8px;
-	align-items: center;
-	font-size: 1rem;
-}
-
-.fieldWrapper {
-	position: relative;
-	width: 100%;
-	margin-top: 16px;
-}
-
-:is(.fieldWrapper, .fieldWrapperMain) > .name {
-	position: absolute;
-	top: 0;
-	left: 8px;
-	background: var(--builderBackgroundColor);
-	padding: 0 4px 4px 4px;
-	font-size: 0.7rem;
-	z-index: 1;
-}
-
-:is(.fieldWrapper, .fieldWrapperMain) .name .type {
-	color: var(--builderSecondaryTextColor);
-}
-
-:is(.fieldWrapper, .fieldWrapperMain) .content {
-	position: relative;
-	top: 6px;
-	margin-bottom: 14px;
-	width: 100%;
-	border-radius: 4px;
-	border: 1px solid var(--builderSeparatorColor);
-	font-size: 0.75rem;
-	background: var(--builderBackgroundColor);
-	outline: none;
-}
-
-:is(.fieldWrapper, .fieldWrapperMain) .content:focus-within {
-	border: 1px solid var(--builderPrimaryTextColor);
-}
-
-:is(.fieldWrapper, .fieldWrapperMain) .content textarea,
-:is(.fieldWrapper, .fieldWrapperMain) .content input {
-	border: 0;
-	outline: none;
-	width: 100%;
-}
-
-.fieldWrapper > .desc {
-	color: var(--builderSecondaryTextColor);
-	font-size: 0.7rem;
-}
-
-.chipStack {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	gap: 4px;
-}
-
-.chip {
-	font-size: 0.75rem;
-	border-radius: 16px;
-	padding: 8px 12px 8px 12px;
-	cursor: pointer;
-	outline: none;
-	background: var(--builderBackgroundColor);
-}
-
-.chip:focus,
-.chip.active:focus,
-.chip:hover,
-.chip.active:hover {
-	color: var(--builderBackgroundColor);
-	background: var(--builderActionOngoingColor);
-}
-
-.chip.active {
-	background: var(--builderSubtleSeparatorColor);
-}
-
-.countLabel {
-	background: var(--builderIntenseSelectedColor);
-	display: inline-flex;
-	color: var(--builderBackgroundColor);
-	align-items: center;
-	justify-content: center;
-	padding-left: 4px;
-	padding-right: 4px;
-	min-width: 20px;
-	height: 20px;
-	border-radius: 10px;
-	margin-left: 8px;
-	font-size: 0.7rem;
-}
diff --git a/src/ui/src/builder/sidebar/BuilderSidebarComponentTreeBranch.vue b/src/ui/src/builder/sidebar/BuilderSidebarComponentTreeBranch.vue
index a3e168119..75808ddfb 100644
--- a/src/ui/src/builder/sidebar/BuilderSidebarComponentTreeBranch.vue
+++ b/src/ui/src/builder/sidebar/BuilderSidebarComponentTreeBranch.vue
@@ -141,7 +141,7 @@ const name = computed(() => {
 		return component.value.content?.["element"];
 	}
 	if (type == "workflows_workflow") {
-		return component.value.content?.["key"] ?? "Workflow";
+		return component.value.content?.["key"] || "Workflow";
 	}
 	return def.value?.name ?? `Unknown (${component.value.type})`;
 });
diff --git a/src/ui/src/builder/useComponentActions.ts b/src/ui/src/builder/useComponentActions.ts
index c3c863d66..9ca27dc2e 100644
--- a/src/ui/src/builder/useComponentActions.ts
+++ b/src/ui/src/builder/useComponentActions.ts
@@ -765,7 +765,7 @@ export function useComponentActions(wf: Core, ssbm: BuilderManager) {
 		const component = wf.getComponentById(componentId);
 		if (!component) return;
 		const transactionId = `edit-${componentId}-out-${out.outId}-${out.toNodeId}`;
-		ssbm.openMutationTransaction(transactionId, `Edit out`, true);
+		ssbm.openMutationTransaction(transactionId, "Edit out", true);
 		ssbm.registerPreMutation(component);
 
 		component.outs = component.outs.filter(
@@ -789,7 +789,7 @@ export function useComponentActions(wf: Core, ssbm: BuilderManager) {
 		if (!component) return;
 
 		const transactionId = `change-${componentId}-coordinates`;
-		ssbm.openMutationTransaction(transactionId, `Change coordinates`, true);
+		ssbm.openMutationTransaction(transactionId, "Change coordinates", false);
 		ssbm.registerPreMutation(component);
 
 		component.x = Math.floor(x);
@@ -800,6 +800,30 @@ export function useComponentActions(wf: Core, ssbm: BuilderManager) {
 		wf.sendComponentUpdate();
 	}
 
+	/***
+	 * Change the coordinates of multiple components.
+	 */
+	function changeCoordinatesMultiple(
+		coordinates: Record<Component["id"], {x: number, y: number}>
+	) {
+		const transactionId = "change-multiple-coordinates";
+		ssbm.openMutationTransaction(transactionId, "Change coordinates", false);
+
+		const entries = Object.entries(coordinates); 
+		if (entries.length == 0) return;
+		entries.forEach(([componentId, {x, y}]) => {
+			const component = wf.getComponentById(componentId);
+			if (!component) return;
+			ssbm.registerPreMutation(component);
+			component.x = Math.floor(x);
+			component.y = Math.floor(y);
+			ssbm.registerPostMutation(component);
+		});
+
+		ssbm.closeMutationTransaction(transactionId);
+		wf.sendComponentUpdate();
+	}
+
 	/**
 	 * Set the value for a component's visibility.
 	 */
@@ -948,6 +972,7 @@ export function useComponentActions(wf: Core, ssbm: BuilderManager) {
 		addOut,
 		removeOut,
 		changeCoordinates,
+		changeCoordinatesMultiple,
 		setVisibleValue,
 		setBinding,
 		getUndoRedoSnapshot,
diff --git a/src/ui/src/components/core/base/BaseEmptiness.vue b/src/ui/src/components/core/base/BaseEmptiness.vue
index a833f0855..17dc8f5ba 100644
--- a/src/ui/src/components/core/base/BaseEmptiness.vue
+++ b/src/ui/src/components/core/base/BaseEmptiness.vue
@@ -31,8 +31,8 @@ const definition = computed(() =>
 @import "@/renderer/sharedStyles.css";
 
 .BaseEmptiness {
-	background: #e4e7ed;
-	color: #4f4f4f;
+	background: var(--wdsColorGray2);
+	color: var(--wdsColorGray5);
 	padding: 16px;
 	display: flex;
 	align-items: center;
@@ -46,7 +46,7 @@ const definition = computed(() =>
 }
 
 .title > h3 {
-	color: #4f4f4f;
+	color: var(--wdsColorGray5);
 }
 
 .message {
diff --git a/src/ui/src/components/core/content/CoreAnnotatedText.vue b/src/ui/src/components/core/content/CoreAnnotatedText.vue
index aefb891cb..b89a9bb03 100644
--- a/src/ui/src/components/core/content/CoreAnnotatedText.vue
+++ b/src/ui/src/components/core/content/CoreAnnotatedText.vue
@@ -33,6 +33,7 @@ import {
 	primaryTextColor,
 } from "@/renderer/sharedStyleFields";
 import SharedControlBar from "@/components/shared/SharedControlBar.vue";
+import { WdsColor } from "@/wds/tokens";
 export default {
 	writer: {
 		name: "Annotated text",
@@ -49,7 +50,7 @@ export default {
 				name: "Reference",
 				desc: "The colour to be used as reference for chroma and luminance, and as the starting point for hue rotation.",
 				type: FieldType.Color,
-				default: "#5551FF",
+				default: WdsColor.Blue5,
 				category: FieldCategory.Style,
 			},
 			seed: {
diff --git a/src/ui/src/components/core/content/CoreChatbot.vue b/src/ui/src/components/core/content/CoreChatbot.vue
index 70064df84..521bfa16c 100644
--- a/src/ui/src/components/core/content/CoreChatbot.vue
+++ b/src/ui/src/components/core/content/CoreChatbot.vue
@@ -110,6 +110,7 @@ import {
 import prettyBytes from "pretty-bytes";
 import WdsTextareaInput from "@/wds/WdsTextareaInput.vue";
 import WdsControl from "@/wds/WdsControl.vue";
+import { WdsColor } from "@/wds/tokens";
 
 const MAX_FILE_SIZE = 200 * 1024 * 1024;
 
@@ -241,21 +242,21 @@ export default {
 			},
 			userRoleColor: {
 				name: "User role",
-				default: "#F5F5F9",
+				default: WdsColor.Gray1,
 				type: FieldType.Color,
 				category: FieldCategory.Style,
 				applyStyleVariable: true,
 			},
 			avatarBackgroundColor: {
 				name: "Avatar",
-				default: "#2C2D30",
+				default: WdsColor.Gray6,
 				type: FieldType.Color,
 				category: FieldCategory.Style,
 				applyStyleVariable: true,
 			},
 			avatarTextColor: {
 				name: "Avatar text",
-				default: "#FFFFFF",
+				default: WdsColor.White,
 				type: FieldType.Color,
 				category: FieldCategory.Style,
 				applyStyleVariable: true,
@@ -267,11 +268,11 @@ export default {
 			separatorColor,
 			buttonColor: {
 				...buttonColor,
-				default: "#000000",
+				default: WdsColor.Black,
 			},
 			buttonTextColor: {
 				...buttonTextColor,
-				default: "#ffffff",
+				default: WdsColor.White,
 			},
 			cssClasses,
 		},
diff --git a/src/ui/src/components/core/content/CoreDataframe.vue b/src/ui/src/components/core/content/CoreDataframe.vue
index fa9470da4..0ea60d7ab 100644
--- a/src/ui/src/components/core/content/CoreDataframe.vue
+++ b/src/ui/src/components/core/content/CoreDataframe.vue
@@ -134,28 +134,36 @@ import {
 	UNNAMED_INDEX_COLUMN_PATTERN,
 } from "./CoreDataframe/constants";
 import WdsButton from "@/wds/WdsButton.vue";
+import { WdsColor } from "@/wds/tokens";
 
 const description = "A component to display Pandas DataFrames.";
 
 const dataFrameUpdateHandlerStub = `
 # Subscribe this event handler to the \`wf-dataframe-update\` event
+#
+# more on : https://dev.writer.com/framework/dataframe
 def on_record_change(state, payload):
-    state['mydf'].record_update(payload)`;
+    state['mydf'].record_update(payload) # should contain an EditableDataFrame instance`;
 
 const dataFrameAddHandlerStub = `
 # Subscribe this event handler to the \`wf-dataframe-add\` event
+#
+# more on : https://dev.writer.com/framework/dataframe
 def on_record_add(state, payload):
 	payload['record']['sales'] = 0 # default value inside the dataframe
-	state['mydf'].record_add(payload)`;
+	state['mydf'].record_add(payload) # should contain an EditableDataFrame instance`;
 
 const dataFrameActionHandlerStub = `
 # Subscribe this event handler to the \`wf-dataframe-action\` event
+#
+# more on : https://dev.writer.com/framework/dataframe
 def on_record_action(state, payload):
+	# state['mydf'] should contains an EditableDataFrame instance
 	record_index = payload['record_index']
 	if payload['action'] == 'remove':
-		state['mydf'].record_remove(payload)
+		state['mydf'].record_remove(payload) # should contain an EditableDataFrame instance
 	if payload['action'] == 'open':
-		state['record'] = state['df'].record(record_index) # dict representation of record`;
+		state['record'] = state['mydf'].record(record_index) # dict representation of record`;
 
 export default {
 	writer: {
@@ -272,7 +280,7 @@ export default {
 				name: "Background",
 				type: FieldType.Color,
 				category: FieldCategory.Style,
-				default: "#ffffff",
+				default: WdsColor.White,
 				applyStyleVariable: true,
 			},
 			fontStyle: {
@@ -696,6 +704,11 @@ onUnmounted(() => {
 	max-height: 90vh;
 }
 
+/* remove the background if the dataframe is being selected in builder mode */
+.CoreDataframe.selected .gridContainer {
+	background: unset;
+}
+
 .grid {
 	margin-bottom: -1px;
 	position: v-bind("isRowCountMassive ? 'sticky': 'unset'");
diff --git a/src/ui/src/components/core/content/CoreDataframeLegacy.vue b/src/ui/src/components/core/content/CoreDataframeLegacy.vue
index cddbe3073..26f1d34e3 100644
--- a/src/ui/src/components/core/content/CoreDataframeLegacy.vue
+++ b/src/ui/src/components/core/content/CoreDataframeLegacy.vue
@@ -125,6 +125,7 @@ import { onUnmounted } from "vue";
 import WdsTextInput from "@/wds/WdsTextInput.vue";
 import WdsControl from "@/wds/WdsControl.vue";
 import BaseMarkdown from "../base/BaseMarkdown.vue";
+import { WdsColor } from "@/wds/tokens";
 
 const description = "A component to display Pandas DataFrames.";
 const defaultDataframe = `data:application/vnd.apache.arrow.file;base64,QVJST1cxAAD/////iAMAABAAAAAAAAoADgAGAAUACAAKAAAAAAEEABAAAAAAAAoADAAAAAQACAAKAAAAlAIAAAQAAAABAAAADAAAAAgADAAEAAgACAAAAGwCAAAEAAAAXwIAAHsiaW5kZXhfY29sdW1ucyI6IFsiX19pbmRleF9sZXZlbF8wX18iXSwgImNvbHVtbl9pbmRleGVzIjogW3sibmFtZSI6IG51bGwsICJmaWVsZF9uYW1lIjogbnVsbCwgInBhbmRhc190eXBlIjogInVuaWNvZGUiLCAibnVtcHlfdHlwZSI6ICJvYmplY3QiLCAibWV0YWRhdGEiOiB7ImVuY29kaW5nIjogIlVURi04In19XSwgImNvbHVtbnMiOiBbeyJuYW1lIjogImNvbF9hIiwgImZpZWxkX25hbWUiOiAiY29sX2EiLCAicGFuZGFzX3R5cGUiOiAiaW50NjQiLCAibnVtcHlfdHlwZSI6ICJpbnQ2NCIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAiY29sX2IiLCAiZmllbGRfbmFtZSI6ICJjb2xfYiIsICJwYW5kYXNfdHlwZSI6ICJpbnQ2NCIsICJudW1weV90eXBlIjogImludDY0IiwgIm1ldGFkYXRhIjogbnVsbH0sIHsibmFtZSI6IG51bGwsICJmaWVsZF9uYW1lIjogIl9faW5kZXhfbGV2ZWxfMF9fIiwgInBhbmRhc190eXBlIjogImludDY0IiwgIm51bXB5X3R5cGUiOiAiaW50NjQiLCAibWV0YWRhdGEiOiBudWxsfV0sICJjcmVhdG9yIjogeyJsaWJyYXJ5IjogInB5YXJyb3ciLCAidmVyc2lvbiI6ICIxMi4wLjAifSwgInBhbmRhc192ZXJzaW9uIjogIjEuNS4zIn0ABgAAAHBhbmRhcwAAAwAAAIgAAABEAAAABAAAAJT///8AAAECEAAAACQAAAAEAAAAAAAAABEAAABfX2luZGV4X2xldmVsXzBfXwAAAJD///8AAAABQAAAAND///8AAAECEAAAABgAAAAEAAAAAAAAAAUAAABjb2xfYgAAAMD///8AAAABQAAAABAAFAAIAAYABwAMAAAAEAAQAAAAAAABAhAAAAAgAAAABAAAAAAAAAAFAAAAY29sX2EAAAAIAAwACAAHAAgAAAAAAAABQAAAAAAAAAD/////6AAAABQAAAAAAAAADAAWAAYABQAIAAwADAAAAAADBAAYAAAAMAAAAAAAAAAAAAoAGAAMAAQACAAKAAAAfAAAABAAAAACAAAAAAAAAAAAAAAGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAQAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAABAAAAAAAAAAAAAAAAMAAAACAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAIAAAAAAAAAAwAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAD/////AAAAABAAAAAMABQABgAIAAwAEAAMAAAAAAAEADwAAAAoAAAABAAAAAEAAACYAwAAAAAAAPAAAAAAAAAAMAAAAAAAAAAAAAAAAAAAAAAACgAMAAAABAAIAAoAAACUAgAABAAAAAEAAAAMAAAACAAMAAQACAAIAAAAbAIAAAQAAABfAgAAeyJpbmRleF9jb2x1bW5zIjogWyJfX2luZGV4X2xldmVsXzBfXyJdLCAiY29sdW1uX2luZGV4ZXMiOiBbeyJuYW1lIjogbnVsbCwgImZpZWxkX25hbWUiOiBudWxsLCAicGFuZGFzX3R5cGUiOiAidW5pY29kZSIsICJudW1weV90eXBlIjogIm9iamVjdCIsICJtZXRhZGF0YSI6IHsiZW5jb2RpbmciOiAiVVRGLTgifX1dLCAiY29sdW1ucyI6IFt7Im5hbWUiOiAiY29sX2EiLCAiZmllbGRfbmFtZSI6ICJjb2xfYSIsICJwYW5kYXNfdHlwZSI6ICJpbnQ2NCIsICJudW1weV90eXBlIjogImludDY0IiwgIm1ldGFkYXRhIjogbnVsbH0sIHsibmFtZSI6ICJjb2xfYiIsICJmaWVsZF9uYW1lIjogImNvbF9iIiwgInBhbmRhc190eXBlIjogImludDY0IiwgIm51bXB5X3R5cGUiOiAiaW50NjQiLCAibWV0YWRhdGEiOiBudWxsfSwgeyJuYW1lIjogbnVsbCwgImZpZWxkX25hbWUiOiAiX19pbmRleF9sZXZlbF8wX18iLCAicGFuZGFzX3R5cGUiOiAiaW50NjQiLCAibnVtcHlfdHlwZSI6ICJpbnQ2NCIsICJtZXRhZGF0YSI6IG51bGx9XSwgImNyZWF0b3IiOiB7ImxpYnJhcnkiOiAicHlhcnJvdyIsICJ2ZXJzaW9uIjogIjEyLjAuMCJ9LCAicGFuZGFzX3ZlcnNpb24iOiAiMS41LjMifQAGAAAAcGFuZGFzAAADAAAAiAAAAEQAAAAEAAAAlP///wAAAQIQAAAAJAAAAAQAAAAAAAAAEQAAAF9faW5kZXhfbGV2ZWxfMF9fAAAAkP///wAAAAFAAAAA0P///wAAAQIQAAAAGAAAAAQAAAAAAAAABQAAAGNvbF9iAAAAwP///wAAAAFAAAAAEAAUAAgABgAHAAwAAAAQABAAAAAAAAECEAAAACAAAAAEAAAAAAAAAAUAAABjb2xfYQAAAAgADAAIAAcACAAAAAAAAAFAAAAAsAMAAEFSUk9XMQ==`;
@@ -205,7 +206,7 @@ export default {
 				name: "Background",
 				type: FieldType.Color,
 				category: FieldCategory.Style,
-				default: "#ffffff",
+				default: WdsColor.White,
 				applyStyleVariable: true,
 			},
 			fontStyle: {
@@ -573,6 +574,11 @@ onUnmounted(() => {
 	max-height: 90vh;
 }
 
+/* remove the background if the dataframe is being selected in builder mode */
+.CoreDataframe.selected .gridContainer {
+	background: unset;
+}
+
 .grid {
 	margin-bottom: -1px;
 	position: v-bind("isRowCountMassive ? 'sticky': 'unset'");
diff --git a/src/ui/src/components/core/content/CoreMessage.vue b/src/ui/src/components/core/content/CoreMessage.vue
index 640a9e3eb..8a2e600cf 100644
--- a/src/ui/src/components/core/content/CoreMessage.vue
+++ b/src/ui/src/components/core/content/CoreMessage.vue
@@ -31,6 +31,7 @@ else:
 <script lang="ts">
 import { cssClasses, primaryTextColor } from "@/renderer/sharedStyleFields";
 import { FieldCategory, FieldType } from "@/writerTypes";
+import { WdsColor } from "@/wds/tokens";
 
 const description =
 	"A component that displays a message in various styles, including success, error, warning, and informational.";
@@ -48,13 +49,13 @@ export default {
 			},
 			successColor: {
 				name: "Success",
-				default: "#A9F9E1",
+				default: WdsColor.Green3,
 				type: FieldType.Color,
 				category: FieldCategory.Style,
 			},
 			errorColor: {
 				name: "Error",
-				default: "#FFCFC2",
+				default: WdsColor.Orange2,
 				type: FieldType.Color,
 				category: FieldCategory.Style,
 			},
@@ -66,13 +67,13 @@ export default {
 			},
 			infoColor: {
 				name: "Info",
-				default: "#E4E9FF",
+				default: WdsColor.Blue2,
 				type: FieldType.Color,
 				category: FieldCategory.Style,
 			},
 			loadingColor: {
 				name: "Loading",
-				default: "#E4E9FF",
+				default: WdsColor.Blue2,
 				type: FieldType.Color,
 				category: FieldCategory.Style,
 			},
diff --git a/src/ui/src/components/core/content/CoreMetric.vue b/src/ui/src/components/core/content/CoreMetric.vue
index 3913dd2fa..61e34cb6a 100644
--- a/src/ui/src/components/core/content/CoreMetric.vue
+++ b/src/ui/src/components/core/content/CoreMetric.vue
@@ -16,6 +16,7 @@ import {
 	primaryTextColor,
 	secondaryTextColor,
 } from "@/renderer/sharedStyleFields";
+import { WdsColor } from "@/wds/tokens";
 
 const description =
 	"A component that prominently displays a metric value and associated information.";
@@ -51,7 +52,7 @@ export default {
 			secondaryTextColor,
 			positiveColor: {
 				name: "Positive",
-				default: "#a9f9e1",
+				default: WdsColor.Green3,
 				type: FieldType.Color,
 				category: FieldCategory.Style,
 			},
@@ -63,7 +64,7 @@ export default {
 			},
 			negativeColor: {
 				name: "Negative",
-				default: "#ffcfc2",
+				default: WdsColor.Orange2,
 				type: FieldType.Color,
 				category: FieldCategory.Style,
 			},
diff --git a/src/ui/src/components/core/content/CorePlotlyGraph.vue b/src/ui/src/components/core/content/CorePlotlyGraph.vue
index b6d8d0089..31557f73e 100644
--- a/src/ui/src/components/core/content/CorePlotlyGraph.vue
+++ b/src/ui/src/components/core/content/CorePlotlyGraph.vue
@@ -12,6 +12,7 @@ For example, implement cross-filtering.
 <script lang="ts">
 import { FieldType } from "@/writerTypes";
 import { cssClasses } from "@/renderer/sharedStyleFields";
+import { WdsColor } from "@/wds/tokens";
 
 const description = "A component that displays Plotly graphs.";
 
@@ -64,17 +65,22 @@ const fields = inject(injectionKeys.evaluatedFields);
 const spec = computed(() => fields.spec.value);
 
 const defaultLayout = {
-	paper_bgcolor: "#ffffff",
-	plot_bgcolor: "#f5f5f9",
-	colorway: ["#6985FF", "#A95EF8", "#F86", "#3BDCAB"],
+	paper_bgcolor: WdsColor.White,
+	plot_bgcolor: WdsColor.Gray1,
+	colorway: [
+		WdsColor.Blue4,
+		WdsColor.Blue4,
+		WdsColor.Orange4,
+		WdsColor.Green5,
+	],
 	font: {
 		family: "Poppins, sans-serif",
 		size: 12,
-		color: "#000000",
+		color: WdsColor.Black,
 	},
 	hoverlabel: {
-		color: "#ffffff",
-		bgcolor: "#000000",
+		color: WdsColor.White,
+		bgcolor: WdsColor.Black,
 	},
 };
 
diff --git a/src/ui/src/components/core/content/CoreProgressBar.vue b/src/ui/src/components/core/content/CoreProgressBar.vue
index b3ac8b1e1..a150ebcf3 100644
--- a/src/ui/src/components/core/content/CoreProgressBar.vue
+++ b/src/ui/src/components/core/content/CoreProgressBar.vue
@@ -45,13 +45,13 @@ import {
 } from "@/renderer/sharedStyleFields";
 
 const clickHandlerStub = `
-def handle_avatar_click():
-	print("The avatar was clicked")`;
+def handle_progress_bar_click():
+	print("The progress bar was clicked")`;
 
 const description = "A component to display a progression.";
 
 const definition: WriterComponentDefinition = {
-	name: "ProgressBar",
+	name: "Progress Bar",
 	description,
 	category: "Content",
 	allowedChildrenTypes: ["*"],
@@ -67,7 +67,7 @@ const definition: WriterComponentDefinition = {
 			default: "0.25",
 		},
 		min: {
-			name: "Mininimum value",
+			name: "Minimum value",
 			type: FieldType.Number,
 			default: "0",
 		},
@@ -93,7 +93,7 @@ const definition: WriterComponentDefinition = {
 	},
 	events: {
 		"wf-click": {
-			desc: "Triggered when the avatar is clicked.",
+			desc: "Triggered when the progress bar is clicked.",
 			stub: clickHandlerStub.trim(),
 		},
 	},
diff --git a/src/ui/src/components/core/content/CoreTags.vue b/src/ui/src/components/core/content/CoreTags.vue
index b09502ac2..938b57080 100644
--- a/src/ui/src/components/core/content/CoreTags.vue
+++ b/src/ui/src/components/core/content/CoreTags.vue
@@ -26,6 +26,7 @@
 <script lang="ts">
 import { FieldCategory, FieldType } from "@/writerTypes";
 import { cssClasses, primaryTextColor } from "@/renderer/sharedStyleFields";
+import { WdsColor } from "@/wds/tokens";
 
 const clickHandlerStub = `
 def handle_tag_click(state, payload):
@@ -49,7 +50,7 @@ export default {
 				name: "Reference",
 				desc: "The colour to be used as reference for chroma and luminance, and as the starting point for hue rotation.",
 				type: FieldType.Color,
-				default: "#5551FF",
+				default: WdsColor.Blue5,
 				category: FieldCategory.Style,
 			},
 			seed: {
diff --git a/src/ui/src/components/core/input/CoreColorInput.vue b/src/ui/src/components/core/input/CoreColorInput.vue
index 1b5785591..5bfe82af4 100644
--- a/src/ui/src/components/core/input/CoreColorInput.vue
+++ b/src/ui/src/components/core/input/CoreColorInput.vue
@@ -19,6 +19,7 @@ import { cssClasses } from "@/renderer/sharedStyleFields";
 import { FieldType, WriterComponentDefinition } from "@/writerTypes";
 import BaseInputColor from "../base/BaseInputColor.vue";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
+import { WdsColor } from "@/wds/tokens";
 
 const description =
 	"A user input component that allows users to select a color using a color picker interface.";
@@ -45,11 +46,11 @@ const definition = {
 			desc: "List of predefined colors",
 			type: FieldType.Object,
 			init: JSON.stringify([
-				"#5551ff",
-				"#3be19b",
-				"#ff3d00",
-				"#333333",
-				"#0094d1",
+				WdsColor.Blue5,
+				WdsColor.Green5,
+				WdsColor.Orange5,
+				WdsColor.Gray6,
+				WdsColor.Blue4,
 			]),
 		},
 		cssClasses,
diff --git a/src/ui/src/components/core/input/CoreMultiselectInput.vue b/src/ui/src/components/core/input/CoreMultiselectInput.vue
index c5195b181..d8826d452 100644
--- a/src/ui/src/components/core/input/CoreMultiselectInput.vue
+++ b/src/ui/src/components/core/input/CoreMultiselectInput.vue
@@ -30,6 +30,7 @@ import {
 } from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import { ComponentPublicInstance } from "vue";
+import { WdsColor } from "@/wds/tokens";
 
 const description =
 	"A user input component that allows users to select multiple values from a searchable list of options.";
@@ -76,7 +77,7 @@ export default {
 			chipTextColor: {
 				name: "Chip text",
 				type: FieldType.Color,
-				default: "#ffffff",
+				default: WdsColor.White,
 				desc: "The colour of the text in the chips.",
 				category: FieldCategory.Style,
 				applyStyleVariable: true,
diff --git a/src/ui/src/components/core/input/CoreSelectInput.vue b/src/ui/src/components/core/input/CoreSelectInput.vue
index a19d78759..81c3410fd 100644
--- a/src/ui/src/components/core/input/CoreSelectInput.vue
+++ b/src/ui/src/components/core/input/CoreSelectInput.vue
@@ -30,6 +30,7 @@ import {
 } from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import { ComponentPublicInstance } from "vue";
+import { WdsColor } from "@/wds/tokens";
 
 const description =
 	"A user input component that allows users to select a single value from a searchable list of options.";
@@ -73,7 +74,7 @@ export default {
 			chipTextColor: {
 				name: "Chip text",
 				type: FieldType.Color,
-				default: "#ffffff",
+				default: WdsColor.White,
 				desc: "The color of the text in the chips.",
 				category: FieldCategory.Style,
 				applyStyleVariable: true,
diff --git a/src/ui/src/components/core/other/CoreTimer.vue b/src/ui/src/components/core/other/CoreTimer.vue
index abc82e443..316f24bd3 100644
--- a/src/ui/src/components/core/other/CoreTimer.vue
+++ b/src/ui/src/components/core/other/CoreTimer.vue
@@ -94,7 +94,7 @@ watch(isTickHandlerSet, async (newIsTickHandlerSet) => {
 });
 
 let animationTriggeredTime: number = 0;
-let activeTimerId: number = null;
+let activeTimerId: ReturnType<typeof setTimeout> = null;
 
 function clearActiveTimer() {
 	clearTimeout(activeTimerId);
@@ -134,6 +134,7 @@ onMounted(() => {
 <style scoped>
 .CoreTimer {
 	width: 12px;
+	min-width: 12px;
 	height: 12px;
 	background: var(--accentColor);
 	border-radius: 50%;
diff --git a/src/ui/src/components/custom/BubbleMessage.vue b/src/ui/src/components/custom/BubbleMessage.vue
index 363f7e1f3..12dd6cec2 100644
--- a/src/ui/src/components/custom/BubbleMessage.vue
+++ b/src/ui/src/components/custom/BubbleMessage.vue
@@ -56,12 +56,12 @@ const fields = inject(injectionKeys.evaluatedFields);
 .triangle {
 	flex: 0 0 auto;
 	border-left: 12px solid white;
-	border-top: 12px solid #f0f0f0;
+	border-top: 12px solid var(--wdsColorGray1);
 }
 
 .message {
 	flex: 1 0 auto;
-	background: #f0f0f0;
+	background: var(--wdsColorGray1);
 	border-radius: 0 12px 12px 12px;
 	padding: 16px;
 }
diff --git a/src/ui/src/components/workflows/WorkflowsWorkflow.vue b/src/ui/src/components/workflows/WorkflowsWorkflow.vue
index 8df276866..8e610f219 100644
--- a/src/ui/src/components/workflows/WorkflowsWorkflow.vue
+++ b/src/ui/src/components/workflows/WorkflowsWorkflow.vue
@@ -37,8 +37,8 @@
 				<component
 					:is="renderProxiedComponent(node.id, 0)"
 					:style="{
-						top: `${node.y - renderOffset.y}px`,
-						left: `${node.x - renderOffset.x}px`,
+						top: `${(temporaryNodeCoordinates?.[node.id]?.y ?? node.y) - renderOffset.y}px`,
+						left: `${(temporaryNodeCoordinates?.[node.id]?.x ?? node.x) - renderOffset.x}px`,
 						'border-color':
 							activeConnection?.liveArrow?.toNodeId == node.id
 								? activeConnection?.liveArrow?.color
@@ -72,6 +72,7 @@
 			:render-offset="renderOffset"
 			:zoom-level="zoomLevel"
 			class="navigator"
+			@auto-arrange="handleAutoArrange"
 			@change-render-offset="handleChangeRenderOffset"
 			@change-zoom-level="handleChangeZoomLevel"
 			@reset-zoom="resetZoom"
@@ -154,13 +155,24 @@ const isRunning = ref(false);
 const selectedArrow = ref(null);
 const zoomLevel = ref(ZOOM_SETTINGS.initialLevel);
 const arrowRefresherObserver = new MutationObserver(refreshArrows);
+const temporaryNodeCoordinates = ref<
+	Record<Component["id"], { x: number; y: number }>
+>({});
+
+const AUTOARRANGE_ROW_GAP_PX = 96;
+const AUTOARRANGE_COLUMN_GAP_PX = 128;
 
 const nodes = computed(() =>
 	wf.getComponents(workflowComponentId, { sortedByPosition: true }),
 );
 
-const { createAndInsertComponent, addOut, removeOut, changeCoordinates } =
-	useComponentActions(wf, wfbm);
+const {
+	createAndInsertComponent,
+	addOut,
+	removeOut,
+	changeCoordinates,
+	changeCoordinatesMultiple,
+} = useComponentActions(wf, wfbm);
 const { getComponentInfoFromDrag } = useDragDropComponent(wf);
 
 const activeConnection: Ref<{
@@ -214,6 +226,101 @@ function handleClick() {
 	selectedArrow.value = null;
 }
 
+function organizeNodesInColumns() {
+	const columns: Map<number, Set<Component>> = new Map();
+
+	function scan(node: Component, layer: number) {
+		columns.forEach((column) => {
+			if (column.has(node)) {
+				column.delete(node);
+			}
+		});
+		if (!columns.has(layer)) {
+			columns.set(layer, new Set());
+		}
+		const column = columns.get(layer);
+		column.add(node);
+		node.outs?.forEach((out) => {
+			const outNode = wf.getComponentById(out.toNodeId);
+			scan(outNode, layer + 1);
+		});
+	}
+
+	const dependencies: Map<Component["id"], Set<Component["id"]>> = new Map();
+
+	nodes.value.forEach((node) => {
+		node.outs?.forEach((outNode) => {
+			if (!dependencies.has(outNode.toNodeId)) {
+				dependencies.set(outNode.toNodeId, new Set());
+			}
+			dependencies.get(outNode.toNodeId).add(node.id);
+		});
+	});
+
+	nodes.value
+		.filter((node) => !dependencies.has(node.id))
+		.forEach((startNode) => {
+			scan(startNode, 0);
+		});
+
+	return columns;
+}
+
+function calculateAutoArrangeDimensions(columns: Map<number, Set<Component>>) {
+	const columnDimensions: Map<number, { height: number; width: number }> =
+		new Map();
+	const nodeDimensions: Map<Component["id"], { height: number }> = new Map();
+	columns.forEach((nodes, layer) => {
+		let height = 0;
+		let width = 0;
+		nodes.forEach((node) => {
+			const nodeEl = nodeContainerEl.value.querySelector(
+				`[data-writer-id="${node.id}"]`,
+			);
+			if (!nodeEl) return;
+			const nodeBCR = nodeEl.getBoundingClientRect();
+			nodeDimensions.set(node.id, {
+				height: nodeBCR.height * (1 / zoomLevel.value),
+			});
+			height +=
+				nodeBCR.height * (1 / zoomLevel.value) + AUTOARRANGE_ROW_GAP_PX;
+			width = Math.max(width, nodeBCR.width * (1 / zoomLevel.value));
+		});
+		columnDimensions.set(layer, {
+			height: height - AUTOARRANGE_ROW_GAP_PX,
+			width,
+		});
+	});
+	return { columnDimensions, nodeDimensions };
+}
+
+function handleAutoArrange() {
+	const columns = organizeNodesInColumns();
+	const { columnDimensions, nodeDimensions } =
+		calculateAutoArrangeDimensions(columns);
+	const maxColumnHeight = Math.max(
+		...Array.from(columnDimensions.values()).map(
+			(dimensions) => dimensions.height,
+		),
+	);
+
+	const coordinates = {};
+	let x = AUTOARRANGE_COLUMN_GAP_PX;
+	for (let i = 0; i < columns.size; i++) {
+		const nodes = Array.from(columns.get(i)).sort((a, b) =>
+			a.y > b.y ? 1 : -1,
+		);
+		const { width, height } = columnDimensions.get(i);
+		let y = (maxColumnHeight - height) / 2 + AUTOARRANGE_ROW_GAP_PX;
+		nodes.forEach((node) => {
+			coordinates[node.id] = { x, y };
+			y += nodeDimensions.get(node.id).height + AUTOARRANGE_ROW_GAP_PX;
+		});
+		x += width + AUTOARRANGE_COLUMN_GAP_PX;
+	}
+	changeCoordinatesMultiple(coordinates);
+}
+
 async function handleRun() {
 	if (isRunning.value) return;
 	isRunning.value = true;
@@ -376,26 +483,27 @@ function clearActiveOperations() {
 	activeNodeMove.value = null;
 }
 
+function saveNodeMove() {
+	const { nodeId } = activeNodeMove.value;
+	const tempXY = temporaryNodeCoordinates.value?.[nodeId];
+	if (!tempXY) return;
+	const { x, y } = tempXY;
+	changeCoordinates(nodeId, x, y);
+	temporaryNodeCoordinates.value[nodeId] = null;
+}
+
 function moveNode(ev: MouseEvent) {
 	const { nodeId, offset } = activeNodeMove.value;
 	activeNodeMove.value.isPerfected = true;
-	const component = wf.getComponentById(nodeId);
 	const { x, y } = getAdjustedCoordinates(ev);
 
 	const newX = Math.floor(x - offset.x);
 	const newY = Math.floor(y - offset.y);
 
-	if (component.x == newX && component.y == newY) return;
-
-	component.x = newX;
-	component.y = newY;
-
-	setTimeout(() => {
-		// Debouncing
-		if (component.x !== newX) return;
-		if (component.y !== newY) return;
-		changeCoordinates(component.id, newX, newY);
-	}, 200);
+	temporaryNodeCoordinates.value[nodeId] = {
+		x: newX,
+		y: newY,
+	};
 }
 
 function moveCanvas(ev: MouseEvent) {
@@ -444,6 +552,9 @@ function handleMousedown(ev: MouseEvent) {
 }
 
 async function handleMouseup(ev: MouseEvent) {
+	if (activeNodeMove.value) {
+		saveNodeMove();
+	}
 	if (activeConnection.value === null) {
 		return;
 	}
diff --git a/src/ui/src/components/workflows/abstract/WorkflowsNode.vue b/src/ui/src/components/workflows/abstract/WorkflowsNode.vue
index d8258abf8..d2e6f1163 100644
--- a/src/ui/src/components/workflows/abstract/WorkflowsNode.vue
+++ b/src/ui/src/components/workflows/abstract/WorkflowsNode.vue
@@ -188,12 +188,12 @@ watch(isEngaged, () => {
 	border-radius: 8px;
 	width: 240px;
 	position: absolute;
-	box-shadow: 0px 2px 0px 0px #f3f3f3;
+	box-shadow: var(--wdsShadowBox);
 	user-select: none;
 }
 
 .WorkflowsNode:hover {
-	border: 2px solid #e4e9ff;
+	border: 2px solid var(--wdsColorBlue2);
 }
 
 .title {
@@ -242,7 +242,7 @@ watch(isEngaged, () => {
 	font-weight: 400;
 	/* letter-spacing: 1.3px; */
 	/* text-transform: uppercase; */
-	color: #4f4f4f;
+	color: var(--wdsColorGray5);
 	font-feature-settings:
 		"liga" off,
 		"clig" off;
@@ -258,19 +258,19 @@ watch(isEngaged, () => {
 }
 
 .output .ball.success {
-	background: #3bdcab;
+	background: var(--wdsColorGreen5);
 }
 
 .output .ball.error {
-	background: #ff643c;
+	background: var(--wdsColorOrange5);
 }
 
 .output .ball.dynamic {
-	background: #a95ef8;
+	background: var(--wdsColorPurple4);
 }
 
 .WorkflowsNode.selected.component {
-	border: 2px solid #6985ff;
+	border: 2px solid var(--wdsColorBlue4);
 	background: var(--builderBackgroundColor);
 }
 </style>
diff --git a/src/ui/src/components/workflows/base/WorkflowMiniMap.vue b/src/ui/src/components/workflows/base/WorkflowMiniMap.vue
index bfc76612b..5a11d3b9d 100644
--- a/src/ui/src/components/workflows/base/WorkflowMiniMap.vue
+++ b/src/ui/src/components/workflows/base/WorkflowMiniMap.vue
@@ -58,7 +58,7 @@ const miniMap = ref({
 });
 
 const selector = ref({
-	width: 230,
+	width: 260,
 	height: 1,
 	top: 0,
 	left: 0,
@@ -120,7 +120,7 @@ function render() {
 	});
 
 	miniMap.value = {
-		width: 230,
+		width: 260,
 		height:
 			((nodeContainerBCR.height / nodeContainerBCR.width) *
 				nodeContainerBCR.width) /
@@ -232,7 +232,7 @@ onUnmounted(() => {
 }
 
 .node.selected {
-	background: #6985ff;
+	background: var(--wdsColorBlue4);
 }
 
 .selectedArea {
@@ -248,7 +248,7 @@ onUnmounted(() => {
 	position: absolute;
 	top: 0px;
 	left: 0px;
-	border: 1px solid #6985ff;
+	border: 1px solid var(--wdsColorBlue4);
 	border-radius: 4px;
 	pointer-events: none;
 	display: v-bind("selector.isDisplayed ? '' : 'none'");
diff --git a/src/ui/src/components/workflows/base/WorkflowNavigator.vue b/src/ui/src/components/workflows/base/WorkflowNavigator.vue
index 55c4694a2..aee803c7d 100644
--- a/src/ui/src/components/workflows/base/WorkflowNavigator.vue
+++ b/src/ui/src/components/workflows/base/WorkflowNavigator.vue
@@ -14,6 +14,17 @@
 			@change-render-offset="handleRenderOffsetChange"
 		></WorkflowMiniMap>
 		<div class="bar">
+			<div class="autoArranger">
+				<WdsButton
+					variant="neutral"
+					size="smallIcon"
+					data-writer-tooltip="Auto arrange blocks"
+					data-writer-tooltip-placement="left"
+					@click="handleAutoArrange"
+				>
+					<i class="material-symbols-outlined">apps</i>
+				</WdsButton>
+			</div>
 			<div class="zoomer">
 				<WdsButton
 					variant="neutral"
@@ -99,6 +110,7 @@ const emit = defineEmits([
 	"changeRenderOffset",
 	"changeZoomLevel",
 	"resetZoom",
+	"autoArrange",
 ]);
 const isMiniMapShown = ref(true);
 const zoomLevelAsText = ref<string>(
@@ -113,6 +125,10 @@ function toggleMiniMap() {
 	isMiniMapShown.value = !isMiniMapShown.value;
 }
 
+function handleAutoArrange(ev: MouseEvent) {
+	emit("autoArrange");
+}
+
 function handleRenderOffsetChange(offset: typeof props.renderOffset) {
 	emit("changeRenderOffset", offset);
 }
@@ -190,7 +206,7 @@ onUnmounted(() => {
 	overflow: hidden;
 	color: var(--builderSecondaryTextColor);
 	border: 1px solid var(--builderSeparatorColor);
-	width: 230px;
+	width: 260px;
 }
 
 .bar {
@@ -198,12 +214,23 @@ onUnmounted(() => {
 	background: var(--builderBackgroundColor);
 }
 
+.autoArranger {
+	min-height: 36px;
+	min-width: 40px;
+	flex: 0 0 40px;
+	display: flex;
+	border-right: 1px solid var(--builderSeparatorColor);
+	align-items: center;
+	justify-content: center;
+}
+
 .zoomer {
 	flex: 1 0 auto;
 	display: flex;
 	padding: 4px;
 	gap: 4px;
 	align-items: center;
+	justify-content: center;
 }
 
 .zoomer .zoomLevelInput {
diff --git a/src/ui/src/core/index.ts b/src/ui/src/core/index.ts
index 8368d99ea..7a1e33f70 100644
--- a/src/ui/src/core/index.ts
+++ b/src/ui/src/core/index.ts
@@ -333,6 +333,35 @@ export function generateCore() {
 		sendFrontendMessage("event", messagePayload, callback, true);
 	}
 
+	/**
+	 * Sends a message to be hashed in the backend using the relevant keys.
+	 * Due to security reasons, it works only in edit mode.
+	 * 
+	 * @param message Messaged to be hashed
+	 * @returns The hashed message
+	 */
+	async function hashMessage(message: string):Promise<string> {
+		return new Promise((resolve, reject) => {
+			const messageCallback = (r: {
+				ok: boolean;
+				payload?: Record<string, any>;
+			}) => {
+				if (!r.ok) {
+					reject("Couldn't connect to the server.");
+					return;
+				}
+				resolve(r.payload?.message);
+			};
+
+			sendFrontendMessage(
+				"hashRequest",
+				{ message },
+				messageCallback,
+			);
+		});
+
+	}
+
 	async function sendCodeSaveRequest(newCode: string): Promise<void> {
 		const messageData = {
 			code: newCode,
@@ -572,6 +601,7 @@ export function generateCore() {
 		addMailSubscription,
 		init,
 		forwardEvent,
+		hashMessage,
 		runCode: readonly(runCode),
 		sendCodeSaveRequest,
 		sendCodeUpdate,
diff --git a/src/ui/src/renderer/ComponentRenderer.vue b/src/ui/src/renderer/ComponentRenderer.vue
index 7bc2b0e8a..0feb6cd02 100644
--- a/src/ui/src/renderer/ComponentRenderer.vue
+++ b/src/ui/src/renderer/ComponentRenderer.vue
@@ -41,6 +41,7 @@ import {
 	changeRouteVarsInHash,
 	serializeParsedHash,
 } from "@/core/navigation";
+import { WDS_CSS_PROPERTIES } from "@/wds/tokens";
 
 const wf = inject(injectionKeys.core);
 const wfbm = inject(injectionKeys.builderManager);
@@ -59,6 +60,7 @@ const coreRootFields = templateEvaluator.getEvaluatedFields([
 
 const rootStyle = computed(() => {
 	return {
+		...WDS_CSS_PROPERTIES,
 		"--accentColor": coreRootFields.accentColor?.value,
 		"--emptinessColor": coreRootFields.emptinessColor?.value,
 		"--containerBackgroundColor":
@@ -239,14 +241,14 @@ onMounted(() => {
 @import "./sharedStyles.css";
 
 .ComponentRenderer {
-	--accentColor: #5551ff;
-	--buttonColor: #5551ff;
-	--emptinessColor: #ffffff;
-	--separatorColor: #e4e7ed;
-	--primaryTextColor: #000000;
-	--buttonTextColor: #ffffff;
-	--secondaryTextColor: #828282;
-	--containerBackgroundColor: #ffffff;
+	--accentColor: var(--wdsColorBlue5);
+	--buttonColor: var(--wdsColorBlue5);
+	--emptinessColor: var(--wdsColorWhite);
+	--separatorColor: var(--wdsColorGray2);
+	--primaryTextColor: var(--wdsColorBlack);
+	--buttonTextColor: var(--wdsColorWhite);
+	--secondaryTextColor: var(--wdsColorGray4);
+	--containerBackgroundColor: var(--wdsColorWhite);
 	--containerShadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.05);
 	width: 100%;
 	outline: none;
diff --git a/src/ui/src/renderer/RendererNotifications.vue b/src/ui/src/renderer/RendererNotifications.vue
index 084d104bd..82fe2d1a1 100644
--- a/src/ui/src/renderer/RendererNotifications.vue
+++ b/src/ui/src/renderer/RendererNotifications.vue
@@ -103,7 +103,7 @@ const clearAll = () => {
 	max-width: 70ch;
 	width: 40vw;
 	z-index: 3;
-	--buttonColor: #5551ff;
+	--buttonColor: var(--wdsColorBlue5);
 }
 
 .balloonFlash {
diff --git a/src/ui/src/wds/WdsButton.vue b/src/ui/src/wds/WdsButton.vue
index c665c24d7..c75d20aea 100644
--- a/src/ui/src/wds/WdsButton.vue
+++ b/src/ui/src/wds/WdsButton.vue
@@ -66,62 +66,62 @@ const className = computed(() => [
 	background: var(--intensifiedButtonColor);
 }
 .WdsButton--primary:disabled {
-	border-color: #4a46da;
-	background-color: #4a46da;
+	border-color: var(--wdsColorBlue6);
+	background-color: var(--wdsColorBlue6);
 }
 
 /* VARIANTS -- secondary */
 
 .WdsButton--secondary {
 	color: var(--buttonTextColor);
-	background: #000000;
-	border-color: #000000;
+	background: var(--wdsColorBlack);
+	border-color: var(--wdsColorBlack);
 }
 
 .WdsButton--secondary:hover,
 .WdsButton--secondary:focus {
-	border-color: #333333;
-	background: #333333;
+	border-color: var(--wdsColorGray6);
+	background: var(--wdsColorGray6);
 }
 .WdsButton--secondary:disabled {
-	border-color: #333333;
-	background: #333333;
+	border-color: var(--wdsColorGray6);
+	background: var(--wdsColorGray6);
 	opacity: 40%;
 }
 
 /* VARIANTS -- tertiary */
 
 .WdsButton--tertiary {
-	color: #000000;
-	background: #ffffff;
-	border-color: #e4e7ed;
+	color: var(--wdsColorBlack);
+	background: var(--wdsColorWhite);
+	border-color: var(--wdsColorGray2);
 }
 
 .WdsButton--tertiary:hover,
 .WdsButton--tertiary:focus {
-	color: #828282;
+	color: var(--wdsColorGray4);
 }
 .WdsButton--tertiary:disabled {
-	color: #828282;
+	color: var(--wdsColorGray4);
 	opacity: 50%;
 }
 
 /* VARIANTS -- special */
 
 .WdsButton--special {
-	color: #5551ff;
-	background: #e4e9ff;
-	border-color: #e4e9ff;
+	color: var(--wdsColorBlue5);
+	background: var(--wdsColorBlue2);
+	border-color: var(--wdsColorBlue2);
 }
 
 .WdsButton--special:hover,
 .WdsButton--special:focus {
-	border-color: #bfcbff;
-	background: #bfcbff;
+	border-color: var(--wdsColorBlue3);
+	background: var(--wdsColorBlue3);
 }
 .WdsButton--special:disabled {
-	border-color: #e4e9ff;
-	background-color: #e4e9ff;
+	border-color: var(--wdsColorBlue2);
+	background-color: var(--wdsColorBlue2);
 	opacity: 0.4;
 }
 
diff --git a/src/ui/src/wds/WdsDropdownMenu.vue b/src/ui/src/wds/WdsDropdownMenu.vue
index 04d893e70..6633d8b70 100644
--- a/src/ui/src/wds/WdsDropdownMenu.vue
+++ b/src/ui/src/wds/WdsDropdownMenu.vue
@@ -1,15 +1,17 @@
 <template>
 	<div class="WdsDropdownMenu">
-		<div v-if="enableSearch" class="WdsDropdownMenu__search">
-			<i class="material-symbols-outlined">search</i>
-			<input
-				ref="searchInput"
-				v-model="searchTerm"
-				class="WdsDropdownMenu__search__input"
-				type="text"
-				placeholder="Search"
-				autocomplete="off"
-			/>
+		<div v-if="enableSearch" class="WdsDropdownMenu__search-wrapper">
+			<div class="WdsDropdownMenu__search">
+				<i class="material-symbols-outlined">search</i>
+				<input
+					ref="searchInput"
+					v-model="searchTerm"
+					class="WdsDropdownMenu__search__input"
+					type="text"
+					placeholder="Search"
+					autocomplete="off"
+				/>
+			</div>
 		</div>
 		<button
 			v-for="option in optionsFiltered"
@@ -86,7 +88,7 @@ watch(searchTerm, () => emits("search", searchTerm.value));
 <style scoped>
 .WdsDropdownMenu {
 	position: absolute;
-	border: 1px solid #394a6d;
+	border: 1px solid var(--wdsColorGray2);
 	border: none;
 	background: #fff;
 	z-index: 2;
@@ -97,10 +99,10 @@ watch(searchTerm, () => emits("search", searchTerm.value));
 
 	padding: 8px 10px;
 
-	box-shadow: 0px 1px 8px 0px #bfcbff40;
+	box-shadow: var(--wdsShadowMenu);
 	box-sizing: border-box;
 }
-.WdsDropdownMenu:has(.WdsDropdownMenu__search) {
+.WdsDropdownMenu:has(.WdsDropdownMenu__search-wrapper) {
 	padding-top: 0px;
 }
 
@@ -120,7 +122,7 @@ watch(searchTerm, () => emits("search", searchTerm.value));
 	padding: 8px;
 	font-weight: 400;
 	font-size: 0.75rem;
-	color: #000000e6;
+	color: var(--wdsColorGray6);
 	cursor: pointer;
 	transition: all 0.2s;
 	pointer-events: all;
@@ -128,43 +130,47 @@ watch(searchTerm, () => emits("search", searchTerm.value));
 
 .WdsDropdownMenu__item:hover {
 	cursor: pointer;
-	background-color: #f3f5ff;
+	background-color: var(--wdsColorBlue1);
 }
 
 .WdsDropdownMenu__item--selected {
-	background-color: #e4e9ff;
+	background-color: var(--wdsColorBlue2);
 }
 .WdsDropdownMenu__item__label {
 	text-overflow: ellipsis;
 	overflow: hidden;
 	text-align: left;
 }
+.WdsDropdownMenu__search-wrapper {
+	position: sticky;
+	top: 0px;
+	padding-top: 8px;
+	padding-bottom: 8px;
+	background: #fff;
+}
 
 .WdsDropdownMenu__search {
-	background-color: #fafafa;
+	background-color: var(--wdsColorGray1);
 	border-radius: 4px;
 	height: 36px;
 	width: 100%;
 
-	margin-bottom: 8px;
-
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	gap: 4px;
 
 	padding: 8px;
-	padding-top: 16px;
 	border: 1px solid transparent;
 
 	color: currentcolor;
 }
 .WdsDropdownMenu__search:hover {
-	border-color: #bfcbff;
+	border-color: var(--wdsColorBlue1);
 }
 .WdsDropdownMenu__search:focus-within {
 	background-color: white;
-	outline: 4px solid #f3f5ff;
+	outline: 4px solid var(--wdsColorBlue1);
 }
 
 .WdsDropdownMenu__search__input {
diff --git a/src/ui/src/wds/WdsFieldWrapper.vue b/src/ui/src/wds/WdsFieldWrapper.vue
index 31cce095e..e369038da 100644
--- a/src/ui/src/wds/WdsFieldWrapper.vue
+++ b/src/ui/src/wds/WdsFieldWrapper.vue
@@ -1,17 +1,47 @@
 <template>
 	<div class="WdsFieldWrapper colorTransformer">
-		<label>{{ label }}</label>
-		<div class="slotContainer" :class="{ frameSlot }"><slot></slot></div>
-		<div v-if="hint" class="hint">{{ hint }}</div>
+		<div v-if="label || helpButton" class="WdsFieldWrapper__title">
+			<label v-if="label" class="WdsFieldWrapper__title__label"
+				>{{ label
+				}}<span v-if="unit" class="WdsFieldWrapper__title__label__unit"
+					>&nbsp;:&nbsp;{{ unit }}</span
+				>
+			</label>
+			<WdsButton
+				v-if="helpButton"
+				class="WdsFieldWrapper__title__help"
+				variant="neutral"
+				size="smallIcon"
+				:data-writer-tooltip="
+					typeof helpButton === 'string' ? helpButton : undefined
+				"
+				@click="$emit('helpClick')"
+			>
+				<i class="material-symbols-outlined">help</i>
+			</WdsButton>
+		</div>
+		<div class="WdsFieldWrapper__slot"><slot></slot></div>
+		<div v-if="hint" class="WdsFieldWrapper__hint">{{ hint }}</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-defineProps<{
-	label: string;
-	hint?: string;
-	frameSlot?: boolean;
-}>();
+import WdsButton from "./WdsButton.vue";
+
+defineProps({
+	label: { type: String, required: false, default: undefined },
+	unit: { type: String, required: false, default: undefined },
+	hint: { type: String, required: false, default: undefined },
+	helpButton: {
+		type: [String, Boolean],
+		required: false,
+		default: undefined,
+	},
+});
+
+defineEmits({
+	helpClick: () => true,
+});
 </script>
 
 <style scoped>
@@ -23,26 +53,25 @@ defineProps<{
 	gap: 4px;
 }
 
-label {
+.WdsFieldWrapper__title {
 	color: var(--primaryTextColor);
+	display: grid;
+	grid-template-columns: 1fr auto;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 8px;
+}
+
+.WdsFieldWrapper__title__label {
 	font-size: 14px;
 	font-weight: 400;
 	line-height: 20px;
 }
-
-.slotContainer.frameSlot {
-	border-radius: 8px;
-	padding: 8.5px 12px 8.5px 12px;
-	font-size: 0.875rem;
-	border: 1px solid var(--separatorColor);
-}
-
-.slotContainer.frameSlot:focus-within {
-	border: 1px solid var(--softenedAccentColor);
-	box-shadow: 0px 0px 0px 3px rgba(81, 31, 255, 0.05);
+.WdsFieldWrapper__title__label__unit {
+	color: var(--secondaryTextColor);
 }
 
-.hint {
+.WdsFieldWrapper__hint {
 	color: var(--secondaryTextColor);
 	margin-top: 4px;
 	font-family: Poppins;
diff --git a/src/ui/src/wds/WdsTab.vue b/src/ui/src/wds/WdsTab.vue
new file mode 100644
index 000000000..0f6f0a49c
--- /dev/null
+++ b/src/ui/src/wds/WdsTab.vue
@@ -0,0 +1,46 @@
+<template>
+	<button
+		class="WdsTab"
+		:class="{ 'WdsTab--disabled': disabled, 'WdsTab--selected': selected }"
+		type="button"
+		@click="$emit('click')"
+	>
+		<slot />
+	</button>
+</template>
+
+<script setup lang="ts">
+defineProps({
+	disabled: { type: Boolean },
+	selected: { type: Boolean },
+});
+
+defineEmits({
+	click: () => true,
+});
+</script>
+
+<style scoped>
+.WdsTab {
+	/* reset button */
+	border: none;
+	background-color: transparent;
+	cursor: pointer;
+
+	padding: 4px 20px 4px 20px;
+	gap: 10px;
+	border-radius: 8px;
+}
+
+.WdsTab:hover {
+	background-color: var(--wdsColorBlue1);
+}
+
+.WdsTab--disabled {
+	color: var(--wdsColorGray4);
+}
+
+.WdsTab--selected {
+	background-color: var(--wdsColorBlue2);
+}
+</style>
diff --git a/src/ui/src/wds/WdsTabs.vue b/src/ui/src/wds/WdsTabs.vue
new file mode 100644
index 000000000..8d4d3894e
--- /dev/null
+++ b/src/ui/src/wds/WdsTabs.vue
@@ -0,0 +1,39 @@
+<template>
+	<div class="WdsTabs">
+		<WdsTab
+			v-for="tab of tabs"
+			:key="tab.value"
+			:disabled="tab.disabled"
+			:selected="tab.value === selected"
+			@click="selected = tab.value"
+			>{{ tab.label }}</WdsTab
+		>
+	</div>
+</template>
+
+<script lang="ts">
+export interface WdsTabOptions<Value extends string = string> {
+	label: string;
+	value: Value;
+	disabled?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { PropType } from "vue";
+import WdsTab from "./WdsTab.vue";
+
+defineProps({
+	tabs: { type: Array as PropType<WdsTabOptions[]>, required: true },
+});
+
+const selected = defineModel({ type: String });
+</script>
+
+<style scoped>
+.WdsTabs {
+	display: flex;
+	gap: 16px;
+	flex-wrap: wrap;
+}
+</style>
diff --git a/src/ui/src/wds/WdsTextInput.vue b/src/ui/src/wds/WdsTextInput.vue
index 6a8c7e668..858df72f1 100644
--- a/src/ui/src/wds/WdsTextInput.vue
+++ b/src/ui/src/wds/WdsTextInput.vue
@@ -2,20 +2,17 @@
 	<div
 		v-if="leftIcon"
 		class="WdsTextInput WdsTextInput--leftIcon colorTransformer"
+		v-bind="$attrs"
 		@click="input.focus()"
 	>
 		<i class="material-symbols-outlined">{{ leftIcon }}</i>
-		<input
-			ref="input"
-			v-model="model"
-			type="text"
-			:placeholder="placeholder"
-		/>
+		<input ref="input" v-model="model" v-bind="$attrs" />
 	</div>
 	<input
 		v-else
+		v-bind="$attrs"
+		ref="input"
 		v-model="model"
-		type="text"
 		class="WdsTextInput colorTransformer"
 	/>
 </template>
@@ -25,12 +22,40 @@ import { ref } from "vue";
 
 const model = defineModel({ type: String });
 
+// disable attributes inheritance to apply attr to nested input
+defineOptions({ inheritAttrs: false });
+
 defineProps({
 	leftIcon: { type: String, required: false, default: undefined },
-	placeholder: { type: String, required: false, default: undefined },
 });
 
-const input = ref();
+defineExpose({
+	focus,
+	getSelection,
+	value: model,
+	setSelectionEnd,
+	setSelectionStart,
+});
+
+const input = ref<HTMLInputElement>();
+
+function setSelectionStart(value: number) {
+	if (input.value) input.value.selectionStart = value;
+}
+function setSelectionEnd(value: number) {
+	if (input.value) input.value.selectionEnd = value;
+}
+
+function getSelection() {
+	return {
+		selectionStart: input.value?.selectionStart,
+		selectionEnd: input.value?.selectionEnd,
+	};
+}
+
+function focus() {
+	input.value?.focus();
+}
 </script>
 
 <style scoped>
@@ -62,7 +87,7 @@ const input = ref();
 }
 
 .WdsTextInput--leftIcon i {
-	color: #4f4f4f;
+	color: var(--wdsColorGray5);
 }
 
 .WdsTextInput--leftIcon input {
diff --git a/src/ui/src/wds/WdsTextareaInput.vue b/src/ui/src/wds/WdsTextareaInput.vue
index 3d0e02ce5..362254b4a 100644
--- a/src/ui/src/wds/WdsTextareaInput.vue
+++ b/src/ui/src/wds/WdsTextareaInput.vue
@@ -1,9 +1,39 @@
 <template>
-	<textarea v-model="model"></textarea>
+	<textarea ref="input" v-model="model"></textarea>
 </template>
 
 <script setup lang="ts">
+import { ref } from "vue";
+
 const model = defineModel<string>();
+
+defineExpose({
+	focus,
+	getSelection,
+	value: model,
+	setSelectionEnd,
+	setSelectionStart,
+});
+
+const input = ref<HTMLTextAreaElement>();
+
+function setSelectionStart(value: number) {
+	if (input.value) input.value.selectionStart = value;
+}
+function setSelectionEnd(value: number) {
+	if (input.value) input.value.selectionEnd = value;
+}
+
+function getSelection() {
+	return {
+		selectionStart: input.value?.selectionStart,
+		selectionEnd: input.value?.selectionEnd,
+	};
+}
+
+function focus() {
+	input.value?.focus();
+}
 </script>
 
 <style scoped>
diff --git a/src/ui/src/wds/tokens.ts b/src/ui/src/wds/tokens.ts
new file mode 100644
index 000000000..a0ee9b303
--- /dev/null
+++ b/src/ui/src/wds/tokens.ts
@@ -0,0 +1,63 @@
+import type { CSSProperties } from "vue";
+
+/**
+ * Colors from [Writer's design system](https://www.figma.com/design/jgLDtwVwg3hReC1t4Vw20D/.WDS-Writer-Design-System?node-id=1-2)
+ */
+export enum WdsColor {
+	White = "#ffffff",
+	Black = "#000000",
+
+	Blue1 = "#f3f5ff",
+	Blue2 = "#e4e9ff",
+	Blue3 = "#bfcbff",
+	Blue4 = "#6985ff",
+	Blue5 = "#5551ff",
+	Blue6 = "#4a46da",
+
+	Gray0 = "#fbfbfd",
+	Gray1 = "#f5f5f9",
+	Gray2 = "#e4e7ed",
+	Gray3 = "#d2d4d7",
+	Gray4 = "#828282",
+	Gray5 = "#4f4f4f",
+	Gray6 = "#333333",
+
+	Purple1 = "#f6effd",
+	Purple2 = "#ede2ff",
+	Purple3 = "#d4b2f7",
+	Purple4 = "#a95ef8",
+	Purple5 = "#721cc9",
+
+	Orange1 = "#fff4f1",
+	Orange2 = "#ffcfc2",
+	Orange4 = "#ff8866",
+	Orange5 = "#ff643c",
+
+	Green1 = "#f2fffb",
+	Green2 = "#d4fff2",
+	Green3 = "#a9f9e1",
+	Green5 = "#3bdcab",
+	Green6 = "#078660",
+}
+
+/**
+ * Shadows from [Writer's design system](https://www.figma.com/design/jgLDtwVwg3hReC1t4Vw20D/.WDS-Writer-Design-System?node-id=1-14)
+ */
+export enum WdsShadow {
+	Box = "0px 2px 0px 0px #f3f3f3",
+	Menu = "0px 1px 8px 0px #bfcbff40",
+	Large = "0px 3px 40px 0px #acb9dc66",
+}
+
+export const WDS_CSS_PROPERTIES = Object.freeze<CSSProperties>(
+	Object.fromEntries([
+		...Object.entries(WdsColor).map(([key, value]) => [
+			`--wdsColor${key}`,
+			value,
+		]),
+		...Object.entries(WdsShadow).map(([key, value]) => [
+			`--wdsShadow${key}`,
+			value,
+		]),
+	]),
+);
diff --git a/src/writer/__init__.py b/src/writer/__init__.py
index b0ff35089..2f3a8616e 100644
--- a/src/writer/__init__.py
+++ b/src/writer/__init__.py
@@ -21,7 +21,7 @@
 from writer.core import (
     writerproperty as property,
 )
-from writer.core_df import EditableDataframe
+from writer.core_df import EditableDataFrame
 
 try:
     from writer.ui import WriterUIManager
diff --git a/src/writer/ai.py b/src/writer/ai.py
index bbdbbfbb8..557f6003d 100644
--- a/src/writer/ai.py
+++ b/src/writer/ai.py
@@ -90,17 +90,31 @@ class GraphTool(Tool):
     subqueries: bool
 
 
+class FunctionToolParameterMeta(TypedDict):
+    type: Union[
+        Literal["string"],
+        Literal["number"],
+        Literal["integer"],
+        Literal["float"],
+        Literal["boolean"],
+        Literal["array"],
+        Literal["object"],
+        Literal["null"]
+        ]
+    description: str
+
+
 class FunctionTool(Tool):
     callable: Callable
     name: str
     description: Optional[str]
-    parameters: Dict[str, Dict[str, str]]
+    parameters: Dict[str, FunctionToolParameterMeta]
 
 
 def create_function_tool(
     callable: Callable,
     name: str,
-    parameters: Optional[Dict[str, Dict[str, str]]] = None,
+    parameters: Optional[Dict[str, FunctionToolParameterMeta]] = None,
     description: Optional[str] = None
 ) -> FunctionTool:
     parameters = parameters or {}
@@ -1196,7 +1210,7 @@ def _register_callable(
             self,
             callable_to_register: Callable,
             name: str,
-            parameters: Dict[str, Dict[str, str]]
+            parameters: Dict[str, FunctionToolParameterMeta]
     ):
         """
         Internal helper function to store a provided callable
@@ -1266,7 +1280,9 @@ def _prepare_tool(
         Internal helper function to process a tool instance
         into the required format.
         """
-        def validate_parameters(parameters: Dict[str, Dict[str, str]]) -> bool:
+        def validate_parameters(
+                parameters: Dict[str, FunctionToolParameterMeta]
+        ) -> bool:
             """
             Validates the `parameters` dictionary to ensure that each key
             is a parameter name, and each value is a dictionary containing
diff --git a/src/writer/app_runner.py b/src/writer/app_runner.py
index 616093a6e..5531a59ce 100644
--- a/src/writer/app_runner.py
+++ b/src/writer/app_runner.py
@@ -17,7 +17,7 @@
 from pydantic import ValidationError
 from watchdog.observers.polling import PollingObserver
 
-from writer import VERSION, audit_and_fix, core_ui, wf_project
+from writer import VERSION, audit_and_fix, core_ui, crypto, wf_project
 from writer.core import (
     Config,
     EventHandlerRegistry,
@@ -36,6 +36,9 @@
     ComponentUpdateRequestPayload,
     EventRequest,
     EventResponsePayload,
+    HashRequest,
+    HashRequestPayload,
+    HashRequestResponsePayload,
     InitSessionRequest,
     InitSessionRequestPayload,
     InitSessionResponsePayload,
@@ -199,7 +202,7 @@ def _handle_event(self, session: WriterSession, event: WriterEvent) -> EventResp
         session.session_state.clear_mail()
 
         return res_payload
-    
+
     def _handle_state_enquiry(self, session: WriterSession) -> StateEnquiryResponsePayload:
         import traceback as tb
 
@@ -236,7 +239,13 @@ def _handle_state_content(self, session: WriterSession) -> StateContentResponseP
                                                 tb.format_exc())
 
         return StateContentResponsePayload(state=serialized_state)
-    
+
+    def _handle_hash_request(self, req_payload: HashRequestPayload) -> HashRequestResponsePayload:
+        res_payload = HashRequestResponsePayload(
+            message=crypto.get_hash(req_payload.message)
+        )
+        return res_payload
+
     def _handle_component_update(self, session: WriterSession, payload: ComponentUpdateRequestPayload) -> None:
         import writer
         ingest_bmc_component_tree(writer.base_component_tree, payload.components)
@@ -303,6 +312,14 @@ def _handle_message(self, session_id: str, request: AppProcessServerRequest) ->
                     payload=None
                 )
 
+            if self.mode == "edit" and type == "hashRequest":
+                hash_request_payload = HashRequestPayload.model_validate(request.payload)
+                return AppProcessServerResponse(
+                    status="ok",
+                    status_message=None,
+                    payload=self._handle_hash_request(hash_request_payload)
+                )
+
             if self.mode == "edit" and type == "componentUpdate":
                 cu_req_payload = ComponentUpdateRequestPayload.parse_obj(
                     request.payload)
@@ -745,6 +762,12 @@ async def handle_event(self, session_id: str, event: WriterEvent) -> AppProcessS
             payload=event
         ))
 
+    async def handle_hash_request(self, session_id: str, payload: HashRequestPayload) -> AppProcessServerResponse:
+        return await self.dispatch_message(session_id, HashRequest(
+            type="hashRequest",
+            payload=payload
+        ))
+
     async def handle_state_enquiry(self, session_id: str) -> AppProcessServerResponse:
         return await self.dispatch_message(session_id, StateEnquiryRequest(
             type="stateEnquiry"
diff --git a/src/writer/blocks/foreach.py b/src/writer/blocks/foreach.py
index b5268d625..b8f56a82c 100644
--- a/src/writer/blocks/foreach.py
+++ b/src/writer/blocks/foreach.py
@@ -22,19 +22,12 @@ def register(cls, type: str):
                     },
                     "items": {
                         "name": "Items",
-                        "desc": "The item value will be passed in the execution environment and will be available at @{item}, its id at @{itemId}.",
+                        "desc": "The item value will be passed in the execution environment and will be available at @{payload.item}, its id at @{payload.itemId}.",
                         "default": "{}",
                         "init": '{ "fr": "France", "pl": "Poland" }',
                         "type": "Object",
                         "control": "Textarea"
-                    },
-                    "executionEnv": {
-                        "name": "Execution environment",
-                        "desc": "You can add other values to the execution environment.",
-                        "default": "{}",
-                        "type": "Object",
-                        "control": "Textarea"
-                    },
+                    }
                 },
                 "outs": {
                     "success": {
@@ -52,14 +45,20 @@ def register(cls, type: str):
         ))
 
     def _run_workflow_for_item(self, workflow_key, base_execution_environment, item_id, item):
-        expanded_execution_environment = base_execution_environment | { "itemId": item_id, "item": item }
+        expanded_execution_environment = base_execution_environment | { 
+            "payload": {
+                "itemId": item_id,
+                "item": item
+            }
+        }
         return self.runner.run_workflow_by_key(workflow_key, expanded_execution_environment)
 
     def run(self):
         try:
             workflow_key = self._get_field("workflowKey")
             items = self._get_field("items", as_json=True)
-            base_execution_environment = self._get_field("executionEnv", as_json=True)
+            base_execution_environment = self.execution_environment
+
             std_items = items
             result = None
             if isinstance(items, list):
diff --git a/src/writer/blocks/httprequest.py b/src/writer/blocks/httprequest.py
index 6d403734c..de2642236 100644
--- a/src/writer/blocks/httprequest.py
+++ b/src/writer/blocks/httprequest.py
@@ -1,3 +1,5 @@
+import re
+
 import requests
 
 from writer.abstract import register_abstract_template
@@ -7,6 +9,8 @@
 
 class HTTPRequest(WorkflowBlock):
 
+    CONTROL_CHARS = re.compile(r"[\x00-\x1f\x7f]")
+
     @classmethod
     def register(cls, type: str):
         super(HTTPRequest, cls).register(type)
@@ -64,6 +68,12 @@ def register(cls, type: str):
             }
         ))
 
+    def _clean_json_string(self, s: str) -> str:
+
+        """ Remove control characters, which aren't tolerated by JSON loads() strict mode, from string."""
+
+        return HTTPRequest.CONTROL_CHARS.sub("", s)
+
     def run(self):
         import json
 
@@ -71,7 +81,7 @@ def run(self):
             method = self._get_field("method", False, "GET")
             url = self._get_field("url")
             headers = self._get_field("headers", True)
-            body = self._get_field("body")
+            body = self._clean_json_string(self._get_field("body"))
             req = requests.request(method, url, headers=headers, data=body)
             
             content_type = req.headers.get("Content-Type")
diff --git a/src/writer/blocks/runworkflow.py b/src/writer/blocks/runworkflow.py
index e9042cc42..00e1189ec 100644
--- a/src/writer/blocks/runworkflow.py
+++ b/src/writer/blocks/runworkflow.py
@@ -19,11 +19,11 @@ def register(cls, type: str):
                         "name": "Workflow key",
                         "type": "Text",
                     },
-                    "executionEnv": {
-                        "name": "Execution environment",
-                        "desc": "Values passed will be available using the template syntax i.e. @{my_var}",
+                    "payload": {
+                        "name": "Payload",
+                        "desc": "The value specified will be available using the template syntax i.e. @{payload}",
                         "default": "{}",
-                        "type": "Object",
+                        "type": "Text",
                         "control": "Textarea"
                     },
                 },
@@ -45,9 +45,9 @@ def register(cls, type: str):
     def run(self):
         try:
             workflow_key = self._get_field("workflowKey")
-            execution_environment = self._get_field("executionEnv", as_json=True)
-
-            return_value = self.runner.run_workflow_by_key(workflow_key, execution_environment)
+            payload = self._get_field("payload")
+            expanded_execution_environment = self.execution_environment | { "payload": payload }
+            return_value = self.runner.run_workflow_by_key(workflow_key, expanded_execution_environment)
             self.result = return_value
             self.outcome = "success"
         except BaseException as e:
diff --git a/src/writer/command_line.py b/src/writer/command_line.py
index f7ff8c315..69cb198c4 100644
--- a/src/writer/command_line.py
+++ b/src/writer/command_line.py
@@ -1,6 +1,5 @@
 import os
 import shutil
-import sys
 from typing import Optional
 
 import click
@@ -21,28 +20,30 @@ def main():
 @main.command()
 @click.option('--host', default="127.0.0.1", help="Host to run the app on")
 @click.option('--port', default=None, help="Port to run the app on")
+@click.option("--enable-jobs-api", help="Set this flag to enable the Jobs API, allowing you to execute jobs without user interaction.", is_flag=True)
 @click.argument('path')
-def run(path: str, host: str, port: Optional[int]):
+def run(path: str, host: str, port: Optional[int], enable_jobs_api: bool):
     """Run the app from PATH folder in run mode."""
 
     abs_path = os.path.abspath(path)
     if wf_project.is_project(path) is False and \
         wf_project.can_create_project(path) is True:
-        raise click.ClickException(f"There’s no Writer Framework project at this location, create a new one with `writer create {path}`")
+        raise click.ClickException(f"There's no Writer Framework project at this location, create a new one with `writer create {path}`")
 
     if wf_project.is_project(path) is False and \
         wf_project.can_create_project(path) is False:
-        raise click.ClickException(f"There’s no Writer Framework project at this location : {abs_path}")
+        raise click.ClickException(f"There's no Writer Framework project at this location : {abs_path}")
 
     writer.serve.serve(
-        abs_path, mode="run", port=port, host=host, enable_server_setup=True)
+        abs_path, mode="run", port=port, host=host, enable_server_setup=True, enable_jobs_api=enable_jobs_api)
 
 @main.command()
 @click.option('--host', default="127.0.0.1", help="Host to run the app on")
 @click.option('--port', default=None, help="Port to run the app on")
 @click.option('--enable-remote-edit', help="Set this flag to allow non-local requests in edit mode.", is_flag=True)
 @click.option('--enable-server-setup', help="Set this flag to enable server setup hook in edit mode.", is_flag=True)
-@click.option("--no-interactive", help="Set the flask to ask the app to run without asking anything to the user", is_flag=True)
+@click.option("--no-interactive", help="Set this flag to run the app without asking anything to the user.", is_flag=True)
+@click.option("--enable-jobs-api", help="Set this flag to enable the Jobs API, allowing you to execute jobs without user interaction.", is_flag=True)
 @click.argument('path')
 def edit(
     path: str,
@@ -50,7 +51,8 @@ def edit(
     host: str,
     enable_remote_edit: bool,
     enable_server_setup: bool,
-    no_interactive: bool
+    no_interactive: bool,
+    enable_jobs_api: bool,
 ):
     """Run the app from PATH folder in edit mode."""
     abs_path = os.path.abspath(path)
@@ -70,7 +72,7 @@ def edit(
 
     writer.serve.serve(
         abs_path, mode="edit", port=port, host=host,
-        enable_remote_edit=enable_remote_edit, enable_server_setup=enable_server_setup)
+        enable_remote_edit=enable_remote_edit, enable_server_setup=enable_server_setup, enable_jobs_api=enable_jobs_api)
 
 @main.command()
 @click.argument('path')
diff --git a/src/writer/core.py b/src/writer/core.py
index 9c0074340..9c8fb56fa 100644
--- a/src/writer/core.py
+++ b/src/writer/core.py
@@ -281,7 +281,7 @@ class StateSerialiser:
     """
     def serialise(self, v: Any) -> Union[Dict, List, str, bool, int, float, None]:
         from writer.ai import Conversation
-        from writer.core_df import EditableDataframe
+        from writer.core_df import EditableDataFrame
 
         if isinstance(v, State):
             return self._serialise_dict_recursively(v.to_dict())
@@ -299,7 +299,7 @@ def serialise(self, v: Any) -> Union[Dict, List, str, bool, int, float, None]:
             return self._serialise_list_recursively(v)
         if isinstance(v, (str, bool)):
             return v
-        if isinstance(v, EditableDataframe):
+        if isinstance(v, EditableDataFrame):
             table = v.pyarrow_table()
             return self._serialise_pyarrow_table(table)
         if v is None:
@@ -1240,6 +1240,8 @@ def transform(self, ev: WriterEvent) -> None:
         custom_event_name = ev.type[3:]
         func_name = "_transform_" + custom_event_name.replace("-", "_")
         if not hasattr(self, func_name):
+            if ev.isSafe:
+                return
             ev.payload = {}
             raise ValueError(
                 "No payload transformer available for custom event type.")
@@ -1605,9 +1607,9 @@ def fn(payload, context, session):
                 "session": session
             }
             if workflow_key:
-                self.workflow_runner.run_workflow_by_key(workflow_key, execution_environment)
+                return self.workflow_runner.run_workflow_by_key(workflow_key, execution_environment)
             elif workflow_id:
-                self.workflow_runner.run_workflow(workflow_id, execution_environment, "Workflow execution triggered on demand")
+                return self.workflow_runner.run_workflow(workflow_id, execution_environment, "Workflow execution triggered on demand")
         return fn
 
     def _get_handler_callable(self, handler: str) -> Optional[Callable]:
diff --git a/src/writer/core_df.py b/src/writer/core_df.py
index f5e694798..c80c65e44 100644
--- a/src/writer/core_df.py
+++ b/src/writer/core_df.py
@@ -8,7 +8,7 @@
 import pyarrow  # type: ignore
 
 from .core import MutableValue, import_failure
-from .ss_types import DataframeRecordAdded, DataframeRecordRemoved, DataframeRecordUpdated
+from .ss_types import DataFrameRecordAdded, DataFrameRecordRemoved, DataFrameRecordUpdated
 
 if TYPE_CHECKING:
     import pandas
@@ -38,37 +38,37 @@ def record(df: Any, record_index: int) -> dict:
         """
         This method read a record at the given line and get it back as dictionary
 
-        >>> edf = EditableDataframe(df)
+        >>> edf = EditableDataFrame(df)
         >>> r = edf.record(1)
         """
         raise NotImplementedError
 
     @staticmethod
-    def record_add(df: Any, payload: DataframeRecordAdded) -> Any:
+    def record_add(df: Any, payload: DataFrameRecordAdded) -> Any:
         """
         signature of the methods to be implemented to process wf-dataframe-add event
 
-        >>> edf = EditableDataframe(df)
+        >>> edf = EditableDataFrame(df)
         >>> edf.record_add({"record": {"a": 1, "b": 2}})
         """
         raise NotImplementedError
 
     @staticmethod
-    def record_update(df: Any, payload: DataframeRecordUpdated) -> Any:
+    def record_update(df: Any, payload: DataFrameRecordUpdated) -> Any:
         """
         signature of the methods to be implemented to process wf-dataframe-update event
 
-        >>> edf = EditableDataframe(df)
+        >>> edf = EditableDataFrame(df)
         >>> edf.record_update({"record_index": 12, "record": {"a": 1, "b": 2}})
         """
         raise NotImplementedError
 
     @staticmethod
-    def record_remove(df: Any, payload: DataframeRecordRemoved) -> Any:
+    def record_remove(df: Any, payload: DataFrameRecordRemoved) -> Any:
         """
         signature of the methods to be implemented to process wf-dataframe-action event
 
-        >>> edf = EditableDataframe(df)
+        >>> edf = EditableDataFrame(df)
         >>> edf.record_remove({"record_index": 12})
         """
         raise NotImplementedError
@@ -86,7 +86,7 @@ class PandasRecordProcessor(DataframeRecordProcessor):
     PandasRecordProcessor processes records from a pandas dataframe saved into an EditableDataframe
 
     >>> df = pandas.DataFrame({"a": [1, 2], "b": [3, 4]})
-    >>> edf = EditableDataframe(df)
+    >>> edf = EditableDataFrame(df)
     >>> edf.record_add({"a": 1, "b": 2})
     """
 
@@ -100,7 +100,7 @@ def match(df: Any) -> bool:
     def record(df: 'pandas.DataFrame', record_index: int) -> dict:
         """
 
-        >>> edf = EditableDataframe(df)
+        >>> edf = EditableDataFrame(df)
         >>> r = edf.record(1)
         """
         import pandas
@@ -118,9 +118,9 @@ def record(df: 'pandas.DataFrame', record_index: int) -> dict:
         return dict(record)
 
     @staticmethod
-    def record_add(df: 'pandas.DataFrame', payload: DataframeRecordAdded) -> 'pandas.DataFrame':
+    def record_add(df: 'pandas.DataFrame', payload: DataFrameRecordAdded) -> 'pandas.DataFrame':
         """
-        >>> edf = EditableDataframe(df)
+        >>> edf = EditableDataFrame(df)
         >>> edf.record_add({"record": {"a": 1, "b": 2}})
         """
         import pandas
@@ -137,9 +137,9 @@ def record_add(df: 'pandas.DataFrame', payload: DataframeRecordAdded) -> 'pandas
             return pandas.concat([df, new_df])
 
     @staticmethod
-    def record_update(df: 'pandas.DataFrame', payload: DataframeRecordUpdated) -> 'pandas.DataFrame':
+    def record_update(df: 'pandas.DataFrame', payload: DataFrameRecordUpdated) -> 'pandas.DataFrame':
         """
-        >>> edf = EditableDataframe(df)
+        >>> edf = EditableDataFrame(df)
         >>> edf.record_update({"record_index": 12, "record": {"a": 1, "b": 2}})
         """
         import pandas
@@ -162,9 +162,9 @@ def record_update(df: 'pandas.DataFrame', payload: DataframeRecordUpdated) -> 'p
         return df
 
     @staticmethod
-    def record_remove(df: 'pandas.DataFrame', payload: DataframeRecordRemoved) -> 'pandas.DataFrame':
+    def record_remove(df: 'pandas.DataFrame', payload: DataFrameRecordRemoved) -> 'pandas.DataFrame':
         """
-        >>> edf = EditableDataframe(df)
+        >>> edf = EditableDataFrame(df)
         >>> edf.record_remove({"record_index": 12})
         """
         record_index: int = payload['record_index']
@@ -187,7 +187,7 @@ class PolarRecordProcessor(DataframeRecordProcessor):
     PolarRecordProcessor processes records from a polar dataframe saved into an EditableDataframe
 
     >>> df = polars.DataFrame({"a": [1, 2], "b": [3, 4]})
-    >>> edf = EditableDataframe(df)
+    >>> edf = EditableDataFrame(df)
     >>> edf.record_add({"record": {"a": 1, "b": 2}})
     """
 
@@ -201,7 +201,7 @@ def match(df: Any) -> bool:
     def record(df: 'polars.DataFrame', record_index: int) -> dict:
         """
 
-        >>> edf = EditableDataframe(df)
+        >>> edf = EditableDataFrame(df)
         >>> r = edf.record(1)
         """
         record = {}
@@ -213,7 +213,7 @@ def record(df: 'polars.DataFrame', record_index: int) -> dict:
 
 
     @staticmethod
-    def record_add(df: 'polars.DataFrame', payload: DataframeRecordAdded) -> 'polars.DataFrame':
+    def record_add(df: 'polars.DataFrame', payload: DataFrameRecordAdded) -> 'polars.DataFrame':
         _assert_record_match_polar_df(df, payload['record'])
 
         import polars
@@ -221,7 +221,7 @@ def record_add(df: 'polars.DataFrame', payload: DataframeRecordAdded) -> 'polars
         return polars.concat([df, new_df])
 
     @staticmethod
-    def record_update(df: 'polars.DataFrame', payload: DataframeRecordUpdated) -> 'polars.DataFrame':
+    def record_update(df: 'polars.DataFrame', payload: DataFrameRecordUpdated) -> 'polars.DataFrame':
         # This implementation works but is not optimal.
         # I didn't find a better way to update a record in polars
         #
@@ -236,7 +236,7 @@ def record_update(df: 'polars.DataFrame', payload: DataframeRecordUpdated) -> 'p
         return df
 
     @staticmethod
-    def record_remove(df: 'polars.DataFrame', payload: DataframeRecordRemoved) -> 'polars.DataFrame':
+    def record_remove(df: 'polars.DataFrame', payload: DataFrameRecordRemoved) -> 'polars.DataFrame':
         import polars
 
         record_index: int = payload['record_index']
@@ -257,7 +257,7 @@ class RecordListRecordProcessor(DataframeRecordProcessor):
     RecordListRecordProcessor processes records from a list of record saved into an EditableDataframe
 
     >>> df = [{"a": 1, "b": 2}, {"a": 3, "b": 4}]
-    >>> edf = EditableDataframe(df)
+    >>> edf = EditableDataFrame(df)
     >>> edf.record_add({"record": {"a": 1, "b": 2}})
     """
 
@@ -270,20 +270,20 @@ def match(df: Any) -> bool:
     def record(df: List[Dict[str, Any]], record_index: int) -> dict:
         """
 
-        >>> edf = EditableDataframe(df)
+        >>> edf = EditableDataFrame(df)
         >>> r = edf.record(1)
         """
         r = df[record_index]
         return copy.copy(r)
 
     @staticmethod
-    def record_add(df: List[Dict[str, Any]], payload: DataframeRecordAdded) -> List[Dict[str, Any]]:
+    def record_add(df: List[Dict[str, Any]], payload: DataFrameRecordAdded) -> List[Dict[str, Any]]:
         _assert_record_match_list_of_records(df, payload['record'])
         df.append(payload['record'])
         return df
 
     @staticmethod
-    def record_update(df: List[Dict[str, Any]], payload: DataframeRecordUpdated) -> List[Dict[str, Any]]:
+    def record_update(df: List[Dict[str, Any]], payload: DataFrameRecordUpdated) -> List[Dict[str, Any]]:
         _assert_record_match_list_of_records(df, payload['record'])
 
         record_index = payload['record_index']
@@ -293,7 +293,7 @@ def record_update(df: List[Dict[str, Any]], payload: DataframeRecordUpdated) ->
         return df
 
     @staticmethod
-    def record_remove(df: List[Dict[str, Any]], payload: DataframeRecordRemoved) -> List[Dict[str, Any]]:
+    def record_remove(df: List[Dict[str, Any]], payload: DataFrameRecordRemoved) -> List[Dict[str, Any]]:
         del(df[payload['record_index']])
         return df
 
@@ -314,13 +314,13 @@ def pyarrow_table(df: List[Dict[str, Any]]) -> pyarrow.Table:
 
         return table
 
-class EditableDataframe(MutableValue):
+class EditableDataFrame(MutableValue):
     """
     Editable Dataframe makes it easier to process events from components
     that modify a dataframe like the dataframe editor.
 
     >>> initial_state = wf.init_state({
-    >>>    "df": wf.EditableDataframe(df)
+    >>>    "df": wf.EditableDataFrame(df)
     >>> })
 
     Editable Dataframe is compatible with a pandas, thrillers or record list dataframe
@@ -348,12 +348,12 @@ def df(self, value: Union['pandas.DataFrame', 'polars.DataFrame', List[dict]]) -
         self._df = value
         self.mutate()
 
-    def record_add(self, payload: DataframeRecordAdded) -> None:
+    def record_add(self, payload: DataFrameRecordAdded) -> None:
         """
         Adds a record to the dataframe
 
         >>> df = pandas.DataFrame({"a": [1, 2], "b": [3, 4]})
-        >>> edf = EditableDataframe(df)
+        >>> edf = EditableDataFrame(df)
         >>> edf.record_add({"record": {"a": 1, "b": 2}})
         """
         assert self.processor is not None
@@ -361,7 +361,7 @@ def record_add(self, payload: DataframeRecordAdded) -> None:
         self._df = self.processor.record_add(self.df, payload)
         self.mutate()
 
-    def record_update(self, payload: DataframeRecordUpdated) -> None:
+    def record_update(self, payload: DataFrameRecordUpdated) -> None:
         """
         Updates a record in the dataframe
 
@@ -369,7 +369,7 @@ def record_update(self, payload: DataframeRecordUpdated) -> None:
         It must a value for each index / column.
 
         >>> df = pandas.DataFrame({"a": [1, 2], "b": [3, 4]})
-        >>> edf = EditableDataframe(df)
+        >>> edf = EditableDataFrame(df)
         >>> edf.record_update({"record_index": 0, "record": {"a": 2, "b": 2}})
         """
         assert self.processor is not None
@@ -377,12 +377,12 @@ def record_update(self, payload: DataframeRecordUpdated) -> None:
         self._df = self.processor.record_update(self.df, payload)
         self.mutate()
 
-    def record_remove(self, payload: DataframeRecordRemoved) -> None:
+    def record_remove(self, payload: DataFrameRecordRemoved) -> None:
         """
         Removes a record from the dataframe
 
         >>> df = pandas.DataFrame({"a": [1, 2], "b": [3, 4]})
-        >>> edf = EditableDataframe(df)
+        >>> edf = EditableDataFrame(df)
         >>> edf.record_remove({"record_index": 0})
         """
         assert self.processor is not None
@@ -397,7 +397,7 @@ def pyarrow_table(self) -> pyarrow.Table:
         This mechanism is used for serializing data for transmission to the frontend.
 
         >>> df = pandas.DataFrame({"a": [1, 2], "b": [3, 4]})
-        >>> edf = EditableDataframe(df)
+        >>> edf = EditableDataFrame(df)
         >>> pa_table = edf.pyarrow_table()
         """
         assert self.processor is not None
diff --git a/src/writer/crypto.py b/src/writer/crypto.py
new file mode 100644
index 000000000..c55e255de
--- /dev/null
+++ b/src/writer/crypto.py
@@ -0,0 +1,23 @@
+
+import hashlib
+import os
+
+from fastapi import HTTPException, Request
+
+HASH_SALT = "a9zHYfIeL0"
+
+def get_hash(message: str):
+    base_hash = os.getenv("WRITER_SECRET_KEY")
+    if not base_hash:
+        raise ValueError("Environment variable WRITER_SECRET_KEY needs to be set up in" + \
+                            "order to enable operations which require hash generation, such as creating async jobs.")
+    assert HASH_SALT
+    combined = base_hash + HASH_SALT + message
+    return hashlib.sha256(combined.encode()).hexdigest()
+
+def verify_message_authorization_signature(message: str, request: Request):
+    auth_header = request.headers.get("Authorization")
+    if not auth_header:
+        raise HTTPException(status_code=401, detail="Unauthorized. Token not specified.")
+    if auth_header != f"Bearer {get_hash(message)}":
+        raise HTTPException(status_code=403, detail="Forbidden. Incorrect token.")
\ No newline at end of file
diff --git a/src/writer/deploy.py b/src/writer/deploy.py
index f6868dd8f..98ab67940 100644
--- a/src/writer/deploy.py
+++ b/src/writer/deploy.py
@@ -15,6 +15,7 @@
 import requests
 from gitignore_parser import parse_gitignore
 
+DEPLOY_TIMEOUT = int(os.getenv("WRITER_DEPLOY_TIMEOUT", 20))
 
 @click.group()
 def cloud():
@@ -261,7 +262,7 @@ def upload_package(deploy_url, tar, token, env, verbose=False, sleep_interval=5)
     print("Package uploaded. Building...")
     status = "WAITING"
     url = ""
-    while status not in ["COMPLETED", "FAILED"] and datetime.now(pytz.timezone('UTC')) < build_time + timedelta(minutes=5):
+    while status not in ["COMPLETED", "FAILED"] and datetime.now(pytz.timezone('UTC')) < build_time + timedelta(minutes=DEPLOY_TIMEOUT):
         end_time = datetime.now(pytz.timezone('UTC'))
         status, url = check_service_status(deploy_url, token, build_id, build_time, start_time, end_time, status)
         time.sleep(sleep_interval)
diff --git a/src/writer/evaluator.py b/src/writer/evaluator.py
index 1d8ccf685..c4100ac27 100644
--- a/src/writer/evaluator.py
+++ b/src/writer/evaluator.py
@@ -32,7 +32,7 @@ def __init__(self, state: "WriterState", component_tree: "ComponentTree"):
     def evaluate_field(self, instance_path: InstancePath, field_key: str, as_json=False, default_field_value="", base_context={}) -> Any:
         def decode_json(text):
             try:
-                return json.loads(text)
+                return json.loads(text, strict=False)
             except json.JSONDecodeError as exception:
                 raise WriterConfigurationError("Error decoding JSON. " + str(exception)) from exception
 
diff --git a/src/writer/serve.py b/src/writer/serve.py
index 459069d1b..caa310726 100644
--- a/src/writer/serve.py
+++ b/src/writer/serve.py
@@ -2,6 +2,7 @@
 import html
 import importlib.util
 import io
+import json
 import logging
 import mimetypes
 import os
@@ -9,26 +10,29 @@
 import pathlib
 import socket
 import textwrap
+import time
 import typing
 from contextlib import asynccontextmanager
 from importlib.machinery import ModuleSpec
-from typing import Any, Callable, Dict, List, Literal, Optional, Set, Tuple, Union, cast
+from typing import Any, Callable, Dict, List, Optional, Set, Tuple, Type, Union, cast
 from urllib.parse import urlsplit
 
 import uvicorn
 from fastapi import FastAPI, HTTPException, Request, Response
-from fastapi.responses import FileResponse
+from fastapi.responses import FileResponse, JSONResponse
 from fastapi.routing import Mount
 from fastapi.staticfiles import StaticFiles
 from pydantic import ValidationError
 from starlette.websockets import WebSocket, WebSocketDisconnect, WebSocketState
 
-from writer import VERSION, abstract
+from writer import VERSION, abstract, crypto
 from writer.app_runner import AppRunner
 from writer.ss_types import (
     AppProcessServerResponse,
     ComponentUpdateRequestPayload,
     EventResponsePayload,
+    HashRequestPayload,
+    HashRequestResponsePayload,
     InitRequestBody,
     InitResponseBodyEdit,
     InitResponseBodyRun,
@@ -50,13 +54,16 @@
 
 class JobVault:
 
+    SCHEMES:List[str] = []
+    job_vault_implementations: List[Type["JobVault"]] = []
+
     def __init__(self):
         self.counter = 0
         self.vault = {}
 
     def generate_job_id(self):
         self.counter += 1
-        return self.counter
+        return str(self.counter)
 
     def set(self, job_id: str, value: Any):
         self.vault[job_id] = value
@@ -64,6 +71,71 @@ def set(self, job_id: str, value: Any):
     def get(self, job_id: str):
         return self.vault.get(job_id)
 
+    @classmethod
+    def register(cls, klass: Type["JobVault"]):
+        cls.job_vault_implementations.insert(0, klass)
+
+    @classmethod
+    def _get_matching_implementation(cls, connection_string):
+        for job_vault_implementation in cls.job_vault_implementations:
+            for scheme in job_vault_implementation.SCHEMES:
+                if connection_string.startswith(scheme):
+                    return job_vault_implementation
+
+    @classmethod
+    def create_vault(cls):
+        connection_string = os.getenv("WRITER_PERSISTENT_STORE")
+        if not connection_string:
+            return cls()
+
+        matching_implementation = cls._get_matching_implementation(connection_string)
+        if not matching_implementation:
+            supported_schemes = [scheme for implementation in JobVault.job_vault_implementations for scheme in implementation.SCHEMES]
+            supported_schemes_msg = ", ".join(supported_schemes)
+            logging.error(f"No matching implementation found for { connection_string }. Falling back to in-memory JobVault. \
+                          Supported schemes: {supported_schemes_msg}.")
+            return cls()
+
+        try:
+            return matching_implementation()
+        except Exception as e:
+            logging.error(f"There was an error connecting to { connection_string }. Falling back to in-memory JobVault. {repr(e)}")
+            return cls()
+
+
+class RedisJobVault(JobVault):
+
+    SCHEMES = ["redis://", "rediss://", "redis-socket://", "redis-sentinel://"]
+    DEFAULT_TTL = 86400
+
+    def __init__(self):
+        import redis  # type: ignore
+        super().__init__()
+        redis_connection_string = os.getenv("WRITER_PERSISTENT_STORE")
+        self.redis_client = redis.from_url(redis_connection_string, decode_responses=True, socket_timeout=30)
+        self.counter_key = "job_counter"
+        if not self.redis_client.exists(self.counter_key):
+            self.redis_client.set(self.counter_key, 0)
+
+    def generate_job_id(self):
+        job_id = self.redis_client.incr(self.counter_key)
+        return str(job_id)
+
+    def set(self, job_id: str, value: Any):
+        ttl = RedisJobVault.DEFAULT_TTL
+        env_ttl = os.getenv("WRITER_PERSISTENT_STORE_TTL")
+        if env_ttl is not None:
+            ttl = int(env_ttl)
+        json_str = json.dumps(value)
+        self.redis_client.set(f"job:{job_id}", json_str, ex=ttl)
+
+    def get(self, job_id: str):
+        json_str = self.redis_client.get(f"job:{job_id}")
+        if not json_str:
+            return None
+        return json.loads(json_str)
+
+
 class WriterState(typing.Protocol):
     app_runner: AppRunner
     writer_app: bool
@@ -87,7 +159,8 @@ def get_asgi_app(
         enable_remote_edit: bool = False,
         enable_server_setup: bool = True,
         on_load: Optional[Callable] = None,
-        on_shutdown: Optional[Callable] = None
+        on_shutdown: Optional[Callable] = None,
+        enable_jobs_api: bool = False
 ) -> WriterFastAPI:
     """
     Builds an ASGI server that can be injected into another ASGI application
@@ -139,7 +212,6 @@ async def lifespan(asgi_app: FastAPI):
     """
     app.state.writer_app = True
     app.state.app_runner = app_runner
-    app.state.job_vault = JobVault()
 
     def _get_extension_paths() -> List[str]:
         extensions_path = pathlib.Path(user_app_path) / "extensions"
@@ -242,6 +314,115 @@ async def init(initBody: InitRequestBody, request: Request, response: Response)
         if serve_mode == "edit":
             return _get_edit_starter_pack(app_response.payload)
 
+    # Jobs
+
+    async def _get_payload_as_json(request: Request):
+        payload = None
+        body = await request.body()        
+        if not body:
+            return None
+        try:
+            payload = await request.json()
+        except json.JSONDecodeError:
+            raise HTTPException(status_code=400, detail="Cannot parse the payload.")
+        return payload
+
+    @app.post("/api/job/workflow/{workflow_key}")
+    async def create_workflow_job(workflow_key: str, request: Request, response: Response):
+        if not enable_jobs_api:
+            raise HTTPException(status_code=404)
+
+        crypto.verify_message_authorization_signature(f"create_job_{workflow_key}", request)
+
+        def serialize_result(data):
+            if isinstance(data, list):
+                return [serialize_result(item) for item in data]
+            if isinstance(data, dict):
+                return {k : serialize_result(v) for k, v in data.items()}
+            if isinstance(data, (str, int, float, bool, type(None))):
+                return data
+            try:
+                return json.loads(json.dumps(data))
+            except (TypeError, OverflowError):
+                return f"Can't be displayed. Value of type: {str(type(data))}."
+
+        def update_job(job_id: str, job_info: dict):
+            current_job_info = app.state.job_vault.get(job_id)
+            if not current_job_info:
+                raise RuntimeError("Job not found.")
+            merged_info = current_job_info | { "finished_at": int(time.time()) } | job_info
+            app.state.job_vault.set(job_id, merged_info)
+
+        def job_done_callback(task: asyncio.Task, job_id: str):
+            try:
+                apsr: Optional[AppProcessServerResponse] = task.result()
+                if apsr is None or apsr.status != "ok":
+                    update_job(job_id, {"status": "error"})
+                    return
+                result = None
+                if apsr.payload and apsr.payload.result:
+                    result = apsr.payload.result.get("result")
+                update_job(job_id, {
+                    "status": "complete",
+                    "result": serialize_result(result)
+                })
+            except Exception as e:
+                update_job(job_id, {"status": "error"})
+                raise e
+
+        app_response = await app_runner.init_session(InitSessionRequestPayload(
+            cookies=dict(request.cookies),
+            headers=dict(request.headers),
+            proposedSessionId=None
+        ))
+
+        if not app_response or not app_response.payload:
+            raise HTTPException(status_code=500, detail="Cannot initialize session.")
+        session_id = app_response.payload.sessionId
+        is_session_ok = await app_runner.check_session(session_id)
+        if not is_session_ok:
+            raise HTTPException(status_code=500, detail="Cannot initialize session.")
+
+        loop = asyncio.get_running_loop()
+        task = loop.create_task(app_runner.handle_event(
+            session_id, WriterEvent(
+                type="wf-builtin-run",
+                isSafe=True,
+                handler=f"$runWorkflow_{workflow_key}",
+                payload=await _get_payload_as_json(request)
+            )))
+
+        job_id = app.state.job_vault.generate_job_id()
+        app.state.job_vault.set(job_id, {
+            "id": job_id,
+            "status": "in progress",
+            "created_at": int(time.time())
+        })
+        task.add_done_callback(lambda t: job_done_callback(t, job_id))
+        return {
+            "id": job_id,
+            "token": crypto.get_hash(f"get_job_{job_id}")
+        }
+
+    @app.get("/api/job/{job_id}")
+    async def get_workflow_job(job_id: str, request: Request, response: Response):
+        if not enable_jobs_api:
+            raise HTTPException(status_code=404)
+
+        crypto.verify_message_authorization_signature(f"get_job_{job_id}", request)
+        job = app.state.job_vault.get(job_id)
+
+        if not job:
+            return JSONResponse(status_code=404, content={
+                "id": job_id,
+                "status": "not found"
+            })
+
+        status_code = 200
+        if job.get("status") == "error":
+            status_code = 400
+        
+        return JSONResponse(status_code=status_code, content=job)
 
     # Streaming
 
@@ -301,6 +482,9 @@ async def _stream_incoming_requests(websocket: WebSocket, session_id: str):
                 elif req_message.type == "stateEnquiry":
                     new_task = asyncio.create_task(
                         _handle_state_enquiry_message(websocket, session_id, req_message))
+                elif serve_mode == "edit" and req_message.type == "hashRequest":
+                    new_task = asyncio.create_task(
+                        _handle_hash_request(websocket, session_id, req_message))
                 elif serve_mode == "edit":
                     new_task = asyncio.create_task(
                         _handle_incoming_edit_message(websocket, session_id, req_message))
@@ -392,6 +576,21 @@ async def _handle_state_enquiry_message(websocket: WebSocket, session_id: str, r
             response.payload = res_payload
         await websocket.send_json(response.model_dump())
 
+    async def _handle_hash_request(websocket: WebSocket, session_id: str, req_message: WriterWebsocketIncoming):
+        response = WriterWebsocketOutgoing(
+            messageType=f"{req_message.type}Response",
+            trackingId=req_message.trackingId,
+            payload=None
+        )
+        apsr: Optional[AppProcessServerResponse] = None
+        apsr = await app_runner.handle_hash_request(session_id, HashRequestPayload(
+            message=req_message.payload.get("message", "")
+        ))
+        if apsr is not None and apsr.payload is not None:
+            response.payload = typing.cast(
+                HashRequestResponsePayload, apsr.payload).model_dump()
+        await websocket.send_json(response.model_dump())
+
     async def _stream_outgoing_announcements(websocket: WebSocket):
 
         """
@@ -489,10 +688,14 @@ async def stream(websocket: WebSocket):
             )
         )
 
+    JobVault.register(RedisJobVault)
+
     # Return
     if enable_server_setup is True:
         _execute_server_setup_hook(user_app_path)
 
+    app.state.job_vault = JobVault.create_vault()
+
     return app
 
 
@@ -529,7 +732,7 @@ def register_auth(
 ):
     auth.register(app, callback=callback, unauthorized_action=unauthorized_action)
 
-def serve(app_path: str, mode: ServeMode, port: Optional[int], host, enable_remote_edit=False, enable_server_setup=False):
+def serve(app_path: str, mode: ServeMode, port: Optional[int], host, enable_remote_edit=False, enable_server_setup=False, enable_jobs_api=False):
     """ Initialises the web server. """
 
     print_init_message()
@@ -551,7 +754,7 @@ def on_load():
         port = _next_localhost_available_port(mode_allowed_ports[mode])
 
     enable_server_setup = mode == "run" or enable_server_setup
-    app = get_asgi_app(app_path, mode, enable_remote_edit, on_load=on_load, enable_server_setup=enable_server_setup)
+    app = get_asgi_app(app_path, mode, enable_remote_edit, on_load=on_load, enable_server_setup=enable_server_setup, enable_jobs_api=enable_jobs_api)
     log_level = "warning"
     uvicorn.run(app, host=host, port=port, log_level=log_level, ws_max_size=MAX_WEBSOCKET_MESSAGE_SIZE)
 
diff --git a/src/writer/ss_types.py b/src/writer/ss_types.py
index 3bd05ba76..31191f960 100644
--- a/src/writer/ss_types.py
+++ b/src/writer/ss_types.py
@@ -26,7 +26,7 @@ def read(self) -> Any:
 ServeMode = Literal["run", "edit"]
 MessageType = Literal["sessionInit", "componentUpdate",
                       "event", "codeUpdate", "codeSave", "checkSession",
-                      "keepAlive", "stateEnquiry", "setUserinfo", "stateContent"]
+                      "keepAlive", "stateEnquiry", "setUserinfo", "stateContent", "hashRequest"]
 
 
 class AbstractTemplate(BaseModel):
@@ -120,6 +120,13 @@ class StateContentRequest(AppProcessServerRequest):
     type: Literal["stateContent"]
 
 
+class HashRequestPayload(BaseModel):
+    message: str
+
+class HashRequest(AppProcessServerRequest):
+    type: Literal["hashRequest"]
+    payload: HashRequestPayload
+
 AppProcessServerRequestPacket = Tuple[int,
                                       Optional[str], AppProcessServerRequest]
 
@@ -171,17 +178,24 @@ class StateEnquiryResponse(AppProcessServerResponse):
     payload: Optional[StateEnquiryResponsePayload]
 
 
+class HashRequestResponsePayload(BaseModel):
+    message: str
+
+class HashRequestResponse(AppProcessServerRequest):
+    type: Literal["hashRequest"]
+    payload: HashRequestResponsePayload
+
 AppProcessServerResponsePacket = Tuple[int, Optional[str], AppProcessServerResponse]
 
 
-class DataframeRecordAdded(TypedDict):
+class DataFrameRecordAdded(TypedDict):
     record: Dict[str, Any]
 
-class DataframeRecordUpdated(TypedDict):
+class DataFrameRecordUpdated(TypedDict):
     record_index: int
     record: Dict[str, Any]
 
-class DataframeRecordRemoved(TypedDict):
+class DataFrameRecordRemoved(TypedDict):
     record_index: int
 
 class WriterEventResult(TypedDict):
@@ -216,4 +230,4 @@ class WorkflowExecutionLog(BaseModel):
 
 
 class WriterConfigurationError(ValueError):
-    pass
\ No newline at end of file
+    pass
diff --git a/tests/backend/blocks/conftest.py b/tests/backend/blocks/conftest.py
index d41f61e6f..fd84d077d 100644
--- a/tests/backend/blocks/conftest.py
+++ b/tests/backend/blocks/conftest.py
@@ -27,16 +27,17 @@ def run_branch(self, component_id: str, base_outcome_id: str, execution_environm
         return f"Branch run {component_id} {base_outcome_id}"
 
     def run_workflow_by_key(self, workflow_key: str, execution_environment: Dict):
-        if "env_injection_test" in execution_environment:
-            return execution_environment.get("env_injection_test")
+        payload = execution_environment.get("payload")
+        if "env_injection_test" in payload:
+            return payload.get("env_injection_test")
         if workflow_key == "workflow1":
             return 1
         if workflow_key == "workflowDict":
             return { "a": "b" }
         if workflow_key == "duplicator":
-            return execution_environment.get("item") * 2
+            return payload.get("item") * 2
         if workflow_key == "showId":
-            return execution_environment.get("itemId")
+            return payload.get("itemId")
         if workflow_key == "boom":
             return 1/0
         raise ValueError("Workflow not found.")
diff --git a/tests/backend/blocks/test_httprequest.py b/tests/backend/blocks/test_httprequest.py
index 3d3388ff0..9aab07316 100644
--- a/tests/backend/blocks/test_httprequest.py
+++ b/tests/backend/blocks/test_httprequest.py
@@ -71,8 +71,8 @@ def test_actual_request_with_bad_path(session, runner):
     assert block.outcome == "responseError"
 
 
-def test_patched_request(session, runner):
-    requests.request = fake_request
+def test_patched_request(session, runner, monkeypatch):
+    monkeypatch.setattr("requests.request", fake_request)
     session.add_fake_component({
         "url": "https://www.duck.com"
     })
@@ -82,8 +82,8 @@ def test_patched_request(session, runner):
     assert block.result.get("body") == "Ducks are birds."
 
 
-def test_patched_request_to_nowhere(session, runner):
-    requests.request = fake_request
+def test_patched_request_to_nowhere(session, runner, monkeypatch):
+    monkeypatch.setattr("requests.request", fake_request)
     session.add_fake_component({
         "url": "https://www.cat.com"
     })
@@ -93,8 +93,8 @@ def test_patched_request_to_nowhere(session, runner):
     assert block.outcome == "connectionError"
 
 
-def test_patched_request_with_json(session, runner):
-    requests.request = fake_request
+def test_patched_request_with_json(session, runner, monkeypatch):
+    monkeypatch.setattr("requests.request", fake_request)
     session.add_fake_component({
         "url": "https://www.elephant.com",
         "method": "POST",
@@ -107,8 +107,8 @@ def test_patched_request_with_json(session, runner):
     assert block.result.get("body").get("request_body") == "Posting the elephant."
 
 
-def test_patched_request_with_json_and_bad_path(session, runner):
-    requests.request = fake_request
+def test_patched_request_with_json_and_bad_path(session, runner, monkeypatch):
+    monkeypatch.setattr("requests.request", fake_request)
     session.add_fake_component({
         "url": "https://www.elephant.com/history",
         "method": "POST",
diff --git a/tests/backend/blocks/test_runworkflow.py b/tests/backend/blocks/test_runworkflow.py
index 2e3a0d90d..5bef1f214 100644
--- a/tests/backend/blocks/test_runworkflow.py
+++ b/tests/backend/blocks/test_runworkflow.py
@@ -1,3 +1,5 @@
+import json
+
 import pytest
 from writer.blocks.runworkflow import RunWorkflow
 
@@ -12,9 +14,10 @@ def test_workflow_that_does_not_exist(session, runner):
     assert block.outcome == "error"
 
 def test_duplicator(session, runner):
+    session.session_state["item_dict"] = json.loads('{"item": 23}')
     session.add_fake_component({
         "workflowKey": "duplicator",
-        "executionEnv": '{"item": 23}'
+        "payload": "@{item_dict}"
     })
     block = RunWorkflow("fake_id", runner, {})
     block.run()
diff --git a/tests/backend/blocks/test_writernocodeapp.py b/tests/backend/blocks/test_writernocodeapp.py
index 9c8f576cd..65c4cd2e0 100644
--- a/tests/backend/blocks/test_writernocodeapp.py
+++ b/tests/backend/blocks/test_writernocodeapp.py
@@ -15,7 +15,6 @@ def fake_generate_content(application_id, app_inputs):
 
 def test_call_nocode_app(monkeypatch, session, runner):
     monkeypatch.setattr("writer.ai.apps.generate_content", fake_generate_content)
-    writer.ai.apps.generate_content = fake_generate_content
     session.add_fake_component({
         "appId": "123",
         "appInputs": json.dumps({
diff --git a/tests/backend/test_core.py b/tests/backend/test_core.py
index 810b5d293..bb1d1e04c 100644
--- a/tests/backend/test_core.py
+++ b/tests/backend/test_core.py
@@ -1297,7 +1297,7 @@ def session_verifier_2(headers: Dict[str, str]) -> None:
         assert s_invalid is None
 
 
-class TestEditableDataframe:
+class TestEditableDataFrame:
 
     def test_editable_dataframe_expose_pandas_dataframe_as_df_property(self) -> None:
         df = pandas.DataFrame({
@@ -1305,7 +1305,7 @@ def test_editable_dataframe_expose_pandas_dataframe_as_df_property(self) -> None
             "age": [25, 30, 35]
         })
 
-        edf = wf.EditableDataframe(df)
+        edf = wf.EditableDataFrame(df)
         assert edf.df is not None
         assert isinstance(edf.df, pandas.DataFrame)
 
@@ -1316,7 +1316,7 @@ def test_editable_dataframe_register_mutation_when_df_is_updated(self) -> None:
             "age": [25, 30, 35]
         })
 
-        edf = wf.EditableDataframe(df)
+        edf = wf.EditableDataFrame(df)
 
         # When
         edf.df.loc[0, "age"] = 26
@@ -1330,7 +1330,7 @@ def test_editable_dataframe_should_read_record_as_dict_based_on_record_index(sel
             "name": ["Alice", "Bob", "Charlie"],
             "age": [25, 30, 35]
         })
-        edf = wf.EditableDataframe(df)
+        edf = wf.EditableDataFrame(df)
 
         # When
         r = edf.record(0)
@@ -1346,7 +1346,7 @@ def test_editable_dataframe_should_read_record_as_dict_based_on_record_index_whe
         })
         df = df.set_index('name')
 
-        edf = wf.EditableDataframe(df)
+        edf = wf.EditableDataFrame(df)
 
         # When
         r = edf.record(0)
@@ -1363,7 +1363,7 @@ def test_editable_dataframe_should_read_record_as_dict_based_on_record_index_whe
         })
         df = df.set_index(['name', 'city'])
 
-        edf = wf.EditableDataframe(df)
+        edf = wf.EditableDataFrame(df)
 
         # When
         r = edf.record(0)
@@ -1379,7 +1379,7 @@ def test_editable_dataframe_should_process_new_record_into_dataframe(self) -> No
             "age": [25, 30, 35]
         })
 
-        edf = wf.EditableDataframe(df)
+        edf = wf.EditableDataFrame(df)
 
         # When
         edf.record_add({"record": {"name": "David", "age": 40}})
@@ -1395,7 +1395,7 @@ def test_editable_dataframe_should_process_new_record_into_dataframe_with_index(
         })
         df = df.set_index('name')
 
-        edf = wf.EditableDataframe(df)
+        edf = wf.EditableDataFrame(df)
 
         # When
         edf.record_add({"record": {"name": "David", "age": 40}})
@@ -1411,7 +1411,7 @@ def test_editable_dataframe_should_process_new_record_into_dataframe_with_multii
         })
         df = df.set_index(['name', 'city'])
 
-        edf = wf.EditableDataframe(df)
+        edf = wf.EditableDataFrame(df)
 
         # When
         edf.record_add({"record": {"name": "David", "age": 40, "city": "Berlin"}})
@@ -1428,7 +1428,7 @@ def test_editable_dataframe_should_update_existing_record_as_dateframe_with_mult
 
         df = df.set_index(['name', 'city'])
 
-        edf = wf.EditableDataframe(df)
+        edf = wf.EditableDataFrame(df)
 
         # When
         edf.record_update({"record_index": 0, "record": {"name": "Alicia", "age": 25, "city": "Paris"}})
@@ -1445,7 +1445,7 @@ def test_editable_dataframe_should_remove_existing_record_as_dateframe_with_mult
 
         df = df.set_index(['name', 'city'])
 
-        edf = wf.EditableDataframe(df)
+        edf = wf.EditableDataFrame(df)
 
         # When
         edf.record_remove({"record_index": 0})
@@ -1461,7 +1461,7 @@ def test_editable_dataframe_should_serialize_pandas_dataframe_with_multiindex(se
         })
         df = df.set_index(['name', 'city'])
 
-        edf = wf.EditableDataframe(df)
+        edf = wf.EditableDataFrame(df)
 
         # When
         table = edf.pyarrow_table()
@@ -1475,7 +1475,7 @@ def test_editable_dataframe_expose_polar_dataframe_in_df_property(self) -> None:
             "age": [25, 30, 35]
         })
 
-        edf = wf.EditableDataframe(df)
+        edf = wf.EditableDataFrame(df)
         assert edf.df is not None
         assert isinstance(edf.df, polars.DataFrame)
 
@@ -1484,7 +1484,7 @@ def test_editable_dataframe_should_read_record_from_polar_as_dict_based_on_recor
             "name": ["Alice", "Bob", "Charlie"],
             "age": [25, 30, 35]
         })
-        edf = wf.EditableDataframe(df)
+        edf = wf.EditableDataFrame(df)
 
         # When
         r = edf.record(0)
@@ -1499,7 +1499,7 @@ def test_editable_dataframe_should_process_new_record_into_polar_dataframe(self)
             "age": [25, 30, 35]
         })
 
-        edf = wf.EditableDataframe(df)
+        edf = wf.EditableDataFrame(df)
 
         # When
         edf.record_add({"record": {"name": "David", "age": 40}})
@@ -1513,7 +1513,7 @@ def test_editable_dataframe_should_update_existing_record_into_polar_dataframe(s
             "age": [25, 30, 35]
         })
 
-        edf = wf.EditableDataframe(df)
+        edf = wf.EditableDataFrame(df)
 
         # When
         edf.record_update({"record_index": 0, "record": {"name": "Alicia", "age": 25}})
@@ -1527,7 +1527,7 @@ def test_editable_dataframe_should_remove_existing_record_into_polar_dataframe(s
             "age": [25, 30, 35]
         })
 
-        edf = wf.EditableDataframe(df)
+        edf = wf.EditableDataFrame(df)
 
         # When
         edf.record_remove({"record_index": 0})
@@ -1542,7 +1542,7 @@ def test_editable_dataframe_should_serialize_polar_dataframe(self) -> None:
             "city": ["Paris", "London", "New York"]
         })
 
-        edf = wf.EditableDataframe(df)
+        edf = wf.EditableDataFrame(df)
 
         # When
         table = edf.pyarrow_table()
@@ -1558,7 +1558,7 @@ def test_editable_dataframe_expose_list_of_records_in_df_property(self) -> None:
             {"name": "Charlie", "age": 35}
         ]
 
-        edf = wf.EditableDataframe(records)
+        edf = wf.EditableDataFrame(records)
 
         assert edf.df is not None
         assert isinstance(edf.df, list)
@@ -1570,7 +1570,7 @@ def test_editable_dataframe_should_read_record_from_list_of_record_as_dict_based
             {"name": "Charlie", "age": 35}
         ]
 
-        edf = wf.EditableDataframe(records)
+        edf = wf.EditableDataFrame(records)
 
         # When
         r = edf.record(0)
@@ -1586,7 +1586,7 @@ def test_editable_dataframe_should_process_new_record_into_list_of_records(self)
             {"name": "Charlie", "age": 35}
         ]
 
-        edf = wf.EditableDataframe(records)
+        edf = wf.EditableDataFrame(records)
 
         # When
         edf.record_add({"record": {"name": "David", "age": 40}})
@@ -1602,7 +1602,7 @@ def test_editable_dataframe_should_update_existing_record_into_list_of_record(se
             {"name": "Charlie", "age": 35}
         ]
 
-        edf = wf.EditableDataframe(records)
+        edf = wf.EditableDataFrame(records)
 
         # When
         edf.record_update({"record_index": 0, "record": {"name": "Alicia", "age": 25}})
@@ -1617,7 +1617,7 @@ def test_editable_dataframe_should_remove_existing_record_into_list_of_record(se
             {"name": "Charlie", "age": 35}
         ]
 
-        edf = wf.EditableDataframe(records)
+        edf = wf.EditableDataFrame(records)
 
         # When
         edf.record_remove({"record_index": 0})
@@ -1633,7 +1633,7 @@ def test_editable_dataframe_should_serialized_list_of_records_into_pyarrow_table
             {"name": "Charlie", "age": 35}
         ]
 
-        edf = wf.EditableDataframe(records)
+        edf = wf.EditableDataFrame(records)
 
         # When
         table = edf.pyarrow_table()
diff --git a/tests/backend/test_serve.py b/tests/backend/test_serve.py
index 901813bb1..163c66eb2 100644
--- a/tests/backend/test_serve.py
+++ b/tests/backend/test_serve.py
@@ -1,4 +1,6 @@
 import mimetypes
+import time
+from typing import Any
 
 import fastapi
 import fastapi.testclient
@@ -6,6 +8,7 @@
 import writer.abstract
 import writer.serve
 from fastapi import FastAPI
+from writer import crypto
 
 from tests.backend import test_app_dir, test_multiapp_dir
 
@@ -213,4 +216,97 @@ def test_feature_flags(self):
                 "Content-Type": "application/json"
             })
             feature_flags = res.json().get("featureFlags")
-            assert feature_flags == ["flag_one", "flag_two"]
\ No newline at end of file
+            assert feature_flags == ["workflows", "flag_one", "flag_two"]
+
+    def test_create_workflow_job_api(self, monkeypatch):
+        asgi_app: fastapi.FastAPI = writer.serve.get_asgi_app(
+            test_app_dir, "run", enable_jobs_api=True)
+        monkeypatch.setenv("WRITER_SECRET_KEY", "abc")
+        workflow_key = "workflow2"
+        
+        with fastapi.testclient.TestClient(asgi_app) as client:
+            create_job_token = crypto.get_hash(f"create_job_{workflow_key}")
+            res = client.post(f"/api/job/workflow/{workflow_key}", json={
+                "proposedSessionId": None
+            }, headers={
+                "Content-Type": "application/json",
+                "Authorization": f"Bearer {create_job_token}"
+            })
+            time.sleep(1)
+            job_id = res.json().get("id")
+            get_job_token = res.json().get("token")
+            res = client.get(f"/api/job/{job_id}", headers={
+                "Authorization": f"Bearer {get_job_token}"
+            })
+            assert res.json().get("result") == "987127"
+
+    def test_create_workflow_job_api_incorrect_token(self, monkeypatch):
+        asgi_app: fastapi.FastAPI = writer.serve.get_asgi_app(
+            test_app_dir, "run", enable_jobs_api=True)
+        monkeypatch.setenv("WRITER_SECRET_KEY", "abc")
+        workflow_key = "workflow2"
+        
+        with fastapi.testclient.TestClient(asgi_app) as client:
+            create_job_token = crypto.get_hash("not_the_right_message")
+            res = client.post(f"/api/job/workflow/{workflow_key}", json={
+                "proposedSessionId": None
+            }, headers={
+                "Content-Type": "application/json",
+                "Authorization": f"Bearer {create_job_token}"
+            })
+            assert res.status_code == 403
+
+    def test_create_workflow_job_api_incorrect_token_for_get(self, monkeypatch):
+        asgi_app: fastapi.FastAPI = writer.serve.get_asgi_app(
+            test_app_dir, "run", enable_jobs_api=True)
+        monkeypatch.setenv("WRITER_SECRET_KEY", "abc")
+        workflow_key = "workflow2"
+        
+        with fastapi.testclient.TestClient(asgi_app) as client:
+            create_job_token = crypto.get_hash("not_the_right_message")
+            res = client.post(f"/api/job/workflow/{workflow_key}", json={
+                "proposedSessionId": None
+            }, headers={
+                "Content-Type": "application/json",
+                "Authorization": f"Bearer {create_job_token}"
+            })
+            time.sleep(1)
+            job_id = res.json().get("id")
+            get_job_token = "not_the_right_job_token"
+            res = client.get(f"/api/job/{job_id}", headers={
+                "Authorization": f"Bearer {get_job_token}"
+            })
+            assert res.status_code == 403
+
+
+    def test_create_workflow_job_api_custom_job_vault(self, monkeypatch):
+        monkeypatch.setenv("WRITER_SECRET_KEY", "abc")
+        monkeypatch.setenv("WRITER_PERSISTENT_STORE", "testjobvault://doesn'tmatter")
+        workflow_key = "workflow2"
+
+        class TestJobVault(writer.serve.JobVault):
+            SCHEMES = ["testjobvault://"]
+            def get(self, job_id: str):
+                value = self.vault[job_id]
+                if "result" in value:
+                    value["result"] = "Powered by TestJobVault - " + str(value["result"])
+                return value
+
+        writer.serve.JobVault.register(TestJobVault)
+        asgi_app: fastapi.FastAPI = writer.serve.get_asgi_app(
+            test_app_dir, "run", enable_jobs_api=True)
+        with fastapi.testclient.TestClient(asgi_app) as client:
+            create_job_token = crypto.get_hash(f"create_job_{workflow_key}")
+            res = client.post(f"/api/job/workflow/{workflow_key}", json={
+                "proposedSessionId": None
+            }, headers={
+                "Content-Type": "application/json",
+                "Authorization": f"Bearer {create_job_token}"
+            })
+            time.sleep(1)
+            job_id = res.json().get("id")
+            get_job_token = res.json().get("token")
+            res = client.get(f"/api/job/{job_id}", headers={
+                "Authorization": f"Bearer {get_job_token}"
+            })
+            assert res.json().get("result") == "Powered by TestJobVault - 987127"
\ No newline at end of file
diff --git a/tests/backend/testapp/.wf/components-workflows_workflow-0-hywgzgfetx6rpiqz.jsonl b/tests/backend/testapp/.wf/components-workflows_workflow-0-hywgzgfetx6rpiqz.jsonl
index 2572997d8..f2458507a 100644
--- a/tests/backend/testapp/.wf/components-workflows_workflow-0-hywgzgfetx6rpiqz.jsonl
+++ b/tests/backend/testapp/.wf/components-workflows_workflow-0-hywgzgfetx6rpiqz.jsonl
@@ -1,5 +1,5 @@
 {"id": "hywgzgfetx6rpiqz", "type": "workflows_workflow", "content": {}, "handlers": {}, "isCodeManaged": false, "parentId": "workflows_root", "position": 0}
-{"id": "rbh725i69ilo6gsr", "type": "workflows_setstate", "content": {"element": "test", "value": "test"}, "handlers": {}, "outs": [{"outId": "success", "toNodeId": "f052suq3dgzb5np7"}, {"outId": "success", "toNodeId": "f052suq3dgzb5np7"}], "parentId": "hywgzgfetx6rpiqz", "position": 0, "x": 248, "y": 204}
-{"id": "mw5rz7ay5p8pg2fm", "type": "workflows_writerclassification", "content": {}, "handlers": {}, "parentId": "hywgzgfetx6rpiqz", "position": 1, "x": 935, "y": 153}
-{"id": "3cy7f577x6xsijiq", "type": "workflows_runworkflow", "content": {}, "handlers": {}, "parentId": "hywgzgfetx6rpiqz", "position": 2, "x": 645, "y": 328}
-{"id": "c0v1pnroo32gfsye", "type": "workflows_httprequest", "content": {}, "handlers": {}, "parentId": "hywgzgfetx6rpiqz", "position": 3, "x": 497, "y": 80}
+{"id": "rbh725i69ilo6gsr", "type": "workflows_setstate", "content": {"element": "test", "value": "test"}, "handlers": {}, "isCodeManaged": false, "outs": [{"outId": "success", "toNodeId": "f052suq3dgzb5np7"}, {"outId": "success", "toNodeId": "f052suq3dgzb5np7"}], "parentId": "hywgzgfetx6rpiqz", "position": 0, "x": 248, "y": 204}
+{"id": "mw5rz7ay5p8pg2fm", "type": "workflows_writerclassification", "content": {}, "handlers": {}, "isCodeManaged": false, "parentId": "hywgzgfetx6rpiqz", "position": 1, "x": 935, "y": 153}
+{"id": "3cy7f577x6xsijiq", "type": "workflows_runworkflow", "content": {}, "handlers": {}, "isCodeManaged": false, "parentId": "hywgzgfetx6rpiqz", "position": 2, "x": 645, "y": 328}
+{"id": "c0v1pnroo32gfsye", "type": "workflows_httprequest", "content": {}, "handlers": {}, "isCodeManaged": false, "parentId": "hywgzgfetx6rpiqz", "position": 3, "x": 497, "y": 80}
diff --git a/tests/backend/testapp/.wf/components-workflows_workflow-1-8ffkuce0ermsm9dr.jsonl b/tests/backend/testapp/.wf/components-workflows_workflow-1-8ffkuce0ermsm9dr.jsonl
new file mode 100644
index 000000000..c2ec51bee
--- /dev/null
+++ b/tests/backend/testapp/.wf/components-workflows_workflow-1-8ffkuce0ermsm9dr.jsonl
@@ -0,0 +1,2 @@
+{"id": "8ffkuce0ermsm9dr", "type": "workflows_workflow", "content": {"key": "workflow2"}, "handlers": {}, "parentId": "workflows_root", "position": 1}
+{"id": "6ymlyaewhil88bck", "type": "workflows_returnvalue", "content": {"value": "987127"}, "handlers": {}, "parentId": "8ffkuce0ermsm9dr", "position": 0, "x": 408, "y": 172}
diff --git a/tests/backend/testapp/.wf/metadata.json b/tests/backend/testapp/.wf/metadata.json
index e47807980..8792752a3 100644
--- a/tests/backend/testapp/.wf/metadata.json
+++ b/tests/backend/testapp/.wf/metadata.json
@@ -1,3 +1,3 @@
 {
-    "writer_version": "0.8.0rc1"
+    "writer_version": "0.8.3rc1"
 }
\ No newline at end of file
diff --git a/tests/backend/testapp/main.py b/tests/backend/testapp/main.py
index 9542bfcac..6e08476ba 100644
--- a/tests/backend/testapp/main.py
+++ b/tests/backend/testapp/main.py
@@ -10,6 +10,7 @@
 import writer.core
 from writer import WriterUIManager
 
+writer.Config.feature_flags.append("workflows")
 writer.Config.feature_flags.append("flag_one")
 writer.Config.feature_flags.append("flag_two")
 
diff --git a/tests/e2e/presets/workflows/.wf/components-workflows_workflow-0-auxjfi7lssb268ly.jsonl b/tests/e2e/presets/workflows/.wf/components-workflows_workflow-0-auxjfi7lssb268ly.jsonl
index 4216ffb42..e1d0ebeda 100644
--- a/tests/e2e/presets/workflows/.wf/components-workflows_workflow-0-auxjfi7lssb268ly.jsonl
+++ b/tests/e2e/presets/workflows/.wf/components-workflows_workflow-0-auxjfi7lssb268ly.jsonl
@@ -1,4 +1,4 @@
 {"id": "auxjfi7lssb268ly", "type": "workflows_workflow", "content": {"key": "handle_object"}, "handlers": {}, "isCodeManaged": false, "parentId": "workflows_root", "position": 0}
 {"id": "8y56lmia3wu99jhl", "type": "workflows_parsejson", "content": {"plainText": "{\"color\": \"@{payload}\", \"object\": \"@{context.item.object}\"}"}, "handlers": {}, "isCodeManaged": false, "outs": [{"toNodeId": "xy6vdzh2pm55alc0", "outId": "success"}], "parentId": "auxjfi7lssb268ly", "position": 0, "x": 150, "y": 319}
 {"id": "xy6vdzh2pm55alc0", "type": "workflows_setstate", "content": {"alias": "Save the JSON", "element": "json_e2e", "value": "@{result}"}, "handlers": {}, "isCodeManaged": false, "outs": [{"toNodeId": "mve8ssvtk0pvw5yf", "outId": "success"}], "parentId": "auxjfi7lssb268ly", "position": 1, "x": 537, "y": 321}
-{"id": "mve8ssvtk0pvw5yf", "type": "workflows_returnvalue", "content": {"alias": "", "value": "@{json_e2e}"}, "handlers": {}, "isCodeManaged": false, "parentId": "auxjfi7lssb268ly", "position": 2, "x": 876, "y": 317}
+{"id": "mve8ssvtk0pvw5yf", "type": "workflows_returnvalue", "content": {"alias": "", "value": "@{json_e2e}"}, "handlers": {}, "isCodeManaged": false, "parentId": "auxjfi7lssb268ly", "position": 2, "x": 885, "y": 331}
diff --git a/tests/e2e/presets/workflows/.wf/components-workflows_workflow-1-n20uom1t17z7c1h8.jsonl b/tests/e2e/presets/workflows/.wf/components-workflows_workflow-1-n20uom1t17z7c1h8.jsonl
new file mode 100644
index 000000000..d6dc3cbaf
--- /dev/null
+++ b/tests/e2e/presets/workflows/.wf/components-workflows_workflow-1-n20uom1t17z7c1h8.jsonl
@@ -0,0 +1,2 @@
+{"id": "n20uom1t17z7c1h8", "type": "workflows_workflow", "content": {"key": "repeat_payload"}, "handlers": {}, "isCodeManaged": false, "parentId": "workflows_root", "position": 1}
+{"id": "5rwx9ukywrkz2f8t", "type": "workflows_returnvalue", "content": {"alias": "Repeat payload", "value": "@{payload}"}, "handlers": {}, "isCodeManaged": false, "parentId": "n20uom1t17z7c1h8", "position": 0, "x": 371, "y": 270}
diff --git a/tests/e2e/presets/workflows/.wf/components-workflows_workflow-2-bjhk2qqylt0ijn50.jsonl b/tests/e2e/presets/workflows/.wf/components-workflows_workflow-2-bjhk2qqylt0ijn50.jsonl
new file mode 100644
index 000000000..bbcb3c43c
--- /dev/null
+++ b/tests/e2e/presets/workflows/.wf/components-workflows_workflow-2-bjhk2qqylt0ijn50.jsonl
@@ -0,0 +1,3 @@
+{"id": "bjhk2qqylt0ijn50", "type": "workflows_workflow", "content": {}, "handlers": {}, "isCodeManaged": false, "parentId": "workflows_root", "position": 2}
+{"id": "60xs6i5w0ckdiymh", "type": "workflows_runworkflow", "content": {"payload": "blue", "workflowKey": "repeat_payload"}, "handlers": {}, "isCodeManaged": false, "outs": [{"toNodeId": "htzhnqlqe1u02l3o", "outId": "success"}], "parentId": "bjhk2qqylt0ijn50", "position": 0, "x": 244, "y": 282}
+{"id": "htzhnqlqe1u02l3o", "type": "workflows_returnvalue", "content": {"value": "@{result}"}, "handlers": {}, "isCodeManaged": false, "parentId": "bjhk2qqylt0ijn50", "position": 1, "x": 622, "y": 287}
diff --git a/tests/e2e/presets/workflows/.wf/metadata.json b/tests/e2e/presets/workflows/.wf/metadata.json
index da9c77c7c..8792752a3 100644
--- a/tests/e2e/presets/workflows/.wf/metadata.json
+++ b/tests/e2e/presets/workflows/.wf/metadata.json
@@ -1,3 +1,3 @@
 {
-    "writer_version": "0.8.0rc3"
+    "writer_version": "0.8.3rc1"
 }
\ No newline at end of file
diff --git a/tests/e2e/tests/state.spec.ts b/tests/e2e/tests/state.spec.ts
index 1e7e5f473..8466dda6d 100644
--- a/tests/e2e/tests/state.spec.ts
+++ b/tests/e2e/tests/state.spec.ts
@@ -4,7 +4,7 @@ import { test, expect } from "@playwright/test";
 const setTextField = async (page, text) => {
 	await page.locator('div.CoreText.component').click();
 	await page
-		.locator('.BuilderFieldsText[data-automation-key="text"] .templateInput')
+		.locator('.BuilderFieldsText[data-automation-key="text"] textarea')
 		.fill(text);
 }
 
diff --git a/tests/e2e/tests/stateAutocompletion.spec.ts b/tests/e2e/tests/stateAutocompletion.spec.ts
index 47ed5c67e..5deab244e 100644
--- a/tests/e2e/tests/stateAutocompletion.spec.ts
+++ b/tests/e2e/tests/stateAutocompletion.spec.ts
@@ -4,7 +4,7 @@ import { test, expect } from "@playwright/test";
 const setTextField = async (page, text) => {
 	await page.locator('div.CoreText.component').click();
 	await page
-		.locator('.BuilderFieldsText[data-automation-key="text"] .templateInput')
+		.locator('.BuilderFieldsText[data-automation-key="text"] textarea')
 		.fill(text);
 }
 
@@ -29,7 +29,7 @@ test.describe("state autocompletion", () => {
 			await setTextField(page, "@{types.");
 			page.locator('.BuilderFieldsText[data-automation-key="text"] .fieldStateAutocomplete span.prop:text-matches("string")').click();
 			await expect(page
-				.locator('.BuilderFieldsText[data-automation-key="text"] .templateInput'))
+				.locator('.BuilderFieldsText[data-automation-key="text"] textarea'))
 				.toHaveValue("@{types.string");
 		});
 		test("counter", async ({ page }) => {
@@ -55,7 +55,7 @@ test.describe("state autocompletion", () => {
 		test("options should show on focus", async ({ page }) => {
 			await page.locator('div.CoreText.component').click();
 			await page
-				.locator('.BuilderFieldsText[data-automation-key="useMarkdown"] .templateInput')
+				.locator('.BuilderFieldsText[data-automation-key="useMarkdown"] input')
 				.focus();
 			await expect(page.locator('.BuilderFieldsText[data-automation-key="useMarkdown"] datalist option[value="yes"]')).toHaveCount(1);
 			await expect(page.locator('.BuilderFieldsText[data-automation-key="useMarkdown"] datalist option[value="no"]')).toHaveCount(1);
@@ -71,25 +71,25 @@ test.describe("state autocompletion", () => {
 
 			await page.locator('div.CoreRadioInput.component > label').click();
 			await page
-				.locator(`${FIELD} button.chip:text-matches("Static List")`)
+				.locator(`${FIELD} button.WdsTab:text-matches("Static List")`)
 				.click();
 			await page
-				.locator(`${FIELD} .inputKey .templateInput`)
+				.locator(`${FIELD} .inputKey input`)
 				.fill("@{types.");
 			await expect(page.locator(`${FIELD} .inputKey .fieldStateAutocomplete span.prop`)).toHaveText(["none", "string", "integer", "float"]);
 			await expect(page.locator(`${FIELD} .inputKey .fieldStateAutocomplete span.type`)).toHaveText(["null", "string", "number", "number"]);
 			page.locator(`${FIELD} .inputKey .fieldStateAutocomplete span.prop:text-matches("string")`).click();
 			await expect(page
-				.locator(`${FIELD} .inputKey .templateInput`))
+				.locator(`${FIELD} .inputKey input`))
 				.toHaveValue("@{types.string");
 			await page
-				.locator(`${FIELD} .inputValue .templateInput`)
+				.locator(`${FIELD} .inputValue input`)
 				.fill("@{types.");
 			await expect(page.locator(`${FIELD} .inputValue .fieldStateAutocomplete span.prop`)).toHaveText(["none", "string", "integer", "float"]);
 			await expect(page.locator(`${FIELD} .inputValue .fieldStateAutocomplete span.type`)).toHaveText(["null", "string", "number", "number"]);
 			page.locator(`${FIELD} .inputValue .fieldStateAutocomplete span.prop:text-matches("string")`).click();
 			await expect(page
-				.locator(`${FIELD} .inputValue .templateInput`))
+				.locator(`${FIELD} .inputValue input`))
 				.toHaveValue("@{types.string");
 			await page.locator('[data-automation-action="delete"]').click();
 		});
@@ -102,16 +102,16 @@ test.describe("state autocompletion", () => {
 
 			await page.locator('div.CoreRadioInput.component > label').click();
 			await page
-				.locator(`${FIELD} button.chip:text-matches("JSON")`)
+				.locator(`${FIELD} button.WdsTab:text-matches("JSON")`)
 				.click();
 			await page
-				.locator(`${FIELD} .templateInput`)
+				.locator(`${FIELD} textarea`)
 				.fill("@{types.");
 			await expect(page.locator(`${FIELD} .fieldStateAutocomplete span.prop`)).toHaveText(["none", "string", "integer", "float"]);
 			await expect(page.locator(`${FIELD} .fieldStateAutocomplete span.type`)).toHaveText(["null", "string", "number", "number"]);
 			page.locator(`${FIELD} .fieldStateAutocomplete span.prop:text-matches("string")`).click();
 			await expect(page
-				.locator(`${FIELD} .templateInput`))
+				.locator(`${FIELD} textarea`))
 				.toHaveValue("@{types.string");
 			await page.locator('[data-automation-action="delete"]').click();
 		});
@@ -122,16 +122,16 @@ test.describe("state autocompletion", () => {
 			const FIELD = `.${type}[data-automation-key="${key}"]`; 
 			await page.locator(componentSelector).click();
 			await page
-				.locator(`${FIELD} button.chip:text-matches("CSS")`)
+				.locator(`${FIELD} button.WdsTab:text-matches("CSS")`)
 				.click();
 			await page
-				.locator(`${FIELD} .templateInput`)
+				.locator(`${FIELD} .BuilderTemplateInput input`)
 				.fill("@{types.");
 			await expect(page.locator(`${FIELD} .fieldStateAutocomplete span.prop`)).toHaveText(["none", "string", "integer", "float"]);
 			await expect(page.locator(`${FIELD} .fieldStateAutocomplete span.type`)).toHaveText(["null", "string", "number", "number"]);
 			page.locator(`${FIELD} .fieldStateAutocomplete span.prop:text-matches("string")`).click();
 			await expect(page
-				.locator(`${FIELD} .templateInput`))
+				.locator(`${FIELD} .BuilderTemplateInput input`))
 				.toHaveValue("@{types.string");
 		});
 	}
diff --git a/tests/e2e/tests/workflows.spec.ts b/tests/e2e/tests/workflows.spec.ts
index e579b960c..8854efd19 100644
--- a/tests/e2e/tests/workflows.spec.ts
+++ b/tests/e2e/tests/workflows.spec.ts
@@ -22,7 +22,7 @@ test.describe("Workflows", () => {
 		{ object: "cup", color: "pink" },
 	];
 
-	inputData.forEach(({ object, color }) => {
+	for (const { object, color } of inputData) {
 		test(`Test context and payload in Workflows for ${object} ${color}`, async ({
 			page,
 		}) => {
@@ -41,16 +41,14 @@ test.describe("Workflows", () => {
 				`.BuilderModal [data-automation-key="return-value"]`,
 			);
 			const expectedTexts = ["color", color, "object", object];
-			expectedTexts.forEach(
-				async (text) => await expect(resultsLocator).toContainText(text),
-			);
-			expectedTexts.forEach(
-				async (text) => await expect(returnValueLocator).toContainText(text),
-			);
+			for (const text of expectedTexts) {
+				await expect(resultsLocator).toContainText(text);
+				await expect(returnValueLocator).toContainText(text);
+			}
 		});
-	});
+	}
 
-	test("Create workflow and run workflow handle_object from it", async ({
+	test("Create workflow and run workflow repeat_payload from it", async ({
 		page,
 	}) => {
 		await page.locator(`[data-automation-action="set-mode-workflows"]`).click();
@@ -75,16 +73,9 @@ test.describe("Workflows", () => {
 		const returnValueBlock = page.locator(`.WorkflowsNode.wf-type-workflows_returnvalue`);
 
 		await runWorkflowBlock.click();
-		await page.locator(`.BuilderFieldsText[data-automation-key="workflowKey"] input`).fill("handle_object");
-		const executionEnv = {
-			"payload": "blue",
-			"context": {
-				"item": {
-					"object": "bottle"
-				}
-			}
-		};
-		await page.locator(`.BuilderFieldsObject[data-automation-key="executionEnv"] textarea`).fill(JSON.stringify(executionEnv));
+		await page.locator(`.BuilderFieldsText[data-automation-key="workflowKey"] input`).fill("repeat_payload");
+		const payload = "blue";
+		await page.locator(`.BuilderFieldsText[data-automation-key="payload"] textarea`).fill(payload);
 		await page.locator(`[data-automation-action="collapse-settings"]`).click();
 
 		await runWorkflowBlock.locator(".ball.success").dragTo(returnValueBlock);
@@ -96,16 +87,13 @@ test.describe("Workflows", () => {
 
 		await page.locator(`[data-automation-action="toggle-panel"][data-automation-key="log"]`).click();
 		const rowsLocator = page.locator(".BuilderPanelSwitcher div.row");
-		await expect(rowsLocator).toHaveCount(5);
+		await expect(rowsLocator).toHaveCount(3);
 		const rowLocator = rowsLocator.filter({ hasText: "Return value" }).first();;
 		await rowLocator.getByRole("button", { name: "Details" }).click();
 		await expect(page.locator(".BuilderModal")).toBeVisible();
 		const returnValueLocator = page.locator(
 			`.BuilderModal [data-automation-key="return-value"]`,
 		);
-		const expectedTexts = ["color", "blue", "object", "bottle"];
-		expectedTexts.forEach(
-			async (text) => await expect(returnValueLocator).toContainText(text),
-		);
+		await expect(returnValueLocator).toContainText("blue");
 	});
 });
\ No newline at end of file