diff --git a/source/screens/demo/examples/ui/form.njk b/source/screens/demo/examples/ui/form.njk
new file mode 100644
index 0000000..60162ce
--- /dev/null
+++ b/source/screens/demo/examples/ui/form.njk
@@ -0,0 +1,45 @@
+---
+title: Form
+tags:
+ - demoExample
+ - ui
+---
+{% extends "demo/_app.njk" %}
+
+{% block title %}{{ title }}
+{% endblock %}
+
+{% block links %}
+
+{% endblock %}
+
+{% block head %}
+ {{ super() }}
+{% endblock %}
+
+{% block body %}
+
+
Formulare
+
+
+
+{% endblock %}
+
+{%- block script %}
+ {{ super() }}
+
+{% endblock %}
\ No newline at end of file
diff --git a/source/style/modules/ui/_form_module.scss b/source/style/modules/ui/_form_module.scss
new file mode 100644
index 0000000..265663c
--- /dev/null
+++ b/source/style/modules/ui/_form_module.scss
@@ -0,0 +1,33 @@
+#form body {
+ margin: 0;
+ background-color: #808080;
+}
+
+#head {
+ // display: flex;
+}
+
+h1 {
+ margin: 0;
+}
+
+#grid {
+ display: grid;
+ gap: 8px;
+ grid-template-columns: repeat(4, 1fr);
+ grid-auto-rows: minmax(64px, auto);
+}
+
+#grid>div {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+ background-color: aquamarine;
+}
+
+#grid>div:first-child {
+ grid-column: 1 / 3;
+ background-color: violet;
+}
\ No newline at end of file
diff --git a/source/style/ui.scss b/source/style/ui.scss
index e6886e8..f74e666 100644
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@@ -194,4 +194,5 @@ $z-indexes: (
@import "modules/ui/new_module";
@import "modules/ui/settings_module";
-@import "modules/ui/drag_module";
\ No newline at end of file
+@import "modules/ui/drag_module";
+@import "modules/ui/form_module";
\ No newline at end of file