diff --git a/showroom/video/assets/README-1712252563243.png b/showroom/video/assets/README-1712252563243.png
new file mode 100644
index 0000000000000000000000000000000000000000..9827be13a886b95b09ad1974e5686b4004105685
Binary files /dev/null and b/showroom/video/assets/README-1712252563243.png differ
diff --git a/showroom/video/panel/index.html b/showroom/video/panel/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..0f26c2e27f30ea63f1567646cad0d62ce7afcad7
--- /dev/null
+++ b/showroom/video/panel/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="de">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=0.1">
+ <title>Panel</title>
+ <script type="module" src="./script.mjs"></script>
+<style>
+*:not(:defined) {
+ visibility: hidden;
+}
+</style>
+ </head>
+ <body>
+ <monster-panel >
+ <monster-split-panel orientation="horizontal">
+ <monster-panel slot="start" data-monster-option-heightadjustment="-8">
+ <h2>start panel</h2>
+
+ <p>lorem imsum</p>
+ <p>lorem imsum</p>
+ </monster-panel>
+ <monster-panel slot="end">
+ <h2>end panel</h2>
+ </monster-panel>
+ </monster-split-panel>
+ </monster-panel>
+
+ </body>
+</html>
diff --git a/showroom/video/panel/script.mjs b/showroom/video/panel/script.mjs
new file mode 100644
index 0000000000000000000000000000000000000000..1a4c5e77a4d3f9805fbd5232dfd889fba2da95b7
--- /dev/null
+++ b/showroom/video/panel/script.mjs
@@ -0,0 +1,6 @@
+import "@schukai/monster/source/components/style/property.pcss"
+import "@schukai/monster/source/components/style/normalize.pcss"
+import "@schukai/monster/source/components/style/typography.pcss"
+import "@schukai/monster/source/components/style/color.pcss"
+import "@schukai/monster/source/components/layout/split-panel.mjs"
+import "@schukai/monster/source/components/layout/panel.mjs"