diff --git a/src/features/home/hooks/queries.ts b/src/features/home/hooks/queries.ts
index a191669..39d3a00 100644
--- a/src/features/home/hooks/queries.ts
+++ b/src/features/home/hooks/queries.ts
@@ -1,11 +1,15 @@
 import { useQueries } from "@tanstack/react-query";
 import { getDeviceStatus } from "../../../repositories/device";
 import { DEVICES_DATA } from "../../../utils/data";
-import { getMerchant } from "../../../utils/storage";
+import { getDevices, getMerchant } from "../../../utils/storage";
 
 export function useDevices() {
+  const dataStorage = getDevices();
+
+  const datas = [...DEVICES_DATA, ...dataStorage];
+  
   const queries = useQueries({
-    queries: DEVICES_DATA.map((device) => ({
+    queries: datas.map((device) => ({
       queryKey: [
         "device-status",
         device.code,
@@ -18,7 +22,7 @@ export function useDevices() {
           merchantName: merchant,
           floorName: device.floorName,
           unitNumber: device.unitNumber,
-          deviceName: device.code,
+          deviceName: device.deviceName,
           roomName: device.roomName,
           deviceType: device.deviceType,
           commandType: "S",
@@ -29,7 +33,7 @@ export function useDevices() {
         return {
           ...device,
           code: data.data.code,
-          deviceName: device.code,
+          deviceName: device.deviceName,
           status:
             data.data.payload?.toLowerCase().includes("on") ||
             data.data.payload?.toLowerCase().includes("lock") ||
@@ -49,7 +53,7 @@ export function useDevices() {
       isLoading: q.isLoading || q.isFetching,
       isError: q.isError,
       refetch: q.refetch, // 👈 per device
-      key: DEVICES_DATA[index].code,
+      key: datas[index].code,
     }))
     .filter((d) => !d?.isError);
 
diff --git a/src/features/home/sections/devices.tsx b/src/features/home/sections/devices.tsx
index ce26736..214d51c 100644
--- a/src/features/home/sections/devices.tsx
+++ b/src/features/home/sections/devices.tsx
@@ -3,18 +3,19 @@ import { Switch } from "../../../components/ui/switch";
 import { useNavigate } from "@tanstack/react-router";
 import Card from "../../../components/ui/card";
 import { useDevices } from "../hooks/queries";
-import { getDevices, getMerchant } from "../../../utils/storage";
+import {  getMerchant } from "../../../utils/storage";
 import { useDeviceCommand } from "../hooks/mutations";
 
 export default function Devices() {
   const navigate = useNavigate();
-  const dataStorage = getDevices();
+
   const merchant = getMerchant();
 
   const { data, isLoading } = useDevices();
   const { isPending, mutate } = useDeviceCommand();
 
   const onSubmit = (payload: DeviceData, action = "") => {
+    
     mutate(
       {
         commandType: "C",
@@ -46,9 +47,8 @@ export default function Devices() {
     { icon: <Tv size={24} />, label: "device" },
   ];
 
-  const datas = [...data, ...dataStorage];
 
-  console.log(data);
+  // console.log(data);
 
   return (
     <>
@@ -80,7 +80,7 @@ export default function Devices() {
       <div className="py-4 px-6">
         <div className="grid grid-cols-2 auto-rows-fr gap-4 grid-flow-dense">
           {!isLoading &&
-            datas?.map((item, index) => (
+            data?.map((item, index) => (
               <Card
                 key={index}
                 className={`${
@@ -113,7 +113,7 @@ export default function Devices() {
                   {item?.deviceLabel}
                 </h1>
                 <p className="text-xs text-gray-500">
-                  T{item?.towerNumber}/L{item?.floorName}/R{item?.roomName}
+                  {item?.towerNumber}/{item?.floorName}/{item?.roomName}
                 </p>
 
                 {item?.deviceName === "AC" && (