diff --git a/src/AcDream.App/UI/Layout/DatWidgetFactory.cs b/src/AcDream.App/UI/Layout/DatWidgetFactory.cs
index 15ba9a85..059ee654 100644
--- a/src/AcDream.App/UI/Layout/DatWidgetFactory.cs
+++ b/src/AcDream.App/UI/Layout/DatWidgetFactory.cs
@@ -63,6 +63,9 @@ public static class DatWidgetFactory
         e.Width  = info.Width;
         e.Height = info.Height;
 
+        // Honor the dat's draw order so overlapping pieces (grip overlay over bevel chrome) layer correctly.
+        e.ZOrder = (int)info.ReadOrder;
+
         // Map the four raw edge-anchor values to the AnchorEdges bit-flag that the
         // UI layout engine uses for reflow.
         e.Anchors = ElementReader.ToAnchors(info.Left, info.Top, info.Right, info.Bottom);
diff --git a/tests/AcDream.App.Tests/UI/Layout/DatWidgetFactoryTests.cs b/tests/AcDream.App.Tests/UI/Layout/DatWidgetFactoryTests.cs
index 4258d0b6..c2a66de1 100644
--- a/tests/AcDream.App.Tests/UI/Layout/DatWidgetFactoryTests.cs
+++ b/tests/AcDream.App.Tests/UI/Layout/DatWidgetFactoryTests.cs
@@ -61,7 +61,16 @@ public class DatWidgetFactoryTests
         Assert.Equal(AnchorEdges.Left | AnchorEdges.Top | AnchorEdges.Right, e.Anchors);
     }
 
-    // ── Test 5: Meter slice extraction (the important one) ───────────────────
+    // ── Test 5: ReadOrder propagated to ZOrder ───────────────────────────────
+
+    [Fact]
+    public void Create_PropagatesReadOrderToZOrder()
+    {
+        var e = DatWidgetFactory.Create(new ElementInfo { Type = 3, ReadOrder = 7 }, NoTex, null);
+        Assert.Equal(7, e!.ZOrder);
+    }
+
+    // ── Test 6: Meter slice extraction (the important one) ───────────────────
 
     /// <summary>
     /// A meter (Type 7) whose two Type-3 containers each carry 3 image children