Again. Fixes :D

frontend/src/devices/DeviceDetail.jsx

@@ -457,10 +457,11 @@ export default function DeviceDetail() {
   // ===== Section definitions =====
 
   const deviceInfoSection = (
-    <section className="rounded-lg border p-5" style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}>
+    <section className="rounded-lg border p-6" style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}>
+      <h2 className="text-lg font-semibold mb-4" style={{ color: "var(--text-heading)" }}>Device Information</h2>
       <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gridTemplateRows: "auto auto", gap: "1rem", alignItems: "start" }}>
         {/* Row 1, Col 1: Status */}
-        <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
+        <div style={{ gridColumn: 1, gridRow: 1, display: "flex", alignItems: "center", gap: "0.75rem" }}>
           <div
             className="w-10 h-10 rounded-full flex items-center justify-center shrink-0"
             style={{ backgroundColor: isOnline ? "var(--success-bg)" : "var(--bg-card-hover)" }}
@@ -484,25 +485,25 @@ export default function DeviceDetail() {
         </div>
 
         {/* Row 1, Col 2: Hardware Variant */}
-        <div>
+        <div style={{ gridColumn: 2, gridRow: 1 }}>
           <div className="text-xs font-medium uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>Hardware Variant</div>
           <div className="text-sm mt-0.5" style={{ color: "var(--text-primary)" }}>VesperCore</div>
         </div>
 
-        {/* Row 1-2, Col 3: Admin Notes (spans 2 rows) */}
+        {/* Row 1-2, Col 3: Admin Notes (spans 2 rows, far right) */}
-        <div style={{ gridRow: "1 / 3" }}>
+        <div style={{ gridColumn: 3, gridRow: "1 / 3" }}>
           <div className="text-xs font-medium uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>Admin Notes</div>
           <div className="text-sm mt-0.5" style={{ color: "var(--text-muted)" }}>-</div>
         </div>
 
         {/* Row 2, Col 1: Serial Number */}
-        <div>
+        <div style={{ gridColumn: 1, gridRow: 2 }}>
           <div className="text-xs font-medium uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>Serial Number</div>
           <div className="text-sm font-mono mt-0.5" style={{ color: "var(--text-primary)" }}>{device.device_id}</div>
         </div>
 
         {/* Row 2, Col 2: Document ID */}
-        <div>
+        <div style={{ gridColumn: 2, gridRow: 2 }}>
           <div className="text-xs font-medium uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>Document ID</div>
           <div className="text-xs font-mono mt-0.5" style={{ color: "var(--text-muted)" }}>{device.id}</div>
         </div>
@@ -512,7 +513,7 @@ export default function DeviceDetail() {
 
   const subscriptionSection = (
     <SectionCard title="Subscription">
-      <dl className="grid gap-4" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))" }}>
+      <dl className="grid gap-4" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))" }}>
         <Field label="Tier">
           <span className="px-2 py-0.5 text-xs rounded-full capitalize" style={{ backgroundColor: "var(--badge-blue-bg)", color: "var(--badge-blue-text)" }}>
             {sub.subscrTier}
@@ -783,7 +784,7 @@ export default function DeviceDetail() {
 
   const miscSection = (
     <SectionCard title="Misc">
-      <dl className="grid gap-4" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))" }}>
+      <dl className="grid gap-4" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))" }}>
         <Field label="Automated Events"><BoolBadge value={device.events_on} yesLabel="ON" noLabel="OFF" /></Field>
         <Field label="Device Locale"><span className="capitalize">{attr.deviceLocale || "-"}</span></Field>
         <Field label="WebSocket URL">{device.websocket_url}</Field>
@@ -863,17 +864,17 @@ export default function DeviceDetail() {
       </div>
       {/* Row 2: Device Settings — full width */}
       {deviceSettingsSection}
-      {/* Row 3: Location + Warranty */}
+      {/* Row 3: Left column (Location, Misc, Notes) | Right column (Warranty, App Users) */}
       <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1.5rem", alignItems: "start" }}>
-        {locationSection}
+        <div style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
-        {warrantySection}
+          {locationSection}
-      </div>
+          {miscSection}
-      {/* Row 4: Misc full width */}
+          {notesSection}
-      {miscSection}
+        </div>
-      {/* Row 5: Notes + App Users — equal width */}
+        <div style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
-      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1.5rem", alignItems: "start" }}>
+          {warrantySection}
-        {notesSection}
+          {appUsersSection}
-        {appUsersSection}
+        </div>
       </div>
       {/* Latest Logs */}
       {logsSection}
@@ -888,9 +889,9 @@ export default function DeviceDetail() {
         {subscriptionSection}
         {locationSection}
       </div>
-      {/* Row 2: Device Settings (cols 1-2) + Warranty (col 3) */}
+      {/* Row 2: Device Settings (cols 1-2) + Warranty (col 3) — same 3-col grid so borders align */}
-      <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: "1.5rem", alignItems: "stretch" }}>
+      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "1.5rem", alignItems: "stretch" }}>
-        {deviceSettingsSection}
+        <div style={{ gridColumn: "1 / 3" }}>{deviceSettingsSection}</div>
         {warrantySection}
       </div>
       {/* Row 3: Misc + Notes + App Users — equal width */}