diff --git a/src/app/[orgId]/resources/[resourceId]/components/CustomDomainInput.tsx b/src/app/[orgId]/resources/[resourceId]/components/CustomDomainInput.tsx
index 8f787db0..d03b9333 100644
--- a/src/app/[orgId]/resources/[resourceId]/components/CustomDomainInput.tsx
+++ b/src/app/[orgId]/resources/[resourceId]/components/CustomDomainInput.tsx
@@ -1,45 +1,47 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { Input } from "@/components/ui/input"
+import * as React from "react";
+import { Input } from "@/components/ui/input";
 
 interface CustomDomainInputProps {
-  domainSuffix: string
-  placeholder?: string
-  onChange?: (value: string) => void
+    domainSuffix: string;
+    placeholder?: string;
+    onChange?: (value: string) => void;
 }
 
-export default function CustomDomainInput({
-  domainSuffix,
-  placeholder = "Enter subdomain",
-  onChange
-}: CustomDomainInputProps = {
-  domainSuffix: ".example.com"
-}) {
-  const [value, setValue] = React.useState("")
+export default function CustomDomainInput(
+    {
+        domainSuffix,
+        placeholder = "Enter subdomain",
+        onChange,
+    }: CustomDomainInputProps = {
+        domainSuffix: ".example.com",
+    },
+) {
+    const [value, setValue] = React.useState("");
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = event.target.value
-    setValue(newValue)
-    if (onChange) {
-      onChange(newValue)
-    }
-  }
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const newValue = event.target.value;
+        setValue(newValue);
+        if (onChange) {
+            onChange(newValue);
+        }
+    };
 
-  return (
-    <div className="relative w-full max-w-sm">
-      <div className="flex">
-        <Input
-          type="text"
-          placeholder={placeholder}
-          value={value}
-          onChange={handleChange}
-          className="rounded-r-none flex-grow"
-        />
-        <div className="inline-flex items-center px-3 rounded-r-md border border-l-0 border-input bg-muted text-muted-foreground">
-          <span className="text-sm">{domainSuffix}</span>
+    return (
+        <div className="relative w-full max-w-sm">
+            <div className="flex">
+                <Input
+                    type="text"
+                    placeholder={placeholder}
+                    value={value}
+                    onChange={handleChange}
+                    className="rounded-r-none flex-grow"
+                />
+                <div className="inline-flex items-center px-3 rounded-r-md border border-l-0 border-input bg-muted text-muted-foreground">
+                    <span className="text-sm">{domainSuffix}</span>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  )
-}
\ No newline at end of file
+    );
+}
diff --git a/src/app/[orgId]/resources/[resourceId]/targets/page.tsx b/src/app/[orgId]/resources/[resourceId]/targets/page.tsx
index b237bcdd..23021c38 100644
--- a/src/app/[orgId]/resources/[resourceId]/targets/page.tsx
+++ b/src/app/[orgId]/resources/[resourceId]/targets/page.tsx
@@ -1,32 +1,45 @@
-"use client"
+"use client";
 
-import { useEffect, useState } from "react"
-import { PlusCircle, Trash2, Server, Globe, Cpu, Power } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { Switch } from "@/components/ui/switch"
-import { Badge } from "@/components/ui/badge"
-import api from "@app/api"
-import { AxiosResponse } from "axios"
-import { ListTargetsResponse } from "@server/routers/target/listTargets"
+import { useEffect, useState } from "react";
+import { PlusCircle, Trash2, Server, Globe, Cpu } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Badge } from "@/components/ui/badge";
+import api from "@app/api";
+import { AxiosResponse } from "axios";
+import { ListTargetsResponse } from "@server/routers/target/listTargets";
 
 const isValidIPAddress = (ip: string) => {
-    const ipv4Regex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+    const ipv4Regex =
+        /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
     return ipv4Regex.test(ip);
-}
+};
 
-export default function ReverseProxyTargets({ params }: { params: { resourceId: string } }) {
-    const [targets, setTargets] = useState<ListTargetsResponse["targets"]>([])
-    const [nextId, setNextId] = useState(1)
-    const [ipError, setIpError] = useState("")
+export default function ReverseProxyTargets({
+    params,
+}: {
+    params: { resourceId: string };
+}) {
+    const [targets, setTargets] = useState<ListTargetsResponse["targets"]>([]);
+    const [nextId, setNextId] = useState(1);
+    const [ipError, setIpError] = useState("");
 
     useEffect(() => {
         if (typeof window !== "undefined") {
             const fetchSites = async () => {
-                const res = await api.get<AxiosResponse<ListTargetsResponse>>(`/resource/${params.resourceId}/targets`);
+                const res = await api.get<AxiosResponse<ListTargetsResponse>>(
+                    `/resource/${params.resourceId}/targets`,
+                );
                 setTargets(res.data.data.targets);
             };
             fetchSites();
@@ -39,7 +52,7 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
         method: "http",
         port: 80,
         protocol: "TCP",
-    })
+    });
 
     const addTarget = () => {
         if (!isValidIPAddress(newTarget.ip)) {
@@ -50,64 +63,62 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
 
         api.put(`/resource/${params.resourceId}/target`, {
             ...newTarget,
-            resourceId: undefined
+            resourceId: undefined,
         })
             .catch((err) => {
-                console.error(err)
-
-            }).then((res) => {
+                console.error(err);
+            })
+            .then((res) => {
                 // console.log(res)
-                setTargets([...targets, { ...newTarget, targetId: nextId, enabled: true }])
-                setNextId(nextId + 1)
+                setTargets([
+                    ...targets,
+                    { ...newTarget, targetId: nextId, enabled: true },
+                ]);
+                setNextId(nextId + 1);
                 setNewTarget({
                     resourceId: params.resourceId,
                     ip: "",
                     method: "GET",
                     port: 80,
                     protocol: "http",
-                })
+                });
             });
-
-    }
+    };
 
     const removeTarget = (targetId: number) => {
         api.delete(`/target/${targetId}`)
             .catch((err) => {
-                console.error(err)
-            }).then((res) => {
-                setTargets(targets.filter((target) => target.targetId !== targetId));
+                console.error(err);
+            })
+            .then((res) => {
+                setTargets(
+                    targets.filter((target) => target.targetId !== targetId),
+                );
             });
-    }
+    };
 
     const toggleTarget = (targetId: number) => {
         setTargets(
             targets.map((target) =>
-                target.targetId === targetId ? { ...target, enabled: !target.enabled } : target
-            )
-        )
-        api.post(`/target/${targetId}`, { enabled: !targets.find((target) => target.targetId === targetId)?.enabled })
-            .catch((err) => {
-                console.error(err)
-            }).then((res) => {
-                console.log(res)
-            });
-
-        // Add a visual feedback
-        const targetElement = document.getElementById(`target-${targetId}`)
-        if (targetElement) {
-            targetElement.classList.add('scale-105', 'transition-transform')
-            setTimeout(() => {
-                targetElement.classList.remove('scale-105', 'transition-transform')
-            }, 200)
-        }
-    }
+                target.targetId === targetId
+                    ? { ...target, enabled: !target.enabled }
+                    : target,
+            ),
+        );
+        api.post(`/target/${targetId}`, {
+            enabled: !targets.find((target) => target.targetId === targetId)
+                ?.enabled,
+        }).catch((err) => {
+            console.error(err);
+        });
+    };
 
     return (
         <div className="space-y-6">
             <form
                 onSubmit={(e) => {
-                    e.preventDefault()
-                    addTarget()
+                    e.preventDefault();
+                    addTarget();
                 }}
                 className="space-y-4"
             >
@@ -118,18 +129,25 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
                             id="ip"
                             value={newTarget.ip}
                             onChange={(e) => {
-                                setNewTarget({ ...newTarget, ip: e.target.value })
-                                setIpError("")
+                                setNewTarget({
+                                    ...newTarget,
+                                    ip: e.target.value,
+                                });
+                                setIpError("");
                             }}
                             required
                         />
-                        {ipError && <p className="text-red-500 text-sm">{ipError}</p>}
+                        {ipError && (
+                            <p className="text-red-500 text-sm">{ipError}</p>
+                        )}
                     </div>
                     <div className="space-y-2">
                         <Label htmlFor="method">Method</Label>
                         <Select
                             value={newTarget.method}
-                            onValueChange={(value) => setNewTarget({ ...newTarget, method: value })}
+                            onValueChange={(value) =>
+                                setNewTarget({ ...newTarget, method: value })
+                            }
                         >
                             <SelectTrigger id="method">
                                 <SelectValue placeholder="Select method" />
@@ -146,7 +164,12 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
                             id="port"
                             type="number"
                             value={newTarget.port}
-                            onChange={(e) => setNewTarget({ ...newTarget, port: parseInt(e.target.value) })}
+                            onChange={(e) =>
+                                setNewTarget({
+                                    ...newTarget,
+                                    port: parseInt(e.target.value),
+                                })
+                            }
                             required
                         />
                     </div>
@@ -154,7 +177,9 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
                         <Label htmlFor="protocol">Protocol</Label>
                         <Select
                             value={newTarget.protocol}
-                            onValueChange={(value) => setNewTarget({ ...newTarget, protocol: value })}
+                            onValueChange={(value) =>
+                                setNewTarget({ ...newTarget, protocol: value })
+                            }
                         >
                             <SelectTrigger id="protocol">
                                 <SelectValue placeholder="Select protocol" />
@@ -172,8 +197,12 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
             </form>
 
             <div className="space-y-4">
-                {targets.map((target) => (
-                    <Card key={target.targetId} id={`target-${target.targetId}`} className="w-full p-4">
+                {targets.map((target, i) => (
+                    <Card
+                        key={i}
+                        id={`target-${target.targetId}`}
+                        className="w-full p-4"
+                    >
                         <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 px-0 pt-0">
                             <CardTitle className="text-lg font-medium flex items-center">
                                 <Server className="mr-2 h-5 w-5" />
@@ -182,13 +211,17 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
                             <div className="flex flex-col items-end space-y-2">
                                 <Switch
                                     checked={target.enabled}
-                                    onCheckedChange={() => toggleTarget(target.targetId)}
+                                    onCheckedChange={() =>
+                                        toggleTarget(target.targetId)
+                                    }
                                 />
                                 <Button
                                     variant="ghost"
                                     size="sm"
                                     className="text-destructive hover:text-destructive hover:bg-destructive/10"
-                                    onClick={() => removeTarget(target.targetId)}
+                                    onClick={() =>
+                                        removeTarget(target.targetId)
+                                    }
                                 >
                                     <Trash2 className="h-4 w-4" />
                                 </Button>
@@ -198,15 +231,35 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
                             <div className="grid gap-2 md:grid-cols-2 lg:grid-cols-3">
                                 <div className="flex items-center">
                                     <Globe className="mr-2 h-4 w-4 text-muted-foreground" />
-                                    <span className="text-sm">{target.ip}:{target.port}</span>
+                                    <span className="text-sm">
+                                        {target.ip}:{target.port}
+                                    </span>
                                 </div>
                                 <div className="flex items-center">
                                     <Cpu className="mr-2 h-4 w-4 text-muted-foreground" />
-                                    <span className="text-sm">{target.resourceId}</span>
+                                    <span className="text-sm">
+                                        {target.resourceId}
+                                    </span>
                                 </div>
                                 <div className="flex items-center space-x-2">
-                                    <Badge variant={target.enabled ? "default" : "secondary"}>{target.method}</Badge>
-                                    <Badge variant={target.enabled ? "default" : "secondary"}>{target.protocol?.toUpperCase()}</Badge>
+                                    <Badge
+                                        variant={
+                                            target.enabled
+                                                ? "default"
+                                                : "secondary"
+                                        }
+                                    >
+                                        {target.method}
+                                    </Badge>
+                                    <Badge
+                                        variant={
+                                            target.enabled
+                                                ? "default"
+                                                : "secondary"
+                                        }
+                                    >
+                                        {target.protocol?.toUpperCase()}
+                                    </Badge>
                                 </div>
                             </div>
                         </CardContent>
@@ -214,5 +267,5 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
                 ))}
             </div>
         </div>
-    )
-}
\ No newline at end of file
+    );
+}