diff --git a/.husky/pre-push b/.husky/pre-push
index 70f6f75ef..481eb1137 100755
--- a/.husky/pre-push
+++ b/.husky/pre-push
@@ -15,7 +15,7 @@ yarn yt:backend clean-test-db
 # yarn pm2 save
 
 # run tests one after the other to be sure the data doesn't overlap and make some of them fail
-yarn test --ci --bail --forceExit
+yarn test --ci --bail --forceExit --coverage
 
 # restart backends and parsers with 'development' environment
 # yarn pm2 restart -a --env development platforms/ecosystem.dev.config.js
diff --git a/.yarn/cache/@babel-runtime-npm-7.20.1-8f9256f2ed-00567a333d.zip b/.yarn/cache/@babel-runtime-npm-7.20.1-8f9256f2ed-00567a333d.zip
new file mode 100644
index 000000000..357ec9657
Binary files /dev/null and b/.yarn/cache/@babel-runtime-npm-7.20.1-8f9256f2ed-00567a333d.zip differ
diff --git a/.yarn/cache/@material-ui-utils-npm-5.0.0-beta.5-3a2f71beeb-397d318861.zip b/.yarn/cache/@material-ui-utils-npm-5.0.0-beta.5-3a2f71beeb-397d318861.zip
deleted file mode 100644
index 102b58bef..000000000
Binary files a/.yarn/cache/@material-ui-utils-npm-5.0.0-beta.5-3a2f71beeb-397d318861.zip and /dev/null differ
diff --git a/.yarn/cache/@material-ui-x-license-npm-4.0.0-alpha.37-0a3717b097-71861879e4.zip b/.yarn/cache/@material-ui-x-license-npm-4.0.0-alpha.37-0a3717b097-71861879e4.zip
deleted file mode 100644
index 964746ac3..000000000
Binary files a/.yarn/cache/@material-ui-x-license-npm-4.0.0-alpha.37-0a3717b097-71861879e4.zip and /dev/null differ
diff --git a/.yarn/cache/@mui-utils-npm-5.10.14-254df22c29-8b30b0a2d2.zip b/.yarn/cache/@mui-utils-npm-5.10.14-254df22c29-8b30b0a2d2.zip
new file mode 100644
index 000000000..ff5ef1540
Binary files /dev/null and b/.yarn/cache/@mui-utils-npm-5.10.14-254df22c29-8b30b0a2d2.zip differ
diff --git a/.yarn/cache/@mui-x-data-grid-npm-5.12.3-f977f61a06-afe320b06a.zip b/.yarn/cache/@mui-x-data-grid-npm-5.12.3-f977f61a06-afe320b06a.zip
deleted file mode 100644
index 4e7d69161..000000000
Binary files a/.yarn/cache/@mui-x-data-grid-npm-5.12.3-f977f61a06-afe320b06a.zip and /dev/null differ
diff --git a/.yarn/cache/@mui-x-data-grid-npm-5.17.11-ed6fcdf726-ea64d67e6b.zip b/.yarn/cache/@mui-x-data-grid-npm-5.17.11-ed6fcdf726-ea64d67e6b.zip
new file mode 100644
index 000000000..b4ce35034
Binary files /dev/null and b/.yarn/cache/@mui-x-data-grid-npm-5.17.11-ed6fcdf726-ea64d67e6b.zip differ
diff --git a/.yarn/cache/@react-theming-storybook-addon-npm-1.1.7-f55998d2be-dc8ec3a7eb.zip b/.yarn/cache/@react-theming-storybook-addon-npm-1.1.10-7395cee532-cd0557c01b.zip
similarity index 95%
rename from .yarn/cache/@react-theming-storybook-addon-npm-1.1.7-f55998d2be-dc8ec3a7eb.zip
rename to .yarn/cache/@react-theming-storybook-addon-npm-1.1.10-7395cee532-cd0557c01b.zip
index 1098f590d..672b17aa7 100644
Binary files a/.yarn/cache/@react-theming-storybook-addon-npm-1.1.7-f55998d2be-dc8ec3a7eb.zip and b/.yarn/cache/@react-theming-storybook-addon-npm-1.1.10-7395cee532-cd0557c01b.zip differ
diff --git a/.yarn/cache/@storybook-addon-actions-npm-6.5.13-c87e087712-2679174b14.zip b/.yarn/cache/@storybook-addon-actions-npm-6.5.14-12467dd890-536a5afb4b.zip
similarity index 92%
rename from .yarn/cache/@storybook-addon-actions-npm-6.5.13-c87e087712-2679174b14.zip
rename to .yarn/cache/@storybook-addon-actions-npm-6.5.14-12467dd890-536a5afb4b.zip
index ae62e229e..ce8934c54 100644
Binary files a/.yarn/cache/@storybook-addon-actions-npm-6.5.13-c87e087712-2679174b14.zip and b/.yarn/cache/@storybook-addon-actions-npm-6.5.14-12467dd890-536a5afb4b.zip differ
diff --git a/.yarn/cache/@storybook-addon-backgrounds-npm-6.5.13-fd2b59f76b-1b18255e0d.zip b/.yarn/cache/@storybook-addon-backgrounds-npm-6.5.14-9f5c616743-10e7833578.zip
similarity index 89%
rename from .yarn/cache/@storybook-addon-backgrounds-npm-6.5.13-fd2b59f76b-1b18255e0d.zip
rename to .yarn/cache/@storybook-addon-backgrounds-npm-6.5.14-9f5c616743-10e7833578.zip
index 744ed8aec..2d41dd471 100644
Binary files a/.yarn/cache/@storybook-addon-backgrounds-npm-6.5.13-fd2b59f76b-1b18255e0d.zip and b/.yarn/cache/@storybook-addon-backgrounds-npm-6.5.14-9f5c616743-10e7833578.zip differ
diff --git a/.yarn/cache/@storybook-addon-controls-npm-6.5.13-71c8b111ed-a4f8633268.zip b/.yarn/cache/@storybook-addon-controls-npm-6.5.14-75d4ea6ee3-cebb9b33f9.zip
similarity index 88%
rename from .yarn/cache/@storybook-addon-controls-npm-6.5.13-71c8b111ed-a4f8633268.zip
rename to .yarn/cache/@storybook-addon-controls-npm-6.5.14-75d4ea6ee3-cebb9b33f9.zip
index 1ab883a67..0e9b468cb 100644
Binary files a/.yarn/cache/@storybook-addon-controls-npm-6.5.13-71c8b111ed-a4f8633268.zip and b/.yarn/cache/@storybook-addon-controls-npm-6.5.14-75d4ea6ee3-cebb9b33f9.zip differ
diff --git a/.yarn/cache/@storybook-addon-docs-npm-6.5.13-1dd9c770f4-41755593a2.zip b/.yarn/cache/@storybook-addon-docs-npm-6.5.14-f5a3128720-1fbeea31f1.zip
similarity index 95%
rename from .yarn/cache/@storybook-addon-docs-npm-6.5.13-1dd9c770f4-41755593a2.zip
rename to .yarn/cache/@storybook-addon-docs-npm-6.5.14-f5a3128720-1fbeea31f1.zip
index 8dc9e083a..b8f8fbf70 100644
Binary files a/.yarn/cache/@storybook-addon-docs-npm-6.5.13-1dd9c770f4-41755593a2.zip and b/.yarn/cache/@storybook-addon-docs-npm-6.5.14-f5a3128720-1fbeea31f1.zip differ
diff --git a/.yarn/cache/@storybook-addon-essentials-npm-6.5.13-cbf57546e6-a7b1b34c7f.zip b/.yarn/cache/@storybook-addon-essentials-npm-6.5.14-48d13550f2-2f0b5d67e1.zip
similarity index 83%
rename from .yarn/cache/@storybook-addon-essentials-npm-6.5.13-cbf57546e6-a7b1b34c7f.zip
rename to .yarn/cache/@storybook-addon-essentials-npm-6.5.14-48d13550f2-2f0b5d67e1.zip
index b341397db..3744bf2d6 100644
Binary files a/.yarn/cache/@storybook-addon-essentials-npm-6.5.13-cbf57546e6-a7b1b34c7f.zip and b/.yarn/cache/@storybook-addon-essentials-npm-6.5.14-48d13550f2-2f0b5d67e1.zip differ
diff --git a/.yarn/cache/@storybook-addon-interactions-npm-6.5.13-ddf1fe3273-5c940dc55b.zip b/.yarn/cache/@storybook-addon-interactions-npm-6.5.14-a10d498216-50f5cd4258.zip
similarity index 96%
rename from .yarn/cache/@storybook-addon-interactions-npm-6.5.13-ddf1fe3273-5c940dc55b.zip
rename to .yarn/cache/@storybook-addon-interactions-npm-6.5.14-a10d498216-50f5cd4258.zip
index a5e7f6865..18e90163b 100644
Binary files a/.yarn/cache/@storybook-addon-interactions-npm-6.5.13-ddf1fe3273-5c940dc55b.zip and b/.yarn/cache/@storybook-addon-interactions-npm-6.5.14-a10d498216-50f5cd4258.zip differ
diff --git a/.yarn/cache/@storybook-addon-links-npm-6.5.13-e7115940f1-0bbe146523.zip b/.yarn/cache/@storybook-addon-links-npm-6.5.14-b982ebbe6e-7dc537aab3.zip
similarity index 97%
rename from .yarn/cache/@storybook-addon-links-npm-6.5.13-e7115940f1-0bbe146523.zip
rename to .yarn/cache/@storybook-addon-links-npm-6.5.14-b982ebbe6e-7dc537aab3.zip
index ea7d31ced..b9d24c8fd 100644
Binary files a/.yarn/cache/@storybook-addon-links-npm-6.5.13-e7115940f1-0bbe146523.zip and b/.yarn/cache/@storybook-addon-links-npm-6.5.14-b982ebbe6e-7dc537aab3.zip differ
diff --git a/.yarn/cache/@storybook-addon-measure-npm-6.5.13-e87716abca-4bf1823f83.zip b/.yarn/cache/@storybook-addon-measure-npm-6.5.14-2379006852-e6adcde744.zip
similarity index 93%
rename from .yarn/cache/@storybook-addon-measure-npm-6.5.13-e87716abca-4bf1823f83.zip
rename to .yarn/cache/@storybook-addon-measure-npm-6.5.14-2379006852-e6adcde744.zip
index dc6094d09..05f363145 100644
Binary files a/.yarn/cache/@storybook-addon-measure-npm-6.5.13-e87716abca-4bf1823f83.zip and b/.yarn/cache/@storybook-addon-measure-npm-6.5.14-2379006852-e6adcde744.zip differ
diff --git a/.yarn/cache/@storybook-addon-outline-npm-6.5.13-3dbfd5b638-f9ea9278ba.zip b/.yarn/cache/@storybook-addon-outline-npm-6.5.14-77667caad3-e38d860cef.zip
similarity index 95%
rename from .yarn/cache/@storybook-addon-outline-npm-6.5.13-3dbfd5b638-f9ea9278ba.zip
rename to .yarn/cache/@storybook-addon-outline-npm-6.5.14-77667caad3-e38d860cef.zip
index 6c4b23688..973fed8e8 100644
Binary files a/.yarn/cache/@storybook-addon-outline-npm-6.5.13-3dbfd5b638-f9ea9278ba.zip and b/.yarn/cache/@storybook-addon-outline-npm-6.5.14-77667caad3-e38d860cef.zip differ
diff --git a/.yarn/cache/@storybook-addon-toolbars-npm-6.5.13-a49e99ffdd-ec85023ffd.zip b/.yarn/cache/@storybook-addon-toolbars-npm-6.5.14-de6e55f25d-99e39310c2.zip
similarity index 93%
rename from .yarn/cache/@storybook-addon-toolbars-npm-6.5.13-a49e99ffdd-ec85023ffd.zip
rename to .yarn/cache/@storybook-addon-toolbars-npm-6.5.14-de6e55f25d-99e39310c2.zip
index d8c521ed3..6d2bd53cd 100644
Binary files a/.yarn/cache/@storybook-addon-toolbars-npm-6.5.13-a49e99ffdd-ec85023ffd.zip and b/.yarn/cache/@storybook-addon-toolbars-npm-6.5.14-de6e55f25d-99e39310c2.zip differ
diff --git a/.yarn/cache/@storybook-addon-viewport-npm-6.5.13-aff5fa0e1e-ff602c8080.zip b/.yarn/cache/@storybook-addon-viewport-npm-6.5.14-8dbb73f28b-66f66715d3.zip
similarity index 91%
rename from .yarn/cache/@storybook-addon-viewport-npm-6.5.13-aff5fa0e1e-ff602c8080.zip
rename to .yarn/cache/@storybook-addon-viewport-npm-6.5.14-8dbb73f28b-66f66715d3.zip
index c80eed3ca..f46e98ede 100644
Binary files a/.yarn/cache/@storybook-addon-viewport-npm-6.5.13-aff5fa0e1e-ff602c8080.zip and b/.yarn/cache/@storybook-addon-viewport-npm-6.5.14-8dbb73f28b-66f66715d3.zip differ
diff --git a/.yarn/cache/@storybook-addons-npm-6.5.14-89cab29f89-99d06641ba.zip b/.yarn/cache/@storybook-addons-npm-6.5.14-89cab29f89-99d06641ba.zip
new file mode 100644
index 000000000..a19cc75aa
Binary files /dev/null and b/.yarn/cache/@storybook-addons-npm-6.5.14-89cab29f89-99d06641ba.zip differ
diff --git a/.yarn/cache/@storybook-api-npm-6.5.14-2a8a426bba-0d421c3211.zip b/.yarn/cache/@storybook-api-npm-6.5.14-2a8a426bba-0d421c3211.zip
new file mode 100644
index 000000000..2bcca94bb
Binary files /dev/null and b/.yarn/cache/@storybook-api-npm-6.5.14-2a8a426bba-0d421c3211.zip differ
diff --git a/.yarn/cache/@storybook-builder-webpack4-npm-6.5.13-aeacd78720-a95fea3951.zip b/.yarn/cache/@storybook-builder-webpack4-npm-6.5.14-cf6facf18e-16749d2d03.zip
similarity index 94%
rename from .yarn/cache/@storybook-builder-webpack4-npm-6.5.13-aeacd78720-a95fea3951.zip
rename to .yarn/cache/@storybook-builder-webpack4-npm-6.5.14-cf6facf18e-16749d2d03.zip
index 4f9d8783f..ab911cd08 100644
Binary files a/.yarn/cache/@storybook-builder-webpack4-npm-6.5.13-aeacd78720-a95fea3951.zip and b/.yarn/cache/@storybook-builder-webpack4-npm-6.5.14-cf6facf18e-16749d2d03.zip differ
diff --git a/.yarn/cache/@storybook-builder-webpack5-npm-6.5.13-fcd71cd3ce-f980ab5c83.zip b/.yarn/cache/@storybook-builder-webpack5-npm-6.5.14-048bb9e46a-3aa60285ba.zip
similarity index 95%
rename from .yarn/cache/@storybook-builder-webpack5-npm-6.5.13-fcd71cd3ce-f980ab5c83.zip
rename to .yarn/cache/@storybook-builder-webpack5-npm-6.5.14-048bb9e46a-3aa60285ba.zip
index caefff215..744cbb707 100644
Binary files a/.yarn/cache/@storybook-builder-webpack5-npm-6.5.13-fcd71cd3ce-f980ab5c83.zip and b/.yarn/cache/@storybook-builder-webpack5-npm-6.5.14-048bb9e46a-3aa60285ba.zip differ
diff --git a/.yarn/cache/@storybook-channel-postmessage-npm-6.5.13-9b45c68c33-8d6ccfff2a.zip b/.yarn/cache/@storybook-channel-postmessage-npm-6.5.14-a6254145d0-2ea7aed1e4.zip
similarity index 92%
rename from .yarn/cache/@storybook-channel-postmessage-npm-6.5.13-9b45c68c33-8d6ccfff2a.zip
rename to .yarn/cache/@storybook-channel-postmessage-npm-6.5.14-a6254145d0-2ea7aed1e4.zip
index a987c5632..18622de94 100644
Binary files a/.yarn/cache/@storybook-channel-postmessage-npm-6.5.13-9b45c68c33-8d6ccfff2a.zip and b/.yarn/cache/@storybook-channel-postmessage-npm-6.5.14-a6254145d0-2ea7aed1e4.zip differ
diff --git a/.yarn/cache/@storybook-channel-websocket-npm-6.5.13-35b56342ff-16e3b1a51a.zip b/.yarn/cache/@storybook-channel-websocket-npm-6.5.14-4ead76a08e-76bd573489.zip
similarity index 86%
rename from .yarn/cache/@storybook-channel-websocket-npm-6.5.13-35b56342ff-16e3b1a51a.zip
rename to .yarn/cache/@storybook-channel-websocket-npm-6.5.14-4ead76a08e-76bd573489.zip
index 1f3d56808..b3751a737 100644
Binary files a/.yarn/cache/@storybook-channel-websocket-npm-6.5.13-35b56342ff-16e3b1a51a.zip and b/.yarn/cache/@storybook-channel-websocket-npm-6.5.14-4ead76a08e-76bd573489.zip differ
diff --git a/.yarn/cache/@storybook-channels-npm-6.5.14-9e451054bb-ff1ee3fea3.zip b/.yarn/cache/@storybook-channels-npm-6.5.14-9e451054bb-ff1ee3fea3.zip
new file mode 100644
index 000000000..41b7c1537
Binary files /dev/null and b/.yarn/cache/@storybook-channels-npm-6.5.14-9e451054bb-ff1ee3fea3.zip differ
diff --git a/.yarn/cache/@storybook-client-api-npm-6.5.13-9e2abd4d1f-b0af25786b.zip b/.yarn/cache/@storybook-client-api-npm-6.5.14-c46568f1a5-46fe2bec19.zip
similarity index 94%
rename from .yarn/cache/@storybook-client-api-npm-6.5.13-9e2abd4d1f-b0af25786b.zip
rename to .yarn/cache/@storybook-client-api-npm-6.5.14-c46568f1a5-46fe2bec19.zip
index a8c1279c2..3f53eb1a1 100644
Binary files a/.yarn/cache/@storybook-client-api-npm-6.5.13-9e2abd4d1f-b0af25786b.zip and b/.yarn/cache/@storybook-client-api-npm-6.5.14-c46568f1a5-46fe2bec19.zip differ
diff --git a/.yarn/cache/@storybook-client-logger-npm-6.5.14-89c2edc860-29cc0b58db.zip b/.yarn/cache/@storybook-client-logger-npm-6.5.14-89c2edc860-29cc0b58db.zip
new file mode 100644
index 000000000..eb1b8909d
Binary files /dev/null and b/.yarn/cache/@storybook-client-logger-npm-6.5.14-89c2edc860-29cc0b58db.zip differ
diff --git a/.yarn/cache/@storybook-components-npm-6.5.13-f35259c4e0-5d01c0f445.zip b/.yarn/cache/@storybook-components-npm-6.5.14-f0621adc55-73d0ff418f.zip
similarity index 99%
rename from .yarn/cache/@storybook-components-npm-6.5.13-f35259c4e0-5d01c0f445.zip
rename to .yarn/cache/@storybook-components-npm-6.5.14-f0621adc55-73d0ff418f.zip
index d3a345e43..d2301a781 100644
Binary files a/.yarn/cache/@storybook-components-npm-6.5.13-f35259c4e0-5d01c0f445.zip and b/.yarn/cache/@storybook-components-npm-6.5.14-f0621adc55-73d0ff418f.zip differ
diff --git a/.yarn/cache/@storybook-core-client-npm-6.5.13-17eb95de25-c4350b1b57.zip b/.yarn/cache/@storybook-core-client-npm-6.5.14-a0c9f388f9-ff867021ab.zip
similarity index 92%
rename from .yarn/cache/@storybook-core-client-npm-6.5.13-17eb95de25-c4350b1b57.zip
rename to .yarn/cache/@storybook-core-client-npm-6.5.14-a0c9f388f9-ff867021ab.zip
index c6801ecd3..ffcd41346 100644
Binary files a/.yarn/cache/@storybook-core-client-npm-6.5.13-17eb95de25-c4350b1b57.zip and b/.yarn/cache/@storybook-core-client-npm-6.5.14-a0c9f388f9-ff867021ab.zip differ
diff --git a/.yarn/cache/@storybook-core-common-npm-6.5.13-49981d30f1-369fbe41e9.zip b/.yarn/cache/@storybook-core-common-npm-6.5.14-d6aa008a56-a1cd6e9752.zip
similarity index 99%
rename from .yarn/cache/@storybook-core-common-npm-6.5.13-49981d30f1-369fbe41e9.zip
rename to .yarn/cache/@storybook-core-common-npm-6.5.14-d6aa008a56-a1cd6e9752.zip
index f7f73d4f5..1914e36df 100644
Binary files a/.yarn/cache/@storybook-core-common-npm-6.5.13-49981d30f1-369fbe41e9.zip and b/.yarn/cache/@storybook-core-common-npm-6.5.14-d6aa008a56-a1cd6e9752.zip differ
diff --git a/.yarn/cache/@storybook-core-events-npm-6.5.14-1e01df4906-6787925c52.zip b/.yarn/cache/@storybook-core-events-npm-6.5.14-1e01df4906-6787925c52.zip
new file mode 100644
index 000000000..51e6b34d4
Binary files /dev/null and b/.yarn/cache/@storybook-core-events-npm-6.5.14-1e01df4906-6787925c52.zip differ
diff --git a/.yarn/cache/@storybook-core-npm-6.5.13-d0c9f72666-e0dbe5d8d5.zip b/.yarn/cache/@storybook-core-npm-6.5.14-190ef7e48f-16a2b8c589.zip
similarity index 78%
rename from .yarn/cache/@storybook-core-npm-6.5.13-d0c9f72666-e0dbe5d8d5.zip
rename to .yarn/cache/@storybook-core-npm-6.5.14-190ef7e48f-16a2b8c589.zip
index a99e0840c..e1a2210a0 100644
Binary files a/.yarn/cache/@storybook-core-npm-6.5.13-d0c9f72666-e0dbe5d8d5.zip and b/.yarn/cache/@storybook-core-npm-6.5.14-190ef7e48f-16a2b8c589.zip differ
diff --git a/.yarn/cache/@storybook-core-server-npm-6.5.13-53e03d05a0-142b13ef4f.zip b/.yarn/cache/@storybook-core-server-npm-6.5.14-f8d433fb81-ca61b13ff0.zip
similarity index 96%
rename from .yarn/cache/@storybook-core-server-npm-6.5.13-53e03d05a0-142b13ef4f.zip
rename to .yarn/cache/@storybook-core-server-npm-6.5.14-f8d433fb81-ca61b13ff0.zip
index 9247b7148..3f119cc28 100644
Binary files a/.yarn/cache/@storybook-core-server-npm-6.5.13-53e03d05a0-142b13ef4f.zip and b/.yarn/cache/@storybook-core-server-npm-6.5.14-f8d433fb81-ca61b13ff0.zip differ
diff --git a/.yarn/cache/@storybook-csf-tools-npm-6.5.13-2b643e6735-2b8a5bed04.zip b/.yarn/cache/@storybook-csf-tools-npm-6.5.14-cea5eda901-12e6bb4d9d.zip
similarity index 96%
rename from .yarn/cache/@storybook-csf-tools-npm-6.5.13-2b643e6735-2b8a5bed04.zip
rename to .yarn/cache/@storybook-csf-tools-npm-6.5.14-cea5eda901-12e6bb4d9d.zip
index ab7fc7582..7a6242e98 100644
Binary files a/.yarn/cache/@storybook-csf-tools-npm-6.5.13-2b643e6735-2b8a5bed04.zip and b/.yarn/cache/@storybook-csf-tools-npm-6.5.14-cea5eda901-12e6bb4d9d.zip differ
diff --git a/.yarn/cache/@storybook-docs-tools-npm-6.5.13-7e20549641-d3ad467492.zip b/.yarn/cache/@storybook-docs-tools-npm-6.5.14-25ff302e5b-1a69dae1f9.zip
similarity index 92%
rename from .yarn/cache/@storybook-docs-tools-npm-6.5.13-7e20549641-d3ad467492.zip
rename to .yarn/cache/@storybook-docs-tools-npm-6.5.14-25ff302e5b-1a69dae1f9.zip
index 2f40dbd45..bf809e853 100644
Binary files a/.yarn/cache/@storybook-docs-tools-npm-6.5.13-7e20549641-d3ad467492.zip and b/.yarn/cache/@storybook-docs-tools-npm-6.5.14-25ff302e5b-1a69dae1f9.zip differ
diff --git a/.yarn/cache/@storybook-instrumenter-npm-6.5.14-94e2596393-99d4809680.zip b/.yarn/cache/@storybook-instrumenter-npm-6.5.14-94e2596393-99d4809680.zip
new file mode 100644
index 000000000..8bf0be196
Binary files /dev/null and b/.yarn/cache/@storybook-instrumenter-npm-6.5.14-94e2596393-99d4809680.zip differ
diff --git a/.yarn/cache/@storybook-manager-webpack4-npm-6.5.13-fc02a6ff3a-6645f30b61.zip b/.yarn/cache/@storybook-manager-webpack4-npm-6.5.14-f1499af8e2-c8547b64f8.zip
similarity index 72%
rename from .yarn/cache/@storybook-manager-webpack4-npm-6.5.13-fc02a6ff3a-6645f30b61.zip
rename to .yarn/cache/@storybook-manager-webpack4-npm-6.5.14-f1499af8e2-c8547b64f8.zip
index a9757ea29..4a54dd0d5 100644
Binary files a/.yarn/cache/@storybook-manager-webpack4-npm-6.5.13-fc02a6ff3a-6645f30b61.zip and b/.yarn/cache/@storybook-manager-webpack4-npm-6.5.14-f1499af8e2-c8547b64f8.zip differ
diff --git a/.yarn/cache/@storybook-manager-webpack5-npm-6.5.13-1b7803b648-95e720d00e.zip b/.yarn/cache/@storybook-manager-webpack5-npm-6.5.14-57955b97c3-1fe525b777.zip
similarity index 72%
rename from .yarn/cache/@storybook-manager-webpack5-npm-6.5.13-1b7803b648-95e720d00e.zip
rename to .yarn/cache/@storybook-manager-webpack5-npm-6.5.14-57955b97c3-1fe525b777.zip
index 6ce580e33..dffb2eb6a 100644
Binary files a/.yarn/cache/@storybook-manager-webpack5-npm-6.5.13-1b7803b648-95e720d00e.zip and b/.yarn/cache/@storybook-manager-webpack5-npm-6.5.14-57955b97c3-1fe525b777.zip differ
diff --git a/.yarn/cache/@storybook-node-logger-npm-6.5.13-9b8430e9af-bcd1d98822.zip b/.yarn/cache/@storybook-node-logger-npm-6.5.14-49a67f739b-d36d17816b.zip
similarity index 78%
rename from .yarn/cache/@storybook-node-logger-npm-6.5.13-9b8430e9af-bcd1d98822.zip
rename to .yarn/cache/@storybook-node-logger-npm-6.5.14-49a67f739b-d36d17816b.zip
index 55feca458..0aee368a4 100644
Binary files a/.yarn/cache/@storybook-node-logger-npm-6.5.13-9b8430e9af-bcd1d98822.zip and b/.yarn/cache/@storybook-node-logger-npm-6.5.14-49a67f739b-d36d17816b.zip differ
diff --git a/.yarn/cache/@storybook-postinstall-npm-6.5.13-2876571799-87e57e55c7.zip b/.yarn/cache/@storybook-postinstall-npm-6.5.14-8dcef44997-7f5cec2cca.zip
similarity index 89%
rename from .yarn/cache/@storybook-postinstall-npm-6.5.13-2876571799-87e57e55c7.zip
rename to .yarn/cache/@storybook-postinstall-npm-6.5.14-8dcef44997-7f5cec2cca.zip
index fbf614605..37ff2eef8 100644
Binary files a/.yarn/cache/@storybook-postinstall-npm-6.5.13-2876571799-87e57e55c7.zip and b/.yarn/cache/@storybook-postinstall-npm-6.5.14-8dcef44997-7f5cec2cca.zip differ
diff --git a/.yarn/cache/@storybook-preview-web-npm-6.5.13-5c97598fdf-d66d29667a.zip b/.yarn/cache/@storybook-preview-web-npm-6.5.14-e34935fd73-ef4d2222fe.zip
similarity index 77%
rename from .yarn/cache/@storybook-preview-web-npm-6.5.13-5c97598fdf-d66d29667a.zip
rename to .yarn/cache/@storybook-preview-web-npm-6.5.14-e34935fd73-ef4d2222fe.zip
index 7748814b5..99ba04e37 100644
Binary files a/.yarn/cache/@storybook-preview-web-npm-6.5.13-5c97598fdf-d66d29667a.zip and b/.yarn/cache/@storybook-preview-web-npm-6.5.14-e34935fd73-ef4d2222fe.zip differ
diff --git a/.yarn/cache/@storybook-react-npm-6.5.13-a3e3de31d4-5a21e4e49a.zip b/.yarn/cache/@storybook-react-npm-6.5.14-40801465c8-b94b7b3ef1.zip
similarity index 94%
rename from .yarn/cache/@storybook-react-npm-6.5.13-a3e3de31d4-5a21e4e49a.zip
rename to .yarn/cache/@storybook-react-npm-6.5.14-40801465c8-b94b7b3ef1.zip
index d0c912953..c894342ff 100644
Binary files a/.yarn/cache/@storybook-react-npm-6.5.13-a3e3de31d4-5a21e4e49a.zip and b/.yarn/cache/@storybook-react-npm-6.5.14-40801465c8-b94b7b3ef1.zip differ
diff --git a/.yarn/cache/@storybook-router-npm-6.5.14-41947fcbd4-ec2550568c.zip b/.yarn/cache/@storybook-router-npm-6.5.14-41947fcbd4-ec2550568c.zip
new file mode 100644
index 000000000..9dc195b81
Binary files /dev/null and b/.yarn/cache/@storybook-router-npm-6.5.14-41947fcbd4-ec2550568c.zip differ
diff --git a/.yarn/cache/@storybook-source-loader-npm-6.5.13-1c6543074f-93da14a367.zip b/.yarn/cache/@storybook-source-loader-npm-6.5.14-f7286a9649-81f8908a31.zip
similarity index 96%
rename from .yarn/cache/@storybook-source-loader-npm-6.5.13-1c6543074f-93da14a367.zip
rename to .yarn/cache/@storybook-source-loader-npm-6.5.14-f7286a9649-81f8908a31.zip
index 464398cad..9f2d3bb71 100644
Binary files a/.yarn/cache/@storybook-source-loader-npm-6.5.13-1c6543074f-93da14a367.zip and b/.yarn/cache/@storybook-source-loader-npm-6.5.14-f7286a9649-81f8908a31.zip differ
diff --git a/.yarn/cache/@storybook-store-npm-6.5.13-9afd4f2c08-69f55927bd.zip b/.yarn/cache/@storybook-store-npm-6.5.14-45f30c8ad3-7330a2492c.zip
similarity index 98%
rename from .yarn/cache/@storybook-store-npm-6.5.13-9afd4f2c08-69f55927bd.zip
rename to .yarn/cache/@storybook-store-npm-6.5.14-45f30c8ad3-7330a2492c.zip
index eef7c8d34..a61f21836 100644
Binary files a/.yarn/cache/@storybook-store-npm-6.5.13-9afd4f2c08-69f55927bd.zip and b/.yarn/cache/@storybook-store-npm-6.5.14-45f30c8ad3-7330a2492c.zip differ
diff --git a/.yarn/cache/@storybook-telemetry-npm-6.5.13-8c55e244ed-94ad6fb58b.zip b/.yarn/cache/@storybook-telemetry-npm-6.5.14-7210305bb0-6f6323fe0e.zip
similarity index 97%
rename from .yarn/cache/@storybook-telemetry-npm-6.5.13-8c55e244ed-94ad6fb58b.zip
rename to .yarn/cache/@storybook-telemetry-npm-6.5.14-7210305bb0-6f6323fe0e.zip
index f9d4cd8f2..11cf181ad 100644
Binary files a/.yarn/cache/@storybook-telemetry-npm-6.5.13-8c55e244ed-94ad6fb58b.zip and b/.yarn/cache/@storybook-telemetry-npm-6.5.14-7210305bb0-6f6323fe0e.zip differ
diff --git a/.yarn/cache/@storybook-theming-npm-6.5.14-3f9bba346b-d139325dd5.zip b/.yarn/cache/@storybook-theming-npm-6.5.14-3f9bba346b-d139325dd5.zip
new file mode 100644
index 000000000..c0d410d9e
Binary files /dev/null and b/.yarn/cache/@storybook-theming-npm-6.5.14-3f9bba346b-d139325dd5.zip differ
diff --git a/.yarn/cache/@storybook-ui-npm-6.5.13-fe509c86bc-d2866987f5.zip b/.yarn/cache/@storybook-ui-npm-6.5.14-c4b58b88ff-898bf81d9a.zip
similarity index 99%
rename from .yarn/cache/@storybook-ui-npm-6.5.13-fe509c86bc-d2866987f5.zip
rename to .yarn/cache/@storybook-ui-npm-6.5.14-c4b58b88ff-898bf81d9a.zip
index 01167c8d5..9d3eab1cf 100644
Binary files a/.yarn/cache/@storybook-ui-npm-6.5.13-fe509c86bc-d2866987f5.zip and b/.yarn/cache/@storybook-ui-npm-6.5.14-c4b58b88ff-898bf81d9a.zip differ
diff --git a/.yarn/cache/esm-npm-3.2.25-762b3ebd40-978aabe2de.zip b/.yarn/cache/esm-npm-3.2.25-762b3ebd40-978aabe2de.zip
deleted file mode 100644
index c1bfaf13f..000000000
Binary files a/.yarn/cache/esm-npm-3.2.25-762b3ebd40-978aabe2de.zip and /dev/null differ
diff --git a/.yarn/cache/loader-utils-npm-2.0.4-ba3800585b-a5281f5fff.zip b/.yarn/cache/loader-utils-npm-2.0.4-ba3800585b-a5281f5fff.zip
new file mode 100644
index 000000000..4600246f5
Binary files /dev/null and b/.yarn/cache/loader-utils-npm-2.0.4-ba3800585b-a5281f5fff.zip differ
diff --git a/.yarn/cache/regenerator-runtime-npm-0.13.11-90bf536060-27481628d2.zip b/.yarn/cache/regenerator-runtime-npm-0.13.11-90bf536060-27481628d2.zip
new file mode 100644
index 000000000..599a0d4ee
Binary files /dev/null and b/.yarn/cache/regenerator-runtime-npm-0.13.11-90bf536060-27481628d2.zip differ
diff --git a/platforms/ycai/studio/__mocks__/fileMock.js b/__mocks__/fileMock.js
similarity index 100%
rename from platforms/ycai/studio/__mocks__/fileMock.js
rename to __mocks__/fileMock.js
diff --git a/platforms/ycai/studio/__mocks__/styleMock.js b/__mocks__/styleMock.js
similarity index 100%
rename from platforms/ycai/studio/__mocks__/styleMock.js
rename to __mocks__/styleMock.js
diff --git a/jest.config.base.js b/jest.config.base.js
index 641dc0a2a..5486d1531 100644
--- a/jest.config.base.js
+++ b/jest.config.base.js
@@ -30,9 +30,9 @@ module.exports = {
   coverageThreshold: {
     global: {
       branches: 30,
-      functions: 60,
-      lines: 60,
-      statements: 60,
+      functions: 44,
+      lines: 53,
+      statements: 54,
     },
   },
   coveragePathIgnorePatterns: [
diff --git a/package.json b/package.json
index a6014af3f..2aab4b009 100644
--- a/package.json
+++ b/package.json
@@ -84,7 +84,7 @@
     "@types/react": "^17"
   },
   "dependencies": {
-    "@react-theming/storybook-addon": "^1.1.7",
+    "@react-theming/storybook-addon": "^1.1.10",
     "pm2": "^5.2.2"
   }
 }
diff --git a/packages/shared/jest.config.js b/packages/shared/jest.config.js
index bae50ef7e..3fffb5d71 100644
--- a/packages/shared/jest.config.js
+++ b/packages/shared/jest.config.js
@@ -3,9 +3,11 @@ const jestBaseConfig = require('../../jest.config.base');
 /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
 module.exports = {
   ...jestBaseConfig,
-  rootDir: __dirname,
   testEnvironment: 'jsdom',
   displayName: '@shared',
+  moduleNameMapper: {
+    '\\.(css)$': '<rootDir>/../../__mocks__/styleMock.js',
+  },
   modulePathIgnorePatterns: [
     ...jestBaseConfig.modulePathIgnorePatterns,
     'profiles',
diff --git a/packages/shared/src/components/Error/ErrorBox.tsx b/packages/shared/src/components/Error/ErrorBox.tsx
index 4430fcdab..8176699a8 100644
--- a/packages/shared/src/components/Error/ErrorBox.tsx
+++ b/packages/shared/src/components/Error/ErrorBox.tsx
@@ -1,4 +1,4 @@
-import { Card, CardContent, Typography } from '@material-ui/core';
+import { Card } from '@material-ui/core';
 import { Alert, AlertTitle } from '@material-ui/lab';
 import * as React from 'react';
 import { isAPIError } from '../../errors/APIError';
@@ -10,25 +10,20 @@ export const ErrorBox = (e: unknown): React.ReactElement<any, string> => {
   const errorName = isAPIError(e) ? e.name : 'Error';
   const message = isAPIError(e) ? e.message : 'Unknown Error';
   return (
-    <Card>
-      <Alert severity="error">
+    <Card style={{ height: '100%' }}>
+      <Alert severity="error" style={{ height: '50%' }}>
         <AlertTitle>{errorName}</AlertTitle>
         <p>{message}</p>
         {isAPIError(e) && e.details?.kind === 'DecodingError' ? (
-          <ul>
-            {(e.details.errors ?? []).map((d: any) => (
-              <li key={d}>{d}</li>
-            ))}
-          </ul>
+          <div style={{ overflow: 'auto', height: '100%' }}>
+            <ul>
+              {((e.details.errors as any[]) ?? []).map((d: any) => (
+                <li key={d}>{d}</li>
+              ))}
+            </ul>
+          </div>
         ) : null}
       </Alert>
-
-      <CardContent>
-        <Typography variant="h6">Debug</Typography>
-        <pre style={{ backgroundColor: 'white' }}>
-          <code>{JSON.stringify(e, null, 2)}</code>
-        </pre>
-      </CardContent>
     </Card>
   );
 };
diff --git a/packages/shared/src/components/ErrorModal/errorModal.css b/packages/shared/src/components/ErrorModal/errorModal.css
index 01145870a..c7f876fe1 100644
--- a/packages/shared/src/components/ErrorModal/errorModal.css
+++ b/packages/shared/src/components/ErrorModal/errorModal.css
@@ -1,7 +1,8 @@
-.ErrorModal{
+.ErrorModal {
   width: 100%;
   max-width: 500px;
   overflow: hidden;
+  background: white;
   border: 2px solid #de605f;
   border-radius: 3px;
   justify-content: space-between;
diff --git a/packages/shared/src/components/ErrorModal/index.tsx b/packages/shared/src/components/ErrorModal/index.tsx
index 44c4f794b..afc141760 100644
--- a/packages/shared/src/components/ErrorModal/index.tsx
+++ b/packages/shared/src/components/ErrorModal/index.tsx
@@ -10,11 +10,12 @@ export interface ErrorModalProps {
   message: string;
   details: string[];
   position?: string[];
+  style?: React.CSSProperties;
   onClick: (action: string) => void;
 }
 
 const ErrorModal = (props: ErrorModalProps): JSX.Element => {
-  const { name, message, details, position, onClick } = props;
+  const { name, message, details, position, style, onClick } = props;
   const [detailsShown, setDetailsShown] = React.useState(false);
 
   const handleDetailsClick = (): void => {
@@ -25,7 +26,7 @@ const ErrorModal = (props: ErrorModalProps): JSX.Element => {
   };
 
   return (
-    <Box className={`ErrorModal ${position}`}>
+    <Box className={`ErrorModal ${position}`} style={style}>
       <div className="ErrorModal__container">
         <div
           className="ErrorModal__container__content"
@@ -43,8 +44,8 @@ const ErrorModal = (props: ErrorModalProps): JSX.Element => {
             })}
           >
             <ul className="ErrorModal__container__details__box__detail">
-              {details.map((d) => (
-                <li key={d}>
+              {details.map((d, i) => (
+                <li key={i}>
                   <Typography>{d}</Typography>
                 </li>
               ))}
diff --git a/packages/shared/src/errors/AppError.ts b/packages/shared/src/errors/AppError.ts
index bc5b7a621..dab2f8f7e 100644
--- a/packages/shared/src/errors/AppError.ts
+++ b/packages/shared/src/errors/AppError.ts
@@ -6,7 +6,6 @@ export class AppError extends IOError {
 }
 
 export const toAppError = (e: unknown): AppError => {
-
   if (isAPIError(e)) {
     return {
       ...e,
@@ -34,3 +33,11 @@ export const toAppError = (e: unknown): AppError => {
     },
   };
 };
+
+export const appErrorDetailsToString = (e: AppError): string[] => {
+  if (e.details.kind === 'DecodingError') {
+    return e.details.errors as string[];
+  }
+
+  return [e.details.kind, e.details.status, JSON.stringify(e.details.meta)];
+};
diff --git a/packages/shared/src/extension/app.ts b/packages/shared/src/extension/app.ts
index bca52db29..8f18a4308 100644
--- a/packages/shared/src/extension/app.ts
+++ b/packages/shared/src/extension/app.ts
@@ -20,6 +20,7 @@ import log from './logger';
 import HubEvent from './models/HubEvent';
 import { ServerLookup } from './models/Message';
 import UserSettings from './models/UserSettings';
+import { addCommonPageUI } from './ui';
 import { bo } from './utils/browser.utils';
 
 // instantiate a proper logger
@@ -88,6 +89,12 @@ export interface BootOpts {
     onRegister: (h: Hub<HubEvent>, config: UserSettings) => void;
   };
   onAuthenticated: (res: any) => void;
+  ui?: {
+    common: {
+      id?: string;
+      errors?: boolean;
+    };
+  };
 }
 
 /**
@@ -107,7 +114,7 @@ let oldHref: string;
  */
 function setupObserver(
   { handlers: _handlers, platformMatch, onLocationChange }: SetupObserverOpts,
-  config: UserSettings
+  settings: UserSettings
 ): MutationObserver {
   // group handlers by type and `ObserverHandler.observe?`
   // to subscribe them to proper DOM and location changes
@@ -147,7 +154,7 @@ function setupObserver(
     appLog.debug('handler listen for mutation %O', handler);
     dom.on(handler.match.selector, (node) =>
       handle(node, handler, h, {
-        ...config,
+        ...settings,
         href: window.location.toString(),
       } as any)
     );
@@ -171,7 +178,7 @@ function setupObserver(
                   // appLog.debug('Mutation target %s', (r.target as Element).id);
                   if (`#${(r.target as any).id}` === handler.match.selector) {
                     // appLog.debug('Target match %O', (r.target as any).id);
-                    handle(r.target as any, handler, h, config);
+                    handle(r.target as any, handler, h, settings);
                   }
                 });
               }
@@ -205,7 +212,7 @@ function setupObserver(
               );
 
               handle(window.document.body, routeHandlerOpts, routeHandler[0], {
-                ...config,
+                ...settings,
                 href: window.location.toString(),
               } as any);
             }
@@ -225,9 +232,9 @@ function setupObserver(
 
   window.addEventListener('unload', () => {
     appLog.debug('Window unloading, disconnect the observer...');
-    if (observer) {
-      observer.disconnect();
-    }
+    observer?.disconnect();
+    // TODO: maybe destroy the app?
+    // app?.destroy();
   });
 
   if (body) {
@@ -249,8 +256,6 @@ export interface App {
   destroy: () => void;
 }
 
-let config: any;
-
 /**
  * Transform functions that send messages to background
  * to promises for better code flow.
@@ -269,6 +274,8 @@ const serverHandshakeP = (
 
 let loading = false;
 let app: App | undefined;
+let config: any;
+
 export async function boot(opts: BootOpts): Promise<App> {
   if (app) {
     appLog.debug('App already booted!');
@@ -326,8 +333,8 @@ export async function boot(opts: BootOpts): Promise<App> {
 
   // merge settings taken from db with ones defined in settings.json, giving the precedence to the latter
   const settings: UserSettings = {
-    ...localSettings.result,
     ...jsonSettings.result,
+    ...localSettings.result,
   } as any;
 
   if (!settings.publicKey || !settings.secretKey) {
@@ -374,6 +381,14 @@ export async function boot(opts: BootOpts): Promise<App> {
   // register platform specific event handlers
   opts.hub.onRegister(opts.hub.hub, config);
 
+  // enable the ui
+
+  addCommonPageUI(
+    opts.ui?.common.id ?? 'trex-extension-common-ui',
+    opts.hub.hub,
+    { errors: true }
+  );
+
   // emergency button should be used when a supported with
   // UX hack in place didn't see any UX change, so they
   // can report the problem and we can handle it.
@@ -401,22 +416,27 @@ export async function boot(opts: BootOpts): Promise<App> {
   const handshakeResponse = await serverHandshakeP(config);
 
   appLog.info('Server lookup cb %O', handshakeResponse);
+  let observer: MutationObserver | undefined;
   if (handshakeResponse.type === 'Error') {
-    throw handshakeResponse.error;
-  }
-
-  // setup the dom mutation observer
-  let observer = setupObserver(opts.observe, config);
+    opts.hub.hub.dispatch({
+      type: 'ErrorEvent',
+      payload: handshakeResponse.error,
+    });
+    // throw handshakeResponse.error;
+  } else {
+    // invoke callback for successful authentication
+    opts.onAuthenticated(handshakeResponse.result);
 
-  // invoke callback for successful authentication
-  opts.onAuthenticated(handshakeResponse.result);
+    // setup the dom mutation observer
+    observer = setupObserver(opts.observe, config);
+  }
 
   // define the app context to return
   app = {
     config,
     reload: (c) => {
       appLog.debug('Reloading app with config %O', c);
-      observer.disconnect();
+      observer?.disconnect();
       opts.hub.hub.dispatch({
         type: 'WindowUnload',
       });
@@ -426,7 +446,7 @@ export async function boot(opts: BootOpts): Promise<App> {
       observer = setupObserver(opts.observe, c);
     },
     destroy: () => {
-      observer.disconnect();
+      observer?.disconnect();
       opts.hub.hub.clear();
       app = undefined;
     },
diff --git a/packages/shared/src/extension/background/account.ts b/packages/shared/src/extension/background/account.ts
index 04b5ad257..40e0d6d3d 100644
--- a/packages/shared/src/extension/background/account.ts
+++ b/packages/shared/src/extension/background/account.ts
@@ -87,11 +87,13 @@ export async function handleSettingsLookup(
 
   log.info(
     'Loaded experiment info from file experiment.json: %j',
-    settingsJson
+    experimentInfo
   );
 
   const settings = { ...DEFAULT_SETTINGS, ...settingsJson, ...experimentInfo };
 
+  log.info('Final settings: %j', settings);
+
   return sendResponse(settings);
 }
 
diff --git a/packages/shared/src/extension/background/sendMessage.ts b/packages/shared/src/extension/background/sendMessage.ts
index 9d43b4921..80c52a828 100644
--- a/packages/shared/src/extension/background/sendMessage.ts
+++ b/packages/shared/src/extension/background/sendMessage.ts
@@ -1,12 +1,13 @@
 /* eslint-disable node/no-callback-literal */
-import { isLeft } from 'fp-ts/lib/Either';
 import * as t from 'io-ts';
-import { PathReporter } from 'io-ts/lib/PathReporter';
+import { isAPIError } from '../../errors/APIError';
 import { HandshakeResponse } from '../../models/HandshakeBody';
 import log from '../logger';
 import { Message, ServerLookup } from '../models/Message';
 import { UserSettings } from '../models/UserSettings';
 import { bo } from '../utils/browser.utils';
+import * as E from 'fp-ts/Either';
+import { toValidationError } from '../../errors/ValidationError';
 
 interface ErrorResponse {
   type: 'Error';
@@ -26,25 +27,26 @@ const ifValid =
   (m: Message['type'], cb: SendResponse<t.TypeOf<C>>) =>
   (x: unknown): void => {
     log.debug('Check response is valid %O', x);
+    if (isAPIError(x)) {
+      // eslint-disable-next-line n/no-callback-literal
+      cb({ type: 'Error', error: x });
+      return;
+    }
+
     const v = codec.decode(x);
 
-    if (isLeft(v)) {
-      const msg = `Error decoding backend response:\n${PathReporter.report(
-        v
-      ).join('\n')}`;
-      log.error(msg);
+    if (E.isLeft(v)) {
       // eslint-disable-next-line n/no-callback-literal
       cb({
         type: 'Error',
-        error: new Error(
-          `Error during '${m}' on codec ${codec.name} validation \n\n`.concat(
-            PathReporter.report(v).join('\n')
-          )
+        error: toValidationError(
+          `Error decoding ${m} output with ${codec.name}`,
+          v.left
         ),
       });
     } else {
       // eslint-disable-next-line n/no-callback-literal
-      cb({ type: 'Success', result: v.right });
+      cb({ type: 'Success', result: x });
     }
   };
 
diff --git a/packages/shared/src/extension/models/HubEvent.ts b/packages/shared/src/extension/models/HubEvent.ts
index 52d447bbd..4c58ed090 100644
--- a/packages/shared/src/extension/models/HubEvent.ts
+++ b/packages/shared/src/extension/models/HubEvent.ts
@@ -3,6 +3,11 @@ export interface HubEventBase {
   payload?: unknown;
 }
 
+export interface ErrorEvent extends HubEventBase {
+  type: 'ErrorEvent';
+  payload: unknown;
+}
+
 export interface APIEvent extends HubEventBase {
   type: 'APIEvent';
   payload: {
@@ -57,8 +62,9 @@ export interface WindowUnloadEvent extends HubEventBase {
 }
 
 export type HubEvent =
+  | ErrorEvent
   | WindowUnloadEvent
-/*  | FullSaveEvent<any>  -- issue #444 */
+  /*  | FullSaveEvent<any>  -- issue #444 */
   | SyncResponseEvent
   | APISyncResponseEvent
   | APIEvent;
diff --git a/packages/shared/src/extension/models/UserSettings.ts b/packages/shared/src/extension/models/UserSettings.ts
index 363ab08a5..ecfc4d49f 100644
--- a/packages/shared/src/extension/models/UserSettings.ts
+++ b/packages/shared/src/extension/models/UserSettings.ts
@@ -5,7 +5,7 @@ export const UserSettings = t.type(
     active: t.boolean,
     publicKey: t.string,
     secretKey: t.string,
-    ux: t.boolean,
+    ux: t.union([t.boolean, t.partial({ errors: t.boolean })]),
     researchTag: t.union([t.string, t.undefined]),
     experimentId: t.union([t.string, t.undefined]),
   },
diff --git a/packages/shared/src/extension/popup/components/Popup.tsx b/packages/shared/src/extension/popup/components/Popup.tsx
index 5f38ea127..5f8a498a8 100644
--- a/packages/shared/src/extension/popup/components/Popup.tsx
+++ b/packages/shared/src/extension/popup/components/Popup.tsx
@@ -10,6 +10,8 @@ import Settings, { SettingsProps } from './Settings';
 import UserSettings from '../../models/UserSettings';
 import * as React from 'react';
 import moment from 'moment';
+import { Hub } from '../../hub';
+import HubEvent from '../../models/HubEvent';
 
 const styles = {
   width: '400px',
@@ -21,6 +23,7 @@ export interface PopupProps {
   logo: string;
   getLinks: (opts: { publicKey: string }) => DashboardLink[];
   settings: Pick<SettingsProps, 'enabled'>;
+  hub: Hub<HubEvent>;
 }
 
 type PopupState =
@@ -39,6 +42,7 @@ type PopupState =
 
 let localLookupInterval: any;
 const Popup: React.FC<PopupProps> = ({
+  hub,
   platform,
   platformURL,
   settings,
@@ -50,13 +54,14 @@ const Popup: React.FC<PopupProps> = ({
   });
 
   const handleLocalLookup = (): void => {
-    localLookup(true, (response) => {
-      if (response.type === 'Error') {
+    localLookup(true, (r) => {
+      if (r.type === 'Error') {
+        hub.dispatch({ type: 'ErrorEvent', payload: r.error });
         setUserSettingsState({
           status: 'error',
-          error: response.error,
+          error: r.error,
         });
-        log.error('could not get user settings %O', response.error);
+        log.error('could not get user settings %O', r.error);
 
         // localLookupInterval = setTimeout(() => {
         //   log.info('Refetching settings...');
@@ -70,7 +75,7 @@ const Popup: React.FC<PopupProps> = ({
         localLookupInterval = undefined;
       }
 
-      setUserSettingsState({ status: 'done', payload: response.result });
+      setUserSettingsState({ status: 'done', payload: r.result });
     });
   };
 
@@ -81,6 +86,7 @@ const Popup: React.FC<PopupProps> = ({
           status: 'error',
           error: r.error,
         });
+        hub.dispatch({ type: 'ErrorEvent', payload: r.error });
       } else {
         setUserSettingsState({
           status: 'done',
diff --git a/packages/shared/src/extension/popup/components/Settings.tsx b/packages/shared/src/extension/popup/components/Settings.tsx
index 2e098bba0..3fa1947a7 100644
--- a/packages/shared/src/extension/popup/components/Settings.tsx
+++ b/packages/shared/src/extension/popup/components/Settings.tsx
@@ -142,7 +142,7 @@ export const Settings: React.FC<SettingsProps> = ({
           <Switch
             edge="end"
             onChange={toggleUX}
-            checked={ux}
+            checked={!!ux}
             inputProps={{ 'aria-labelledby': 'tktrex-ux-switch' }}
           />
         </ListItemSecondaryAction>
diff --git a/packages/shared/src/extension/popup/index.tsx b/packages/shared/src/extension/popup/index.tsx
index 4a91c44f6..87b3e0eb8 100644
--- a/packages/shared/src/extension/popup/index.tsx
+++ b/packages/shared/src/extension/popup/index.tsx
@@ -1,15 +1,9 @@
 import '../../../public/font.css';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { createTheme, ThemeProvider } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/core/styles';
 import Popup, { PopupProps } from './components/Popup';
-
-// define @mui theme for popup
-const theme = createTheme({
-  typography: {
-    fontFamily: 'Trex-Regular',
-  },
-});
+import { theme } from '../theme';
 
 /**
  * This function is responsible to render the extension popup in the proper DOM node.
diff --git a/packages/shared/src/extension/theme.ts b/packages/shared/src/extension/theme.ts
new file mode 100644
index 000000000..2bc72f10b
--- /dev/null
+++ b/packages/shared/src/extension/theme.ts
@@ -0,0 +1,8 @@
+import { createTheme } from '@material-ui/core/styles';
+
+// define @mui theme for popup
+export const theme = createTheme({
+  typography: {
+    fontFamily: 'Trex-Regular',
+  },
+});
diff --git a/packages/shared/src/extension/tooltip/index.tsx b/packages/shared/src/extension/tooltip/index.tsx
index a460f19de..667806199 100644
--- a/packages/shared/src/extension/tooltip/index.tsx
+++ b/packages/shared/src/extension/tooltip/index.tsx
@@ -1,16 +1,9 @@
+import { ThemeProvider } from '@material-ui/core/styles';
 import React from 'react';
 import ReactDOM from 'react-dom';
-
-import { createTheme, ThemeProvider } from '@material-ui/core/styles';
-
+import { theme } from '../theme';
 import Tooltip from './components/tooltip';
 
-const theme = createTheme({
-  typography: {
-    fontFamily: 'Trex-Regular',
-  },
-});
-
 function main(): void {
   ReactDOM.render(
     <ThemeProvider theme={theme}>
diff --git a/packages/shared/src/extension/ui/ErrorSnackbars.tsx b/packages/shared/src/extension/ui/ErrorSnackbars.tsx
new file mode 100644
index 000000000..6d4d23aec
--- /dev/null
+++ b/packages/shared/src/extension/ui/ErrorSnackbars.tsx
@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { v4 as uuid } from 'uuid';
+import ErrorModal from '../../components/ErrorModal';
+import { appErrorDetailsToString } from '../../errors/AppError';
+import { Hub } from '../hub';
+import HubEvent from '../models/HubEvent';
+
+interface ErrorSnackbarsProps {
+  hub: Hub<HubEvent>;
+}
+export const ErrorSnackbars: React.FC<ErrorSnackbarsProps> = ({ hub }) => {
+  // const [show, setShow] = React.useState(false);
+  const [data, setData] = React.useState<any[]>([]);
+
+  const updateData = (d: any): void => {
+    setData((data) => [...data, d]);
+  };
+
+  React.useEffect(() => {
+    hub.on('ErrorEvent', (e) => {
+      if (e.payload) {
+        updateData({ ...e.payload, id: uuid() });
+      }
+    });
+
+    return () => {};
+  }, []);
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        top: 20,
+        right: 20,
+        minHeight: data.length > 0 ? 200 : 0,
+        width: data.length > 0 ? 500 : 0,
+        zIndex: 9900,
+        boxSizing: 'content-box',
+      }}
+    >
+      <div>
+        {data.map((d, i) => {
+          const details = appErrorDetailsToString(d);
+          return (
+            <ErrorModal
+              key={d.id}
+              name={d.name}
+              message={d.message}
+              details={details}
+              style={{ position: 'relative', marginBottom: 20 }}
+              onClick={() => {
+                setData((data) => data.filter((dd) => dd.id !== d.id));
+              }}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/shared/src/extension/ui/index.tsx b/packages/shared/src/extension/ui/index.tsx
new file mode 100644
index 000000000..af2a08a10
--- /dev/null
+++ b/packages/shared/src/extension/ui/index.tsx
@@ -0,0 +1,55 @@
+import { Box, ThemeProvider } from '@material-ui/core';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Hub } from '../hub';
+import HubEvent from '../models/HubEvent';
+import { theme } from '../theme';
+import { ErrorSnackbars } from './ErrorSnackbars';
+import logger from '../logger';
+
+/**
+ * Render a ReactNode in a container created by the given id
+ *
+ * @param id The container id
+ * @param children the ReactNode to render in the container
+ */
+export const addPageUI = (id: string, children: React.ReactNode): void => {
+  const nodeId = `#${id}`;
+  let node = window.document.querySelector(nodeId);
+  if (node && document.body.contains(node)) {
+    ReactDOM.unmountComponentAtNode(node);
+  }
+
+  node = node ?? document.createElement('div');
+  node.id = id;
+
+  document.body.append(node);
+
+  ReactDOM.render(
+    <React.Fragment>
+      <ThemeProvider theme={theme}>{children}</ThemeProvider>
+    </React.Fragment>,
+    node
+  );
+};
+
+interface CommonPageUIOptions {
+  errors?: boolean;
+}
+
+/**
+ * Add the common UI (error handler) to the page dom
+ *
+ * @param id The container node id
+ * @param hub The instance of the {@link Hub}
+ * @param opts The common ui options {@link CommonPageUIOptions}
+ */
+export const addCommonPageUI = (
+  id: string,
+  hub: Hub<HubEvent>,
+  opts: CommonPageUIOptions
+): void => {
+  logger.debug('Adding common page ui %s (%j)', id, opts);
+
+  addPageUI(id, <Box>{opts.errors ? <ErrorSnackbars hub={hub} /> : null}</Box>);
+};
diff --git a/packages/shared/src/models/contributor/ContributorPersonalStats.ts b/packages/shared/src/models/contributor/ContributorPersonalStats.ts
index 517db4f54..e3f1afc48 100644
--- a/packages/shared/src/models/contributor/ContributorPersonalStats.ts
+++ b/packages/shared/src/models/contributor/ContributorPersonalStats.ts
@@ -6,6 +6,7 @@ export const HomeMetadata = t.strict(
     id: t.string,
     savingTime: t.string,
     selected: t.array(StringOrNull, 'Selected'),
+    login: t.boolean,
   },
   'HomeMetadata'
 );
@@ -32,7 +33,7 @@ export const SearchMetadata = t.strict(
     id: t.string,
     savingTime: t.string,
     query: t.string,
-    results: t.number,
+    results: t.array(StringOrNull, 'Selected'),
   },
   'SearchMetadata'
 );
@@ -40,37 +41,49 @@ export type SearchMetadata = t.TypeOf<typeof SearchMetadata>;
 
 export const ContributorPersonalStats = t.strict(
   {
-    supporter: t.strict({
-      _id: t.string,
-      publicKey: t.string,
-      creationTime: t.string,
-      p: t.string,
-      lastActivity: t.string,
-      version: t.string,
-      tag: t.strict({
-        id: t.string,
-        name: t.string,
-        accessibility: t.string,
-        lastAccess: t.string,
-        description: t.string,
-        // _id: t.string
-      }),
-      hereSince: t.string,
-    }),
+    supporter: t.strict(
+      {
+        _id: t.string,
+        publicKey: t.string,
+        creationTime: t.string,
+        p: t.string,
+        lastActivity: t.string,
+        version: t.string,
+        tag: t.union([
+          t.undefined,
+          t.strict({
+            id: t.string,
+            name: t.string,
+            accessibility: t.string,
+            lastAccess: t.string,
+            description: t.string,
+            // _id: t.string
+          }),
+        ]),
+        hereSince: t.string,
+      },
+      'Supporter'
+    ),
     videos: t.array(VideoMetadata),
     homes: t.array(HomeMetadata),
     searches: t.array(SearchMetadata),
     ads: t.array(t.any),
-    stats: t.strict({
-      home: t.number,
-      video: t.number,
-      search: t.number,
-    }),
-    request: t.strict({
-      amount: t.number,
-      skip: t.number,
-      when: t.string,
-    }),
+    stats: t.partial(
+      {
+        home: t.number,
+        video: t.number,
+        search: t.number,
+      },
+      'Stats'
+    ),
+    request: t.strict(
+      {
+        amount: t.number,
+        skip: t.number,
+        when: t.string,
+      },
+      'Request'
+    ),
   },
   'ContributorPersonalStats'
 );
diff --git a/packages/shared/src/models/http/SearchQuery.ts b/packages/shared/src/models/http/SearchQuery.ts
index 7740fc746..eb0acadf3 100644
--- a/packages/shared/src/models/http/SearchQuery.ts
+++ b/packages/shared/src/models/http/SearchQuery.ts
@@ -7,6 +7,8 @@ export const SearchQuery = t.partial(
     skip: t.number,
     date: DateFromISOString,
     endDate: DateFromISOString,
+    experimentId: t.string,
+    researchTag: t.string,
   },
   'SearchQuery'
 );
diff --git a/packages/shared/src/parser/reporters/FixtureReporter.ts b/packages/shared/src/parser/reporters/FixtureReporter.ts
index a9de4e737..5a6cb7b52 100644
--- a/packages/shared/src/parser/reporters/FixtureReporter.ts
+++ b/packages/shared/src/parser/reporters/FixtureReporter.ts
@@ -10,7 +10,7 @@ export const FixtureReporter = (basePath: string): ErrorReporter<any> => {
       const day = getDate(now);
       const month = getMonth(now);
       const year = getYear(now);
-      const entryNature = e.html.nature.type ?? 'failed';
+      const entryNature = e.html.nature?.type ?? e.html.type ?? 'failed';
       const fixtureFolderPath = path.resolve(
         basePath,
         `${year}/${month}/${day}`,
diff --git a/packages/shared/src/providers/api.provider.ts b/packages/shared/src/providers/api.provider.ts
index 5caa4d702..d6452b588 100644
--- a/packages/shared/src/providers/api.provider.ts
+++ b/packages/shared/src/providers/api.provider.ts
@@ -18,6 +18,7 @@ import { MinimalEndpointInstance, TypeOfEndpointInstance } from '../endpoints';
 import { APIError, fromAxiosError, isAPIError } from '../errors/APIError';
 import { toValidationError } from '../errors/ValidationError';
 import { trexLogger } from '../logger';
+import qs from 'qs';
 
 export const apiLogger = trexLogger.extend('API');
 
@@ -57,6 +58,15 @@ export const toAPIError = (e: unknown): APIError => {
   });
 };
 
+/**
+ * Lift an axios Promise to a TaskEither
+ * validating the `response.data`
+ * with the given `decode` function
+ *
+ * @param lp - A lazy axios promise
+ * @param decode - A function used to decode the `response.data` that returns an {@link E.Either}
+ * @returns A TaskEither<APIError, B> instance {@link TE.TaskEither}
+ */
 const liftFetch = <B>(
   lp: () => Promise<AxiosResponse<B>>,
   decode: <A>(a: A) => E.Either<t.Errors, B>
@@ -75,9 +85,12 @@ const liftFetch = <B>(
   );
 };
 
+/**
+ * HTTPClient interface that provide common methods
+ * as {@link TE.TaskEither} instead of {@link Promise}
+ */
 export interface HTTPClient {
   apiFromEndpoint: <E extends MinimalEndpointInstance>(e: E) => TERequest<E>;
-
   request: <T, R>(
     config: AxiosRequestConfig<T>,
     decode: (o: unknown) => E.Either<t.Errors, R>
@@ -98,6 +111,12 @@ export interface HTTPClient {
   ) => TE.TaskEither<APIError, R>;
 }
 
+/**
+ * Create an {@link HTTPClient} using the given axios client
+ *
+ * @param client - Axios instance {@link AxiosInstance}
+ * @returns An {@link HTTPClient}
+ */
 export const MakeHTTPClient = (client: AxiosInstance): HTTPClient => {
   const request = <T, R>(
     config: AxiosRequestConfig<T>,
@@ -130,6 +149,9 @@ export const MakeHTTPClient = (client: AxiosInstance): HTTPClient => {
   ): TERequest<E> => {
     return command<any, APIError, TypeOfEndpointInstance<E>['Output']>((b) =>
       pipe(
+        /**
+         * Decode all given input
+         */
         sequenceS(E.Applicative)({
           params: (e.Input?.Params ?? t.any).decode(b?.Params),
           query: (e.Input?.Query ?? t.any).decode(b?.Query),
@@ -147,22 +169,35 @@ export const MakeHTTPClient = (client: AxiosInstance): HTTPClient => {
           const url = e.getPath(input.params);
           apiLogger.debug('%s %s %O', e.Method, url, input);
           return pipe(
-            liftFetch<TypeOfEndpointInstance<E>['Output']>(() => {
-              return client.request<
-                TypeOfEndpointInstance<E>['Input'],
-                AxiosResponse<TypeOfEndpointInstance<E>['Output']>
-              >({
-                method: e.Method,
-                url,
-                params: input.query,
-                data: input.body,
-                responseType: 'json',
-                headers: {
-                  Accept: 'application/json',
-                  ...input.headers,
-                },
-              });
-            }, e.Output.decode),
+            liftFetch<TypeOfEndpointInstance<E>['Output']>(
+              () => {
+                return client.request<
+                  TypeOfEndpointInstance<E>['Input'],
+                  AxiosResponse<TypeOfEndpointInstance<E>['Output']>
+                >({
+                  method: e.Method,
+                  url,
+                  params: input.query,
+                  paramsSerializer(params) {
+                    const q = qs.stringify(params);
+                    return q;
+                  },
+                  data: input.body,
+                  responseType: 'json',
+                  headers: {
+                    Accept: 'application/json',
+                    ...input.headers,
+                  },
+                });
+              },
+              /**
+               * Avoid decoding the output when `b.ValidateOutput` is explicitly set
+               * to `false`
+               */
+              b && b.ValidateOutput === false
+                ? t.unknown.decode
+                : e.Output.decode
+            ),
             TE.map((output) => {
               // apiLogger.debug('%s %s output: %O', e.Method, url, output);
               return output;
@@ -176,16 +211,18 @@ export const MakeHTTPClient = (client: AxiosInstance): HTTPClient => {
   return { apiFromEndpoint, request, get, post, put };
 };
 
-export type TERequest<E extends MinimalEndpointInstance> =
-  TypeOfEndpointInstance<E>['Input'] extends never
-    ? (
-        input?: TypeOfEndpointInstance<E>['Input'],
-        ia?: any
-      ) => TE.TaskEither<APIError, TypeOfEndpointInstance<E>['Output']>
-    : (
-        input: TypeOfEndpointInstance<E>['Input'],
-        ia?: any
-      ) => TE.TaskEither<APIError, TypeOfEndpointInstance<E>['Output']>;
+export type TERequest<
+  E extends MinimalEndpointInstance,
+  O = TypeOfEndpointInstance<E>['Output']
+> = TypeOfEndpointInstance<E>['Input'] extends never
+  ? (
+      input?: TypeOfEndpointInstance<E>['Input'],
+      ia?: any
+    ) => TE.TaskEither<APIError, O>
+  : (
+      input: TypeOfEndpointInstance<E>['Input'],
+      ia?: any
+    ) => TE.TaskEither<APIError, O>;
 
 export interface ResourceEndpointsRecord {
   [apiKey: string]: MinimalEndpointInstance;
@@ -204,6 +241,12 @@ type API<ES extends EndpointsConfig> = {
     : never;
 } & { request: HTTPClient['request'] };
 
+/**
+ * Derive API client from endpoints definition
+ *
+ * @param client - An {@link HTTPClient}
+ * @returns A client with methods derived from given endpoint definitions
+ */
 const makeAPI =
   (client: HTTPClient) =>
   <ES extends { [key: string]: ResourceEndpointsRecord }>(es: ES): API<ES> => {
diff --git a/packages/taboule/package.json b/packages/taboule/package.json
index aaa92c789..f4fddaffc 100644
--- a/packages/taboule/package.json
+++ b/packages/taboule/package.json
@@ -16,14 +16,10 @@
   "dependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@material-ui/core": "^4.12.4",
-    "@material-ui/icons": "^4.11.3",
-    "@material-ui/styles": "^4.11.5",
-    "@material-ui/x-license": "^4.0.0-alpha.37",
     "@mui/icons-material": "^5.8.0",
     "@mui/material": "^5.8.0",
     "@mui/styled-engine": "^5.8.0",
-    "@mui/x-data-grid": "^5.11.1",
+    "@mui/x-data-grid": "^5.17.11",
     "avenger": "^7.0.1",
     "axios": "^0.24.0",
     "date-fns": "^2.28.0",
diff --git a/packages/taboule/public/index.html b/packages/taboule/public/index.html
index 329f44d77..bb7b5756b 100644
--- a/packages/taboule/public/index.html
+++ b/packages/taboule/public/index.html
@@ -13,36 +13,49 @@
     <div>
       <h2>Taboule</h2>
       <div>
+        <div style="display: inline-block">
+          <div id="taboule-show-inputs" style="display: inline">
+            <label>Show Params Inputs</label>
+            <input type="checkbox" checked="true" />
+          </div>
+          <div id="taboule-show-as-tabs">
+            <label>Show As Tabbed</label>
+            <input type="checkbox" />
+          </div>
+        </div>
+
         <select id="taboule-query-value">
-          <option value="ccRelatedUsers">Content creator Related Users</option>
-          <option value="personalSearches">Personal Searches</option>
-          <option value="personalVideos">Personal Videos</option>
-          <option value="personalHomes">Personal Homes</option>
-          <option value="personalAds">Personal ADS</option>
-          <option value="getExperimentById">Compare Experiment</option>
-          <option value="getExperimentList">Experiment list</option>
+          <option value="YCAIccRelatedUsers">
+            YCAI Content creator Related Users
+          </option>
+          <option value="youtubePersonalSearches">YT Personal Searches</option>
+          <option value="youtubePersonalVideos">YT Personal Videos</option>
+          <option value="youtubePersonalHomes">YT Personal Homes</option>
+          <option value="youtubePersonalAds">YT Personal ADS</option>
+          <option value="youtubeGetExperimentById">
+            YT Compare Experiment
+          </option>
+          <option value="youtubeGetExperimentList">YT Experiment list</option>
           <option value="tikTokPersonalHTMLSummary">
-            TikTok Personal HTML Summary
+            TK Personal HTML Summary
           </option>
           <option value="tikTokPersonalSearch">
-            TikTok Personal Search
+            TK Personal Metadata: search
           </option>
-          <option value="tikTokSearches" selected>
-            TikTok (Collective) Searches
+          <option value="tikTokPersonalNative">
+            TK Personal Metadata: native
           </option>
+          <option value="tikTokPersonalForYou">TK Personal ForYou</option>
+          <option value="tikTokPersonalFollowing">TK Personal Following</option>
         </select>
-        <div id="taboule-show-inputs" style="display: inline">
-          <label>Show Params Inputs</label>
-          <input type="checkbox" checked="true" />
-        </div>
       </div>
       <div id="main"></div>
     </div>
   </body>
   <script type="text/javascript" src="./taboule.js"></script>
   <script type="text/javascript">
-    // var baseURL = 'http://localhost:9000/api/';
-    var baseURL = 'http://localhost:14000/api/';
+    var baseURL = 'http://localhost:9000/api/';
+    // var baseURL = 'http://localhost:14000/api/';
     // var baseURL = 'https://tiktok.tracking.exposed/api/';
     // var baseURL = 'https://youtube.tracking.exposed/api/';
 
@@ -50,40 +63,73 @@ <h2>Taboule</h2>
     const showInputCheckbox = document.querySelector(
       '#taboule-show-inputs input'
     );
+    const showsAsTabInput = document.querySelector(
+      '#taboule-show-as-tabs input'
+    );
 
-    const runTaboule = (query, showInput = false) => {
+    const getSelectedQueries = () => {
+      const els = querySelect.querySelectorAll('option:checked');
+      return Array.from(els).map((el) => ({
+        value: el.value,
+        label: el.innerHTML,
+      }));
+    };
+
+    const runTaboule = (queries, showInput = false) => {
       window.Taboule({
         showInput: showInput,
         node: document.getElementById('main'),
         baseURL: baseURL,
-        query: query,
         pageSize: 25,
         initialParams: {
-          publicKey: 'fake-key',
+          publicKey: 'H7AsuUszehN4qKTj2GYYwNNzkJVqUQBRo2wgKevzeUwx',
         },
+        queries,
       });
     };
 
+    querySelect.setAttribute('multiple', 'true');
+    showsAsTabInput.setAttribute('checked', 'true');
+
     querySelect.addEventListener('change', (e) => {
-      runTaboule(
-        e.target.value,
-        showInputCheckbox.getAttribute('checked') === 'true'
-      );
+      const values = getSelectedQueries();
+      runTaboule(values, showInputCheckbox.getAttribute('checked') === 'true');
     });
 
     showInputCheckbox.addEventListener('change', (e) => {
       const isChecked = e.currentTarget.getAttribute('checked') === 'true';
       e.currentTarget.setAttribute('checked', isChecked ? 'false' : 'true');
-      runTaboule(querySelect.value, !isChecked);
+      runTaboule(getSelectedQueries(), !isChecked);
+    });
+
+    showsAsTabInput.addEventListener('change', (e) => {
+      let isChecked = e.currentTarget.getAttribute('checked') === 'true';
+      e.currentTarget.setAttribute('checked', isChecked ? 'false' : 'true');
+      isChecked = e.currentTarget.getAttribute('checked') === 'true';
+      if (isChecked) {
+        querySelect.setAttribute('multiple', 'true');
+      } else {
+        querySelect.removeAttribute('multiple');
+      }
     });
 
     console.log(
       'show input checked?',
       showInputCheckbox.getAttribute('checked')
     );
-    runTaboule(
-      querySelect.value,
-      showInputCheckbox.getAttribute('checked') === 'true'
-    );
+
+    console.log('show tabs?', showsAsTabInput.getAttribute('checked'));
+
+    ['youtubePersonalSearches', 'youtubePersonalVideos'].forEach((v) => {
+      const option = querySelect.querySelector(`option[value="${v}"]`);
+      option?.setAttribute('checked', 'true');
+    });
+
+    setTimeout(() => {
+      runTaboule(
+        getSelectedQueries(),
+        showInputCheckbox.getAttribute('checked') === 'true'
+      );
+    }, 1000);
   </script>
 </html>
diff --git a/packages/taboule/src/assets/ytthumb.png b/packages/taboule/src/assets/ytthumb.png
new file mode 100644
index 000000000..e6a0234a5
Binary files /dev/null and b/packages/taboule/src/assets/ytthumb.png differ
diff --git a/packages/taboule/src/components/ErrorOverlay.tsx b/packages/taboule/src/components/ErrorOverlay.tsx
index aec21aa3c..d0d128d15 100644
--- a/packages/taboule/src/components/ErrorOverlay.tsx
+++ b/packages/taboule/src/components/ErrorOverlay.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@material-ui/core';
+import { Box } from '@mui/material';
 import { ErrorBox } from '@shared/components/Error/ErrorBox';
 import * as React from 'react';
 
@@ -18,6 +18,7 @@ export const ErrorOverlay: React.FC<Error> = (error) => {
         style={{
           margin: 'auto',
           width: '100%',
+          height: '100%',
         }}
       >
         {ErrorBox(error)}
diff --git a/packages/taboule/src/components/TabPanel.tsx b/packages/taboule/src/components/TabPanel.tsx
new file mode 100644
index 000000000..3eb74eade
--- /dev/null
+++ b/packages/taboule/src/components/TabPanel.tsx
@@ -0,0 +1,36 @@
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import * as React from 'react';
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+export const TabPanel: React.FC<TabPanelProps> = (props) => {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <Box sx={{ p: 3 }}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
+  );
+};
+
+export function a11yProps(index: number): any {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  };
+}
diff --git a/packages/taboule/src/components/TabbedTaboule.tsx b/packages/taboule/src/components/TabbedTaboule.tsx
new file mode 100644
index 000000000..6f4a5e626
--- /dev/null
+++ b/packages/taboule/src/components/TabbedTaboule.tsx
@@ -0,0 +1,55 @@
+import Box from '@mui/material/Box';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import * as React from 'react';
+import * as config from '../config';
+import { Taboule, TabouleProps } from './Taboule';
+import { a11yProps, TabPanel } from './TabPanel';
+
+interface TabbedTabouleProps<Q extends keyof config.TabouleConfiguration>
+  extends Omit<TabouleProps<Q>, 'query'> {
+  queries: Array<{
+    label: string;
+    value: Q;
+  }>;
+}
+
+export const TabbedTaboule: React.FC<
+  TabbedTabouleProps<keyof config.TabouleConfiguration>
+> = ({ queries: tabs, ...props }) => {
+  const [value, setValue] = React.useState(0);
+
+  const handleChange = (
+    event: React.SyntheticEvent,
+    newValue: number
+  ): void => {
+    setValue(newValue);
+  };
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <Tabs
+          value={value}
+          onChange={handleChange}
+          aria-label="basic tabs example"
+        >
+          {tabs.map((t, i) => (
+            <Tab
+              key={t.value}
+              label={t.label}
+              {...a11yProps(i)}
+              style={{ marginLeft: 10, marginR: 10 }}
+            />
+          ))}
+        </Tabs>
+      </Box>
+
+      {tabs.map((t, i) => (
+        <TabPanel key={t.value} value={value} index={i}>
+          <Taboule {...props} query={t.value} />
+        </TabPanel>
+      ))}
+    </Box>
+  );
+};
diff --git a/packages/taboule/src/components/Taboule.css b/packages/taboule/src/components/Taboule.css
new file mode 100644
index 000000000..d101efcaf
--- /dev/null
+++ b/packages/taboule/src/components/Taboule.css
@@ -0,0 +1,19 @@
+.taboule__reload{
+  position: absolute;
+  right: 0;
+  background-color:transparent;
+  font-size: 16px;
+  border: 1px solid #f44336;
+  border-radius: 3px;
+  padding: 5px 10px;
+  color: #f44336;
+  transition: all .2s;
+  bottom: 0px;
+}
+
+.taboule__reload:hover{
+  cursor: pointer;
+  background-color:#f44336;
+  color: white;
+  border: 1px solid white;
+}
\ No newline at end of file
diff --git a/packages/taboule/src/components/Taboule.tsx b/packages/taboule/src/components/Taboule.tsx
index 22b8a0c5b..d2b2b61b2 100644
--- a/packages/taboule/src/components/Taboule.tsx
+++ b/packages/taboule/src/components/Taboule.tsx
@@ -1,9 +1,21 @@
-import { Box, Typography } from '@material-ui/core';
-import { DataGrid, DataGridProps, GridColTypeDef } from '@mui/x-data-grid';
-import { APIError } from '@shared/errors/APIError';
+import { Box, Divider, Typography } from '@mui/material';
+import {
+  DataGrid,
+  DataGridProps,
+  GridColTypeDef,
+  GridEventListener,
+  GridFilterModel,
+  GridFooter,
+  GridLinkOperator,
+  GridToolbarQuickFilter,
+} from '@mui/x-data-grid';
 import { toValidationError } from '@shared/errors/ValidationError';
 import { GetLogger } from '@shared/logger';
-import { ObservableQuery } from 'avenger/lib/Query';
+import { MakeAPIClient } from '@shared/providers/api.provider';
+import * as tkEndpoints from '@tktrex/shared/endpoints';
+import { TKMetadata } from '@tktrex/shared/models';
+import * as ytEndpoints from '@yttrex/shared/endpoints';
+import { Metadata } from '@yttrex/shared/models/metadata/Metadata';
 import * as QR from 'avenger/lib/QueryResult';
 import { WithQueries } from 'avenger/lib/react';
 import debug from 'debug';
@@ -12,16 +24,17 @@ import { pipe } from 'fp-ts/lib/function';
 import * as t from 'io-ts';
 import * as React from 'react';
 import * as config from '../config';
-import { TabouleDataProvider } from '../state';
-import { Results, SearchRequestInput, TabouleQueries } from '../state/queries';
+import { GetTabouleCommands } from '../state/commands';
 import { TabouleQueryKey } from '../state/types';
+import RefreshButton from './buttons/RefreshButton';
 import { ErrorOverlay } from './ErrorOverlay';
+import './Taboule.css';
 
 debug.enable(process.env.DEBUG ?? '');
 
 const log = GetLogger('taboule');
 
-const validateProps = <Q extends keyof TabouleQueries>(
+const validateProps = <Q extends keyof config.TabouleConfiguration>(
   props: TabouleProps<Q>
 ): E.Either<t.Errors, TabouleProps<Q>> => {
   return pipe(
@@ -32,7 +45,7 @@ const validateProps = <Q extends keyof TabouleQueries>(
   );
 };
 
-export interface TabouleProps<Q extends keyof TabouleQueries>
+export interface TabouleProps<Q extends keyof config.TabouleConfiguration>
   extends Omit<DataGridProps, 'rows' | 'columns'> {
   query: Q;
   showInput: boolean;
@@ -43,7 +56,27 @@ export interface TabouleProps<Q extends keyof TabouleQueries>
   height?: number | string;
 }
 
-export const Taboule = <Q extends keyof TabouleQueries>({
+enum ExpandableActionType {
+  SHOW_MODAL = 'SHOW_MODAL',
+  CLOSE_MODAL = 'CLOSE_MODAL',
+}
+interface ExpandableAction {
+  type: ExpandableActionType;
+  payload: TKMetadata.TKMetadata | Metadata;
+}
+
+interface InvisibleExpandableState {
+  isVisible: false;
+  row: undefined;
+}
+type ExpandableState =
+  | {
+      isVisible: true;
+      row: TKMetadata.TKMetadata | Metadata;
+    }
+  | InvisibleExpandableState;
+
+export const Taboule = <Q extends keyof config.TabouleConfiguration>({
   height = 600,
   ...props
 }: TabouleProps<Q>): JSX.Element => {
@@ -76,22 +109,44 @@ export const Taboule = <Q extends keyof TabouleQueries>({
 
   const [page, setPage] = React.useState(0);
   const [pageSize, setPageSize] = React.useState(props.pageSize ?? 25);
+  const [filterModel, setFilterModel] = React.useState<GridFilterModel>({
+    items: [],
+    quickFilterLogicOperator: GridLinkOperator.Or,
+  });
 
-  const tabouleQueries = React.useMemo(
-    () => TabouleDataProvider(baseURL),
-    [baseURL]
-  );
-  const query: ObservableQuery<
-    SearchRequestInput,
-    APIError,
-    Results<any>
-  > = tabouleQueries.queries[queryKey];
-
-  const { inputs, ...queryConfig } = React.useMemo(
-    () =>
-      config.defaultConfiguration(tabouleQueries.commands, params)[queryKey],
-    [queryKey, params]
-  );
+  const { commands, ...apiClients } = React.useMemo(() => {
+    const { API: YT } = MakeAPIClient(
+      {
+        baseURL,
+        getAuth: async (req) => req,
+        onUnauthorized: async (res) => res,
+      },
+      ytEndpoints
+    );
+
+    const { API: TK } = MakeAPIClient(
+      {
+        baseURL,
+        getAuth: async (req) => req,
+        onUnauthorized: async (res) => res,
+      },
+      tkEndpoints
+    );
+
+    const commands = GetTabouleCommands({ YT, TK });
+    return { YT, TK, commands };
+  }, [baseURL]);
+
+  const { inputs, filters, expanded, query, columns, ...queryConfig } =
+    React.useMemo(
+      () =>
+        config.defaultConfiguration({
+          clients: apiClients,
+          commands,
+          params,
+        })[queryKey],
+      [queryKey, params]
+    );
 
   const paramsInputs = React.useMemo(() => {
     if (showInput) {
@@ -104,7 +159,7 @@ export const Taboule = <Q extends keyof TabouleQueries>({
     setPageSize(pageSize);
   }, []);
 
-  const handlePageChange = React.useCallback((page: number) => {
+  const handlePageChange = React.useCallback((page: number, details: any) => {
     setPage(page);
   }, []);
 
@@ -113,15 +168,39 @@ export const Taboule = <Q extends keyof TabouleQueries>({
     page,
     filterMode: 'server',
     ...queryConfig,
+    columns: columns as any[],
+    onFilterModelChange(model, details) {
+      setFilterModel(model);
+    },
+
+    filterModel,
     rows: [],
     rowsPerPageOptions: [25, 50, 100],
+    initialState: {
+      pagination: {
+        page: 0,
+      },
+    },
     pageSize,
     paginationMode: 'server',
+    pagination: true,
+    componentsProps: {
+      toolbar: {
+        showQuickFilter: true,
+        quickFilterProps: {
+          debounceMs: 500,
+        },
+      },
+    },
     components: {
       ErrorOverlay,
-      Footer: () => {
+      Footer: (props) => {
         return (
-          <Box margin={2}>
+          <Box display={'flex'} flexDirection="column" margin={2}>
+            <Box>
+              <GridFooter />
+            </Box>
+            <Divider style={{ marginBottom: 10 }} />
             <Typography>Taboule - v{process.env.VERSION}</Typography>
           </Box>
         );
@@ -129,7 +208,38 @@ export const Taboule = <Q extends keyof TabouleQueries>({
       ...(config.actions !== undefined
         ? {
             Toolbar: (props) => {
-              return <Box margin={2}>{queryConfig.actions?.()}</Box>;
+              return (
+                <Box
+                  style={{
+                    display: 'flex',
+                    alignContent: 'center',
+                  }}
+                >
+                  <Box
+                    margin={2}
+                    style={{
+                      display: 'flex',
+                      flexGrow: 1,
+                      alignItems: 'center',
+                    }}
+                  >
+                    <GridToolbarQuickFilter {...props.quickFilterProps} />
+                  </Box>
+
+                  <Box
+                    margin={2}
+                    style={{
+                      display: 'flex',
+                      flexDirection: 'row',
+                      justifyContent: 'flex-end',
+                      alignItems: 'center',
+                    }}
+                  >
+                    <RefreshButton onClick={handleReload} />
+                    {queryConfig.actions?.({ ...params, filter: filters })}
+                  </Box>
+                </Box>
+              );
             },
           }
         : {}),
@@ -139,17 +249,86 @@ export const Taboule = <Q extends keyof TabouleQueries>({
   log.debug(`Rendering with props %O`, dataGridProps);
   log.debug(`Query %s (%O) with params %O`, queryKey, query, params);
 
+  const initialState: InvisibleExpandableState = {
+    isVisible: false,
+    row: undefined,
+  };
+  const infoReducerFn = (
+    state: ExpandableState,
+    action: ExpandableAction
+  ): ExpandableState => {
+    const { type, payload } = action;
+    if (type === 'SHOW_MODAL') {
+      return { isVisible: true, row: payload };
+    }
+    if (type === 'CLOSE_MODAL') {
+      return initialState;
+    }
+    return state;
+  };
+  const [infoState, dispatchInfoState] = React.useReducer(
+    infoReducerFn,
+    initialState
+  );
+
+  const handleEvent: GridEventListener<'rowClick'> = (
+    params // GridRowParams
+  ) => {
+    dispatchInfoState({
+      type: ExpandableActionType.SHOW_MODAL,
+      payload: params.row,
+    });
+  };
+
+  const handleHideModal = (): void => {
+    dispatchInfoState({
+      type: ExpandableActionType.CLOSE_MODAL,
+      payload: initialState.row as any,
+    });
+  };
+
+  const [, forceUpdate] = React.useReducer((x) => x + 1, 0);
+
+  const handleReload = (): void => {
+    forceUpdate();
+  };
+
+  const amount = pageSize;
+  const skip = page * pageSize;
+
+  const queryFilters = React.useMemo(() => {
+    const currentFilter = filterModel.items.reduce(
+      (acc, v) => ({ ...acc, [v.columnField]: v.value }),
+      {}
+    );
+
+    return {
+      ...filters,
+      ...currentFilter,
+    };
+  }, [filterModel]);
+
   return (
     <Box height={height}>
-      {paramsInputs}
+      <div
+        style={{
+          position: 'relative',
+          marginBottom: '30px',
+        }}
+      >
+        {paramsInputs}
+      </div>
+
       <WithQueries
         queries={{ query }}
         params={{
           query: {
             Params: params,
             Query: {
-              amount: pageSize,
-              skip: page * pageSize,
+              publicKey: params.publicKey,
+              amount,
+              skip,
+              filter: queryFilters,
             },
           },
         }}
@@ -169,11 +348,15 @@ export const Taboule = <Q extends keyof TabouleQueries>({
                 rows={query.content}
                 onPageSizeChange={handlePageSizeChange}
                 onPageChange={handlePageChange}
+                onRowClick={handleEvent}
               />
             );
           }
         )}
       />
+      {infoState.row && expanded
+        ? expanded({ ...(infoState as any), onClose: handleHideModal })
+        : null}
     </Box>
   );
 };
diff --git a/packages/taboule/src/components/buttons/CSVDownloadButton.tsx b/packages/taboule/src/components/buttons/CSVDownloadButton.tsx
index 76b3e6480..b402a898a 100644
--- a/packages/taboule/src/components/buttons/CSVDownloadButton.tsx
+++ b/packages/taboule/src/components/buttons/CSVDownloadButton.tsx
@@ -1,4 +1,4 @@
-import { IconButton, Tooltip } from '@material-ui/core';
+import { IconButton, Tooltip } from '@mui/material';
 import * as React from 'react';
 import CSVIcon from '@material-ui/icons/CloudDownloadOutlined';
 
diff --git a/packages/taboule/src/components/buttons/DeleteButton.tsx b/packages/taboule/src/components/buttons/DeleteButton.tsx
index 448a5cda5..a8fd7b5a8 100644
--- a/packages/taboule/src/components/buttons/DeleteButton.tsx
+++ b/packages/taboule/src/components/buttons/DeleteButton.tsx
@@ -1,5 +1,5 @@
-import { IconButton, Tooltip } from '@material-ui/core';
-import DeleteIcon from '@material-ui/icons/DeleteOutline';
+import { IconButton, Tooltip } from '@mui/material';
+import DeleteIcon from '@mui/icons-material/DeleteOutline';
 import * as React from 'react';
 
 const DeleteButton: React.FC<{ id: string; onClick: (id: string) => void }> = (
diff --git a/packages/taboule/src/components/buttons/RefreshButton.tsx b/packages/taboule/src/components/buttons/RefreshButton.tsx
new file mode 100644
index 000000000..195e30016
--- /dev/null
+++ b/packages/taboule/src/components/buttons/RefreshButton.tsx
@@ -0,0 +1,15 @@
+import { IconButton, Tooltip } from '@mui/material';
+import * as React from 'react';
+import RefreshIcon from '@mui/icons-material/RefreshOutlined';
+
+const RefreshButton: React.FC<{ onClick: () => void }> = (props) => {
+  return (
+    <Tooltip title="Refresh" placement="top">
+      <IconButton size="small" onClick={props.onClick}>
+        <RefreshIcon color="error" />
+      </IconButton>
+    </Tooltip>
+  );
+};
+
+export default RefreshButton;
diff --git a/packages/taboule/src/components/expand-view/ExpandView.css b/packages/taboule/src/components/expand-view/ExpandView.css
new file mode 100644
index 000000000..7b42a7578
--- /dev/null
+++ b/packages/taboule/src/components/expand-view/ExpandView.css
@@ -0,0 +1,26 @@
+.expand-view {
+  position: fixed;
+  right: -600px;
+  height: 100%;
+  top: 0;
+  width: 30vw;
+  background-color: white;
+  box-shadow: -4px 0px 22px -10px rgba(0, 0, 0, 0.75);
+  transition: all 0.4s linear;
+  font-family: Roboto;
+  display: flex;
+  z-index: 3000;
+}
+
+.expand-view.visible {
+  right: 0;
+}
+
+.expand-view__close {
+  position: absolute;
+  top: 15px;
+  left: 15px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
diff --git a/packages/taboule/src/components/expand-view/ExpandView.tsx b/packages/taboule/src/components/expand-view/ExpandView.tsx
new file mode 100644
index 000000000..25de7d510
--- /dev/null
+++ b/packages/taboule/src/components/expand-view/ExpandView.tsx
@@ -0,0 +1,26 @@
+import CloseIcon from '@mui/icons-material/Close';
+import React from 'react';
+import './ExpandView.css';
+
+export interface ExpandViewProps {
+  isVisible: boolean;
+  onClose: () => void;
+}
+
+const ExpandView: React.FC<React.PropsWithChildren<ExpandViewProps>> = ({
+  children,
+  isVisible,
+  onClose,
+  ...props
+}) => {
+  return (
+    <div className={`expand-view ${isVisible ? 'visible' : ''}`}>
+      {children}
+      <button className="expand-view__close" onClick={onClose}>
+        <CloseIcon />
+      </button>
+    </div>
+  );
+};
+
+export default ExpandView;
diff --git a/packages/taboule/src/components/gridCells.tsx b/packages/taboule/src/components/gridCells.tsx
index f90bb9695..d91c89ae9 100644
--- a/packages/taboule/src/components/gridCells.tsx
+++ b/packages/taboule/src/components/gridCells.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Avatar } from '@material-ui/core';
+import { Avatar } from '@mui/material';
 import { GridCellParams } from '@mui/x-data-grid';
 import { formatDistanceToNow } from 'date-fns';
 
diff --git a/packages/taboule/src/components/index.tsx b/packages/taboule/src/components/index.tsx
new file mode 100644
index 000000000..2312c1cf8
--- /dev/null
+++ b/packages/taboule/src/components/index.tsx
@@ -0,0 +1,22 @@
+import { TabouleConfiguration } from '../config';
+import React from 'react';
+import { TabbedTaboule } from './TabbedTaboule';
+import { Taboule, TabouleProps } from './Taboule';
+
+export interface TabouleIndexProps<Q extends keyof TabouleConfiguration>
+  extends Omit<TabouleProps<Q>, 'query'> {
+  queries?: Array<{ value: Q; label: string }>;
+}
+
+export const TabouleIndex = <Q extends keyof TabouleConfiguration>({
+  queries,
+  ...props
+}: TabouleIndexProps<Q>): JSX.Element => {
+  return !queries ? (
+    <div>Define a query to display data in this Taboule.</div>
+  ) : queries.length > 1 ? (
+    <TabbedTaboule {...props} queries={queries} />
+  ) : (
+    <Taboule {...props} query={queries[0].value} />
+  );
+};
diff --git a/packages/taboule/src/components/list/ParsedInfoList.css b/packages/taboule/src/components/list/ParsedInfoList.css
new file mode 100644
index 000000000..93a220424
--- /dev/null
+++ b/packages/taboule/src/components/list/ParsedInfoList.css
@@ -0,0 +1,46 @@
+.parsed-info__list {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin-top: 60px;
+  padding-left: 25px;
+  padding-right: 25px;
+  overflow: scroll;
+}
+
+.parsed-info__list__item {
+  margin-bottom: 30px;
+  position: relative;
+}
+
+.parsed-info__list__item:after {
+  height: 1px;
+  width: 100%;
+  background-color: black;
+  position: absolute;
+  content: '';
+  display: block;
+  bottom: -15px;
+  opacity: 0.1;
+}
+
+.parsed-info__list__item__link {
+  display: flex;
+  color: rgba(0, 0, 0, 0.87);
+  text-decoration: none;
+}
+
+.parsed-info__list__item__img {
+  height: 120px;
+  width: 160px;
+  object-fit: cover;
+  margin-right: 15px;
+  border-radius: 5px;
+  border: 1px solid gainsboro;
+}
+
+.parsed-info__list__item__text__views {
+  opacity: 0.8;
+  margin-top: 5px;
+  color: #f44336;
+}
diff --git a/packages/taboule/src/components/list/ParsedInfoList.tsx b/packages/taboule/src/components/list/ParsedInfoList.tsx
new file mode 100644
index 000000000..6645fe6d0
--- /dev/null
+++ b/packages/taboule/src/components/list/ParsedInfoList.tsx
@@ -0,0 +1,59 @@
+import { getYTVideoURLById } from '@shared/utils/yt.utils';
+import { ParsedInfo } from '@yttrex/shared/models/metadata/VideoResult';
+import * as React from 'react';
+import ytThumbnail from './../../assets/ytthumb.png';
+import './ParsedInfoList.css';
+
+interface ParsedInfoListProps {
+  data: ParsedInfo[];
+}
+
+export const ParsedInfoList: React.FC<ParsedInfoListProps> = ({ data }) => {
+  const recommendedList = data.map((recommendation) => {
+    return (
+      <li
+        key={recommendation.index ?? recommendation.videoId}
+        className="parsed-info__list__item"
+      >
+        <a
+          className="parsed-info__list__item__link"
+          target="_blank"
+          rel="noreferrer"
+          href={
+            recommendation.videoId
+              ? getYTVideoURLById(recommendation.videoId)
+              : ''
+          }
+        >
+          <img
+            className="parsed-info__list__item__img"
+            height="120px"
+            src={
+              recommendation.thumbnailHref ??
+              recommendation.recommendedThumbnail ??
+              ytThumbnail
+            }
+          />
+
+          <div className="parsed-info__list__item__text">
+            <div className="parsed-info__list__item__text__title">
+              {recommendation.recommendedTitle ??
+                recommendation.title ??
+                recommendation.videoId}
+            </div>
+            <div className="parsed-info__list__item__text">
+              {(recommendation.recommendedViews ?? recommendation.views) && (
+                <div className="parsed-info__list__item__text__views">
+                  {recommendation.recommendedViews ?? recommendation.views}{' '}
+                  views
+                </div>
+              )}
+            </div>
+          </div>
+        </a>
+      </li>
+    );
+  });
+
+  return <ul className="parsed-info__list">{recommendedList}</ul>;
+};
diff --git a/packages/taboule/src/config/actions.tsx b/packages/taboule/src/config/actions.tsx
index 874b31132..38998cd41 100644
--- a/packages/taboule/src/config/actions.tsx
+++ b/packages/taboule/src/config/actions.tsx
@@ -1,7 +1,7 @@
-import { Box, IconButton, Tooltip } from '@material-ui/core';
+import { Box, IconButton, Tooltip } from '@mui/material';
 import { GridCellParams } from '@mui/x-data-grid';
-import CompareIcon from '@material-ui/icons/CompareOutlined';
-import RelatedIcon from '@material-ui/icons/Replay30Outlined';
+import CompareIcon from '@mui/icons-material/CompareOutlined';
+import RelatedIcon from '@mui/icons-material/Replay30Outlined';
 import * as React from 'react';
 import CSVDownloadButton from '../components/buttons/CSVDownloadButton';
 import DeleteButton from '../components/buttons/DeleteButton';
@@ -24,7 +24,7 @@ export const personalMetadataActions =
                 },
               },
               {
-                personalSearches: {
+                youtubePersonalSearches: {
                   Params: params,
                 },
               }
diff --git a/packages/taboule/src/config/config.type.ts b/packages/taboule/src/config/config.type.ts
new file mode 100644
index 000000000..7fe17bae6
--- /dev/null
+++ b/packages/taboule/src/config/config.type.ts
@@ -0,0 +1,55 @@
+import { DataGridProps, GridColTypeDef } from '@mui/x-data-grid';
+import { EndpointQuery, Results } from '../state/queries';
+import { ExpandViewProps } from '../components/expand-view/ExpandView';
+import { TabouleCommands } from '../state/commands';
+import * as tkEndpoints from '@tktrex/shared/endpoints';
+import * as ytEndpoints from '@yttrex/shared/endpoints';
+import { APIClient } from '@shared/providers/api.provider';
+
+export interface TabouleColumnProps<K> extends Omit<GridColTypeDef, 'field'> {
+  field: K | 'actions';
+}
+
+/**
+ * The Taboule query configuration object
+ *
+ * @typeParam P - the data type to handle
+ * @typeParam I - the input type for query
+ * @typeParam O - the output object
+ */
+export interface TabouleQueryConfiguration<
+  P extends Record<string, any>,
+  I extends {},
+  O
+> extends Omit<DataGridProps, 'columns' | 'rows'> {
+  columns: Array<TabouleColumnProps<keyof P>>;
+  inputs?: (params: any, setParams: React.Dispatch<any>) => JSX.Element;
+  filters?: Record<string, string>;
+  expanded?: (r: Omit<ExpandViewProps, 'data'> & { row: P }) => JSX.Element;
+  actions?: (filters: any) => JSX.Element;
+  query: EndpointQuery<I, O>;
+}
+
+/**
+ * API Clients for our backends
+ */
+export interface APIClients {
+  TK: APIClient<typeof tkEndpoints>;
+  YT: APIClient<typeof ytEndpoints>;
+}
+
+export interface GetTabouleQueryConfOpts {
+  clients: APIClients;
+  commands: TabouleCommands;
+  params: any;
+}
+
+/**
+ * Get taboule query configuration.
+ *
+ */
+export type GetTabouleQueryConf<
+  P extends Record<string, any>,
+  I extends {},
+  O = Results<P>
+> = (opts: GetTabouleQueryConfOpts) => TabouleQueryConfiguration<P, I, O>;
diff --git a/packages/taboule/src/config/defaults.ts b/packages/taboule/src/config/defaults.ts
new file mode 100644
index 000000000..45cf902c5
--- /dev/null
+++ b/packages/taboule/src/config/defaults.ts
@@ -0,0 +1,42 @@
+import { GridColTypeDef } from '@mui/x-data-grid';
+import * as cells from '../components/gridCells';
+
+/**
+ * The default column width
+ *
+ */
+export const columnDefault: Partial<GridColTypeDef> = {
+  // 200px seems a reasonable width default
+  minWidth: 200,
+  // we want not filterable columns as default
+  filterable: false,
+};
+
+export const fieldsDefaultHead: any[] = [
+  {
+    ...columnDefault,
+    field: 'id' as const,
+    minWidth: 40,
+  },
+];
+
+export const fieldsDefaultTail = [
+  {
+    ...columnDefault,
+    field: 'savingTime' as const,
+    renderCell: cells.distanceFromNowCell,
+  },
+  {
+    ...columnDefault,
+    field: 'experimentId' as const,
+    headerName: 'experimentId',
+    filterable: true,
+    minWidth: 400,
+  },
+  {
+    ...columnDefault,
+    field: 'researchTag' as const,
+    headerName: 'Research Tag',
+    filterable: true,
+  },
+];
diff --git a/packages/taboule/src/config/filters.ts b/packages/taboule/src/config/filters.ts
new file mode 100644
index 000000000..8ab01f47b
--- /dev/null
+++ b/packages/taboule/src/config/filters.ts
@@ -0,0 +1,14 @@
+import { GridCellParams } from '@mui/x-data-grid';
+
+export const getApplyFilterFnIncluded = (
+  value: string
+): null | ((p: GridCellParams) => boolean) => {
+  // console.log('value', value);
+  if (!value || value.length !== 4 || !/\d{4}/.test(value)) {
+    // If the value is not a 4 digit string, it can not be a year so applying this filter is useless
+    return null;
+  }
+  return (params: GridCellParams): boolean => {
+    return params.value.includes(value);
+  };
+};
diff --git a/packages/taboule/src/config/index.tsx b/packages/taboule/src/config/index.tsx
index 44d6467ff..a527f62c2 100644
--- a/packages/taboule/src/config/index.tsx
+++ b/packages/taboule/src/config/index.tsx
@@ -1,407 +1,47 @@
-import { Box, Typography } from '@material-ui/core';
-import { DataGridProps, GridColTypeDef } from '@mui/x-data-grid';
-import { ChannelRelated } from '@shared/models/ChannelRelated';
-import {
-  HomeMetadata,
-  SearchMetadata,
-  VideoMetadata,
-} from '@shared/models/contributor/ContributorPersonalStats';
-import {
-  SummaryHTMLMetadata,
-  TikTokPSearchMetadata,
-  // SummaryMetadata,
-} from '@shared/models/contributor/ContributorPersonalSummary';
-import { SearchMetadata as TikTokSearchMetadata } from '@tktrex/shared/models/metadata';
-import { Metadata } from '@yttrex/shared/models/metadata/Metadata';
-import { GuardoniExperiment } from '@shared/models/Experiment';
-import * as React from 'react';
-import CSVDownloadButton from '../components/buttons/CSVDownloadButton';
-import DeleteButton from '../components/buttons/DeleteButton';
-import * as cells from '../components/gridCells';
 import { TabouleCommands } from '../state/commands';
 import * as actions from './actions';
+import { APIClients } from './config.type';
 import * as inputs from './inputs';
 import * as params from './params';
-
-interface TabouleColumnProps<K> extends Omit<GridColTypeDef, 'field'> {
-  field: K | 'actions';
-}
-
-interface TabouleQueryConfiguration<P extends Record<string, any>>
-  extends Omit<DataGridProps, 'columns' | 'rows'> {
-  columns: Array<TabouleColumnProps<keyof P>>;
-  inputs?: (params: any, setParams: React.Dispatch<any>) => JSX.Element;
-  actions?: () => JSX.Element;
+import { tikTokPersonalForYou } from './tiktok/tiktokPersonalForYou';
+import { tikTokPersonalNative } from './tiktok/tiktokPersonalNative';
+import { tikTokPersonalProfile } from './tiktok/tiktokPersonalProfile';
+import { tikTokPersonalSearch } from './tiktok/tiktokPersonalSearch';
+import { YCAIccRelatedUsers } from './ycai/ycaiCCRelatedUsers';
+import { youtubeGetExperimentList } from './youtube/youtubeGetExperimentList';
+import { youtubePersonalHomes } from './youtube/youtubePersonalHomes';
+import { youtubePersonalSearches } from './youtube/youtubePersonalSearches';
+import { youtubePersonalStats } from './youtube/youtubePersonalStats';
+import { youtubePersonalVideos } from './youtube/youtubePersonalVideos';
+export interface TabouleConfiguration {
+  YCAIccRelatedUsers: ReturnType<typeof YCAIccRelatedUsers>;
+  youtubeGetExperimentList: ReturnType<typeof youtubeGetExperimentList>;
+  youtubePersonalAds: ReturnType<typeof youtubePersonalStats>;
+  youtubePersonalHomes: ReturnType<typeof youtubePersonalHomes>;
+  youtubePersonalSearches: ReturnType<typeof youtubePersonalSearches>;
+  youtubePersonalVideos: ReturnType<typeof youtubePersonalVideos>;
+  tikTokPersonalSearch: ReturnType<typeof tikTokPersonalSearch>;
+  tikTokPersonalNative: ReturnType<typeof tikTokPersonalNative>;
+  tikTokPersonalProfile: ReturnType<typeof tikTokPersonalProfile>;
+  tikTokPersonalForYou: ReturnType<typeof tikTokPersonalForYou>;
 }
 
-interface TabouleConfiguration {
-  ccRelatedUsers: TabouleQueryConfiguration<ChannelRelated>;
-  getExperimentById: TabouleQueryConfiguration<Metadata>;
-  getExperimentList: TabouleQueryConfiguration<GuardoniExperiment>;
-  personalAds: TabouleQueryConfiguration<{}>;
-  personalHomes: TabouleQueryConfiguration<HomeMetadata>;
-  personalSearches: TabouleQueryConfiguration<SearchMetadata>;
-  personalVideos: TabouleQueryConfiguration<VideoMetadata>;
-  tikTokPersonalHTMLSummary: TabouleQueryConfiguration<SummaryHTMLMetadata>;
-  tikTokPersonalSearch: TabouleQueryConfiguration<TikTokPSearchMetadata>;
-  tikTokSearches: TabouleQueryConfiguration<TikTokSearchMetadata>;
-}
-
-const columnDefault: Partial<GridColTypeDef> = {
-  minWidth: 200,
-};
-
-export const defaultConfiguration = (
-  commands: TabouleCommands,
-  params: any
-): TabouleConfiguration => {
-  return {
-    ccRelatedUsers: {
-      getRowId: (d) => d.id ?? d.recommendedSource ?? d.percentage,
-      inputs: inputs.channelIdInput,
-      columns: [
-        {
-          ...columnDefault,
-          field: 'recommendedSource',
-          headerName: 'Recommended Source',
-          minWidth: 160,
-        },
-        {
-          ...columnDefault,
-          field: 'percentage',
-          minWidth: 160,
-          valueFormatter: (p) => `${p.value}%`,
-        },
-        {
-          ...columnDefault,
-          field: 'recommendedChannelCount',
-          minWidth: 160,
-        },
-      ],
-    },
-    getExperimentById: {
-      inputs: inputs.experimentIdInput,
-      columns: [
-        {
-          ...columnDefault,
-          field: 'savingTime',
-          headerName: 'savingTime',
-          minWidth: 400,
-          renderCell: cells.distanceFromNowCell,
-        },
-      ],
-    },
-    getExperimentList: {
-      columns: [
-        {
-          ...columnDefault,
-          field: 'experimentId',
-          headerName: 'experimentId',
-          minWidth: 400,
-        },
-        {
-          ...columnDefault,
-          field: 'when',
-          headerName: 'Registered',
-          renderCell: cells.distanceFromNowCell,
-        },
-        {
-          ...columnDefault,
-          field: 'steps',
-          minWidth: 350,
-          renderCell: (params) => {
-            return (
-              <Box key={params.id}>
-                {((params?.value as any[]) || []).map((linkinfo) => {
-                  return <a href={linkinfo.url}>{linkinfo.urltag}</a>;
-                })}
-              </Box>
-            );
-          },
-        },
-      ],
-    },
-    personalSearches: {
-      inputs: inputs.publicKeyInput,
-      actions: () => {
-        return (
-          <Box textAlign={'right'}>
-            <CSVDownloadButton
-              onClick={() => {
-                void commands.downloadAsCSV({
-                  Params: {
-                    publicKey: params.publicKey,
-                    type: 'search',
-                  },
-                })();
-              }}
-            />
-          </Box>
-        );
-      },
-      columns: [
-        {
-          ...columnDefault,
-          field: 'id',
-          minWidth: 100,
-        },
-        {
-          ...columnDefault,
-          field: 'savingTime',
-          renderCell: cells.distanceFromNowCell,
-        },
-        {
-          ...columnDefault,
-          field: 'query',
-          minWidth: 350,
-          renderCell: (params) => {
-            return (
-              <Typography variant="h6">{params.formattedValue}</Typography>
-            );
-          },
-        },
-        {
-          ...columnDefault,
-          field: 'results',
-          minWidth: 150,
-        },
-        {
-          ...columnDefault,
-          field: 'actions',
-          renderCell: (cellParams) => {
-            return (
-              <Box>
-                <DeleteButton
-                  id={cellParams.row.id}
-                  onClick={(id) => {
-                    void commands.deleteContribution(
-                      {
-                        Params: {
-                          publicKey: params.publicKey,
-                          selector: 'undefined',
-                        },
-                      },
-                      {}
-                    )();
-                  }}
-                />
-                <CSVDownloadButton
-                  onClick={() => {
-                    void commands.downloadSearchesAsCSV({
-                      Params: {
-                        queryString: cellParams.getValue(
-                          cellParams.row.id,
-                          'query'
-                        ) as string,
-                      },
-                    })();
-                  }}
-                />
-              </Box>
-            );
-          },
-        },
-      ],
-    },
-    personalVideos: {
-      inputs: inputs.publicKeyInput,
-      actions: () => {
-        return (
-          <Box textAlign={'right'}>
-            <CSVDownloadButton
-              onClick={() => {
-                void commands.downloadAsCSV({
-                  Params: {
-                    publicKey: params.publicKey,
-                    type: 'video',
-                  },
-                })();
-              }}
-            />
-          </Box>
-        );
-      },
-      columns: [
-        {
-          ...columnDefault,
-          field: 'relative',
-        },
-        {
-          ...columnDefault,
-          field: 'authorName',
-        },
-        {
-          ...columnDefault,
-          field: 'authorSource',
-        },
-        {
-          ...columnDefault,
-          field: 'actions',
-          renderCell: actions.personalMetadataActions(commands, params),
-        },
-      ],
-    },
-    personalAds: {
-      inputs: inputs.publicKeyInput,
-      columns: [],
-    },
-    personalHomes: {
-      inputs: inputs.publicKeyInput,
-      columns: [
-        {
-          ...columnDefault,
-          field: 'id',
-          minWidth: 100,
-        },
-        {
-          ...columnDefault,
-          field: 'savingTime',
-          renderCell: cells.distanceFromNowCell,
-        },
-        {
-          ...columnDefault,
-          field: 'selected',
-          renderCell: (params) => {
-            if (Array.isArray(params.value)) {
-              return params.value.length;
-            }
-            return 0;
-          },
-        },
-        {
-          ...columnDefault,
-          field: 'actions',
-          renderCell: actions.personalMetadataActions(commands, params),
-        },
-      ],
-    },
-    tikTokPersonalHTMLSummary: {
-      inputs: inputs.publicKeyInput,
-      columns: [
-        {
-          ...columnDefault,
-          field: 'id',
-        },
-        {
-          ...columnDefault,
-          field: 'timelineId',
-        },
-        {
-          ...columnDefault,
-          field: 'href',
-        },
-        {
-          ...columnDefault,
-          field: 'savingTime',
-          renderCell: cells.distanceFromNowCell,
-        },
-      ],
-    },
-    tikTokPersonalSearch: {
-      inputs: inputs.publicKeyInput,
-      actions: () => {
-        return (
-          <Box textAlign={'right'}>
-            <CSVDownloadButton
-              onClick={() => {
-                void commands.downloadAsCSV({
-                  Params: {
-                    publicKey: params.publicKey,
-                    type: 'search',
-                  },
-                })();
-              }}
-            />
-          </Box>
-        );
-      },
-      columns: [
-        {
-          ...columnDefault,
-          field: 'id',
-          width: 40,
-          renderCell: (params) => {
-            const longId = params.formattedValue;
-            const shortId = (longId as string).substr(0, 7);
-            return (
-              <a href={`/details/#${encodeURI(longId as string)}`}>{shortId}</a>
-            );
-          },
-        },
-        {
-          ...columnDefault,
-          field: 'query',
-          renderCell: (params) => {
-            return (
-              <a
-                href={`/search/#${encodeURI(params.formattedValue as string)}`}
-              >
-                {params.formattedValue}
-              </a>
-            );
-          },
-        },
-        {
-          ...columnDefault,
-          field: 'savingTime',
-          headerName: 'when',
-          renderCell: cells.distanceFromNowCell,
-        },
-        {
-          ...columnDefault,
-          field: 'rejected',
-          headerName: 'was answered?',
-          width: 40,
-          renderCell: (params) => {
-            return <span>{params.formattedValue === true ? '🚫' : '✔️'}</span>;
-          },
-        },
-        {
-          ...columnDefault,
-          field: 'results',
-          width: 40,
-        },
-        {
-          ...columnDefault,
-          field: 'sources',
-        },
-      ],
-    },
-    tikTokSearches: {
-      /* this taboule hasn't the CSV allowed nor supported, because
-       * it got only a portion of all the searches = the many that
-       * have been searched from two users + do not return any rejection */
-      columns: [
-        {
-          ...columnDefault,
-          field: 'id',
-        },
-        {
-          ...columnDefault,
-          field: 'query',
-          renderCell: (params) => {
-            return (
-              <a
-                href={`/search/#${encodeURI(params.formattedValue as string)}`}
-              >
-                {params.formattedValue}
-              </a>
-            );
-          },
-        },
-        // {
-        //   ...columnDefault,
-        //   field: 'thumbnails',
-        //   renderCell: cells.avatarCell,
-        // },
-        {
-          ...columnDefault,
-          field: 'savingTime',
-          renderCell: cells.distanceFromNowCell,
-        },
-      ],
-    },
-  };
+export const defaultConfiguration = (opts: {
+  clients: APIClients;
+  commands: TabouleCommands;
+  params: any;
+}): TabouleConfiguration => {
+  return Object.entries({
+    YCAIccRelatedUsers,
+    youtubeGetExperimentList,
+    youtubePersonalSearches,
+    youtubePersonalVideos,
+    youtubePersonalHomes,
+    tikTokPersonalNative,
+    tikTokPersonalForYou,
+    tikTokPersonalProfile,
+    tikTokPersonalSearch,
+  }).reduce<any>((acc, [key, fn]) => ({ ...acc, [key]: fn(opts) }), {});
 };
 
 export { actions, inputs, params };
diff --git a/packages/taboule/src/config/inputs.tsx b/packages/taboule/src/config/inputs.tsx
index 115130a06..f7898d008 100644
--- a/packages/taboule/src/config/inputs.tsx
+++ b/packages/taboule/src/config/inputs.tsx
@@ -1,15 +1,17 @@
 import * as React from 'react';
-import { Box, FormControlLabel, Input } from '@material-ui/core';
+import { Box, FormControlLabel, Input } from '@mui/material';
 
 const makeTextInput =
   ({ label, key }: { label: string; key: string }) =>
   // eslint-disable-next-line react/display-name
   (params: any, setParams: React.Dispatch<any>): JSX.Element => {
     return (
-      <Box margin={2}>
+      <Box>
         <FormControlLabel
           style={{
             alignItems: 'flex-start',
+            marginLeft: 0,
+            width: '100%',
           }}
           labelPlacement="top"
           label={label}
@@ -19,6 +21,9 @@ const makeTextInput =
               name={key}
               value={params[key] ?? ''}
               onChange={(e) => setParams({ ...params, [key]: e.target.value })}
+              style={{
+                width: '30%',
+              }}
             />
           }
         />
@@ -31,7 +36,7 @@ export const channelIdInput = makeTextInput({
   key: 'channelId',
 });
 export const publicKeyInput = makeTextInput({
-  label: 'Public Key',
+  label: 'Public Key:',
   key: 'publicKey',
 });
 export const experimentIdInput = makeTextInput({
diff --git a/packages/taboule/src/config/params.ts b/packages/taboule/src/config/params.ts
index 8c3197418..679ee9b53 100644
--- a/packages/taboule/src/config/params.ts
+++ b/packages/taboule/src/config/params.ts
@@ -3,18 +3,16 @@ import { TabouleQueryKey } from '../state/types';
 type TabouleDefaultParams = { [K in TabouleQueryKey]: any };
 
 export const defaultParams: TabouleDefaultParams = {
-  ccRelatedUsers: {},
-  getExperimentById: {},
-  getExperimentList: {
-    type: 'comparison',
-    key: 'fuffa',
-    // this is the default as per 'yarn backend watch'
-  },
-  personalHomes: {},
-  personalSearches: {},
-  personalVideos: {},
-  personalAds: {},
+  YCAIccRelatedUsers: {},
+  youtubeGetExperimentById: {},
+  youtubeGetExperimentList: {},
+  youtubePersonalHomes: {},
+  youtubePersonalSearches: {},
+  youtubePersonalVideos: {},
+  youtubePersonalAds: {},
   tikTokPersonalHTMLSummary: {},
   tikTokPersonalSearch: {},
-  tikTokSearches: {},
+  tikTokPersonalForYou: {},
+  tikTokPersonalProfile: {},
+  tikTokPersonalNative: {},
 };
diff --git a/packages/taboule/src/config/tiktok/tiktokPersonalForYou.tsx b/packages/taboule/src/config/tiktok/tiktokPersonalForYou.tsx
new file mode 100644
index 000000000..1b0f313bf
--- /dev/null
+++ b/packages/taboule/src/config/tiktok/tiktokPersonalForYou.tsx
@@ -0,0 +1,136 @@
+import CommentIcon from '@mui/icons-material/CommentOutlined';
+import ShareIcon from '@mui/icons-material/ShareOutlined';
+import LikeIcon from '@mui/icons-material/ThumbUpOutlined';
+import { Box } from '@mui/material';
+import { ForYouMetadata } from '@tktrex/shared/models/metadata';
+import { ForYouType } from '@tktrex/shared/models/Nature';
+import { available, queryStrict } from 'avenger';
+import { pipe } from 'fp-ts/lib/function';
+import * as TE from 'fp-ts/TaskEither';
+import * as React from 'react';
+import CSVDownloadButton from '../../components/buttons/CSVDownloadButton';
+import { ListMetadataRequestInput } from '../../state/queries';
+import { GetTabouleQueryConf } from '../config.type';
+import {
+  columnDefault,
+  fieldsDefaultHead,
+  fieldsDefaultTail,
+} from '../defaults';
+import * as inputs from '../inputs';
+
+/**
+ * TikTok Personal For You taboule query configuration
+ *
+ * Columns:
+ *  - id
+ *  - author
+ *  - description
+ *  - hashtags
+ *  - metrics
+ *  - savingTime
+ *  - experimentId
+ *  - researchTag
+ *
+ * @param opts - Taboule query options {@link GetTabouleQueryConfOpts}
+ * @returns taboule query configuration for tiktok personal "foryou" page
+ */
+export const tikTokPersonalForYou: GetTabouleQueryConf<
+  ForYouMetadata,
+  ListMetadataRequestInput
+> = ({ clients, commands, params }) => ({
+  filters: {
+    nature: ForYouType.value,
+  },
+  inputs: inputs.publicKeyInput,
+  query: queryStrict(
+    ({ Query: { filter, ...query } }) =>
+      pipe(
+        clients.TK.v2.Metadata.ListMetadata({
+          ValidateOutput: false,
+          Query: {
+            ...query,
+            filter,
+          },
+        } as any),
+        TE.map((content) => ({
+          total: content.totals.native,
+          content: content.data as any[] as ForYouMetadata[],
+        }))
+      ),
+    available
+  ),
+  actions: (filter) => {
+    return (
+      <Box textAlign={'right'}>
+        <CSVDownloadButton
+          onClick={() => {
+            void commands.tkDownloadAsCSV({
+              Query: {
+                ...params,
+                filter: {
+                  ...filter,
+                  type: ForYouType.value,
+                },
+              },
+            })();
+          }}
+        />
+      </Box>
+    );
+  },
+  columns: [
+    ...fieldsDefaultHead,
+    {
+      ...columnDefault,
+      field: 'author',
+      renderCell: (params) => {
+        if (params.formattedValue) {
+          return (
+            <a
+              href={`/search/#${encodeURI(
+                params.formattedValue.url as string
+              )}`}
+            >
+              {params.formattedValue.name}
+            </a>
+          );
+        }
+        return null;
+      },
+    },
+    {
+      ...columnDefault,
+      field: 'description',
+      filterable: true,
+    },
+    {
+      ...columnDefault,
+      field: 'hashtags',
+      renderCell: (params) => {
+        return params.formattedValue.join(', ');
+      },
+    },
+    {
+      ...columnDefault,
+      field: 'metrics',
+      headerName: 'Like n',
+      width: 250,
+      renderCell: (params) => {
+        return (
+          <Box display="flex" flexDirection="row" alignItems="center">
+            <Box display="flex" style={{ marginRight: 10 }}>
+              <LikeIcon />: {params.value.liken}
+            </Box>
+            <Box display="flex" style={{ marginRight: 10 }}>
+              <CommentIcon />: {params.value.commentn}
+            </Box>
+            <Box display="flex">
+              <ShareIcon />: {params.value.sharen}
+            </Box>
+          </Box>
+        );
+      },
+    },
+    ...fieldsDefaultTail,
+  ],
+});
diff --git a/packages/taboule/src/config/tiktok/tiktokPersonalNative.tsx b/packages/taboule/src/config/tiktok/tiktokPersonalNative.tsx
new file mode 100644
index 000000000..f03339ea2
--- /dev/null
+++ b/packages/taboule/src/config/tiktok/tiktokPersonalNative.tsx
@@ -0,0 +1,114 @@
+import { Box } from '@mui/material';
+import { NativeMetadata } from '@tktrex/shared/models/metadata';
+import { NativeType } from '@tktrex/shared/models/Nature';
+import { available, queryStrict } from 'avenger';
+import { pipe } from 'fp-ts/lib/function';
+import * as TE from 'fp-ts/lib/TaskEither';
+import * as React from 'react';
+import { ListMetadataRequestInput } from '../../state/queries';
+import CSVDownloadButton from '../../components/buttons/CSVDownloadButton';
+import { GetTabouleQueryConf } from '../config.type';
+import {
+  columnDefault,
+  fieldsDefaultHead,
+  fieldsDefaultTail,
+} from '../defaults';
+import * as inputs from '../inputs';
+
+/**
+ * TikTok Personal Native taboule query configuration
+ *
+ * Columns:
+ *  - id
+ *  - authorId
+ *  - videoId
+ *  - description
+ *  - hashtags
+ *  - savingTime
+ *  - experimentId
+ *  - researchTag
+ * Actions:
+ *  - download csv
+ *
+ * @param opts - Taboule query options {@link GetTabouleQueryConfOpts}
+ * @returns taboule query configuration for tiktok personal "native" videos
+ */
+export const tikTokPersonalNative: GetTabouleQueryConf<
+  NativeMetadata,
+  ListMetadataRequestInput,
+  { total: number; content: NativeMetadata[] }
+> = ({ clients, commands, params }) => ({
+  filters: {
+    nature: NativeType.value,
+  },
+  inputs: inputs.publicKeyInput,
+  query: queryStrict(
+    ({ Query: { amount, skip, filter, ...query } }) =>
+      pipe(
+        clients.TK.v2.Metadata.ListMetadata({
+          ValidateOutput: false,
+          Query: {
+            ...query,
+            amount,
+            skip,
+            filter,
+          },
+        } as any),
+        TE.map((content) => ({
+          total: content.totals.native,
+          content: content.data.map((d) => ({
+            ...d,
+            id: d.id ?? '',
+          })) as any[] as NativeMetadata[],
+        }))
+      ),
+    available
+  ),
+  actions: (filter) => {
+    return (
+      <Box textAlign={'right'}>
+        <CSVDownloadButton
+          onClick={() => {
+            void commands.tkDownloadAsCSV({
+              Query: {
+                ...params,
+                filter: {
+                  ...filter,
+                  type: NativeType.value,
+                },
+              },
+            })();
+          }}
+        />
+      </Box>
+    );
+  },
+  columns: [
+    ...fieldsDefaultHead,
+    {
+      ...columnDefault,
+      field: 'authorId',
+    },
+    {
+      ...columnDefault,
+      field: 'videoId',
+      renderCell: (params) => {
+        return <a href="">{params.row.videoId}</a>;
+      },
+    },
+    {
+      ...columnDefault,
+      field: 'description',
+      filterable: true,
+    },
+    {
+      ...columnDefault,
+      field: 'hashtags',
+      renderCell: (params) => {
+        const hashtags = params.row.hashtags ?? [];
+        return <span>{hashtags.join(',')}</span>;
+      },
+    },
+    ...fieldsDefaultTail,
+  ],
+});
diff --git a/packages/taboule/src/config/tiktok/tiktokPersonalProfile.tsx b/packages/taboule/src/config/tiktok/tiktokPersonalProfile.tsx
new file mode 100644
index 000000000..05168f20d
--- /dev/null
+++ b/packages/taboule/src/config/tiktok/tiktokPersonalProfile.tsx
@@ -0,0 +1,100 @@
+import { Box } from '@mui/material';
+import { ProfileMetadata } from '@tktrex/shared/models/metadata';
+import { ProfileType } from '@tktrex/shared/models/Nature';
+import { available, queryStrict } from 'avenger';
+import { pipe } from 'fp-ts/lib/function';
+import * as TE from 'fp-ts/TaskEither';
+import * as React from 'react';
+import CSVDownloadButton from '../../components/buttons/CSVDownloadButton';
+import { ListMetadataRequestInput } from '../../state/queries';
+import { GetTabouleQueryConf } from '../config.type';
+import {
+  columnDefault,
+  fieldsDefaultHead,
+  fieldsDefaultTail,
+} from '../defaults';
+import * as inputs from '../inputs';
+
+/**
+ * TikTok Personal Profile taboule query configuration
+ *
+ * Columns:
+ *  - id
+ *  - results
+ *  - savingTime
+ *  - experimentId
+ *  - researchTag
+ *
+ * Actions:
+ *  - download csv
+ *
+ * @param opts - Taboule query options {@link GetTabouleQueryConfOpts}
+ * @returns taboule query configuration for tiktok personal "profile" pages
+ */
+export const tikTokPersonalProfile: GetTabouleQueryConf<
+  ProfileMetadata,
+  ListMetadataRequestInput
+> = ({ clients, commands, params }) => ({
+  filters: {
+    nature: ProfileType.value,
+  },
+  inputs: inputs.publicKeyInput,
+  query: queryStrict(
+    ({ Query: { filter, ...query } }) =>
+      pipe(
+        clients.TK.v2.Metadata.ListMetadata({
+          Query: {
+            ...query,
+            filter: {
+              ...(filter as any),
+            },
+          },
+        }),
+        TE.map((content) => ({
+          total: content.totals.native,
+          content: content.data as any[] as ProfileMetadata[],
+        }))
+      ),
+    available
+  ),
+  actions: (filters) => {
+    return (
+      <Box textAlign={'right'}>
+        <CSVDownloadButton
+          onClick={() => {
+            void commands.tkDownloadAsCSV({
+              Query: {
+                ...params,
+                type: {
+                  ...filters,
+                  type: ProfileType.value,
+                },
+              },
+            })();
+          }}
+        />
+      </Box>
+    );
+  },
+  columns: [
+    ...fieldsDefaultHead,
+    // {
+    //   ...columnDefault,
+    //   field: 'rejected',
+    //   headerName: 'was answered?',
+    //   width: 40,
+    //   renderCell: (params) => {
+    //     return <span>{params.formattedValue === true ? '🚫' : '✔️'}</span>;
+    //   },
+    // },
+    {
+      ...columnDefault,
+      field: 'results',
+      renderCell: (params) => {
+        return <span>{params.row.results.length}</span>;
+      },
+      width: 40,
+    },
+    ...fieldsDefaultTail,
+  ],
+});
diff --git a/packages/taboule/src/config/tiktok/tiktokPersonalSearch.tsx b/packages/taboule/src/config/tiktok/tiktokPersonalSearch.tsx
new file mode 100644
index 000000000..f77ef8052
--- /dev/null
+++ b/packages/taboule/src/config/tiktok/tiktokPersonalSearch.tsx
@@ -0,0 +1,120 @@
+import { Box } from '@mui/material';
+import { SearchMetadata } from '@tktrex/shared/models/metadata';
+import { SearchType } from '@tktrex/shared/models/Nature';
+import { SearchNatureType } from '@yttrex/shared/models/Nature';
+import { available, queryStrict } from 'avenger';
+import ExpandView from '../../components/expand-view/ExpandView';
+import { pipe } from 'fp-ts/lib/function';
+import * as TE from 'fp-ts/TaskEither';
+import * as React from 'react';
+import CSVDownloadButton from '../../components/buttons/CSVDownloadButton';
+import { ListMetadataRequestInput } from '../../state/queries';
+import { GetTabouleQueryConf } from '../config.type';
+import {
+  columnDefault,
+  fieldsDefaultHead,
+  fieldsDefaultTail,
+} from '../defaults';
+import * as inputs from '../inputs';
+
+/**
+ * TikTok Personal Search taboule query configuration
+ *
+ * Columns:
+ *  - id
+ *  - query
+ *  - results
+ *  - savingTime
+ *  - experimentId
+ *  - researchTag
+ * Expand:
+ *  - results
+ * Actions:
+ *  - download csv
+ *
+ * @param opts - Taboule query options {@link GetTabouleQueryConfOpts}
+ * @returns taboule query configuration for tiktok personal "search"
+ */
+export const tikTokPersonalSearch: GetTabouleQueryConf<
+  SearchMetadata,
+  ListMetadataRequestInput
+> = ({ clients, commands, params }) => ({
+  filters: {
+    nature: SearchType.value,
+  },
+  inputs: inputs.publicKeyInput,
+  query: queryStrict(
+    ({ Query: { amount, skip, filter, ...query } }) =>
+      pipe(
+        clients.TK.v2.Metadata.ListMetadata({
+          ValidateOutput: false,
+          Query: {
+            ...query,
+            amount,
+            skip,
+            filter: {
+              ...filter,
+            },
+          },
+        } as any),
+        TE.map((content) => ({
+          total: content.totals.search,
+          content: content.data as any[] as SearchMetadata[],
+        }))
+      ),
+    available
+  ),
+  actions: (filter) => {
+    return (
+      <Box textAlign={'right'}>
+        <CSVDownloadButton
+          onClick={() => {
+            void commands.tkDownloadAsCSV({
+              Query: {
+                ...params,
+                filter: {
+                  ...filter,
+                  type: SearchNatureType.value,
+                },
+              },
+            })();
+          }}
+        />
+      </Box>
+    );
+  },
+  expanded: ({ row, ...props }) => {
+    return (
+      <ExpandView {...props}>
+        <ul>
+          {row.results.map((r) => (
+            <li key={r.textdesc}>{r.textdesc}</li>
+          ))}
+        </ul>
+      </ExpandView>
+    );
+  },
+  columns: [
+    ...fieldsDefaultHead,
+    {
+      ...columnDefault,
+      field: 'query',
+      renderCell: (params) => {
+        return (
+          <a href={`/search/#${encodeURI(params.formattedValue as string)}`}>
+            {params.formattedValue}
+          </a>
+        );
+      },
+    },
+    {
+      ...columnDefault,
+      field: 'results',
+      renderCell: (params) => {
+        return <span>{(params.row.results ?? []).length}</span>;
+      },
+      width: 40,
+    },
+    ...fieldsDefaultTail,
+  ],
+});
diff --git a/packages/taboule/src/config/ycai/ycaiCCRelatedUsers.tsx b/packages/taboule/src/config/ycai/ycaiCCRelatedUsers.tsx
new file mode 100644
index 000000000..9e50546a2
--- /dev/null
+++ b/packages/taboule/src/config/ycai/ycaiCCRelatedUsers.tsx
@@ -0,0 +1,72 @@
+import { APIError } from '@shared/errors/APIError';
+import { ChannelRelated } from '@shared/models/ChannelRelated';
+import { queryStrict, available } from 'avenger';
+import { pipe } from 'fp-ts/lib/function';
+import * as TE from 'fp-ts/lib/TaskEither';
+import { Results, SearchRequestInput } from '../../state/queries';
+import { GetTabouleQueryConf } from '../config.type';
+import { columnDefault } from '../defaults';
+import * as inputs from '../inputs';
+
+type QueryInput = Omit<SearchRequestInput, 'Params'> & {
+  Params: { channelId: string };
+};
+
+/**
+ * YCAI Related users taboule query configuration
+ *
+ * Columns:
+ *  - id
+ *  - recommendedSource
+ *  - percentage
+ *  - recommendedChannelCount
+ *  - savingTime
+ *  - experimentId
+ *  - researchTag
+ 
+ *
+ * @param opts - Taboule query options {@link GetTabouleQueryConfOpts}
+ * @returns taboule query configuration for YCAI related users
+ */
+export const YCAIccRelatedUsers: GetTabouleQueryConf<
+  ChannelRelated,
+  QueryInput
+> = ({ clients, commands, params }) => ({
+  getRowId: (d) => d.id ?? d.recommendedSource ?? d.percentage,
+  inputs: inputs.channelIdInput,
+  query: queryStrict<QueryInput, APIError, Results<ChannelRelated>>(
+    (input) =>
+      pipe(
+        clients.YT.v3.Creator.CreatorRelatedChannels({
+          ...input,
+          Headers: {
+            'x-authorization': params.accessToken ?? '',
+          },
+        }),
+        TE.map(({ totalRecommendations, ...r }) => ({
+          ...r,
+          total: totalRecommendations,
+        }))
+      ),
+    available
+  ),
+  columns: [
+    {
+      ...columnDefault,
+      field: 'recommendedSource',
+      headerName: 'Recommended Source',
+      minWidth: 160,
+    },
+    {
+      ...columnDefault,
+      field: 'percentage',
+      minWidth: 160,
+      valueFormatter: (p: any) => `${p.value}%`,
+    },
+    {
+      ...columnDefault,
+      field: 'recommendedChannelCount',
+      minWidth: 160,
+    },
+  ],
+});
diff --git a/packages/taboule/src/config/youtube/youtubeGetExperimentList.tsx b/packages/taboule/src/config/youtube/youtubeGetExperimentList.tsx
new file mode 100644
index 000000000..fc7374ace
--- /dev/null
+++ b/packages/taboule/src/config/youtube/youtubeGetExperimentList.tsx
@@ -0,0 +1,77 @@
+import { Box } from '@mui/material';
+import { GuardoniExperiment } from '@shared/models/Experiment';
+import { available, queryStrict } from 'avenger';
+import { pipe } from 'fp-ts/lib/function';
+import * as TE from 'fp-ts/TaskEither';
+import * as React from 'react';
+import * as cells from '../../components/gridCells';
+import { SearchRequestInput } from '../../state/queries';
+import { GetTabouleQueryConf } from '../config.type';
+import { columnDefault } from '../defaults';
+
+/**
+ * YouTube Experiment List taboule query configuration
+ *
+ * Columns:
+ *  - id
+ *  - experimentId
+ *  - when
+ *  - steps
+ *  - savingTime
+ *  - experimentId
+ *  - researchTag
+ * Actions:
+ *  - download csv
+ *
+ * @param opts - Taboule query options {@link GetTabouleQueryConfOpts}
+ * @returns taboule query configuration for youtube experiments (guardoni)
+ */
+export const youtubeGetExperimentList: GetTabouleQueryConf<
+  GuardoniExperiment,
+  SearchRequestInput
+> = ({ clients, params }) => ({
+  query: queryStrict(
+    (input) =>
+      pipe(
+        clients.YT.v2.Public.GetExperimentList(input),
+        TE.map((content) => {
+          return {
+            total: content.total,
+            content: content.content.map((c) => ({
+              ...c,
+              id: c.experimentId,
+            })) as any[],
+          };
+        })
+      ),
+    available
+  ),
+  columns: [
+    {
+      ...columnDefault,
+      field: 'experimentId',
+      headerName: 'experimentId',
+      minWidth: 400,
+    },
+    {
+      ...columnDefault,
+      field: 'when',
+      headerName: 'Registered',
+      renderCell: cells.distanceFromNowCell,
+    },
+    {
+      ...columnDefault,
+      field: 'steps',
+      minWidth: 350,
+      renderCell: (params) => {
+        return (
+          <Box key={params.id}>
+            {((params?.value as any[]) || []).map((linkinfo) => {
+              return <a href={linkinfo.url}>{linkinfo.urltag}</a>;
+            })}
+          </Box>
+        );
+      },
+    },
+  ],
+});
diff --git a/packages/taboule/src/config/youtube/youtubePersonalHomes.tsx b/packages/taboule/src/config/youtube/youtubePersonalHomes.tsx
new file mode 100644
index 000000000..f5a93f4aa
--- /dev/null
+++ b/packages/taboule/src/config/youtube/youtubePersonalHomes.tsx
@@ -0,0 +1,136 @@
+import { Box } from '@mui/material';
+import { HomeMetadata } from '@yttrex/shared/models/metadata/HomeMetadata';
+import { HomeNatureType } from '@yttrex/shared/models/Nature';
+import { available, queryStrict } from 'avenger';
+import { pipe } from 'fp-ts/lib/function';
+import * as TE from 'fp-ts/lib/TaskEither';
+import * as React from 'react';
+import CSVDownloadButton from '../../components/buttons/CSVDownloadButton';
+import ExpandView from '../../components/expand-view/ExpandView';
+import { ParsedInfoList } from '../../components/list/ParsedInfoList';
+import { ListMetadataRequestInput } from '../../state/queries';
+import { GetTabouleQueryConf } from '../config.type';
+import {
+  columnDefault,
+  fieldsDefaultHead,
+  fieldsDefaultTail,
+} from '../defaults';
+import * as inputs from '../inputs';
+
+/**
+ * YouTube Personal Home taboule query configuration
+ *
+ * Columns:
+ *  - id
+ *  - selected
+ *  - login
+ *  - sections
+ *  - savingTime
+ *  - experimentId
+ *  - researchTag
+ * Expand:
+ *  - selected
+ * Actions:
+ *  - download csv
+ *
+ * @param opts - Taboule query options {@link GetTabouleQueryConfOpts}
+ * @returns taboule query configuration for youtube personal "home"
+ */
+
+export const youtubePersonalHomes: GetTabouleQueryConf<
+  HomeMetadata,
+  ListMetadataRequestInput
+> = ({ clients, commands, params }) => ({
+  inputs: (params, setParams) => (
+    <div>
+      {inputs.publicKeyInput(params, setParams)}
+      {inputs.experimentIdInput(params, setParams)}
+    </div>
+  ),
+  filters: {
+    nature: HomeNatureType.value,
+  },
+  query: queryStrict(
+    ({ Query: { amount, skip, filter, ...query } }) =>
+      pipe(
+        clients.YT.v2.Metadata.ListMetadata({
+          ValidateOutput: false,
+          Query: {
+            ...query,
+            amount: (amount + '') as any,
+            skip: (skip + '') as any,
+            format: 'json',
+            filter: {
+              ...(filter as any),
+            },
+          },
+        } as any),
+        TE.map((content) => ({
+          total: content.totals.home,
+          content: content.data as any[] as HomeMetadata[],
+        }))
+      ),
+    available
+  ),
+  actions: ({ filter, ...params }) => {
+    return (
+      <Box textAlign={'right'}>
+        <CSVDownloadButton
+          onClick={() => {
+            void commands.ytDownloadAsCSV({
+              Query: {
+                ...params,
+                amount: 1000,
+                format: 'csv',
+                filter: {
+                  ...filter,
+                  nature: HomeNatureType.value,
+                },
+              },
+            })();
+          }}
+        />
+      </Box>
+    );
+  },
+
+  expanded: ({ row, ...props }) => {
+    return (
+      <ExpandView {...props}>
+        <ParsedInfoList data={row.selected} />
+      </ExpandView>
+    );
+  },
+  columns: [
+    ...fieldsDefaultHead,
+    {
+      ...columnDefault,
+      filterable: true,
+      field: 'login',
+      minWidth: 100,
+      type: 'boolean',
+    },
+    {
+      ...columnDefault,
+      field: 'selected',
+      renderCell: (params) => {
+        if (Array.isArray(params.value)) {
+          return params.value.length;
+        }
+        return 0;
+      },
+    },
+    {
+      ...columnDefault,
+      field: 'sections',
+      renderCell: (params) => {
+        if (Array.isArray(params.value)) {
+          return params.value.length;
+        }
+        return 0;
+      },
+    },
+
+    ...fieldsDefaultTail,
+  ],
+});
diff --git a/packages/taboule/src/config/youtube/youtubePersonalSearches.tsx b/packages/taboule/src/config/youtube/youtubePersonalSearches.tsx
new file mode 100644
index 000000000..9ddc9ceff
--- /dev/null
+++ b/packages/taboule/src/config/youtube/youtubePersonalSearches.tsx
@@ -0,0 +1,154 @@
+import { Box } from '@mui/material';
+import { SearchMetadata } from '@yttrex/shared/models/metadata/Metadata';
+import { SearchNatureType } from '@yttrex/shared/models/Nature';
+import { queryStrict, refetch } from 'avenger';
+import { pipe } from 'fp-ts/lib/function';
+import * as TE from 'fp-ts/TaskEither';
+import * as React from 'react';
+import CSVDownloadButton from '../../components/buttons/CSVDownloadButton';
+import ExpandView from '../../components/expand-view/ExpandView';
+import { ListMetadataRequestInput } from '../../state/queries';
+import { GetTabouleQueryConf } from '../config.type';
+import {
+  columnDefault,
+  fieldsDefaultHead,
+  fieldsDefaultTail,
+} from '../defaults';
+import { getApplyFilterFnIncluded } from '../filters';
+import * as inputs from '../inputs';
+
+/**
+ * YouTube Personal Search taboule query configuration
+ *
+ * Columns:
+ *  - id
+ *  - query
+ *  - results
+ *  - savingTime
+ *  - experimentId
+ *  - researchTag
+ * Expand:
+ *  - selected
+ * Actions:
+ *  - download csv
+ *
+ * @param opts - Taboule query options {@link GetTabouleQueryConfOpts}
+ * @returns taboule query configuration for youtube personal "home"
+ */
+export const youtubePersonalSearches: GetTabouleQueryConf<
+  SearchMetadata,
+  ListMetadataRequestInput
+> = ({ clients, commands, params }) => ({
+  filters: {
+    nature: SearchNatureType.value,
+  },
+  inputs: (params, setParams) => (
+    <div>
+      {inputs.publicKeyInput(params, setParams)}
+      {inputs.experimentIdInput(params, setParams)}
+    </div>
+  ),
+  query: queryStrict(
+    ({ Query: { filter, ...query } }) =>
+      pipe(
+        clients.YT.v2.Metadata.ListMetadata({
+          Query: {
+            ...query,
+            filter: {
+              ...(filter as any),
+            },
+          },
+        }),
+        TE.map((content) => ({
+          total: content.totals.search,
+          content: content.data as any[] as SearchMetadata[],
+        }))
+      ),
+    refetch
+  ),
+  actions: (filter) => {
+    return (
+      <Box textAlign={'right'}>
+        <CSVDownloadButton
+          onClick={() => {
+            void commands.ytDownloadAsCSV({
+              Query: {
+                publicKey: params.publicKey,
+                experimentId: params.experimentId,
+                filter: {
+                  ...filter,
+                  nature: SearchNatureType.value,
+                },
+              },
+            })();
+          }}
+        />
+      </Box>
+    );
+  },
+  expanded: ({ row, ...props }) => {
+    return (
+      <ExpandView {...props}>
+        <ul>
+          {row.results.map((r) => (
+            <li key={r.title}>{r.title}</li>
+          ))}
+        </ul>
+      </ExpandView>
+    );
+  },
+  columns: [
+    ...fieldsDefaultHead,
+    {
+      ...columnDefault,
+      field: 'query',
+      filterable: true,
+      type: 'string',
+      getApplyQuickFilterFn: getApplyFilterFnIncluded,
+    },
+    {
+      ...columnDefault,
+      field: 'results',
+      renderCell: (params) => {
+        if (Array.isArray(params.value)) {
+          return params.value.length;
+        }
+        return 0;
+      },
+    },
+    ...fieldsDefaultTail,
+    // {
+    //   ...columnDefault,
+    //   field: 'actions',
+    //   renderCell: (cellParams) => {
+    //     return (
+    //       <Box>
+    //         <DeleteButton
+    //           id={cellParams.row.id}
+    //           onClick={(id) => {
+    //             void commands.deleteContribution(
+    //               {
+    //                 Params: {
+    //                   publicKey: params.publicKey,
+    //                   selector: 'undefined',
+    //                 },
+    //               },
+    //               {}
+    //             )();
+    //           }}
+    //         />
+    //         <CSVDownloadButton
+    //           onClick={() => {
+    //             void commands.downloadSearchesAsCSV({
+    //               Params: {
+    //                 queryString: cellParams.row.query,
+    //               },
+    //             })();
+    //           }}
+    //         />
+    //       </Box>
+    //     );
+    //   },
+    // },
+  ],
+});
diff --git a/packages/taboule/src/config/youtube/youtubePersonalStats.tsx b/packages/taboule/src/config/youtube/youtubePersonalStats.tsx
new file mode 100644
index 000000000..abadc646f
--- /dev/null
+++ b/packages/taboule/src/config/youtube/youtubePersonalStats.tsx
@@ -0,0 +1,73 @@
+import { Box } from '@mui/material';
+import { HomeNatureType } from '@yttrex/shared/models/Nature';
+import { available, queryStrict } from 'avenger';
+import { pipe } from 'fp-ts/lib/function';
+import * as TE from 'fp-ts/lib/TaskEither';
+import * as React from 'react';
+import CSVDownloadButton from '../../components/buttons/CSVDownloadButton';
+import { RequestInputWithPublicKeyParam } from '../../state/queries';
+import { GetTabouleQueryConf } from '../config.type';
+import { fieldsDefaultHead, fieldsDefaultTail } from '../defaults';
+import * as inputs from '../inputs';
+
+/**
+ * YouTube Personal Stats taboule query configuration
+ *
+ * Columns:
+ *  - id
+ *  - savingTime
+ *  - experimentId
+ *  - researchTag
+ * Actions:
+ *  - download csv
+ *
+ * @param opts - Taboule query options {@link GetTabouleQueryConfOpts}
+ * @returns taboule query configuration for youtube personal stats
+ */
+export const youtubePersonalStats: GetTabouleQueryConf<
+  any,
+  RequestInputWithPublicKeyParam
+> = ({ clients, commands, params }) => ({
+  inputs: (params, setParams) => (
+    <div>
+      {inputs.publicKeyInput(params, setParams)}
+      {inputs.experimentIdInput(params, setParams)}
+    </div>
+  ),
+  filters: {
+    nature: HomeNatureType.value,
+  },
+  query: queryStrict(
+    (input) =>
+      pipe(
+        clients.YT.v1.Public.GetPersonalStatsByPublicKey(input),
+        TE.map((content) => ({
+          total: content.ads.length,
+          content: content.ads,
+        }))
+      ),
+    available
+  ),
+  actions: ({ filter, ...params }) => {
+    return (
+      <Box textAlign={'right'}>
+        <CSVDownloadButton
+          onClick={() => {
+            void commands.ytDownloadAsCSV({
+              Query: {
+                ...params,
+                amount: 1000,
+                format: 'csv',
+                filter: {
+                  ...filter,
+                  nature: HomeNatureType.value,
+                },
+              },
+            })();
+          }}
+        />
+      </Box>
+    );
+  },
+  columns: [...fieldsDefaultHead, ...fieldsDefaultTail],
+});
diff --git a/packages/taboule/src/config/youtube/youtubePersonalVideos.tsx b/packages/taboule/src/config/youtube/youtubePersonalVideos.tsx
new file mode 100644
index 000000000..67e51c01e
--- /dev/null
+++ b/packages/taboule/src/config/youtube/youtubePersonalVideos.tsx
@@ -0,0 +1,151 @@
+import { Box } from '@mui/material';
+import { VideoMetadata as YTVideoMetadata } from '@yttrex/shared/models/metadata/Metadata';
+import { VideoNatureType } from '@yttrex/shared/models/Nature';
+import { queryStrict, refetch } from 'avenger';
+import { pipe } from 'fp-ts/lib/function';
+import * as TE from 'fp-ts/TaskEither';
+import * as React from 'react';
+import CSVDownloadButton from '../../components/buttons/CSVDownloadButton';
+import ExpandView from '../../components/expand-view/ExpandView';
+import { ParsedInfoList } from '../../components/list/ParsedInfoList';
+import { ListMetadataRequestInput } from '../../state/queries';
+import { GetTabouleQueryConf } from '../config.type';
+import {
+  columnDefault,
+  fieldsDefaultHead,
+  fieldsDefaultTail,
+} from '../defaults';
+import { getApplyFilterFnIncluded } from '../filters';
+import * as inputs from '../inputs';
+
+/**
+ * YouTube Personal Video taboule query configuration
+ *
+ * Columns:
+ *  - id
+ *  - title
+ *  - authorName
+ *  - viewInfo
+ *  - related
+ *  - savingTime
+ *  - experimentId
+ *  - researchTag
+ * Expand:
+ *  - related
+ * Actions:
+ *  - download csv
+ *
+ * @param opts - Taboule query options {@link GetTabouleQueryConfOpts}
+ * @returns taboule query configuration for youtube personal "video"
+ */
+export const youtubePersonalVideos: GetTabouleQueryConf<
+  YTVideoMetadata,
+  ListMetadataRequestInput
+> = ({ clients, commands, params }) => ({
+  filters: {
+    nature: VideoNatureType.value,
+  },
+  inputs: (params, setParams) => (
+    <div>
+      {inputs.publicKeyInput(params, setParams)}
+      {inputs.experimentIdInput(params, setParams)}
+    </div>
+  ),
+  query: queryStrict(
+    ({ Query: { filter, ...query } }) =>
+      pipe(
+        clients.YT.v2.Metadata.ListMetadata({
+          ValidateOutput: false,
+          Query: {
+            ...query,
+            filter: {
+              ...(filter as any),
+            },
+          },
+        } as any),
+        TE.map((content) => ({
+          total: content.totals.video,
+          content: content.data as any[] as YTVideoMetadata[],
+        }))
+      ),
+    refetch
+  ),
+  expanded({ row, ...props }) {
+    return (
+      <ExpandView {...props}>
+        <ParsedInfoList data={row.related} />
+      </ExpandView>
+    );
+  },
+  actions: (filter) => {
+    return (
+      <Box textAlign={'right'}>
+        <CSVDownloadButton
+          onClick={() => {
+            void commands.ytDownloadAsCSV({
+              Query: {
+                ...params,
+                filter: {
+                  ...filter,
+                  type: VideoNatureType.value,
+                },
+              },
+            })();
+          }}
+        />
+      </Box>
+    );
+  },
+  columns: [
+    ...fieldsDefaultHead,
+    {
+      ...columnDefault,
+      field: 'title',
+      filterable: true,
+      getApplyQuickFilterFn: getApplyFilterFnIncluded,
+    },
+    {
+      ...columnDefault,
+      headerName: 'author',
+      field: 'authorName',
+      filterable: true,
+      renderCell: (params) => {
+        const authorSource = params.row.authorSource;
+
+        return (
+          <a
+            href={`https://www.youtube.com${authorSource}`}
+            target="_blank"
+            rel="noreferrer"
+          >
+            {params.value}
+          </a>
+        );
+      },
+    },
+    {
+      ...columnDefault,
+      field: 'viewInfo',
+      headerName: 'Views',
+      renderCell: (p) => {
+        return p.value.viewNumber;
+      },
+    },
+    {
+      ...columnDefault,
+      field: 'related',
+      renderCell: (params) => {
+        if (Array.isArray(params.value)) {
+          return params.value.length;
+        }
+        return 0;
+      },
+    },
+    ...fieldsDefaultTail,
+    // {
+    //   ...columnDefault,
+    //   field: 'actions',
+    //   renderCell: actions.personalMetadataActions(commands, params),
+    // },
+  ],
+});
diff --git a/packages/taboule/src/index.tsx b/packages/taboule/src/index.tsx
index 3e40281c2..ebc9c8c04 100644
--- a/packages/taboule/src/index.tsx
+++ b/packages/taboule/src/index.tsx
@@ -1,34 +1,35 @@
 import { createTheme, ThemeProvider } from '@material-ui/core';
 import { ErrorBoundary } from '@shared/components/Error/ErrorBoundary';
+import { TabouleConfiguration } from 'config';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { Taboule, TabouleProps } from './components/Taboule';
-import { TabouleQueries } from './state/queries';
+import { TabouleIndex, TabouleIndexProps } from './components';
 
-interface DataTableProps<Q extends keyof TabouleQueries>
-  extends TabouleProps<Q> {
+interface DataTableProps<Q extends keyof TabouleConfiguration>
+  extends TabouleIndexProps<Q> {
   node: HTMLDivElement;
 }
 
-let lastQuery: undefined | string;
+let lastQueries: string[] = [];
 
-const appendTo = <Q extends keyof TabouleQueries>({
+const appendTo = <Q extends keyof TabouleConfiguration>({
   node,
+  queries,
   ...props
 }: DataTableProps<Q>): void => {
   const theme = createTheme();
 
-  if (lastQuery && lastQuery !== props.query) {
+  if (queries?.some((q) => lastQueries.includes(q.value))) {
     ReactDOM.unmountComponentAtNode(node);
   }
 
-  lastQuery = props.query;
+  lastQueries = queries?.map((q) => q.value) ?? [];
 
   ReactDOM.render(
     <React.StrictMode>
       <ThemeProvider theme={theme}>
         <ErrorBoundary>
-          <Taboule {...props} />
+          <TabouleIndex {...props} queries={queries} />
         </ErrorBoundary>
       </ThemeProvider>
     </React.StrictMode>,
diff --git a/packages/taboule/src/state/commands.ts b/packages/taboule/src/state/commands.ts
index 0b34d8b25..c5c274c8c 100644
--- a/packages/taboule/src/state/commands.ts
+++ b/packages/taboule/src/state/commands.ts
@@ -1,7 +1,11 @@
-import { MakeAPIClient, TERequest } from '@shared/providers/api.provider';
+import { APIError } from '@shared/errors/APIError';
+import { TERequest } from '@shared/providers/api.provider';
+import * as TKEndpoints from '@tktrex/shared/endpoints';
+import { ListMetadataQuery as TKListMetadataQuery } from '@tktrex/shared/models/http/query/ListMetadata.query';
+import * as YTEndpoints from '@yttrex/shared/endpoints';
+import { ListMetadataQuery as YTListMetadataQuery } from '@yttrex/shared/models/http/metadata/query/ListMetadata.query';
 import { command } from 'avenger';
-import * as Endpoints from '@yttrex/shared/endpoints';
-import { TabouleQueries } from './queries';
+import { APIClients } from '../config/config.type';
 import { pipe } from 'fp-ts/lib/function';
 import * as TE from 'fp-ts/lib/TaskEither';
 
@@ -11,7 +15,7 @@ const downloadFile = (filename: string, content: string): void => {
     'href',
     'data:text/plain;charset=utf-8, ' + encodeURIComponent(content)
   );
-  aElement.setAttribute('download', `${filename}.txt`);
+  aElement.setAttribute('download', `${filename}.csv`);
 
   // Above code is equivalent to
   // <a href="path of file" download="file name">
@@ -23,58 +27,78 @@ const downloadFile = (filename: string, content: string): void => {
   document.body.removeChild(aElement);
 };
 export interface TabouleCommands {
+  ytDownloadAsCSV: TERequest<
+    typeof YTEndpoints.v2.Metadata.ListMetadata,
+    undefined
+  >;
+  tkDownloadAsCSV: TERequest<
+    typeof TKEndpoints.v2.Metadata.ListMetadata,
+    undefined
+  >;
+  downloadSearchesAsCSV: TERequest<typeof YTEndpoints.v2.Public.SearchesAsCSV>;
   deleteContribution: TERequest<
-    typeof Endpoints.v2.Public.DeletePersonalContributionByPublicKey
+    typeof YTEndpoints.v2.Public.DeletePersonalContributionByPublicKey
   >;
-  downloadAsCSV: TERequest<typeof Endpoints.v2.Public.GetPersonalCSV>;
-  downloadSearchesAsCSV: TERequest<typeof Endpoints.v2.Public.SearchesAsCSV>;
 }
 
-export const GetTabouleCommands = (
-  {
-    baseURL,
-  }: {
-    baseURL: string;
-  },
-  queries: TabouleQueries
-): TabouleCommands => {
-  const API = MakeAPIClient(
-    {
-      baseURL,
-      getAuth: async (req) => req,
-      onUnauthorized: async (res) => res,
-    },
-    Endpoints
-  );
+export const GetTabouleCommands = (clients: APIClients): TabouleCommands => {
   const deleteContribution = command(
     (input: { Params: { publicKey: string; selector: string | undefined } }) =>
-      API.API.v2.Public.DeletePersonalContributionByPublicKey({
+      clients.YT.v2.Public.DeletePersonalContributionByPublicKey({
         Params: {
           ...input.Params,
           selector: 'undefined',
         },
-      }),
-    {
-      personalSearches: queries.personalSearches,
-    }
+      })
   );
 
-  const downloadAsCSV = command(
-    (input: {
-      Params: { publicKey: string; type: 'home' | 'video' | 'search' };
-    }) =>
-      pipe(
-        API.API.v2.Public.GetPersonalCSV({
-          Params: input.Params,
-        }),
-        TE.map((content) => downloadFile(input.Params.type, content))
-      )
+  const ytDownloadAsCSV = command<
+    { Query: YTListMetadataQuery },
+    APIError,
+    undefined
+  >(({ Query: { filter, ...query } }) =>
+    pipe(
+      clients.YT.v2.Metadata.ListMetadata({
+        ValidateOutput: false,
+        Query: {
+          ...query,
+          amount: 10000,
+          format: 'csv',
+          filter,
+        },
+      } as any),
+      TE.map((content) => {
+        downloadFile(filter?.nature ?? 'all', content as any);
+        return undefined;
+      })
+    )
+  );
+
+  const tkDownloadAsCSV = command<
+    { Query: TKListMetadataQuery },
+    APIError,
+    undefined
+  >(({ Query: { filter, ...query } }) =>
+    pipe(
+      clients.TK.v2.Metadata.ListMetadata({
+        Query: {
+          ...query,
+          amount: 10000,
+          format: 'csv',
+          filter,
+        },
+      }),
+      TE.map((content) =>
+        downloadFile(filter?.nature ?? 'all', content as any)
+      ),
+      TE.map(() => undefined)
+    )
   );
 
   const downloadSearchesAsCSV = command(
     (input: { Params: { queryString: string } }) =>
       pipe(
-        API.API.v2.Public.SearchesAsCSV({
+        clients.YT.v2.Public.SearchesAsCSV({
           Params: input.Params,
         }),
         TE.map((content) => {
@@ -85,7 +109,8 @@ export const GetTabouleCommands = (
 
   return {
     deleteContribution,
-    downloadAsCSV,
+    ytDownloadAsCSV,
+    tkDownloadAsCSV,
     downloadSearchesAsCSV,
   };
 };
diff --git a/packages/taboule/src/state/index.ts b/packages/taboule/src/state/index.ts
deleted file mode 100644
index 6c853fec8..000000000
--- a/packages/taboule/src/state/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { GetTabouleCommands, TabouleCommands } from './commands';
-import { GetTabouleQueries, TabouleQueries } from './queries';
-
-export const TabouleDataProvider = (
-  baseURL: string
-): { queries: TabouleQueries; commands: TabouleCommands } => {
-  const queries = GetTabouleQueries({ baseURL });
-  const commands = GetTabouleCommands({ baseURL }, queries);
-  return { queries, commands };
-};
diff --git a/packages/taboule/src/state/queries.ts b/packages/taboule/src/state/queries.ts
index 410ccdc8b..e6340c4a8 100644
--- a/packages/taboule/src/state/queries.ts
+++ b/packages/taboule/src/state/queries.ts
@@ -1,254 +1,26 @@
-import * as endpoints from '@yttrex/shared/endpoints';
-import * as tkEndpoints from '@tktrex/shared/endpoints';
 import { APIError } from '@shared/errors/APIError';
-import { ChannelRelated } from '@shared/models/ChannelRelated';
-import {
-  HomeMetadata,
-  SearchMetadata,
-  VideoMetadata,
-} from '@shared/models/contributor/ContributorPersonalStats';
-import {
-  SummaryHTMLMetadata,
-  TikTokPSearchMetadata,
-} from '@shared/models/contributor/ContributorPersonalSummary';
-import { GuardoniExperiment } from '@shared/models/Experiment';
 import { SearchQuery } from '@shared/models/http/SearchQuery';
-import { SearchMetadata as TKSearchMetadata } from '@tktrex/shared/models/metadata';
-import { MakeAPIClient } from '@shared/providers/api.provider';
-import { available, queryStrict } from 'avenger';
+import { ListMetadataQuery } from '@yttrex/shared/models/http/metadata/query/ListMetadata.query';
 import { CachedQuery } from 'avenger/lib/Query';
-import { pipe } from 'fp-ts/lib/function';
-import * as TE from 'fp-ts/lib/TaskEither';
-import { Step } from '@shared/models/Step';
 
 export interface SearchRequestInput {
-  Params: any;
-  Query: SearchQuery;
+  Params: undefined;
+  Query: SearchQuery & { publicKey: string };
 }
 
-export interface Results<T> {
-  total: number;
-  content: T[];
+export interface RequestInputWithPublicKeyParam {
+  Params: { publicKey: string };
+  Query: SearchQuery;
 }
 
-type EndpointQuery<C> = CachedQuery<SearchRequestInput, APIError, Results<C>>;
-
-export interface TabouleQueries {
-  ccRelatedUsers: EndpointQuery<ChannelRelated>;
-  getExperimentById: EndpointQuery<Step>;
-  getExperimentList: EndpointQuery<GuardoniExperiment>;
-  personalSearches: EndpointQuery<SearchMetadata>;
-  personalAds: EndpointQuery<any>;
-  personalHomes: EndpointQuery<HomeMetadata>;
-  personalVideos: EndpointQuery<VideoMetadata>;
-  // tik tok
-  tikTokPersonalHTMLSummary: EndpointQuery<SummaryHTMLMetadata>;
-  tikTokPersonalSearch: EndpointQuery<TikTokPSearchMetadata>;
-  tikTokSearches: EndpointQuery<TKSearchMetadata>;
+export interface ListMetadataRequestInput {
+  Params: any;
+  Query: ListMetadataQuery;
 }
 
-interface GetTabouleQueriesProps {
-  baseURL: string;
-  accessToken?: string;
+export interface Results<T> {
+  total: number;
+  content: T[];
 }
 
-export const GetTabouleQueries = ({
-  baseURL,
-  accessToken,
-}: GetTabouleQueriesProps): TabouleQueries => {
-  const { API: YTAPI } = MakeAPIClient(
-    {
-      baseURL,
-      getAuth: async (req) => req,
-      onUnauthorized: async (res) => res,
-    },
-    endpoints
-  );
-  const { API: TK_API } = MakeAPIClient(
-    {
-      baseURL,
-      getAuth: async (req) => req,
-      onUnauthorized: async (res) => res,
-    },
-    tkEndpoints
-  );
-
-  const ccRelatedUsers = queryStrict<
-    SearchRequestInput,
-    APIError,
-    Results<ChannelRelated>
-  >(
-    (input) =>
-      pipe(
-        YTAPI.v3.Creator.CreatorRelatedChannels({
-          ...input,
-          Headers: {
-            'x-authorization': accessToken ?? '',
-          },
-        }),
-        TE.map(({ totalRecommendations, ...r }) => ({
-          ...r,
-          total: totalRecommendations,
-        }))
-      ),
-    available
-  );
-
-  const getExperimentById = queryStrict<
-    SearchRequestInput,
-    APIError,
-    Results<Step>
-  >(
-    (input) =>
-      pipe(
-        YTAPI.v2.Public.GetExperimentById(input),
-        TE.map((content) => ({
-          total: content.steps.length,
-          content: content.steps,
-        }))
-      ),
-    available
-  );
-
-  const getExperimentList = queryStrict<
-    SearchRequestInput,
-    APIError,
-    Results<GuardoniExperiment>
-  >(
-    (input) =>
-      pipe(
-        YTAPI.v2.Public.GetExperimentList(input),
-        TE.map((content) => {
-          return {
-            total: content.total,
-            content: content.content.map((c) => ({
-              ...c,
-              id: c.experimentId,
-            })),
-          };
-        })
-      ),
-    available
-  );
-
-  const personalHomes = queryStrict<
-    SearchRequestInput,
-    APIError,
-    Results<HomeMetadata>
-  >(
-    (input) =>
-      pipe(
-        YTAPI.v1.Public.GetPersonalStatsByPublicKey(input),
-        TE.map((content) => ({
-          total: content.stats.home,
-          content: content.homes,
-        }))
-      ),
-    available
-  );
-
-  const personalAds = queryStrict<SearchRequestInput, APIError, Results<any>>(
-    (input) =>
-      pipe(
-        YTAPI.v1.Public.GetPersonalStatsByPublicKey(input),
-        TE.map((content) => ({
-          total: content.ads.length,
-          content: content.ads,
-        }))
-      ),
-    available
-  );
-
-  const personalVideos = queryStrict<
-    SearchRequestInput,
-    APIError,
-    Results<VideoMetadata>
-  >(
-    (input) =>
-      pipe(
-        YTAPI.v1.Public.GetPersonalStatsByPublicKey(input),
-        TE.map((content) => ({
-          total: content.stats.video,
-          content: content.videos,
-        }))
-      ),
-    available
-  );
-
-  const personalSearches = queryStrict<
-    SearchRequestInput,
-    APIError,
-    Results<SearchMetadata>
-  >(
-    (input) =>
-      pipe(
-        YTAPI.v1.Public.GetPersonalStatsByPublicKey(input),
-        TE.map((content) => ({
-          total: content.stats.search,
-          content: content.searches,
-        }))
-      ),
-    available
-  );
-
-  const tikTokPersonalHTMLSummary = queryStrict<
-    SearchRequestInput,
-    APIError,
-    Results<SummaryHTMLMetadata>
-  >(
-    (input) =>
-      pipe(
-        YTAPI.v1.Public.GetPersonalSummaryByPublicKey(input),
-        TE.map((content) => ({
-          total: content.htmls.length,
-          content: content.htmls,
-        }))
-      ),
-    available
-  );
-
-  const tikTokPersonalSearch = queryStrict<
-    SearchRequestInput,
-    APIError,
-    Results<TikTokPSearchMetadata>
-  >(
-    (input) =>
-      pipe(
-        YTAPI.v1.Public.GetPersonalSearchByPublicKey(input),
-        TE.map((content) => ({
-          total: content.metadata.length,
-          content: content.metadata,
-        }))
-      ),
-    available
-  );
-
-  const tikTokSearches = queryStrict<
-    SearchRequestInput,
-    APIError,
-    Results<TKSearchMetadata>
-  >(
-    (input) =>
-      pipe(
-        TK_API.v2.Public.GetSearchByQuery(input),
-        TE.map((content) => ({
-          total: content.length,
-          content,
-        }))
-      ),
-    available
-  );
-
-  return {
-    ccRelatedUsers,
-    getExperimentById,
-    getExperimentList,
-    personalHomes,
-    personalAds,
-    personalVideos,
-    personalSearches,
-    tikTokPersonalHTMLSummary,
-    tikTokPersonalSearch,
-    tikTokSearches,
-  };
-};
+export type EndpointQuery<Q extends {}, C> = CachedQuery<Q, APIError, C>;
diff --git a/packages/taboule/src/state/types.ts b/packages/taboule/src/state/types.ts
index 07e5fb2b8..fde1ba901 100644
--- a/packages/taboule/src/state/types.ts
+++ b/packages/taboule/src/state/types.ts
@@ -2,16 +2,18 @@ import * as t from 'io-ts';
 
 export const TabouleQueryKey = t.union(
   [
-    t.literal('ccRelatedUsers'),
-    t.literal('getExperimentById'),
-    t.literal('getExperimentList'),
-    t.literal('personalSearches'),
-    t.literal('personalVideos'),
-    t.literal('personalHomes'),
-    t.literal('personalAds'),
+    t.literal('YCAIccRelatedUsers'),
+    t.literal('youtubeGetExperimentById'),
+    t.literal('youtubeGetExperimentList'),
+    t.literal('youtubePersonalSearches'),
+    t.literal('youtubePersonalVideos'),
+    t.literal('youtubePersonalHomes'),
+    t.literal('youtubePersonalAds'),
     t.literal('tikTokPersonalHTMLSummary'),
     t.literal('tikTokPersonalSearch'),
-    t.literal('tikTokSearches'),
+    t.literal('tikTokPersonalNative'),
+    t.literal('tikTokPersonalForYou'),
+    t.literal('tikTokPersonalProfile'),
   ],
   'TabouleQueryKey'
 );
diff --git a/packages/taboule/typings/webpack.d.ts b/packages/taboule/typings/webpack.d.ts
new file mode 100644
index 000000000..e2937d470
--- /dev/null
+++ b/packages/taboule/typings/webpack.d.ts
@@ -0,0 +1 @@
+declare module '*.png';
diff --git a/platforms/storybook/.env b/platforms/storybook/.env
new file mode 100644
index 000000000..a2f8b8062
--- /dev/null
+++ b/platforms/storybook/.env
@@ -0,0 +1,4 @@
+TK_FE_URL=https://tiktok.tracking.esposed
+TK_BE_URL=https://tiktok.tracking.exposed/api
+YT_FE_URL=https://youtube.tracking.esposed
+YT_BE_URL=https://youtube.tracking.exposed/api
diff --git a/platforms/storybook/.env.development b/platforms/storybook/.env.development
new file mode 100644
index 000000000..1db7baa5d
--- /dev/null
+++ b/platforms/storybook/.env.development
@@ -0,0 +1,5 @@
+TK_FE_URL=http://localhost:1314
+TK_BE_URL=http://localhost:14000/api
+YT_FE_URL=http://localhost:1313
+YT_BE_URL=http://localhost:9000/api
+DEBUG=@trex*
diff --git a/platforms/storybook/.storybook/main.js b/platforms/storybook/.storybook/main.js
index 3cef08a24..df79efefa 100644
--- a/platforms/storybook/.storybook/main.js
+++ b/platforms/storybook/.storybook/main.js
@@ -1,14 +1,47 @@
 const path = require('path');
 const TSConfigPathsWebpackPlugin = require('tsconfig-paths-webpack-plugin');
 const version = require('../package.json').version;
+const dotenv = require('dotenv');
+
+const DOTENV_CONFIG_PATH = process.env.DOTENV_CONFIG_PATH
+  ? process.env.DOTENV_CONFIG_PATH
+  : process.env.NODE_ENV === 'production'
+  ? '.env'
+  : '.env.development';
+
+const env = dotenv.config({
+  path: path.resolve(process.cwd(), DOTENV_CONFIG_PATH),
+}).parsed;
+
+function injectEnv(definitions) {
+  const env = 'process.env';
+
+  if (!definitions[env]) {
+    return {
+      ...definitions,
+      [env]: JSON.stringify(
+        Object.fromEntries(
+          Object.entries(definitions)
+            .filter(([key]) => key.startsWith(env))
+            .map(([key, value]) => [
+              key.substring(env.length + 1),
+              JSON.parse(value),
+            ])
+        )
+      ),
+    };
+  }
+  return definitions;
+}
 
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
+    '@storybook/addon-actions',
+    '@storybook/addon-controls',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
-    '@storybook/addon-controls',
   ],
   framework: '@storybook/react',
   core: {
@@ -27,6 +60,12 @@ module.exports = {
         prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
     },
   },
+  env: (config) => {
+    return {
+      ...config,
+      ...env,
+    };
+  },
   webpackFinal: async (config) => {
     config.module.rules.push({
       test: /\.scss$/,
@@ -48,12 +87,63 @@ module.exports = {
         configFile: sharedTSConfig,
       })
     );
+
+    const tabouleTSConfig = path.resolve(
+      process.cwd(),
+      '../../packages/taboule/tsconfig.json'
+    );
+
+    // console.log({ sharedTSConfig });
+
+    config.resolve.plugins.push(
+      new TSConfigPathsWebpackPlugin({
+        configFile: tabouleTSConfig,
+      })
+    );
+
     config.resolve.plugins.push(new TSConfigPathsWebpackPlugin());
 
     // console.log("config", config.module.rules);
     // console.log("config", config.resolve.plugins);
     // console.log("config", config);
 
+    config.module.rules.push({
+      test: /\.tsx?$/,
+      exclude: /node_modules/,
+      use: [
+        {
+          loader: require.resolve('babel-loader'),
+          options: {
+            presets: [
+              require('@babel/preset-typescript').default,
+              [
+                require('@babel/preset-react').default,
+                { runtime: 'automatic' },
+              ],
+              require('@babel/preset-env').default,
+            ],
+          },
+        },
+      ],
+    });
+
+    config.resolve.extensions.push('.ts', '.tsx');
+
+    config.module.rules.push({
+      test: /\.mjs$/,
+      include: /node_modules/,
+      type: 'javascript/auto',
+    });
+
+    config.resolve.extensions.push('.mjs');
+
+    const definePlugin = config.plugins.find(
+      ({ constructor }) => constructor && constructor.name === 'DefinePlugin'
+    );
+    if (definePlugin) {
+      definePlugin.definitions = injectEnv(definePlugin.definitions);
+    }
+
     return config;
   },
   env: (config) => ({
diff --git a/platforms/storybook/package.json b/platforms/storybook/package.json
index c76b00816..4b054dcd5 100644
--- a/platforms/storybook/package.json
+++ b/platforms/storybook/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "start": "start-storybook -p 6006",
+    "dev": "DOTENV_CONFIG_PATH=.env.development start-storybook -p 6006",
     "build": "build-storybook -o build",
     "lint": "eslint ./src"
   },
@@ -15,16 +16,18 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^6.5.13",
-    "@storybook/addon-essentials": "^6.5.13",
-    "@storybook/addon-interactions": "^6.5.13",
-    "@storybook/addon-links": "^6.5.13",
-    "@storybook/builder-webpack5": "^6.5.13",
-    "@storybook/manager-webpack5": "^6.5.13",
-    "@storybook/node-logger": "^6.5.13",
-    "@storybook/react": "^6.5.13",
+    "@react-theming/storybook-addon": "^1.1.10",
+    "@storybook/addon-actions": "^6.5.14",
+    "@storybook/addon-controls": "^6.5.14",
+    "@storybook/addon-essentials": "^6.5.14",
+    "@storybook/addon-interactions": "^6.5.14",
+    "@storybook/addon-links": "^6.5.14",
+    "@storybook/builder-webpack5": "^6.5.14",
+    "@storybook/manager-webpack5": "^6.5.14",
+    "@storybook/node-logger": "^6.5.14",
+    "@storybook/react": "^6.5.14",
     "@storybook/testing-library": "^0.0.13",
-    "@storybook/theming": "^6.5.13",
+    "@storybook/theming": "^6.5.14",
     "@types/react": "^17.0.50",
     "@typescript-eslint/eslint-plugin": "^5.40.0",
     "@typescript-eslint/parser": "^5.40.0",
diff --git a/platforms/storybook/src/components/Tooltip.tsx b/platforms/storybook/src/components/Tooltip.tsx
index 74e0990e0..d4ea174d7 100644
--- a/platforms/storybook/src/components/Tooltip.tsx
+++ b/platforms/storybook/src/components/Tooltip.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
-
-import { Card } from '@material-ui/core';
-import FormHelperText from '@material-ui/core/FormHelperText';
+import { Card, FormHelperText } from '@mui/material';
 
 interface TooltipProps {
   tooltipText: string;
diff --git a/platforms/storybook/src/stories/ExpandView.stories.tsx b/platforms/storybook/src/stories/ExpandView.stories.tsx
new file mode 100644
index 000000000..c1465ed70
--- /dev/null
+++ b/platforms/storybook/src/stories/ExpandView.stories.tsx
@@ -0,0 +1,29 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import ExpandView from '@taboule/components/expand-view/ExpandView';
+import { ParsedInfoArb } from '@yttrex/shared/arbitraries/Metadata.arb';
+import * as fc from 'fast-check';
+
+const Meta: ComponentMeta<typeof ExpandView> = {
+  title: 'Example/ExpandView',
+  component: ExpandView,
+  argTypes: { onClose: { action: 'clicked' } },
+};
+
+export default Meta;
+
+const Template: ComponentStory<typeof ExpandView> = (args) => {
+  return <ExpandView {...args} />;
+};
+
+export const Basic = Template.bind({});
+Basic.args = {
+  isVisible: true,
+  children: fc
+    .sample(ParsedInfoArb, 4)
+    .map((r, i) => ({
+      ...r,
+      order: i,
+      thumbnailHref: `http://placekitten.com/600/${i}00`,
+    }))
+    .map((v) => <div key={v.index + '-' + v.label}>{v.label}</div>),
+};
diff --git a/platforms/storybook/src/stories/Taboule.stories.tsx b/platforms/storybook/src/stories/Taboule.stories.tsx
new file mode 100644
index 000000000..fefebf4e7
--- /dev/null
+++ b/platforms/storybook/src/stories/Taboule.stories.tsx
@@ -0,0 +1,121 @@
+import { Meta, Story } from '@storybook/react';
+import { TabouleIndex, TabouleIndexProps } from '@taboule/components';
+
+const meta: Meta<TabouleIndexProps<any>> = {
+  title: 'Example/Taboule',
+  component: TabouleIndex,
+  argTypes: {
+    showInput: {
+      type: 'boolean',
+    },
+  },
+};
+
+export default meta;
+
+const tkBaseURL = process.env.TK_BE_URL;
+const ytBaseURL = process.env.YT_BE_URL;
+
+const ytPersonalSearchQ = {
+  value: 'youtubePersonalSearches',
+  label: 'Personal Searches',
+};
+const ytPersonalHomeQ = {
+  value: 'youtubePersonalHomes',
+  label: 'Personal Homes',
+};
+const ytPersonalVideoQ = {
+  value: 'youtubePersonalVideos',
+  label: 'Personal Videos',
+};
+
+const tkPersonalProfileQ = {
+  value: 'tikTokPersonalProfile',
+  label: 'Personal Profile',
+};
+const tkPersonalForYouQ = {
+  value: 'tikTokPersonalForYou',
+  label: 'Personal For You',
+};
+
+const tkPersonalSearchQ = {
+  value: 'tikTokPersonalSearch',
+  label: 'Personal Search',
+};
+
+const tkPersonalNative = {
+  value: 'tikTokPersonalNative',
+  label: 'Personal Native',
+};
+
+const Template: Story<TabouleIndexProps<any>> = (args) => {
+  return <TabouleIndex {...args} />;
+};
+
+export const YTPersonalSearches = Template.bind({});
+YTPersonalSearches.args = {
+  showInput: true,
+  baseURL: ytBaseURL,
+  queries: [ytPersonalSearchQ],
+};
+
+export const YTPersonalHomes = Template.bind({});
+YTPersonalHomes.args = {
+  showInput: true,
+  baseURL: ytBaseURL,
+  queries: [ytPersonalHomeQ],
+};
+
+export const YTPersonalVideos = Template.bind({});
+YTPersonalVideos.args = {
+  showInput: true,
+  baseURL: ytBaseURL,
+  queries: [ytPersonalVideoQ],
+};
+
+export const AllYTPersonal = Template.bind({});
+AllYTPersonal.args = {
+  showInput: true,
+  baseURL: ytBaseURL,
+  queries: [ytPersonalHomeQ, ytPersonalSearchQ, ytPersonalVideoQ],
+};
+
+export const TKPersonalNatives = Template.bind({});
+TKPersonalNatives.args = {
+  showInput: true,
+  baseURL: tkBaseURL,
+  queries: [tkPersonalNative],
+};
+
+export const TKPersonalSearch = Template.bind({});
+TKPersonalSearch.args = {
+  showInput: true,
+  baseURL: tkBaseURL,
+  queries: [tkPersonalSearchQ],
+};
+
+export const TKPersonalForYou = Template.bind({});
+TKPersonalForYou.args = {
+  showInput: true,
+  baseURL: tkBaseURL,
+  queries: [tkPersonalForYouQ],
+};
+
+export const TKPersonalProfile = Template.bind({});
+TKPersonalProfile.args = {
+  showInput: true,
+  baseURL: tkBaseURL,
+  queries: [tkPersonalProfileQ],
+};
+
+export const AllTKPersonal = Template.bind({});
+AllTKPersonal.args = {
+  showInput: true,
+  baseURL: tkBaseURL,
+  queries: [
+    tkPersonalForYouQ,
+    tkPersonalNative,
+    tkPersonalSearchQ,
+    tkPersonalProfileQ,
+  ],
+};
diff --git a/platforms/storybook/tsconfig.json b/platforms/storybook/tsconfig.json
index 537c267a5..c96801175 100644
--- a/platforms/storybook/tsconfig.json
+++ b/platforms/storybook/tsconfig.json
@@ -18,11 +18,13 @@
     "skipDefaultLibCheck": true,
     "typeRoots": ["node_modules/@types", "./typings"],
     "baseUrl": "./src",
-    "rootDir": "./src",
     "moduleResolution": "node",
     "isolatedModules": true,
     "paths": {
-      "@shared/*": ["../../../packages/shared/src/*"]
+      "@shared/*": ["../../../packages/shared/src/*"],
+      "@taboule/*": ["../../../packages/taboule/src/*"],
+      "@yttrex/shared/*": ["../../yttrex/shared/src/*"],
+      "@tktrex/shared/*": ["../../tktrex/shared/src/*"]
     }
   },
   "references": [
@@ -30,6 +32,6 @@
       "path": "../../packages/shared"
     }
   ],
-  "include": ["./src"],
+  "include": ["./src", "./typings"],
   "exclude": ["node_modules", "public", ".storybook", ".cache"]
 }
diff --git a/platforms/storybook/typings/webpack.d.ts b/platforms/storybook/typings/webpack.d.ts
new file mode 100644
index 000000000..e2937d470
--- /dev/null
+++ b/platforms/storybook/typings/webpack.d.ts
@@ -0,0 +1 @@
+declare module '*.png';
diff --git a/platforms/tktrex/backend/.env.development b/platforms/tktrex/backend/.env.development
index b534460c9..055bb26a4 100644
--- a/platforms/tktrex/backend/.env.development
+++ b/platforms/tktrex/backend/.env.development
@@ -1 +1 @@
-DEBUG=@trex:*:error,@trex:*:warn,@trex:*:info,-@trex:*:debug
+DEBUG=*,-express:*
diff --git a/platforms/tktrex/backend/bin/parser.ts b/platforms/tktrex/backend/bin/parser.ts
index 907dc0354..b63816f7d 100644
--- a/platforms/tktrex/backend/bin/parser.ts
+++ b/platforms/tktrex/backend/bin/parser.ts
@@ -30,7 +30,7 @@ const AMOUNT_DEFAULT = 20;
 const BACKINTIMEDEFAULT = 1;
 const FIXTURES_FOLDER = path.resolve(
   process.cwd(),
-  `parsers/__tests__/fixtures`
+  `__tests__/fixtures/errors`
 );
 
 /*
diff --git a/platforms/tktrex/backend/ecosystem.config.js b/platforms/tktrex/backend/ecosystem.config.js
index 2d68bc78b..39f2dafc4 100644
--- a/platforms/tktrex/backend/ecosystem.config.js
+++ b/platforms/tktrex/backend/ecosystem.config.js
@@ -4,7 +4,7 @@ const commonENV = {
 
 const tk = {
   backend: {
-    name: 'server',
+    name: 'tk:server',
     namespace: 'tk:backend',
     cwd: __dirname,
     script: 'yarn start',
diff --git a/platforms/tktrex/backend/ecosystem.dev.config.js b/platforms/tktrex/backend/ecosystem.dev.config.js
index 747c9d25a..1b90037b0 100644
--- a/platforms/tktrex/backend/ecosystem.dev.config.js
+++ b/platforms/tktrex/backend/ecosystem.dev.config.js
@@ -1,11 +1,19 @@
 const { commonENV } = require('./ecosystem.config');
+const path = require('path');
+
+require('dotenv').config({
+  path: path.resolve(__dirname, '.env.development'),
+  override: true,
+});
 
 const env = {
   ...commonENV,
+  ...process.env,
+  key: 'fuffa',
 };
 
 const testEnv = {
-  ...commonENV,
+  ...env,
   mongoDb: 'tktrex-test',
 };
 
diff --git a/platforms/tktrex/backend/io/metadata.io.ts b/platforms/tktrex/backend/io/metadata.io.ts
index c82fb9f1a..24836e005 100644
--- a/platforms/tktrex/backend/io/metadata.io.ts
+++ b/platforms/tktrex/backend/io/metadata.io.ts
@@ -8,7 +8,7 @@ import {
   NativeMetadata,
   ProfileMetadata,
   SearchMetadata,
-  TKMetadata
+  TKMetadata,
 } from '@tktrex/shared/models/metadata';
 import { TKMetadataBase as MetadataBase } from '@tktrex/shared/models/metadata/MetadataBase';
 import {
@@ -18,7 +18,7 @@ import {
   HashtagType,
   NativeType,
   ProfileType,
-  SearchType
+  SearchType,
 } from '@tktrex/shared/models/Nature';
 import * as E from 'fp-ts/Either';
 import { pipe } from 'fp-ts/function';
@@ -29,7 +29,7 @@ import {
   NativeMetadataDB,
   ProfileMetadataDB,
   SearchMetadataDB,
-  TKMetadataDB
+  TKMetadataDB,
 } from '../models/metadata';
 
 type SpecificM<M> = Omit<M, keyof Metadata | '_id' | 'publicKey'>;
@@ -172,10 +172,11 @@ export const toTKMetadata = ({
 
   // we cheat the compiler by setting `m` type to `any` for the switch;
   const mm: any = m;
+  const type: typeof m.type = m.nature?.type ?? m.type;
 
   // based on the metadata nature type we extract
   // the metadata values by a proper mapping function
-  switch (m.nature.type) {
+  switch (type) {
     case SearchType.value: {
       return toSearchMetadata(mm, meta);
     }
diff --git a/platforms/tktrex/backend/routes/metadata.ts b/platforms/tktrex/backend/routes/metadata.ts
index a9f4d8f53..32b21fb5e 100644
--- a/platforms/tktrex/backend/routes/metadata.ts
+++ b/platforms/tktrex/backend/routes/metadata.ts
@@ -5,7 +5,6 @@ import { throwTE } from '@shared/utils/task.utils';
 import endpoints from '@tktrex/shared/endpoints/v2/metadata.endpoints';
 import { ListMetadataOutput } from '@tktrex/shared/models/http/output/ListMetadata.output';
 import { ListMetadataQuery } from '@tktrex/shared/models/http/query/ListMetadata.query';
-import createDebug from 'debug';
 import { pipe } from 'fp-ts/lib/function';
 import * as TE from 'fp-ts/TaskEither';
 import _ from 'lodash';
@@ -13,8 +12,9 @@ import moment from 'moment';
 import { toTKMetadata } from '../io/metadata.io';
 import * as automo from '../lib/automo';
 import CSV from '../lib/CSV';
+import { trexLogger } from '@shared/logger';
 
-const debug = createDebug('routes:public');
+const metadataLogger = trexLogger.extend('routes:public');
 
 // This variables is used as cap in every readLimit below
 const PUBLIC_AMOUNT_ELEMS = 100;
@@ -31,7 +31,7 @@ const listMetadata = async (req: any): Promise<ListMetadataResponse> => {
     query: ListMetadataQuery;
   };
 
-  debug('Filter metadata with query %O', query);
+  metadataLogger.debug('Filter metadata with query %O', query);
 
   const {
     researchTag,
@@ -43,7 +43,7 @@ const listMetadata = async (req: any): Promise<ListMetadataResponse> => {
     format,
   } = query;
 
-  debug('Filter metadata with query %O', query);
+  metadataLogger.debug('Filter metadata with query %O', query);
 
   const filter = {} as any;
   if (publicKey) {
@@ -57,7 +57,7 @@ const listMetadata = async (req: any): Promise<ListMetadataResponse> => {
   }
 
   if (queryFilter?.nature) {
-    filter['nature.type'] = queryFilter.nature;
+    filter.type = queryFilter.nature;
 
     switch (queryFilter.nature) {
       case 'search': {
@@ -69,6 +69,15 @@ const listMetadata = async (req: any): Promise<ListMetadataResponse> => {
         }
         break;
       }
+      case 'foryou': {
+        const { description } = queryFilter;
+        if (description) {
+          filter.description = {
+            $regex: new RegExp(description, 'i'),
+          };
+        }
+        break;
+      }
       case 'native': {
         const { description } = queryFilter;
 
@@ -82,7 +91,12 @@ const listMetadata = async (req: any): Promise<ListMetadataResponse> => {
     }
   }
 
-  debug('Filtering metadata for %O (%d, %d)', filter, amount, skip);
+  metadataLogger.debug(
+    'Filtering metadata for %O (%d, %d)',
+    filter,
+    amount,
+    skip
+  );
 
   return pipe(
     TE.tryCatch(
@@ -97,7 +111,11 @@ const listMetadata = async (req: any): Promise<ListMetadataResponse> => {
      * Disable the validation of the output for the moment
      */
     TE.map(({ totals, data }) => {
-      debug('Metadata by %O, %d evidences', filter, _.size(data));
+      metadataLogger.debug(
+        'Metadata by %O, %d evidences',
+        filter,
+        _.size(data)
+      );
       return {
         totals,
         data: data.map(toTKMetadata),
@@ -111,7 +129,7 @@ const listMetadata = async (req: any): Promise<ListMetadataResponse> => {
         filename += researchTag ? `-research_tag-${researchTag}` : '';
         filename += '-' + moment().format('YY-MM-DD') + '.csv';
 
-        debug(
+        metadataLogger.info(
           'VideoCSV: produced %d bytes, returning %s',
           _.size(csv),
           filename
diff --git a/platforms/tktrex/extension/__tests__/app.spec.ts b/platforms/tktrex/extension/__tests__/app.spec.ts
index 595f66cdc..4db77274c 100644
--- a/platforms/tktrex/extension/__tests__/app.spec.ts
+++ b/platforms/tktrex/extension/__tests__/app.spec.ts
@@ -254,7 +254,7 @@ describe('TK App', () => {
       // video handler should be invoked as the url includes `watch`
 
       const { handle: _handle, ...videoOpts } = videoMatcher;
-      expect(handleVideoSpy).toHaveBeenCalledTimes(3);
+      expect(handleVideoSpy).toHaveBeenCalledTimes(4);
       expect(handleSearchSpy).toHaveBeenCalledTimes(48);
       expect(hubDispatchSpy).toHaveBeenCalledTimes(2);
 
diff --git a/platforms/tktrex/extension/__tests__/profile.spec.ts b/platforms/tktrex/extension/__tests__/profile.spec.ts
index 333c55689..9ba9b194a 100644
--- a/platforms/tktrex/extension/__tests__/profile.spec.ts
+++ b/platforms/tktrex/extension/__tests__/profile.spec.ts
@@ -149,10 +149,12 @@ describe('TK App - profile ', () => {
           Accept: 'application/json',
         },
         params: undefined,
+        paramsSerializer: expect.any(Function),
         method: 'POST',
         responseType: 'json',
       });
 
+      // sigi state
       expect(axiosMock.request).toHaveBeenNthCalledWith(2, {
         url: '/v2/events',
         data: [expect.any(Object), expect.any(Object)],
@@ -168,6 +170,7 @@ describe('TK App - profile ', () => {
         },
         method: 'POST',
         params: undefined,
+        paramsSerializer: expect.any(Function),
         responseType: 'json',
       });
     });
diff --git a/platforms/tktrex/extension/jest.config.js b/platforms/tktrex/extension/jest.config.js
index 4292374e3..ef24a52a7 100644
--- a/platforms/tktrex/extension/jest.config.js
+++ b/platforms/tktrex/extension/jest.config.js
@@ -9,7 +9,7 @@ const tsPaths = pathsToModuleNameMapper(tsConfig.compilerOptions.paths, {
 const moduleNameMapper = {
   ...tsPaths,
   '\\.(svg|ttf)$': '<rootDir>/__mocks__/fileMock.js',
-  '\\.(css)$': '<rootDir>/__mocks__/styleMock.js',
+  '\\.(css)$': '<rootDir>../../../__mocks__/styleMock.js',
 };
 
 /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
diff --git a/platforms/tktrex/extension/src/app/app.ts b/platforms/tktrex/extension/src/app/app.ts
index 6302fd7c3..35654121e 100644
--- a/platforms/tktrex/extension/src/app/app.ts
+++ b/platforms/tktrex/extension/src/app/app.ts
@@ -10,7 +10,7 @@ import { HTMLSize } from '@shared/extension/utils/HTMLSize.utils';
 import _ from 'lodash';
 import tkHub from './hub';
 import { INTERCEPTOR_CONTAINER_ID } from '../interceptor/constants';
-import { addAppUI } from './components';
+import { addTKAppUI } from './components';
 
 export const appLog = log.extend('app');
 const searchSize = HTMLSize();
@@ -25,9 +25,7 @@ export function tkTrexActions(remoteInfo: unknown): void {
   appLog.info('initialize watchers, remoteInfo available:', remoteInfo);
 
   // initialize ui
-
-  const apiInterceptorUI = document.createElement('div');
-  addAppUI(apiInterceptorUI);
+  addTKAppUI();
 
   // initializeEmergencyButton();
 
diff --git a/platforms/tktrex/extension/src/app/components/APIInterceptedSnackbar.tsx b/platforms/tktrex/extension/src/app/components/APIInterceptedSnackbar.tsx
index 2479cf202..7d928e055 100644
--- a/platforms/tktrex/extension/src/app/components/APIInterceptedSnackbar.tsx
+++ b/platforms/tktrex/extension/src/app/components/APIInterceptedSnackbar.tsx
@@ -1,7 +1,6 @@
 import Snackbar from '@mui/material/Snackbar';
-import tkHub from '../hub';
-import _ from 'lodash';
 import * as React from 'react';
+import tkHub from '../hub';
 
 export const APIInterceptedSnackbar: React.FC = () => {
   // const [show, setShow] = React.useState(false);
@@ -10,15 +9,12 @@ export const APIInterceptedSnackbar: React.FC = () => {
   });
 
   React.useEffect(() => {
-    tkHub.on(
-      'APIRequestEvent',
-      _.debounce((e) => {
-        const payload: any = e.payload;
-        if (!data.intercepted.some((ee) => ee.id === payload.id)) {
-          setData({ intercepted: [...data.intercepted, payload] });
-        }
-      }, 400),
-    );
+    tkHub.on('APIRequestEvent', (e) => {
+      const payload: any = e.payload;
+      if (!data.intercepted.some((ee) => ee.id === payload.id)) {
+        setData((data) => ({ intercepted: [...data.intercepted, payload] }));
+      }
+    });
   }, [data.intercepted]);
 
   const handleDump = (): void => {
diff --git a/platforms/tktrex/extension/src/app/components/SigiStateSnackbar.tsx b/platforms/tktrex/extension/src/app/components/SigiStateSnackbar.tsx
index 70965891e..a34238348 100644
--- a/platforms/tktrex/extension/src/app/components/SigiStateSnackbar.tsx
+++ b/platforms/tktrex/extension/src/app/components/SigiStateSnackbar.tsx
@@ -1,20 +1,17 @@
-import tkHub from '../hub';
-import * as React from 'react';
 import { Snackbar } from '@material-ui/core';
-import _ from 'lodash';
+import * as React from 'react';
+import tkHub from '../hub';
 
 export const SigiStateSnackbar: React.FC = () => {
   // const [show, setShow] = React.useState(false);
   const [data, setData] = React.useState<any[]>([]);
 
   React.useEffect(() => {
-    tkHub.on(
-      'SigiState',
-      _.debounce((e) => {
-        const payload: any = e.payload;
-        setData([...data, payload]);
-      }, 400),
-    );
+    tkHub.on('SigiState', (e) => {
+      const payload: any = e.payload;
+
+      setData((data) => [...data, payload]);
+    });
   }, [data]);
 
   const handleDump = (): void => {
diff --git a/platforms/tktrex/extension/src/app/components/index.tsx b/platforms/tktrex/extension/src/app/components/index.tsx
index b73dce6cb..6295ca87a 100644
--- a/platforms/tktrex/extension/src/app/components/index.tsx
+++ b/platforms/tktrex/extension/src/app/components/index.tsx
@@ -1,25 +1,15 @@
 import { Box } from '@material-ui/core';
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { APIInterceptedSnackbar } from './APIInterceptedSnackbar';
 import { SigiStateSnackbar } from './SigiStateSnackbar';
-
-export const addAppUI = (node: Element): void => {
-  if (document.body.contains(node)) {
-    ReactDOM.unmountComponentAtNode(node);
-  }
-
-  node.id = 'tktrex-app-ui';
-
-  document.body.append(node);
-
-  ReactDOM.render(
-    <React.Fragment>
-      <Box style={{ position: 'fixed' }}>
-        <APIInterceptedSnackbar />
-        <SigiStateSnackbar />
-      </Box>
-    </React.Fragment>,
-    node,
+import { addPageUI } from '@shared/extension/ui';
+
+export const addTKAppUI = (): void => {
+  return addPageUI(
+    'tktrex-app-ui',
+    <Box style={{ position: 'fixed' }}>
+      <APIInterceptedSnackbar />
+      <SigiStateSnackbar />
+    </Box>,
   );
 };
diff --git a/platforms/tktrex/extension/src/app/hub/index.ts b/platforms/tktrex/extension/src/app/hub/index.ts
index c84eb93c9..e8fee1115 100644
--- a/platforms/tktrex/extension/src/app/hub/index.ts
+++ b/platforms/tktrex/extension/src/app/hub/index.ts
@@ -52,14 +52,20 @@ function sync(hub: Hub<TKHubEvent>, config: UserSettings): void {
         userId: 'local',
       },
       (response) => {
-        hub.dispatch({
-          type: 'SyncResponse',
-          payload: response,
-        });
+        if (response.type === 'Error') {
+          hub.dispatch({
+            type: 'ErrorEvent',
+            payload: response.error,
+          });
+        } else {
+          state.content = [];
+          hub.dispatch({
+            type: 'SyncResponse',
+            payload: response,
+          });
+        }
       },
     );
-
-    state.content = [];
   }
 }
 
diff --git a/platforms/tktrex/extension/src/app/index.ts b/platforms/tktrex/extension/src/app/index.ts
index f75498299..907d38305 100644
--- a/platforms/tktrex/extension/src/app/index.ts
+++ b/platforms/tktrex/extension/src/app/index.ts
@@ -22,4 +22,9 @@ void boot({
     onLocationChange,
   },
   onAuthenticated: tkTrexActions,
+  ui: {
+    common: {
+      errors: true,
+    },
+  },
 });
diff --git a/platforms/tktrex/extension/src/popup.tsx b/platforms/tktrex/extension/src/popup.tsx
index ba7b9feb3..5b0dde2aa 100644
--- a/platforms/tktrex/extension/src/popup.tsx
+++ b/platforms/tktrex/extension/src/popup.tsx
@@ -6,11 +6,13 @@ import {
   AccountBox as AccountBoxIcon,
 } from '@material-ui/icons';
 import * as React from 'react';
+import hub from './app/hub';
 
 renderPopup({
   platform: 'TikTok',
   platformURL: 'https://tiktok.com',
   logo: '/tktrex-logo.png',
+  hub,
   settings: {
     enabled: {
       researchTag: true,
diff --git a/platforms/tktrex/shared/__spec__/parser/parser.spec.ts b/platforms/tktrex/shared/__spec__/parser/parser.spec.ts
index fe73807a5..3567d12f0 100644
--- a/platforms/tktrex/shared/__spec__/parser/parser.spec.ts
+++ b/platforms/tktrex/shared/__spec__/parser/parser.spec.ts
@@ -5,7 +5,7 @@ import {
   expectToBeIncludedIn,
   normalizeDeepStrings,
 } from '../../src/parser/v2/lib/util';
-import { ForYouVideoMetadata } from '../../src/models/metadata/ForYouMetadata';
+import { ForYouMetadata } from '../../src/models/metadata/ForYouMetadata';
 import createServerSideParser from '../../src/parser/v2/serverSideParser';
 import historicData from './fixtures/history.json';
 import { v4 as uuid } from 'uuid';
@@ -16,7 +16,7 @@ describe('The TikTok parser for the ForYou feed', () => {
   // "foryou" videos so that we have complete data for our tests,
   // and exclude the example that we know to be wrong
   const forYouSamples = historicData.filter((sample) => {
-    const decodeResult = ForYouVideoMetadata.decode({
+    const decodeResult = ForYouMetadata.decode({
       ...sample.metadata,
       nature: { type: sample.metadata.type },
       timelineId: `bread-${uuid()}`,
@@ -46,7 +46,7 @@ describe('The TikTok parser for the ForYou feed', () => {
     // inside the expected value,
     // now we also check that it validates the schema of the
     // expected value
-    const validation = ForYouVideoMetadata.decode({
+    const validation = ForYouMetadata.decode({
       id: uuid(),
       savingTime: new Date().toISOString(),
       publicKey: 'fake-publicKey',
diff --git a/platforms/tktrex/shared/src/models/metadata/MetadataBase.ts b/platforms/tktrex/shared/src/models/metadata/MetadataBase.ts
index ea56f0293..4d113ed16 100644
--- a/platforms/tktrex/shared/src/models/metadata/MetadataBase.ts
+++ b/platforms/tktrex/shared/src/models/metadata/MetadataBase.ts
@@ -6,7 +6,7 @@ export const TKMetadataBase = t.type(
     ...MetadataBase.props,
     timelineId: t.string,
   },
-  'TKMetadataBase'
+  'TKMetadataBase',
 );
 
 export type TKMetadataBase = t.TypeOf<typeof TKMetadataBase>;
diff --git a/platforms/tktrex/shared/src/parser/metadata.ts b/platforms/tktrex/shared/src/parser/metadata.ts
index 8d0de5e5e..411f39389 100644
--- a/platforms/tktrex/shared/src/parser/metadata.ts
+++ b/platforms/tktrex/shared/src/parser/metadata.ts
@@ -16,7 +16,7 @@ export const toMetadata: BuildMetadataFn<HTMLSource, TKMetadata, TKParsers> = (
     clientTime: entry.source.html.clientTime,
     href: entry.source.html.href,
     thumbnails: [],
-    blang: entry.source.html.blang ?? null
+    blang: entry.source.html.blang ?? null,
   };
 
   switch (entry.findings.nature.type) {
diff --git a/platforms/ycai/studio/jest.config.js b/platforms/ycai/studio/jest.config.js
index ad2ed12f5..c0342d7ec 100644
--- a/platforms/ycai/studio/jest.config.js
+++ b/platforms/ycai/studio/jest.config.js
@@ -8,8 +8,8 @@ const tsPaths = pathsToModuleNameMapper(tsConfig.compilerOptions.paths, {
 
 const moduleNameMapper = {
   ...tsPaths,
-  '\\.(svg|ttf)$': '<rootDir>/__mocks__/fileMock.js',
-  '\\.(css)$': '<rootDir>/__mocks__/styleMock.js',
+  '\\.(svg|ttf|png)$': '<rootDir>/../../../__mocks__/fileMock.js',
+  '\\.(css)$': '<rootDir>/../../../__mocks__/styleMock.js',
 };
 
 /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
diff --git a/platforms/ycai/studio/src/components/dashboard/community/AnalyticsPage.tsx b/platforms/ycai/studio/src/components/dashboard/community/AnalyticsPage.tsx
index f6e42b340..70bca4a41 100644
--- a/platforms/ycai/studio/src/components/dashboard/community/AnalyticsPage.tsx
+++ b/platforms/ycai/studio/src/components/dashboard/community/AnalyticsPage.tsx
@@ -10,7 +10,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { config } from '../../../config';
 import {
-  ccRelatedUsers,
+  YCAIccRelatedUsers,
   profile,
 } from '../../../state/dashboard/creator.queries';
 import { makeStyles } from '../../../theme';
@@ -77,7 +77,7 @@ const CreatorAnalyticsPage: React.FC<CreatorAnalyticsPageProps> = ({
         <LinkAccountButton />
       ) : (
         <WithQueries
-          queries={{ stats: ccRelatedUsers }}
+          queries={{ stats: YCAIccRelatedUsers }}
           params={{ stats: { params: { amount, skip: 0 } } }}
           render={QR.fold(LazyFullSizeLoader, ErrorBox, ({ stats }) => {
             return (
@@ -144,7 +144,7 @@ const CreatorAnalyticsPage: React.FC<CreatorAnalyticsPageProps> = ({
                       <Taboule
                         height={500}
                         showInput={false}
-                        query="ccRelatedUsers"
+                        query="YCAIccRelatedUsers"
                         baseURL={config.API_URL}
                         initialParams={{
                           channelId: profile.channelId,
diff --git a/platforms/ycai/studio/src/state/dashboard/creator.queries.ts b/platforms/ycai/studio/src/state/dashboard/creator.queries.ts
index de76b4ae2..0ad197b3d 100644
--- a/platforms/ycai/studio/src/state/dashboard/creator.queries.ts
+++ b/platforms/ycai/studio/src/state/dashboard/creator.queries.ts
@@ -159,7 +159,7 @@ export const oneCreatorVideo = compose(
   }, available)
 );
 
-export const ccRelatedUsers = compose(
+export const YCAIccRelatedUsers = compose(
   product({
     profile: requiredLocalProfile,
     params: param<{ amount: number; skip: number }>(),
diff --git a/platforms/yttrex/backend/routes/__tests__/metadata.e2e.ts b/platforms/yttrex/backend/routes/__tests__/metadata.e2e.ts
index dba844425..673f00de8 100644
--- a/platforms/yttrex/backend/routes/__tests__/metadata.e2e.ts
+++ b/platforms/yttrex/backend/routes/__tests__/metadata.e2e.ts
@@ -195,6 +195,79 @@ describe('Metadata API', () => {
       );
     });
 
+    it('succeeds with "video" metadata when filtering for "authorName"', async () => {
+      const total = 100;
+      const amount = 10;
+      const authorName = 'trex';
+
+      const videoMetadata = fc
+        .sample(VideoMetadataArb, total / 2)
+        .map((m, i) => ({
+          ...m,
+          authorName: i % 2 === 0 ? authorName : m.authorName,
+          savingTime: new Date(),
+        }));
+
+      const homeMetadata = fc.sample(HomeMetadataArb, total / 2).map((m) => ({
+        ...m,
+        savingTime: new Date(),
+      }));
+
+      const metadata = [...videoMetadata, ...homeMetadata];
+
+      await test.mongo3.insertMany(
+        test.mongo,
+        test.config.get('schema').metadata,
+        metadata
+      );
+
+      const expectedMetadata = videoMetadata
+        .filter(
+          (a, i) =>
+            a.savingTime.getTime() >
+              new Date(moment().startOf('day').toISOString()).getTime() &&
+            i % 2 === 0
+        )
+        .sort((a, b) => b.savingTime.getTime() - a.savingTime.getTime())
+        .slice(0, amount)
+        .map(({ publicKey, _id, experimentId, researchTag, ...m }: any) => {
+          return {
+            ...m,
+            id: m.id.substring(0, 20),
+            blang: m.blang ?? null,
+            supporter: utils.string2Food(publicKey),
+            clientTime: m.clientTime.toISOString(),
+            publicationTime: m.publicationTime.toISOString(),
+            savingTime: m.savingTime.toISOString(),
+            related: m.related.map(toRelated),
+          };
+        });
+
+      const { body } = await test.app
+        .get(`/api/v2/metadata`)
+        .query({
+          filter: {
+            nature: 'video',
+            authorName,
+          },
+          amount,
+        })
+        .expect(200);
+
+      expect(body.data.length).toBe(expectedMetadata.length);
+      expect(body.data).toMatchObject(expectedMetadata);
+
+      await test.mongo3.deleteMany(
+        test.mongo,
+        test.config.get('schema').metadata,
+        {
+          id: {
+            $in: metadata.map((m) => m.id),
+          },
+        }
+      );
+    });
+
     it('succeeds with metadata', async () => {
       const total = 100;
       const experimentId = fc.sample(fc.uuid(), 1)[0];
diff --git a/platforms/yttrex/backend/routes/metadata.ts b/platforms/yttrex/backend/routes/metadata.ts
index c0e9c2edf..ca7fc46a9 100644
--- a/platforms/yttrex/backend/routes/metadata.ts
+++ b/platforms/yttrex/backend/routes/metadata.ts
@@ -1,8 +1,8 @@
 import * as endpoints from '@shared/endpoints/helper';
+import { GetLogger } from '@shared/logger';
 import { v2 } from '@yttrex/shared/endpoints';
 import { ListMetadataResponse } from '@yttrex/shared/models/http/metadata/output/ListMetadata.output';
 import { ListMetadataQuery } from '@yttrex/shared/models/http/metadata/query/ListMetadata.query';
-import D from 'debug';
 import * as express from 'express';
 import _ from 'lodash';
 import moment from 'moment';
@@ -10,7 +10,7 @@ import automo from '../lib/automo';
 import CSV from '../lib/CSV';
 import * as utils from '../lib/utils';
 
-const debug = D('routes:metadata');
+const metadataLogger = GetLogger('routes:metadata');
 
 // This variables is used as cap in every readLimit below
 const PUBLIC_AMOUNT_ELEMS = 100;
@@ -23,7 +23,7 @@ const listMetadata = async (
     req
   ) as any as { query: ListMetadataQuery };
 
-  debug('Build metadata filter from query %O', query);
+  metadataLogger.debug('Build metadata filter from query %O', query);
 
   const {
     publicKey,
@@ -85,7 +85,7 @@ const listMetadata = async (
     filter.researchTag = researchTag;
   }
 
-  debug('Filtering metadata with %O (%d, %d)', filter, amount, skip);
+  metadataLogger.debug('Filtering metadata with %O (%d, %d)', filter, amount, skip);
 
   const metadata = await automo
     .getMetadataByFilter(filter, {
@@ -101,14 +101,14 @@ const listMetadata = async (
             id: id.substring(0, 20),
             researchTag: m.researchTag ?? undefined,
             experimentId: m.experimentId ?? undefined,
-            savingTime: m.savingTime.toISOString(),
-            clientTime: m.clientTime.toISOString(),
+            savingTime: m.savingTime?.toISOString(),
+            clientTime: m.clientTime?.toISOString(),
             supporter: utils.string2Food(publicKey),
           } as any)
       ),
     }));
 
-  debug(
+  metadataLogger.debug(
     'Returning %d evidences of %j available',
     _.size(metadata.data),
     metadata.totals
@@ -121,7 +121,7 @@ const listMetadata = async (
     filename += researchTag ? `-research_tag-${researchTag}` : '';
     filename += '-' + moment().format('YY-MM-DD') + '.csv';
 
-    debug('VideoCSV: produced %d bytes, returning %s', _.size(csv), filename);
+    metadataLogger.debug('VideoCSV: produced %d bytes, returning %s', _.size(csv), filename);
 
     // if (!_.size(csv)) return { text: 'Error, Zorry: 🤷' };
 
diff --git a/platforms/yttrex/extension/jest.config.js b/platforms/yttrex/extension/jest.config.js
index cf246548d..793059f85 100644
--- a/platforms/yttrex/extension/jest.config.js
+++ b/platforms/yttrex/extension/jest.config.js
@@ -9,7 +9,7 @@ const tsPaths = pathsToModuleNameMapper(tsConfig.compilerOptions.paths, {
 const moduleNameMapper = {
   ...tsPaths,
   '\\.(svg|ttf)$': '<rootDir>/__mocks__/fileMock.js',
-  '\\.(css)$': '<rootDir>/__mocks__/styleMock.js',
+  '\\.(css)$': '<rootDir>../../../__mocks__/styleMock.js',
 };
 
 /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
diff --git a/platforms/yttrex/extension/src/popup.tsx b/platforms/yttrex/extension/src/popup.tsx
index f35af724d..fcdf9e19f 100644
--- a/platforms/yttrex/extension/src/popup.tsx
+++ b/platforms/yttrex/extension/src/popup.tsx
@@ -1,17 +1,19 @@
-import { renderPopup } from '@shared/extension/popup';
-import config from '@shared/extension/config';
-import * as React from 'react';
 import {
-  StayCurrentLandscape as StayCurrentLandscapeIcon,
-  OndemandVideo as OndemandVideoIcon,
   AccountBox as AccountBoxIcon,
+  OndemandVideo as OndemandVideoIcon,
   SearchOutlined,
+  StayCurrentLandscape as StayCurrentLandscapeIcon,
 } from '@material-ui/icons';
+import config from '@shared/extension/config';
+import { renderPopup } from '@shared/extension/popup';
+import * as React from 'react';
+import ytHub from './handlers/hub';
 
 renderPopup({
   platform: 'YouTube',
   platformURL: 'https://youtube.com',
   logo: '/yttrex-logo.png',
+  hub: ytHub,
   settings: {
     enabled: {
       researchTag: true,
diff --git a/platforms/yttrex/shared/src/arbitraries/Metadata.arb.ts b/platforms/yttrex/shared/src/arbitraries/Metadata.arb.ts
index 694bab7c5..199672bb1 100644
--- a/platforms/yttrex/shared/src/arbitraries/Metadata.arb.ts
+++ b/platforms/yttrex/shared/src/arbitraries/Metadata.arb.ts
@@ -1,13 +1,13 @@
 import { fc } from '@shared/test';
 import { propsOmit } from '@shared/utils/arbitrary.utils';
+import { subDays } from 'date-fns';
+import { getArbitrary } from 'fast-check-io-ts';
+import * as t from 'io-ts';
 import {
   HomeMetadata,
   ParsedInfo,
   VideoMetadata,
 } from '../models/metadata/Metadata';
-import { subDays } from 'date-fns';
-import { getArbitrary } from 'fast-check-io-ts';
-import * as t from 'io-ts';
 
 export const ParsedInfoArb = getArbitrary(
   t.strict({
diff --git a/platforms/yttrex/shared/src/models/http/metadata/query/ListMetadata.query.ts b/platforms/yttrex/shared/src/models/http/metadata/query/ListMetadata.query.ts
index 45919224e..41ac2c3ad 100644
--- a/platforms/yttrex/shared/src/models/http/metadata/query/ListMetadata.query.ts
+++ b/platforms/yttrex/shared/src/models/http/metadata/query/ListMetadata.query.ts
@@ -26,7 +26,7 @@ export const ListHomeMetadataQuery = t.type(
     nature: Nature.HomeNatureType,
     login: t.union([BooleanFromString, t.undefined], 'login?'),
   },
-  'ListSearchMetadataQuery'
+  'ListHomeMetadataQuery'
 );
 
 export const ListMetadataQuery = t.partial(
diff --git a/platforms/yttrex/shared/src/models/metadata/VideoMetadata.ts b/platforms/yttrex/shared/src/models/metadata/VideoMetadata.ts
index 4ef92b16f..59a14d753 100644
--- a/platforms/yttrex/shared/src/models/metadata/VideoMetadata.ts
+++ b/platforms/yttrex/shared/src/models/metadata/VideoMetadata.ts
@@ -3,6 +3,7 @@ import { date } from 'io-ts-types/lib/date';
 import { VideoN } from '../Nature';
 import { YTMetadataBase } from './MetadataBase';
 import { ParsedInfo } from './VideoResult';
+import { DateFromISOString } from 'io-ts-types/lib/DateFromISOString';
 
 export const VideoMetadata = t.strict(
   {
@@ -14,7 +15,7 @@ export const VideoMetadata = t.strict(
     authorSource: t.string,
     title: t.string,
     publicationString: t.string,
-    publicationTime: t.union([date, t.null]),
+    publicationTime: t.union([DateFromISOString, date, t.null]),
     likeInfo: t.strict(
       {
         watchedLikes: t.union([t.number, t.null]),
diff --git a/platforms/yttrex/shared/src/models/metadata/VideoResult.ts b/platforms/yttrex/shared/src/models/metadata/VideoResult.ts
index c2e63b226..a3a85d5c9 100644
--- a/platforms/yttrex/shared/src/models/metadata/VideoResult.ts
+++ b/platforms/yttrex/shared/src/models/metadata/VideoResult.ts
@@ -13,17 +13,17 @@ export const ParsedInfo = t.strict(
     verified: t.union([t.boolean, t.null]),
     // foryou: t.union([t.string, t.undefined, t.null]),
     parameter: t.union([t.string, t.undefined]),
-    params: t.union([t.record(t.string, t.string), t.undefined]),
+    params: t.union([t.record(t.string, t.string), t.undefined, t.null]),
     title: t.union([t.string, t.undefined]),
     recommendedHref: t.string,
     recommendedTitle: t.union([t.string, t.undefined]),
     recommendedSource: t.union([t.string, t.null, t.undefined]),
     recommendedLength: t.union([t.number, t.undefined]),
-    recommendedDisplayL: t.union([t.string, t.undefined]),
+    recommendedDisplayL: t.union([t.string, t.undefined, t.null]),
     // moment duration as string
     recommendedPubTime: t.union([t.any, t.undefined]),
-    publicationTime: t.union([DateFromISOString, t.undefined]),
-    recommendedThumbnail: t.union([t.string, t.undefined]),
+    publicationTime: t.union([DateFromISOString, t.undefined, t.null]),
+    recommendedThumbnail: t.union([t.string, t.undefined, t.null]),
     recommendedViews: t.union([t.number, t.undefined]),
     views: t.union([t.number, t.undefined]),
   },
diff --git a/yarn.lock b/yarn.lock
index 7bc445acd..5a94300ef 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2679,7 +2679,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.10.3, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.14.5, @babel/runtime@npm:^7.14.8, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.17.2, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.10.3, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.14.5, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.17.2, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
   version: 7.19.0
   resolution: "@babel/runtime@npm:7.19.0"
   dependencies:
@@ -2688,6 +2688,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.18.9, @babel/runtime@npm:^7.20.1":
+  version: 7.20.1
+  resolution: "@babel/runtime@npm:7.20.1"
+  dependencies:
+    regenerator-runtime: ^0.13.10
+  checksum: 00567a333d3357925742a6f5e39394dcc0af6e6029103fe188158bf7ae8b0b3ee3c6c0f68fccc217f0a6cfa455f6be252298baf56b3f5ff37b34313b170cd9f6
+  languageName: node
+  linkType: hard
+
 "@babel/runtime@npm:~7.5.4":
   version: 7.5.5
   resolution: "@babel/runtime@npm:7.5.5"
@@ -4807,36 +4816,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@material-ui/utils@npm:^5.0.0-alpha.14":
-  version: 5.0.0-beta.5
-  resolution: "@material-ui/utils@npm:5.0.0-beta.5"
-  dependencies:
-    "@babel/runtime": ^7.14.8
-    "@types/prop-types": ^15.7.4
-    "@types/react-is": ^16.7.1 || ^17.0.0
-    prop-types: ^15.7.2
-    react-is: ^17.0.2
-  peerDependencies:
-    react: ^17.0.2
-  checksum: 397d318861fb315ff9814e1878fdd0259f3c6cb6396b0500b5c0e13b6eeeb3a88c2ee03b9a731b57f75b29469a7bfe412010e75b7bd251a941bb7f078abfbaae
-  languageName: node
-  linkType: hard
-
-"@material-ui/x-license@npm:^4.0.0-alpha.37":
-  version: 4.0.0-alpha.37
-  resolution: "@material-ui/x-license@npm:4.0.0-alpha.37"
-  dependencies:
-    "@material-ui/utils": ^5.0.0-alpha.14
-    esm: ^3.2.25
-    yargs: ^17.0.1
-  peerDependencies:
-    react: ^17.0.0
-  bin:
-    licensegen: bin/license-gen-script.js
-  checksum: 71861879e4411c60bef9ed965b2d9341e7055b6a2eff65e407013a90d3bfcf541c78d604f32781272cb0449fd9d4567bf97fdb27b0d91ff625ed3d33cf5955d8
-  languageName: node
-  linkType: hard
-
 "@mdx-js/mdx@npm:^1.6.22":
   version: 1.6.22
   resolution: "@mdx-js/mdx@npm:1.6.22"
@@ -5063,7 +5042,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/utils@npm:^5.4.1, @mui/utils@npm:^5.8.6":
+"@mui/utils@npm:^5.10.3":
+  version: 5.10.14
+  resolution: "@mui/utils@npm:5.10.14"
+  dependencies:
+    "@babel/runtime": ^7.20.1
+    "@types/prop-types": ^15.7.5
+    "@types/react-is": ^16.7.1 || ^17.0.0
+    prop-types: ^15.8.1
+    react-is: ^18.2.0
+  peerDependencies:
+    react: ^17.0.0 || ^18.0.0
+  checksum: 8b30b0a2d2d70672c38543566ba36fdf531b9c5ad6daf89f4b6ae84da0862ad4e7822d5465e016dfc719e12221a9d0942b884a0d05ea89349308bee81d58574f
+  languageName: node
+  linkType: hard
+
+"@mui/utils@npm:^5.8.6":
   version: 5.8.6
   resolution: "@mui/utils@npm:5.8.6"
   dependencies:
@@ -5078,13 +5072,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/x-data-grid@npm:^5.11.1":
-  version: 5.12.3
-  resolution: "@mui/x-data-grid@npm:5.12.3"
+"@mui/x-data-grid@npm:^5.17.11":
+  version: 5.17.11
+  resolution: "@mui/x-data-grid@npm:5.17.11"
   dependencies:
-    "@babel/runtime": ^7.17.2
-    "@mui/utils": ^5.4.1
-    clsx: ^1.1.1
+    "@babel/runtime": ^7.18.9
+    "@mui/utils": ^5.10.3
+    clsx: ^1.2.1
     prop-types: ^15.8.1
     reselect: ^4.1.6
   peerDependencies:
@@ -5092,7 +5086,7 @@ __metadata:
     "@mui/system": ^5.4.1
     react: ^17.0.2 || ^18.0.0
     react-dom: ^17.0.2 || ^18.0.0
-  checksum: afe320b06aaf70fa8935f7e16f99a664e949d1f9d131d5dbee26fcb2ecc6f1c754cec8445fec7a53925ca9f1242949c70b7786b3f5c79128dac9993ae7aaa9b9
+  checksum: ea64d67e6b3d07b54261d89b42f5e6bc275744c646213c249c1d6791770aa50b182f2b76fc2db983845e3f3a2ce31ef6fac89adffad8e6cb4c4f4e1c33e82d4e
   languageName: node
   linkType: hard
 
@@ -5540,9 +5534,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-theming/storybook-addon@npm:^1.1.7":
-  version: 1.1.7
-  resolution: "@react-theming/storybook-addon@npm:1.1.7"
+"@react-theming/storybook-addon@npm:^1.1.10":
+  version: 1.1.10
+  resolution: "@react-theming/storybook-addon@npm:1.1.10"
   dependencies:
     "@codemirror/theme-one-dark": 0.19.0
     "@focus-reactive/react-yaml": ^1.1.2
@@ -5557,7 +5551,7 @@ __metadata:
     "@storybook/react": "*"
     "@storybook/theming": "*"
     react: "*"
-  checksum: dc8ec3a7eb0a6fe1ff10197183adb93ba39bbaadf0e800181af43c8ab7c9056fa14d8a1334f08c7aaaa85c946688562235e5a608ec20ac00259031b428dc2617
+  checksum: cd0557c01b7e6c90a836c201e5a47cff9aa6a1d46ee046af1386361d30972669ea4acb8def6d511ccdbb16b5f11a06faad3dfe82077affb64f028a625c8633e7
   languageName: node
   linkType: hard
 
@@ -5723,17 +5717,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-actions@npm:6.5.13, @storybook/addon-actions@npm:^6.5.13":
-  version: 6.5.13
-  resolution: "@storybook/addon-actions@npm:6.5.13"
+"@storybook/addon-actions@npm:6.5.14, @storybook/addon-actions@npm:^6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/addon-actions@npm:6.5.14"
   dependencies:
-    "@storybook/addons": 6.5.13
-    "@storybook/api": 6.5.13
-    "@storybook/client-logger": 6.5.13
-    "@storybook/components": 6.5.13
-    "@storybook/core-events": 6.5.13
+    "@storybook/addons": 6.5.14
+    "@storybook/api": 6.5.14
+    "@storybook/client-logger": 6.5.14
+    "@storybook/components": 6.5.14
+    "@storybook/core-events": 6.5.14
     "@storybook/csf": 0.0.2--canary.4566f4d.1
-    "@storybook/theming": 6.5.13
+    "@storybook/theming": 6.5.14
     core-js: ^3.8.2
     fast-deep-equal: ^3.1.3
     global: ^4.4.0
@@ -5754,21 +5748,21 @@ __metadata:
       optional: true
     react-dom:
       optional: true
-  checksum: 2679174b1467281860cd6f11fac5ba505e44629eb11ee90713d1c954569cfb54d80aa822a0ed1be2f92f11ca62889fec3dca96f61b89cf238503e0cea4b1db9a
+  checksum: 536a5afb4b9d2fbe6b250657deb36d5ef4eba128101fbe69bf00f9c363859f61e2337a460d0a724607ad48f54713bcc40ed54253df3fee4bdb23baf93a58defd
   languageName: node
   linkType: hard
 
-"@storybook/addon-backgrounds@npm:6.5.13":
-  version: 6.5.13
-  resolution: "@storybook/addon-backgrounds@npm:6.5.13"
+"@storybook/addon-backgrounds@npm:6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/addon-backgrounds@npm:6.5.14"
   dependencies:
-    "@storybook/addons": 6.5.13
-    "@storybook/api": 6.5.13
-    "@storybook/client-logger": 6.5.13
-    "@storybook/components": 6.5.13
-    "@storybook/core-events": 6.5.13
+    "@storybook/addons": 6.5.14
+    "@storybook/api": 6.5.14
+    "@storybook/client-logger": 6.5.14
+    "@storybook/components": 6.5.14
+    "@storybook/core-events": 6.5.14
     "@storybook/csf": 0.0.2--canary.4566f4d.1
-    "@storybook/theming": 6.5.13
+    "@storybook/theming": 6.5.14
     core-js: ^3.8.2
     global: ^4.4.0
     memoizerific: ^1.11.3
@@ -5783,23 +5777,23 @@ __metadata:
       optional: true
     react-dom:
       optional: true
-  checksum: 1b18255e0d8dceca56b8d6cf672506176eedad3809f11879d9754652538bf004f90637c0bf557de5e7bc24d5db5410da79e61f131493cb87b27340611cb31cf5
+  checksum: 10e7833578251d95410253bcd7d352975a73ed62ba8682dbbf850c53344813f8c3e67da04af932829e1a751fbc0e0648fee79815eb4db06c5de71afc51e4d416
   languageName: node
   linkType: hard
 
-"@storybook/addon-controls@npm:6.5.13":
-  version: 6.5.13
-  resolution: "@storybook/addon-controls@npm:6.5.13"
+"@storybook/addon-controls@npm:6.5.14, @storybook/addon-controls@npm:^6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/addon-controls@npm:6.5.14"
   dependencies:
-    "@storybook/addons": 6.5.13
-    "@storybook/api": 6.5.13
-    "@storybook/client-logger": 6.5.13
-    "@storybook/components": 6.5.13
-    "@storybook/core-common": 6.5.13
+    "@storybook/addons": 6.5.14
+    "@storybook/api": 6.5.14
+    "@storybook/client-logger": 6.5.14
+    "@storybook/components": 6.5.14
+    "@storybook/core-common": 6.5.14
     "@storybook/csf": 0.0.2--canary.4566f4d.1
-    "@storybook/node-logger": 6.5.13
-    "@storybook/store": 6.5.13
-    "@storybook/theming": 6.5.13
+    "@storybook/node-logger": 6.5.14
+    "@storybook/store": 6.5.14
+    "@storybook/theming": 6.5.14
     core-js: ^3.8.2
     lodash: ^4.17.21
     ts-dedent: ^2.0.0
@@ -5811,7 +5805,7 @@ __metadata:
       optional: true
     react-dom:
       optional: true
-  checksum: a4f86332686b5681366ad1f1eebb50cb9939ce3424ade64c0043b94827df15a34da0190101c8dc9a2b4b9af67fafd9d3fb50a5b98ff7a24fed6a37a2f8f37f27
+  checksum: cebb9b33f944e9492527f4fd2bdfe73aa0f2737d53a36d7ea086499adc568ba06958e69c75191d5b266063ece513d5f7a484ec1da8f411f326aa4b022cce7ea0
   languageName: node
   linkType: hard
 
@@ -5834,28 +5828,28 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-docs@npm:6.5.13":
-  version: 6.5.13
-  resolution: "@storybook/addon-docs@npm:6.5.13"
+"@storybook/addon-docs@npm:6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/addon-docs@npm:6.5.14"
   dependencies:
     "@babel/plugin-transform-react-jsx": ^7.12.12
     "@babel/preset-env": ^7.12.11
     "@jest/transform": ^26.6.2
     "@mdx-js/react": ^1.6.22
-    "@storybook/addons": 6.5.13
-    "@storybook/api": 6.5.13
-    "@storybook/components": 6.5.13
-    "@storybook/core-common": 6.5.13
-    "@storybook/core-events": 6.5.13
+    "@storybook/addons": 6.5.14
+    "@storybook/api": 6.5.14
+    "@storybook/components": 6.5.14
+    "@storybook/core-common": 6.5.14
+    "@storybook/core-events": 6.5.14
     "@storybook/csf": 0.0.2--canary.4566f4d.1
-    "@storybook/docs-tools": 6.5.13
+    "@storybook/docs-tools": 6.5.14
     "@storybook/mdx1-csf": ^0.0.1
-    "@storybook/node-logger": 6.5.13
-    "@storybook/postinstall": 6.5.13
-    "@storybook/preview-web": 6.5.13
-    "@storybook/source-loader": 6.5.13
-    "@storybook/store": 6.5.13
-    "@storybook/theming": 6.5.13
+    "@storybook/node-logger": 6.5.14
+    "@storybook/postinstall": 6.5.14
+    "@storybook/preview-web": 6.5.14
+    "@storybook/source-loader": 6.5.14
+    "@storybook/store": 6.5.14
+    "@storybook/theming": 6.5.14
     babel-loader: ^8.0.0
     core-js: ^3.8.2
     fast-deep-equal: ^3.1.3
@@ -5877,26 +5871,26 @@ __metadata:
       optional: true
     react-dom:
       optional: true
-  checksum: 41755593a28497172d18efa623d6dd3054d5fe867f2a4bf02be3875a0d22ca5cf10f5bf3946c4fa6b392f955952aaf8c90b4ae88d0622a1e236c7333b58902c3
-  languageName: node
-  linkType: hard
-
-"@storybook/addon-essentials@npm:^6.5.13":
-  version: 6.5.13
-  resolution: "@storybook/addon-essentials@npm:6.5.13"
-  dependencies:
-    "@storybook/addon-actions": 6.5.13
-    "@storybook/addon-backgrounds": 6.5.13
-    "@storybook/addon-controls": 6.5.13
-    "@storybook/addon-docs": 6.5.13
-    "@storybook/addon-measure": 6.5.13
-    "@storybook/addon-outline": 6.5.13
-    "@storybook/addon-toolbars": 6.5.13
-    "@storybook/addon-viewport": 6.5.13
-    "@storybook/addons": 6.5.13
-    "@storybook/api": 6.5.13
-    "@storybook/core-common": 6.5.13
-    "@storybook/node-logger": 6.5.13
+  checksum: 1fbeea31f1544a6ebb89a398c72de1a93d70a62f2cc5070f3c1f44bc0db4c192be9aa2c91e9fdceab76b4f59f21da7ac8ba6114f3ec259b4795c46e77e5aa992
+  languageName: node
+  linkType: hard
+
+"@storybook/addon-essentials@npm:^6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/addon-essentials@npm:6.5.14"
+  dependencies:
+    "@storybook/addon-actions": 6.5.14
+    "@storybook/addon-backgrounds": 6.5.14
+    "@storybook/addon-controls": 6.5.14
+    "@storybook/addon-docs": 6.5.14
+    "@storybook/addon-measure": 6.5.14
+    "@storybook/addon-outline": 6.5.14
+    "@storybook/addon-toolbars": 6.5.14
+    "@storybook/addon-viewport": 6.5.14
+    "@storybook/addons": 6.5.14
+    "@storybook/api": 6.5.14
+    "@storybook/core-common": 6.5.14
+    "@storybook/node-logger": 6.5.14
     core-js: ^3.8.2
     regenerator-runtime: ^0.13.7
     ts-dedent: ^2.0.0
@@ -5937,24 +5931,24 @@ __metadata:
       optional: true
     webpack:
       optional: true
-  checksum: a7b1b34c7fbf0d863cf8dab3160cc267516cbcbeb155c4f91aab2c1d6005b23d5662a9104be0d733476ba4a0c8328ea899ae46bf55a9bddda5ce41996737b358
+  checksum: 2f0b5d67e16451dfab00f881b0edf0436f3571ba2a74a91c09eb3a267154463adc5a93c004bdac360bf0d511c5ff58f90e3b06707e13b21299fc7725acd684f9
   languageName: node
   linkType: hard
 
-"@storybook/addon-interactions@npm:^6.5.13":
-  version: 6.5.13
-  resolution: "@storybook/addon-interactions@npm:6.5.13"
+"@storybook/addon-interactions@npm:^6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/addon-interactions@npm:6.5.14"
   dependencies:
     "@devtools-ds/object-inspector": ^1.1.2
-    "@storybook/addons": 6.5.13
-    "@storybook/api": 6.5.13
-    "@storybook/client-logger": 6.5.13
-    "@storybook/components": 6.5.13
-    "@storybook/core-common": 6.5.13
-    "@storybook/core-events": 6.5.13
+    "@storybook/addons": 6.5.14
+    "@storybook/api": 6.5.14
+    "@storybook/client-logger": 6.5.14
+    "@storybook/components": 6.5.14
+    "@storybook/core-common": 6.5.14
+    "@storybook/core-events": 6.5.14
     "@storybook/csf": 0.0.2--canary.4566f4d.1
-    "@storybook/instrumenter": 6.5.13
-    "@storybook/theming": 6.5.13
+    "@storybook/instrumenter": 6.5.14
+    "@storybook/theming": 6.5.14
     core-js: ^3.8.2
     global: ^4.4.0
     jest-mock: ^27.0.6
@@ -5968,19 +5962,19 @@ __metadata:
       optional: true
     react-dom:
       optional: true
-  checksum: 5c940dc55b3bde6432f392f456785028c73c2dd893271b8efcf2ad2b30d10432666eec1c728b95bf94a81a967ac5860da2072dea013062e0eb86d6c783455dd3
+  checksum: 50f5cd42582da3ee7f822362207adfd56b5c8a0706f7407f064973954c874933b02374a606a2d4f542a06791d2016937208f52c5131f576a3c2a6b84f1fa67c2
   languageName: node
   linkType: hard
 
-"@storybook/addon-links@npm:^6.5.13":
-  version: 6.5.13
-  resolution: "@storybook/addon-links@npm:6.5.13"
+"@storybook/addon-links@npm:^6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/addon-links@npm:6.5.14"
   dependencies:
-    "@storybook/addons": 6.5.13
-    "@storybook/client-logger": 6.5.13
-    "@storybook/core-events": 6.5.13
+    "@storybook/addons": 6.5.14
+    "@storybook/client-logger": 6.5.14
+    "@storybook/core-events": 6.5.14
     "@storybook/csf": 0.0.2--canary.4566f4d.1
-    "@storybook/router": 6.5.13
+    "@storybook/router": 6.5.14
     "@types/qs": ^6.9.5
     core-js: ^3.8.2
     global: ^4.4.0
@@ -5996,19 +5990,19 @@ __metadata:
       optional: true
     react-dom:
       optional: true
-  checksum: 0bbe14652320c77dbcbcd0a6f45e4776de35475cca43b9825c36424e6ccc250fac4a172cdf01304debdc3c93d74ad2ea3bafb8a752e9a52a5e860f5bb9a397c2
+  checksum: 7dc537aab36fd80ba704b8618c24aa0b9f59d6c28502dd43c01e7dae4194fbce37a95cb7797c4b52547d9662bf9619cd0901f946bddcec7580986df2e38da574
   languageName: node
   linkType: hard
 
-"@storybook/addon-measure@npm:6.5.13":
-  version: 6.5.13
-  resolution: "@storybook/addon-measure@npm:6.5.13"
+"@storybook/addon-measure@npm:6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/addon-measure@npm:6.5.14"
   dependencies:
-    "@storybook/addons": 6.5.13
-    "@storybook/api": 6.5.13
-    "@storybook/client-logger": 6.5.13
-    "@storybook/components": 6.5.13
-    "@storybook/core-events": 6.5.13
+    "@storybook/addons": 6.5.14
+    "@storybook/api": 6.5.14
+    "@storybook/client-logger": 6.5.14
+    "@storybook/components": 6.5.14
+    "@storybook/core-events": 6.5.14
     "@storybook/csf": 0.0.2--canary.4566f4d.1
     core-js: ^3.8.2
     global: ^4.4.0
@@ -6020,19 +6014,19 @@ __metadata:
       optional: true
     react-dom:
       optional: true
-  checksum: 4bf1823f83a51e773cb941329bd1e637fba7d84c238a2af442eba4ab9950bda2d199bfa18194c62d7e25891166d8c89bf130303fc6c94d5aafa2eb0aaaeafa27
+  checksum: e6adcde7440de449836df3c334cdd7c41a01030d64a46c7afee0885ab18725dd71a86ff0934fab1845463d9ad7a8bc3d5007be83fbe63e504df9e12c35dbb5a5
   languageName: node
   linkType: hard
 
-"@storybook/addon-outline@npm:6.5.13":
-  version: 6.5.13
-  resolution: "@storybook/addon-outline@npm:6.5.13"
+"@storybook/addon-outline@npm:6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/addon-outline@npm:6.5.14"
   dependencies:
-    "@storybook/addons": 6.5.13
-    "@storybook/api": 6.5.13
-    "@storybook/client-logger": 6.5.13
-    "@storybook/components": 6.5.13
-    "@storybook/core-events": 6.5.13
+    "@storybook/addons": 6.5.14
+    "@storybook/api": 6.5.14
+    "@storybook/client-logger": 6.5.14
+    "@storybook/components": 6.5.14
+    "@storybook/core-events": 6.5.14
     "@storybook/csf": 0.0.2--canary.4566f4d.1
     core-js: ^3.8.2
     global: ^4.4.0
@@ -6046,19 +6040,19 @@ __metadata:
       optional: true
     react-dom:
       optional: true
-  checksum: f9ea9278ba7dd118b9db2dc8b695d661d2d289d4e52f5af02ba0e30f13245043f0c565a71925d8111694a3a02e6b8b459fbd42786fe794895cdb5c8345adf5f5
+  checksum: e38d860cefe9b408cf4f6c06292e348f07ecc95650acad0f52c0c81233be3c5fb73a85ffeb62c4af00b5e633099016d1890bffc91e3c06fcd22a80b4675f1b3d
   languageName: node
   linkType: hard
 
-"@storybook/addon-toolbars@npm:6.5.13":
-  version: 6.5.13
-  resolution: "@storybook/addon-toolbars@npm:6.5.13"
+"@storybook/addon-toolbars@npm:6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/addon-toolbars@npm:6.5.14"
   dependencies:
-    "@storybook/addons": 6.5.13
-    "@storybook/api": 6.5.13
-    "@storybook/client-logger": 6.5.13
-    "@storybook/components": 6.5.13
-    "@storybook/theming": 6.5.13
+    "@storybook/addons": 6.5.14
+    "@storybook/api": 6.5.14
+    "@storybook/client-logger": 6.5.14
+    "@storybook/components": 6.5.14
+    "@storybook/theming": 6.5.14
     core-js: ^3.8.2
     regenerator-runtime: ^0.13.7
   peerDependencies:
@@ -6069,20 +6063,20 @@ __metadata:
       optional: true
     react-dom:
       optional: true
-  checksum: ec85023ffda5bdefe96cf6d6954c86fba67be190bb31cf3bb777d0a2493d606c78bed84d4bb19611d4114a35ba94f1efcc8331bc6032e0f9376a6fb797dc3ec2
+  checksum: 99e39310c2c31b1b15290f5e8aea66a6b558d3e0896da58480599ba587ec5f5538a0abd57431906246c3b5d8ec5a3359dcedc17130ce6b561b5c103f402f0a23
   languageName: node
   linkType: hard
 
-"@storybook/addon-viewport@npm:6.5.13":
-  version: 6.5.13
-  resolution: "@storybook/addon-viewport@npm:6.5.13"
+"@storybook/addon-viewport@npm:6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/addon-viewport@npm:6.5.14"
   dependencies:
-    "@storybook/addons": 6.5.13
-    "@storybook/api": 6.5.13
-    "@storybook/client-logger": 6.5.13
-    "@storybook/components": 6.5.13
-    "@storybook/core-events": 6.5.13
-    "@storybook/theming": 6.5.13
+    "@storybook/addons": 6.5.14
+    "@storybook/api": 6.5.14
+    "@storybook/client-logger": 6.5.14
+    "@storybook/components": 6.5.14
+    "@storybook/core-events": 6.5.14
+    "@storybook/theming": 6.5.14
     core-js: ^3.8.2
     global: ^4.4.0
     memoizerific: ^1.11.3
@@ -6096,7 +6090,7 @@ __metadata:
       optional: true
     react-dom:
       optional: true
-  checksum: ff602c8080c26a8513f76b9ba2cb2e287e31df598a5235aee8fa8c0337bb7e8e7d65620d03f2aa452801653c41d35ddf9dbfdb6a26d4f2b4d0cc7cff7b580915
+  checksum: 66f66715d390766db9d2a0b66ae89a8763c3fe43e2479b9a936c26849a6bf253c35dfbb3040c8bd11add56a0bbfdca5075e3d60d96aa0f054674d92a4f6e33a8
   languageName: node
   linkType: hard
 
@@ -6122,6 +6116,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/addons@npm:6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/addons@npm:6.5.14"
+  dependencies:
+    "@storybook/api": 6.5.14
+    "@storybook/channels": 6.5.14
+    "@storybook/client-logger": 6.5.14
+    "@storybook/core-events": 6.5.14
+    "@storybook/csf": 0.0.2--canary.4566f4d.1
+    "@storybook/router": 6.5.14
+    "@storybook/theming": 6.5.14
+    "@types/webpack-env": ^1.16.0
+    core-js: ^3.8.2
+    global: ^4.4.0
+    regenerator-runtime: ^0.13.7
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 99d06641bab06a3cc2821f309589d062c0efd8707b451ae24017449034da408bfddce3beda1ccdedadf59669d7d13348bee127f6fd4fc057200c84ff43288312
+  languageName: node
+  linkType: hard
+
 "@storybook/api@npm:6.5.13":
   version: 6.5.13
   resolution: "@storybook/api@npm:6.5.13"
@@ -6150,27 +6166,55 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/builder-webpack4@npm:6.5.13":
-  version: 6.5.13
-  resolution: "@storybook/builder-webpack4@npm:6.5.13"
+"@storybook/api@npm:6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/api@npm:6.5.14"
+  dependencies:
+    "@storybook/channels": 6.5.14
+    "@storybook/client-logger": 6.5.14
+    "@storybook/core-events": 6.5.14
+    "@storybook/csf": 0.0.2--canary.4566f4d.1
+    "@storybook/router": 6.5.14
+    "@storybook/semver": ^7.3.2
+    "@storybook/theming": 6.5.14
+    core-js: ^3.8.2
+    fast-deep-equal: ^3.1.3
+    global: ^4.4.0
+    lodash: ^4.17.21
+    memoizerific: ^1.11.3
+    regenerator-runtime: ^0.13.7
+    store2: ^2.12.0
+    telejson: ^6.0.8
+    ts-dedent: ^2.0.0
+    util-deprecate: ^1.0.2
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 0d421c3211a49cb8910dea647b898edd60af79755108ed321626a8fc134713dd1b018c830f15c2fc6c863f0528b571c2e2b34bb79df3c2f43497f5ab36fa9bbf
+  languageName: node
+  linkType: hard
+
+"@storybook/builder-webpack4@npm:6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/builder-webpack4@npm:6.5.14"
   dependencies:
     "@babel/core": ^7.12.10
-    "@storybook/addons": 6.5.13
-    "@storybook/api": 6.5.13
-    "@storybook/channel-postmessage": 6.5.13
-    "@storybook/channels": 6.5.13
-    "@storybook/client-api": 6.5.13
-    "@storybook/client-logger": 6.5.13
-    "@storybook/components": 6.5.13
-    "@storybook/core-common": 6.5.13
-    "@storybook/core-events": 6.5.13
-    "@storybook/node-logger": 6.5.13
-    "@storybook/preview-web": 6.5.13
-    "@storybook/router": 6.5.13
+    "@storybook/addons": 6.5.14
+    "@storybook/api": 6.5.14
+    "@storybook/channel-postmessage": 6.5.14
+    "@storybook/channels": 6.5.14
+    "@storybook/client-api": 6.5.14
+    "@storybook/client-logger": 6.5.14
+    "@storybook/components": 6.5.14
+    "@storybook/core-common": 6.5.14
+    "@storybook/core-events": 6.5.14
+    "@storybook/node-logger": 6.5.14
+    "@storybook/preview-web": 6.5.14
+    "@storybook/router": 6.5.14
     "@storybook/semver": ^7.3.2
-    "@storybook/store": 6.5.13
-    "@storybook/theming": 6.5.13
-    "@storybook/ui": 6.5.13
+    "@storybook/store": 6.5.14
+    "@storybook/theming": 6.5.14
+    "@storybook/ui": 6.5.14
     "@types/node": ^14.0.10 || ^16.0.0
     "@types/webpack": ^4.41.26
     autoprefixer: ^9.8.6
@@ -6207,30 +6251,30 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: a95fea3951479d7724155a2ddbf2b04a8bfc0e7fddbf8415caed508b94ad71f7dc8d5d25464061ef26f3b4670f49f6ed40198b48b3f646d7af17d8daee5e89cb
+  checksum: 16749d2d03b82e43e6b0fea02ebd4b63ac961229e4203cb371f36f11a9cd0a484d9bef73ee443053e09594ba7a7f2311470ade0e5a246b6d9345d1c7cc7b83b0
   languageName: node
   linkType: hard
 
-"@storybook/builder-webpack5@npm:^6.5.13":
-  version: 6.5.13
-  resolution: "@storybook/builder-webpack5@npm:6.5.13"
+"@storybook/builder-webpack5@npm:^6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/builder-webpack5@npm:6.5.14"
   dependencies:
     "@babel/core": ^7.12.10
-    "@storybook/addons": 6.5.13
-    "@storybook/api": 6.5.13
-    "@storybook/channel-postmessage": 6.5.13
-    "@storybook/channels": 6.5.13
-    "@storybook/client-api": 6.5.13
-    "@storybook/client-logger": 6.5.13
-    "@storybook/components": 6.5.13
-    "@storybook/core-common": 6.5.13
-    "@storybook/core-events": 6.5.13
-    "@storybook/node-logger": 6.5.13
-    "@storybook/preview-web": 6.5.13
-    "@storybook/router": 6.5.13
+    "@storybook/addons": 6.5.14
+    "@storybook/api": 6.5.14
+    "@storybook/channel-postmessage": 6.5.14
+    "@storybook/channels": 6.5.14
+    "@storybook/client-api": 6.5.14
+    "@storybook/client-logger": 6.5.14
+    "@storybook/components": 6.5.14
+    "@storybook/core-common": 6.5.14
+    "@storybook/core-events": 6.5.14
+    "@storybook/node-logger": 6.5.14
+    "@storybook/preview-web": 6.5.14
+    "@storybook/router": 6.5.14
     "@storybook/semver": ^7.3.2
-    "@storybook/store": 6.5.13
-    "@storybook/theming": 6.5.13
+    "@storybook/store": 6.5.14
+    "@storybook/theming": 6.5.14
     "@types/node": ^14.0.10 || ^16.0.0
     babel-loader: ^8.0.0
     babel-plugin-named-exports-order: ^0.0.2
@@ -6259,35 +6303,35 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: f980ab5c832bac9584f80eb0229934bb58ceb4cf24f756043acea4cb397f52f7af49c1fd53ac897aefb5ffc9c808bcb8a0c4867afd2c2a21b7ba2f0a56ae0089
+  checksum: 3aa60285baa51b3249b43b2fde92100ad24a5f383354b0e72a7915125f25386ace3e69a8718fb5baafc7cf8deca9e005c4ce0a9b356a1ca7016abe2254466115
   languageName: node
   linkType: hard
 
-"@storybook/channel-postmessage@npm:6.5.13":
-  version: 6.5.13
-  resolution: "@storybook/channel-postmessage@npm:6.5.13"
+"@storybook/channel-postmessage@npm:6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/channel-postmessage@npm:6.5.14"
   dependencies:
-    "@storybook/channels": 6.5.13
-    "@storybook/client-logger": 6.5.13
-    "@storybook/core-events": 6.5.13
+    "@storybook/channels": 6.5.14
+    "@storybook/client-logger": 6.5.14
+    "@storybook/core-events": 6.5.14
     core-js: ^3.8.2
     global: ^4.4.0
     qs: ^6.10.0
     telejson: ^6.0.8
-  checksum: 8d6ccfff2aeafaae30b5fc1af856be8d06b3703b96841ecc0d70959e51542514901763e1a291e1d0278afe31b23cc5c0a5b351994f321e9bd03490be5b51e2d0
+  checksum: 2ea7aed1e49808875788746db75d61d3180a0b883892e978e93326d61617c0e01b7816b9eefcad402579d9f6dd923a13b527bcfcda3f415c0a135987d6c2042d
   languageName: node
   linkType: hard
 
-"@storybook/channel-websocket@npm:6.5.13":
-  version: 6.5.13
-  resolution: "@storybook/channel-websocket@npm:6.5.13"
+"@storybook/channel-websocket@npm:6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/channel-websocket@npm:6.5.14"
   dependencies:
-    "@storybook/channels": 6.5.13
-    "@storybook/client-logger": 6.5.13
+    "@storybook/channels": 6.5.14
+    "@storybook/client-logger": 6.5.14
     core-js: ^3.8.2
     global: ^4.4.0
     telejson: ^6.0.8
-  checksum: 16e3b1a51a1af093f6c78ab7ca9c4c69ed05b45fd9bbdefb3050809e92064ccbf7a46f6800d21df2555e5d110d64735dd8d35155e54c3118fa7b4efe6b3b0457
+  checksum: 76bd5734890836d6d7af8fd619015067db4680ae4336fdf86ee1c612e0060412c14cfcba22faee02534a63079af0864323370409730c7f3ee16af8fc3014e758
   languageName: node
   linkType: hard
 
@@ -6302,17 +6346,28 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/client-api@npm:6.5.13":
-  version: 6.5.13
-  resolution: "@storybook/client-api@npm:6.5.13"
+"@storybook/channels@npm:6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/channels@npm:6.5.14"
   dependencies:
-    "@storybook/addons": 6.5.13
-    "@storybook/channel-postmessage": 6.5.13
-    "@storybook/channels": 6.5.13
-    "@storybook/client-logger": 6.5.13
-    "@storybook/core-events": 6.5.13
+    core-js: ^3.8.2
+    ts-dedent: ^2.0.0
+    util-deprecate: ^1.0.2
+  checksum: ff1ee3fea3c7b8591280ba7eabe13c999fc3e12a483ff2c0467cc9cca027662cbbc4676438da567865919157521df8a9a50bd20b35daed6896f39a3a7251a1e5
+  languageName: node
+  linkType: hard
+
+"@storybook/client-api@npm:6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/client-api@npm:6.5.14"
+  dependencies:
+    "@storybook/addons": 6.5.14
+    "@storybook/channel-postmessage": 6.5.14
+    "@storybook/channels": 6.5.14
+    "@storybook/client-logger": 6.5.14
+    "@storybook/core-events": 6.5.14
     "@storybook/csf": 0.0.2--canary.4566f4d.1
-    "@storybook/store": 6.5.13
+    "@storybook/store": 6.5.14
     "@types/qs": ^6.9.5
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
@@ -6329,7 +6384,7 @@ __metadata:
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: b0af25786b9144a55ebaa7754dd1b3701f5f8796770eaf59e7bc6d21ada12911fcbe4bf0da037d01bdda2c46138f265a948befe1f3de356fdc0ae3af80973388
+  checksum: 46fe2bec19610a7ab59b41f25653261cb65b485a829a94f99f9aa01f1f5bbc13677979abfe94eb025f0d9c1138b284ddbeb6ce8a0ae392ce4995a813770be83b
   languageName: node
   linkType: hard
 
@@ -6343,13 +6398,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/components@npm:6.5.13":
-  version: 6.5.13
-  resolution: "@storybook/components@npm:6.5.13"
+"@storybook/client-logger@npm:6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/client-logger@npm:6.5.14"
   dependencies:
-    "@storybook/client-logger": 6.5.13
+    core-js: ^3.8.2
+    global: ^4.4.0
+  checksum: 29cc0b58db7a8dc90484320c86b386975580c0e534791b29f6a8c00ce5b156f2bff9513994202f9f9ef99787e8d793988048ae88d2780ba151c6782f3bbf97ff
+  languageName: node
+  linkType: hard
+
+"@storybook/components@npm:6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/components@npm:6.5.14"
+  dependencies:
+    "@storybook/client-logger": 6.5.14
     "@storybook/csf": 0.0.2--canary.4566f4d.1
-    "@storybook/theming": 6.5.13
+    "@storybook/theming": 6.5.14
     core-js: ^3.8.2
     memoizerific: ^1.11.3
     qs: ^6.10.0
@@ -6358,24 +6423,24 @@ __metadata:
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 5d01c0f445f6574ccadcfa79afd99c078bd1f81d65e59186361100dc57bd73ccbb877e5a8bbc49dd6551bce1b32fbe6f135c2bea15c0126a83faf222cfaed878
+  checksum: 73d0ff418f2c5b1fc9f421f089ebee2342ef0684905e4959397a8bc6f67f32ff97f4ec3587847980cb7e4fc8e40278d8ecea11a8d267fea8d94ad3d8265a0c21
   languageName: node
   linkType: hard
 
-"@storybook/core-client@npm:6.5.13":
-  version: 6.5.13
-  resolution: "@storybook/core-client@npm:6.5.13"
+"@storybook/core-client@npm:6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/core-client@npm:6.5.14"
   dependencies:
-    "@storybook/addons": 6.5.13
-    "@storybook/channel-postmessage": 6.5.13
-    "@storybook/channel-websocket": 6.5.13
-    "@storybook/client-api": 6.5.13
-    "@storybook/client-logger": 6.5.13
-    "@storybook/core-events": 6.5.13
+    "@storybook/addons": 6.5.14
+    "@storybook/channel-postmessage": 6.5.14
+    "@storybook/channel-websocket": 6.5.14
+    "@storybook/client-api": 6.5.14
+    "@storybook/client-logger": 6.5.14
+    "@storybook/core-events": 6.5.14
     "@storybook/csf": 0.0.2--canary.4566f4d.1
-    "@storybook/preview-web": 6.5.13
-    "@storybook/store": 6.5.13
-    "@storybook/ui": 6.5.13
+    "@storybook/preview-web": 6.5.14
+    "@storybook/store": 6.5.14
+    "@storybook/ui": 6.5.14
     airbnb-js-shims: ^2.2.1
     ansi-to-html: ^0.6.11
     core-js: ^3.8.2
@@ -6393,13 +6458,13 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: c4350b1b579f0781a239fdede79f1d0975e297ecb61ba4096834d62bd553420615231dc9146c446d0178088e83863fd9dc720fbb4485b5779fac7d99ce3eeb9e
+  checksum: ff867021ab6c22408952b809f3c22e58474390062fb5417aecc0ea6dcf2eb0097a616c5b1377e9af6c16045ce0cd5f3a11b32072630085592998dbb6a7ee573d
   languageName: node
   linkType: hard
 
-"@storybook/core-common@npm:6.5.13":
-  version: 6.5.13
-  resolution: "@storybook/core-common@npm:6.5.13"
+"@storybook/core-common@npm:6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/core-common@npm:6.5.14"
   dependencies:
     "@babel/core": ^7.12.10
     "@babel/plugin-proposal-class-properties": ^7.12.1
@@ -6423,7 +6488,7 @@ __metadata:
     "@babel/preset-react": ^7.12.10
     "@babel/preset-typescript": ^7.12.7
     "@babel/register": ^7.12.1
-    "@storybook/node-logger": 6.5.13
+    "@storybook/node-logger": 6.5.14
     "@storybook/semver": ^7.3.2
     "@types/node": ^14.0.10 || ^16.0.0
     "@types/pretty-hrtime": ^1.0.0
@@ -6457,7 +6522,7 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 369fbe41e9ac657410a8e7fb4668be0e77c50b84c29b352397cc26b72d79397a7e84dcbf7a94f2d02d819d395a66e30a3915de40e85936d7b7dc50bb426aeabb
+  checksum: a1cd6e97524aa8173bc8a0af867cbf407f0542b8577a5be79a82154efb239d9362d05fae3bad0aac41e17d33d950cb69290042be46bbc841a8d12b71f6db1c82
   languageName: node
   linkType: hard
 
@@ -6470,22 +6535,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/core-server@npm:6.5.13":
-  version: 6.5.13
-  resolution: "@storybook/core-server@npm:6.5.13"
+"@storybook/core-events@npm:6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/core-events@npm:6.5.14"
+  dependencies:
+    core-js: ^3.8.2
+  checksum: 6787925c520a6ee5aee748d4b7e2ec599c5ee16a87dbb62a94eeec88003ef42683d8e7ac8b98b49ea2a33205e0648805410c4759d16a997ba2f4215f6c8784ce
+  languageName: node
+  linkType: hard
+
+"@storybook/core-server@npm:6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/core-server@npm:6.5.14"
   dependencies:
     "@discoveryjs/json-ext": ^0.5.3
-    "@storybook/builder-webpack4": 6.5.13
-    "@storybook/core-client": 6.5.13
-    "@storybook/core-common": 6.5.13
-    "@storybook/core-events": 6.5.13
+    "@storybook/builder-webpack4": 6.5.14
+    "@storybook/core-client": 6.5.14
+    "@storybook/core-common": 6.5.14
+    "@storybook/core-events": 6.5.14
     "@storybook/csf": 0.0.2--canary.4566f4d.1
-    "@storybook/csf-tools": 6.5.13
-    "@storybook/manager-webpack4": 6.5.13
-    "@storybook/node-logger": 6.5.13
+    "@storybook/csf-tools": 6.5.14
+    "@storybook/manager-webpack4": 6.5.14
+    "@storybook/node-logger": 6.5.14
     "@storybook/semver": ^7.3.2
-    "@storybook/store": 6.5.13
-    "@storybook/telemetry": 6.5.13
+    "@storybook/store": 6.5.14
+    "@storybook/telemetry": 6.5.14
     "@types/node": ^14.0.10 || ^16.0.0
     "@types/node-fetch": ^2.5.7
     "@types/pretty-hrtime": ^1.0.0
@@ -6529,16 +6603,16 @@ __metadata:
       optional: true
     typescript:
       optional: true
-  checksum: 142b13ef4fef21a68c8255f35f42ca5c3b9f636b51986f61dc6ae95485788d0f581552604b8a4a796e7cd2ad9548b87317ac9647ea44be58f64b91c440bb71ea
+  checksum: ca61b13ff002f73f76f6d359fc7955f061806d13bb0f158d6ff299696901097329d082b4fdd7fac06dda93fd318bcdbba9f6a08390763d18851c8aa70e581c36
   languageName: node
   linkType: hard
 
-"@storybook/core@npm:6.5.13":
-  version: 6.5.13
-  resolution: "@storybook/core@npm:6.5.13"
+"@storybook/core@npm:6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/core@npm:6.5.14"
   dependencies:
-    "@storybook/core-client": 6.5.13
-    "@storybook/core-server": 6.5.13
+    "@storybook/core-client": 6.5.14
+    "@storybook/core-server": 6.5.14
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -6550,13 +6624,13 @@ __metadata:
       optional: true
     typescript:
       optional: true
-  checksum: e0dbe5d8d52f2a12ab63db965d5d15ee671029a03b7204756954e2bc3253b560c8e430aaab5559ccbddcfd3e97d2bc1c0c58ed370aa593912724402aa86996b8
+  checksum: 16a2b8c589cbb8632ef6f1ba941abd7a422bca6fa54d4ef1dc5a60145bbea8dded10c7fa1fd4b8284e2e86867e779c26d4eebe69e2156123c49cfdf66c14718a
   languageName: node
   linkType: hard
 
-"@storybook/csf-tools@npm:6.5.13":
-  version: 6.5.13
-  resolution: "@storybook/csf-tools@npm:6.5.13"
+"@storybook/csf-tools@npm:6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/csf-tools@npm:6.5.14"
   dependencies:
     "@babel/core": ^7.12.10
     "@babel/generator": ^7.12.11
@@ -6577,7 +6651,7 @@ __metadata:
   peerDependenciesMeta:
     "@storybook/mdx2-csf":
       optional: true
-  checksum: 2b8a5bed04ea89084334742e1095c4565b0b7367b5126e3a9b6648224b59c2136a9d57cbb9067264fc3951e9db58df40b23b975170180d171cce35dfabf2a090
+  checksum: 12e6bb4d9daa1f3ffd6a240edd9680c4088a20f2eba6dd91102fd2900188dcfcec60fc7e7b021aa2ae2232e15e0839aaf490d1c2ab2c9baa74a9dfea74ec713f
   languageName: node
   linkType: hard
 
@@ -6590,22 +6664,35 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/docs-tools@npm:6.5.13":
-  version: 6.5.13
-  resolution: "@storybook/docs-tools@npm:6.5.13"
+"@storybook/docs-tools@npm:6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/docs-tools@npm:6.5.14"
   dependencies:
     "@babel/core": ^7.12.10
     "@storybook/csf": 0.0.2--canary.4566f4d.1
-    "@storybook/store": 6.5.13
+    "@storybook/store": 6.5.14
     core-js: ^3.8.2
     doctrine: ^3.0.0
     lodash: ^4.17.21
     regenerator-runtime: ^0.13.7
-  checksum: d3ad4674922025aaf6e4e2b7c2ac6f4eaec8f5692dc9a792a15d2d5e38dcd2e1c138daffb31a3da04da1e04c645b3cd8d921890f9ba318bfee7b6a12f263b48a
+  checksum: 1a69dae1f9ae4196a3517571d898097a69431cd6d92f490af3eb3e5504fe0bbde4cbdd82d1ff9648c3a1daa7eab10eaffd5d2ee485e634a6fa5701dec7875196
+  languageName: node
+  linkType: hard
+
+"@storybook/instrumenter@npm:6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/instrumenter@npm:6.5.14"
+  dependencies:
+    "@storybook/addons": 6.5.14
+    "@storybook/client-logger": 6.5.14
+    "@storybook/core-events": 6.5.14
+    core-js: ^3.8.2
+    global: ^4.4.0
+  checksum: 99d480968012e59ead965034a153e19e0958622b917ca063e2f929b31782fb27db401f2cc272cc76143777785fa48e39a1f8a24d1a815a864164b3b5ce11d847
   languageName: node
   linkType: hard
 
-"@storybook/instrumenter@npm:6.5.13, @storybook/instrumenter@npm:^6.4.0":
+"@storybook/instrumenter@npm:^6.4.0":
   version: 6.5.13
   resolution: "@storybook/instrumenter@npm:6.5.13"
   dependencies:
@@ -6618,19 +6705,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/manager-webpack4@npm:6.5.13":
-  version: 6.5.13
-  resolution: "@storybook/manager-webpack4@npm:6.5.13"
+"@storybook/manager-webpack4@npm:6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/manager-webpack4@npm:6.5.14"
   dependencies:
     "@babel/core": ^7.12.10
     "@babel/plugin-transform-template-literals": ^7.12.1
     "@babel/preset-react": ^7.12.10
-    "@storybook/addons": 6.5.13
-    "@storybook/core-client": 6.5.13
-    "@storybook/core-common": 6.5.13
-    "@storybook/node-logger": 6.5.13
-    "@storybook/theming": 6.5.13
-    "@storybook/ui": 6.5.13
+    "@storybook/addons": 6.5.14
+    "@storybook/core-client": 6.5.14
+    "@storybook/core-common": 6.5.14
+    "@storybook/node-logger": 6.5.14
+    "@storybook/theming": 6.5.14
+    "@storybook/ui": 6.5.14
     "@types/node": ^14.0.10 || ^16.0.0
     "@types/webpack": ^4.41.26
     babel-loader: ^8.0.0
@@ -6663,23 +6750,23 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 6645f30b6199d0badb2097aca16478e4d8bc88210b55e60c4da86962e8b0a3441128f1e696cddf8a535591920617a7abf5f1f9771dabc486479e76b8d4b20fbd
+  checksum: c8547b64f80c87dd8590a3e7b784b6f72952607514f9e42858f89efce22ea077404033b25674aecc3874e61264ce74c38220b6130aecbce5361d182b018f7fc7
   languageName: node
   linkType: hard
 
-"@storybook/manager-webpack5@npm:^6.5.13":
-  version: 6.5.13
-  resolution: "@storybook/manager-webpack5@npm:6.5.13"
+"@storybook/manager-webpack5@npm:^6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/manager-webpack5@npm:6.5.14"
   dependencies:
     "@babel/core": ^7.12.10
     "@babel/plugin-transform-template-literals": ^7.12.1
     "@babel/preset-react": ^7.12.10
-    "@storybook/addons": 6.5.13
-    "@storybook/core-client": 6.5.13
-    "@storybook/core-common": 6.5.13
-    "@storybook/node-logger": 6.5.13
-    "@storybook/theming": 6.5.13
-    "@storybook/ui": 6.5.13
+    "@storybook/addons": 6.5.14
+    "@storybook/core-client": 6.5.14
+    "@storybook/core-common": 6.5.14
+    "@storybook/node-logger": 6.5.14
+    "@storybook/theming": 6.5.14
+    "@storybook/ui": 6.5.14
     "@types/node": ^14.0.10 || ^16.0.0
     babel-loader: ^8.0.0
     case-sensitive-paths-webpack-plugin: ^2.3.0
@@ -6709,7 +6796,7 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 95e720d00e8869f8ec5e8a36f50e5da6aaecdc9a1ea306ae3d7b50f2f07b60a9eb5cb3787e88262c664c958b1f56b7f34e9bf027eb627a96d127b5771ff6a137
+  checksum: 1fe525b777694c90d1837911307fa5ef3ac976387ff9b8c5116e51bfe21437c7d83504d3edb63cc5d3c9d624ba50e467f500a3477b63a879fc5d6e73310894ba
   languageName: node
   linkType: hard
 
@@ -6732,38 +6819,38 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/node-logger@npm:6.5.13, @storybook/node-logger@npm:^6.5.13":
-  version: 6.5.13
-  resolution: "@storybook/node-logger@npm:6.5.13"
+"@storybook/node-logger@npm:6.5.14, @storybook/node-logger@npm:^6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/node-logger@npm:6.5.14"
   dependencies:
     "@types/npmlog": ^4.1.2
     chalk: ^4.1.0
     core-js: ^3.8.2
     npmlog: ^5.0.1
     pretty-hrtime: ^1.0.3
-  checksum: bcd1d98822687580e39f27003e16c73e3c775cdfe6e9f8fd8fbe9f4626a82f3f63fe281f9c894f3917faa52202ccb8217916978032d27ba6dbfa9720064e7739
+  checksum: d36d17816b20bf8409504f73b8fe7da2c1aa6b6f37c3cc910f544f4e3d9dfe8cfe5ab66930977413ab12a067f94477d5a1e3da8fa55c07af5dbc88160845ee47
   languageName: node
   linkType: hard
 
-"@storybook/postinstall@npm:6.5.13":
-  version: 6.5.13
-  resolution: "@storybook/postinstall@npm:6.5.13"
+"@storybook/postinstall@npm:6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/postinstall@npm:6.5.14"
   dependencies:
     core-js: ^3.8.2
-  checksum: 87e57e55c7973ea5794b439484d6a99c078b816c0a865c989ae31979000abda6fcfe670671e999a36630b52a91d54e6c0d174b41410cf876e20db976e5a23f56
+  checksum: 7f5cec2cca4a99188e1b447a10e15bf91574f08941b82ea1c6ce0daf9fa387491cdee58f707c6377bccf6901b743349447a8a313b6fb4924a9f519d49e11de8b
   languageName: node
   linkType: hard
 
-"@storybook/preview-web@npm:6.5.13":
-  version: 6.5.13
-  resolution: "@storybook/preview-web@npm:6.5.13"
+"@storybook/preview-web@npm:6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/preview-web@npm:6.5.14"
   dependencies:
-    "@storybook/addons": 6.5.13
-    "@storybook/channel-postmessage": 6.5.13
-    "@storybook/client-logger": 6.5.13
-    "@storybook/core-events": 6.5.13
+    "@storybook/addons": 6.5.14
+    "@storybook/channel-postmessage": 6.5.14
+    "@storybook/client-logger": 6.5.14
+    "@storybook/core-events": 6.5.14
     "@storybook/csf": 0.0.2--canary.4566f4d.1
-    "@storybook/store": 6.5.13
+    "@storybook/store": 6.5.14
     ansi-to-html: ^0.6.11
     core-js: ^3.8.2
     global: ^4.4.0
@@ -6777,7 +6864,7 @@ __metadata:
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: d66d29667a936ee80d15de07bdeec0c6cb2a476fdaa59f262297f5c7dc774acb57e4779c2dd77e61f5a6d9974ac3359babe587a2cd9baf6aa7673ec949b3234d
+  checksum: ef4d2222feaadd71067339ec93a13279162d0d0c72545ccb52681dd38c95451bb4257f0817dd3689af5d5e5b161602c8a57bc5805cd0d6bc0e066b78a2cfdd23
   languageName: node
   linkType: hard
 
@@ -6799,23 +6886,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/react@npm:^6.5.13":
-  version: 6.5.13
-  resolution: "@storybook/react@npm:6.5.13"
+"@storybook/react@npm:^6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/react@npm:6.5.14"
   dependencies:
     "@babel/preset-flow": ^7.12.1
     "@babel/preset-react": ^7.12.10
     "@pmmmwh/react-refresh-webpack-plugin": ^0.5.3
-    "@storybook/addons": 6.5.13
-    "@storybook/client-logger": 6.5.13
-    "@storybook/core": 6.5.13
-    "@storybook/core-common": 6.5.13
+    "@storybook/addons": 6.5.14
+    "@storybook/client-logger": 6.5.14
+    "@storybook/core": 6.5.14
+    "@storybook/core-common": 6.5.14
     "@storybook/csf": 0.0.2--canary.4566f4d.1
-    "@storybook/docs-tools": 6.5.13
-    "@storybook/node-logger": 6.5.13
+    "@storybook/docs-tools": 6.5.14
+    "@storybook/node-logger": 6.5.14
     "@storybook/react-docgen-typescript-plugin": 1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0
     "@storybook/semver": ^7.3.2
-    "@storybook/store": 6.5.13
+    "@storybook/store": 6.5.14
     "@types/estree": ^0.0.51
     "@types/node": ^14.14.20 || ^16.0.0
     "@types/webpack-env": ^1.16.0
@@ -6860,7 +6947,7 @@ __metadata:
     build-storybook: bin/build.js
     start-storybook: bin/index.js
     storybook-server: bin/index.js
-  checksum: 5a21e4e49a0aba7376dbaef5408e03537cf937d3025e735b45848bce7c9f476a025ca9af4260aa32982a3da668e14a217f66a0ec465ed820369ff2fab49b2ab3
+  checksum: b94b7b3ef19d6b9e9379242fb17afd8892100cdf5dd8beac640e8dcac62618977e8189891e87e0fab40484a3fc84eeb8bc17ebd8dc7cba6b29ee7b65f8f761c8
   languageName: node
   linkType: hard
 
@@ -6880,6 +6967,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/router@npm:6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/router@npm:6.5.14"
+  dependencies:
+    "@storybook/client-logger": 6.5.14
+    core-js: ^3.8.2
+    memoizerific: ^1.11.3
+    qs: ^6.10.0
+    regenerator-runtime: ^0.13.7
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: ec2550568c02f45de5307e77928eaeb39413049944e994adbc397d9c7e083ac7e110886e40517ddae40e3879c172f458167682f1d73d0bb150bc93ab9dd61514
+  languageName: node
+  linkType: hard
+
 "@storybook/semver@npm:^7.3.2":
   version: 7.3.2
   resolution: "@storybook/semver@npm:7.3.2"
@@ -6892,34 +6995,34 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/source-loader@npm:6.5.13":
-  version: 6.5.13
-  resolution: "@storybook/source-loader@npm:6.5.13"
+"@storybook/source-loader@npm:6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/source-loader@npm:6.5.14"
   dependencies:
-    "@storybook/addons": 6.5.13
-    "@storybook/client-logger": 6.5.13
+    "@storybook/addons": 6.5.14
+    "@storybook/client-logger": 6.5.14
     "@storybook/csf": 0.0.2--canary.4566f4d.1
     core-js: ^3.8.2
     estraverse: ^5.2.0
     global: ^4.4.0
-    loader-utils: ^2.0.0
+    loader-utils: ^2.0.4
     lodash: ^4.17.21
     prettier: ">=2.2.1 <=2.3.0"
     regenerator-runtime: ^0.13.7
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 93da14a367a954f664d233f64bd9e7d983475e489b8fbe5c90b723ff793279ab899d86f967eb6882f7997296f4286f6f5c82c17ca83e9294c91f8e4aa0ec0a1d
+  checksum: 81f8908a31eb3428835a201418b89981c7ce7ece669bef2a6487b643025e45238956fe98f8fd70aa61843db0eee2c595a13e84b46835cb28b1eef59defe00740
   languageName: node
   linkType: hard
 
-"@storybook/store@npm:6.5.13":
-  version: 6.5.13
-  resolution: "@storybook/store@npm:6.5.13"
+"@storybook/store@npm:6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/store@npm:6.5.14"
   dependencies:
-    "@storybook/addons": 6.5.13
-    "@storybook/client-logger": 6.5.13
-    "@storybook/core-events": 6.5.13
+    "@storybook/addons": 6.5.14
+    "@storybook/client-logger": 6.5.14
+    "@storybook/core-events": 6.5.14
     "@storybook/csf": 0.0.2--canary.4566f4d.1
     core-js: ^3.8.2
     fast-deep-equal: ^3.1.3
@@ -6935,16 +7038,16 @@ __metadata:
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 69f55927bd3569ec9d87f4351879fd07654d51524a0f9da05c64c7f7f3b50e33024f1554fa59668997e47189e9838b85b691de422ab539bd71126b56922d9381
+  checksum: 7330a2492c469bbe989a522873486cbccf660080bf8d03c873029a8fa56f82976d7d71030c69aa9b2df48bf3b6fdc8063f5beecba298908783058ea675f0a159
   languageName: node
   linkType: hard
 
-"@storybook/telemetry@npm:6.5.13":
-  version: 6.5.13
-  resolution: "@storybook/telemetry@npm:6.5.13"
+"@storybook/telemetry@npm:6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/telemetry@npm:6.5.14"
   dependencies:
-    "@storybook/client-logger": 6.5.13
-    "@storybook/core-common": 6.5.13
+    "@storybook/client-logger": 6.5.14
+    "@storybook/core-common": 6.5.14
     chalk: ^4.1.0
     core-js: ^3.8.2
     detect-package-manager: ^2.0.1
@@ -6955,7 +7058,7 @@ __metadata:
     nanoid: ^3.3.1
     read-pkg-up: ^7.0.1
     regenerator-runtime: ^0.13.7
-  checksum: 94ad6fb58b09c8073600ad95b2a48f476524ea7bc6155aee8e9682966a99ac875a9923ee6512252238e8c56eeef725a712e94ba87e1060d7dca9ab196a9051a6
+  checksum: 6f6323fe0e0fe9301b63a951e4f2959a68847bc20b67e3910587e6979b3e0b058ce5ec1b2bc89e666b77e91211dd0bb2ed8bd23060831f599365b8f41630db53
   languageName: node
   linkType: hard
 
@@ -6972,7 +7075,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/theming@npm:6.5.13, @storybook/theming@npm:^6.1.18, @storybook/theming@npm:^6.5.13":
+"@storybook/theming@npm:6.5.13, @storybook/theming@npm:^6.1.18":
   version: 6.5.13
   resolution: "@storybook/theming@npm:6.5.13"
   dependencies:
@@ -6987,19 +7090,34 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/ui@npm:6.5.13":
-  version: 6.5.13
-  resolution: "@storybook/ui@npm:6.5.13"
+"@storybook/theming@npm:6.5.14, @storybook/theming@npm:^6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/theming@npm:6.5.14"
   dependencies:
-    "@storybook/addons": 6.5.13
-    "@storybook/api": 6.5.13
-    "@storybook/channels": 6.5.13
-    "@storybook/client-logger": 6.5.13
-    "@storybook/components": 6.5.13
-    "@storybook/core-events": 6.5.13
-    "@storybook/router": 6.5.13
+    "@storybook/client-logger": 6.5.14
+    core-js: ^3.8.2
+    memoizerific: ^1.11.3
+    regenerator-runtime: ^0.13.7
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: d139325dd51e8dfa58458a5c033104123b019fc02ddc899898e02de2b5d1358fd318b5def7ef82e6138420f9198e90d50b0fdfbea926987ac6852fc3a2e77c6d
+  languageName: node
+  linkType: hard
+
+"@storybook/ui@npm:6.5.14":
+  version: 6.5.14
+  resolution: "@storybook/ui@npm:6.5.14"
+  dependencies:
+    "@storybook/addons": 6.5.14
+    "@storybook/api": 6.5.14
+    "@storybook/channels": 6.5.14
+    "@storybook/client-logger": 6.5.14
+    "@storybook/components": 6.5.14
+    "@storybook/core-events": 6.5.14
+    "@storybook/router": 6.5.14
     "@storybook/semver": ^7.3.2
-    "@storybook/theming": 6.5.13
+    "@storybook/theming": 6.5.14
     core-js: ^3.8.2
     memoizerific: ^1.11.3
     qs: ^6.10.0
@@ -7008,7 +7126,7 @@ __metadata:
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: d2866987f51d945246776d42628bc2b79e701f1e59fd511bb1e590c83c4b9d9adee5c7e1a11ecb2ef12b9192613e2d576694bbc9aeb1df5545567f2aa44c0145
+  checksum: 898bf81d9ab64d792bdca23b0ec465500af1e42ed5ebace5847416d0ec36d32043fb7c547452a626ce285efd966569e6bfd4f84ddd691367259553ca59538646
   languageName: node
   linkType: hard
 
@@ -7503,16 +7621,18 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@trex/storybook@workspace:platforms/storybook"
   dependencies:
-    "@storybook/addon-actions": ^6.5.13
-    "@storybook/addon-essentials": ^6.5.13
-    "@storybook/addon-interactions": ^6.5.13
-    "@storybook/addon-links": ^6.5.13
-    "@storybook/builder-webpack5": ^6.5.13
-    "@storybook/manager-webpack5": ^6.5.13
-    "@storybook/node-logger": ^6.5.13
-    "@storybook/react": ^6.5.13
+    "@react-theming/storybook-addon": ^1.1.10
+    "@storybook/addon-actions": ^6.5.14
+    "@storybook/addon-controls": ^6.5.14
+    "@storybook/addon-essentials": ^6.5.14
+    "@storybook/addon-interactions": ^6.5.14
+    "@storybook/addon-links": ^6.5.14
+    "@storybook/builder-webpack5": ^6.5.14
+    "@storybook/manager-webpack5": ^6.5.14
+    "@storybook/node-logger": ^6.5.14
+    "@storybook/react": ^6.5.14
     "@storybook/testing-library": ^0.0.13
-    "@storybook/theming": ^6.5.13
+    "@storybook/theming": ^6.5.14
     "@testing-library/jest-dom": ^5.16.5
     "@testing-library/react": ^13.4.0
     "@testing-library/user-event": ^14.4.3
@@ -7539,14 +7659,10 @@ __metadata:
   dependencies:
     "@emotion/react": ^11.9.0
     "@emotion/styled": ^11.8.1
-    "@material-ui/core": ^4.12.4
-    "@material-ui/icons": ^4.11.3
-    "@material-ui/styles": ^4.11.5
-    "@material-ui/x-license": ^4.0.0-alpha.37
     "@mui/icons-material": ^5.8.0
     "@mui/material": ^5.8.0
     "@mui/styled-engine": ^5.8.0
-    "@mui/x-data-grid": ^5.11.1
+    "@mui/x-data-grid": ^5.17.11
     "@types/node": ^16.11.68
     "@types/prettier": ^2.6.3
     "@types/react": ^17.0.50
@@ -8583,7 +8699,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/prop-types@npm:*, @types/prop-types@npm:^15.7.4, @types/prop-types@npm:^15.7.5":
+"@types/prop-types@npm:*, @types/prop-types@npm:^15.7.5":
   version: 15.7.5
   resolution: "@types/prop-types@npm:15.7.5"
   checksum: 5b43b8b15415e1f298243165f1d44390403bb2bd42e662bca3b5b5633fdd39c938e91b7fce3a9483699db0f7a715d08cef220c121f723a634972fdf596aec980
@@ -16458,13 +16574,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esm@npm:^3.2.25":
-  version: 3.2.25
-  resolution: "esm@npm:3.2.25"
-  checksum: 978aabe2de83541c105605a6d60a26ed8e627ef6bb0a7605fe15a95bbdea6b8348bd045255cb22219c054dd09a81a94823df00843d9e97f42419c92015ce3a64
-  languageName: node
-  linkType: hard
-
 "espree@npm:^9.4.0":
   version: 9.4.0
   resolution: "espree@npm:9.4.0"
@@ -22183,6 +22292,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"loader-utils@npm:^2.0.4":
+  version: 2.0.4
+  resolution: "loader-utils@npm:2.0.4"
+  dependencies:
+    big.js: ^5.2.2
+    emojis-list: ^3.0.0
+    json5: ^2.1.2
+  checksum: a5281f5fff1eaa310ad5e1164095689443630f3411e927f95031ab4fb83b4a98f388185bb1fe949e8ab8d4247004336a625e9255c22122b815bb9a4c5d8fc3b7
+  languageName: node
+  linkType: hard
+
 "loader-utils@npm:^3.2.0":
   version: 3.2.0
   resolution: "loader-utils@npm:3.2.0"
@@ -27243,7 +27363,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^16.12.0 || ^17.0.0 || ^18.0.0, react-is@npm:^18.0.0":
+"react-is@npm:^16.12.0 || ^17.0.0 || ^18.0.0, react-is@npm:^18.0.0, react-is@npm:^18.2.0":
   version: 18.2.0
   resolution: "react-is@npm:18.2.0"
   checksum: e72d0ba81b5922759e4aff17e0252bd29988f9642ed817f56b25a3e217e13eea8a7f2322af99a06edb779da12d5d636e9fda473d620df9a3da0df2a74141d53e
@@ -27877,6 +27997,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"regenerator-runtime@npm:^0.13.10":
+  version: 0.13.11
+  resolution: "regenerator-runtime@npm:0.13.11"
+  checksum: 27481628d22a1c4e3ff551096a683b424242a216fee44685467307f14d58020af1e19660bf2e26064de946bad7eff28950eae9f8209d55723e2d9351e632bbb4
+  languageName: node
+  linkType: hard
+
 "regenerator-runtime@npm:^0.13.2, regenerator-runtime@npm:^0.13.4, regenerator-runtime@npm:^0.13.7":
   version: 0.13.9
   resolution: "regenerator-runtime@npm:0.13.9"
@@ -28619,7 +28746,7 @@ __metadata:
     "@commitlint/cli": ^17.1.2
     "@commitlint/config-conventional": ^17.1.0
     "@commitlint/prompt-cli": ^17.1.2
-    "@react-theming/storybook-addon": ^1.1.7
+    "@react-theming/storybook-addon": ^1.1.10
     "@release-it-plugins/workspaces": ^3.2.0
     "@release-it/bumper": ^4.0.0
     "@release-it/conventional-changelog": ^5.1.1