diff --git a/src/musicplayer/ui/layout.gleam b/src/musicplayer/ui/layout.gleam
index 7be89d4..90de3f8 100644
--- a/src/musicplayer/ui/layout.gleam
+++ b/src/musicplayer/ui/layout.gleam
@@ -24,15 +24,13 @@ pub type NodeType {
   Cell
 }
 
+pub type Style {
+  Style(width_percent: Int, height_percent: Int)
+}
+
 /// A Nodes width and height is in percentage (of the available width/height of its parent Node)
 pub type Node {
-  Node(
-    t: NodeType,
-    content: String,
-    width_percent: Int,
-    height_percent: Int,
-    children: List(Section),
-  )
+  Node(t: NodeType, content: String, style: Style, children: List(Section))
 }
 
 pub type Layout {
@@ -47,8 +45,7 @@ pub fn new() -> Layout {
         Node(
           t: Container,
           content: "Music Player",
-          width_percent: 100,
-          height_percent: 100,
+          style: Style(width_percent: 100, height_percent: 100),
           children: [Header, Search, PlaybackTime],
         ),
       ),
@@ -57,8 +54,7 @@ pub fn new() -> Layout {
         Node(
           t: Row,
           content: "Foo (1) | Bar (2) | Baz (3)",
-          width_percent: 100,
-          height_percent: 33,
+          style: Style(width_percent: 100, height_percent: 33),
           children: [],
         ),
       ),
@@ -67,8 +63,7 @@ pub fn new() -> Layout {
         Node(
           t: Row,
           content: "",
-          width_percent: 100,
-          height_percent: 33,
+          style: Style(width_percent: 100, height_percent: 33),
           children: [],
         ),
       ),
@@ -77,8 +72,7 @@ pub fn new() -> Layout {
         Node(
           t: Row,
           content: "00:00",
-          width_percent: 100,
-          height_percent: 33,
+          style: Style(width_percent: 100, height_percent: 33),
           children: [],
         ),
       ),
@@ -174,12 +168,12 @@ pub fn render_generic(
       let margin = 2.0
 
       let width =
-        container_width *. { int.to_float(node.width_percent) /. 100.0 }
+        container_width *. { int.to_float(node.style.width_percent) /. 100.0 }
         |> float.floor
         |> float.truncate
 
       let height =
-        container_height *. { int.to_float(node.height_percent) /. 100.0 }
+        container_height *. { int.to_float(node.style.height_percent) /. 100.0 }
         |> float.floor
         |> float.truncate
 
@@ -193,7 +187,7 @@ pub fn render_generic(
         render_into
         |> renders.box(cx, cy, width, height)
         // + 2 for header margin
-        |> renders.text(node.content, cx + 2, cy)
+        |> renders.text(node.content, cx, cy)
 
       list.index_map(node.children, fn(child, i) { #(i, child) })
       |> list.fold(parent, fn(acc_into, ic) {
@@ -201,13 +195,13 @@ pub fn render_generic(
 
         let cw =
           container_width
-          *. { int.to_float(node.width_percent) /. 100.0 }
+          *. { int.to_float(node.style.width_percent) /. 100.0 }
           -. margin
           |> float.floor
 
         let ch =
           container_height
-          *. { int.to_float(node.height_percent) /. 100.0 }
+          *. { int.to_float(node.style.height_percent) /. 100.0 }
           -. margin
           |> float.floor
 
diff --git a/src/musicplayer/ui/layout_examples/layout_examples.gleam b/src/musicplayer/ui/layout_examples/layout_examples.gleam
index 6bcfbfa..29b1bcc 100644
--- a/src/musicplayer/ui/layout_examples/layout_examples.gleam
+++ b/src/musicplayer/ui/layout_examples/layout_examples.gleam
@@ -1,7 +1,7 @@
 import gleam/dict
 
 import musicplayer/ui/internal
-import musicplayer/ui/layout.{Container, Layout, Node, Section}
+import musicplayer/ui/layout.{Container, Layout, Node, Section, Style}
 import musicplayer/ui/layout_examples/wait_for_input.{wait_for_input}
 
 pub fn main() {
@@ -25,8 +25,7 @@ fn two_rows_with_cells(width: Int, height: Int) -> layout.Layout {
         Node(
           t: Container,
           content: "container",
-          width_percent: 100,
-          height_percent: 100,
+          style: Style(width_percent: 100, height_percent: 100),
           children: [
             Section("Row1"),
             Section("Row2"),
@@ -38,8 +37,7 @@ fn two_rows_with_cells(width: Int, height: Int) -> layout.Layout {
         Node(
           t: layout.Row,
           content: "row 1",
-          width_percent: 100,
-          height_percent: 50,
+          style: Style(width_percent: 100, height_percent: 50),
           children: [
             Section("A"),
             Section("A"),
@@ -51,8 +49,7 @@ fn two_rows_with_cells(width: Int, height: Int) -> layout.Layout {
         Node(
           t: layout.Cell,
           content: "cell 1",
-          width_percent: 50,
-          height_percent: 100,
+          style: Style(width_percent: 50, height_percent: 100),
           children: [],
         ),
       ),
@@ -61,8 +58,7 @@ fn two_rows_with_cells(width: Int, height: Int) -> layout.Layout {
         Node(
           t: layout.Cell,
           content: "cell 2",
-          width_percent: 50,
-          height_percent: 100,
+          style: Style(width_percent: 50, height_percent: 100),
           children: [],
         ),
       ),
@@ -71,8 +67,7 @@ fn two_rows_with_cells(width: Int, height: Int) -> layout.Layout {
         Node(
           t: layout.Row,
           content: "row 2",
-          width_percent: 100,
-          height_percent: 50,
+          style: Style(width_percent: 100, height_percent: 50),
           children: [],
         ),
       ),
diff --git a/test/musicplayer/ui/layout_test.gleam b/test/musicplayer/ui/layout_test.gleam
index 4b8aef5..8a7ee35 100644
--- a/test/musicplayer/ui/layout_test.gleam
+++ b/test/musicplayer/ui/layout_test.gleam
@@ -5,7 +5,7 @@ import gleeunit
 import gleeunit/should
 import musicplayer/ui/virtual_ansi
 
-import musicplayer/ui/layout.{Layout, Node, Section}
+import musicplayer/ui/layout.{Layout, Node, Section, Style}
 
 pub fn main() -> Nil {
   gleeunit.main()
@@ -22,8 +22,7 @@ pub fn foo_test() {
           Node(
             t: layout.Container,
             content: "container",
-            width_percent: 100,
-            height_percent: 100,
+            style: Style(width_percent: 100, height_percent: 100),
             children: [
               Section("Row1"),
               Section("Row2"),
@@ -35,8 +34,7 @@ pub fn foo_test() {
           Node(
             t: layout.Row,
             content: "row 1",
-            width_percent: 100,
-            height_percent: 50,
+            style: Style(width_percent: 100, height_percent: 50),
             children: [
               Section("A"),
               Section("B"),
@@ -48,8 +46,7 @@ pub fn foo_test() {
           Node(
             t: layout.Cell,
             content: "cell 1",
-            width_percent: 50,
-            height_percent: 100,
+            style: Style(width_percent: 50, height_percent: 100),
             children: [],
           ),
         ),
@@ -58,8 +55,7 @@ pub fn foo_test() {
           Node(
             t: layout.Cell,
             content: "cell 2",
-            width_percent: 50,
-            height_percent: 100,
+            style: Style(width_percent: 50, height_percent: 100),
             children: [],
           ),
         ),
@@ -68,8 +64,7 @@ pub fn foo_test() {
           Node(
             t: layout.Row,
             content: "row 1",
-            width_percent: 100,
-            height_percent: 50,
+            style: Style(width_percent: 100, height_percent: 50),
             children: [],
           ),
         ),