diff --git a/src/features/device/add/index.tsx b/src/features/device/add/index.tsx
index 7c1652a..a98f801 100644
--- a/src/features/device/add/index.tsx
+++ b/src/features/device/add/index.tsx
@@ -41,6 +41,7 @@ export default function AddDeviceFeature() {
     
     const deviceToSave: DeviceData = {
       ...form,
+      id: new Date().getTime().toString(),
       towerNumber: merchant.tower,
       floorName: merchant.floor,
       unitNumber: merchant.unit,
diff --git a/src/features/home/hooks/queries.ts b/src/features/home/hooks/queries.ts
index e8bef2a..8cca469 100644
--- a/src/features/home/hooks/queries.ts
+++ b/src/features/home/hooks/queries.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import { useQueries } from "@tanstack/react-query";
 import { getDeviceStatus } from "../../../repositories/device";
 import { getDevices, getMerchant } from "../../../utils/storage";
@@ -9,19 +10,20 @@ export function useDevices() {
   const datas = [...dataStorage];
 
   const queries = useQueries({
-    queries: datas.map((device) => ({
-      queryKey: [
-        "device-status",
-        merchant?.merchantName,
-        device.towerNumber,
-        device.floorName,
-        device.unitNumber,
-        device.deviceName,
-        device.roomName,
-        device.deviceType,
-        "S",
-      ],
-      queryFn: async () => {
+  queries: datas.map((device) => ({
+    queryKey: [
+      "device-status",
+      merchant?.merchantName,
+      device.towerNumber,
+      device.floorName,
+      device.unitNumber,
+      device.deviceName,
+      device.roomName,
+      device.deviceType,
+      "S",
+    ],
+    queryFn: async () => {
+      try {
         const params = {
           merchantName: merchant?.merchantName,
           towerNumber: device.towerNumber,
@@ -32,23 +34,35 @@ export function useDevices() {
           deviceType: device.deviceType,
           commandType: "S",
         };
-        const data = await getDeviceStatus(params);
+
+        const res = await getDeviceStatus(params);
+        const payload = res?.data?.payload ?? "";
 
         return {
           ...device,
-          code: data.data.code,
-          deviceName: device.deviceName,
-          payload: data.data.payload,
-          status:
-            data.data.payload?.toLowerCase().includes("on") ||
-            data.data.payload?.toLowerCase().includes("lock") ||
-            data.data.payload?.toLowerCase().includes("open")
-              ? true
-              : false,
+          id: device.id,
+          data: res.data,
+          code: res.data?.code,
+          payload,
+          status: payload.toLowerCase().includes("on") ||
+            payload.toLowerCase().includes("lock") ||
+            payload.toLowerCase().includes("open"),
         } as unknown as Device;
-      },
-    })),
-  });
+      } catch (error) {
+        // 👇 fallback ke data local
+        return {
+          ...device,
+          id: device.id,
+          data: null,
+          payload: 'Not Found',
+          status: false,
+        } as unknown as Device;
+      }
+    },
+    retry: false, // optional: biar ga retry berkali-kali
+  })),
+});
+
   
   const devices = queries
   .map((q, index) => ({
@@ -57,9 +71,7 @@ export function useDevices() {
     isError: q.isError,
     refetch: q.refetch, // 👈 per device
     key: datas[index].code,
-  }))
-  .filter((d) => !d?.isError);
-  console.log(devices);
+  }));
 
   return {
     data: devices as unknown as DeviceData[],
diff --git a/src/features/home/sections/devices.tsx b/src/features/home/sections/devices.tsx
index c590521..8946081 100644
--- a/src/features/home/sections/devices.tsx
+++ b/src/features/home/sections/devices.tsx
@@ -6,6 +6,7 @@ import {
   Lightbulb,
   Minus,
   Plus,
+  Trash,
   Wind,
   WindArrowDown,
 } from "lucide-react";
@@ -13,8 +14,9 @@ import { Switch } from "../../../components/ui/switch";
 import { useNavigate } from "@tanstack/react-router";
 import Card from "../../../components/ui/card";
 import { useDevices } from "../hooks/queries";
-import { getMerchant } from "../../../utils/storage";
+import { getDevices, getMerchant, saveDevices } from "../../../utils/storage";
 import { useDeviceCommand } from "../hooks/mutations";
+import { useEffect, useState } from "react";
 
 export default function Devices() {
   const navigate = useNavigate();
@@ -24,6 +26,8 @@ export default function Devices() {
   const { data, isLoading } = useDevices();
   const { isPending, mutate } = useDeviceCommand();
 
+  const [error, setError] = useState("");
+
   const onSubmit = (payload: DeviceData, action = "") => {
     mutate(
       {
@@ -38,16 +42,36 @@ export default function Devices() {
         unitNumber: payload.unitNumber,
       },
       {
-        onSuccess: () => {
-          payload?.refetch?.();
+        onSuccess: (res) => {
+          if (res.status === "success") {
+            payload?.refetch?.();
+          } else {
+            setError(res.message);
+          }
         },
-        onError: () => {
-          payload?.refetch?.();
+        onError: (err) => {
+          setError(err.message);
         },
       },
     );
   };
 
+  const onDelete = (payload: DeviceData) => {
+    const devices = getDevices();
+
+    const datas = devices?.filter((item) => item.id != payload?.id);
+    saveDevices(datas);
+    payload?.refetch?.();
+  };
+
+  useEffect(() => {
+    if (error) {
+      setTimeout(() => {
+        setError("");
+      }, 3000);
+    }
+  }, [error]);
+
   const icons = {
     L: { icon: <Lightbulb size={24} />, label: "Lampu" },
     BL: { icon: <Blinds size={24} />, label: "Blind" },
@@ -61,13 +85,19 @@ export default function Devices() {
 
   return (
     <>
-      <div className="py-4 px-6">
-        { merchant && (
+      <div
+        className={`fixed top-4 left-4 right-4 text-center bg-red-500 py-2 px-4 rounded-lg text-white transition-all ease-in duration-300 ${error ? "opacity-100" : "opacity-0"}`}
+      >
+        {error}
+      </div>
 
-        <h1 className="text-base text-neutral-900 font-bold mb-4">
-          Devices Located at{' '}{merchant?.tower}/{merchant?.floor}/{merchant?.unit}
-        </h1>
-        ) }
+      <div className="py-4 px-6">
+        {merchant && (
+          <h1 className="text-base text-neutral-900 font-bold mb-4">
+            Devices Located at {merchant?.tower}/{merchant?.floor}/
+            {merchant?.unit}
+          </h1>
+        )}
         <div className="flex items-center gap-3 flex-wrap justify-end">
           <button
             onClick={() =>
@@ -120,7 +150,7 @@ export default function Devices() {
             data?.map((item, index) => (
               <Card
                 key={index}
-                className={`${
+                className={` relative ${
                   item.deviceName === "AC" && "row-span-2 col-span-1"
                 } ${item.status && "bg-orange-100 border-orange-500"}`}
               >
@@ -190,6 +220,13 @@ export default function Devices() {
                     </div>
                   </>
                 )}
+                <div className="flex justify-end h-8" />
+                <span
+                  className="cursor-pointer text-red-500 absolute right-2 bottom-2"
+                  onClick={() => onDelete(item)}
+                >
+                  <Trash />
+                </span>
               </Card>
             ))}
 
diff --git a/src/repositories/device/types.d.ts b/src/repositories/device/types.d.ts
index 32e9297..1fd10ae 100644
--- a/src/repositories/device/types.d.ts
+++ b/src/repositories/device/types.d.ts
@@ -5,6 +5,7 @@ type Device = {
 };
 
 type DeviceData = {
+    id?: string,
     floorName?: string;
     unitNumber?: string;
     deviceName?: string;