diff --git a/src/app/app_win32.c b/src/app/app_win32.c
index 7ab2f42..65cb404 100644
--- a/src/app/app_win32.c
+++ b/src/app/app_win32.c
@@ -7,7 +7,7 @@
 #pragma comment(lib, "user32.lib")
 #pragma comment(lib, "winmm.lib")
 
-fn void app_init(void);
+fn void app_init(f32 dpr);
 fn b32 app_update(app_frame_t *frame);
 
 gb b32       w32_good_scheduling;
@@ -355,7 +355,7 @@ int WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int n
         refresh_rate = (f64)devmodew.dmDisplayFrequency;
     }
 
-    app_init();
+    app_init(w32_get_dpr(w32_window_handle));
 
     f64 time_frame_start = w32_seconds_now();
     f64 time_delta = 1.0 / refresh_rate;
diff --git a/src/core/core_lexer.c b/src/core/core_lexer.c
index 87aa300..3ef0fbb 100644
--- a/src/core/core_lexer.c
+++ b/src/core/core_lexer.c
@@ -30,6 +30,28 @@ fn void lex_eat_whitespace(lexer_t *lex) {
     while (char_is_whitespace(lex->at[0])) lex_advance(lex);
 }
 
+fn void lex_suffix(lexer_t *lex, lex_t *token) {
+    if (lex_match(lex, 'f')) {
+        token->kind = lex_kind_real;
+        token->suffix = lex_suffix_f;
+    } else if (lex_match(lex, 'd')) {
+        token->kind = lex_kind_real;
+        token->suffix = lex_suffix_d;
+    } else if (token->kind == lex_kind_integer && ((lex->at[0] == 'u' && lex->at[1] == 'l' && lex->at[2] == 'l') || (lex->at[0] == 'U' && lex->at[1] == 'L' && lex->at[2] == 'L'))) {
+        token->suffix = lex_suffix_ull;
+        lex_advance(lex); lex_advance(lex); lex_advance(lex);
+    } else if (token->kind == lex_kind_integer && ((lex->at[0] == 'u' && lex->at[1] == 'l') || (lex->at[0] == 'U' && lex->at[1] == 'L'))) {
+        token->suffix = lex_suffix_ul;
+        lex_advance(lex); lex_advance(lex);
+    } else if (token->kind == lex_kind_integer && (lex->at[0] == 'l' || lex->at[0] == 'L')) {
+        token->suffix = lex_suffix_l;
+        lex_advance(lex);
+    } else if (token->kind == lex_kind_integer && ((lex->at[0] == 'l' && lex->at[1] == 'l') || (lex->at[0] == 'L' && lex->at[1] == 'L'))) {
+        token->suffix = lex_suffix_ll;
+        lex_advance(lex); lex_advance(lex);
+    }
+}
+
 fn void lex_eat_number(lexer_t *lex, lex_t *token) {
     token->kind = lex_kind_integer;
     for (;;) {
@@ -50,25 +72,7 @@ fn void lex_eat_number(lexer_t *lex, lex_t *token) {
         break;
     }
 
-    if (lex_match(lex, 'f')) {
-        token->kind = lex_kind_real;
-        token->suffix = lex_suffix_f;
-    } else if (lex_match(lex, 'd')) {
-        token->kind = lex_kind_real;
-        token->suffix = lex_suffix_d;
-    } else if (token->kind == lex_kind_integer && ((lex->at[0] == 'u' && lex->at[1] == 'l' && lex->at[2] == 'l') || (lex->at[0] == 'U' && lex->at[1] == 'L' && lex->at[2] == 'L'))) {
-        token->suffix = lex_suffix_ull;
-        lex_advance(lex); lex_advance(lex); lex_advance(lex);
-    } else if (token->kind == lex_kind_integer && ((lex->at[0] == 'u' && lex->at[1] == 'l') || (lex->at[0] == 'U' && lex->at[1] == 'L'))) {
-        token->suffix = lex_suffix_ul;
-        lex_advance(lex); lex_advance(lex);
-    } else if (token->kind == lex_kind_integer && (lex->at[0] == 'l' || lex->at[0] == 'L')) {
-        token->suffix = lex_suffix_l;
-        lex_advance(lex);
-    } else if (token->kind == lex_kind_integer && ((lex->at[0] == 'l' && lex->at[1] == 'l') || (lex->at[0] == 'L' && lex->at[1] == 'L'))) {
-        token->suffix = lex_suffix_ll;
-        lex_advance(lex); lex_advance(lex);
-    }
+    lex_suffix(lex, token);
 }
 
 fn void lex_eat_until(lexer_t *lex, char c) {
diff --git a/src/render/render_opengl.c b/src/render/render_opengl.c
index 53bb4f7..5df8f39 100644
--- a/src/render/render_opengl.c
+++ b/src/render/render_opengl.c
@@ -147,6 +147,17 @@ void rn_draw_rect(r2f32_t rect, v4f32_t color) {
     rn_push_quad(rect, rn_state.main_font.white_texture_bounding_box, color);
 }
 
+void rn_draw_rect_border(r2f32_t rect, v4f32_t color) {
+    r2f32_t left = r2f32_cut_left(&rect, 1);
+    r2f32_t right = r2f32_cut_right(&rect, 1);
+    r2f32_t top = r2f32_cut_top(&rect, 1);
+    r2f32_t bottom = r2f32_cut_bottom(&rect, 1);
+    rn_push_quad(left, rn_state.main_font.white_texture_bounding_box, color);
+    rn_push_quad(right, rn_state.main_font.white_texture_bounding_box, color);
+    rn_push_quad(top, rn_state.main_font.white_texture_bounding_box, color);
+    rn_push_quad(bottom, rn_state.main_font.white_texture_bounding_box, color);
+}
+
 i64 rn_get_char_spacing(rn_font_t *font, u32 codepoint) {
     rn_glyph_t *g = rn_get_glyph(font, codepoint);
     if (g->xadvance) return (i64)g->xadvance;
@@ -190,7 +201,7 @@ v2f32_t rn_measure_string(rn_font_t *font, s8_t string) {
     return rn_base_draw_string(font, string, v2f32(0,0), v4f32(0,0,0,0), false);
 }
 
-void rn_init(ma_arena_t *perm) {
+void rn_init(ma_arena_t *perm, f32 _font_size) {
     rn_state.cap = 1024*256;
     rn_state.vertices = ma_push_array(perm, rn_vertex_t, rn_state.cap);
 
@@ -199,7 +210,7 @@ void rn_init(ma_arena_t *perm) {
         s8_t font_data = rn_get_default_font(tcx.temp);
         rn_atlas_t *atlas = rn_create_atlas(scratch.arena, (v2i32_t){2048, 2048});
 
-        u32 font_size = 50;
+        u32 font_size = (u32)_font_size;
         rn_state.main_font = rn_create_font(perm, font_data, atlas, font_size);
 
         GLint filter = GL_NEAREST;
diff --git a/src/wasm_app/main.c b/src/wasm_app/main.c
index 65375ce..8d206ec 100644
--- a/src/wasm_app/main.c
+++ b/src/wasm_app/main.c
@@ -1,5 +1,6 @@
 #include "core/core_inc.h"
 #include "app/app.h"
+#include "ui.h"
 
 #include "core/core_inc.c"
 #include "app/app.c"
@@ -11,6 +12,7 @@
 #include "render/render_opengl.c"
 // #include "gfx2d/gfx2d.c"dv
 
+#include "ui_iter.c"
 #include "ui.c"
 
 /*
@@ -31,48 +33,61 @@ struct globals_t {
 gb globals_t *globals;
 
 
-fn void app_init(void) {
+fn void app_init(f32 dpr) {
     ma_arena_t *perm = &tcx._perm;
     globals = ma_push_type(perm, globals_t);
     ma_arena_t *ui_arena = ma_push_arena(perm, mib(1));
     ui_init(ui_arena);
-    rn_init(perm);
+    rn_init(perm, 50 * dpr);
+}
+
+fn f32 get_font_size(void) {
+    f32 size = rn_state.main_font.size;
+    return size;
 }
 
 fn b32 app_update(app_frame_t *frame) {
     assert(frame != NULL);
     ui_begin_frame(frame);
 
-
-
+    v2f32_t size = rn_measure_string(&rn_state.main_font, s8_lit("a"));
+    unused(size);
     assert(frame->first_event);
 
     for (app_event_t *ev = frame->first_event; ev; ev = ev->next) {
         defer_block(ui_begin_build(UI_CODE_LOC, ev), ui_end_build()) {
-            defer_block(ui_push_list_container(UI_CODE_LOC), ui_pop_parent()) {
-                defer_if (ui_push_exp(UI_CODE_LOC, "app_event_t").clicked, ui_pop_exp()) {
-                    defer_if (ui_push_exp(UI_CODE_LOC, "mouse_wheel_delta: v3f64_t").clicked, ui_pop_exp()) {
-                        ui_label(UI_CODE_LOC, "x: f64 = value");
-                        ui_label(UI_CODE_LOC, "y: f64 = value");
-                        ui_label(UI_CODE_LOC, "z: f64 = value");
-                    }
-                    ui_label(UI_CODE_LOC, "kind: app_event_kind_t = value");
-                    ui_label(UI_CODE_LOC, "ctrl: b8 = value");
-                    ui_label(UI_CODE_LOC, "shift: b8 = value");
-                    defer_if (ui_push_exp(UI_CODE_LOC, "pos: v2f64_t").clicked, ui_pop_exp()) {
-                        defer_if (ui_push_exp(UI_CODE_LOC, "inner_pos: v2f64_t##asd").clicked, ui_pop_exp()) {
+            defer_block(ui_push_xcontainer(UI_CODE_LOC, ui_em(25), ui_em(30)), ui_pop_parent()) {
+                defer_block(ui_push_container(UI_CODE_LOC, ui_percent(97), ui_percent(100)), ui_pop_parent()) {
+                    defer_if (ui_push_exp(UI_CODE_LOC, "app_event_t").clicked, ui_pop_exp()) {
+                        defer_if (ui_push_exp(UI_CODE_LOC, "mouse_wheel_delta: v3f64_t").clicked, ui_pop_exp()) {
                             ui_label(UI_CODE_LOC, "x: f64 = value");
                             ui_label(UI_CODE_LOC, "y: f64 = value");
+                            ui_label(UI_CODE_LOC, "z: f64 = value");
                         }
-                        defer_if (ui_push_exp(UI_CODE_LOC, "inner_pos: v2f64_t##qwe").clicked, ui_pop_exp()) {
-                            ui_label(UI_CODE_LOC, "x: f64 = value");
-                            ui_label(UI_CODE_LOC, "y: f64 = value");
+                        ui_label(UI_CODE_LOC, "kind: app_event_kind_t = value");
+                        ui_label(UI_CODE_LOC, "ctrl: b8 = value");
+                        ui_label(UI_CODE_LOC, "shift: b8 = value");
+                        defer_if (ui_push_exp(UI_CODE_LOC, "pos: v2f64_t").clicked, ui_pop_exp()) {
+                            defer_if (ui_push_exp(UI_CODE_LOC, "inner_pos: v2f64_t##asd").clicked, ui_pop_exp()) {
+                                ui_label(UI_CODE_LOC, "x: f64 = value");
+                                ui_label(UI_CODE_LOC, "y: f64 = value");
+                            }
+                            defer_if (ui_push_exp(UI_CODE_LOC, "inner_pos: v2f64_t##qwe").clicked, ui_pop_exp()) {
+                                ui_label(UI_CODE_LOC, "x: f64 = value");
+                                ui_label(UI_CODE_LOC, "y: f64 = value");
 
+                            }
+                            ui_label(UI_CODE_LOC, "y: f64 = value");
                         }
-                        ui_label(UI_CODE_LOC, "y: f64 = value");
+                        ui_label(UI_CODE_LOC, "alt: b8 = value");
+                        ui_label(UI_CODE_LOC, "meta: b8 = value");
                     }
-                    ui_label(UI_CODE_LOC, "alt: b8 = value");
-                    ui_label(UI_CODE_LOC, "meta: b8 = value");
+                }
+
+                // scroller
+                {
+                    ui_push_container(UI_CODE_LOC, ui_percent(3), ui_percent(100));
+                    ui_pop_parent();
                 }
             }
         }
diff --git a/src/wasm_app/ui.c b/src/wasm_app/ui.c
index 0ab1c03..be6c580 100644
--- a/src/wasm_app/ui.c
+++ b/src/wasm_app/ui.c
@@ -1,133 +1,3 @@
-/*
-** [ ] Choosing a keying strategy from user code
-**  [ ] Using parents
-**  [ ] Using file and line
-** [ ] Keyboard friendliness
-** [ ] ui_em size
-** [ ] strict
-*/
-
-typedef struct ui_id_t ui_id_t;
-struct ui_id_t {
-    u64 value;
-};
-
-typedef struct ui_code_loc_t ui_code_loc_t;
-struct ui_code_loc_t {
-    char *file;
-    int line;
-    int counter;
-};
-#define UI_CODE_LOC (ui_code_loc_t){.file = __FILE__, .line = __LINE__, .counter = __COUNTER__}
-
-typedef enum {
-    ui_axis2_x,
-    ui_axis2_y,
-    ui_axis2_count,
-} ui_axis2_t;
-
-typedef enum {
-    ui_size_kind_null,
-    ui_size_kind_pixels,
-    ui_size_kind_text_content,
-    ui_size_kind_percent_of_parent,
-    ui_size_kind_children_sum,
-} ui_size_kind_t;
-
-typedef struct ui_size_t ui_size_t;
-struct ui_size_t {
-    ui_size_kind_t kind;
-    f32 value;
-    f32 strictness;
-};
-
-typedef enum {
-    ui_box_flag_none = 0,
-} ui_box_flag_t;
-
-typedef struct ui_box_t ui_box_t;
-struct ui_box_t {
-    // recreated every frame in building code
-    ui_box_t *next;
-    ui_box_t *prev;
-    ui_box_t *parent;
-    ui_box_t *first;
-    ui_box_t *last;
-    s8_t      string;
-    ui_size_t semantic_size[ui_axis2_count];
-    b32       grow_axis[ui_axis2_count];
-    ui_code_loc_t loc;
-
-    // preserving state
-    ui_id_t   id; // important position!: offset(id) used for partial zeroing
-    u64       last_touched_event_id;
-    ui_box_t *hash_next;
-    ui_box_t *hash_prev;
-
-    // computed by layout system every frame
-    f32     iter_pos[ui_axis2_count];
-    f32     computed_rel_pos[ui_axis2_count];
-    f32     computed_size[ui_axis2_count];
-    r2f32_t rect;
-
-    // state
-    b32 expanded;
-};
-
-typedef struct ui_signal_t ui_signal_t;
-struct ui_signal_t {
-    b8 clicked;
-    b8 double_clicked;
-    b8 right_clicked;
-    b8 pressed;
-    b8 released;
-    b8 dragging;
-    b8 hovering;
-};
-
-typedef enum {
-    ui_id_strategy_null          = 0,
-    ui_id_strategy_use_hierarchy = set_bit(0),
-    ui_id_strategy_use_code_loc  = set_bit(1),
-    ui_id_strategy_use_string    = set_bit(2),
-} ui_id_strategy_t;
-
-typedef struct ui_t ui_t;
-struct ui_t {
-    ma_arena_t *box_arena; // required to be only used for boxes
-    app_event_t *event;
-    app_frame_t *frame;
-
-    i32 allocated_boxes;
-    ui_box_t *box_array; // first item on arena
-    ui_box_t *root;
-    ui_box_t *top;
-
-    ui_box_t *free_first;
-    ui_box_t *hash_first;
-    ui_box_t *hash_last;
-
-    ui_id_t hot;
-    ui_id_t active;
-
-    STACK(ui_id_t, 256) id_stack;
-    int indent_stack;
-    ui_id_strategy_t id_strategy;
-};
-
-gb ui_t *ui = NULL;
-gb_read_only ui_id_t ui_id_null;
-gb_read_only ui_box_t ui_box_null;
-
-fn b32 ui_is_null_id(ui_id_t id) { return id.value == 0; }
-fn b32 ui_is_null_box(ui_box_t *box) { return box->id.value == 0; }
-fn b32 ui_is_hot_box(ui_box_t *box) { return !ui_is_null_box(box) && box->id.value == ui->hot.value; }
-fn b32 ui_is_active_box(ui_box_t *box) { return !ui_is_null_box(box) && box->id.value == ui->active.value; }
-
-#define ev_left(ev) ((ev)->mouse_button == app_mouse_button_left)
-#define ev_left_up(ev) ((ev)->kind == app_event_kind_mouse_up && ev_left(ev))
-#define ev_left_down(ev) ((ev)->kind == app_event_kind_mouse_down && ev_left(ev))
-
 fn s8_t ui_get_display_string(s8_t string) {
     s8_t result = string;
     if (s8_seek(result, s8_lit("##"), s8_seek_none, &result.len)) {
@@ -148,7 +18,7 @@ fn ui_id_t ui_find_valid_id(ui_box_t *box) {
     for (ui_box_t *it = box; it; it = it->parent) {
         if (!ui_is_null_box(it)) return it->id;
     }
-    return ui_id_null;
+    return ui_null_id;
 }
 
 fn ui_id_t ui_find_top_id(void) {
@@ -183,11 +53,16 @@ fn void ui_push_box(ui_box_t *box) {
     DLLQ_APPEND(ui->top->first, ui->top->last, box);
 }
 
+fn void ui_set_semantic_size(ui_box_t *box, ui_size_t x, ui_size_t y) {
+    box->semantic_size[0] = x;
+    box->semantic_size[1] = y;
+}
+
 fn s8_t ui_tprint_loc(ui_code_loc_t loc) {
     return s8_printf(tcx.temp, "%s(%d)", loc.file, loc.line);
 }
 
-fn ui_box_t *ui_build_box_from_id(ui_code_loc_t loc, ui_id_t id) {
+fn ui_box_t *ui_build_box_from_id(ui_code_loc_t loc, ui_id_t id, ui_box_flag_t flags) {
     ui_box_t *box = ui_find_box(id);
     if (box) {
         expect (box->last_touched_event_id != ui->event->id) {
@@ -196,11 +71,13 @@ fn ui_box_t *ui_build_box_from_id(ui_code_loc_t loc, ui_id_t id) {
         memory_zero(box, offsetof(ui_box_t, id));
     } else {
         box = ui_alloc_box();
+        box->created_new = true;
         DLLQ_APPEND_EX(ui->hash_first, ui->hash_last, box, hash_next, hash_prev);
     }
     box->loc = loc;
     box->last_touched_event_id = ui->event->id;
     box->id = id;
+    box->flags = flags;
     ui_push_box(box);
     return box;
 }
@@ -208,15 +85,15 @@ fn ui_box_t *ui_build_box_from_id(ui_code_loc_t loc, ui_id_t id) {
 fn ui_id_t ui_gen_id(ui_id_strategy_t strat, ui_code_loc_t loc, s8_t string) {
     assert(strat != 0);
     u64 result = 42523423493;
-    if (strat & ui_id_strategy_use_string) {
+    if (is_flag_set(strat, ui_id_strategy_use_string)) {
         u64 string_hash = hash_data(string);
         result = hash_mix(string_hash, result);
     }
-    if (strat & ui_id_strategy_use_hierarchy) {
+    if (is_flag_set(strat, ui_id_strategy_use_hierarchy)) {
         ui_id_t top_id = ui_find_top_id();
         result = hash_mix(top_id.value, result);
     }
-    if (strat & ui_id_strategy_use_code_loc) {
+    if (is_flag_set(strat, ui_id_strategy_use_code_loc)) {
         u64 file_hash = hash_data(s8_from_char(loc.file));
         u64 line_hash = hash_data(s8_struct(loc.line));
         u64 cont_hash = hash_data(s8_struct(loc.counter));
@@ -228,9 +105,9 @@ fn ui_id_t ui_gen_id(ui_id_strategy_t strat, ui_code_loc_t loc, s8_t string) {
     return id;
 }
 
-fn ui_box_t *ui_build_box_from_string(ui_code_loc_t loc, s8_t string) {
+fn ui_box_t *ui_build_box_from_string(ui_code_loc_t loc, s8_t string, ui_box_flag_t flags) {
     ui_id_t id = ui_gen_id(ui->id_strategy, loc, ui_get_hash_string(string));
-    ui_box_t *box = ui_build_box_from_id(loc, id);
+    ui_box_t *box = ui_build_box_from_id(loc, id, flags);
     box->string = ui_get_display_string(string);
     return box;
 }
@@ -257,7 +134,7 @@ fn ui_signal_t ui_signal_from_box(ui_box_t *box) {
     if (inside) {
         ui->hot.value = box->id.value;
     } else if (!inside && ui_is_hot_box(box)) {
-        ui->hot = ui_id_null;
+        ui->hot = ui_null_id;
     }
 
     return result;
@@ -269,7 +146,7 @@ fn void ui_init(ma_arena_t *arena) {
     ui = ma_push_type(arena, ui_t);
     ui->box_arena = arena;
     ui->root = ma_push_type(arena, ui_box_t);
-    ui->id_strategy = ui_id_strategy_use_string | ui_id_strategy_use_code_loc;
+    ui->id_strategy = flag2(ui_id_strategy_use_string, ui_id_strategy_use_code_loc);
 
     ui->box_array = ma_push_type(arena, ui_box_t);
     SLLS_PUSH(ui->free_first, ui->box_array);
@@ -320,37 +197,35 @@ fn ui_box_t *ui_pop_parent(void) {
     return top;
 }
 
-fn ui_box_t *ui_spacer(ui_code_loc_t loc, char *spacing_char) {
-    ui_box_t *box = ui_build_box_from_id(loc, ui_id_null);
-    v2f32_t spacing = rn_measure_string(&rn_state.main_font, s8_from_char(spacing_char));
-    box->semantic_size[0] = (ui_size_t){ui_size_kind_pixels, spacing.x, 0.5};
-    box->semantic_size[1] = (ui_size_t){ui_size_kind_pixels, 10, 0.5};
-    return box;
-}
-
-fn ui_box_t *ui_push_list_container(ui_code_loc_t loc) {
-    ui_box_t *box = ui_build_box_from_id(loc, ui_id_null);
+fn ui_box_t *ui_push_container(ui_code_loc_t loc, ui_size_t x, ui_size_t y) {
+    ui_box_t *box = ui_build_box_from_id(loc, ui_null_id, flag2(ui_box_flag_draw_rect, ui_box_flag_draw_border));
     ui_push_top(box);
-    box->semantic_size[0] = (ui_size_t){ui_size_kind_children_sum, 0, 0.5};
-    box->semantic_size[1] = (ui_size_t){ui_size_kind_children_sum, 0, 0.5};
-    box->grow_axis[1] = true;
+    ui_set_semantic_size(box, x, y);
+    box->grow_axis = ui_axis2_y;
     return box;
 }
 
-fn void ui_push_indent(void) { ui->indent_stack += 1; }
-fn void ui_pop_indent(void) { ui->indent_stack -= 1; }
+fn ui_box_t *ui_push_xcontainer(ui_code_loc_t loc, ui_size_t x, ui_size_t y) {
+    ui_box_t *box = ui_push_container(loc, x, y);
+    box->grow_axis = ui_axis2_x;
+    return box;
+}
+
+fn ui_box_t *ui_push_list_container(ui_code_loc_t loc, ui_size_t size) {
+    return ui_push_container(loc, size, ui_children_sum());
+}
+
 fn void ui_set_indented_string(ui_box_t *box, s8_t string) { box->string = s8_printf(tcx.temp, "%.*s%S", ui->indent_stack, "                                                                               ", string); }
 
 fn ui_signal_t ui_push_exp(ui_code_loc_t loc, char *str, ...) {
     S8_FMT(tcx.temp, str, string);
-    ui_box_t *box = ui_build_box_from_string(loc, string);
-    box->semantic_size[0] = (ui_size_t){ui_size_kind_text_content, 0, 0.5};
-    box->semantic_size[1] = (ui_size_t){ui_size_kind_text_content, 0, 0.5};
+    ui_box_t *box = ui_build_box_from_string(loc, string, flag2(ui_box_flag_draw_rect, ui_box_flag_draw_text));
+    ui_set_semantic_size(box, ui_percent(100), ui_text());
+
+    if (box->created_new) box->expanded = true;
 
     ui_signal_t signal = ui_signal_from_box(box);
-    if (signal.clicked) {
-        box->expanded = !box->expanded;
-    }
+    if (signal.clicked) box->expanded = !box->expanded;
     signal.clicked = box->expanded;
 
     if (signal.clicked) {
@@ -361,138 +236,43 @@ fn ui_signal_t ui_push_exp(ui_code_loc_t loc, char *str, ...) {
     ui_set_indented_string(box, box->string);
 
 
-    if (signal.clicked) {
-        ui->indent_stack += 1;
-        STACK_PUSH(ui->id_stack, box->id);
-    }
+    if (signal.clicked) ui->indent_stack += 1;
     return signal;
 }
 
 fn void ui_pop_exp(void) {
     ui->indent_stack -= 1;
-    STACK_POP(ui->id_stack);
 }
 
 fn ui_box_t *ui_label(ui_code_loc_t loc, char *fmt, ...) {
     S8_FMT(tcx.temp, fmt, string);
-    ui_box_t *box = ui_build_box_from_id(loc, ui_id_null);
+    ui_box_t *box = ui_build_box_from_id(loc, ui_null_id, flag2(ui_box_flag_draw_rect, ui_box_flag_draw_text));
     ui_set_indented_string(box, string);
-    box->semantic_size[0] = (ui_size_t){ui_size_kind_text_content, 0, 0.5};
-    box->semantic_size[1] = (ui_size_t){ui_size_kind_text_content, 0, 0.5};
+    ui_set_semantic_size(box, ui_text(), ui_text());
     return box;
 }
 
-typedef struct ui_preorder_iter_t ui_preorder_iter_t;
-struct ui_preorder_iter_t { ui_box_t *box; };
-
-fn ui_preorder_iter_t ui_iterate_preorder(ui_box_t *box) {
-    ui_preorder_iter_t iter = {box};
-    return iter;
-}
-
-fn b32 ui_preorder_iter_is_valid(ui_preorder_iter_t iter) {
-    b32 result = iter.box != NULL;
-    return result;
-}
-
-fn void ui_iter_advance_preorder(ui_preorder_iter_t *iter) {
-    if (iter->box->first) {
-        iter->box = iter->box->first;
-        return;
-    }
-    while (iter->box) {
-        if (iter->box->next) {
-            iter->box = iter->box->next;
-            break;
-        } else {
-            iter->box = iter->box->parent;
-        }
-    }
-}
-
-typedef struct ui_postorder_iter_t ui_postorder_iter_t;
-struct ui_postorder_iter_t { ui_box_t *box; };
-
-fn ui_postorder_iter_t ui_iterate_postorder(ui_box_t *box) {
-    while (box->first) {
-        box = box->first;
-    }
-    ui_postorder_iter_t iter = {box};
-    return iter;
-}
-
-fn b32 ui_postorder_iter_is_valid(ui_postorder_iter_t iter) {
-    b32 result = iter.box != NULL;
-    return result;
-}
-
-fn void ui_iter_advance_postorder(ui_postorder_iter_t *iter) {
-    while (iter->box) {
-        if (iter->box->next) {
-            iter->box = iter->box->next;
-            while (iter->box->first) {
-                iter->box = iter->box->first;
-            }
-            break;
-        } else {
-            iter->box = iter->box->parent;
-            break;
-        }
-    }
-}
-
-fn void ui_test_stringify_preorder(sb8_t *sb, ui_box_t *box) {
-    sb8_printf(sb, "%S\n", box->string);
-    for (ui_box_t *it = box->first; it; it = it->next) {
-        ui_test_stringify_preorder(sb, it);
-    }
-}
-
-fn void ui_test_stringify_postorder(sb8_t *sb, ui_box_t *box) {
-    for (ui_box_t *it = box->first; it; it = it->next) {
-        ui_test_stringify_postorder(sb, it);
-    }
-    sb8_printf(sb, "%S\n", box->string);
-}
-
 fn void ui_end_frame(void) {
     for (app_event_t *ev = ui->frame->first_event; ev; ev = ev->next) {
         if (ev_left_up(ev)) {
-            ui->active = ui_id_null;
+            ui->active = ui_null_id;
         }
     }
 }
 
 fn void ui_draw(void) {
     rn_font_t *font = &rn_state.main_font;
-
-    {
-        ma_temp_t scratch = ma_begin_scratch();
-
-        sb8_t *sb = sb8_serial_begin(scratch.arena);
-        ui_test_stringify_preorder(sb, ui->root);
-        s8_t recursive_string = sb8_serial_end(scratch.arena, sb);
-
-        sb = sb8_serial_begin(scratch.arena);
-        for (ui_preorder_iter_t it = ui_iterate_preorder(ui->root); ui_preorder_iter_is_valid(it); ui_iter_advance_preorder(&it)) {
-            sb8_printf(sb, "%S\n", it.box->string);
-        }
-        s8_t iter_string = sb8_serial_end(scratch.arena, sb);
-
-        assert(s8_equal(recursive_string, iter_string));
-
-        ma_end_scratch(scratch);
-    }
+    ui_test_iterator();
 
     // compute standalone sizes: (pixels, text_content)
     for (ui_preorder_iter_t it = ui_iterate_preorder(ui->root); ui_preorder_iter_is_valid(it); ui_iter_advance_preorder(&it)) {
         ui_box_t *box = it.box;
-        for (i32 i = 0; i < ui_axis2_count; i += 1) {
-            ui_size_t sem = box->semantic_size[i];
+        for (ui_axis2_t axis = 0; axis < ui_axis2_count; axis += 1) {
+            ui_size_t sem = box->semantic_size[axis];
             if (sem.kind == ui_size_kind_pixels) {
-                box->computed_size[i] = sem.value;
+                box->computed_size[axis] = sem.value;
             } else if (sem.kind == ui_size_kind_text_content) {
-                box->computed_size[i] = rn_measure_string(font, box->string).e[i];
+                box->computed_size[axis] = rn_measure_string(font, box->string).e[axis];
             }
         }
     }
@@ -501,14 +281,14 @@ fn void ui_draw(void) {
     for (ui_preorder_iter_t it = ui_iterate_preorder(ui->root); ui_preorder_iter_is_valid(it); ui_iter_advance_preorder(&it)) {
         ui_box_t *box = it.box;
         ui_box_t *parent = box->parent; // @todo: I'm not sure why Ryan uses a loop to find a parent with fixed size_kind
-        for (i32 i = 0; i < ui_axis2_count; i += 1) {
-            ui_size_t sem = box->semantic_size[i];
+        for (ui_axis2_t axis = 0; axis < ui_axis2_count; axis += 1) {
+            ui_size_t sem = box->semantic_size[axis];
             if (sem.kind == ui_size_kind_percent_of_parent) {
-                assert(sem.value >= 0 && sem.value <= 1.0);
-                assert(parent->semantic_size[i].kind == ui_size_kind_pixels ||
-                       parent->semantic_size[i].kind == ui_size_kind_text_content ||
-                       parent->semantic_size[i].kind == ui_size_kind_percent_of_parent);
-                box->computed_size[i] = sem.value * parent->computed_size[i];
+                assert(sem.value >= 0 && sem.value <= 100.0);
+                assert(parent->semantic_size[axis].kind == ui_size_kind_pixels ||
+                       parent->semantic_size[axis].kind == ui_size_kind_text_content ||
+                       parent->semantic_size[axis].kind == ui_size_kind_percent_of_parent);
+                box->computed_size[axis] = (sem.value / 100.0f) * parent->computed_size[axis];
             }
         }
     }
@@ -516,17 +296,16 @@ fn void ui_draw(void) {
     // compute: (children_sum)
     for (ui_postorder_iter_t it = ui_iterate_postorder(ui->root); ui_postorder_iter_is_valid(it); ui_iter_advance_postorder(&it)) {
         ui_box_t *box = it.box;
-        for (i32 i = 0; i < ui_axis2_count; i += 1) {
-            ui_size_t sem = box->semantic_size[i];
+        for (ui_axis2_t axis = 0; axis < ui_axis2_count; axis += 1) {
+            ui_size_t sem = box->semantic_size[axis];
             if (sem.kind != ui_size_kind_children_sum) continue;
 
-            b32 grow_axis = box->grow_axis[i];
             for (ui_box_t *child = box->first; child; child = child->next) {
-                assert(child->computed_size[i] != 0.f);
-                if (grow_axis) {
-                    box->computed_size[i] += child->computed_size[i];
+                assert(child->computed_size[axis] != 0.f);
+                if (box->grow_axis == axis) {
+                    box->computed_size[axis] += child->computed_size[axis];
                 } else {
-                    box->computed_size[i] = MAX(box->computed_size[i], child->computed_size[i]);
+                    box->computed_size[axis] = MAX(box->computed_size[axis], child->computed_size[axis]);
                 }
             }
         }
@@ -540,15 +319,15 @@ fn void ui_draw(void) {
         ui_box_t *parent = box->parent;
         if (ui->root == box) continue; // @todo: how to remove this?
 
-        for (i32 i = 0; i < ui_axis2_count; i += 1) {
-            f32 *pos = &box->computed_rel_pos[i];
-            f32 size = box->computed_size[i];
+        for (ui_axis2_t axis = 0; axis < ui_axis2_count; axis += 1) {
+            f32 *pos = &box->computed_rel_pos[axis];
+            f32 size = box->computed_size[axis];
 
-            f32 parent_pos = parent->computed_rel_pos[i];
-            f32 *iter_pos = &parent->iter_pos[i];
+            f32 parent_pos = parent->computed_rel_pos[axis];
+            f32 *iter_pos = &parent->iter_pos[axis];
 
             *pos = parent_pos + *iter_pos;
-            if (parent->grow_axis[i]) *iter_pos += size;
+            if (parent->grow_axis == axis) *iter_pos += size;
         }
 
         v2f32_t pos = v2f32(box->computed_rel_pos[0], box->computed_rel_pos[1]);
@@ -568,7 +347,14 @@ fn void ui_draw(void) {
             rect_color = accent1_color_global;
         }
 
-        rn_draw_rect(box->rect, rect_color);
-        rn_draw_string(font, box->rect.min, black_color_global, box->string);
+        if (is_flag_set(box->flags, ui_box_flag_draw_rect)) {
+            rn_draw_rect(box->rect, rect_color);
+        }
+        if (is_flag_set(box->flags, ui_box_flag_draw_border)) {
+            rn_draw_rect_border(box->rect, accent2_color_global);
+        }
+        if (is_flag_set(box->flags, ui_box_flag_draw_text)) {
+            rn_draw_string(font, box->rect.min, black_color_global, box->string);
+        }
     }
 }
diff --git a/src/wasm_app/ui.h b/src/wasm_app/ui.h
new file mode 100644
index 0000000..9e0903d
--- /dev/null
+++ b/src/wasm_app/ui.h
@@ -0,0 +1,151 @@
+/*
+** [x] Choosing a keying strategy from user code
+**  [x] Using parents
+**  [x] Using file and line
+** [ ] Keyboard friendliness
+** [x] ui_em size
+** [ ] use strictness to 'solve violations'
+** [ ] scrolling
+** [ ] vieweing type info
+** [ ] slider
+** [ ] button
+** [ ] pernament state
+*/
+
+typedef struct ui_id_t ui_id_t;
+struct ui_id_t {
+    u64 value;
+};
+
+typedef struct ui_code_loc_t ui_code_loc_t;
+struct ui_code_loc_t {
+    char *file;
+    int line;
+    int counter;
+};
+#define UI_CODE_LOC (ui_code_loc_t){.file = __FILE__, .line = __LINE__, .counter = __COUNTER__}
+
+typedef enum {
+    ui_axis2_x,
+    ui_axis2_y,
+    ui_axis2_count,
+} ui_axis2_t;
+
+typedef enum {
+    ui_size_kind_null,
+    ui_size_kind_pixels,
+    ui_size_kind_text_content,
+    ui_size_kind_percent_of_parent,
+    ui_size_kind_children_sum,
+} ui_size_kind_t;
+
+typedef struct ui_size_t ui_size_t;
+struct ui_size_t {
+    ui_size_kind_t kind;
+    f32 value;
+    f32 strictness;
+};
+
+#define flag1(flag) set_bit(flag)
+#define flag2(a, b) (set_bit(a) | set_bit(b))
+#define flag3(a, b, c) (set_bit(a) | set_bit(b) | set_bit(c))
+#define flag4(a, b, c, d) (set_bit(a) | set_bit(b) | set_bit(c) | set_bit(d))
+#define is_flag_set(x, FLAG) ((x) & flag1(FLAG))
+
+typedef u32 ui_box_flag_t;
+enum {
+    ui_box_flag_draw_border,
+    ui_box_flag_draw_text,
+    ui_box_flag_draw_rect,
+};
+
+typedef struct ui_box_t ui_box_t;
+struct ui_box_t {
+    // recreated every frame in building code
+    ui_box_t     *next;
+    ui_box_t     *prev;
+    ui_box_t     *parent;
+    ui_box_t     *first;
+    ui_box_t     *last;
+    ui_box_flag_t flags;
+    s8_t          string;
+    ui_size_t     semantic_size[ui_axis2_count];
+    ui_axis2_t    grow_axis;
+    ui_code_loc_t loc;
+    b32           created_new;
+
+    // preserving state
+    ui_id_t   id; // important position!: offset(id) used for partial zeroing
+    u64       last_touched_event_id;
+    ui_box_t *hash_next;
+    ui_box_t *hash_prev;
+
+    // computed by layout system every frame
+    f32     iter_pos[ui_axis2_count];
+    f32     computed_rel_pos[ui_axis2_count];
+    f32     computed_size[ui_axis2_count];
+    r2f32_t rect;
+
+    // state
+    b32 expanded;
+};
+
+typedef struct ui_signal_t ui_signal_t;
+struct ui_signal_t {
+    b8 clicked;
+    b8 double_clicked;
+    b8 right_clicked;
+    b8 pressed;
+    b8 released;
+    b8 dragging;
+    b8 hovering;
+};
+
+typedef enum {
+    ui_id_strategy_use_hierarchy,
+    ui_id_strategy_use_code_loc,
+    ui_id_strategy_use_string,
+} ui_id_strategy_t;
+
+typedef struct ui_t ui_t;
+struct ui_t {
+    ma_arena_t *box_arena; // required to be only used for boxes
+    app_event_t *event;
+    app_frame_t *frame;
+
+    i32 allocated_boxes;
+    ui_box_t *box_array; // first item on arena
+    ui_box_t *root;
+    ui_box_t *top;
+
+    ui_box_t *free_first;
+    ui_box_t *hash_first;
+    ui_box_t *hash_last;
+
+    ui_id_t hot;
+    ui_id_t active;
+
+    // STACK(ui_id_t, 256) id_stack;
+    int indent_stack;
+    ui_id_strategy_t id_strategy;
+};
+
+gb ui_t *ui = NULL;
+gb_read_only ui_id_t ui_null_id;
+gb_read_only ui_box_t ui_null_box;
+
+fn b32 ui_is_null_id(ui_id_t id) { return id.value == 0; }
+fn b32 ui_is_null_box(ui_box_t *box) { return box->id.value == 0; }
+fn b32 ui_is_hot_box(ui_box_t *box) { return !ui_is_null_box(box) && box->id.value == ui->hot.value; }
+fn b32 ui_is_active_box(ui_box_t *box) { return !ui_is_null_box(box) && box->id.value == ui->active.value; }
+
+#define ev_left(ev) ((ev)->mouse_button == app_mouse_button_left)
+#define ev_left_up(ev) ((ev)->kind == app_event_kind_mouse_up && ev_left(ev))
+#define ev_left_down(ev) ((ev)->kind == app_event_kind_mouse_down && ev_left(ev))
+
+fn ui_size_t ui_size(ui_size_kind_t kind, f32 value) { return (ui_size_t){.kind = kind, .value = value}; }
+#define ui_pixels(value) ui_size(ui_size_kind_pixels, value)
+#define ui_em(value) ui_size(ui_size_kind_pixels, value * get_font_size())
+#define ui_text() ui_size(ui_size_kind_text_content, 0)
+#define ui_children_sum() ui_size(ui_size_kind_children_sum, 0)
+#define ui_percent(value) ui_size(ui_size_kind_percent_of_parent, value)
diff --git a/src/wasm_app/ui_iter.c b/src/wasm_app/ui_iter.c
new file mode 100644
index 0000000..4e0fa2a
--- /dev/null
+++ b/src/wasm_app/ui_iter.c
@@ -0,0 +1,111 @@
+
+typedef struct ui_preorder_iter_t ui_preorder_iter_t;
+struct ui_preorder_iter_t { ui_box_t *box; };
+
+fn ui_preorder_iter_t ui_iterate_preorder(ui_box_t *box) {
+    ui_preorder_iter_t iter = {box};
+    return iter;
+}
+
+fn b32 ui_preorder_iter_is_valid(ui_preorder_iter_t iter) {
+    b32 result = iter.box != NULL;
+    return result;
+}
+
+fn void ui_iter_advance_preorder(ui_preorder_iter_t *iter) {
+    if (iter->box->first) {
+        iter->box = iter->box->first;
+        return;
+    }
+    while (iter->box) {
+        if (iter->box->next) {
+            iter->box = iter->box->next;
+            break;
+        } else {
+            iter->box = iter->box->parent;
+        }
+    }
+}
+
+typedef struct ui_postorder_iter_t ui_postorder_iter_t;
+struct ui_postorder_iter_t { ui_box_t *box; };
+
+fn ui_postorder_iter_t ui_iterate_postorder(ui_box_t *box) {
+    while (box->first) {
+        box = box->first;
+    }
+    ui_postorder_iter_t iter = {box};
+    return iter;
+}
+
+fn b32 ui_postorder_iter_is_valid(ui_postorder_iter_t iter) {
+    b32 result = iter.box != NULL;
+    return result;
+}
+
+fn void ui_iter_advance_postorder(ui_postorder_iter_t *iter) {
+    while (iter->box) {
+        if (iter->box->next) {
+            iter->box = iter->box->next;
+            while (iter->box->first) {
+                iter->box = iter->box->first;
+            }
+            break;
+        } else {
+            iter->box = iter->box->parent;
+            break;
+        }
+    }
+}
+
+fn void ui_test_stringify_preorder(sb8_t *sb, ui_box_t *box) {
+    sb8_printf(sb, "%S\n", box->string);
+    for (ui_box_t *it = box->first; it; it = it->next) {
+        ui_test_stringify_preorder(sb, it);
+    }
+}
+
+fn void ui_test_stringify_postorder(sb8_t *sb, ui_box_t *box) {
+    for (ui_box_t *it = box->first; it; it = it->next) {
+        ui_test_stringify_postorder(sb, it);
+    }
+    sb8_printf(sb, "%S\n", box->string);
+}
+
+fn void ui_test_iterator(void) {
+    {
+        ma_temp_t scratch = ma_begin_scratch();
+
+        sb8_t *sb = sb8_serial_begin(scratch.arena);
+        ui_test_stringify_preorder(sb, ui->root);
+        s8_t recursive_string = sb8_serial_end(scratch.arena, sb);
+
+        sb = sb8_serial_begin(scratch.arena);
+        for (ui_preorder_iter_t it = ui_iterate_preorder(ui->root); ui_preorder_iter_is_valid(it); ui_iter_advance_preorder(&it)) {
+            sb8_printf(sb, "%S\n", it.box->string);
+        }
+        s8_t iter_string = sb8_serial_end(scratch.arena, sb);
+
+        assert(s8_equal(recursive_string, iter_string));
+
+        ma_end_scratch(scratch);
+    }
+    {
+        ma_temp_t scratch = ma_begin_scratch();
+
+        sb8_t *sb = sb8_serial_begin(scratch.arena);
+        ui_test_stringify_postorder(sb, ui->root);
+        s8_t recursive_string = sb8_serial_end(scratch.arena, sb);
+
+        sb = sb8_serial_begin(scratch.arena);
+        for (ui_postorder_iter_t it = ui_iterate_postorder(ui->root); ui_postorder_iter_is_valid(it); ui_iter_advance_postorder(&it)) {
+            sb8_printf(sb, "%S\n", it.box->string);
+        }
+        s8_t iter_string = sb8_serial_end(scratch.arena, sb);
+
+        assert(s8_equal(recursive_string, iter_string));
+
+        ma_end_scratch(scratch);
+    }
+
+}
diff --git a/todo.txt b/todo.txt
index e1fdd23..26c0ac0 100644
--- a/todo.txt
+++ b/todo.txt
@@ -1,8 +1,6 @@
 [ ] app
     [ ] ui
     [ ] event playback
-        [ ] maybe different events structure: { frame1: { event1, event2 }, frame2: {event1} }
-    [ ] how to fix variable scroll? or do we not care? (probably need delta time)
     [ ] win32
         [ ] sleep
         [ ] hot reload / plugins
@@ -33,3 +31,4 @@
     [x] revisit api
     [ ] s8_bin
     [ ] hash table
+    [ ] intern table