feat(networks): enhance network management and UI components

- Added functionality for assigning Docker networks to services, allowing users to manage network associations directly from the UI. - Introduced new components for assigning networks to both individual services and compose files, improving user experience and flexibility. - Updated existing components to integrate network assignment features, ensuring seamless interaction within the dashboard. - Enhanced the database schema to support new network-related fields, including `networkIds` and `detachDokployNetwork`, for better service configuration. - Improved the layout and responsiveness of various UI elements to accommodate new features and enhance usability.
2026-07-26 00:05:34 +02:00 · 2026-07-25 03:09:54 -06:00
parent 8a37626636
commit 97885ee44a
57 changed files with 1382 additions and 307 deletions
--- a/apps/dokploy/test/drop/drop.test.ts
+++ b/apps/dokploy/test/drop/drop.test.ts
@@ -32,6 +32,8 @@ const baseApp: ApplicationNested = {
 	railpackVersion: "0.15.4",
 	applicationId: "",
 	previewLabels: [],
+	networkIds: [],
+	detachDokployNetwork: false,
 	createEnvFile: true,
 	bitbucketRepositorySlug: "",
 	herokuVersion: "",
--- a/apps/dokploy/test/traefik/traefik.test.ts
+++ b/apps/dokploy/test/traefik/traefik.test.ts
@@ -7,6 +7,8 @@ const baseApp: ApplicationNested = {
 	rollbackActive: false,
 	applicationId: "",
 	previewLabels: [],
+	networkIds: [],
+	detachDokployNetwork: false,
 	createEnvFile: true,
 	bitbucketRepositorySlug: "",
 	herokuVersion: "",
--- a/apps/dokploy/components/dashboard/application/advanced/import/show-import.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/import/show-import.tsx
@@ -185,7 +185,7 @@ export const ShowImport = ({ composeId }: Props) => {
 								</Button>
 							</div>
 							<Dialog open={showModal} onOpenChange={setShowModal}>
-								<DialogContent className="max-w-[50vw]">
+								<DialogContent className="sm:max-w-3xl max-h-[85vh] flex flex-col">
 									<DialogHeader>
 										<DialogTitle className="text-2xl font-bold">
 											Template Information
@@ -199,7 +199,7 @@ export const ShowImport = ({ composeId }: Props) => {
 										</DialogDescription>
 									</DialogHeader>

-									<div className="flex flex-col gap-6">
+									<div className="flex flex-col gap-6 flex-1 min-h-0 overflow-y-auto pr-1">
 										<div className="space-y-4">
 											<div className="flex items-center gap-2">
 												<Code2 className="h-5 w-5 text-primary" />
@@ -207,12 +207,14 @@ export const ShowImport = ({ composeId }: Props) => {
 													Docker Compose
 												</h3>
 											</div>
-											<CodeEditor
-												language="yaml"
-												value={templateInfo?.compose || ""}
-												className="font-mono"
-												readOnly
-											/>
+											<div className="max-h-[45vh] overflow-auto rounded-md border">
+												<CodeEditor
+													language="yaml"
+													value={templateInfo?.compose || ""}
+													className="font-mono"
+													readOnly
+												/>
+											</div>
 										</div>

 										<Separator />
--- a/apps/dokploy/components/dashboard/compose/advanced/add-isolation.tsx
+++ b/apps/dokploy/components/dashboard/compose/advanced/add-isolation.tsx
@@ -6,6 +6,7 @@ import { toast } from "sonner";
 import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { CodeEditor } from "@/components/shared/code-editor";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -111,7 +112,10 @@ export const IsolatedDeploymentTab = ({ composeId }: Props) => {
 	return (
 		<Card className="bg-background">
 			<CardHeader>
-				<CardTitle className="text-xl">Enable Isolated Deployment</CardTitle>
+				<CardTitle className="text-xl flex items-center gap-2">
+					Enable Isolated Deployment
+					<Badge variant="yellow">Deprecated</Badge>
+				</CardTitle>
 				<CardDescription>
 					Configure isolated deployment to the compose file.
 					<div className="text-sm text-muted-foreground flex flex-col gap-2">
@@ -138,6 +142,11 @@ export const IsolatedDeploymentTab = ({ composeId }: Props) => {
 			</CardHeader>
 			<CardContent>
 				<div className="space-y-4">
+					<AlertBlock type="warning">
+						Isolated deployment is deprecated. Use the Networks section above to
+						attach networks per service and detach them from dokploy-network —
+						it is declarative and does not break on restarts.
+					</AlertBlock>
 					{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 					<Form {...form}>
 						<form
--- a/apps/dokploy/components/dashboard/compose/general/show-converted-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/general/show-converted-compose.tsx
@@ -52,7 +52,7 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
 					Preview Compose
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-6xl max-h-200">
+			<DialogContent className="sm:max-w-6xl max-h-[85vh] flex flex-col">
 				<DialogHeader>
 					<DialogTitle>Converted Compose</DialogTitle>
 					<DialogDescription>
@@ -62,10 +62,6 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
 				</DialogHeader>
 				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}

-				<AlertBlock type="info" className="mb-4">
-					Preview your docker-compose file with added domains. Note: At least
-					one domain must be specified for this conversion to take effect.
-				</AlertBlock>
 				{isPending ? (
 					<div className="flex flex-row items-center justify-center min-h-100 border p-4 rounded-md">
 						<Loader2 className="h-8 w-8 text-muted-foreground mb-2 animate-spin" />
@@ -79,7 +75,7 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
 					</div>
 				) : (
 					<>
-						<div className="flex flex-row gap-2 justify-end my-4">
+						<div className="flex flex-row gap-2 justify-end">
 							<Button
 								variant="secondary"
 								isLoading={isPending}
@@ -100,14 +96,15 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
 							</Button>
 						</div>

-						<pre>
+						<div className="flex-1 min-h-0 overflow-auto rounded-md border">
 							<CodeEditor
 								value={compose || ""}
 								language="yaml"
 								readOnly
-								height="50rem"
+								height="100%"
+								wrapperClassName="h-full"
 							/>
-						</pre>
+						</div>
 					</>
 				)}
 			</DialogContent>
--- a/apps/dokploy/components/dashboard/networks/assign-compose-networks.tsx
+++ b/apps/dokploy/components/dashboard/networks/assign-compose-networks.tsx
@@ -0,0 +1,347 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Check, ChevronsUpDown, Loader2, RefreshCw } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useFieldArray, useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+	Command,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+} from "@/components/ui/command";
+import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+import { api } from "@/utils/api";
+
+interface Props {
+	composeId: string;
+}
+
+const serviceSchema = z.object({
+	serviceName: z.string(),
+	networkIds: z.array(z.string()),
+	detachDokployNetwork: z.boolean(),
+});
+
+const formSchema = z.object({
+	services: z.array(serviceSchema),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+export const AssignComposeNetworks = ({ composeId }: Props) => {
+	const [cacheType, setCacheType] = useState<"cache" | "fetch">("cache");
+
+	const { data: compose } = api.compose.one.useQuery({ composeId });
+	const {
+		data: services,
+		isLoading: isLoadingServices,
+		error: servicesError,
+		refetch: refetchServices,
+		isRefetching: isRefetchingServices,
+	} = api.compose.loadServices.useQuery(
+		{ composeId, type: cacheType },
+		{ retry: false },
+	);
+
+	const onRetry = () => {
+		setCacheType("fetch");
+		setTimeout(() => refetchServices(), 0);
+	};
+
+	const { data: networks } = api.network.all.useQuery(
+		{ serverId: compose?.serverId ?? undefined },
+		{ enabled: compose !== undefined },
+	);
+	const { mutateAsync, isPending } = api.compose.update.useMutation();
+	const utils = api.useUtils();
+
+	const form = useForm<FormValues>({
+		resolver: zodResolver(formSchema),
+		defaultValues: { services: [] },
+	});
+	const { fields } = useFieldArray({
+		control: form.control,
+		name: "services",
+	});
+
+	useEffect(() => {
+		if (!services) return;
+		const serviceNetworks = compose?.serviceNetworks ?? [];
+		form.reset({
+			services: services.map((serviceName) => {
+				const config = serviceNetworks.find(
+					(s) => s.serviceName === serviceName,
+				);
+				return {
+					serviceName,
+					networkIds: config?.networkIds ?? [],
+					detachDokployNetwork: config?.detachDokployNetwork ?? false,
+				};
+			}),
+		});
+	}, [services, compose?.serviceNetworks, form]);
+
+	const allowsBridge = compose?.composeType === "docker-compose";
+	const availableNetworks = (networks ?? []).filter(
+		(n) => allowsBridge || n.driver === "overlay",
+	);
+
+	const onSubmit = async (values: FormValues) => {
+		try {
+			const serviceNetworks = values.services.filter(
+				(s) => s.networkIds.length > 0 || s.detachDokployNetwork,
+			);
+			await mutateAsync({
+				composeId,
+				serviceNetworks,
+			});
+			toast.success("Networks updated. Redeploy the compose to apply them.");
+			await utils.compose.one.invalidate({ composeId });
+		} catch (error) {
+			toast.error("Error updating networks", {
+				description: error instanceof Error ? error.message : "Unknown error",
+			});
+		}
+	};
+
+	return (
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row items-start justify-between flex-wrap gap-2">
+				<div className="flex flex-col gap-1">
+					<CardTitle className="text-xl">Networks</CardTitle>
+					<CardDescription>
+						Attach Docker networks per service and detach it from
+						dokploy-network. Takes effect on the next deploy.
+					</CardDescription>
+				</div>
+				<Button
+					variant="outline"
+					size="sm"
+					isLoading={isRefetchingServices}
+					onClick={onRetry}
+				>
+					<RefreshCw className="size-4" />
+					Refresh
+				</Button>
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				{servicesError ? (
+					<div className="flex flex-col gap-3">
+						<AlertBlock type="error">
+							Could not load the compose services. If this compose was just
+							created from a template, it hasn't been cloned yet — click Reload
+							to clone the repository and read its services.
+						</AlertBlock>
+						<div className="flex justify-end">
+							<Button
+								variant="outline"
+								size="sm"
+								isLoading={isRefetchingServices}
+								onClick={onRetry}
+							>
+								<RefreshCw className="size-4" />
+								Reload services
+							</Button>
+						</div>
+					</div>
+				) : isLoadingServices ? (
+					<div className="flex flex-row gap-2 items-center justify-center py-10 text-sm text-muted-foreground">
+						<span>Loading services...</span>
+						<Loader2 className="animate-spin size-4" />
+					</div>
+				) : !services?.length ? (
+					<span className="py-6 text-center text-sm text-muted-foreground">
+						No services found in this compose.
+					</span>
+				) : (
+					<Form {...form}>
+						<form
+							onSubmit={form.handleSubmit(onSubmit)}
+							className="flex flex-col gap-4"
+						>
+							{fields.map((fieldItem, index) => (
+								<ServiceRow
+									key={fieldItem.id}
+									control={form.control}
+									index={index}
+									service={fieldItem.serviceName}
+									availableNetworks={availableNetworks}
+								/>
+							))}
+							<div className="flex justify-end">
+								<Button
+									type="submit"
+									disabled={!form.formState.isDirty}
+									isLoading={isPending}
+								>
+									Save
+								</Button>
+							</div>
+						</form>
+					</Form>
+				)}
+			</CardContent>
+		</Card>
+	);
+};
+
+type NetworkOption = { networkId: string; name: string; driver: string };
+
+const ServiceRow = ({
+	control,
+	index,
+	service,
+	availableNetworks,
+}: {
+	control: ReturnType<typeof useForm<FormValues>>["control"];
+	index: number;
+	service: string;
+	availableNetworks: NetworkOption[];
+}) => {
+	const [open, setOpen] = useState(false);
+
+	return (
+		<div className="flex flex-col gap-3 rounded-lg border p-4">
+			<FormField
+				control={control}
+				name={`services.${index}.detachDokployNetwork`}
+				render={({ field }) => (
+					<FormItem className="flex flex-row items-center justify-between gap-3 space-y-0">
+						<span className="text-sm font-medium">{service}</span>
+						<div className="flex items-center gap-2">
+							<span className="text-xs text-muted-foreground">
+								Detach dokploy-network
+							</span>
+							<FormControl>
+								<Switch
+									checked={field.value}
+									onCheckedChange={field.onChange}
+								/>
+							</FormControl>
+						</div>
+					</FormItem>
+				)}
+			/>
+
+			<FormField
+				control={control}
+				name={`services.${index}.networkIds`}
+				render={({ field }) => {
+					const selectedNetworks = availableNetworks.filter((n) =>
+						field.value.includes(n.networkId),
+					);
+					const toggle = (networkId: string) => {
+						field.onChange(
+							field.value.includes(networkId)
+								? field.value.filter((id) => id !== networkId)
+								: [...field.value, networkId],
+						);
+					};
+					return (
+						<FormItem className="space-y-3">
+							<Popover open={open} onOpenChange={setOpen}>
+								<PopoverTrigger asChild>
+									<Button
+										type="button"
+										variant="outline"
+										aria-expanded={open}
+										className="w-full justify-between"
+									>
+										<span className="text-muted-foreground">
+											{selectedNetworks.length > 0
+												? `${selectedNetworks.length} network${
+														selectedNetworks.length > 1 ? "s" : ""
+													} selected`
+												: "Select networks..."}
+										</span>
+										<ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
+									</Button>
+								</PopoverTrigger>
+								<PopoverContent
+									className="w-[var(--radix-popover-trigger-width)] p-0"
+									align="start"
+								>
+									<Command>
+										<CommandInput
+											placeholder="Search networks..."
+											className="h-9"
+										/>
+										<CommandList className="max-h-60">
+											{availableNetworks.length === 0 ? (
+												<div className="py-6 text-center text-sm text-muted-foreground">
+													No networks available on this server.
+												</div>
+											) : (
+												<CommandGroup>
+													{availableNetworks.map((n) => {
+														const isSelected = field.value.includes(
+															n.networkId,
+														);
+														return (
+															<CommandItem
+																key={n.networkId}
+																value={n.name}
+																onSelect={() => toggle(n.networkId)}
+																className="cursor-pointer"
+															>
+																<Checkbox
+																	checked={isSelected}
+																	className="mr-2"
+																	onCheckedChange={() => toggle(n.networkId)}
+																/>
+																<span>{n.name}</span>
+																<Badge variant="outline" className="ml-2">
+																	{n.driver}
+																</Badge>
+																<Check
+																	className={cn(
+																		"ml-auto size-4",
+																		isSelected ? "opacity-100" : "opacity-0",
+																	)}
+																/>
+															</CommandItem>
+														);
+													})}
+												</CommandGroup>
+											)}
+										</CommandList>
+									</Command>
+								</PopoverContent>
+							</Popover>
+
+							{selectedNetworks.length > 0 && (
+								<div className="flex flex-wrap gap-1.5">
+									{selectedNetworks.map((n) => (
+										<Badge key={n.networkId} variant="secondary">
+											{n.name}
+										</Badge>
+									))}
+								</div>
+							)}
+						</FormItem>
+					);
+				}}
+			/>
+		</div>
+	);
+};
--- a/apps/dokploy/components/dashboard/networks/assign-networks.tsx
+++ b/apps/dokploy/components/dashboard/networks/assign-networks.tsx
@@ -0,0 +1,355 @@
+import { Check, ChevronsUpDown, X } from "lucide-react";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+} from "@/components/ui/command";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+import { api } from "@/utils/api";
+
+type ServiceType =
+	| "application"
+	| "postgres"
+	| "mysql"
+	| "mariadb"
+	| "mongo"
+	| "redis"
+	| "libsql";
+
+interface Props {
+	id: string;
+	type: ServiceType;
+}
+
+export const AssignNetworks = ({ id, type }: Props) => {
+	const [open, setOpen] = useState(false);
+	const [selected, setSelected] = useState<string[]>([]);
+	const [detached, setDetached] = useState(false);
+
+	const {
+		service,
+		serverId,
+		networkIds,
+		detachDokployNetwork,
+		updateAsync,
+		isUpdating,
+		refetch,
+	} = useServiceNetworks(id, type);
+
+	const { data: networks } = api.network.all.useQuery(
+		{ serverId: serverId ?? undefined },
+		{ enabled: service !== undefined },
+	);
+
+	const { data: applicationDomains } = api.domain.byApplicationId.useQuery(
+		{ applicationId: id },
+		{ enabled: type === "application" },
+	);
+	const hasDomains = (applicationDomains?.length ?? 0) > 0;
+
+	useEffect(() => {
+		setSelected(networkIds ?? []);
+		setDetached(detachDokployNetwork ?? false);
+	}, [networkIds, detachDokployNetwork]);
+
+	const availableNetworks = (networks ?? []).filter(
+		(n) => n.driver === "overlay",
+	);
+	const selectedNetworks = availableNetworks.filter((n) =>
+		selected.includes(n.networkId),
+	);
+	const isDirty =
+		selected.length !== (networkIds?.length ?? 0) ||
+		selected.some((networkId) => !networkIds?.includes(networkId)) ||
+		detached !== detachDokployNetwork;
+
+	const toggle = (networkId: string) => {
+		setSelected((prev) =>
+			prev.includes(networkId)
+				? prev.filter((id) => id !== networkId)
+				: [...prev, networkId],
+		);
+	};
+
+	const onSave = async () => {
+		try {
+			await updateAsync({
+				networkIds: selected,
+				detachDokployNetwork: detached,
+			});
+			toast.success("Networks updated. Redeploy the service to apply them.");
+			await refetch();
+		} catch (error) {
+			toast.error("Error updating networks", {
+				description: error instanceof Error ? error.message : "Unknown error",
+			});
+		}
+	};
+
+	return (
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
+				<div className="flex flex-col gap-1">
+					<CardTitle className="text-xl">Networks</CardTitle>
+					<CardDescription>
+						Attach additional Docker networks to this service so it can reach
+						services on those networks. Takes effect on the next deploy.
+					</CardDescription>
+				</div>
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				<div className="flex flex-row items-start justify-between gap-3 rounded-lg border p-4">
+					<div className="space-y-1 pr-1">
+						<div className="flex items-center gap-2">
+							<span className="text-sm font-medium">
+								Detach from dokploy-network
+							</span>
+							<Badge variant="secondary">dokploy-network</Badge>
+						</div>
+						<p className="text-sm text-muted-foreground">
+							By default the service joins the shared dokploy-network. Detach it
+							to keep it reachable only through the networks you attach below.
+						</p>
+					</div>
+					<Switch checked={detached} onCheckedChange={setDetached} />
+				</div>
+
+				{detached && hasDomains && (
+					<AlertBlock type="warning">
+						Warning: this service has domains. Detaching it from dokploy-network
+						will break Traefik routing, and its domains will stop working.
+					</AlertBlock>
+				)}
+
+				{detached && !hasDomains && selected.length === 0 && (
+					<AlertBlock type="warning">
+						This service is detached from dokploy-network but has no other
+						network attached. It would be unreachable, so dokploy-network will
+						be kept until you attach a network below.
+					</AlertBlock>
+				)}
+
+				<Popover open={open} onOpenChange={setOpen}>
+					<PopoverTrigger asChild>
+						<Button
+							variant="outline"
+							aria-expanded={open}
+							className="w-full justify-between"
+						>
+							<span className="text-muted-foreground">
+								{selectedNetworks.length > 0
+									? `${selectedNetworks.length} network${
+											selectedNetworks.length > 1 ? "s" : ""
+										} selected`
+									: "Select networks..."}
+							</span>
+							<ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
+						</Button>
+					</PopoverTrigger>
+					<PopoverContent
+						className="w-[var(--radix-popover-trigger-width)] p-0"
+						align="start"
+					>
+						<Command>
+							<CommandInput placeholder="Search networks..." className="h-9" />
+							<CommandList className="max-h-60">
+								{availableNetworks.length === 0 ? (
+									<div className="py-6 text-center text-sm text-muted-foreground">
+										No overlay networks on this server.
+									</div>
+								) : (
+									<>
+										<CommandEmpty className="py-6 text-center text-sm text-muted-foreground">
+											No networks found.
+										</CommandEmpty>
+										<CommandGroup>
+											{availableNetworks.map((n) => {
+												const isSelected = selected.includes(n.networkId);
+												return (
+													<CommandItem
+														key={n.networkId}
+														value={n.name}
+														onSelect={() => toggle(n.networkId)}
+														className="cursor-pointer"
+													>
+														<Checkbox
+															checked={isSelected}
+															className="mr-2"
+															onCheckedChange={() => toggle(n.networkId)}
+														/>
+														<span>{n.name}</span>
+														<Badge variant="outline" className="ml-2">
+															{n.driver}
+														</Badge>
+														<Check
+															className={cn(
+																"ml-auto size-4",
+																isSelected ? "opacity-100" : "opacity-0",
+															)}
+														/>
+													</CommandItem>
+												);
+											})}
+										</CommandGroup>
+									</>
+								)}
+							</CommandList>
+						</Command>
+					</PopoverContent>
+				</Popover>
+
+				{selectedNetworks.length > 0 && (
+					<div className="flex flex-wrap gap-1.5">
+						{selectedNetworks.map((n) => (
+							<Badge
+								key={n.networkId}
+								variant="secondary"
+								className="flex items-center gap-1 pr-1"
+							>
+								{n.name}
+								<button
+									type="button"
+									onClick={() => toggle(n.networkId)}
+									className="ml-0.5 rounded-full outline-hidden hover:opacity-70"
+								>
+									<X className="size-3" />
+									<span className="sr-only">Remove {n.name}</span>
+								</button>
+							</Badge>
+						))}
+					</div>
+				)}
+
+				<div className="flex justify-end">
+					<Button disabled={!isDirty} isLoading={isUpdating} onClick={onSave}>
+						Save
+					</Button>
+				</div>
+			</CardContent>
+		</Card>
+	);
+};
+
+// Maps a service type to its one-query and update-mutation, normalizing the
+// per-type id field name and the networkIds field.
+const useServiceNetworks = (id: string, type: ServiceType) => {
+	const application = api.application.one.useQuery(
+		{ applicationId: id },
+		{ enabled: type === "application" },
+	);
+	const postgres = api.postgres.one.useQuery(
+		{ postgresId: id },
+		{ enabled: type === "postgres" },
+	);
+	const mysql = api.mysql.one.useQuery(
+		{ mysqlId: id },
+		{ enabled: type === "mysql" },
+	);
+	const mariadb = api.mariadb.one.useQuery(
+		{ mariadbId: id },
+		{ enabled: type === "mariadb" },
+	);
+	const mongo = api.mongo.one.useQuery(
+		{ mongoId: id },
+		{ enabled: type === "mongo" },
+	);
+	const redis = api.redis.one.useQuery(
+		{ redisId: id },
+		{ enabled: type === "redis" },
+	);
+	const libsql = api.libsql.one.useQuery(
+		{ libsqlId: id },
+		{ enabled: type === "libsql" },
+	);
+	const applicationUpdate = api.application.update.useMutation();
+	const postgresUpdate = api.postgres.update.useMutation();
+	const mysqlUpdate = api.mysql.update.useMutation();
+	const mariadbUpdate = api.mariadb.update.useMutation();
+	const mongoUpdate = api.mongo.update.useMutation();
+	const redisUpdate = api.redis.update.useMutation();
+	const libsqlUpdate = api.libsql.update.useMutation();
+
+	const map = {
+		application: {
+			query: application,
+			mutation: applicationUpdate,
+			save: (payload: SavePayload) =>
+				applicationUpdate.mutateAsync({ applicationId: id, ...payload }),
+		},
+		postgres: {
+			query: postgres,
+			mutation: postgresUpdate,
+			save: (payload: SavePayload) =>
+				postgresUpdate.mutateAsync({ postgresId: id, ...payload }),
+		},
+		mysql: {
+			query: mysql,
+			mutation: mysqlUpdate,
+			save: (payload: SavePayload) =>
+				mysqlUpdate.mutateAsync({ mysqlId: id, ...payload }),
+		},
+		mariadb: {
+			query: mariadb,
+			mutation: mariadbUpdate,
+			save: (payload: SavePayload) =>
+				mariadbUpdate.mutateAsync({ mariadbId: id, ...payload }),
+		},
+		mongo: {
+			query: mongo,
+			mutation: mongoUpdate,
+			save: (payload: SavePayload) =>
+				mongoUpdate.mutateAsync({ mongoId: id, ...payload }),
+		},
+		redis: {
+			query: redis,
+			mutation: redisUpdate,
+			save: (payload: SavePayload) =>
+				redisUpdate.mutateAsync({ redisId: id, ...payload }),
+		},
+		libsql: {
+			query: libsql,
+			mutation: libsqlUpdate,
+			save: (payload: SavePayload) =>
+				libsqlUpdate.mutateAsync({ libsqlId: id, ...payload }),
+		},
+	}[type];
+
+	const service = map.query.data;
+
+	return {
+		service,
+		serverId: service?.serverId ?? null,
+		networkIds: service?.networkIds ?? [],
+		detachDokployNetwork: service?.detachDokployNetwork ?? false,
+		updateAsync: map.save,
+		isUpdating: map.mutation.isPending,
+		refetch: map.query.refetch,
+	};
+};
+
+type SavePayload = {
+	networkIds: string[];
+	detachDokployNetwork: boolean;
+};
--- a/apps/dokploy/components/dashboard/requests/requests-table.tsx
+++ b/apps/dokploy/components/dashboard/requests/requests-table.tsx
@@ -328,7 +328,7 @@ export const RequestsTable = ({ dateRange }: RequestsTableProps) => {
 				open={!!selectedRow}
 				onOpenChange={(_open) => setSelectedRow(undefined)}
 			>
-				<SheetContent className="sm:max-w-[740px]  flex flex-col">
+				<SheetContent className="w-full sm:max-w-[740px]! flex flex-col">
 					<SheetHeader>
 						<SheetTitle>Request log</SheetTitle>
 						<SheetDescription>
--- a/apps/dokploy/components/dashboard/shared/show-database-advanced-settings.tsx
+++ b/apps/dokploy/components/dashboard/shared/show-database-advanced-settings.tsx
@@ -1,5 +1,6 @@
 import { ShowResources } from "@/components/dashboard/application/advanced/show-resources";
 import { ShowVolumes } from "@/components/dashboard/application/advanced/volumes/show-volumes";
+import { AssignNetworks } from "@/components/dashboard/networks/assign-networks";
 import { ShowCustomCommand } from "@/components/dashboard/postgres/advanced/show-custom-command";
 import { ShowClusterSettings } from "../application/advanced/cluster/show-cluster-settings";
 import { RebuildDatabase } from "./rebuild-database";
@@ -21,6 +22,7 @@ export const ShowDatabaseAdvancedSettings = ({ id, type }: Props) => {
 				<ShowClusterSettings id={id} type={type} />
 			) : null}
 			<ShowVolumes id={id} type={type} />
+			<AssignNetworks id={id} type={type} />
 			<ShowResources id={id} type={type} />
 			<RebuildDatabase id={id} type={type} />
 		</div>
--- a/apps/dokploy/components/shared/drawer-logs.tsx
+++ b/apps/dokploy/components/shared/drawer-logs.tsx
@@ -47,7 +47,7 @@ export const DrawerLogs = ({ isOpen, onClose, filteredLogs }: Props) => {
 				onClose();
 			}}
 		>
-			<SheetContent className="sm:max-w-[740px] flex flex-col">
+			<SheetContent className="w-full sm:max-w-[740px]! flex flex-col">
 				<SheetHeader>
 					<SheetTitle>Deployment Logs</SheetTitle>
 					<SheetDescription>Details of the request log entry.</SheetDescription>
--- a/apps/dokploy/components/ui/textarea.tsx
+++ b/apps/dokploy/components/ui/textarea.tsx
@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
 		<textarea
 			data-slot="textarea"
 			className={cn(
-				"flex field-sizing-content min-h-[80px] w-full rounded-lg border border-input bg-transparent px-3 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+				"flex field-sizing-content min-h-[80px] w-full [overflow-wrap:anywhere] rounded-lg border border-input bg-transparent px-3 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
 				className,
 			)}
 			{...props}
--- a/apps/dokploy/drizzle/0175_gray_dreaming_celestial.sql
+++ b/apps/dokploy/drizzle/0175_gray_dreaming_celestial.sql
@@ -14,11 +14,19 @@ CREATE TABLE "network" (
 );
 --> statement-breakpoint
 ALTER TABLE "application" ADD COLUMN "networkIds" text[] DEFAULT '{}';--> statement-breakpoint
-ALTER TABLE "compose" ADD COLUMN "networkIds" text[] DEFAULT '{}';--> statement-breakpoint
+ALTER TABLE "application" ADD COLUMN "detachDokployNetwork" boolean DEFAULT false NOT NULL;--> statement-breakpoint
+ALTER TABLE "compose" ADD COLUMN "serviceNetworks" jsonb DEFAULT '[]'::jsonb;--> statement-breakpoint
+ALTER TABLE "libsql" ADD COLUMN "networkIds" text[] DEFAULT '{}';--> statement-breakpoint
+ALTER TABLE "libsql" ADD COLUMN "detachDokployNetwork" boolean DEFAULT false NOT NULL;--> statement-breakpoint
 ALTER TABLE "mariadb" ADD COLUMN "networkIds" text[] DEFAULT '{}';--> statement-breakpoint
+ALTER TABLE "mariadb" ADD COLUMN "detachDokployNetwork" boolean DEFAULT false NOT NULL;--> statement-breakpoint
 ALTER TABLE "mongo" ADD COLUMN "networkIds" text[] DEFAULT '{}';--> statement-breakpoint
+ALTER TABLE "mongo" ADD COLUMN "detachDokployNetwork" boolean DEFAULT false NOT NULL;--> statement-breakpoint
 ALTER TABLE "mysql" ADD COLUMN "networkIds" text[] DEFAULT '{}';--> statement-breakpoint
+ALTER TABLE "mysql" ADD COLUMN "detachDokployNetwork" boolean DEFAULT false NOT NULL;--> statement-breakpoint
 ALTER TABLE "postgres" ADD COLUMN "networkIds" text[] DEFAULT '{}';--> statement-breakpoint
+ALTER TABLE "postgres" ADD COLUMN "detachDokployNetwork" boolean DEFAULT false NOT NULL;--> statement-breakpoint
 ALTER TABLE "redis" ADD COLUMN "networkIds" text[] DEFAULT '{}';--> statement-breakpoint
+ALTER TABLE "redis" ADD COLUMN "detachDokployNetwork" boolean DEFAULT false NOT NULL;--> statement-breakpoint
 ALTER TABLE "network" ADD CONSTRAINT "network_organizationId_organization_id_fk" FOREIGN KEY ("organizationId") REFERENCES "public"."organization"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
 ALTER TABLE "network" ADD CONSTRAINT "network_serverId_server_serverId_fk" FOREIGN KEY ("serverId") REFERENCES "public"."server"("serverId") ON DELETE cascade ON UPDATE no action;
--- a/apps/dokploy/drizzle/meta/0175_snapshot.json
+++ b/apps/dokploy/drizzle/meta/0175_snapshot.json
@@ -1,5 +1,5 @@
 {
-  "id": "957b942e-9aeb-4551-8d5d-1174eec70fd6",
+  "id": "7a9f40d5-02c9-4ac5-8b88-08bdbdd02aac",
  "prevId": "daaa9837-09f3-452c-b5ba-232c3d6eeca2",
  "version": "7",
  "dialect": "postgresql",
@@ -1590,6 +1590,13 @@
          "primaryKey": false,
          "notNull": false,
          "default": "'{}'"
+        },
+        "detachDokployNetwork": {
+          "name": "detachDokployNetwork",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
        }
      },
      "indexes": {},
@@ -2610,12 +2617,12 @@
          "primaryKey": false,
          "notNull": false
        },
-        "networkIds": {
-          "name": "networkIds",
-          "type": "text[]",
+        "serviceNetworks": {
+          "name": "serviceNetworks",
+          "type": "jsonb",
          "primaryKey": false,
          "notNull": false,
-          "default": "'{}'"
+          "default": "'[]'::jsonb"
        }
      },
      "indexes": {},
@@ -3977,6 +3984,20 @@
          "notNull": true,
          "default": 1
        },
+        "networkIds": {
+          "name": "networkIds",
+          "type": "text[]",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "'{}'"
+        },
+        "detachDokployNetwork": {
+          "name": "detachDokployNetwork",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
        "createdAt": {
          "name": "createdAt",
          "type": "text",
@@ -4250,6 +4271,13 @@
          "primaryKey": false,
          "notNull": false,
          "default": "'{}'"
+        },
+        "detachDokployNetwork": {
+          "name": "detachDokployNetwork",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
        }
      },
      "indexes": {},
@@ -4502,6 +4530,13 @@
          "primaryKey": false,
          "notNull": false,
          "default": "'{}'"
+        },
+        "detachDokployNetwork": {
+          "name": "detachDokployNetwork",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
        }
      },
      "indexes": {},
@@ -4764,119 +4799,6 @@
      "checkConstraints": {},
      "isRLSEnabled": false
    },
-    "public.network": {
-      "name": "network",
-      "schema": "",
-      "columns": {
-        "networkId": {
-          "name": "networkId",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "name": {
-          "name": "name",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "driver": {
-          "name": "driver",
-          "type": "networkDriver",
-          "typeSchema": "public",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "'bridge'"
-        },
-        "internal": {
-          "name": "internal",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": true,
-          "default": false
-        },
-        "attachable": {
-          "name": "attachable",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": true,
-          "default": false
-        },
-        "enableIPv4": {
-          "name": "enableIPv4",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": true,
-          "default": true
-        },
-        "enableIPv6": {
-          "name": "enableIPv6",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": true,
-          "default": false
-        },
-        "ipam": {
-          "name": "ipam",
-          "type": "jsonb",
-          "primaryKey": false,
-          "notNull": false,
-          "default": "'{}'::jsonb"
-        },
-        "createdAt": {
-          "name": "createdAt",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "organizationId": {
-          "name": "organizationId",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "serverId": {
-          "name": "serverId",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "network_organizationId_organization_id_fk": {
-          "name": "network_organizationId_organization_id_fk",
-          "tableFrom": "network",
-          "tableTo": "organization",
-          "columnsFrom": [
-            "organizationId"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "network_serverId_server_serverId_fk": {
-          "name": "network_serverId_server_serverId_fk",
-          "tableFrom": "network",
-          "tableTo": "server",
-          "columnsFrom": [
-            "serverId"
-          ],
-          "columnsTo": [
-            "serverId"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
    "public.mysql": {
      "name": "mysql",
      "schema": "",
@@ -5088,6 +5010,13 @@
          "primaryKey": false,
          "notNull": false,
          "default": "'{}'"
+        },
+        "detachDokployNetwork": {
+          "name": "detachDokployNetwork",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
        }
      },
      "indexes": {},
@@ -5133,6 +5062,119 @@
      "checkConstraints": {},
      "isRLSEnabled": false
    },
+    "public.network": {
+      "name": "network",
+      "schema": "",
+      "columns": {
+        "networkId": {
+          "name": "networkId",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "driver": {
+          "name": "driver",
+          "type": "networkDriver",
+          "typeSchema": "public",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'bridge'"
+        },
+        "internal": {
+          "name": "internal",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "attachable": {
+          "name": "attachable",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "enableIPv4": {
+          "name": "enableIPv4",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": true
+        },
+        "enableIPv6": {
+          "name": "enableIPv6",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "ipam": {
+          "name": "ipam",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "'{}'::jsonb"
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "organizationId": {
+          "name": "organizationId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "serverId": {
+          "name": "serverId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "network_organizationId_organization_id_fk": {
+          "name": "network_organizationId_organization_id_fk",
+          "tableFrom": "network",
+          "tableTo": "organization",
+          "columnsFrom": [
+            "organizationId"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "network_serverId_server_serverId_fk": {
+          "name": "network_serverId_server_serverId_fk",
+          "tableFrom": "network",
+          "tableTo": "server",
+          "columnsFrom": [
+            "serverId"
+          ],
+          "columnsTo": [
+            "serverId"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
    "public.custom": {
      "name": "custom",
      "schema": "",
@@ -6307,6 +6349,13 @@
          "primaryKey": false,
          "notNull": false,
          "default": "'{}'"
+        },
+        "detachDokployNetwork": {
+          "name": "detachDokployNetwork",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
        }
      },
      "indexes": {},
@@ -6807,6 +6856,13 @@
          "primaryKey": false,
          "notNull": false,
          "default": "'{}'"
+        },
+        "detachDokployNetwork": {
+          "name": "detachDokployNetwork",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
        }
      },
      "indexes": {},
--- a/apps/dokploy/drizzle/meta/_journal.json
+++ b/apps/dokploy/drizzle/meta/_journal.json
@@ -1230,8 +1230,8 @@
    {
      "idx": 175,
      "version": "7",
-      "when": 1784692797270,
-      "tag": "0175_gray_dreaming_celestial",
+      "when": 1784965709630,
+      "tag": "0175_fantastic_peter_quill",
      "breakpoints": true
    }
  ]
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/application/[applicationId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/application/[applicationId].tsx
@@ -35,6 +35,7 @@ import { ShowVolumeBackups } from "@/components/dashboard/application/volume-bac
 import { DeleteService } from "@/components/dashboard/compose/delete-service";
 import { ContainerFreeMonitoring } from "@/components/dashboard/monitoring/free/container/show-free-container-monitoring";
 import { ContainerPaidMonitoring } from "@/components/dashboard/monitoring/paid/container/show-paid-container-monitoring";
+import { AssignNetworks } from "@/components/dashboard/networks/assign-networks";
 import { DashboardLayout } from "@/components/layouts/dashboard-layout";
 import { AdvanceBreadcrumb } from "@/components/shared/advance-breadcrumb";
 import { StatusTooltip } from "@/components/shared/status-tooltip";
@@ -418,6 +419,7 @@ const Service = (
 												<ShowBuildServer applicationId={applicationId} />
 												<ShowResources id={applicationId} type="application" />
 												<ShowVolumes id={applicationId} type="application" />
+												<AssignNetworks id={applicationId} type="application" />
 												<ShowRedirects applicationId={applicationId} />
 												<ShowSecurity applicationId={applicationId} />
 												<ShowPorts applicationId={applicationId} />
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/compose/[composeId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/compose/[composeId].tsx
@@ -31,6 +31,7 @@ import { UpdateCompose } from "@/components/dashboard/compose/update-compose";
 import { ShowBackups } from "@/components/dashboard/database/backups/show-backups";
 import { ComposeFreeMonitoring } from "@/components/dashboard/monitoring/free/container/show-free-compose-monitoring";
 import { ComposePaidMonitoring } from "@/components/dashboard/monitoring/paid/container/show-paid-compose-monitoring";
+import { AssignComposeNetworks } from "@/components/dashboard/networks/assign-compose-networks";
 import { DashboardLayout } from "@/components/layouts/dashboard-layout";
 import { AdvanceBreadcrumb } from "@/components/shared/advance-breadcrumb";
 import { StatusTooltip } from "@/components/shared/status-tooltip";
@@ -427,6 +428,7 @@ const Service = (
 												<AddCommandCompose composeId={composeId} />
 												<ShowVolumes id={composeId} type="compose" />
 												<ShowImport composeId={composeId} />
+												<AssignComposeNetworks composeId={composeId} />
 												<IsolatedDeploymentTab composeId={composeId} />
 											</div>
 										</TabsContent>
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/libsql/[libsqlId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/libsql/[libsqlId].tsx
@@ -185,7 +185,7 @@ const Libsql = (
 										router.push(newPath, undefined, { shallow: true });
 									}}
 								>
-									<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-scroll">
+									<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-auto">
 										<TabsList
 											className={cn(
 												"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mariadb/[mariadbId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mariadb/[mariadbId].tsx
@@ -199,7 +199,7 @@ const Mariadb = (
 										router.push(newPath, undefined, { shallow: true });
 									}}
 								>
-									<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-scroll">
+									<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-auto">
 										<TabsList
 											className={cn(
 												"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mongo/[mongoId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mongo/[mongoId].tsx
@@ -199,7 +199,7 @@ const Mongo = (
 										router.push(newPath, undefined, { shallow: true });
 									}}
 								>
-									<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-scroll">
+									<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-auto">
 										<TabsList
 											className={cn(
 												"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mysql/[mysqlId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mysql/[mysqlId].tsx
@@ -199,7 +199,7 @@ const MySql = (
 											router.push(newPath, undefined, { shallow: true });
 										}}
 									>
-										<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-scroll">
+										<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-auto">
 											<TabsList
 												className={cn(
 													"md:grid md:w-fit max-md:overflow-y-scroll justify-start ",
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/postgres/[postgresId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/postgres/[postgresId].tsx
@@ -200,7 +200,7 @@ const Postgresql = (
 										});
 									}}
 								>
-									<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-scroll">
+									<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-auto">
 										<TabsList
 											className={cn(
 												"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/redis/[redisId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/redis/[redisId].tsx
@@ -198,7 +198,7 @@ const Redis = (
 										router.push(newPath, undefined, { shallow: true });
 									}}
 								>
-									<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-scroll">
+									<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-auto">
 										<TabsList
 											className={cn(
 												"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
--- a/apps/dokploy/server/api/routers/ai.ts
+++ b/apps/dokploy/server/api/routers/ai.ts
@@ -362,7 +362,6 @@ ${input.logs}`,
 				name: input.name,
 				sourceType: "raw",
 				appName: `${projectName}-${generatePassword(6)}`,
-				isolatedDeployment: true,
 				environmentId: input.environmentId,
 			});

--- a/apps/dokploy/server/api/routers/compose.ts
+++ b/apps/dokploy/server/api/routers/compose.ts
@@ -639,7 +639,6 @@ export const composeRouter = createTRPCRouter({
 				name: input.id,
 				sourceType: "raw",
 				appName: appName,
-				isolatedDeployment: template.config.config?.isolated !== false,
 			});

 			await addNewService(ctx, compose.composeId);
@@ -997,7 +996,6 @@ export const composeRouter = createTRPCRouter({
 					composeFile: templateData.compose,
 					sourceType: "raw",
 					env: processedTemplate.envs?.join("\n"),
-					isolatedDeployment: true,
 				});

 				if (processedTemplate.mounts && processedTemplate.mounts.length > 0) {
--- a/apps/dokploy/server/api/routers/environment.ts
+++ b/apps/dokploy/server/api/routers/environment.ts
@@ -153,6 +153,7 @@ export const environmentRouter = createTRPCRouter({

 				return environments;
 			} catch (error) {
+				console.log(error);
 				throw new TRPCError({
 					code: "BAD_REQUEST",
 					message: `Error fetching environments: ${error instanceof Error ? error.message : error}`,
--- a/apps/dokploy/server/api/routers/schedule.ts
+++ b/apps/dokploy/server/api/routers/schedule.ts
@@ -259,9 +259,13 @@ export const scheduleRouter = createTRPCRouter({
 				where: where[input.scheduleType],
 				orderBy: [asc(schedules.createdAt)],
 				with: {
-					application: true,
+					application: {
+						columns: { applicationId: true, appName: true, name: true, serverId: true },
+					},
 					server: true,
-					compose: true,
+					compose: {
+						columns: { composeId: true, appName: true, name: true, serverId: true },
+					},
 					deployments: {
 						orderBy: [desc(deployments.createdAt)],
 					},
--- a/apps/dokploy/server/api/routers/volume-backups.ts
+++ b/apps/dokploy/server/api/routers/volume-backups.ts
@@ -57,14 +57,16 @@ export const volumeBackupsRouter = createTRPCRouter({
 			return await db.query.volumeBackups.findMany({
 				where: eq(volumeBackups[`${input.volumeBackupType}Id`], input.id),
 				with: {
-					application: true,
-					postgres: true,
-					mysql: true,
-					mariadb: true,
-					mongo: true,
-					redis: true,
-					compose: true,
-					libsql: true,
+					application: {
+						columns: { applicationId: true, appName: true, serverId: true },
+					},
+					postgres: { columns: { postgresId: true, appName: true, serverId: true } },
+					mysql: { columns: { mysqlId: true, appName: true, serverId: true } },
+					mariadb: { columns: { mariadbId: true, appName: true, serverId: true } },
+					mongo: { columns: { mongoId: true, appName: true, serverId: true } },
+					redis: { columns: { redisId: true, appName: true, serverId: true } },
+					compose: { columns: { composeId: true, appName: true, serverId: true } },
+					libsql: { columns: { libsqlId: true, appName: true, serverId: true } },
 				},
 				orderBy: [desc(volumeBackups.createdAt)],
 			});