diff --git a/server/routers/auth/verifyTargetAccess.ts b/server/routers/auth/verifyTargetAccess.ts
index 86d63e0d..2f6a0658 100644
--- a/server/routers/auth/verifyTargetAccess.ts
+++ b/server/routers/auth/verifyTargetAccess.ts
@@ -33,7 +33,7 @@ export async function verifyTargetAccess(req: Request, res: Response, next: Next
 
     const resourceId = target[0].resourceId;
 
-    if (resourceId) {
+    if (!resourceId) {
         return next(
             createHttpError(
                 HttpCode.INTERNAL_SERVER_ERROR,
diff --git a/src/app/[orgId]/resources/[resourceId]/components/CreateResource.tsx b/src/app/[orgId]/resources/[resourceId]/components/CreateResource.tsx
index 5b3c4cfa..1066a93b 100644
--- a/src/app/[orgId]/resources/[resourceId]/components/CreateResource.tsx
+++ b/src/app/[orgId]/resources/[resourceId]/components/CreateResource.tsx
@@ -25,18 +25,18 @@ import { useRouter } from "next/navigation";
 import { Checkbox } from "@app/components/ui/checkbox"
 
 import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
 } from "@/components/ui/command"
 
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
 } from "@/components/ui/popover"
 import { ListSitesResponse } from "@server/routers/site"
 import { AxiosResponse } from "axios"
@@ -92,7 +92,7 @@ export function CreateResourceForm() {
 
     async function onSubmit(data: AccountFormValues) {
         console.log(data);
-        
+
         const res = await api
             .put(`/org/${orgId}/site/${data.siteId}/resource/`, {
                 name: data.name,
@@ -141,10 +141,10 @@ export function CreateResourceForm() {
                                 <FormControl>
                                     {/* <Input placeholder="Your name" {...field} /> */}
                                     <CustomDomainInput {...field}
-          domainSuffix={domainSuffix}
-          placeholder="Enter subdomain"
+                                        domainSuffix={domainSuffix}
+                                        placeholder="Enter subdomain"
 
-        />
+                                    />
                                 </FormControl>
                                 <FormDescription>
                                     This is the fully qualified domain name that will be used to access the resource.
@@ -169,69 +169,69 @@ export function CreateResourceForm() {
                             </FormItem>
                         )}
                     /> */}
-  <FormField
-          control={form.control}
-          name="siteId"
-          render={({ field }) => (
-            <FormItem className="flex flex-col">
-              <FormLabel>Site</FormLabel>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <FormControl>
-                    <Button
-                      variant="outline"
-                      role="combobox"
-                      className={cn(
-                        "w-[200px] justify-between",
-                        !field.value && "text-muted-foreground"
-                      )}
-                    >
-                      {field.value
-                        ? sites.find(
-                            (site) => site.siteId === field.value
-                          )?.name
-                        : "Select site"}
-                      <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                    </Button>
-                  </FormControl>
-                </PopoverTrigger>
-                <PopoverContent className="w-[200px] p-0">
-                  <Command>
-                    <CommandInput placeholder="Search site..." />
-                    <CommandList>
-                      <CommandEmpty>No site found.</CommandEmpty>
-                      <CommandGroup>
-                        {sites.map((site) => (
-                          <CommandItem
-                            value={site.name}
-                            key={site.siteId}
-                            onSelect={() => {
-                              form.setValue("siteId", site.siteId)
-                            }}
-                          >
-                            <CheckIcon
-                              className={cn(
-                                "mr-2 h-4 w-4",
-                                site.siteId === field.value
-                                  ? "opacity-100"
-                                  : "opacity-0"
-                              )}
-                            />
-                            {site.name}
-                          </CommandItem>
-                        ))}
-                      </CommandGroup>
-                    </CommandList>
-                  </Command>
-                </PopoverContent>
-              </Popover>
-              <FormDescription>
-                This is the site that will be used in the dashboard.
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+                    <FormField
+                        control={form.control}
+                        name="siteId"
+                        render={({ field }) => (
+                            <FormItem className="flex flex-col">
+                                <FormLabel>Site</FormLabel>
+                                <Popover>
+                                    <PopoverTrigger asChild>
+                                        <FormControl>
+                                            <Button
+                                                variant="outline"
+                                                role="combobox"
+                                                className={cn(
+                                                    "w-[200px] justify-between",
+                                                    !field.value && "text-muted-foreground"
+                                                )}
+                                            >
+                                                {field.value
+                                                    ? sites.find(
+                                                        (site) => site.siteId === field.value
+                                                    )?.name
+                                                    : "Select site"}
+                                                <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                                            </Button>
+                                        </FormControl>
+                                    </PopoverTrigger>
+                                    <PopoverContent className="w-[200px] p-0">
+                                        <Command>
+                                            <CommandInput placeholder="Search site..." />
+                                            <CommandList>
+                                                <CommandEmpty>No site found.</CommandEmpty>
+                                                <CommandGroup>
+                                                    {sites.map((site) => (
+                                                        <CommandItem
+                                                            value={site.name}
+                                                            key={site.siteId}
+                                                            onSelect={() => {
+                                                                form.setValue("siteId", site.siteId)
+                                                            }}
+                                                        >
+                                                            <CheckIcon
+                                                                className={cn(
+                                                                    "mr-2 h-4 w-4",
+                                                                    site.siteId === field.value
+                                                                        ? "opacity-100"
+                                                                        : "opacity-0"
+                                                                )}
+                                                            />
+                                                            {site.name}
+                                                        </CommandItem>
+                                                    ))}
+                                                </CommandGroup>
+                                            </CommandList>
+                                        </Command>
+                                    </PopoverContent>
+                                </Popover>
+                                <FormDescription>
+                                    This is the site that will be used in the dashboard.
+                                </FormDescription>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
 
                     <Button type="submit">Create Resource</Button>
                 </form>
diff --git a/src/app/[orgId]/resources/[resourceId]/targets/page.tsx b/src/app/[orgId]/resources/[resourceId]/targets/page.tsx
index 0d6689f5..b237bcdd 100644
--- a/src/app/[orgId]/resources/[resourceId]/targets/page.tsx
+++ b/src/app/[orgId]/resources/[resourceId]/targets/page.tsx
@@ -13,9 +13,15 @@ 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]?)$/;
+    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("")
 
     useEffect(() => {
         if (typeof window !== "undefined") {
@@ -30,35 +36,47 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
     const [newTarget, setNewTarget] = useState({
         resourceId: params.resourceId,
         ip: "",
-        method: "GET",
+        method: "http",
         port: 80,
-        protocol: "http",
+        protocol: "TCP",
     })
 
-    const addTarget = async () => {
-        const res = await api.put(`/resource/${params.resourceId}/target`, {
+    const addTarget = () => {
+        if (!isValidIPAddress(newTarget.ip)) {
+            setIpError("Invalid IP address format");
+            return;
+        }
+        setIpError("");
+
+        api.put(`/resource/${params.resourceId}/target`, {
             ...newTarget,
             resourceId: undefined
         })
-        .catch((err) => {
-            console.error(err)
-            
-        });
+            .catch((err) => {
+                console.error(err)
+
+            }).then((res) => {
+                // console.log(res)
+                setTargets([...targets, { ...newTarget, targetId: nextId, enabled: true }])
+                setNextId(nextId + 1)
+                setNewTarget({
+                    resourceId: params.resourceId,
+                    ip: "",
+                    method: "GET",
+                    port: 80,
+                    protocol: "http",
+                })
+            });
 
-        setTargets([...targets, { ...newTarget, targetId: nextId, enabled: true }])
-        setNextId(nextId + 1)
-        setNewTarget({
-            resourceId: params.resourceId,
-            ip: "",
-            method: "GET",
-            port: 80,
-            protocol: "http",
-        })
     }
 
-    const removeTarget = async (targetId: number) => {
-        setTargets(targets.filter((target) => target.targetId !== targetId))
-        const res = await api.delete(`/target/${targetId}`)
+    const removeTarget = (targetId: number) => {
+        api.delete(`/target/${targetId}`)
+            .catch((err) => {
+                console.error(err)
+            }).then((res) => {
+                setTargets(targets.filter((target) => target.targetId !== targetId));
+            });
     }
 
     const toggleTarget = (targetId: number) => {
@@ -67,7 +85,12 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
                 target.targetId === targetId ? { ...target, enabled: !target.enabled } : target
             )
         )
-        const res = api.post(`/target/${targetId}`, { enabled: !targets.find((target) => target.targetId === targetId)?.enabled })
+        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}`)
@@ -81,93 +104,98 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
 
     return (
         <div className="space-y-6">
-            {/* <Card>
-                <CardHeader> */}
-                    {/* <CardTitle>Add New Target</CardTitle>
-                </CardHeader>
-                <CardContent> */}
-                    <form
-                        onSubmit={(e) => {
-                            e.preventDefault()
-                            addTarget()
-                        }}
-                        className="space-y-4"
-                    >
-                        <div className="grid grid-cols-2 gap-4">
-                            <div className="space-y-2">
-                                <Label htmlFor="ip">IP Address</Label>
-                                <Input
-                                    id="ip"
-                                    value={newTarget.ip}
-                                    onChange={(e) => setNewTarget({ ...newTarget, ip: e.target.value })}
-                                    required
-                                />
-                            </div>
-                            <div className="space-y-2">
-                                <Label htmlFor="method">Method</Label>
-                                <Select
-                                    value={newTarget.method}
-                                    onValueChange={(value) => setNewTarget({ ...newTarget, method: value })}
-                                >
-                                    <SelectTrigger id="method">
-                                        <SelectValue placeholder="Select method" />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                        <SelectItem value="GET">GET</SelectItem>
-                                        <SelectItem value="POST">POST</SelectItem>
-                                        <SelectItem value="PUT">PUT</SelectItem>
-                                        <SelectItem value="DELETE">DELETE</SelectItem>
-                                    </SelectContent>
-                                </Select>
-                            </div>
-                            <div className="space-y-2">
-                                <Label htmlFor="port">Port</Label>
-                                <Input
-                                    id="port"
-                                    type="number"
-                                    value={newTarget.port}
-                                    onChange={(e) => setNewTarget({ ...newTarget, port: parseInt(e.target.value) })}
-                                    required
-                                />
-                            </div>
-                            <div className="space-y-2">
-                                <Label htmlFor="protocol">Protocol</Label>
-                                <Select
-                                    value={newTarget.protocol}
-                                    onValueChange={(value) => setNewTarget({ ...newTarget, protocol: value })}
-                                >
-                                    <SelectTrigger id="protocol">
-                                        <SelectValue placeholder="Select protocol" />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                        <SelectItem value="http">HTTP</SelectItem>
-                                        <SelectItem value="https">HTTPS</SelectItem>
-                                    </SelectContent>
-                                </Select>
-                            </div>
-                        </div>
-                        <Button type="submit">
-                            <PlusCircle className="mr-2 h-4 w-4" /> Add Target
-                        </Button>
-                    </form>
-                {/* </CardContent>
-            </Card> */}
+            <form
+                onSubmit={(e) => {
+                    e.preventDefault()
+                    addTarget()
+                }}
+                className="space-y-4"
+            >
+                <div className="grid grid-cols-2 gap-4">
+                    <div className="space-y-2">
+                        <Label htmlFor="ip">IP Address</Label>
+                        <Input
+                            id="ip"
+                            value={newTarget.ip}
+                            onChange={(e) => {
+                                setNewTarget({ ...newTarget, ip: e.target.value })
+                                setIpError("")
+                            }}
+                            required
+                        />
+                        {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 })}
+                        >
+                            <SelectTrigger id="method">
+                                <SelectValue placeholder="Select method" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="http">HTTP</SelectItem>
+                                <SelectItem value="https">HTTPS</SelectItem>
+                            </SelectContent>
+                        </Select>
+                    </div>
+                    <div className="space-y-2">
+                        <Label htmlFor="port">Port</Label>
+                        <Input
+                            id="port"
+                            type="number"
+                            value={newTarget.port}
+                            onChange={(e) => setNewTarget({ ...newTarget, port: parseInt(e.target.value) })}
+                            required
+                        />
+                    </div>
+                    <div className="space-y-2">
+                        <Label htmlFor="protocol">Protocol</Label>
+                        <Select
+                            value={newTarget.protocol}
+                            onValueChange={(value) => setNewTarget({ ...newTarget, protocol: value })}
+                        >
+                            <SelectTrigger id="protocol">
+                                <SelectValue placeholder="Select protocol" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="UDP">UDP</SelectItem>
+                                <SelectItem value="TCP">TCP</SelectItem>
+                            </SelectContent>
+                        </Select>
+                    </div>
+                </div>
+                <Button type="submit">
+                    <PlusCircle className="mr-2 h-4 w-4" /> Add Target
+                </Button>
+            </form>
 
-            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+            <div className="space-y-4">
                 {targets.map((target) => (
-                    <Card key={target.targetId} id={`target-${target.targetId}`} >
-                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                            <CardTitle className="text-sm font-medium flex items-center">
-                                <Server className="mr-2 h-4 w-4" />
+                    <Card key={target.targetId} 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" />
                                 Target {target.targetId}
                             </CardTitle>
-                            <Switch
-                                checked={target.enabled}
-                                onCheckedChange={() => toggleTarget(target.targetId)}
-                            />
+                            <div className="flex flex-col items-end space-y-2">
+                                <Switch
+                                    checked={target.enabled}
+                                    onCheckedChange={() => toggleTarget(target.targetId)}
+                                />
+                                <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    className="text-destructive hover:text-destructive hover:bg-destructive/10"
+                                    onClick={() => removeTarget(target.targetId)}
+                                >
+                                    <Trash2 className="h-4 w-4" />
+                                </Button>
+                            </div>
                         </CardHeader>
-                        <CardContent>
-                            <div className="grid gap-2">
+                        <CardContent className="px-0 py-2">
+                            <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>
@@ -181,14 +209,6 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
                                     <Badge variant={target.enabled ? "default" : "secondary"}>{target.protocol?.toUpperCase()}</Badge>
                                 </div>
                             </div>
-                            <Button
-                                variant="destructive"
-                                size="sm"
-                                className="mt-4 w-full"
-                                onClick={() => removeTarget(target.targetId)}
-                            >
-                                <Trash2 className="mr-2 h-4 w-4" /> Remove
-                            </Button>
                         </CardContent>
                     </Card>
                 ))}