diff --git a/bindings/jai/examples/introducing_clay_video_demo/main.jai b/bindings/jai/examples/introducing_clay_video_demo/main.jai
index 4f3078a..d711f7a 100644
--- a/bindings/jai/examples/introducing_clay_video_demo/main.jai
+++ b/bindings/jai/examples/introducing_clay_video_demo/main.jai
@@ -76,18 +76,57 @@ main :: () {
         };
 
         Clay.BeginLayout();
-        if Clay.UI(
+        Clay.UI(
             Clay.ID("OuterContainer"),
+            Clay.Rectangle(.{color = .{43, 41, 51, 255}}),
             Clay.Layout(.{
                 layoutDirection = .TOP_TO_BOTTOM,
                 sizing = layout_expand,
                 padding = .{16, 16},
                 childGap = 16,
             }),
-            Clay.Rectangle(.{color = .{43, 41, 51, 255}})
-        ) {
+            children = #code {
+            Clay.UI(
+                Clay.ID("HeaderBar"),
+                Clay.Rectangle(content_background_config),
+                Clay.Layout(.{
+                    sizing = .{
+                        height = Clay.SizingFixed(60),
+                        width = Clay.SizingGrow(),
+                    },
+                    padding = .{16, 16},
+                    childGap = 16,
+                    childAlignment = .{
+                        y = .CENTER,
+                    }
+                }),
+                children = #code {
+                Clay.UI(
+                    Clay.ID("FileButton"),
+                    Clay.Layout(.{padding = .{16, 8}}),
+                    Clay.Rectangle(.{
+                        color = .{140, 140, 140, 255},
+                        cornerRadius = .{5, 5, 5, 5},
+                    }),
+                    children = #code {
+                    Clay.Text("File", Clay.TextConfig(.{
+                            fontId = FONT_ID_BODY_16,
+                            fontSize = 16,
+                            textColor = Clay.Color.{255, 255, 255, 255},
+                    }));
 
-        }
+                    file_menu_visible := Clay.PointerOver(Clay.GetElementId("FileButton")) ||
+                        Clay.PointerOver(Clay.GetElementId("FileMenu"));
+                    
+                    if file_menu_visible {
+                        
+                    }
+                    }
+                );
+                }
+            );
+            }
+        );
 
         render_commands := Clay.EndLayout();
 
diff --git a/bindings/jai/examples/introducing_clay_video_demo/test.jai b/bindings/jai/examples/introducing_clay_video_demo/test.jai
new file mode 100644
index 0000000..44c4809
--- /dev/null
+++ b/bindings/jai/examples/introducing_clay_video_demo/test.jai
@@ -0,0 +1,21 @@
+#import "Basic";
+
+
+test :: () -> bool #must #expand {
+	print("one\n");
+	
+	`defer print("two\n");
+
+	return true;
+}
+
+main :: () {
+	print("ichi\n");
+	if test() {
+		print("ni\n");
+		if test() {
+			print("san\n");
+		}
+	}
+	print("yon\n");
+}
\ No newline at end of file
diff --git a/bindings/jai/module.jai b/bindings/jai/module.jai
index 7fc018c..1acb1b8 100644
--- a/bindings/jai/module.jai
+++ b/bindings/jai/module.jai
@@ -38,7 +38,7 @@ make_string :: (str: string) -> String {
 }
 
 // The way of handling this is inspired by the odin bindings
-UI :: (configs: ..TypedConfig, $call := #caller_code) -> bool #must #expand {
+UI :: (configs: ..TypedConfig, $children: Code = #code {}, $call := #caller_code) {
     _OpenElement();
     for config : configs {
         if config.type == {
@@ -56,13 +56,36 @@ UI :: (configs: ..TypedConfig, $call := #caller_code) -> bool #must #expand {
     }
     _ElementPostConfiguration();
 
-    // !IMPORTANT
-    // TODO Fix the need to have to add the namespace here
-    #insert,scope(call) #code defer Clay._CloseElement();;
+    #insert,scope(call) children;
 
-    return true;
+    _CloseElement();
 }
 
+// Not sure yet wich of these two methods is better
+// Idealy there should be a way to mimic the style of how it's done in C
+// ElementScope :: (configs: ..TypedConfig) #expand {
+//     _OpenElement();
+//     for config : configs {
+//         if config.type == {
+//         case .ID;
+//             _AttachId(config.id);
+//         case .LAYOUT;
+//             _AttachLayoutConfig(cast(*LayoutConfig, config.config));
+//         case;
+//             // config.config is a *void, it stores the address of the pointer that is stored in the union
+//             // as ElementConfigUnion is a union of structs. We can't cast pointers directly to structs,
+//             // we first cast the address of the *void and then dereference it.
+//             // Maybe there's a cast modifier to avoid this, but I don't know it (no_check and trunc didn't work).
+//             _AttachElementConfig(cast(*ElementConfigUnion, *config.config).*, config.type);
+//         }
+//     }
+//     _ElementPostConfiguration();
+
+//     `defer _CloseElement();
+// }
+
+
+
 ID :: (label: string, index: u32 = 0) -> TypedConfig {
     return .{type = .ID, id = _HashString(make_string(label), index, 0)};
 }
@@ -78,10 +101,26 @@ Rectangle :: (config: RectangleElementConfig) -> TypedConfig {
     };
 }
 
+Text :: (text: string, config: *TextElementConfig) {
+    _OpenTextElement(make_string(text), config);
+}
+
+TextConfig :: (config: TextElementConfig) -> *TextElementConfig {
+    return _StoreTextElementConfig(config);
+}
+
 SizingGrow :: (size_min_max: SizingMinMax = .{}) -> SizingAxis {
     return .{type = .GROW, size = .{minMax = size_min_max}};
 }
 
+SizingFixed :: (size: float) -> SizingAxis {
+    return .{type = .FIXED, size = .{minMax = .{size, size}}};
+}
+
+GetElementId :: (str: string) -> ElementId {
+    return GetElementId(make_string(str));
+}
+
 #scope_module
 
 Math :: #import "Math";