diff --git a/messages/en-US.json b/messages/en-US.json
index ba9e4e57..608dd000 100644
--- a/messages/en-US.json
+++ b/messages/en-US.json
@@ -181,7 +181,7 @@
     "baseDomain": "Base Domain",
     "subdomnainDescription": "The subdomain where the resource will be accessible.",
     "resourceRawSettings": "TCP/UDP Settings",
-    "resourceRawSettingsDescription": "Configure how the resource will be accessed over TCP/UDP. You map the resource to a port on the host Pangolin server, so you can access the resource from server-public-ip:mapped-port.",
+    "resourceRawSettingsDescription": "Configure how the resource will be accessed over TCP/UDP",
     "protocol": "Protocol",
     "protocolSelect": "Select a protocol",
     "resourcePortNumber": "Port Number",
@@ -499,7 +499,7 @@
     "proxyUpdatedDescription": "Proxy settings have been updated successfully",
     "proxyErrorUpdate": "Failed to update proxy settings",
     "proxyErrorUpdateDescription": "An error occurred while updating proxy settings",
-    "targetAddr": "IP / Hostname",
+    "targetAddr": "Host",
     "targetPort": "Port",
     "targetProtocol": "Protocol",
     "targetTlsSettings": "Secure Connection Configuration",
diff --git a/src/app/[orgId]/settings/resources/proxy/[niceId]/proxy/page.tsx b/src/app/[orgId]/settings/resources/proxy/[niceId]/proxy/page.tsx
index ba3499b5..5ca36513 100644
--- a/src/app/[orgId]/settings/resources/proxy/[niceId]/proxy/page.tsx
+++ b/src/app/[orgId]/settings/resources/proxy/[niceId]/proxy/page.tsx
@@ -123,10 +123,9 @@ const addTargetSchema = z
         ip: z.string().refine(isTargetValid),
         method: z.string().nullable(),
         port: z.coerce.number<number>().int().positive(),
-        siteId: z.int()
-            .positive({
-                error: "You must select a site for a target."
-            }),
+        siteId: z.int().positive({
+            error: "You must select a site for a target."
+        }),
         path: z.string().optional().nullable(),
         pathMatchType: z
             .enum(["exact", "prefix", "regex"])
@@ -546,11 +545,11 @@ export default function ReverseProxyTargets(props: {
                     prev.map((t) =>
                         t.targetId === target.targetId
                             ? {
-                                ...t,
-                                targetId: response.data.data.targetId,
-                                new: false,
-                                updated: false
-                            }
+                                  ...t,
+                                  targetId: response.data.data.targetId,
+                                  new: false,
+                                  updated: false
+                              }
                             : t
                     )
                 );
@@ -607,16 +606,16 @@ export default function ReverseProxyTargets(props: {
 
         const newTarget: LocalTarget = {
             ...data,
-            path: isHttp ? (data.path || null) : null,
-            pathMatchType: isHttp ? (data.pathMatchType || null) : null,
-            rewritePath: isHttp ? (data.rewritePath || null) : null,
-            rewritePathType: isHttp ? (data.rewritePathType || null) : null,
+            path: isHttp ? data.path || null : null,
+            pathMatchType: isHttp ? data.pathMatchType || null : null,
+            rewritePath: isHttp ? data.rewritePath || null : null,
+            rewritePathType: isHttp ? data.rewritePathType || null : null,
             siteType: site?.type || null,
             enabled: true,
             targetId: new Date().getTime(),
             new: true,
             resourceId: resource.resourceId,
-            priority: isHttp ? (data.priority || 100) : 100,
+            priority: isHttp ? data.priority || 100 : 100,
             hcEnabled: false,
             hcPath: null,
             hcMethod: null,
@@ -631,7 +630,7 @@ export default function ReverseProxyTargets(props: {
             hcStatus: null,
             hcMode: null,
             hcUnhealthyInterval: null,
-            hcTlsServerName: null,
+            hcTlsServerName: null
         };
 
         setTargets([...targets, newTarget]);
@@ -653,11 +652,11 @@ export default function ReverseProxyTargets(props: {
             targets.map((target) =>
                 target.targetId === targetId
                     ? {
-                        ...target,
-                        ...data,
-                        updated: true,
-                        siteType: site ? site.type : target.siteType
-                    }
+                          ...target,
+                          ...data,
+                          updated: true,
+                          siteType: site ? site.type : target.siteType
+                      }
                     : target
             )
         );
@@ -668,10 +667,10 @@ export default function ReverseProxyTargets(props: {
             targets.map((target) =>
                 target.targetId === targetId
                     ? {
-                        ...target,
-                        ...config,
-                        updated: true
-                    }
+                          ...target,
+                          ...config,
+                          updated: true
+                      }
                     : target
             )
         );
@@ -733,7 +732,7 @@ export default function ReverseProxyTargets(props: {
                     hcStatus: target.hcStatus || null,
                     hcUnhealthyInterval: target.hcUnhealthyInterval || null,
                     hcMode: target.hcMode || null,
-                    hcTlsServerName: target.hcTlsServerName,
+                    hcTlsServerName: target.hcTlsServerName
                 };
 
                 // Only include path-related fields for HTTP resources
@@ -833,7 +832,7 @@ export default function ReverseProxyTargets(props: {
         const priorityColumn: ColumnDef<LocalTarget> = {
             id: "priority",
             header: () => (
-                <div className="flex items-center gap-2">
+                <div className="flex items-center gap-2 p-3">
                     {t("priority")}
                     <TooltipProvider>
                         <Tooltip>
@@ -877,7 +876,7 @@ export default function ReverseProxyTargets(props: {
 
         const healthCheckColumn: ColumnDef<LocalTarget> = {
             accessorKey: "healthCheck",
-            header: () => (<span className="p-3">{t("healthCheck")}</span>),
+            header: () => <span className="p-3">{t("healthCheck")}</span>,
             cell: ({ row }) => {
                 const status = row.original.hcHealth || "unknown";
                 const isEnabled = row.original.hcEnabled;
@@ -923,18 +922,16 @@ export default function ReverseProxyTargets(props: {
                         {row.original.siteType === "newt" ? (
                             <Button
                                 variant="outline"
-                                className="flex items-center justify-between gap-2 p-2 w-full text-left cursor-pointer"
+                                className="flex items-center gap-2 w-full text-left cursor-pointer"
                                 onClick={() =>
                                     openHealthCheckDialog(row.original)
                                 }
                             >
-                                <Badge variant={getStatusColor(status)}>
-                                    <div className="flex items-center gap-1">
-                                        {getStatusIcon(status)}
-                                        {getStatusText(status)}
-                                    </div>
-                                </Badge>
                                 <Settings className="h-4 w-4" />
+                                <div className="flex items-center gap-1">
+                                    {getStatusIcon(status)}
+                                    {getStatusText(status)}
+                                </div>
                             </Button>
                         ) : (
                             <span>-</span>
@@ -949,7 +946,7 @@ export default function ReverseProxyTargets(props: {
 
         const matchPathColumn: ColumnDef<LocalTarget> = {
             accessorKey: "path",
-            header: () => (<span className="p-3">{t("matchPath")}</span>),
+            header: () => <span className="p-3">{t("matchPath")}</span>,
             cell: ({ row }) => {
                 const hasPathMatch = !!(
                     row.original.path || row.original.pathMatchType
@@ -1011,7 +1008,7 @@ export default function ReverseProxyTargets(props: {
 
         const addressColumn: ColumnDef<LocalTarget> = {
             accessorKey: "address",
-            header: () => (<span className="p-3">{t("address")}</span>),
+            header: () => <span className="p-3">{t("address")}</span>,
             cell: ({ row }) => {
                 const selectedSite = sites.find(
                     (site) => site.siteId === row.original.siteId
@@ -1064,7 +1061,7 @@ export default function ReverseProxyTargets(props: {
                                         className={cn(
                                             "w-[180px] justify-between text-sm border-r pr-4 rounded-none h-8 hover:bg-transparent",
                                             !row.original.siteId &&
-                                            "text-muted-foreground"
+                                                "text-muted-foreground"
                                         )}
                                     >
                                         <span className="truncate max-w-[150px]">
@@ -1132,8 +1129,12 @@ export default function ReverseProxyTargets(props: {
                                         {row.original.method || "http"}
                                     </SelectTrigger>
                                     <SelectContent>
-                                        <SelectItem value="http">http</SelectItem>
-                                        <SelectItem value="https">https</SelectItem>
+                                        <SelectItem value="http">
+                                            http
+                                        </SelectItem>
+                                        <SelectItem value="https">
+                                            https
+                                        </SelectItem>
                                         <SelectItem value="h2c">h2c</SelectItem>
                                     </SelectContent>
                                 </Select>
@@ -1147,7 +1148,7 @@ export default function ReverseProxyTargets(props: {
 
                             <Input
                                 defaultValue={row.original.ip}
-                                placeholder="IP / Hostname"
+                                placeholder="Host"
                                 className="flex-1 min-w-[120px] pl-0 border-none placeholder-gray-400"
                                 onBlur={(e) => {
                                     const input = e.target.value.trim();
@@ -1225,7 +1226,7 @@ export default function ReverseProxyTargets(props: {
 
         const rewritePathColumn: ColumnDef<LocalTarget> = {
             accessorKey: "rewritePath",
-            header: () => (<span className="p-3">{t("rewritePath")}</span>),
+            header: () => <span className="p-3">{t("rewritePath")}</span>,
             cell: ({ row }) => {
                 const hasRewritePath = !!(
                     row.original.rewritePath || row.original.rewritePathType
@@ -1295,7 +1296,7 @@ export default function ReverseProxyTargets(props: {
 
         const enabledColumn: ColumnDef<LocalTarget> = {
             accessorKey: "enabled",
-            header: () => (<span className="p-3">{t("enabled")}</span>),
+            header: () => <span className="p-3">{t("enabled")}</span>,
             cell: ({ row }) => (
                 <div className="flex items-center justify-center w-full">
                     <Switch
@@ -1316,7 +1317,7 @@ export default function ReverseProxyTargets(props: {
 
         const actionsColumn: ColumnDef<LocalTarget> = {
             id: "actions",
-            header: () => (<span className="p-3">{t("actions")}</span>),
+            header: () => <span className="p-3">{t("actions")}</span>,
             cell: ({ row }) => (
                 <div className="flex items-center w-full">
                     <Button
@@ -1399,21 +1400,30 @@ export default function ReverseProxyTargets(props: {
                                                 <TableRow key={headerGroup.id}>
                                                     {headerGroup.headers.map(
                                                         (header) => {
-                                                            const isActionsColumn = header.column.id === "actions";
+                                                            const isActionsColumn =
+                                                                header.column
+                                                                    .id ===
+                                                                "actions";
                                                             return (
                                                                 <TableHead
-                                                                    key={header.id}
-                                                                    className={isActionsColumn ? "sticky right-0 z-10 w-auto min-w-fit bg-card" : ""}
+                                                                    key={
+                                                                        header.id
+                                                                    }
+                                                                    className={
+                                                                        isActionsColumn
+                                                                            ? "sticky right-0 z-10 w-auto min-w-fit bg-card"
+                                                                            : ""
+                                                                    }
                                                                 >
                                                                     {header.isPlaceholder
                                                                         ? null
                                                                         : flexRender(
-                                                                            header
-                                                                                .column
-                                                                                .columnDef
-                                                                                .header,
-                                                                            header.getContext()
-                                                                        )}
+                                                                              header
+                                                                                  .column
+                                                                                  .columnDef
+                                                                                  .header,
+                                                                              header.getContext()
+                                                                          )}
                                                                 </TableHead>
                                                             );
                                                         }
@@ -1430,13 +1440,20 @@ export default function ReverseProxyTargets(props: {
                                                         {row
                                                             .getVisibleCells()
                                                             .map((cell) => {
-                                                                const isActionsColumn = cell.column.id === "actions";
+                                                                const isActionsColumn =
+                                                                    cell.column
+                                                                        .id ===
+                                                                    "actions";
                                                                 return (
                                                                     <TableCell
                                                                         key={
                                                                             cell.id
                                                                         }
-                                                                        className={isActionsColumn ? "sticky right-0 z-10 w-auto min-w-fit bg-card" : ""}
+                                                                        className={
+                                                                            isActionsColumn
+                                                                                ? "sticky right-0 z-10 w-auto min-w-fit bg-card"
+                                                                                : ""
+                                                                        }
                                                                     >
                                                                         {flexRender(
                                                                             cell
@@ -1492,7 +1509,7 @@ export default function ReverseProxyTargets(props: {
                             </div>
                         </>
                     ) : (
-                        <div className="text-center py-8 border-2 border-dashed border-muted rounded-lg p-4">
+                        <div className="text-center p-4">
                             <p className="text-muted-foreground mb-4">
                                 {t("targetNoOne")}
                             </p>
@@ -1721,7 +1738,9 @@ export default function ReverseProxyTargets(props: {
                                                         defaultChecked={
                                                             field.value || false
                                                         }
-                                                        onCheckedChange={(val) => {
+                                                        onCheckedChange={(
+                                                            val
+                                                        ) => {
                                                             field.onChange(val);
                                                         }}
                                                     />
@@ -1730,19 +1749,37 @@ export default function ReverseProxyTargets(props: {
                                         )}
                                     />
 
-                                    {proxySettingsForm.watch("proxyProtocol") && (
+                                    {proxySettingsForm.watch(
+                                        "proxyProtocol"
+                                    ) && (
                                         <>
                                             <FormField
-                                                control={proxySettingsForm.control}
+                                                control={
+                                                    proxySettingsForm.control
+                                                }
                                                 name="proxyProtocolVersion"
                                                 render={({ field }) => (
                                                     <FormItem>
-                                                        <FormLabel>{t("proxyProtocolVersion")}</FormLabel>
+                                                        <FormLabel>
+                                                            {t(
+                                                                "proxyProtocolVersion"
+                                                            )}
+                                                        </FormLabel>
                                                         <FormControl>
                                                             <Select
-                                                                value={String(field.value || 1)}
-                                                                onValueChange={(value) =>
-                                                                    field.onChange(parseInt(value, 10))
+                                                                value={String(
+                                                                    field.value ||
+                                                                        1
+                                                                )}
+                                                                onValueChange={(
+                                                                    value
+                                                                ) =>
+                                                                    field.onChange(
+                                                                        parseInt(
+                                                                            value,
+                                                                            10
+                                                                        )
+                                                                    )
                                                                 }
                                                             >
                                                                 <SelectTrigger>
@@ -1750,16 +1787,22 @@ export default function ReverseProxyTargets(props: {
                                                                 </SelectTrigger>
                                                                 <SelectContent>
                                                                     <SelectItem value="1">
-                                                                        {t("version1")}
+                                                                        {t(
+                                                                            "version1"
+                                                                        )}
                                                                     </SelectItem>
                                                                     <SelectItem value="2">
-                                                                        {t("version2")}
+                                                                        {t(
+                                                                            "version2"
+                                                                        )}
                                                                     </SelectItem>
                                                                 </SelectContent>
                                                             </Select>
                                                         </FormControl>
                                                         <FormDescription>
-                                                            {t("versionDescription")}
+                                                            {t(
+                                                                "versionDescription"
+                                                            )}
                                                         </FormDescription>
                                                     </FormItem>
                                                 )}
@@ -1768,7 +1811,10 @@ export default function ReverseProxyTargets(props: {
                                             <Alert>
                                                 <AlertTriangle className="h-4 w-4" />
                                                 <AlertDescription>
-                                                    <strong>{t("warning")}:</strong> {t("proxyProtocolWarning")}
+                                                    <strong>
+                                                        {t("warning")}:
+                                                    </strong>{" "}
+                                                    {t("proxyProtocolWarning")}
                                                 </AlertDescription>
                                             </Alert>
                                         </>
@@ -1835,8 +1881,9 @@ export default function ReverseProxyTargets(props: {
                         hcUnhealthyInterval:
                             selectedTargetForHealthCheck.hcUnhealthyInterval ||
                             30,
-                        hcTlsServerName: selectedTargetForHealthCheck.hcTlsServerName ||
-                            undefined,
+                        hcTlsServerName:
+                            selectedTargetForHealthCheck.hcTlsServerName ||
+                            undefined
                     }}
                     onChanges={async (config) => {
                         if (selectedTargetForHealthCheck) {
diff --git a/src/app/[orgId]/settings/resources/proxy/create/page.tsx b/src/app/[orgId]/settings/resources/proxy/create/page.tsx
index 5fe98c95..94021320 100644
--- a/src/app/[orgId]/settings/resources/proxy/create/page.tsx
+++ b/src/app/[orgId]/settings/resources/proxy/create/page.tsx
@@ -432,16 +432,16 @@ export default function Page() {
 
         const newTarget: LocalTarget = {
             ...data,
-            path: isHttp ? (data.path || null) : null,
-            pathMatchType: isHttp ? (data.pathMatchType || null) : null,
-            rewritePath: isHttp ? (data.rewritePath || null) : null,
-            rewritePathType: isHttp ? (data.rewritePathType || null) : null,
+            path: isHttp ? data.path || null : null,
+            pathMatchType: isHttp ? data.pathMatchType || null : null,
+            rewritePath: isHttp ? data.rewritePath || null : null,
+            rewritePathType: isHttp ? data.rewritePathType || null : null,
             siteType: site?.type || null,
             enabled: true,
             targetId: new Date().getTime(),
             new: true,
             resourceId: 0, // Will be set when resource is created
-            priority: isHttp ? (data.priority || 100) : 100, // Default priority
+            priority: isHttp ? data.priority || 100 : 100, // Default priority
             hcEnabled: false,
             hcPath: null,
             hcMethod: null,
@@ -507,7 +507,7 @@ export default function Page() {
         try {
             const payload = {
                 name: baseData.name,
-                http: baseData.http,
+                http: baseData.http
             };
 
             let sanitizedSubdomain: string | undefined;
@@ -577,7 +577,8 @@ export default function Page() {
                                 hcFollowRedirects:
                                     target.hcFollowRedirects || null,
                                 hcStatus: target.hcStatus || null,
-                                hcUnhealthyInterval: target.hcUnhealthyInterval || null,
+                                hcUnhealthyInterval:
+                                    target.hcUnhealthyInterval || null,
                                 hcMode: target.hcMode || null,
                                 hcTlsServerName: target.hcTlsServerName
                             };
@@ -737,7 +738,7 @@ export default function Page() {
         const priorityColumn: ColumnDef<LocalTarget> = {
             id: "priority",
             header: () => (
-                <div className="flex items-center gap-2">
+                <div className="flex items-center gap-2 p-3">
                     {t("priority")}
                     <TooltipProvider>
                         <Tooltip>
@@ -780,7 +781,7 @@ export default function Page() {
 
         const healthCheckColumn: ColumnDef<LocalTarget> = {
             accessorKey: "healthCheck",
-            header: () => (<span className="p-3">{t("healthCheck")}</span>),
+            header: () => <span className="p-3">{t("healthCheck")}</span>,
             cell: ({ row }) => {
                 const status = row.original.hcHealth || "unknown";
                 const isEnabled = row.original.hcEnabled;
@@ -826,18 +827,16 @@ export default function Page() {
                         {row.original.siteType === "newt" ? (
                             <Button
                                 variant="outline"
-                                className="flex items-center justify-between gap-2 p-2 w-full text-left cursor-pointer"
+                                className="flex items-center gap-2 w-full text-left cursor-pointer"
                                 onClick={() =>
                                     openHealthCheckDialog(row.original)
                                 }
                             >
-                                <Badge variant={getStatusColor(status)}>
-                                    <div className="flex items-center gap-1">
-                                        {getStatusIcon(status)}
-                                        {getStatusText(status)}
-                                    </div>
-                                </Badge>
                                 <Settings className="h-4 w-4" />
+                                <div className="flex items-center gap-1">
+                                    {getStatusIcon(status)}
+                                    {getStatusText(status)}
+                                </div>
                             </Button>
                         ) : (
                             <span>-</span>
@@ -852,7 +851,7 @@ export default function Page() {
 
         const matchPathColumn: ColumnDef<LocalTarget> = {
             accessorKey: "path",
-            header: () => (<span className="p-3">{t("matchPath")}</span>),
+            header: () => <span className="p-3">{t("matchPath")}</span>,
             cell: ({ row }) => {
                 const hasPathMatch = !!(
                     row.original.path || row.original.pathMatchType
@@ -914,7 +913,7 @@ export default function Page() {
 
         const addressColumn: ColumnDef<LocalTarget> = {
             accessorKey: "address",
-            header: () => (<span className="p-3">{t("address")}</span>),
+            header: () => <span className="p-3">{t("address")}</span>,
             cell: ({ row }) => {
                 const selectedSite = sites.find(
                     (site) => site.siteId === row.original.siteId
@@ -1035,8 +1034,12 @@ export default function Page() {
                                         {row.original.method || "http"}
                                     </SelectTrigger>
                                     <SelectContent>
-                                        <SelectItem value="http">http</SelectItem>
-                                        <SelectItem value="https">https</SelectItem>
+                                        <SelectItem value="http">
+                                            http
+                                        </SelectItem>
+                                        <SelectItem value="https">
+                                            https
+                                        </SelectItem>
                                         <SelectItem value="h2c">h2c</SelectItem>
                                     </SelectContent>
                                 </Select>
@@ -1050,7 +1053,7 @@ export default function Page() {
 
                             <Input
                                 defaultValue={row.original.ip}
-                                placeholder="IP / Hostname"
+                                placeholder="Host"
                                 className="flex-1 min-w-[120px] pl-0 border-none placeholder-gray-400"
                                 onBlur={(e) => {
                                     const input = e.target.value.trim();
@@ -1128,7 +1131,7 @@ export default function Page() {
 
         const rewritePathColumn: ColumnDef<LocalTarget> = {
             accessorKey: "rewritePath",
-            header: () => (<span className="p-3">{t("rewritePath")}</span>),
+            header: () => <span className="p-3">{t("rewritePath")}</span>,
             cell: ({ row }) => {
                 const hasRewritePath = !!(
                     row.original.rewritePath || row.original.rewritePathType
@@ -1198,7 +1201,7 @@ export default function Page() {
 
         const enabledColumn: ColumnDef<LocalTarget> = {
             accessorKey: "enabled",
-            header: () => (<span className="p-3">{t("enabled")}</span>),
+            header: () => <span className="p-3">{t("enabled")}</span>,
             cell: ({ row }) => (
                 <div className="flex items-center justify-center w-full">
                     <Switch
@@ -1219,7 +1222,7 @@ export default function Page() {
 
         const actionsColumn: ColumnDef<LocalTarget> = {
             id: "actions",
-            header: () => (<span className="p-3">{t("actions")}</span>),
+            header: () => <span className="p-3">{t("actions")}</span>,
             cell: ({ row }) => (
                 <div className="flex items-center justify-end w-full">
                     <Button
@@ -1341,42 +1344,38 @@ export default function Page() {
                                             </form>
                                         </Form>
                                     </SettingsSectionForm>
+
+                                    {resourceTypes.length > 1 && (
+                                        <>
+                                            <div className="mb-2">
+                                                <span className="text-sm font-medium">
+                                                    {t("type")}
+                                                </span>
+                                            </div>
+
+                                            <StrategySelect
+                                                options={resourceTypes}
+                                                defaultValue="http"
+                                                onChange={(value) => {
+                                                    baseForm.setValue(
+                                                        "http",
+                                                        value === "http"
+                                                    );
+                                                    // Update method default when switching resource type
+                                                    addTargetForm.setValue(
+                                                        "method",
+                                                        value === "http"
+                                                            ? "http"
+                                                            : null
+                                                    );
+                                                }}
+                                                cols={2}
+                                            />
+                                        </>
+                                    )}
                                 </SettingsSectionBody>
                             </SettingsSection>
 
-                            {resourceTypes.length > 1 && (
-                                <SettingsSection>
-                                    <SettingsSectionHeader>
-                                        <SettingsSectionTitle>
-                                            {t("resourceType")}
-                                        </SettingsSectionTitle>
-                                        <SettingsSectionDescription>
-                                            {t("resourceTypeDescription")}
-                                        </SettingsSectionDescription>
-                                    </SettingsSectionHeader>
-                                    <SettingsSectionBody>
-                                        <StrategySelect
-                                            options={resourceTypes}
-                                            defaultValue="http"
-                                            onChange={(value) => {
-                                                baseForm.setValue(
-                                                    "http",
-                                                    value === "http"
-                                                );
-                                                // Update method default when switching resource type
-                                                addTargetForm.setValue(
-                                                    "method",
-                                                    value === "http"
-                                                        ? "http"
-                                                        : null
-                                                );
-                                            }}
-                                            cols={2}
-                                        />
-                                    </SettingsSectionBody>
-                                </SettingsSection>
-                            )}
-
                             {baseForm.watch("http") ? (
                                 <SettingsSection>
                                     <SettingsSectionHeader>
@@ -1422,146 +1421,98 @@ export default function Page() {
                                         </SettingsSectionDescription>
                                     </SettingsSectionHeader>
                                     <SettingsSectionBody>
-                                        <SettingsSectionForm>
-                                            <Form {...tcpUdpForm}>
-                                                <form
-                                                    onKeyDown={(e) => {
-                                                        if (e.key === "Enter") {
-                                                            e.preventDefault(); // block default enter refresh
-                                                        }
-                                                    }}
-                                                    className="space-y-4"
-                                                    id="tcp-udp-settings-form"
-                                                >
-                                                    <Controller
-                                                        control={
-                                                            tcpUdpForm.control
-                                                        }
-                                                        name="protocol"
-                                                        render={({ field }) => (
-                                                            <FormItem>
-                                                                <FormLabel>
-                                                                    {t(
-                                                                        "protocol"
-                                                                    )}
-                                                                </FormLabel>
-                                                                <Select
-                                                                    onValueChange={
-                                                                        field.onChange
-                                                                    }
-                                                                    {...field}
-                                                                >
-                                                                    <FormControl>
-                                                                        <SelectTrigger>
-                                                                            <SelectValue
-                                                                                placeholder={t(
-                                                                                    "protocolSelect"
-                                                                                )}
-                                                                            />
-                                                                        </SelectTrigger>
-                                                                    </FormControl>
-                                                                    <SelectContent>
-                                                                        <SelectItem value="tcp">
-                                                                            TCP
-                                                                        </SelectItem>
-                                                                        <SelectItem value="udp">
-                                                                            UDP
-                                                                        </SelectItem>
-                                                                    </SelectContent>
-                                                                </Select>
-                                                                <FormMessage />
-                                                            </FormItem>
-                                                        )}
-                                                    />
-
-                                                    <FormField
-                                                        control={
-                                                            tcpUdpForm.control
-                                                        }
-                                                        name="proxyPort"
-                                                        render={({ field }) => (
-                                                            <FormItem>
-                                                                <FormLabel>
-                                                                    {t(
-                                                                        "resourcePortNumber"
-                                                                    )}
-                                                                </FormLabel>
+                                        <Form {...tcpUdpForm}>
+                                            <form
+                                                onKeyDown={(e) => {
+                                                    if (e.key === "Enter") {
+                                                        e.preventDefault(); // block default enter refresh
+                                                    }
+                                                }}
+                                                className="space-y-4 grid gap-4 grid-cols-1 md:grid-cols-2 items-start"
+                                                id="tcp-udp-settings-form"
+                                            >
+                                                <Controller
+                                                    control={tcpUdpForm.control}
+                                                    name="protocol"
+                                                    render={({ field }) => (
+                                                        <FormItem>
+                                                            <FormLabel>
+                                                                {t("protocol")}
+                                                            </FormLabel>
+                                                            <Select
+                                                                onValueChange={
+                                                                    field.onChange
+                                                                }
+                                                                {...field}
+                                                            >
                                                                 <FormControl>
-                                                                    <Input
-                                                                        type="number"
-                                                                        value={
-                                                                            field.value ??
-                                                                            ""
-                                                                        }
-                                                                        onChange={(
-                                                                            e
-                                                                        ) =>
-                                                                            field.onChange(
-                                                                                e
-                                                                                    .target
-                                                                                    .value
-                                                                                    ? parseInt(
-                                                                                          e
-                                                                                              .target
-                                                                                              .value
-                                                                                      )
-                                                                                    : undefined
-                                                                            )
-                                                                        }
-                                                                    />
-                                                                </FormControl>
-                                                                <FormMessage />
-                                                                <FormDescription>
-                                                                    {t(
-                                                                        "resourcePortNumberDescription"
-                                                                    )}
-                                                                </FormDescription>
-                                                            </FormItem>
-                                                        )}
-                                                    />
-
-                                                    {/* {build == "oss" && (
-                                                        <FormField
-                                                            control={
-                                                                tcpUdpForm.control
-                                                            }
-                                                            name="enableProxy"
-                                                            render={({
-                                                                field
-                                                            }) => (
-                                                                <FormItem className="flex flex-row items-start space-x-3 space-y-0">
-                                                                    <FormControl>
-                                                                        <Checkbox
-                                                                            variant={
-                                                                                "outlinePrimarySquare"
-                                                                            }
-                                                                            checked={
-                                                                                field.value
-                                                                            }
-                                                                            onCheckedChange={
-                                                                                field.onChange
-                                                                            }
+                                                                    <SelectTrigger>
+                                                                        <SelectValue
+                                                                            placeholder={t(
+                                                                                "protocolSelect"
+                                                                            )}
                                                                         />
-                                                                    </FormControl>
-                                                                    <div className="space-y-1 leading-none">
-                                                                        <FormLabel>
-                                                                            {t(
-                                                                                "resourceEnableProxy"
-                                                                            )}
-                                                                        </FormLabel>
-                                                                        <FormDescription>
-                                                                            {t(
-                                                                                "resourceEnableProxyDescription"
-                                                                            )}
-                                                                        </FormDescription>
-                                                                    </div>
-                                                                </FormItem>
-                                                            )}
-                                                        />
-                                                    )} */}
-                                                </form>
-                                            </Form>
-                                        </SettingsSectionForm>
+                                                                    </SelectTrigger>
+                                                                </FormControl>
+                                                                <SelectContent>
+                                                                    <SelectItem value="tcp">
+                                                                        TCP
+                                                                    </SelectItem>
+                                                                    <SelectItem value="udp">
+                                                                        UDP
+                                                                    </SelectItem>
+                                                                </SelectContent>
+                                                            </Select>
+                                                            <FormMessage />
+                                                        </FormItem>
+                                                    )}
+                                                />
+
+                                                <FormField
+                                                    control={tcpUdpForm.control}
+                                                    name="proxyPort"
+                                                    render={({ field }) => (
+                                                        <FormItem>
+                                                            <FormLabel>
+                                                                {t(
+                                                                    "resourcePortNumber"
+                                                                )}
+                                                            </FormLabel>
+                                                            <FormControl>
+                                                                <Input
+                                                                    type="number"
+                                                                    value={
+                                                                        field.value ??
+                                                                        ""
+                                                                    }
+                                                                    onChange={(
+                                                                        e
+                                                                    ) =>
+                                                                        field.onChange(
+                                                                            e
+                                                                                .target
+                                                                                .value
+                                                                                ? parseInt(
+                                                                                      e
+                                                                                          .target
+                                                                                          .value
+                                                                                  )
+                                                                                : undefined
+                                                                        )
+                                                                    }
+                                                                />
+                                                            </FormControl>
+                                                            <FormMessage />
+                                                            <FormDescription>
+                                                                {t(
+                                                                    "resourcePortNumberDescription"
+                                                                )}
+                                                            </FormDescription>
+                                                        </FormItem>
+                                                    )}
+                                                />
+                                            </form>
+                                        </Form>
                                     </SettingsSectionBody>
                                 </SettingsSection>
                             )}
@@ -1596,13 +1547,21 @@ export default function Page() {
                                                                             (
                                                                                 header
                                                                             ) => {
-                                                                                const isActionsColumn = header.column.id === "actions";
+                                                                                const isActionsColumn =
+                                                                                    header
+                                                                                        .column
+                                                                                        .id ===
+                                                                                    "actions";
                                                                                 return (
                                                                                     <TableHead
                                                                                         key={
                                                                                             header.id
                                                                                         }
-                                                                                        className={isActionsColumn ? "sticky right-0 z-10 w-auto min-w-fit bg-card" : ""}
+                                                                                        className={
+                                                                                            isActionsColumn
+                                                                                                ? "sticky right-0 z-10 w-auto min-w-fit bg-card"
+                                                                                                : ""
+                                                                                        }
                                                                                     >
                                                                                         {header.isPlaceholder
                                                                                             ? null
@@ -1639,13 +1598,21 @@ export default function Page() {
                                                                                     (
                                                                                         cell
                                                                                     ) => {
-                                                                                        const isActionsColumn = cell.column.id === "actions";
+                                                                                        const isActionsColumn =
+                                                                                            cell
+                                                                                                .column
+                                                                                                .id ===
+                                                                                            "actions";
                                                                                         return (
                                                                                             <TableCell
                                                                                                 key={
                                                                                                     cell.id
                                                                                                 }
-                                                                                                className={isActionsColumn ? "sticky right-0 z-10 w-auto min-w-fit bg-card" : ""}
+                                                                                                className={
+                                                                                                    isActionsColumn
+                                                                                                        ? "sticky right-0 z-10 w-auto min-w-fit bg-card"
+                                                                                                        : ""
+                                                                                                }
                                                                                             >
                                                                                                 {flexRender(
                                                                                                     cell
@@ -1711,7 +1678,7 @@ export default function Page() {
                                             </div>
                                         </>
                                     ) : (
-                                        <div className="text-center py-8 border-2 border-dashed border-muted rounded-lg p-4">
+                                        <div className="text-center p-4">
                                             <p className="text-muted-foreground mb-4">
                                                 {t("targetNoOne")}
                                             </p>
diff --git a/src/components/DomainPicker.tsx b/src/components/DomainPicker.tsx
index 24f510dc..2d17e39f 100644
--- a/src/components/DomainPicker.tsx
+++ b/src/components/DomainPicker.tsx
@@ -809,15 +809,6 @@ export default function DomainPicker2({
                     )}
                 </div>
             )}
-
-            {loadingDomains && (
-                <div className="flex items-center justify-center p-4">
-                    <div className="flex items-center space-x-2 text-sm text-muted-foreground">
-                        <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-primary"></div>
-                        <span>{t("domainPickerLoadingDomains")}</span>
-                    </div>
-                </div>
-            )}
         </div>
     );
 }