diff --git a/src/ui.zig b/src/ui.zig
index a3ae4e5..91edc5a 100644
--- a/src/ui.zig
+++ b/src/ui.zig
@@ -27,19 +27,27 @@ pub const box_bg = rl.Color{ .r = 0, .g = 0, .b = 0, .a = 200 };
 
 pub fn drawMetrics(entities: *const sandbox.Entities, update_us: i64, render_us: i64, paused: bool, font: rl.Font) void {
     var buf: [256]u8 = undefined;
-    var y: f32 = padding;
 
-    // dark background for readability
+    // fps box (above metrics)
+    const fps_box_height: i32 = 26;
+    rl.drawRectangle(5, 5, 180, fps_box_height, box_bg);
+    const frame_ms = rl.getFrameTime() * 1000.0;
+    const fps = if (frame_ms > 0) 1000.0 / frame_ms else 0;
+    const fps_text = std.fmt.bufPrintZ(&buf, "FPS: {d:.0}", .{fps}) catch "?";
+    rl.drawTextEx(font, fps_text, .{ .x = padding, .y = padding }, font_size, 0, text_color);
+
+    // metrics box (below fps)
+    const metrics_y: i32 = 5 + fps_box_height + 5;
+    var y: f32 = @as(f32, @floatFromInt(metrics_y)) + box_padding;
     const bg_height: i32 = if (paused) 130 else 100;
-    rl.drawRectangle(5, 5, 180, bg_height, box_bg);
+    rl.drawRectangle(5, metrics_y, 180, bg_height, box_bg);
 
     // entity count
     const count_text = std.fmt.bufPrintZ(&buf, "entities: {d}", .{entities.count}) catch "?";
     rl.drawTextEx(font, count_text, .{ .x = padding, .y = y }, font_size, 0, text_color);
     y += line_height;
 
-    // frame time
-    const frame_ms = rl.getFrameTime() * 1000.0;
+    // frame time (frame_ms already calculated above for fps)
     const frame_text = std.fmt.bufPrintZ(&buf, "frame:    {d:.1}ms", .{frame_ms}) catch "?";
     rl.drawTextEx(font, frame_text, .{ .x = padding, .y = y }, font_size, 0, text_color);
     y += line_height;
@@ -63,12 +71,12 @@ pub fn drawMetrics(entities: *const sandbox.Entities, update_us: i64, render_us:
     }
 
     // controls legend
-    drawControls(font, bg_height);
+    drawControls(font, metrics_y + bg_height);
 }
 
-fn drawControls(font: rl.Font, metrics_height: i32) void {
+fn drawControls(font: rl.Font, metrics_bottom: i32) void {
     const ctrl_box_height: i32 = @intFromFloat(small_line_height * 4 + box_padding * 2);
-    const ctrl_box_y: i32 = 5 + metrics_height + 5;
+    const ctrl_box_y: i32 = metrics_bottom + 5;
     rl.drawRectangle(5, ctrl_box_y, 175, ctrl_box_height, box_bg);
 
     var y: f32 = @as(f32, @floatFromInt(ctrl_box_y)) + box_padding;