diff --git a/server/routers/target/createTarget.ts b/server/routers/target/createTarget.ts
index e44e6774..63398e72 100644
--- a/server/routers/target/createTarget.ts
+++ b/server/routers/target/createTarget.ts
@@ -1,7 +1,7 @@
 import { Request, Response, NextFunction } from "express";
 import { z } from "zod";
 import { db } from "@server/db";
-import { resources, sites, targets } from "@server/db/schema";
+import { resources, sites, Target, targets } from "@server/db/schema";
 import response from "@server/utils/response";
 import HttpCode from "@server/types/HttpCode";
 import createHttpError from "http-errors";
@@ -23,6 +23,8 @@ const createTargetSchema = z.object({
     enabled: z.boolean().default(true),
 });
 
+export type CreateTargetResponse = Target;
+
 export async function createTarget(
     req: Request,
     res: Response,
@@ -126,7 +128,7 @@ export async function createTarget(
             allowedIps: targetIps.flat(),
         });
 
-        return response(res, {
+        return response<CreateTargetResponse>(res, {
             data: newTarget[0],
             success: true,
             error: false,
diff --git a/src/app/[orgId]/settings/page.tsx b/src/app/[orgId]/settings/page.tsx
index 9956bc85..142e73ae 100644
--- a/src/app/[orgId]/settings/page.tsx
+++ b/src/app/[orgId]/settings/page.tsx
@@ -6,7 +6,7 @@ type OrgPageProps = {
 
 export default async function SettingsPage(props: OrgPageProps) {
     const params = await props.params;
-    redirect(`/${params.orgId}/settings/sites`);
+    redirect(`/${params.orgId}/settings/resources`);
 
     return <></>;
 }
diff --git a/src/app/[orgId]/settings/resources/[resourceId]/connectivity/page.tsx b/src/app/[orgId]/settings/resources/[resourceId]/connectivity/page.tsx
new file mode 100644
index 00000000..648d8112
--- /dev/null
+++ b/src/app/[orgId]/settings/resources/[resourceId]/connectivity/page.tsx
@@ -0,0 +1,479 @@
+"use client";
+
+import { useEffect, useState, use } from "react";
+import { 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";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@app/components/ui/form";
+import { CreateTargetResponse, updateTarget } from "@server/routers/target";
+import {
+    ColumnDef,
+    getFilteredRowModel,
+    getSortedRowModel,
+    getPaginationRowModel,
+    getCoreRowModel,
+    useReactTable,
+    flexRender,
+} from "@tanstack/react-table";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@app/components/ui/table";
+import { useToast } from "@app/hooks/useToast";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import { Target } from "@server/db/schema";
+import { useResourceContext } from "@app/hooks/useResourceContext";
+
+const addTargetSchema = z.object({
+    ip: z
+        .string()
+        .regex(
+            /^(?:(?: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]?)$/,
+            "Invalid IP address format"
+        ),
+    method: z.string(),
+    port: z
+        .string()
+        .refine((val) => !isNaN(Number(val)), {
+            message: "Port must be a number",
+        })
+        .transform((val) => Number(val)),
+    protocol: z.string(),
+});
+
+type AddTargetFormValues = z.infer<typeof addTargetSchema>;
+
+export default function ReverseProxyTargets(props: {
+    params: Promise<{ resourceId: number }>;
+}) {
+    const params = use(props.params);
+
+    const { toast } = useToast();
+    const { resource, updateResource } = useResourceContext();
+
+    const [targets, setTargets] = useState<ListTargetsResponse["targets"]>([]);
+
+    const addTargetForm = useForm({
+        resolver: zodResolver(addTargetSchema),
+        defaultValues: {
+            ip: "",
+            method: "http",
+            port: "80",
+            protocol: "TCP",
+        },
+    });
+
+    useEffect(() => {
+        const fetchSites = async () => {
+            const res = await api
+                .get<AxiosResponse<ListTargetsResponse>>(
+                    `/resource/${params.resourceId}/targets`
+                )
+                .catch((err) => {
+                    console.error(err);
+                    toast({
+                        variant: "destructive",
+                        title: "Failed to fetch targets",
+                        description:
+                            err.message ||
+                            "An error occurred while fetching targets",
+                    });
+                });
+
+            if (res && res.status === 200) {
+                setTargets(res.data.data.targets);
+            }
+        };
+        fetchSites();
+    }, []);
+
+    async function addTarget(data: AddTargetFormValues) {
+        const res = await api
+            .put<AxiosResponse<CreateTargetResponse>>(
+                `/resource/${params.resourceId}/target`,
+                {
+                    ...data,
+                    resourceId: undefined,
+                }
+            )
+            .catch((err) => {
+                console.error(err);
+                toast({
+                    variant: "destructive",
+                    title: "Failed to add target",
+                    description:
+                        err.message || "An error occurred while adding target",
+                });
+            });
+
+        if (res && res.status === 201) {
+            setTargets([...targets, res.data.data]);
+            addTargetForm.reset();
+        }
+    }
+
+    const removeTarget = (targetId: number) => {
+        api.delete(`/target/${targetId}`)
+            .catch((err) => {
+                console.error(err);
+            })
+            .then((res) => {
+                setTargets(
+                    targets.filter((target) => target.targetId !== targetId)
+                );
+            });
+    };
+
+    async function updateTarget(targetId: number, data: Partial<Target>) {
+        setTargets(
+            targets.map((target) =>
+                target.targetId === targetId ? { ...target, ...data } : target
+            )
+        );
+
+        const res = await api.post(`/target/${targetId}`, data).catch((err) => {
+            console.error(err);
+            toast({
+                variant: "destructive",
+                title: "Failed to update target",
+                description:
+                    err.message || "An error occurred while updating target",
+            });
+        });
+
+        if (res && res.status === 200) {
+            toast({
+                title: "Target updated",
+                description: "The target has been updated successfully",
+            });
+        }
+    }
+
+    const columns: ColumnDef<ListTargetsResponse["targets"][0]>[] = [
+        {
+            accessorKey: "ip",
+            header: "IP Address",
+            cell: ({ row }) => (
+                <Input
+                    defaultValue={row.original.ip}
+                    onBlur={(e) =>
+                        updateTarget(row.original.targetId, {
+                            ip: e.target.value,
+                        })
+                    }
+                />
+            ),
+        },
+        {
+            accessorKey: "port",
+            header: "Port",
+            cell: ({ row }) => (
+                <Input
+                    type="number"
+                    defaultValue={row.original.port}
+                    onBlur={(e) =>
+                        updateTarget(row.original.targetId, {
+                            port: parseInt(e.target.value, 10),
+                        })
+                    }
+                />
+            ),
+        },
+        {
+            accessorKey: "method",
+            header: "Method",
+            cell: ({ row }) => (
+                <Select
+                    defaultValue={row.original.method}
+                    onValueChange={(value) =>
+                        updateTarget(row.original.targetId, { method: value })
+                    }
+                >
+                    <SelectTrigger>{row.original.method}</SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value="http">http</SelectItem>
+                        <SelectItem value="https">https</SelectItem>
+                    </SelectContent>
+                </Select>
+            ),
+        },
+        {
+            accessorKey: "protocol",
+            header: "Protocol",
+            cell: ({ row }) => (
+                <Select
+                    defaultValue={row.original.protocol!}
+                    onValueChange={(value) =>
+                        updateTarget(row.original.targetId, { protocol: value })
+                    }
+                >
+                    <SelectTrigger>{row.original.protocol}</SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value="TCP">TCP</SelectItem>
+                        <SelectItem value="UDP">UDP</SelectItem>
+                    </SelectContent>
+                </Select>
+            ),
+        },
+        {
+            accessorKey: "enabled",
+            header: "Enabled",
+            cell: ({ row }) => (
+                <Switch
+                    defaultChecked={row.original.enabled}
+                    onCheckedChange={(val) =>
+                        updateTarget(row.original.targetId, { enabled: val })
+                    }
+                />
+            ),
+        },
+        {
+            id: "actions",
+            cell: ({ row }) => (
+                <Button
+                    variant="outline"
+                    onClick={() => removeTarget(row.original.targetId)}
+                >
+                    Delete
+                </Button>
+            ),
+        },
+    ];
+
+    const table = useReactTable({
+        data: targets,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+    });
+
+    return (
+        <div>
+            {/* <div className="lg:max-w-2xl"> */}
+            <div>
+                <div className="mb-8">
+                    <SettingsSectionTitle
+                        title="SSL"
+                        description="Setup SSL to secure your connections with LetsEncrypt certificates"
+                    />
+
+                    <div className="flex items-center space-x-2">
+                        <Switch id="ssl-toggle" />
+                        <Label htmlFor="ssl-toggle">Enable SSL (https)</Label>
+                    </div>
+                </div>
+
+                <div className="mb-8">
+                    <SettingsSectionTitle
+                        title="Targets"
+                        description="Setup targets to route traffic to your services"
+                    />
+
+                    <Form {...addTargetForm}>
+                        <form
+                            onSubmit={addTargetForm.handleSubmit(
+                                addTarget as any
+                            )}
+                            className="space-y-4"
+                        >
+                            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                                <FormField
+                                    control={addTargetForm.control}
+                                    name="ip"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>IP Address</FormLabel>
+                                            <FormControl>
+                                                <Input id="ip" {...field} />
+                                            </FormControl>
+                                            <FormDescription>
+                                                Enter the IP address of the
+                                                target
+                                            </FormDescription>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={addTargetForm.control}
+                                    name="method"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Method</FormLabel>
+                                            <FormControl>
+                                                <Select
+                                                    {...field}
+                                                    onValueChange={(value) => {
+                                                        addTargetForm.setValue(
+                                                            "method",
+                                                            value
+                                                        );
+                                                    }}
+                                                >
+                                                    <SelectTrigger id="method">
+                                                        <SelectValue placeholder="Select method" />
+                                                    </SelectTrigger>
+                                                    <SelectContent>
+                                                        <SelectItem value="http">
+                                                            HTTP
+                                                        </SelectItem>
+                                                        <SelectItem value="https">
+                                                            HTTPS
+                                                        </SelectItem>
+                                                    </SelectContent>
+                                                </Select>
+                                            </FormControl>
+                                            <FormDescription>
+                                                Choose the method for the target
+                                                connection
+                                            </FormDescription>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={addTargetForm.control}
+                                    name="port"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Port</FormLabel>
+                                            <FormControl>
+                                                <Input
+                                                    id="port"
+                                                    type="number"
+                                                    {...field}
+                                                    required
+                                                />
+                                            </FormControl>
+                                            <FormDescription>
+                                                Specify the port number for the
+                                                target
+                                            </FormDescription>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={addTargetForm.control}
+                                    name="protocol"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Protocol</FormLabel>
+                                            <FormControl>
+                                                <Select
+                                                    {...field}
+                                                    onValueChange={(value) => {
+                                                        addTargetForm.setValue(
+                                                            "protocol",
+                                                            value
+                                                        );
+                                                    }}
+                                                >
+                                                    <SelectTrigger id="protocol">
+                                                        <SelectValue placeholder="Select protocol" />
+                                                    </SelectTrigger>
+                                                    <SelectContent>
+                                                        <SelectItem value="UDP">
+                                                            UDP
+                                                        </SelectItem>
+                                                        <SelectItem value="TCP">
+                                                            TCP
+                                                        </SelectItem>
+                                                    </SelectContent>
+                                                </Select>
+                                            </FormControl>
+                                            <FormDescription>
+                                                Select the protocol used by the
+                                                target
+                                            </FormDescription>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                            </div>
+                            <Button type="submit">Add Target</Button>
+                        </form>
+                    </Form>
+                </div>
+
+                <div className="rounded-md border mt-4">
+                    <Table>
+                        <TableHeader>
+                            {table.getHeaderGroups().map((headerGroup) => (
+                                <TableRow key={headerGroup.id}>
+                                    {headerGroup.headers.map((header) => (
+                                        <TableHead key={header.id}>
+                                            {header.isPlaceholder
+                                                ? null
+                                                : flexRender(
+                                                      header.column.columnDef
+                                                          .header,
+                                                      header.getContext()
+                                                  )}
+                                        </TableHead>
+                                    ))}
+                                </TableRow>
+                            ))}
+                        </TableHeader>
+                        <TableBody>
+                            {table.getRowModel().rows?.length ? (
+                                table.getRowModel().rows.map((row) => (
+                                    <TableRow key={row.id}>
+                                        {row.getVisibleCells().map((cell) => (
+                                            <TableCell key={cell.id}>
+                                                {flexRender(
+                                                    cell.column.columnDef.cell,
+                                                    cell.getContext()
+                                                )}
+                                            </TableCell>
+                                        ))}
+                                    </TableRow>
+                                ))
+                            ) : (
+                                <TableRow>
+                                    <TableCell
+                                        colSpan={columns.length}
+                                        className="h-24 text-center"
+                                    >
+                                        No results.
+                                    </TableCell>
+                                </TableRow>
+                            )}
+                        </TableBody>
+                    </Table>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/app/[orgId]/settings/resources/[resourceId]/general/page.tsx b/src/app/[orgId]/settings/resources/[resourceId]/general/page.tsx
index a745d52a..d8cf656c 100644
--- a/src/app/[orgId]/settings/resources/[resourceId]/general/page.tsx
+++ b/src/app/[orgId]/settings/resources/[resourceId]/general/page.tsx
@@ -97,112 +97,119 @@ export default function GeneralForm() {
 
     return (
         <>
-            <div className="space-y-0.5 select-none mb-6">
-                <h2 className="text-2xl font-bold tracking-tight">
-                    General Settings
-                </h2>
-                <p className="text-muted-foreground">
-                    Configure the general settings for this resource
-                </p>
-            </div>
+            <div className="lg:max-w-2xl">
+                <div className="space-y-0.5 select-none mb-6">
+                    <h2 className="text-2xl font-bold tracking-tight">
+                        General Settings
+                    </h2>
+                    <p className="text-muted-foreground">
+                        Configure the general settings for this resource
+                    </p>
+                </div>
 
-            <Form {...form}>
-                <form
-                    onSubmit={form.handleSubmit(onSubmit)}
-                    className="space-y-4"
-                >
-                    <FormField
-                        control={form.control}
-                        name="name"
-                        render={({ field }) => (
-                            <FormItem>
-                                <FormLabel>Name</FormLabel>
-                                <FormControl>
-                                    <Input {...field} />
-                                </FormControl>
-                                <FormDescription>
-                                    This is the display name of the resource.
-                                </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-[350px] 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-[350px] 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",
+                <Form {...form}>
+                    <form
+                        onSubmit={form.handleSubmit(onSubmit)}
+                        className="space-y-4"
+                    >
+                        <FormField
+                            control={form.control}
+                            name="name"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Name</FormLabel>
+                                    <FormControl>
+                                        <Input {...field} />
+                                    </FormControl>
+                                    <FormDescription>
+                                        This is the display name of the
+                                        resource.
+                                    </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-[350px] 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-[350px] p-0">
+                                            <Command>
+                                                <CommandInput placeholder="Search site..." />
+                                                <CommandList>
+                                                    <CommandEmpty>
+                                                        No site found.
+                                                    </CommandEmpty>
+                                                    <CommandGroup>
+                                                        {sites.map((site) => (
+                                                            <CommandItem
+                                                                value={
+                                                                    site.name
+                                                                }
+                                                                key={
                                                                     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">Update Resource</Button>
-                </form>
-            </Form>
+                                                                }
+                                                                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">Update Resource</Button>
+                    </form>
+                </Form>
+            </div>
         </>
     );
 }
diff --git a/src/app/[orgId]/settings/resources/[resourceId]/layout.tsx b/src/app/[orgId]/settings/resources/[resourceId]/layout.tsx
index b08b3cb9..18a9f445 100644
--- a/src/app/[orgId]/settings/resources/[resourceId]/layout.tsx
+++ b/src/app/[orgId]/settings/resources/[resourceId]/layout.tsx
@@ -36,8 +36,12 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
             href: `/{orgId}/settings/resources/{resourceId}/general`,
         },
         {
-            title: "Targets",
-            href: `/{orgId}/settings/resources/{resourceId}/targets`,
+            title: "Connectivity",
+            href: `/{orgId}/settings/resources/{resourceId}/connectivity`,
+        },
+        {
+            title: "Authentication",
+            href: `/{orgId}/settings/resources/{resourceId}/authentication`,
         },
     ];
 
@@ -66,7 +70,7 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
             <ResourceProvider resource={resource}>
                 <SidebarSettings
                     sidebarNavItems={sidebarNavItems}
-                    limitWidth={true}
+                    limitWidth={false}
                 >
                     {children}
                 </SidebarSettings>
diff --git a/src/app/[orgId]/settings/resources/[resourceId]/page.tsx b/src/app/[orgId]/settings/resources/[resourceId]/page.tsx
index 1751d779..8eb27e4e 100644
--- a/src/app/[orgId]/settings/resources/[resourceId]/page.tsx
+++ b/src/app/[orgId]/settings/resources/[resourceId]/page.tsx
@@ -5,6 +5,6 @@ export default async function ResourcePage(props: {
 }) {
     const params = await props.params;
     redirect(
-        `/${params.orgId}/settings/resources/${params.resourceId}/general`
+        `/${params.orgId}/settings/resources/${params.resourceId}/connectivity`
     );
 }
diff --git a/src/app/[orgId]/settings/resources/[resourceId]/targets/page.tsx b/src/app/[orgId]/settings/resources/[resourceId]/targets/page.tsx
deleted file mode 100644
index ed763bf5..00000000
--- a/src/app/[orgId]/settings/resources/[resourceId]/targets/page.tsx
+++ /dev/null
@@ -1,275 +0,0 @@
-"use client";
-
-import { useEffect, useState, use } 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]?)$/;
-    return ipv4Regex.test(ip);
-};
-
-export default function ReverseProxyTargets(props: {
-    params: Promise<{ resourceId: number }>;
-}) {
-    const params = use(props.params);
-    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`
-                );
-                setTargets(res.data.data.targets);
-            };
-            fetchSites();
-        }
-    }, []);
-
-    const [newTarget, setNewTarget] = useState({
-        resourceId: params.resourceId,
-        ip: "",
-        method: "http",
-        port: 80,
-        protocol: "TCP",
-    });
-
-    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);
-            })
-            .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",
-                });
-            });
-    };
-
-    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) => {
-        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);
-        });
-    };
-
-    return (
-        <div>
-            <div className="space-y-0.5 select-none mb-6">
-                <h2 className="text-2xl font-bold tracking-tight">Targets</h2>
-                <p className="text-muted-foreground">
-                    Setup the targets for the reverse proxy
-                </p>
-            </div>
-
-            <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">Add Target</Button>
-            </form>
-
-            <div className="space-y-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" />
-                                Target {target.targetId}
-                            </CardTitle>
-                            <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 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>
-                                </div>
-                                <div className="flex items-center">
-                                    <Cpu className="mr-2 h-4 w-4 text-muted-foreground" />
-                                    <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>
-                                </div>
-                            </div>
-                        </CardContent>
-                    </Card>
-                ))}
-            </div>
-        </div>
-    );
-}
diff --git a/src/app/[orgId]/settings/resources/components/ResourcesTable.tsx b/src/app/[orgId]/settings/resources/components/ResourcesTable.tsx
index 7e431f20..e262fef5 100644
--- a/src/app/[orgId]/settings/resources/components/ResourcesTable.tsx
+++ b/src/app/[orgId]/settings/resources/components/ResourcesTable.tsx
@@ -9,7 +9,7 @@ import {
     DropdownMenuTrigger,
 } from "@app/components/ui/dropdown-menu";
 import { Button } from "@app/components/ui/button";
-import { ArrowUpDown, MoreHorizontal } from "lucide-react";
+import { ArrowRight, ArrowUpDown, MoreHorizontal } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import api from "@app/api";
@@ -95,34 +95,56 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
                 const resourceRow = row.original;
 
                 return (
-                    <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                            <Button variant="ghost" className="h-8 w-8 p-0">
-                                <span className="sr-only">Open menu</span>
-                                <MoreHorizontal className="h-4 w-4" />
+                    <>
+                        <div className="flex items-center justify-end">
+                            <DropdownMenu>
+                                <DropdownMenuTrigger asChild>
+                                    <Button
+                                        variant="ghost"
+                                        className="h-8 w-8 p-0"
+                                    >
+                                        <span className="sr-only">
+                                            Open menu
+                                        </span>
+                                        <MoreHorizontal className="h-4 w-4" />
+                                    </Button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent align="end">
+                                    <DropdownMenuItem>
+                                        <Link
+                                            href={`/${resourceRow.orgId}/settings/resources/${resourceRow.id}`}
+                                        >
+                                            View settings
+                                        </Link>
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem>
+                                        <button
+                                            onClick={() => {
+                                                setSelectedResource(
+                                                    resourceRow
+                                                );
+                                                setIsDeleteModalOpen(true);
+                                            }}
+                                            className="text-red-600 hover:text-red-800 hover:underline cursor-pointer"
+                                        >
+                                            Delete
+                                        </button>
+                                    </DropdownMenuItem>
+                                </DropdownMenuContent>
+                            </DropdownMenu>
+                            <Button
+                                variant={"gray"}
+                                className="ml-2"
+                                onClick={() =>
+                                    router.push(
+                                        `/${resourceRow.orgId}/settings/resources/${resourceRow.id}`
+                                    )
+                                }
+                            >
+                                Edit <ArrowRight className="ml-2 w-4 h-4" />
                             </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="end">
-                            <DropdownMenuItem>
-                                <Link
-                                    href={`/${resourceRow.orgId}/settings/resources/${resourceRow.id}`}
-                                >
-                                    View settings
-                                </Link>
-                            </DropdownMenuItem>
-                            <DropdownMenuItem>
-                                <button
-                                    onClick={() => {
-                                        setSelectedResource(resourceRow);
-                                        setIsDeleteModalOpen(true);
-                                    }}
-                                    className="text-red-600 hover:text-red-800 hover:underline cursor-pointer"
-                                >
-                                    Delete
-                                </button>
-                            </DropdownMenuItem>
-                        </DropdownMenuContent>
-                    </DropdownMenu>
+                        </div>
+                    </>
                 );
             },
         },
diff --git a/src/app/[orgId]/settings/sites/components/CreateSiteForm.tsx b/src/app/[orgId]/settings/sites/components/CreateSiteForm.tsx
index 10a864c6..098194c2 100644
--- a/src/app/[orgId]/settings/sites/components/CreateSiteForm.tsx
+++ b/src/app/[orgId]/settings/sites/components/CreateSiteForm.tsx
@@ -16,7 +16,7 @@ import { useToast } from "@app/hooks/useToast";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
-import { set, z } from "zod";
+import { z } from "zod";
 import {
     Credenza,
     CredenzaBody,
@@ -31,10 +31,15 @@ import { useOrgContext } from "@app/hooks/useOrgContext";
 import { useParams, useRouter } from "next/navigation";
 import { PickSiteDefaultsResponse } from "@server/routers/site";
 import { generateKeypair } from "../[niceId]/components/wireguardConfig";
-import { cn } from "@app/lib/utils";
-import { ChevronDownIcon } from "lucide-react";
 import CopyTextBox from "@app/components/CopyTextBox";
 import { Checkbox } from "@app/components/ui/checkbox";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@app/components/ui/select";
 
 const method = [
     { label: "Wireguard", value: "wg" },
@@ -213,28 +218,26 @@ sh get-docker.sh`;
                                     render={({ field }) => (
                                         <FormItem>
                                             <FormLabel>Method</FormLabel>
-                                            <div className="relative w-max">
-                                                <FormControl>
-                                                    <select
-                                                        className={cn(
-                                                            buttonVariants({
-                                                                variant:
-                                                                    "outline",
-                                                            }),
-                                                            "w-[200px] appearance-none font-normal"
-                                                        )}
-                                                        {...field}
-                                                    >
-                                                        <option value="wg">
+                                            <FormControl>
+                                                <Select
+                                                    value={field.value}
+                                                    onValueChange={
+                                                        field.onChange
+                                                    }
+                                                >
+                                                    <SelectTrigger>
+                                                        <SelectValue placeholder="Select method" />
+                                                    </SelectTrigger>
+                                                    <SelectContent>
+                                                        <SelectItem value="wg">
                                                             WireGuard
-                                                        </option>
-                                                        <option value="newt">
+                                                        </SelectItem>
+                                                        <SelectItem value="newt">
                                                             Newt
-                                                        </option>
-                                                    </select>
-                                                </FormControl>
-                                                <ChevronDownIcon className="absolute right-3 top-2.5 h-4 w-4 opacity-50" />
-                                            </div>
+                                                        </SelectItem>
+                                                    </SelectContent>
+                                                </Select>
+                                            </FormControl>
                                             <FormDescription>
                                                 This is how you will connect
                                                 your site to Fossorial.
diff --git a/src/app/[orgId]/settings/sites/components/SitesTable.tsx b/src/app/[orgId]/settings/sites/components/SitesTable.tsx
index 8be7fcb7..44e92441 100644
--- a/src/app/[orgId]/settings/sites/components/SitesTable.tsx
+++ b/src/app/[orgId]/settings/sites/components/SitesTable.tsx
@@ -9,7 +9,7 @@ import {
     DropdownMenuTrigger,
 } from "@app/components/ui/dropdown-menu";
 import { Button } from "@app/components/ui/button";
-import { ArrowUpDown, MoreHorizontal } from "lucide-react";
+import { ArrowRight, ArrowUpDown, MoreHorizontal } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import api from "@app/api";
@@ -104,34 +104,47 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
                 const siteRow = row.original;
 
                 return (
-                    <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                            <Button variant="ghost" className="h-8 w-8 p-0">
-                                <span className="sr-only">Open menu</span>
-                                <MoreHorizontal className="h-4 w-4" />
-                            </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="end">
-                            <DropdownMenuItem>
-                                <Link
-                                    href={`/${siteRow.orgId}/settings/sites/${siteRow.nice}`}
-                                >
-                                    View settings
-                                </Link>
-                            </DropdownMenuItem>
-                            <DropdownMenuItem>
-                                <button
-                                    onClick={() => {
-                                        setSelectedSite(siteRow);
-                                        setIsDeleteModalOpen(true);
-                                    }}
-                                    className="text-red-600 hover:text-red-800"
-                                >
-                                    Delete
-                                </button>
-                            </DropdownMenuItem>
-                        </DropdownMenuContent>
-                    </DropdownMenu>
+                    <div className="flex items-center justify-end">
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                                <Button variant="ghost" className="h-8 w-8 p-0">
+                                    <span className="sr-only">Open menu</span>
+                                    <MoreHorizontal className="h-4 w-4" />
+                                </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end">
+                                <DropdownMenuItem>
+                                    <Link
+                                        href={`/${siteRow.orgId}/settings/sites/${siteRow.nice}`}
+                                    >
+                                        View settings
+                                    </Link>
+                                </DropdownMenuItem>
+                                <DropdownMenuItem>
+                                    <button
+                                        onClick={() => {
+                                            setSelectedSite(siteRow);
+                                            setIsDeleteModalOpen(true);
+                                        }}
+                                        className="text-red-600 hover:text-red-800"
+                                    >
+                                        Delete
+                                    </button>
+                                </DropdownMenuItem>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                        <Button
+                            variant={"gray"}
+                            className="ml-2"
+                            onClick={() =>
+                                router.push(
+                                    `/${siteRow.orgId}/settings/sites/${siteRow.nice}`
+                                )
+                            }
+                        >
+                            Edit <ArrowRight className="ml-2 w-4 h-4" />
+                        </Button>
+                    </div>
                 );
             },
         },
@@ -188,7 +201,7 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
                     setIsCreateModalOpen(true);
                 }}
             />
-            <button onClick={callApi}>Create Newt</button>
+            {/* <button onClick={callApi}>Create Newt</button> */}
         </>
     );
 }
diff --git a/src/app/globals.css b/src/app/globals.css
index db3635e1..05b6167e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -38,7 +38,7 @@
         --chart-4: 23.33 8.82% 60%;
         --chart-5: 24 8.98% 67.25%;
 
-        --radius: 0.75rem;
+        --radius: 0.35rem;
     }
     .dark {
         --background: 0 0% 11.76%;
@@ -75,7 +75,7 @@
         --chart-4: 23.33 23.68% 14.9%;
         --chart-5: 24 23.81% 12.35%;
 
-        --radius: 0.75rem;
+        --radius: 0.35rem;
     }
 }
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 9ce33521..0567f402 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import "./globals.css";
-import { Inter } from "next/font/google";
+import { Fira_Sans, Inter } from "next/font/google";
 import { Toaster } from "@/components/ui/toaster";
 import { ThemeProvider } from "@app/providers/ThemeProvider";
 
diff --git a/src/components/SettingsSectionTitle.tsx b/src/components/SettingsSectionTitle.tsx
new file mode 100644
index 00000000..733c8501
--- /dev/null
+++ b/src/components/SettingsSectionTitle.tsx
@@ -0,0 +1,16 @@
+type SettingsSectionTitleProps = {
+    title: string | React.ReactNode;
+    description: string | React.ReactNode;
+};
+
+export default function SettingsSectionTitle({
+    title,
+    description,
+}: SettingsSectionTitleProps) {
+    return (
+        <div className="space-y-0.5 select-none mb-6">
+            <h2 className="text-2xl font-bold tracking-tight">{title}</h2>
+            <p className="text-muted-foreground">{description}</p>
+        </div>
+    );
+}
diff --git a/src/components/sidebar-nav.tsx b/src/components/sidebar-nav.tsx
index df08cd57..945a849d 100644
--- a/src/components/sidebar-nav.tsx
+++ b/src/components/sidebar-nav.tsx
@@ -59,9 +59,9 @@ export function SidebarNav({
         <div>
             <div className="block lg:hidden px-4">
                 <Select
+                    defaultValue={getSelectedValue()}
                     onValueChange={handleSelectChange}
                     disabled={disabled}
-                    defaultValue={getSelectedValue()}
                 >
                     <SelectTrigger>
                         <SelectValue placeholder="Select an option" />
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index ee7eda11..5492daac 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -19,6 +19,7 @@ const buttonVariants = cva(
                 secondary:
                     "bg-secondary text-secondary-foreground hover:bg-secondary/80",
                 ghost: "hover:bg-accent hover:text-accent-foreground",
+                gray: "bg-accent text-accent-foreground hover:bg-accent/90",
                 link: "text-primary underline-offset-4 hover:underline",
             },
             size: {
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 7d24311b..891deb00 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
     <DialogPrimitive.Overlay
         ref={ref}
         className={cn(
-            "fixed inset-0 z-50 bg-black/50  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            "fixed inset-0 z-50 bg-black/30  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
             className
         )}
         {...props}