diff --git a/src/demos/mod.rs b/src/demos/mod.rs
new file mode 100644
index 0000000..104f97d
--- /dev/null
+++ b/src/demos/mod.rs
@@ -0,0 +1,40 @@
+use osui::prelude::*;
+
+pub fn app() -> Rsx {
+    let count = use_state(0);
+
+    std::thread::spawn({
+        let count = count.clone();
+        move || loop {
+            **count.get() += 1;
+            std::thread::sleep(std::time::Duration::from_secs(1));
+        }
+    });
+
+    rsx! {
+        FlexRow {
+            FlexCol {
+                @Transform::new().padding(2, 2);
+                @Style { foreground: None, background: Background::RoundedOutline(0x00ff00) };
+                Div {
+                    "This is text inside a div"
+                }
+
+                @Transform::new().padding(2, 2);
+                @Style { foreground: None, background: Background::Outline(0x00ff00) };
+                Div {
+                    "This is text inside a div with square outlines"
+                }
+
+                // TODO: div with width full
+            } (1)
+
+            FlexCol {
+                Div {
+                    %count
+                    "This will increment every second: {count}"
+                }
+            } (2)
+        } (0)
+    }
+}
diff --git a/src/elements/div.rs b/src/elements/div.rs
index 28760eb..5960d18 100644
--- a/src/elements/div.rs
+++ b/src/elements/div.rs
@@ -22,7 +22,7 @@ impl Div {
 impl Element for Div {
     fn render(&mut self, scope: &mut crate::render_scope::RenderScope) {
         let (width, height) = scope.get_size_or(self.size.0, self.size.1);
-        scope.draw_rect(width, height, 0);
+        scope.use_area(width, height);
     }
 
     fn after_render(&mut self, scope: &mut crate::render_scope::RenderScope) {
diff --git a/src/elements/flex.rs b/src/elements/flex.rs
index 3ae6874..3dc95e3 100644
--- a/src/elements/flex.rs
+++ b/src/elements/flex.rs
@@ -67,7 +67,7 @@ impl Element for FlexRow {
             transform.height = transform.height.max(v + t.height);
             t.x += transform.x;
             t.y += transform.y + v;
-            v += t.height + self.gap;
+            v += t.height + self.gap + (t.py * 2);
             t.px += transform.px;
             t.py += transform.py;
 
@@ -123,7 +123,7 @@ impl Element for FlexCol {
             transform.height = transform.height.max(t.height + (t.py * 2));
             t.x += transform.x + v;
             t.y += transform.y;
-            v += t.width + self.gap;
+            v += t.width + self.gap + (t.px * 2);
             t.px += transform.px;
             t.py += transform.py;
 
diff --git a/src/main.rs b/src/main.rs
index 36a576b..1e23f4f 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -1,22 +1,10 @@
+mod demos;
 use osui::prelude::*;
 
 fn main() -> std::io::Result<()> {
     let screen = Screen::new();
-    screen.extension(VelocityExtension);
 
-    let count = use_state(0);
-
-    rsx! {
-        @Velocity(20, 0);
-        @Transform::new();
-        static "Count: {count}"
-    }
-    .draw(&screen);
-
-    std::thread::spawn(move || loop {
-        **count.get() += 1;
-        std::thread::sleep(std::time::Duration::from_millis(100));
-    });
+    demos::app().draw(&screen);
 
     screen.run()
 }
diff --git a/src/render_scope.rs b/src/render_scope.rs
index 42cdd4d..4fbaf18 100644
--- a/src/render_scope.rs
+++ b/src/render_scope.rs
@@ -105,8 +105,22 @@ impl RenderScope {
 
         match self.style.background {
             crate::style::Background::NoBackground => {}
-            crate::style::Background::Outline(_c) => {
-                // TODO: Implement basic outline drawing if needed
+            crate::style::Background::Outline(c) => {
+                let width = width + self.transform.px * 2;
+                let height = height + self.transform.py * 2;
+                if width > 1 && height > 1 {
+                    let d = "─".repeat(width as usize - 2);
+                    utils::print_liner(
+                        self.transform.x,
+                        self.transform.y,
+                        &utils::hex_ansi(c),
+                        &format!(
+                            "┌{d}┐{}\n└{d}┘",
+                            format!("\n│{}│", " ".repeat(width as usize - 2))
+                                .repeat(height as usize - 2),
+                        ),
+                    );
+                }
             }
             crate::style::Background::RoundedOutline(c) => {
                 let width = width + self.transform.px * 2;