diff --git a/frontend/src/devices/DeviceDetail.jsx b/frontend/src/devices/DeviceDetail.jsx
index ea1fef6..eec360c 100644
--- a/frontend/src/devices/DeviceDetail.jsx
+++ b/frontend/src/devices/DeviceDetail.jsx
@@ -362,6 +362,10 @@ export default function DeviceDetail() {
   const [locationName, setLocationName] = useState(null);
   const cols = useBreakpoint();
   const [deviceUsers, setDeviceUsers] = useState([]);
+  const [staffNotes, setStaffNotes] = useState("");
+  const [editingNotes, setEditingNotes] = useState(false);
+  const [savingNotes, setSavingNotes] = useState(false);
+  const notesRef = useRef(null);
   const [usersLoading, setUsersLoading] = useState(false);
 
   useEffect(() => {
@@ -456,10 +460,10 @@ export default function DeviceDetail() {
 
   // ===== Section definitions =====
 
-  const [staffNotes, setStaffNotes] = useState(device.staffNotes || "");
-  const [editingNotes, setEditingNotes] = useState(false);
-  const [savingNotes, setSavingNotes] = useState(false);
-  const notesRef = useRef(null);
+  // Initialize staffNotes from device data once loaded
+  useEffect(() => {
+    if (device?.staffNotes) setStaffNotes(device.staffNotes);
+  }, [device]);
 
   const saveStaffNotes = async (value) => {
     setSavingNotes(true);