diff --git a/src/lib.rs b/src/lib.rs
index 1501ee8..00d6e98 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -117,7 +117,7 @@ pub struct Writer {
     style: ui::StyleElement,
     focused: bool,
     size: (u16, u16),
-    absolute: (u16, u16),
+    pos: (u16, u16),
     written: (u16, u16),
 }
 
@@ -178,7 +178,14 @@ impl Document {
     pub fn render(&self) {
         if !self.element.is_null() {
             let (width, height) = crossterm::terminal::size().unwrap();
-            let mut frame = utils::Frame::new((0, 0), (width, height), &self.css);
+            let mut writer = Writer::new(
+                true,
+                ui::StyleElement::default(),
+                (0, 0),
+                (width, height),
+                &self.css,
+            );
+            let mut frame = writer.new_frame();
             utils::clear();
             frame.render(true, unsafe { &*self.element });
             utils::flush();
@@ -348,7 +355,7 @@ impl Writer {
     pub fn new(
         focused: bool,
         style: ui::StyleElement,
-        absolute: (u16, u16),
+        pos: (u16, u16),
         size: (u16, u16),
         css: &ui::Css,
     ) -> Writer {
@@ -357,7 +364,7 @@ impl Writer {
             style,
             focused,
             size,
-            absolute,
+            pos,
             written: (0, 0),
         }
     }
@@ -368,15 +375,15 @@ impl Writer {
             if self.style.outline.1 {
                 print!(
                     "\x1B[{};{}H{outline_ch}{}",
-                    self.absolute.1 + 2 + i as u16,
-                    self.absolute.0 + 1,
+                    self.pos.1 + 2 + i as u16,
+                    self.pos.0 + 1,
                     self.style.write(line),
                 );
             } else {
                 print!(
                     "\x1B[{};{}H{}",
-                    self.absolute.1 + 1 + i as u16,
-                    self.absolute.0 + 1,
+                    self.pos.1 + 1 + i as u16,
+                    self.pos.0 + 1,
                     self.style.write(line)
                 );
             }
@@ -390,8 +397,8 @@ impl Writer {
         if self.style.outline.1 {
             print!(
                 "\x1B[{};{}H{}",
-                self.absolute.1 + 1,
-                self.absolute.0 + 1,
+                self.pos.1 + 1,
+                self.pos.0 + 1,
                 self.style.write_outline(&format!(
                     "╭{}╮",
                     "─".repeat(self.get_size_root().0 as usize)
@@ -399,8 +406,8 @@ impl Writer {
             );
             print!(
                 "\x1B[{};{}H{}",
-                self.absolute.1 + self.written.1 + 2,
-                self.absolute.0 + 1,
+                self.pos.1 + self.written.1 + 2,
+                self.pos.0 + 1,
                 self.style.write_outline(&format!(
                     "╰{}╯",
                     "─".repeat(self.get_size_root().0 as usize)
@@ -410,8 +417,8 @@ impl Writer {
             for i in 0..self.written.1 {
                 print!(
                     "\x1B[{};{}H{outline_ch}",
-                    self.absolute.1 + i + 2,
-                    self.absolute.0 + self.get_size_root().0 + 2,
+                    self.pos.1 + i + 2,
+                    self.pos.0 + self.get_size_root().0 + 2,
                 );
             }
         }
@@ -448,7 +455,7 @@ impl Writer {
     }
 
     pub fn new_frame(&mut self) -> crate::utils::Frame {
-        crate::utils::Frame::new(self.absolute, self.get_size(), unsafe { &*self.css })
+        crate::utils::Frame::new(self, unsafe { &*self.css })
     }
 
     pub fn caret(&self) -> String {
diff --git a/src/main.rs b/src/main.rs
index 2349358..aabe9dd 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -6,13 +6,10 @@ fn main() {
 
 #[component]
 pub fn App() {
-    rsx! {
-        async {
-            sleep(3000);
-            ersx!(text {
-                "OK"
-            })
-        }
-        text { "Hello world!" }
+    ersx! {
+        text { style: style! {
+            x: 30 px,
+            y: 4 px
+        }, "hello, world" }
     }
 }
diff --git a/src/ui/styles.rs b/src/ui/styles.rs
index 8a00e89..02fceaa 100644
--- a/src/ui/styles.rs
+++ b/src/ui/styles.rs
@@ -329,7 +329,7 @@ impl Number {
             self.as_size_raw(frame_size)
         }
     }
-    pub fn as_position(&self, used: &u16, frame_size: u16) -> u16 {
+    pub fn as_position_raw(&self, used: &u16, frame_size: u16) -> u16 {
         match self {
             crate::ui::Number::Px(px) => *px,
             crate::ui::Number::Pe(pe) => (frame_size * pe) / 100,
@@ -337,4 +337,11 @@ impl Number {
             crate::ui::Number::Auto => *used,
         }
     }
+    pub fn as_position(&self, outline: bool, used: &u16, frame_size: u16) -> u16 {
+        if outline {
+            self.as_position_raw(used, frame_size) + 1
+        } else {
+            self.as_position_raw(used, frame_size)
+        }
+    }
 }
diff --git a/src/utils.rs b/src/utils.rs
index 549f584..d77f4f6 100644
--- a/src/utils.rs
+++ b/src/utils.rs
@@ -1,25 +1,17 @@
 use std::io::{stdout, Write};
 
-use crate::ui;
-
 pub struct Frame<'a> {
     used: Vec<u16>,
-    width: u16,
-    height: u16,
-    x: u16,
-    y: u16,
-    css: &'a ui::Css,
+    css: &'a crate::ui::Css,
+    writer: &'a mut crate::Writer,
 }
 
 impl<'a> Frame<'a> {
-    pub fn new((x, y): (u16, u16), (width, height): (u16, u16), css: &'a crate::ui::Css) -> Self {
+    pub fn new(writer: &'a mut crate::Writer, css: &'a crate::ui::Css) -> Self {
         Frame {
-            used: vec![0; height as usize],
-            width,
-            height,
-            x,
-            y,
+            used: vec![0; writer.size.1 as usize],
             css,
+            writer,
         }
     }
     pub fn render(&mut self, focused: bool, element: &crate::Element) {
@@ -27,11 +19,14 @@ impl<'a> Frame<'a> {
         let mut style_element = style.clone().get(focused);
 
         for class in element.get_class().split(" ") {
-            if let Some(upper) = self.css.get(&ui::StyleName::Class(class.to_string())) {
+            if let Some(upper) = self
+                .css
+                .get(&crate::ui::StyleName::Class(class.to_string()))
+            {
                 style_element.merge(upper);
             }
 
-            if let Some(upper) = self.css.get(&ui::StyleName::ClassState(
+            if let Some(upper) = self.css.get(&crate::ui::StyleName::ClassState(
                 class.to_string(),
                 if style.2 == "" && focused {
                     "hover".to_string()
@@ -45,6 +40,7 @@ impl<'a> Frame<'a> {
 
         if style_element.visible.1 {
             let y = style_element.y.1.as_position(
+                style_element.outline.1,
                 &{
                     let mut y = 0;
                     while y < self.used.len() && self.used[y] != 0 {
@@ -52,15 +48,19 @@ impl<'a> Frame<'a> {
                     }
                     y as u16
                 },
-                self.height,
+                self.writer.size.1,
             );
             if let Some(y_) = self.used.get(y as usize) {
-                let x = style_element.x.1.as_position(y_, self.width);
+                let x =
+                    style_element
+                        .x
+                        .1
+                        .as_position(style_element.outline.1, y_, self.writer.size.0);
                 let mut writer = crate::Writer::new(
                     focused,
                     style_element.clone(),
-                    (x + self.x, y + self.y),
-                    (self.width, self.height),
+                    (x, y),
+                    self.writer.size,
                     self.css,
                 );
                 element.render(&mut writer);