diff --git a/docs/fase4/README.md b/docs/fase4/README.md
index 8c6e346..ab580c8 100644
--- a/docs/fase4/README.md
+++ b/docs/fase4/README.md
@@ -18,7 +18,7 @@ Esta fase implementa o **ECS completo** — a arquitetura de dados central que c
 | **Audio System** | [`audio.md`](audio.md) | `Caffeine::Audio` | 4 | 📅 |
 | **Animation System** | [`animation.md`](animation.md) | `Caffeine::Animation` | 4 | 📅 |
 | **Physics 2D** | [`physics.md`](physics.md) | `Caffeine::Physics2D` | 4 | ✅ |
-| **UI System** | [`ui.md`](ui.md) | `Caffeine::UI` | 4 | 📅 |
+| **UI System** | [`ui.md`](ui.md) | `Caffeine::UI` | 4 | ✅ |
 
 ---
 
diff --git a/docs/fase4/ui.md b/docs/fase4/ui.md
index 5490fb7..b572a01 100644
--- a/docs/fase4/ui.md
+++ b/docs/fase4/ui.md
@@ -2,143 +2,99 @@
 
 > **Fase:** 4 — O Cérebro  
 > **Namespace:** `Caffeine::UI`  
-> **Arquivo:** `src/ui/UISystem.hpp`  
-> **Status:** 📅 Planejado  
+> **Arquivos:** `src/ui/UIComponents.hpp`, `src/ui/UISystem.hpp`  
+> **Status:** ✅ Implementado  
 > **RF:** RF4.11
 
 ---
 
 ## Visão Geral
 
-Sistema de UI **retained mode** — widgets são entidades ECS com componentes de UI. Isso permite que UI seja afetada por ECS systems (ex: HealthBar reflete automaticamente o valor de `Health` component).
+Sistema de UI **retained mode** — widgets são entidades ECS com componentes de UI. Isso permite que UI seja afetada por ECS systems (ex: HealthBar reflete automaticamente o valor de um `Health` component via `bindValue`).
 
 **Fase 6** adiciona Dear ImGui para a interface do editor — ver [`docs/fase6/embedded-ui.md`](../fase6/embedded-ui.md).
 
 ---
 
-## API Planejada
+## Componentes
 
-```cpp
-namespace Caffeine::UI {
+### `UIColor`
 
-// ============================================================================
-// @brief  Layout rect em espaço de tela ou frações do parent.
-//
-//  anchorMin/Max em [0, 1] — (0,0) = canto inferior esquerdo da tela
-//  pivot em [0, 1] — (0.5, 0.5) = centro do widget
-// ============================================================================
-struct RectTransform {
-    Vec2   anchorMin = {0, 0};
-    Vec2   anchorMax = {1, 1};
-    Vec2   pivot     = {0.5f, 0.5f};
-    Rect2D offset    = {};  // pixels de deslocamento das anchors
-};
+Cor RGBA com canais `f32` em `[0, 1]`. Presets estáticos: `white()`, `black()`, `transparent()`, `red()`, `green()`, `blue()`.
 
-// ============================================================================
-// @brief  Estilo visual do widget.
-// ============================================================================
-struct UIStyle {
-    Color backgroundColor = {0.1f, 0.1f, 0.1f, 0.9f};
-    Color textColor       = Color::WHITE;
-    Color borderColor     = {0.3f, 0.3f, 0.3f, 1.0f};
-    f32   borderWidth     = 1.0f;
-    f32   borderRadius    = 4.0f;
-    Font* font            = nullptr;
-    f32   fontSize        = 16.0f;
-    Vec2  textAlignment   = {0.5f, 0.5f};  // (0,0) = esquerda, (1,1) = direita
-};
+### `UIRect`
 
-// ============================================================================
-// @brief  Widget base — componente ECS para UI.
-// ============================================================================
-struct UIWidget {
-    enum class Type : u8 {
-        Canvas,      // Raiz da hierarquia UI
-        Panel,       // Container de outros widgets
-        Button,      // Clicável
-        Label,       // Texto estático
-        ProgressBar, // Barra de progresso (HP, XP, etc.)
-        Checkbox,    // Toggle
-        Slider       // Valor analógico
-    };
-
-    Type          type         = Type::Panel;
-    bool          visible      = true;
-    bool          interactable = true;
-    i32           siblingOrder = 0;     // ordem de renderização entre irmãos
-    UIStyle       style;
-    RectTransform transform;
-
-    // Callbacks de interação
-    std::function<void(ECS::Entity)> onClick;
-    std::function<void(ECS::Entity)> onHoverEnter;
-    std::function<void(ECS::Entity)> onHoverExit;
-    std::function<void(ECS::Entity, f32)> onValueChanged;  // Slider/ProgressBar
-};
+Rect de tela com `position` e `size` (`Vec2`). Métodos: `contains(Vec2)`, `isValid()`.
 
-// ── Widgets específicos ────────────────────────────────────────
-struct Button : UIWidget {
-    FixedString<64> labelText;
-    Color           idleColor    = {0.2f, 0.2f, 0.2f, 1.0f};
-    Color           hoverColor   = {0.35f, 0.35f, 0.35f, 1.0f};
-    Color           pressedColor = {0.1f, 0.1f, 0.1f, 1.0f};
-};
+### `RectTransform`
 
-struct Label : UIWidget {
-    FixedString<256> text;
-    bool             wordWrap = false;
-};
+Layout relativo ao parent. `anchorMin`/`anchorMax` são frações do tamanho do parent; `offsetMin`/`offsetMax` são deltas em pixels.
 
-struct ProgressBar : UIWidget {
-    f32  minValue     = 0.0f;
-    f32  maxValue     = 100.0f;
-    f32  currentValue = 50.0f;
-    bool showText     = false;
-    Color fillColor   = {0.2f, 0.8f, 0.2f, 1.0f};  // verde por default
-};
+```
+anchorMin=anchorMax={0,0}, offsetMin={px,py}, offsetMax={px+w,py+h}  →  widget fixo em (px,py) tamanho (w,h)
+```
 
-struct Slider : UIWidget {
-    f32 minValue     = 0.0f;
-    f32 maxValue     = 1.0f;
-    f32 currentValue = 0.5f;
-    bool snapToInt   = false;
-};
+### `UIStyle`
+
+Aparência visual: `backgroundColor`, `textColor`, `borderColor`, `borderWidth`, `borderRadius`, `fontSize`, `textAlignment`.
+
+### `UIWidget`
+
+Componente base presente em toda entidade UI:
+
+| Campo | Tipo | Descrição |
+|-------|------|-----------|
+| `type` | `UIWidgetType` | Canvas, Panel, Button, Label, ProgressBar, Checkbox, Slider |
+| `parentId` | `u32` | ID do parent; `kUIInvalidParent` para canvas raiz |
+| `visible` | `bool` | Se false, não é processado nem retornado por hitTest |
+| `interactable` | `bool` | Se false, ignorado por hitTest |
+| `siblingOrder` | `i32` | Desempata hitTest quando dois widgets se sobrepõem |
+| `computedRect` | `UIRect` | Preenchido a cada frame por `layoutWidgets()` |
+| `onClick` | `std::function<void(Entity)>` | Disparado ao clicar |
+| `onHoverEnter` | `std::function<void(Entity)>` | Disparado ao entrar com o mouse |
+| `onHoverExit` | `std::function<void(Entity)>` | Disparado ao sair com o mouse |
+| `onValueChanged` | `std::function<void(Entity, f32)>` | Disparado por bindValue |
+
+### Componentes específicos
+
+| Struct | Campos relevantes |
+|--------|-------------------|
+| `UIButton` | `labelText`, `idleColor`, `hoverColor`, `pressedColor`, `isHovered`, `isPressed` |
+| `UILabel` | `text`, `wordWrap` |
+| `UIProgressBar` | `minValue`, `maxValue`, `currentValue`, `showText`, `fillColor` |
+| `UISlider` | `minValue`, `maxValue`, `currentValue`, `snapToInt` |
+| `UICheckbox` | `checked`, `checkedColor` |
+
+---
+
+## API — `UISystem`
+
+```cpp
+namespace Caffeine::UI {
 
-// ============================================================================
-// @brief  Sistema de UI ECS.
-//
-//  Memory: Widgets alocados no PoolAllocator por tipo.
-//  Priority: 500 — depois de physics/animation, antes de render
-// ============================================================================
 class UISystem : public ECS::ISystem {
 public:
-    void update(ECS::World& world, f64 dt) override;
-    i32  priority() const override { return 500; }
-    const char* name() const override { return "UI"; }
-
-    // ── Factory helpers ────────────────────────────────────────
-    ECS::Entity createCanvas(ECS::World& world);
-    ECS::Entity createButton(ECS::World& world, ECS::Entity parent,
-                              const char* text, Vec2 pos, Vec2 size = {120, 40});
-    ECS::Entity createLabel(ECS::World& world, ECS::Entity parent,
-                             const char* text, Vec2 pos);
-    ECS::Entity createProgressBar(ECS::World& world, ECS::Entity parent,
-                                   Vec2 pos, Vec2 size = {200, 20});
-
-    // ── Data binding ───────────────────────────────────────────
-    // Conecta automaticamente um campo de um componente a um widget
-    // Ex: HealthBar.currentValue ← componente Health.current
-    void bindComponent(ECS::Entity widget, ECS::Entity target,
-                       ECS::ComponentID component, const char* fieldPath);
-
-    // ── Hit testing ────────────────────────────────────────────
-    ECS::Entity hitTest(Vec2 screenPos) const;
-
-private:
-    void layoutWidgets(ECS::World& world);
-    void renderWidget(ECS::Entity e, const UIWidget& widget,
-                      RHI::CommandBuffer* cmd);
-    void processInput(ECS::World& world, const Input::InputManager& input);
+    explicit UISystem(Events::EventBus* eventBus = nullptr);
+
+    void onUpdate(ECS::World& world, f32 dt) override;
+
+    ECS::Entity createCanvas(ECS::World& world, Vec2 size = {1280.0f, 720.0f});
+    ECS::Entity createPanel(ECS::World& world, u32 parentId, UIRect rect);
+    ECS::Entity createButton(ECS::World& world, u32 parentId, const char* text,
+                              Vec2 pos, Vec2 size = {120.0f, 40.0f});
+    ECS::Entity createLabel(ECS::World& world, u32 parentId, const char* text, Vec2 pos);
+    ECS::Entity createProgressBar(ECS::World& world, u32 parentId,
+                                   Vec2 pos, Vec2 size = {200.0f, 20.0f});
+    ECS::Entity createSlider(ECS::World& world, u32 parentId,
+                              Vec2 pos, Vec2 size = {200.0f, 20.0f});
+    ECS::Entity createCheckbox(ECS::World& world, u32 parentId, Vec2 pos);
+
+    void bindValue(ECS::Entity widget, std::function<f32(ECS::World&)> getter);
+
+    ECS::Entity hitTest(ECS::World& world, Vec2 screenPos);
+
+    void injectMousePosition(Vec2 pos);
+    void injectMouseClick(bool pressed);
 };
 
 }  // namespace Caffeine::UI
@@ -151,12 +107,12 @@ private:
 ```
 Canvas (root)
   ├── Panel (HUD)
-  │     ├── ProgressBar (health)   ← bind → Health.current
-  │     ├── Label (score)          ← bind → Score.value
+  │     ├── ProgressBar (health)   ← bindValue → retorna Health.current
+  │     ├── Label (score)
   │     └── Label (fps counter)
   ├── Panel (inventory)
   │     └── [slots dinamicamente criados]
-  └── Panel (pause menu — hidden by default)
+  └── Panel (pause menu — visible=false por default)
         ├── Button "Resume"
         ├── Button "Options"
         └── Button "Quit"
@@ -164,39 +120,31 @@ Canvas (root)
 
 ---
 
-## Exemplos de Uso
+## Exemplo de Uso
 
 ```cpp
-// ── Criar HUD ─────────────────────────────────────────────────
-auto* uiSys = world.registerSystem<UISystem>();
+UISystem uiSys;
 
-Entity canvas = uiSys->createCanvas(world);
-Entity hudPanel = uiSys->createPanel(world, canvas, {{0,0},{1280,720}});
+Entity canvas   = uiSys.createCanvas(world, {1280.0f, 720.0f});
+Entity hudPanel = uiSys.createPanel(world, canvas.id(), {{0,0},{1280,720}});
 
-// Health bar
-Entity healthBar = uiSys->createProgressBar(world, hudPanel,
-    {20, 700}, {200, 20});
-world.get<ProgressBar>(healthBar)->fillColor = {0.9f, 0.2f, 0.2f, 1.0f};
+Entity healthBar = uiSys.createProgressBar(world, hudPanel.id(), {20.0f, 700.0f}, {200.0f, 20.0f});
+world.get<UIProgressBar>(healthBar)->fillColor = {0.9f, 0.2f, 0.2f, 1.0f};
 
-// Bind automático: healthBar.currentValue ↔ playerHealth.current
-uiSys->bindComponent(healthBar, playerEntity,
-    ComponentID::of<Health>(), "current");
+uiSys.bindValue(healthBar, [&](ECS::World& w) {
+    return w.get<Health>(playerEntity)->current;
+});
 
-// Label de score
-Entity scoreLabel = uiSys->createLabel(world, hudPanel, "Score: 0", {1100, 700});
+Entity scoreLabel = uiSys.createLabel(world, hudPanel.id(), "Score: 0", {1100.0f, 700.0f});
 
-// ── Botão com callback ────────────────────────────────────────
-Entity playBtn = uiSys->createButton(world, canvas, "Play Game",
-    {640, 360}, {200, 50});
-world.get<Button>(playBtn)->onClick = [&](ECS::Entity e) {
+Entity playBtn = uiSys.createButton(world, canvas.id(), "Play Game", {640.0f, 360.0f}, {200.0f, 50.0f});
+world.get<UIWidget>(playBtn)->onClick = [&](ECS::Entity) {
     sceneManager.switchScene("assets/scenes/level1.caf");
 };
 
-// ── Bind manual via update ────────────────────────────────────
-// (alternativa ao bindComponent para lógica customizada)
-world.query(scoreQuery, [&](Label& lbl, const Score& score) {
-    lbl.text = FixedString<256>("Score: ") + score.value;
-});
+uiSys.injectMousePosition(mousePos);
+uiSys.injectMouseClick(isMouseDown);
+uiSys.onUpdate(world, dt);
 ```
 
 ---
@@ -205,27 +153,33 @@ world.query(scoreQuery, [&](Label& lbl, const Score& score) {
 
 | Decisão | Justificativa |
 |---------|-------------|
-| Retained mode (vs immediate) | UI persiste entre frames sem reconstrução |
+| Retained mode | UI persiste entre frames sem reconstrução |
 | Widgets como entidades ECS | UI pode ser afetada por systems (bindings automáticos) |
-| `bindComponent` | Elimina boilerplate de sincronização manual |
-| `priority = 500` | UI após gameplay, mas antes de render final |
-| Pool allocator por tipo | Zero alloc em runtime para widgets frequentes |
+| `bindValue` com getter `f32` | Evita reflexão em C++ — getter lambda é suficiente para ProgressBar/Slider |
+| `UIColor` com `f32` (não `Color` do engine) | `Color` do engine usa `u8`; UI precisa de precisão float |
+| Layout em 8 passes BFS | ECS forEach não garante ordem topológica; passes extras resolvem hierarquias profundas |
+| `kUIInvalidParent = 0xFFFFFFFFu` | Sentinel de "sem parent" compatível com `u32` |
 
 ---
 
 ## Critério de Aceitação
 
-- [ ] 50 widgets a 60fps
-- [ ] UI render < 2ms
-- [ ] `bindComponent` atualiza ProgressBar no mesmo frame que o componente muda
-- [ ] Hit testing correto com hierarquia de transforms
-- [ ] Widgets com `visible = false` não processados
+- [x] Canvas cria entidade com `UIWidgetType::Canvas` e `computedRect` correto
+- [x] `createButton`, `createLabel`, `createProgressBar`, `createSlider`, `createCheckbox` retornam entidades válidas com componentes corretos
+- [x] `onUpdate` em world vazio não crasha
+- [x] Layout calcula `computedRect` correto para filhos diretos do canvas
+- [x] `hitTest` retorna entidade correta para ponto dentro do rect
+- [x] `hitTest` ignora widgets com `visible=false` ou `interactable=false`
+- [x] `hitTest` desempata por `siblingOrder` (maior vence)
+- [x] `onClick` dispara ao clicar no widget
+- [x] `onHoverEnter` dispara ao entrar com o mouse
+- [x] `bindValue` atualiza `UIProgressBar::currentValue` no mesmo frame
 
 ---
 
 ## Dependências
 
-- **Upstream:** [ECS Core](ecs.md), [Fase 3 — RHI](../fase3/rhi.md), [Input System](../fase2/input.md)
+- **Upstream:** [ECS Core](ecs.md), [Fase 1 — Memory, Containers](../architecture/memory.md)
 - **Downstream:** [Fase 6 — Embedded UI (ImGui)](../fase6/embedded-ui.md)
 
 ---
diff --git a/src/Caffeine.hpp b/src/Caffeine.hpp
index d63928d..5979079 100644
--- a/src/Caffeine.hpp
+++ b/src/Caffeine.hpp
@@ -61,4 +61,8 @@
 
 // Physics
 #include "physics/PhysicsComponents2D.hpp"
-#include "physics/PhysicsSystem2D.hpp"
\ No newline at end of file
+#include "physics/PhysicsSystem2D.hpp"
+
+// UI
+#include "ui/UIComponents.hpp"
+#include "ui/UISystem.hpp"
\ No newline at end of file
diff --git a/src/ui/UIComponents.hpp b/src/ui/UIComponents.hpp
new file mode 100644
index 0000000..494d441
--- /dev/null
+++ b/src/ui/UIComponents.hpp
@@ -0,0 +1,141 @@
+#pragma once
+
+#include "core/Types.hpp"
+#include "math/Vec2.hpp"
+#include "containers/FixedString.hpp"
+#include "ecs/Entity.hpp"
+
+#include <functional>
+
+namespace Caffeine::UI {
+
+using namespace Caffeine;
+
+struct UIColor {
+    f32 r = 0.0f;
+    f32 g = 0.0f;
+    f32 b = 0.0f;
+    f32 a = 1.0f;
+
+    static UIColor white()       { return {1.0f, 1.0f, 1.0f, 1.0f}; }
+    static UIColor black()       { return {0.0f, 0.0f, 0.0f, 1.0f}; }
+    static UIColor transparent() { return {0.0f, 0.0f, 0.0f, 0.0f}; }
+    static UIColor red()         { return {1.0f, 0.0f, 0.0f, 1.0f}; }
+    static UIColor green()       { return {0.0f, 1.0f, 0.0f, 1.0f}; }
+    static UIColor blue()        { return {0.0f, 0.0f, 1.0f, 1.0f}; }
+
+    bool operator==(const UIColor& o) const {
+        return r == o.r && g == o.g && b == o.b && a == o.a;
+    }
+};
+
+struct UIRect {
+    Vec2 position = {0.0f, 0.0f};
+    Vec2 size     = {0.0f, 0.0f};
+
+    bool contains(Vec2 point) const {
+        return point.x >= position.x && point.x <= position.x + size.x &&
+               point.y >= position.y && point.y <= position.y + size.y;
+    }
+
+    bool isValid() const { return size.x > 0.0f && size.y > 0.0f; }
+};
+
+/*
+ * Layout math: anchorMin/Max are fractions of parent size; offsetMin/Max are
+ * pixel deltas from those anchor corners. Fixed widget at (px,py) size (w,h):
+ *   anchorMin=anchorMax={0,0}, offsetMin={px,py}, offsetMax={px+w,py+h}.
+ */
+struct RectTransform {
+    Vec2 anchorMin = {0.0f, 0.0f};
+    Vec2 anchorMax = {0.0f, 0.0f};
+    Vec2 offsetMin = {0.0f, 0.0f};
+    Vec2 offsetMax = {0.0f, 0.0f};
+};
+
+// ============================================================================
+// UIStyle — visual appearance of a widget.
+// ============================================================================
+struct UIStyle {
+    UIColor backgroundColor = {0.1f, 0.1f, 0.1f, 0.9f};
+    UIColor textColor       = {1.0f, 1.0f, 1.0f, 1.0f};
+    UIColor borderColor     = {0.3f, 0.3f, 0.3f, 1.0f};
+    f32     borderWidth     = 1.0f;
+    f32     borderRadius    = 4.0f;
+    f32     fontSize        = 16.0f;
+    Vec2    textAlignment   = {0.5f, 0.5f};
+};
+
+// ============================================================================
+// UIWidgetType — discriminator for the widget category.
+// ============================================================================
+enum class UIWidgetType : u8 {
+    Canvas,
+    Panel,
+    Button,
+    Label,
+    ProgressBar,
+    Checkbox,
+    Slider
+};
+
+static constexpr u32 kUIInvalidParent = 0xFFFFFFFFu;
+
+// ============================================================================
+// UIWidget — base ECS component present on every UI entity.
+//
+//  computedRect is filled each frame by UISystem::layoutWidgets().
+// ============================================================================
+struct UIWidget {
+    UIWidgetType  type         = UIWidgetType::Panel;
+    u32           parentId     = kUIInvalidParent;
+    bool          visible      = true;
+    bool          interactable = true;
+    i32           siblingOrder = 0;
+    UIStyle       style;
+    RectTransform transform;
+    UIRect        computedRect;
+
+    std::function<void(ECS::Entity)>      onClick;
+    std::function<void(ECS::Entity)>      onHoverEnter;
+    std::function<void(ECS::Entity)>      onHoverExit;
+    std::function<void(ECS::Entity, f32)> onValueChanged;
+};
+
+// ── Widget-specific components ──────────────────────────────────────────────
+
+struct UIButton {
+    FixedString<64> labelText;
+    UIColor         idleColor    = {0.2f,  0.2f,  0.2f,  1.0f};
+    UIColor         hoverColor   = {0.35f, 0.35f, 0.35f, 1.0f};
+    UIColor         pressedColor = {0.1f,  0.1f,  0.1f,  1.0f};
+    bool            isHovered    = false;
+    bool            isPressed    = false;
+};
+
+struct UILabel {
+    FixedString<256> text;
+    bool             wordWrap = false;
+};
+
+struct UIProgressBar {
+    f32     minValue     = 0.0f;
+    f32     maxValue     = 100.0f;
+    f32     currentValue = 50.0f;
+    bool    showText     = false;
+    UIColor fillColor    = {0.2f, 0.8f, 0.2f, 1.0f};
+};
+
+struct UISlider {
+    f32  minValue     = 0.0f;
+    f32  maxValue     = 1.0f;
+    f32  currentValue = 0.5f;
+    bool snapToInt    = false;
+};
+
+struct UICheckbox {
+    bool    checked      = false;
+    UIColor checkedColor = {0.2f, 0.6f, 1.0f, 1.0f};
+};
+
+}  // namespace Caffeine::UI
diff --git a/src/ui/UISystem.hpp b/src/ui/UISystem.hpp
new file mode 100644
index 0000000..49ea5b2
--- /dev/null
+++ b/src/ui/UISystem.hpp
@@ -0,0 +1,281 @@
+#pragma once
+
+#include "ui/UIComponents.hpp"
+#include "ecs/World.hpp"
+#include "ecs/Entity.hpp"
+#include "ecs/ISystem.hpp"
+#include "ecs/ComponentQuery.hpp"
+#include "events/EventBus.hpp"
+
+#include <vector>
+#include <unordered_map>
+#include <functional>
+#include <climits>
+
+namespace Caffeine::UI {
+
+using namespace Caffeine;
+
+class UISystem : public ECS::ISystem {
+public:
+    explicit UISystem(Events::EventBus* eventBus = nullptr)
+        : m_eventBus(eventBus) {}
+
+    void onUpdate(ECS::World& world, f32 dt) override {
+        (void)dt;
+        updateBindings(world);
+        layoutWidgets(world);
+        processInput(world);
+    }
+
+    ECS::Entity createCanvas(ECS::World& world, Vec2 size = {1280.0f, 720.0f}) {
+        ECS::Entity e = world.create();
+        UIWidget w;
+        w.type = UIWidgetType::Canvas;
+        w.parentId = kUIInvalidParent;
+        w.computedRect = {Vec2{0.0f, 0.0f}, size};
+        world.add<UIWidget>(e, w);
+        return e;
+    }
+
+    ECS::Entity createPanel(ECS::World& world, u32 parentId, UIRect rect) {
+        ECS::Entity e = world.create();
+        UIWidget w;
+        w.type = UIWidgetType::Panel;
+        w.parentId = parentId;
+        w.transform.anchorMin = {0.0f, 0.0f};
+        w.transform.anchorMax = {0.0f, 0.0f};
+        w.transform.offsetMin = rect.position;
+        w.transform.offsetMax = {rect.position.x + rect.size.x, rect.position.y + rect.size.y};
+        world.add<UIWidget>(e, w);
+        return e;
+    }
+
+    ECS::Entity createButton(ECS::World& world, u32 parentId, const char* text,
+                              Vec2 pos, Vec2 size = {120.0f, 40.0f}) {
+        ECS::Entity e = world.create();
+        UIWidget w;
+        w.type = UIWidgetType::Button;
+        w.parentId = parentId;
+        w.transform.anchorMin = {0.0f, 0.0f};
+        w.transform.anchorMax = {0.0f, 0.0f};
+        w.transform.offsetMin = pos;
+        w.transform.offsetMax = {pos.x + size.x, pos.y + size.y};
+        world.add<UIWidget>(e, w);
+        UIButton btn;
+        btn.labelText = FixedString<64>(text);
+        world.add<UIButton>(e, btn);
+        return e;
+    }
+
+    ECS::Entity createLabel(ECS::World& world, u32 parentId, const char* text, Vec2 pos) {
+        ECS::Entity e = world.create();
+        UIWidget w;
+        w.type = UIWidgetType::Label;
+        w.parentId = parentId;
+        w.interactable = false;
+        w.transform.anchorMin = {0.0f, 0.0f};
+        w.transform.anchorMax = {0.0f, 0.0f};
+        w.transform.offsetMin = pos;
+        w.transform.offsetMax = {pos.x + 200.0f, pos.y + 24.0f};
+        world.add<UIWidget>(e, w);
+        UILabel lbl;
+        lbl.text = FixedString<256>(text);
+        world.add<UILabel>(e, lbl);
+        return e;
+    }
+
+    ECS::Entity createProgressBar(ECS::World& world, u32 parentId,
+                                   Vec2 pos, Vec2 size = {200.0f, 20.0f}) {
+        ECS::Entity e = world.create();
+        UIWidget w;
+        w.type = UIWidgetType::ProgressBar;
+        w.parentId = parentId;
+        w.interactable = false;
+        w.transform.anchorMin = {0.0f, 0.0f};
+        w.transform.anchorMax = {0.0f, 0.0f};
+        w.transform.offsetMin = pos;
+        w.transform.offsetMax = {pos.x + size.x, pos.y + size.y};
+        world.add<UIWidget>(e, w);
+        world.add<UIProgressBar>(e);
+        return e;
+    }
+
+    ECS::Entity createSlider(ECS::World& world, u32 parentId,
+                              Vec2 pos, Vec2 size = {200.0f, 20.0f}) {
+        ECS::Entity e = world.create();
+        UIWidget w;
+        w.type = UIWidgetType::Slider;
+        w.parentId = parentId;
+        w.transform.anchorMin = {0.0f, 0.0f};
+        w.transform.anchorMax = {0.0f, 0.0f};
+        w.transform.offsetMin = pos;
+        w.transform.offsetMax = {pos.x + size.x, pos.y + size.y};
+        world.add<UIWidget>(e, w);
+        world.add<UISlider>(e);
+        return e;
+    }
+
+    ECS::Entity createCheckbox(ECS::World& world, u32 parentId, Vec2 pos) {
+        ECS::Entity e = world.create();
+        UIWidget w;
+        w.type = UIWidgetType::Checkbox;
+        w.parentId = parentId;
+        w.transform.anchorMin = {0.0f, 0.0f};
+        w.transform.anchorMax = {0.0f, 0.0f};
+        w.transform.offsetMin = pos;
+        w.transform.offsetMax = {pos.x + 24.0f, pos.y + 24.0f};
+        world.add<UIWidget>(e, w);
+        world.add<UICheckbox>(e);
+        return e;
+    }
+
+    void bindValue(ECS::Entity widget, std::function<f32(ECS::World&)> getter) {
+        ValueBinding b;
+        b.widgetId = widget.id();
+        b.getter   = std::move(getter);
+        m_bindings.push_back(std::move(b));
+    }
+
+    ECS::Entity hitTest(ECS::World& world, Vec2 screenPos) {
+        ECS::Entity result = ECS::Entity::INVALID;
+        i32 bestOrder = INT_MIN;
+
+        ECS::ComponentQuery q;
+        q.with<UIWidget>();
+
+        world.forEach<UIWidget>(q, [&](ECS::Entity e, UIWidget& w) {
+            if (!w.visible || !w.interactable) return;
+            if (w.type == UIWidgetType::Canvas) return;
+            if (w.computedRect.contains(screenPos)) {
+                if (w.siblingOrder > bestOrder) {
+                    bestOrder = w.siblingOrder;
+                    result    = e;
+                }
+            }
+        });
+
+        return result;
+    }
+
+    void injectMousePosition(Vec2 pos)  { m_mousePos  = pos; }
+    void injectMouseClick(bool pressed) { m_mouseDown = pressed; }
+
+private:
+    static UIRect computeRect(const RectTransform& t, const UIRect& parent) {
+        UIRect rect;
+        rect.position.x = parent.position.x + parent.size.x * t.anchorMin.x + t.offsetMin.x;
+        rect.position.y = parent.position.y + parent.size.y * t.anchorMin.y + t.offsetMin.y;
+        rect.size.x = parent.size.x * (t.anchorMax.x - t.anchorMin.x) +
+                      (t.offsetMax.x - t.offsetMin.x);
+        rect.size.y = parent.size.y * (t.anchorMax.y - t.anchorMin.y) +
+                      (t.offsetMax.y - t.offsetMin.y);
+        return rect;
+    }
+
+    void layoutWidgets(ECS::World& world) {
+        std::unordered_map<u32, UIRect> computed;
+
+        ECS::ComponentQuery q;
+        q.with<UIWidget>();
+
+        world.forEach<UIWidget>(q, [&](ECS::Entity e, UIWidget& w) {
+            if (w.type == UIWidgetType::Canvas) {
+                computed[e.id()] = w.computedRect;
+            }
+        });
+
+        for (int pass = 0; pass < 8; ++pass) {
+            world.forEach<UIWidget>(q, [&](ECS::Entity e, UIWidget& w) {
+                if (w.type == UIWidgetType::Canvas) return;
+                if (!w.visible) return;
+                auto it = computed.find(w.parentId);
+                if (it == computed.end()) return;
+                UIRect rect    = computeRect(w.transform, it->second);
+                w.computedRect = rect;
+                computed[e.id()] = rect;
+            });
+        }
+    }
+
+    void processInput(ECS::World& world) {
+        bool justClicked = m_mouseDown && !m_prevMouseDown;
+
+        ECS::Entity hovered = hitTest(world, m_mousePos);
+        u32 hoveredId = hovered.isValid() ? hovered.id() : kUIInvalidParent;
+
+        if (hoveredId != m_hoveredId) {
+            if (m_hoveredId != kUIInvalidParent) {
+                ECS::Entity prev(m_hoveredId, &world);
+                if (auto* w = world.get<UIWidget>(prev)) {
+                    if (w->onHoverExit) w->onHoverExit(prev);
+                }
+                if (auto* btn = world.get<UIButton>(prev)) {
+                    btn->isHovered = false;
+                }
+            }
+            if (hovered.isValid()) {
+                if (auto* w = world.get<UIWidget>(hovered)) {
+                    if (w->onHoverEnter) w->onHoverEnter(hovered);
+                }
+                if (auto* btn = world.get<UIButton>(hovered)) {
+                    btn->isHovered = true;
+                }
+            }
+            m_hoveredId = hoveredId;
+        }
+
+        if (justClicked && hovered.isValid()) {
+            if (auto* w = world.get<UIWidget>(hovered)) {
+                if (w->onClick) w->onClick(hovered);
+            }
+            if (auto* btn = world.get<UIButton>(hovered)) {
+                btn->isPressed = true;
+            }
+        }
+
+        if (!m_mouseDown) {
+            ECS::ComponentQuery qBtn;
+            qBtn.with<UIButton>();
+            world.forEach<UIButton>(qBtn, [](ECS::Entity, UIButton& btn) {
+                btn.isPressed = false;
+            });
+        }
+
+        m_prevMouseDown = m_mouseDown;
+    }
+
+    void updateBindings(ECS::World& world) {
+        for (auto& b : m_bindings) {
+            ECS::Entity e(b.widgetId, &world);
+            if (!e.isValid()) continue;
+            f32 value = b.getter(world);
+            if (auto* pb = world.get<UIProgressBar>(e)) {
+                pb->currentValue = value;
+                if (auto* w = world.get<UIWidget>(e)) {
+                    if (w->onValueChanged) w->onValueChanged(e, value);
+                }
+            } else if (auto* sl = world.get<UISlider>(e)) {
+                sl->currentValue = value;
+                if (auto* w = world.get<UIWidget>(e)) {
+                    if (w->onValueChanged) w->onValueChanged(e, value);
+                }
+            }
+        }
+    }
+
+    struct ValueBinding {
+        u32 widgetId;
+        std::function<f32(ECS::World&)> getter;
+    };
+
+    Events::EventBus*         m_eventBus      = nullptr;
+    Vec2                      m_mousePos      = {0.0f, 0.0f};
+    bool                      m_mouseDown     = false;
+    bool                      m_prevMouseDown = false;
+    u32                       m_hoveredId     = kUIInvalidParent;
+    std::vector<ValueBinding> m_bindings;
+};
+
+}
+
diff --git a/tests/CMakeLists.txt b/tests/CMakeLists.txt
index 419882c..d140026 100644
--- a/tests/CMakeLists.txt
+++ b/tests/CMakeLists.txt
@@ -17,6 +17,7 @@ set(CAFFEINE_TEST_SOURCES
     test_textureatlas.cpp
     test_scenemanager.cpp
     test_physics2d.cpp
+    test_ui.cpp
 )
 
 if(SDL3_FOUND)
diff --git a/tests/test_ui.cpp b/tests/test_ui.cpp
new file mode 100644
index 0000000..6385535
--- /dev/null
+++ b/tests/test_ui.cpp
@@ -0,0 +1,389 @@
+#include "catch.hpp"
+#include "../src/Caffeine.hpp"
+#include "../src/ui/UIComponents.hpp"
+#include "../src/ui/UISystem.hpp"
+
+#include <cmath>
+
+using namespace Caffeine;
+using namespace Caffeine::ECS;
+using namespace Caffeine::UI;
+
+static constexpr f32 kEps = 0.001f;
+static bool approxEq(f32 a, f32 b) { return std::fabs(a - b) < kEps; }
+
+TEST_CASE("UIColor - white preset", "[ui]") {
+    auto c = UIColor::white();
+    REQUIRE(approxEq(c.r, 1.0f));
+    REQUIRE(approxEq(c.g, 1.0f));
+    REQUIRE(approxEq(c.b, 1.0f));
+    REQUIRE(approxEq(c.a, 1.0f));
+}
+
+TEST_CASE("UIColor - black preset", "[ui]") {
+    auto c = UIColor::black();
+    REQUIRE(approxEq(c.r, 0.0f));
+    REQUIRE(approxEq(c.g, 0.0f));
+    REQUIRE(approxEq(c.b, 0.0f));
+    REQUIRE(approxEq(c.a, 1.0f));
+}
+
+TEST_CASE("UIColor - transparent preset", "[ui]") {
+    auto c = UIColor::transparent();
+    REQUIRE(approxEq(c.a, 0.0f));
+}
+
+TEST_CASE("UIColor - equality operator", "[ui]") {
+    UIColor a = UIColor::white();
+    UIColor b = UIColor::white();
+    REQUIRE(a == b);
+    b.r = 0.5f;
+    REQUIRE(!(a == b));
+}
+
+TEST_CASE("UIRect - contains point inside", "[ui]") {
+    UIRect r;
+    r.position = {10.0f, 10.0f};
+    r.size     = {100.0f, 50.0f};
+    REQUIRE(r.contains({50.0f, 30.0f}));
+}
+
+TEST_CASE("UIRect - contains point outside", "[ui]") {
+    UIRect r;
+    r.position = {10.0f, 10.0f};
+    r.size     = {100.0f, 50.0f};
+    REQUIRE(!r.contains({5.0f, 30.0f}));
+}
+
+TEST_CASE("UIRect - contains point on edge", "[ui]") {
+    UIRect r;
+    r.position = {0.0f, 0.0f};
+    r.size     = {100.0f, 100.0f};
+    REQUIRE(r.contains({0.0f, 0.0f}));
+    REQUIRE(r.contains({100.0f, 100.0f}));
+}
+
+TEST_CASE("UIRect - isValid", "[ui]") {
+    UIRect valid;
+    valid.size = {10.0f, 10.0f};
+    REQUIRE(valid.isValid());
+
+    UIRect invalid;
+    invalid.size = {0.0f, 0.0f};
+    REQUIRE(!invalid.isValid());
+}
+
+// ── Default component values ──────────────────────────────────────────────────
+
+TEST_CASE("UIWidget - defaults", "[ui]") {
+    UIWidget w;
+    REQUIRE(w.type         == UIWidgetType::Panel);
+    REQUIRE(w.parentId     == kUIInvalidParent);
+    REQUIRE(w.visible      == true);
+    REQUIRE(w.interactable == true);
+    REQUIRE(w.siblingOrder == 0);
+}
+
+TEST_CASE("UIButton - default colors", "[ui]") {
+    UIButton btn;
+    REQUIRE(approxEq(btn.idleColor.r, 0.2f));
+    REQUIRE(btn.isHovered == false);
+    REQUIRE(btn.isPressed == false);
+}
+
+TEST_CASE("UILabel - default wordWrap false", "[ui]") {
+    UILabel lbl;
+    REQUIRE(lbl.wordWrap == false);
+}
+
+TEST_CASE("UIProgressBar - default values", "[ui]") {
+    UIProgressBar pb;
+    REQUIRE(approxEq(pb.minValue,     0.0f));
+    REQUIRE(approxEq(pb.maxValue,     100.0f));
+    REQUIRE(approxEq(pb.currentValue, 50.0f));
+    REQUIRE(pb.showText == false);
+}
+
+TEST_CASE("UISlider - default values", "[ui]") {
+    UISlider sl;
+    REQUIRE(approxEq(sl.minValue,     0.0f));
+    REQUIRE(approxEq(sl.maxValue,     1.0f));
+    REQUIRE(approxEq(sl.currentValue, 0.5f));
+    REQUIRE(sl.snapToInt == false);
+}
+
+TEST_CASE("UICheckbox - default unchecked", "[ui]") {
+    UICheckbox cb;
+    REQUIRE(cb.checked == false);
+}
+
+// ── UISystem factory helpers ──────────────────────────────────────────────────
+
+TEST_CASE("UISystem - createCanvas returns valid entity with Canvas type", "[ui]") {
+    World world;
+    UISystem sys;
+    Entity canvas = sys.createCanvas(world, {1280.0f, 720.0f});
+    REQUIRE(canvas.isValid());
+    auto* w = world.get<UIWidget>(canvas);
+    REQUIRE(w != nullptr);
+    REQUIRE(w->type     == UIWidgetType::Canvas);
+    REQUIRE(w->parentId == kUIInvalidParent);
+    REQUIRE(approxEq(w->computedRect.size.x, 1280.0f));
+    REQUIRE(approxEq(w->computedRect.size.y, 720.0f));
+}
+
+TEST_CASE("UISystem - createButton returns entity with UIWidget and UIButton", "[ui]") {
+    World world;
+    UISystem sys;
+    Entity canvas = sys.createCanvas(world);
+    Entity btn    = sys.createButton(world, canvas.id(), "Play", {100.0f, 200.0f});
+    REQUIRE(btn.isValid());
+    auto* w = world.get<UIWidget>(btn);
+    REQUIRE(w != nullptr);
+    REQUIRE(w->type == UIWidgetType::Button);
+    auto* b = world.get<UIButton>(btn);
+    REQUIRE(b != nullptr);
+    REQUIRE(std::string(b->labelText.cStr()) == "Play");
+}
+
+TEST_CASE("UISystem - createLabel returns entity with UILabel", "[ui]") {
+    World world;
+    UISystem sys;
+    Entity canvas = sys.createCanvas(world);
+    Entity lbl    = sys.createLabel(world, canvas.id(), "Hello", {0.0f, 0.0f});
+    REQUIRE(lbl.isValid());
+    auto* l = world.get<UILabel>(lbl);
+    REQUIRE(l != nullptr);
+    REQUIRE(std::string(l->text.cStr()) == "Hello");
+}
+
+TEST_CASE("UISystem - createProgressBar returns entity with UIProgressBar", "[ui]") {
+    World world;
+    UISystem sys;
+    Entity canvas = sys.createCanvas(world);
+    Entity pb     = sys.createProgressBar(world, canvas.id(), {0.0f, 0.0f});
+    REQUIRE(pb.isValid());
+    REQUIRE(world.get<UIProgressBar>(pb) != nullptr);
+}
+
+TEST_CASE("UISystem - createSlider returns entity with UISlider", "[ui]") {
+    World world;
+    UISystem sys;
+    Entity canvas = sys.createCanvas(world);
+    Entity sl     = sys.createSlider(world, canvas.id(), {0.0f, 0.0f});
+    REQUIRE(sl.isValid());
+    REQUIRE(world.get<UISlider>(sl) != nullptr);
+}
+
+TEST_CASE("UISystem - createPanel returns valid entity", "[ui]") {
+    World world;
+    UISystem sys;
+    Entity canvas = sys.createCanvas(world);
+    UIRect rect;
+    rect.position = {0.0f, 0.0f};
+    rect.size     = {200.0f, 100.0f};
+    Entity panel  = sys.createPanel(world, canvas.id(), rect);
+    REQUIRE(panel.isValid());
+    auto* w = world.get<UIWidget>(panel);
+    REQUIRE(w != nullptr);
+    REQUIRE(w->type == UIWidgetType::Panel);
+}
+
+// ── onUpdate ─────────────────────────────────────────────────────────────────
+
+TEST_CASE("UISystem - onUpdate empty world does not crash", "[ui]") {
+    World world;
+    UISystem sys;
+    REQUIRE_NOTHROW(sys.onUpdate(world, 0.016f));
+}
+
+TEST_CASE("UISystem - multiple canvases onUpdate does not crash", "[ui]") {
+    World world;
+    UISystem sys;
+    sys.createCanvas(world, {800.0f, 600.0f});
+    sys.createCanvas(world, {1920.0f, 1080.0f});
+    REQUIRE_NOTHROW(sys.onUpdate(world, 0.016f));
+}
+
+// ── hitTest ──────────────────────────────────────────────────────────────────
+
+TEST_CASE("UISystem - hitTest returns INVALID when no widgets", "[ui]") {
+    World world;
+    UISystem sys;
+    Entity result = sys.hitTest(world, {100.0f, 100.0f});
+    REQUIRE(!result.isValid());
+}
+
+TEST_CASE("UISystem - hitTest returns entity when click is inside its rect", "[ui]") {
+    World world;
+    UISystem sys;
+    Entity canvas = sys.createCanvas(world, {1280.0f, 720.0f});
+    Entity btn    = sys.createButton(world, canvas.id(), "OK", {50.0f, 50.0f}, {100.0f, 40.0f});
+    sys.onUpdate(world, 0.0f);  // run layout
+    Entity hit = sys.hitTest(world, {100.0f, 70.0f});
+    REQUIRE(hit.isValid());
+    REQUIRE(hit.id() == btn.id());
+}
+
+TEST_CASE("UISystem - hitTest returns INVALID when click is outside all rects", "[ui]") {
+    World world;
+    UISystem sys;
+    Entity canvas = sys.createCanvas(world, {1280.0f, 720.0f});
+    sys.createButton(world, canvas.id(), "OK", {50.0f, 50.0f}, {100.0f, 40.0f});
+    sys.onUpdate(world, 0.0f);
+    Entity hit = sys.hitTest(world, {500.0f, 500.0f});
+    REQUIRE(!hit.isValid());
+}
+
+TEST_CASE("UISystem - invisible widget not returned by hitTest", "[ui]") {
+    World world;
+    UISystem sys;
+    Entity canvas = sys.createCanvas(world, {1280.0f, 720.0f});
+    Entity btn    = sys.createButton(world, canvas.id(), "Hidden", {50.0f, 50.0f}, {100.0f, 40.0f});
+    sys.onUpdate(world, 0.0f);
+    auto* w = world.get<UIWidget>(btn);
+    w->visible = false;
+    Entity hit = sys.hitTest(world, {100.0f, 70.0f});
+    REQUIRE(!hit.isValid());
+}
+
+// ── Input callbacks ───────────────────────────────────────────────────────────
+
+TEST_CASE("UISystem - onClick fires when mouse clicked on widget", "[ui]") {
+    World world;
+    UISystem sys;
+    Entity canvas = sys.createCanvas(world, {1280.0f, 720.0f});
+    Entity btn    = sys.createButton(world, canvas.id(), "Click", {50.0f, 50.0f}, {100.0f, 40.0f});
+    sys.onUpdate(world, 0.0f);
+
+    bool fired = false;
+    world.get<UIWidget>(btn)->onClick = [&](Entity) { fired = true; };
+
+    sys.injectMousePosition({100.0f, 70.0f});
+    sys.injectMouseClick(true);
+    sys.onUpdate(world, 0.016f);
+    REQUIRE(fired);
+}
+
+TEST_CASE("UISystem - onClick does not fire when clicking outside", "[ui]") {
+    World world;
+    UISystem sys;
+    Entity canvas = sys.createCanvas(world, {1280.0f, 720.0f});
+    Entity btn    = sys.createButton(world, canvas.id(), "Click", {50.0f, 50.0f}, {100.0f, 40.0f});
+    sys.onUpdate(world, 0.0f);
+
+    bool fired = false;
+    world.get<UIWidget>(btn)->onClick = [&](Entity) { fired = true; };
+
+    sys.injectMousePosition({400.0f, 400.0f});
+    sys.injectMouseClick(true);
+    sys.onUpdate(world, 0.016f);
+    REQUIRE(!fired);
+}
+
+TEST_CASE("UISystem - onHoverEnter fires when mouse enters widget", "[ui]") {
+    World world;
+    UISystem sys;
+    Entity canvas = sys.createCanvas(world, {1280.0f, 720.0f});
+    Entity btn    = sys.createButton(world, canvas.id(), "Hover", {50.0f, 50.0f}, {100.0f, 40.0f});
+    sys.onUpdate(world, 0.0f);
+
+    bool entered = false;
+    world.get<UIWidget>(btn)->onHoverEnter = [&](Entity) { entered = true; };
+
+    sys.injectMousePosition({100.0f, 70.0f});
+    sys.injectMouseClick(false);
+    sys.onUpdate(world, 0.016f);
+    REQUIRE(entered);
+}
+
+// ── bindValue ────────────────────────────────────────────────────────────────
+
+TEST_CASE("UISystem - bindValue updates ProgressBar currentValue", "[ui]") {
+    World world;
+    UISystem sys;
+    Entity canvas = sys.createCanvas(world, {1280.0f, 720.0f});
+    Entity pb     = sys.createProgressBar(world, canvas.id(), {0.0f, 0.0f});
+
+    f32 source = 75.0f;
+    sys.bindValue(pb, [&](World&) { return source; });
+    sys.onUpdate(world, 0.016f);
+
+    auto* bar = world.get<UIProgressBar>(pb);
+    REQUIRE(bar != nullptr);
+    REQUIRE(approxEq(bar->currentValue, 75.0f));
+}
+
+// ── Layout ───────────────────────────────────────────────────────────────────
+
+TEST_CASE("UISystem - layout computes rect for direct child of canvas", "[ui]") {
+    World world;
+    UISystem sys;
+    Entity canvas = sys.createCanvas(world, {1280.0f, 720.0f});
+    Entity btn    = sys.createButton(world, canvas.id(), "X", {100.0f, 200.0f}, {120.0f, 40.0f});
+    sys.onUpdate(world, 0.0f);
+
+    auto* w = world.get<UIWidget>(btn);
+    REQUIRE(w != nullptr);
+    REQUIRE(approxEq(w->computedRect.position.x, 100.0f));
+    REQUIRE(approxEq(w->computedRect.position.y, 200.0f));
+    REQUIRE(approxEq(w->computedRect.size.x, 120.0f));
+    REQUIRE(approxEq(w->computedRect.size.y, 40.0f));
+}
+
+// ── siblingOrder / interaction ────────────────────────────────────────────────
+
+TEST_CASE("UISystem - siblingOrder: higher order wins hitTest", "[ui]") {
+    World world;
+    UISystem sys;
+    Entity canvas = sys.createCanvas(world, {1280.0f, 720.0f});
+
+    Entity low  = sys.createButton(world, canvas.id(), "Low",  {50.0f, 50.0f}, {200.0f, 200.0f});
+    Entity high = sys.createButton(world, canvas.id(), "High", {50.0f, 50.0f}, {200.0f, 200.0f});
+
+    world.get<UIWidget>(low)->siblingOrder  = 0;
+    world.get<UIWidget>(high)->siblingOrder = 1;
+
+    sys.onUpdate(world, 0.0f);
+    Entity hit = sys.hitTest(world, {100.0f, 100.0f});
+    REQUIRE(hit.isValid());
+    REQUIRE(hit.id() == high.id());
+}
+
+TEST_CASE("UISystem - button isHovered state set on hover", "[ui]") {
+    World world;
+    UISystem sys;
+    Entity canvas = sys.createCanvas(world, {1280.0f, 720.0f});
+    Entity btn    = sys.createButton(world, canvas.id(), "Hover", {50.0f, 50.0f}, {100.0f, 40.0f});
+    sys.onUpdate(world, 0.0f);
+
+    sys.injectMousePosition({100.0f, 70.0f});
+    sys.onUpdate(world, 0.016f);
+
+    auto* b = world.get<UIButton>(btn);
+    REQUIRE(b != nullptr);
+    REQUIRE(b->isHovered == true);
+}
+
+TEST_CASE("UISystem - non-interactable widget not hit", "[ui]") {
+    World world;
+    UISystem sys;
+    Entity canvas = sys.createCanvas(world, {1280.0f, 720.0f});
+    Entity lbl    = sys.createLabel(world, canvas.id(), "Info", {50.0f, 50.0f});
+    sys.onUpdate(world, 0.0f);
+
+    world.get<UIWidget>(lbl)->interactable = false;
+    Entity hit = sys.hitTest(world, {100.0f, 60.0f});
+    REQUIRE(!hit.isValid());
+}
+
+TEST_CASE("UISystem - createCheckbox returns entity with UICheckbox", "[ui]") {
+    World world;
+    UISystem sys;
+    Entity canvas = sys.createCanvas(world, {1280.0f, 720.0f});
+    Entity cb     = sys.createCheckbox(world, canvas.id(), {100.0f, 100.0f});
+    REQUIRE(cb.isValid());
+    auto* c = world.get<UICheckbox>(cb);
+    REQUIRE(c != nullptr);
+    REQUIRE(c->checked == false);
+}