diff --git a/program.odin b/program.odin
index 81e33ea..8b24207 100644
--- a/program.odin
+++ b/program.odin
@@ -9,23 +9,27 @@ WINDOW_HEIGHT :: 720
 WINDOW_FRAMERATE :: 30
 WINDOW_CAPTION :: "Transformation Visualizer"
 
+value: i32
+ui_style := UiStyle{margin = 4.0, padding = 4.0}
+ui_state: UiState
+
 init :: proc() {
 	rl.SetTraceLogLevel(.WARNING)
 	rl.SetConfigFlags({.WINDOW_RESIZABLE, .VSYNC_HINT})
 	rl.InitWindow(WINDOW_WIDTH, WINDOW_HEIGHT, WINDOW_CAPTION)
 	rl.SetTargetFPS(WINDOW_FRAMERATE)
+	ui_init(&ui_state, ui_style, {0, 0}, context.temp_allocator)
 }
 
-value: i32
-
 update :: proc() {
+	if rl.IsMouseButtonPressed(.LEFT) {
+		ui_element_focus_reset(&ui_state)
+	}
+
 	rl.BeginDrawing()
 	defer rl.EndDrawing()
 	rl.ClearBackground(rl.BLACK)
 
-	ui_style := UiStyle{margin = 4.0, padding = 4.0}
-	ui_state: UiState
-	ui_init(&ui_state, ui_style, {0, 0}, context.temp_allocator)
 	ui_start(&ui_state)
 		ui_container_begin(&ui_state, {label = ""})
 			ui_button_size := v2{192.0, 32.0}
@@ -46,8 +50,10 @@ update :: proc() {
 			rl.GuiButton(element.area, data.label)
 		case .Input:
 			data := element.data.(UiElementData_Input)
-			value := rl.GuiValueBox(element.area, "", data.value, data.min, data.max, true)
-			fmt.println(value)
+			edit_mode := ui_element_is_editing(ui_state, element.id)
+			if (rl.GuiValueBox(element.area, "", data.value, data.min, data.max, edit_mode) == 1) {
+				ui_element_focus(&ui_state, element.id)
+			}
 		case .Container:
 			data := element.data.(UiElementData_Container)
 			if len(data.label) == 0 {
diff --git a/ui.odin b/ui.odin
index 8fd5c5f..e16ded2 100644
--- a/ui.odin
+++ b/ui.odin
@@ -19,13 +19,21 @@ UiElementData :: union {
 UiElement :: struct {
 	area: rect2,
 	type: UiElementType,
+	id: UiElementId,
 	data: UiElementData,
 }
 
+UiElementId :: bit_field u32 {
+	group_index: u16    | 16,
+	element_index: u16  | 16,
+}
+
 UiState :: struct {
 	origin, position_left, position: v2,
 	same_line: bool,
 	style: UiStyle,
+	element_focus_id: UiElementId,
+	id_current: UiElementId,
 	elements: [dynamic]UiElement,
 	container: ^UiElement,
 	group_element_count: int,
@@ -35,8 +43,13 @@ UiStyle :: struct {
 	margin, padding: f32,
 }
 
+ui_id_invalid :: proc() -> UiElementId {
+	return {group_index = max(u16), element_index = max(u16)}
+}
+
 ui_start :: proc(state: ^UiState) {
 	clear(&state.elements)
+	state.id_current = {group_index = 0, element_index = 0}
 	state.position_left = state.origin
 	state.position = state.position_left
 }
@@ -51,7 +64,8 @@ UiElementData_Button :: struct {
 
 ui_button :: proc(state: ^UiState, size: v2, data: UiElementData_Button) {
 	area := _ui_advance_element(state, size)
-	append(&state.elements, UiElement{area = area, type = .Button, data = data})
+	state.id_current.element_index += 1
+	append(&state.elements, UiElement{id = state.id_current, area = area, type = .Button, data = data})
 }
 
 UiElementData_Container :: struct {
@@ -60,7 +74,9 @@ UiElementData_Container :: struct {
 
 ui_container_begin :: proc(state: ^UiState, data: UiElementData_Container) {
 	assert(state.container == nil)
-	append(&state.elements, UiElement{area = _ui_advance_container(state), type = .Container, data = data})
+	state.id_current = {group_index = state.id_current.group_index + 1, element_index = 0}
+	element := UiElement{id = state.id_current, area = _ui_advance_container(state), type = .Container, data = data}
+	append(&state.elements, element)
 	state.position_left += state.style.margin + state.style.padding
 	state.container = &state.elements[len(state.elements) - 1]
 }
@@ -82,7 +98,8 @@ UiElementData_Input :: struct {
 
 ui_input :: proc(state: ^UiState, size: v2, data: UiElementData_Input) {
 	area := _ui_advance_element(state, size)
-	append(&state.elements, UiElement{area = area, type = .Input, data = data})
+	state.id_current.element_index += 1
+	append(&state.elements, UiElement{id = state.id_current, area = area, type = .Input, data = data})
 }
 
 ui_same_line :: proc(state: ^UiState) {
@@ -91,6 +108,7 @@ ui_same_line :: proc(state: ^UiState) {
 
 ui_init :: proc(state: ^UiState, style: UiStyle, origin: v2, allocator: mem.Allocator) {
 	state^ = {
+		element_focus_id = ui_id_invalid(),
 		origin = origin,
 		position = origin,
 		style = style,
@@ -98,6 +116,18 @@ ui_init :: proc(state: ^UiState, style: UiStyle, origin: v2, allocator: mem.Allo
 	}
 }
 
+ui_element_is_editing :: proc(state: UiState, id: UiElementId) -> bool {
+	return state.element_focus_id == id
+}
+
+ui_element_focus :: proc(state: ^UiState, id: UiElementId) {
+	state.element_focus_id = id
+}
+
+ui_element_focus_reset :: proc(state: ^UiState) {
+	state.element_focus_id = ui_id_invalid()
+}
+
 _ui_advance_element :: proc(state: ^UiState, size: v2) -> rect2 {
 	if state.group_element_count > 0 {
 		if state.same_line {