From e5fcc10db2a246b9a1e7ff0ec552b7b0a4af690b Mon Sep 17 00:00:00 2001
From: Mauricio Siu <siumauricio@icloud.com>
Date: Tue, 20 Jan 2026 16:01:43 +0100
Subject: [PATCH 1/4] feat(cluster): implement advanced swarm settings forms

- Added multiple forms for managing swarm settings including Health Check, Restart Policy, Placement, Update Config, Rollback Config, Mode, Labels, Stop Grace Period, and Endpoint Spec.
- Introduced utility functions for filtering empty values and checking for values to save.
- Enhanced the UI for better navigation and form handling within the dashboard.
- Integrated form validation using Zod and React Hook Form for improved user experience.
---
 .../cluster/modify-swarm-settings.tsx         | 1006 ++---------------
 .../swarm-forms/endpoint-spec-form.tsx        |  151 +++
 .../cluster/swarm-forms/health-check-form.tsx |  267 +++++
 .../advanced/cluster/swarm-forms/index.ts     |   10 +
 .../cluster/swarm-forms/labels-form.tsx       |  199 ++++
 .../cluster/swarm-forms/mode-form.tsx         |  195 ++++
 .../cluster/swarm-forms/placement-form.tsx    |  342 ++++++
 .../swarm-forms/restart-policy-form.tsx       |  219 ++++
 .../swarm-forms/rollback-config-form.tsx      |  257 +++++
 .../swarm-forms/stop-grace-period-form.tsx    |  152 +++
 .../swarm-forms/update-config-form.tsx        |  264 +++++
 .../advanced/cluster/swarm-forms/utils.ts     |   26 +
 12 files changed, 2192 insertions(+), 896 deletions(-)
 create mode 100644 apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/endpoint-spec-form.tsx
 create mode 100644 apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/health-check-form.tsx
 create mode 100644 apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/index.ts
 create mode 100644 apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/labels-form.tsx
 create mode 100644 apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/mode-form.tsx
 create mode 100644 apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/placement-form.tsx
 create mode 100644 apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/restart-policy-form.tsx
 create mode 100644 apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/rollback-config-form.tsx
 create mode 100644 apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/stop-grace-period-form.tsx
 create mode 100644 apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/update-config-form.tsx
 create mode 100644 apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/utils.ts

diff --git a/apps/dokploy/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx b/apps/dokploy/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx
index 739bd87a5..5721132a7 100644
--- a/apps/dokploy/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx
@@ -1,205 +1,73 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import { HelpCircle, Settings } from "lucide-react";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
+import { Settings } from "lucide-react";
+import { useState } from "react";
 import { AlertBlock } from "@/components/shared/alert-block";
-import { CodeEditor } from "@/components/shared/code-editor";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
 	DialogContent,
 	DialogDescription,
-	DialogFooter,
 	DialogHeader,
 	DialogTitle,
 	DialogTrigger,
 } from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
 import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { api } from "@/utils/api";
+	EndpointSpecForm,
+	HealthCheckForm,
+	LabelsForm,
+	ModeForm,
+	PlacementForm,
+	RestartPolicyForm,
+	RollbackConfigForm,
+	StopGracePeriodForm,
+	UpdateConfigForm,
+} from "./swarm-forms";
 
-const HealthCheckSwarmSchema = z
-	.object({
-		Test: z.array(z.string()).optional(),
-		Interval: z.number().optional(),
-		Timeout: z.number().optional(),
-		StartPeriod: z.number().optional(),
-		Retries: z.number().optional(),
-	})
-	.strict();
-
-const RestartPolicySwarmSchema = z
-	.object({
-		Condition: z.string().optional(),
-		Delay: z.number().optional(),
-		MaxAttempts: z.number().optional(),
-		Window: z.number().optional(),
-	})
-	.strict();
-
-const PreferenceSchema = z
-	.object({
-		Spread: z.object({
-			SpreadDescriptor: z.string(),
-		}),
-	})
-	.strict();
-
-const PlatformSchema = z
-	.object({
-		Architecture: z.string(),
-		OS: z.string(),
-	})
-	.strict();
-
-const PlacementSwarmSchema = z
-	.object({
-		Constraints: z.array(z.string()).optional(),
-		Preferences: z.array(PreferenceSchema).optional(),
-		MaxReplicas: z.number().optional(),
-		Platforms: z.array(PlatformSchema).optional(),
-	})
-	.strict();
-
-const UpdateConfigSwarmSchema = z
-	.object({
-		Parallelism: z.number(),
-		Delay: z.number().optional(),
-		FailureAction: z.string().optional(),
-		Monitor: z.number().optional(),
-		MaxFailureRatio: z.number().optional(),
-		Order: z.string(),
-	})
-	.strict();
-
-const ReplicatedSchema = z
-	.object({
-		Replicas: z.number().optional(),
-	})
-	.strict();
-
-const ReplicatedJobSchema = z
-	.object({
-		MaxConcurrent: z.number().optional(),
-		TotalCompletions: z.number().optional(),
-	})
-	.strict();
-
-const ServiceModeSwarmSchema = z
-	.object({
-		Replicated: ReplicatedSchema.optional(),
-		Global: z.object({}).optional(),
-		ReplicatedJob: ReplicatedJobSchema.optional(),
-		GlobalJob: z.object({}).optional(),
-	})
-	.strict();
-
-const NetworkSwarmSchema = z.array(
-	z
-		.object({
-			Target: z.string().optional(),
-			Aliases: z.array(z.string()).optional(),
-			DriverOpts: z.object({}).optional(),
-		})
-		.strict(),
-);
-
-const LabelsSwarmSchema = z.record(z.string());
-
-const EndpointPortConfigSwarmSchema = z
-	.object({
-		Protocol: z.string().optional(),
-		TargetPort: z.number().optional(),
-		PublishedPort: z.number().optional(),
-		PublishMode: z.string().optional(),
-	})
-	.strict();
-
-const EndpointSpecSwarmSchema = z
-	.object({
-		Mode: z.string().optional(),
-		Ports: z.array(EndpointPortConfigSwarmSchema).optional(),
-	})
-	.strict();
-
-const createStringToJSONSchema = (schema: z.ZodTypeAny) => {
-	return z
-		.string()
-		.transform((str, ctx) => {
-			if (str === null || str === "") {
-				return null;
-			}
-			try {
-				return JSON.parse(str);
-			} catch {
-				ctx.addIssue({ code: "custom", message: "Invalid JSON format" });
-				return z.NEVER;
-			}
-		})
-		.superRefine((data, ctx) => {
-			if (data === null) {
-				return;
-			}
-
-			if (Object.keys(data).length === 0) {
-				ctx.addIssue({
-					code: z.ZodIssueCode.custom,
-					message: "Object cannot be empty",
-				});
-				return;
-			}
-
-			const parseResult = schema.safeParse(data);
-			if (!parseResult.success) {
-				for (const error of parseResult.error.issues) {
-					const path = error.path.join(".");
-					ctx.addIssue({
-						code: z.ZodIssueCode.custom,
-						message: `${path} ${error.message}`,
-					});
-				}
-			}
-		});
+type MenuItem = {
+	id: string;
+	label: string;
+	description: string;
 };
 
-const addSwarmSettings = z.object({
-	healthCheckSwarm: createStringToJSONSchema(HealthCheckSwarmSchema).nullable(),
-	restartPolicySwarm: createStringToJSONSchema(
-		RestartPolicySwarmSchema,
-	).nullable(),
-	placementSwarm: createStringToJSONSchema(PlacementSwarmSchema).nullable(),
-	updateConfigSwarm: createStringToJSONSchema(
-		UpdateConfigSwarmSchema,
-	).nullable(),
-	rollbackConfigSwarm: createStringToJSONSchema(
-		UpdateConfigSwarmSchema,
-	).nullable(),
-	modeSwarm: createStringToJSONSchema(ServiceModeSwarmSchema).nullable(),
-	labelsSwarm: createStringToJSONSchema(LabelsSwarmSchema).nullable(),
-	networkSwarm: createStringToJSONSchema(NetworkSwarmSchema).nullable(),
-	stopGracePeriodSwarm: z.bigint().nullable(),
-	endpointSpecSwarm: createStringToJSONSchema(
-		EndpointSpecSwarmSchema,
-	).nullable(),
-});
-
-type AddSwarmSettings = z.infer<typeof addSwarmSettings>;
+const menuItems: MenuItem[] = [
+	{
+		id: "health-check",
+		label: "Health Check",
+		description: "Configure health check settings",
+	},
+	{
+		id: "restart-policy",
+		label: "Restart Policy",
+		description: "Configure restart policy",
+	},
+	{
+		id: "placement",
+		label: "Placement",
+		description: "Configure placement constraints",
+	},
+	{
+		id: "update-config",
+		label: "Update Config",
+		description: "Configure update strategy",
+	},
+	{
+		id: "rollback-config",
+		label: "Rollback Config",
+		description: "Configure rollback strategy",
+	},
+	{ id: "mode", label: "Mode", description: "Configure service mode" },
+	{ id: "labels", label: "Labels", description: "Configure service labels" },
+	{
+		id: "stop-grace-period",
+		label: "Stop Grace Period",
+		description: "Configure stop grace period",
+	},
+	{
+		id: "endpoint-spec",
+		label: "Endpoint Spec",
+		description: "Configure endpoint specification",
+	},
+];
 
 const hasStopGracePeriodSwarm = (
 	value: unknown,
@@ -214,137 +82,23 @@ interface Props {
 }
 
 export const AddSwarmSettings = ({ id, type }: Props) => {
-	const queryMap = {
-		postgres: () =>
-			api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
-		redis: () => api.redis.one.useQuery({ redisId: id }, { enabled: !!id }),
-		mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
-		mariadb: () =>
-			api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
-		application: () =>
-			api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
-		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
-	};
-	const { data, refetch } = queryMap[type]
-		? queryMap[type]()
-		: api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id });
-
-	const mutationMap = {
-		postgres: () => api.postgres.update.useMutation(),
-		redis: () => api.redis.update.useMutation(),
-		mysql: () => api.mysql.update.useMutation(),
-		mariadb: () => api.mariadb.update.useMutation(),
-		application: () => api.application.update.useMutation(),
-		mongo: () => api.mongo.update.useMutation(),
-	};
-
-	const { mutateAsync, isError, error, isLoading } = mutationMap[type]
-		? mutationMap[type]()
-		: api.mongo.update.useMutation();
-
-	const form = useForm<AddSwarmSettings>({
-		defaultValues: {
-			healthCheckSwarm: null,
-			restartPolicySwarm: null,
-			placementSwarm: null,
-			updateConfigSwarm: null,
-			rollbackConfigSwarm: null,
-			modeSwarm: null,
-			labelsSwarm: null,
-			networkSwarm: null,
-			stopGracePeriodSwarm: null,
-			endpointSpecSwarm: null,
-		},
-		resolver: zodResolver(addSwarmSettings),
-	});
-
-	useEffect(() => {
-		if (data) {
-			const stopGracePeriodValue = hasStopGracePeriodSwarm(data)
-				? data.stopGracePeriodSwarm
-				: null;
-			const normalizedStopGracePeriod =
-				stopGracePeriodValue === null || stopGracePeriodValue === undefined
-					? null
-					: typeof stopGracePeriodValue === "bigint"
-						? stopGracePeriodValue
-						: BigInt(stopGracePeriodValue);
-			form.reset({
-				healthCheckSwarm: data.healthCheckSwarm
-					? JSON.stringify(data.healthCheckSwarm, null, 2)
-					: null,
-				restartPolicySwarm: data.restartPolicySwarm
-					? JSON.stringify(data.restartPolicySwarm, null, 2)
-					: null,
-				placementSwarm: data.placementSwarm
-					? JSON.stringify(data.placementSwarm, null, 2)
-					: null,
-				updateConfigSwarm: data.updateConfigSwarm
-					? JSON.stringify(data.updateConfigSwarm, null, 2)
-					: null,
-				rollbackConfigSwarm: data.rollbackConfigSwarm
-					? JSON.stringify(data.rollbackConfigSwarm, null, 2)
-					: null,
-				modeSwarm: data.modeSwarm
-					? JSON.stringify(data.modeSwarm, null, 2)
-					: null,
-				labelsSwarm: data.labelsSwarm
-					? JSON.stringify(data.labelsSwarm, null, 2)
-					: null,
-				networkSwarm: data.networkSwarm
-					? JSON.stringify(data.networkSwarm, null, 2)
-					: null,
-				stopGracePeriodSwarm: normalizedStopGracePeriod,
-				endpointSpecSwarm: data.endpointSpecSwarm
-					? JSON.stringify(data.endpointSpecSwarm, null, 2)
-					: null,
-			});
-		}
-	}, [form, form.reset, data]);
-
-	const onSubmit = async (data: AddSwarmSettings) => {
-		await mutateAsync({
-			applicationId: id || "",
-			postgresId: id || "",
-			redisId: id || "",
-			mysqlId: id || "",
-			mariadbId: id || "",
-			mongoId: id || "",
-			healthCheckSwarm: data.healthCheckSwarm,
-			restartPolicySwarm: data.restartPolicySwarm,
-			placementSwarm: data.placementSwarm,
-			updateConfigSwarm: data.updateConfigSwarm,
-			rollbackConfigSwarm: data.rollbackConfigSwarm,
-			modeSwarm: data.modeSwarm,
-			labelsSwarm: data.labelsSwarm,
-			networkSwarm: data.networkSwarm,
-			stopGracePeriodSwarm: data.stopGracePeriodSwarm ?? null,
-			endpointSpecSwarm: data.endpointSpecSwarm,
-		})
-			.then(async () => {
-				toast.success("Swarm settings updated");
-				refetch();
-			})
-			.catch(() => {
-				toast.error("Error updating the swarm settings");
-			});
-	};
+	const [activeMenu, setActiveMenu] = useState<string>("health-check");
+	const [open, setOpen] = useState(false);
 	return (
-		<Dialog>
+		<Dialog open={open} onOpenChange={setOpen}>
 			<DialogTrigger asChild>
 				<Button variant="secondary" className="cursor-pointer w-fit">
 					<Settings className="size-4 text-muted-foreground" />
 					Swarm Settings
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-5xl">
+			<DialogContent className="sm:max-w-6xl max-h-[85vh]">
 				<DialogHeader>
 					<DialogTitle>Swarm Settings</DialogTitle>
 					<DialogDescription>
-						Update certain settings using a json object.
+						Configure swarm settings for your service.
 					</DialogDescription>
 				</DialogHeader>
-				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 				<div>
 					<AlertBlock type="info">
 						Changing settings such as placements may cause the logs/monitoring,
@@ -352,596 +106,56 @@ export const AddSwarmSettings = ({ id, type }: Props) => {
 					</AlertBlock>
 				</div>
 
-				<Form {...form}>
-					<form
-						id="hook-form-add-permissions"
-						onSubmit={form.handleSubmit(onSubmit)}
-						className="grid  grid-cols-1 md:grid-cols-2  w-full gap-4 relative mt-4"
-					>
-						<FormField
-							control={form.control}
-							name="healthCheckSwarm"
-							render={({ field }) => (
-								<FormItem className="relative ">
-									<FormLabel>Health Check</FormLabel>
-									<TooltipProvider delayDuration={0}>
-										<Tooltip>
-											<TooltipTrigger asChild>
-												<FormDescription className="break-all w-fit flex flex-row gap-1 items-center">
-													Check the interface
-													<HelpCircle className="size-4 text-muted-foreground" />
-												</FormDescription>
-											</TooltipTrigger>
-											<TooltipContent
-												className="w-full z-[999]"
-												align="start"
-												side="bottom"
-											>
-												<code>
-													<pre>
-														{`{
-	Test?: string[] | undefined;
-	Interval?: number | undefined;
-	Timeout?: number | undefined;
-	StartPeriod?: number | undefined;
-	Retries?: number | undefined;
-}`}
-													</pre>
-												</code>
-											</TooltipContent>
-										</Tooltip>
-									</TooltipProvider>
+				<div className="flex gap-4 h-[60vh] py-4">
+					{/* Left Column - Menu */}
+					<div className="w-64 flex-shrink-0 border-r pr-4 overflow-y-auto">
+						<nav className="space-y-1">
+							{menuItems.map((item) => (
+								<button
+									key={item.id}
+									type="button"
+									onClick={() => setActiveMenu(item.id)}
+									className={cn(
+										"w-full text-left px-3 py-2 rounded-md text-sm transition-colors",
+										activeMenu === item.id
+											? "bg-primary text-primary-foreground"
+											: "hover:bg-muted",
+									)}
+								>
+									<div className="font-medium">{item.label}</div>
+									<div className="text-xs opacity-80">{item.description}</div>
+								</button>
+							))}
+						</nav>
+					</div>
 
-									<FormControl>
-										<CodeEditor
-											language="json"
-											placeholder={`{
-	"Test" : ["CMD-SHELL", "curl -f http://localhost:3000/health"],
-	"Interval" : 10000000000,
-	"Timeout" : 10000000000,
-	"StartPeriod" : 10000000000,
-	"Retries" : 10
-}`}
-											className="h-[12rem] font-mono"
-											{...field}
-											value={field?.value || ""}
-										/>
-									</FormControl>
-									<pre>
-										<FormMessage />
-									</pre>
-								</FormItem>
-							)}
-						/>
-
-						<FormField
-							control={form.control}
-							name="restartPolicySwarm"
-							render={({ field }) => (
-								<FormItem className="relative ">
-									<FormLabel>Restart Policy</FormLabel>
-									<TooltipProvider delayDuration={0}>
-										<Tooltip>
-											<TooltipTrigger asChild>
-												<FormDescription className="break-all w-fit flex flex-row gap-1 items-center">
-													Check the interface
-													<HelpCircle className="size-4 text-muted-foreground" />
-												</FormDescription>
-											</TooltipTrigger>
-											<TooltipContent
-												className="w-full z-[999]"
-												align="start"
-												side="bottom"
-											>
-												<code>
-													<pre>
-														{`{
-	Condition?: string | undefined;
-	Delay?: number | undefined;
-	MaxAttempts?: number | undefined;
-	Window?: number | undefined;
-}`}
-													</pre>
-												</code>
-											</TooltipContent>
-										</Tooltip>
-									</TooltipProvider>
-
-									<FormControl>
-										<CodeEditor
-											language="json"
-											placeholder={`{
-	"Condition" : "on-failure",
-	"Delay" : 10000000000,
-	"MaxAttempts" : 10,
-	"Window" : 10000000000
-}                                                  `}
-											className="h-[12rem] font-mono"
-											{...field}
-											value={field?.value || ""}
-										/>
-									</FormControl>
-									<pre>
-										<FormMessage />
-									</pre>
-								</FormItem>
-							)}
-						/>
-
-						<FormField
-							control={form.control}
-							name="placementSwarm"
-							render={({ field }) => (
-								<FormItem className="relative ">
-									<FormLabel>Placement</FormLabel>
-									<TooltipProvider delayDuration={0}>
-										<Tooltip>
-											<TooltipTrigger asChild>
-												<FormDescription className="break-all w-fit flex flex-row gap-1 items-center">
-													Check the interface
-													<HelpCircle className="size-4 text-muted-foreground" />
-												</FormDescription>
-											</TooltipTrigger>
-											<TooltipContent
-												className="w-full z-[999]"
-												align="start"
-												side="bottom"
-											>
-												<code>
-													<pre>
-														{`{
-	Constraints?: string[] | undefined;
-	Preferences?: Array<{ Spread: { SpreadDescriptor: string } }> | undefined;
-	MaxReplicas?: number | undefined;
-	Platforms?:
-		| Array<{
-				Architecture: string;
-				OS: string;
-		  }>
-		| undefined;
-}`}
-													</pre>
-												</code>
-											</TooltipContent>
-										</Tooltip>
-									</TooltipProvider>
-
-									<FormControl>
-										<CodeEditor
-											language="json"
-											placeholder={`{
-	"Constraints" : ["node.role==manager"],
-	"Preferences" : [{
-		"Spread" : {
-			"SpreadDescriptor" : "node.labels.region"
-		}
-	}],
-	"MaxReplicas" : 10,
-	"Platforms" : [{
-		"Architecture" : "amd64",
-		"OS" : "linux"
-	}]
-}                                                `}
-											className="h-[21rem] font-mono"
-											{...field}
-											value={field?.value || ""}
-										/>
-									</FormControl>
-									<pre>
-										<FormMessage />
-									</pre>
-								</FormItem>
-							)}
-						/>
-
-						<FormField
-							control={form.control}
-							name="updateConfigSwarm"
-							render={({ field }) => (
-								<FormItem className="relative ">
-									<FormLabel>Update Config</FormLabel>
-									<TooltipProvider delayDuration={0}>
-										<Tooltip>
-											<TooltipTrigger asChild>
-												<FormDescription className="break-all w-fit flex flex-row gap-1 items-center">
-													Check the interface
-													<HelpCircle className="size-4 text-muted-foreground" />
-												</FormDescription>
-											</TooltipTrigger>
-											<TooltipContent
-												className="w-full z-[999]"
-												align="start"
-												side="bottom"
-											>
-												<code>
-													<pre>
-														{`{
-	Parallelism?: number;
-	Delay?: number | undefined;
-	FailureAction?: string | undefined;
-	Monitor?: number | undefined;
-	MaxFailureRatio?: number | undefined;
-	Order: string;
-}`}
-													</pre>
-												</code>
-											</TooltipContent>
-										</Tooltip>
-									</TooltipProvider>
-
-									<FormControl>
-										<CodeEditor
-											language="json"
-											placeholder={`{
-	"Parallelism" : 1,
-	"Delay" : 10000000000,
-	"FailureAction" : "continue",
-	"Monitor" : 10000000000,
-	"MaxFailureRatio" : 10,
-	"Order" : "start-first"
-}`}
-											className="h-[21rem] font-mono"
-											{...field}
-											value={field?.value || ""}
-										/>
-									</FormControl>
-									<pre>
-										<FormMessage />
-									</pre>
-								</FormItem>
-							)}
-						/>
-
-						<FormField
-							control={form.control}
-							name="rollbackConfigSwarm"
-							render={({ field }) => (
-								<FormItem className="relative ">
-									<FormLabel>Rollback Config</FormLabel>
-									<TooltipProvider delayDuration={0}>
-										<Tooltip>
-											<TooltipTrigger asChild>
-												<FormDescription className="break-all w-fit flex flex-row gap-1 items-center">
-													Check the interface
-													<HelpCircle className="size-4 text-muted-foreground" />
-												</FormDescription>
-											</TooltipTrigger>
-											<TooltipContent
-												className="w-full z-[999]"
-												align="start"
-												side="bottom"
-											>
-												<code>
-													<pre>
-														{`{
-	Parallelism?: number;
-	Delay?: number | undefined;
-	FailureAction?: string | undefined;
-	Monitor?: number | undefined;
-	MaxFailureRatio?: number | undefined;
-	Order: string;
-}`}
-													</pre>
-												</code>
-											</TooltipContent>
-										</Tooltip>
-									</TooltipProvider>
-
-									<FormControl>
-										<CodeEditor
-											language="json"
-											placeholder={`{
-	"Parallelism" : 1,
-	"Delay" : 10000000000,
-	"FailureAction" : "continue",
-	"Monitor" : 10000000000,
-	"MaxFailureRatio" : 10,
-	"Order" : "start-first"
-}`}
-											className="h-[17rem] font-mono"
-											{...field}
-											value={field?.value || ""}
-										/>
-									</FormControl>
-									<pre>
-										<FormMessage />
-									</pre>
-								</FormItem>
-							)}
-						/>
-
-						<FormField
-							control={form.control}
-							name="modeSwarm"
-							render={({ field }) => (
-								<FormItem className="relative ">
-									<FormLabel>Mode</FormLabel>
-									<TooltipProvider delayDuration={0}>
-										<Tooltip>
-											<TooltipTrigger asChild>
-												<FormDescription className="break-all w-fit flex flex-row gap-1 items-center">
-													Check the interface
-													<HelpCircle className="size-4 text-muted-foreground" />
-												</FormDescription>
-											</TooltipTrigger>
-											<TooltipContent
-												className="w-full z-[999]"
-												align="center"
-												side="bottom"
-											>
-												<code>
-													<pre>
-														{`{
-	Replicated?: { Replicas?: number | undefined } | undefined;
-	Global?: {} | undefined;
-	ReplicatedJob?:
-		| {
-				MaxConcurrent?: number | undefined;
-				TotalCompletions?: number | undefined;
-		  }
-		| undefined;
-	GlobalJob?: {} | undefined;
-}`}
-													</pre>
-												</code>
-											</TooltipContent>
-										</Tooltip>
-									</TooltipProvider>
-
-									<FormControl>
-										<CodeEditor
-											language="json"
-											placeholder={`{
-	"Replicated" : {
-		"Replicas" : 1
-	},
-	"Global" : {},
-	"ReplicatedJob" : {
-		"MaxConcurrent" : 1,
-		"TotalCompletions" : 1
-	},
-	"GlobalJob" : {}
-}`}
-											className="h-[17rem] font-mono"
-											{...field}
-											value={field?.value || ""}
-										/>
-									</FormControl>
-									<pre>
-										<FormMessage />
-									</pre>
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="networkSwarm"
-							render={({ field }) => (
-								<FormItem className="relative ">
-									<FormLabel>Network</FormLabel>
-									<TooltipProvider delayDuration={0}>
-										<Tooltip>
-											<TooltipTrigger asChild>
-												<FormDescription className="break-all w-fit flex flex-row gap-1 items-center">
-													Check the interface
-													<HelpCircle className="size-4 text-muted-foreground" />
-												</FormDescription>
-											</TooltipTrigger>
-											<TooltipContent
-												className="w-full z-[999]"
-												align="start"
-												side="bottom"
-											>
-												<code>
-													<pre>
-														{`[
-  {
-	"Target" : string | undefined;
-	"Aliases" : string[] | undefined;
-	"DriverOpts" : { [key: string]: string } | undefined;
-  }
-]`}
-													</pre>
-												</code>
-											</TooltipContent>
-										</Tooltip>
-									</TooltipProvider>
-									<FormControl>
-										<CodeEditor
-											language="json"
-											placeholder={`[
- {
-	"Target" : "dokploy-network",
-	"Aliases" : ["dokploy-network"],
-	"DriverOpts" : {
-		"com.docker.network.driver.mtu" : "1500",
-		"com.docker.network.driver.host_binding" : "true",
-		"com.docker.network.driver.mtu" : "1500",
-		"com.docker.network.driver.host_binding" : "true"
-	}
- }
-]`}
-											className="h-[20rem] font-mono"
-											{...field}
-											value={field?.value || ""}
-										/>
-									</FormControl>
-									<pre>
-										<FormMessage />
-									</pre>
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="labelsSwarm"
-							render={({ field }) => (
-								<FormItem className="relative ">
-									<FormLabel>Labels</FormLabel>
-									<TooltipProvider delayDuration={0}>
-										<Tooltip>
-											<TooltipTrigger asChild>
-												<FormDescription className="break-all w-fit flex flex-row gap-1 items-center">
-													Check the interface
-													<HelpCircle className="size-4 text-muted-foreground" />
-												</FormDescription>
-											</TooltipTrigger>
-											<TooltipContent
-												className="w-full z-[999]"
-												align="start"
-												side="bottom"
-											>
-												<code>
-													<pre>
-														{`{
-	[name: string]: string;
-}`}
-													</pre>
-												</code>
-											</TooltipContent>
-										</Tooltip>
-									</TooltipProvider>
-									<FormControl>
-										<CodeEditor
-											language="json"
-											placeholder={`{
-	"com.example.app.name" : "my-app",
-	"com.example.app.version" : "1.0.0"
-}`}
-											className="h-[20rem] font-mono"
-											{...field}
-											value={field?.value || ""}
-										/>
-									</FormControl>
-									<pre>
-										<FormMessage />
-									</pre>
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="stopGracePeriodSwarm"
-							render={({ field }) => (
-								<FormItem className="relative max-lg:px-4 lg:pl-6 ">
-									<FormLabel>Stop Grace Period (nanoseconds)</FormLabel>
-									<TooltipProvider delayDuration={0}>
-										<Tooltip>
-											<TooltipTrigger asChild>
-												<FormDescription className="break-all w-fit flex flex-row gap-1 items-center">
-													Duration in nanoseconds
-													<HelpCircle className="size-4 text-muted-foreground" />
-												</FormDescription>
-											</TooltipTrigger>
-											<TooltipContent
-												className="w-full z-[999]"
-												align="start"
-												side="bottom"
-											>
-												<code>
-													<pre>
-														{`Enter duration in nanoseconds:
-														• 30000000000 - 30 seconds
-														• 120000000000 - 2 minutes  
-														• 3600000000000 - 1 hour
-														• 0 - no grace period`}
-													</pre>
-												</code>
-											</TooltipContent>
-										</Tooltip>
-									</TooltipProvider>
-									<FormControl>
-										<Input
-											type="number"
-											placeholder="30000000000"
-											className="font-mono"
-											{...field}
-											value={field?.value?.toString() || ""}
-											onChange={(e) =>
-												field.onChange(
-													e.target.value ? BigInt(e.target.value) : null,
-												)
-											}
-										/>
-									</FormControl>
-									<pre>
-										<FormMessage />
-									</pre>
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="endpointSpecSwarm"
-							render={({ field }) => (
-								<FormItem className="relative ">
-									<FormLabel>Endpoint Spec</FormLabel>
-									<TooltipProvider delayDuration={0}>
-										<Tooltip>
-											<TooltipTrigger asChild>
-												<FormDescription className="break-all w-fit flex flex-row gap-1 items-center">
-													Check the interface
-													<HelpCircle className="size-4 text-muted-foreground" />
-												</FormDescription>
-											</TooltipTrigger>
-											<TooltipContent
-												className="w-full z-[999]"
-												align="start"
-												side="bottom"
-											>
-												<code>
-													<pre>
-														{`{
-	Mode?: string | undefined;
-	Ports?: Array<{
-		Protocol?: string | undefined;
-		TargetPort?: number | undefined;
-		PublishedPort?: number | undefined;
-		PublishMode?: string | undefined;
-	}> | undefined;
-}`}
-													</pre>
-												</code>
-											</TooltipContent>
-										</Tooltip>
-									</TooltipProvider>
-
-									<FormControl>
-										<CodeEditor
-											language="json"
-											placeholder={`{
-	"Mode": "dnsrr",
-	"Ports": [
-		{
-			"Protocol": "tcp",
-			"TargetPort": 5432,
-			"PublishedPort": 5432,
-			"PublishMode": "host"
-		}
-	]
-}`}
-											className="h-[17rem] font-mono"
-											{...field}
-											value={field?.value || ""}
-										/>
-									</FormControl>
-									<pre>
-										<FormMessage />
-									</pre>
-								</FormItem>
-							)}
-						/>
-						<DialogFooter className="flex w-full flex-row justify-end md:col-span-2 m-0 sticky bottom-0 right-0 bg-muted border">
-							<Button
-								isLoading={isLoading}
-								form="hook-form-add-permissions"
-								type="submit"
-							>
-								Update
-							</Button>
-						</DialogFooter>
-					</form>
-				</Form>
+					{/* Right Column - Form */}
+					<div className="flex-1 overflow-y-auto">
+						{activeMenu === "health-check" && (
+							<HealthCheckForm id={id} type={type} />
+						)}
+						{activeMenu === "restart-policy" && (
+							<RestartPolicyForm id={id} type={type} />
+						)}
+						{activeMenu === "placement" && (
+							<PlacementForm id={id} type={type} />
+						)}
+						{activeMenu === "update-config" && (
+							<UpdateConfigForm id={id} type={type} />
+						)}
+						{activeMenu === "rollback-config" && (
+							<RollbackConfigForm id={id} type={type} />
+						)}
+						{activeMenu === "mode" && <ModeForm id={id} type={type} />}
+						{activeMenu === "labels" && <LabelsForm id={id} type={type} />}
+						{activeMenu === "stop-grace-period" && (
+							<StopGracePeriodForm id={id} type={type} />
+						)}
+						{activeMenu === "endpoint-spec" && (
+							<EndpointSpecForm id={id} type={type} />
+						)}
+					</div>
+				</div>
 			</DialogContent>
 		</Dialog>
 	);
diff --git a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/endpoint-spec-form.tsx b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/endpoint-spec-form.tsx
new file mode 100644
index 000000000..9bd6735c3
--- /dev/null
+++ b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/endpoint-spec-form.tsx
@@ -0,0 +1,151 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { api } from "@/utils/api";
+
+export const endpointSpecFormSchema = z.object({
+	Mode: z.string().optional(),
+});
+
+interface EndpointSpecFormProps {
+	id: string;
+	type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
+}
+
+export const EndpointSpecForm = ({ id, type }: EndpointSpecFormProps) => {
+	const [isLoading, setIsLoading] = useState(false);
+
+	const queryMap = {
+		postgres: () =>
+			api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
+		redis: () => api.redis.one.useQuery({ redisId: id }, { enabled: !!id }),
+		mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
+		mariadb: () =>
+			api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
+		application: () =>
+			api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
+		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
+	};
+	const { data, refetch } = queryMap[type]
+		? queryMap[type]()
+		: api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id });
+
+	const mutationMap = {
+		postgres: () => api.postgres.update.useMutation(),
+		redis: () => api.redis.update.useMutation(),
+		mysql: () => api.mysql.update.useMutation(),
+		mariadb: () => api.mariadb.update.useMutation(),
+		application: () => api.application.update.useMutation(),
+		mongo: () => api.mongo.update.useMutation(),
+	};
+
+	const { mutateAsync } = mutationMap[type]
+		? mutationMap[type]()
+		: api.mongo.update.useMutation();
+
+	const form = useForm<any>({
+		resolver: zodResolver(endpointSpecFormSchema),
+		defaultValues: {
+			Mode: undefined,
+		},
+	});
+
+	useEffect(() => {
+		if (data?.endpointSpecSwarm) {
+			const es = data.endpointSpecSwarm;
+			form.reset({
+				Mode: es.Mode,
+			});
+		}
+	}, [data, form]);
+
+	const onSubmit = async (formData: z.infer<typeof endpointSpecFormSchema>) => {
+		setIsLoading(true);
+		try {
+			// Check if all values are empty, if so, send null to clear the database
+			const hasAnyValue = formData.Mode !== undefined && formData.Mode !== null && formData.Mode !== "";
+
+			await mutateAsync({
+				applicationId: id || "",
+				postgresId: id || "",
+				redisId: id || "",
+				mysqlId: id || "",
+				mariadbId: id || "",
+				mongoId: id || "",
+				endpointSpecSwarm: hasAnyValue ? formData : null,
+			});
+
+			toast.success("Endpoint spec updated successfully");
+			refetch();
+		} catch {
+			toast.error("Error updating endpoint spec");
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	return (
+		<Form {...form}>
+			<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+				<FormField
+					control={form.control}
+					name="Mode"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Mode</FormLabel>
+							<FormDescription>Endpoint mode (vip or dnsrr)</FormDescription>
+							<Select onValueChange={field.onChange} value={field.value}>
+								<FormControl>
+									<SelectTrigger>
+										<SelectValue placeholder="Select endpoint mode" />
+									</SelectTrigger>
+								</FormControl>
+								<SelectContent>
+									<SelectItem value="vip">VIP (Virtual IP)</SelectItem>
+									<SelectItem value="dnsrr">DNS Round Robin</SelectItem>
+								</SelectContent>
+							</Select>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<div className="flex justify-end gap-2">
+					<Button
+						type="button"
+						variant="outline"
+						onClick={() => {
+							form.reset({
+								Mode: undefined,
+							});
+						}}
+					>
+						Clear
+					</Button>
+					<Button type="submit" isLoading={isLoading}>
+						Save Endpoint Spec
+					</Button>
+				</div>
+			</form>
+		</Form>
+	);
+};
diff --git a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/health-check-form.tsx b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/health-check-form.tsx
new file mode 100644
index 000000000..378be5dbb
--- /dev/null
+++ b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/health-check-form.tsx
@@ -0,0 +1,267 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { api } from "@/utils/api";
+
+export const healthCheckFormSchema = z.object({
+	Test: z.array(z.string()).optional(),
+	Interval: z.coerce.number().optional(),
+	Timeout: z.coerce.number().optional(),
+	StartPeriod: z.coerce.number().optional(),
+	Retries: z.coerce.number().optional(),
+});
+
+interface HealthCheckFormProps {
+	id: string;
+	type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
+}
+
+export const HealthCheckForm = ({ id, type }: HealthCheckFormProps) => {
+	const [isLoading, setIsLoading] = useState(false);
+	const [testCommands, setTestCommands] = useState<string[]>([]);
+
+	const queryMap = {
+		postgres: () =>
+			api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
+		redis: () => api.redis.one.useQuery({ redisId: id }, { enabled: !!id }),
+		mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
+		mariadb: () =>
+			api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
+		application: () =>
+			api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
+		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
+	};
+	const { data, refetch } = queryMap[type]
+		? queryMap[type]()
+		: api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id });
+
+	const mutationMap = {
+		postgres: () => api.postgres.update.useMutation(),
+		redis: () => api.redis.update.useMutation(),
+		mysql: () => api.mysql.update.useMutation(),
+		mariadb: () => api.mariadb.update.useMutation(),
+		application: () => api.application.update.useMutation(),
+		mongo: () => api.mongo.update.useMutation(),
+	};
+
+	const { mutateAsync } = mutationMap[type]
+		? mutationMap[type]()
+		: api.mongo.update.useMutation();
+
+	const form = useForm<any>({
+		resolver: zodResolver(healthCheckFormSchema),
+		defaultValues: {
+			Test: [],
+			Interval: undefined,
+			Timeout: undefined,
+			StartPeriod: undefined,
+			Retries: undefined,
+		},
+	});
+
+	useEffect(() => {
+		if (data?.healthCheckSwarm) {
+			const hc = data.healthCheckSwarm;
+			form.reset({
+				Test: hc.Test || [],
+				Interval: hc.Interval,
+				Timeout: hc.Timeout,
+				StartPeriod: hc.StartPeriod,
+				Retries: hc.Retries,
+			});
+			setTestCommands(hc.Test || []);
+		}
+	}, [data, form]);
+
+	const onSubmit = async (formData: z.infer<typeof healthCheckFormSchema>) => {
+		setIsLoading(true);
+		try {
+			// Check if all values are empty, if so, send null to clear the database
+			const hasAnyValue = 
+				(formData.Test && formData.Test.length > 0) ||
+				formData.Interval !== undefined ||
+				formData.Timeout !== undefined ||
+				formData.StartPeriod !== undefined ||
+				formData.Retries !== undefined;
+
+			await mutateAsync({
+				applicationId: id || "",
+				postgresId: id || "",
+				redisId: id || "",
+				mysqlId: id || "",
+				mariadbId: id || "",
+				mongoId: id || "",
+				healthCheckSwarm: hasAnyValue ? formData : null,
+			});
+
+			toast.success("Health check updated successfully");
+			refetch();
+		} catch {
+			toast.error("Error updating health check");
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	const addTestCommand = () => {
+		setTestCommands([...testCommands, ""]);
+	};
+
+	const updateTestCommand = (index: number, value: string) => {
+		const newCommands = [...testCommands];
+		newCommands[index] = value;
+		setTestCommands(newCommands);
+	};
+
+	const removeTestCommand = (index: number) => {
+		setTestCommands(testCommands.filter((_, i) => i !== index));
+	};
+
+	return (
+		<Form {...form}>
+			<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+				<div>
+					<FormLabel>Test Commands</FormLabel>
+					<FormDescription>
+						Command to run for health check (e.g., ["CMD-SHELL", "curl -f
+						http://localhost:3000/health"])
+					</FormDescription>
+					<div className="space-y-2 mt-2">
+						{testCommands.map((cmd, index) => (
+							<div key={index} className="flex gap-2">
+								<Input
+									value={cmd}
+									onChange={(e) => updateTestCommand(index, e.target.value)}
+									placeholder={
+										index === 0
+											? "CMD-SHELL"
+											: "curl -f http://localhost:3000/health"
+									}
+								/>
+								<Button
+									type="button"
+									variant="destructive"
+									size="sm"
+									onClick={() => removeTestCommand(index)}
+								>
+									Remove
+								</Button>
+							</div>
+						))}
+						<Button
+							type="button"
+							variant="outline"
+							size="sm"
+							onClick={addTestCommand}
+						>
+							Add Command
+						</Button>
+					</div>
+				</div>
+
+				<FormField
+					control={form.control}
+					name="Interval"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Interval (nanoseconds)</FormLabel>
+							<FormDescription>
+								Time between health checks (e.g., 10000000000 for 10 seconds)
+							</FormDescription>
+							<FormControl>
+								<Input type="number" placeholder="10000000000" {...field} />
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name="Timeout"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Timeout (nanoseconds)</FormLabel>
+							<FormDescription>
+								Maximum time to wait for health check response
+							</FormDescription>
+							<FormControl>
+								<Input type="number" placeholder="10000000000" {...field} />
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name="StartPeriod"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Start Period (nanoseconds)</FormLabel>
+							<FormDescription>
+								Initial grace period before health checks begin
+							</FormDescription>
+							<FormControl>
+								<Input type="number" placeholder="10000000000" {...field} />
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name="Retries"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Retries</FormLabel>
+							<FormDescription>
+								Number of consecutive failures needed to consider container
+								unhealthy
+							</FormDescription>
+							<FormControl>
+								<Input type="number" placeholder="3" {...field} />
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<div className="flex justify-end gap-2">
+					<Button
+						type="button"
+						variant="outline"
+						onClick={() => {
+							form.reset({
+								Test: [],
+								Interval: undefined,
+								Timeout: undefined,
+								StartPeriod: undefined,
+								Retries: undefined,
+							});
+						}}
+					>
+						Clear
+					</Button>
+					<Button type="submit" isLoading={isLoading}>
+						Save Health Check
+					</Button>
+				</div>
+			</form>
+		</Form>
+	);
+};
diff --git a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/index.ts b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/index.ts
new file mode 100644
index 000000000..ebd00abcd
--- /dev/null
+++ b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/index.ts
@@ -0,0 +1,10 @@
+export { HealthCheckForm } from "./health-check-form";
+export { RestartPolicyForm } from "./restart-policy-form";
+export { PlacementForm } from "./placement-form";
+export { UpdateConfigForm } from "./update-config-form";
+export { RollbackConfigForm } from "./rollback-config-form";
+export { ModeForm } from "./mode-form";
+export { LabelsForm } from "./labels-form";
+export { StopGracePeriodForm } from "./stop-grace-period-form";
+export { EndpointSpecForm } from "./endpoint-spec-form";
+export { filterEmptyValues, hasValues } from "./utils";
diff --git a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/labels-form.tsx b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/labels-form.tsx
new file mode 100644
index 000000000..db173313b
--- /dev/null
+++ b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/labels-form.tsx
@@ -0,0 +1,199 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect, useState } from "react";
+import { useFieldArray, useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { api } from "@/utils/api";
+
+export const labelsFormSchema = z.object({
+	labels: z
+		.array(
+			z.object({
+				key: z.string(),
+				value: z.string(),
+			}),
+		)
+		.optional(),
+});
+
+interface LabelsFormProps {
+	id: string;
+	type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
+}
+
+export const LabelsForm = ({ id, type }: LabelsFormProps) => {
+	const [isLoading, setIsLoading] = useState(false);
+
+	const queryMap = {
+		postgres: () =>
+			api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
+		redis: () => api.redis.one.useQuery({ redisId: id }, { enabled: !!id }),
+		mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
+		mariadb: () =>
+			api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
+		application: () =>
+			api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
+		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
+	};
+	const { data, refetch } = queryMap[type]
+		? queryMap[type]()
+		: api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id });
+
+	const mutationMap = {
+		postgres: () => api.postgres.update.useMutation(),
+		redis: () => api.redis.update.useMutation(),
+		mysql: () => api.mysql.update.useMutation(),
+		mariadb: () => api.mariadb.update.useMutation(),
+		application: () => api.application.update.useMutation(),
+		mongo: () => api.mongo.update.useMutation(),
+	};
+
+	const { mutateAsync } = mutationMap[type]
+		? mutationMap[type]()
+		: api.mongo.update.useMutation();
+
+	const form = useForm<any>({
+		resolver: zodResolver(labelsFormSchema),
+		defaultValues: {
+			labels: [],
+		},
+	});
+
+	const { fields, append, remove } = useFieldArray({
+		control: form.control,
+		name: "labels",
+	});
+
+	useEffect(() => {
+		if (data?.labelsSwarm && typeof data.labelsSwarm === "object") {
+			const labelEntries = Object.entries(data.labelsSwarm).map(
+				([key, value]) => ({
+					key,
+					value: value as string,
+				}),
+			);
+			form.reset({ labels: labelEntries });
+		}
+	}, [data, form]);
+
+	const onSubmit = async (formData: z.infer<typeof labelsFormSchema>) => {
+		setIsLoading(true);
+		try {
+			const labelsObject =
+				formData.labels?.reduce(
+					(acc, { key, value }) => {
+						if (key && value) {
+							acc[key] = value;
+						}
+						return acc;
+					},
+					{} as Record<string, string>,
+				) || {};
+
+			// If no labels, send null to clear the database
+			const labelsToSend = Object.keys(labelsObject).length > 0 ? labelsObject : null;
+
+			await mutateAsync({
+				applicationId: id || "",
+				postgresId: id || "",
+				redisId: id || "",
+				mysqlId: id || "",
+				mariadbId: id || "",
+				mongoId: id || "",
+				labelsSwarm: labelsToSend,
+			});
+
+			toast.success("Labels updated successfully");
+			refetch();
+		} catch {
+			toast.error("Error updating labels");
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	return (
+		<Form {...form}>
+			<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+				<div>
+					<FormLabel>Labels</FormLabel>
+					<FormDescription>
+						Add key-value labels to your service
+					</FormDescription>
+					<div className="space-y-2 mt-2">
+						{fields.map((field, index) => (
+							<div key={field.id} className="flex gap-2">
+								<FormField
+									control={form.control}
+									name={`labels.${index}.key`}
+									render={({ field }) => (
+										<FormItem className="flex-1">
+											<FormControl>
+												<Input {...field} placeholder="com.example.app.name" />
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<FormField
+									control={form.control}
+									name={`labels.${index}.value`}
+									render={({ field }) => (
+										<FormItem className="flex-1">
+											<FormControl>
+												<Input {...field} placeholder="my-app" />
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<Button
+									type="button"
+									variant="destructive"
+									size="sm"
+									onClick={() => remove(index)}
+								>
+									Remove
+								</Button>
+							</div>
+						))}
+						<Button
+							type="button"
+							variant="outline"
+							size="sm"
+							onClick={() => append({ key: "", value: "" })}
+						>
+							Add Label
+						</Button>
+					</div>
+				</div>
+
+				<div className="flex justify-end gap-2">
+					<Button
+						type="button"
+						variant="outline"
+						onClick={() => {
+							form.reset({ labels: [] });
+						}}
+					>
+						Clear
+					</Button>
+					<Button type="submit" isLoading={isLoading}>
+						Save Labels
+					</Button>
+				</div>
+			</form>
+		</Form>
+	);
+};
diff --git a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/mode-form.tsx b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/mode-form.tsx
new file mode 100644
index 000000000..839f5d519
--- /dev/null
+++ b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/mode-form.tsx
@@ -0,0 +1,195 @@
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { api } from "@/utils/api";
+
+interface ModeFormProps {
+	id: string;
+	type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
+}
+
+export const ModeForm = ({ id, type }: ModeFormProps) => {
+	const [isLoading, setIsLoading] = useState(false);
+
+	const queryMap = {
+		postgres: () =>
+			api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
+		redis: () => api.redis.one.useQuery({ redisId: id }, { enabled: !!id }),
+		mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
+		mariadb: () =>
+			api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
+		application: () =>
+			api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
+		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
+	};
+	const { data, refetch } = queryMap[type]
+		? queryMap[type]()
+		: api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id });
+
+	const mutationMap = {
+		postgres: () => api.postgres.update.useMutation(),
+		redis: () => api.redis.update.useMutation(),
+		mysql: () => api.mysql.update.useMutation(),
+		mariadb: () => api.mariadb.update.useMutation(),
+		application: () => api.application.update.useMutation(),
+		mongo: () => api.mongo.update.useMutation(),
+	};
+
+	const { mutateAsync } = mutationMap[type]
+		? mutationMap[type]()
+		: api.mongo.update.useMutation();
+
+	const form = useForm<any>({
+		defaultValues: {
+			type: undefined,
+			Replicas: undefined,
+		},
+	});
+
+	const modeType = form.watch("type");
+
+	useEffect(() => {
+		if (data?.modeSwarm) {
+			const mode = data.modeSwarm;
+			if (mode.Replicated) {
+				form.reset({
+					type: "Replicated",
+					Replicas: mode.Replicated.Replicas,
+				});
+			} else if (mode.Global) {
+				form.reset({
+					type: "Global",
+					Replicas: undefined,
+				});
+			}
+		}
+	}, [data, form]);
+
+	const onSubmit = async (formData: any) => {
+		setIsLoading(true);
+		try {
+			// If no type is selected, send null to clear the database
+			if (!formData.type) {
+				await mutateAsync({
+					applicationId: id || "",
+					postgresId: id || "",
+					redisId: id || "",
+					mysqlId: id || "",
+					mariadbId: id || "",
+					mongoId: id || "",
+					modeSwarm: null,
+				});
+				toast.success("Mode updated successfully");
+				refetch();
+				setIsLoading(false);
+				return;
+			}
+
+			const modeData =
+				formData.type === "Replicated"
+					? { Replicated: { Replicas: formData.Replicas } }
+					: { Global: {} };
+
+			await mutateAsync({
+				applicationId: id || "",
+				postgresId: id || "",
+				redisId: id || "",
+				mysqlId: id || "",
+				mariadbId: id || "",
+				mongoId: id || "",
+				modeSwarm: modeData,
+			});
+
+			toast.success("Mode updated successfully");
+			refetch();
+		} catch {
+			toast.error("Error updating mode");
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	return (
+		<Form {...form}>
+			<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+				<FormField
+					control={form.control}
+					name="type"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Mode Type</FormLabel>
+							<FormDescription>
+								Choose between replicated or global service mode
+							</FormDescription>
+							<Select onValueChange={field.onChange} value={field.value}>
+								<FormControl>
+									<SelectTrigger>
+										<SelectValue placeholder="Select mode type" />
+									</SelectTrigger>
+								</FormControl>
+								<SelectContent>
+									<SelectItem value="Replicated">Replicated</SelectItem>
+									<SelectItem value="Global">Global</SelectItem>
+								</SelectContent>
+							</Select>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				{modeType === "Replicated" && (
+					<FormField
+						control={form.control}
+						name="Replicas"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel>Replicas</FormLabel>
+								<FormDescription>Number of replicas to run</FormDescription>
+								<FormControl>
+									<Input type="number" placeholder="1" {...field} />
+								</FormControl>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+				)}
+
+				<div className="flex justify-end gap-2">
+					<Button
+						type="button"
+						variant="outline"
+						onClick={() => {
+							form.reset({
+								type: undefined,
+								Replicas: undefined,
+							});
+						}}
+					>
+						Clear
+					</Button>
+					<Button type="submit" isLoading={isLoading}>
+						Save Mode
+					</Button>
+				</div>
+			</form>
+		</Form>
+	);
+};
diff --git a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/placement-form.tsx b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/placement-form.tsx
new file mode 100644
index 000000000..7c2ef074c
--- /dev/null
+++ b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/placement-form.tsx
@@ -0,0 +1,342 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { api } from "@/utils/api";
+
+const PreferenceSchema = z.object({
+	Spread: z.object({
+		SpreadDescriptor: z.string(),
+	}),
+});
+
+const PlatformSchema = z.object({
+	Architecture: z.string(),
+	OS: z.string(),
+});
+
+export const placementFormSchema = z.object({
+	Constraints: z.array(z.string()).optional(),
+	Preferences: z.array(PreferenceSchema).optional(),
+	MaxReplicas: z.coerce.number().optional(),
+	Platforms: z.array(PlatformSchema).optional(),
+});
+
+interface PlacementFormProps {
+	id: string;
+	type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
+}
+
+export const PlacementForm = ({ id, type }: PlacementFormProps) => {
+	const [isLoading, setIsLoading] = useState(false);
+
+	const queryMap = {
+		postgres: () =>
+			api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
+		redis: () => api.redis.one.useQuery({ redisId: id }, { enabled: !!id }),
+		mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
+		mariadb: () =>
+			api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
+		application: () =>
+			api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
+		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
+	};
+	const { data, refetch } = queryMap[type]
+		? queryMap[type]()
+		: api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id });
+
+	const mutationMap = {
+		postgres: () => api.postgres.update.useMutation(),
+		redis: () => api.redis.update.useMutation(),
+		mysql: () => api.mysql.update.useMutation(),
+		mariadb: () => api.mariadb.update.useMutation(),
+		application: () => api.application.update.useMutation(),
+		mongo: () => api.mongo.update.useMutation(),
+	};
+
+	const { mutateAsync } = mutationMap[type]
+		? mutationMap[type]()
+		: api.mongo.update.useMutation();
+
+	const form = useForm<any>({
+		resolver: zodResolver(placementFormSchema),
+		defaultValues: {
+			Constraints: [],
+			Preferences: [],
+			MaxReplicas: undefined,
+			Platforms: [],
+		},
+	});
+
+	const constraints = form.watch("Constraints") || [];
+	const preferences = form.watch("Preferences") || [];
+	const platforms = form.watch("Platforms") || [];
+
+	useEffect(() => {
+		if (data?.placementSwarm) {
+			const placement = data.placementSwarm;
+			form.reset({
+				Constraints: placement.Constraints || [],
+				Preferences:
+					placement.Preferences?.map((p: any) => ({
+						SpreadDescriptor: p.Spread?.SpreadDescriptor || "",
+					})) || [],
+				MaxReplicas: placement.MaxReplicas,
+				Platforms: placement.Platforms || [],
+			});
+		}
+	}, [data, form]);
+
+	const onSubmit = async (formData: z.infer<typeof placementFormSchema>) => {
+		setIsLoading(true);
+		try {
+			// Check if all values are empty, if so, send null to clear the database
+			const hasAnyValue = 
+				(formData.Constraints && formData.Constraints.length > 0) ||
+				(formData.Preferences && formData.Preferences.length > 0) ||
+				(formData.Platforms && formData.Platforms.length > 0) ||
+				formData.MaxReplicas !== undefined;
+
+			await mutateAsync({
+				applicationId: id || "",
+				postgresId: id || "",
+				redisId: id || "",
+				mysqlId: id || "",
+				mariadbId: id || "",
+				mongoId: id || "",
+				placementSwarm: hasAnyValue ? formData : null,
+			});
+
+			toast.success("Placement updated successfully");
+			refetch();
+		} catch {
+			toast.error("Error updating placement");
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	const addConstraint = () => {
+		form.setValue("Constraints", [...constraints, ""]);
+	};
+
+	const updateConstraint = (index: number, value: string) => {
+		const newConstraints = [...constraints];
+		newConstraints[index] = value;
+		form.setValue("Constraints", newConstraints);
+	};
+
+	const removeConstraint = (index: number) => {
+		form.setValue(
+			"Constraints",
+			constraints.filter((_: string, i: number) => i !== index),
+		);
+	};
+
+	const addPreference = () => {
+		form.setValue("Preferences", [...preferences, { SpreadDescriptor: "" }]);
+	};
+
+	const updatePreference = (index: number, value: string) => {
+		const newPreferences = [...preferences];
+		if (newPreferences[index]) {
+			newPreferences[index].SpreadDescriptor = value;
+			form.setValue("Preferences", newPreferences);
+		}
+	};
+
+	const removePreference = (index: number) => {
+		form.setValue(
+			"Preferences",
+			preferences.filter((_: any, i: number) => i !== index),
+		);
+	};
+
+	const addPlatform = () => {
+		form.setValue("Platforms", [...platforms, { Architecture: "", OS: "" }]);
+	};
+
+	const updatePlatform = (
+		index: number,
+		field: "Architecture" | "OS",
+		value: string,
+	) => {
+		const newPlatforms = [...platforms];
+		if (newPlatforms[index]) {
+			newPlatforms[index][field] = value;
+			form.setValue("Platforms", newPlatforms);
+		}
+	};
+
+	const removePlatform = (index: number) => {
+		form.setValue(
+			"Platforms",
+			platforms.filter((_: any, i: number) => i !== index),
+		);
+	};
+
+	return (
+		<Form {...form}>
+			<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+				<div>
+					<FormLabel>Constraints</FormLabel>
+					<FormDescription>
+						Placement constraints (e.g., "node.role==manager")
+					</FormDescription>
+					<div className="space-y-2 mt-2">
+						{constraints.map((constraint: string, index: number) => (
+							<div key={index} className="flex gap-2">
+								<Input
+									value={constraint}
+									onChange={(e) => updateConstraint(index, e.target.value)}
+									placeholder="node.role==manager"
+								/>
+								<Button
+									type="button"
+									variant="destructive"
+									size="sm"
+									onClick={() => removeConstraint(index)}
+								>
+									Remove
+								</Button>
+							</div>
+						))}
+						<Button
+							type="button"
+							variant="outline"
+							size="sm"
+							onClick={addConstraint}
+						>
+							Add Constraint
+						</Button>
+					</div>
+				</div>
+
+				<div>
+					<FormLabel>Preferences</FormLabel>
+					<FormDescription>
+						Spread preferences for task distribution (e.g.,
+						"node.labels.region")
+					</FormDescription>
+					<div className="space-y-2 mt-2">
+						{preferences.map((pref: any, index: number) => (
+							<div key={index} className="flex gap-2">
+								<Input
+									value={pref.SpreadDescriptor}
+									onChange={(e) => updatePreference(index, e.target.value)}
+									placeholder="node.labels.region"
+								/>
+								<Button
+									type="button"
+									variant="destructive"
+									size="sm"
+									onClick={() => removePreference(index)}
+								>
+									Remove
+								</Button>
+							</div>
+						))}
+						<Button
+							type="button"
+							variant="outline"
+							size="sm"
+							onClick={addPreference}
+						>
+							Add Preference
+						</Button>
+					</div>
+				</div>
+
+				<FormField
+					control={form.control}
+					name="MaxReplicas"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Max Replicas</FormLabel>
+							<FormDescription>
+								Maximum number of replicas per node
+							</FormDescription>
+							<FormControl>
+								<Input type="number" placeholder="10" {...field} />
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<div>
+					<FormLabel>Platforms</FormLabel>
+					<FormDescription>
+						Target platforms for task scheduling
+					</FormDescription>
+					<div className="space-y-2 mt-2">
+						{platforms.map((platform: any, index: number) => (
+							<div key={index} className="flex gap-2">
+								<Input
+									value={platform.Architecture}
+									onChange={(e) =>
+										updatePlatform(index, "Architecture", e.target.value)
+									}
+									placeholder="amd64"
+								/>
+								<Input
+									value={platform.OS}
+									onChange={(e) => updatePlatform(index, "OS", e.target.value)}
+									placeholder="linux"
+								/>
+								<Button
+									type="button"
+									variant="destructive"
+									size="sm"
+									onClick={() => removePlatform(index)}
+								>
+									Remove
+								</Button>
+							</div>
+						))}
+						<Button
+							type="button"
+							variant="outline"
+							size="sm"
+							onClick={addPlatform}
+						>
+							Add Platform
+						</Button>
+					</div>
+				</div>
+
+				<div className="flex justify-end gap-2">
+					<Button
+						type="button"
+						variant="outline"
+						onClick={() => {
+							form.reset({
+								Constraints: [],
+								Preferences: [],
+								MaxReplicas: undefined,
+								Platforms: [],
+							});
+						}}
+					>
+						Clear
+					</Button>
+					<Button type="submit" isLoading={isLoading}>
+						Save Placement
+					</Button>
+				</div>
+			</form>
+		</Form>
+	);
+};
diff --git a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/restart-policy-form.tsx b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/restart-policy-form.tsx
new file mode 100644
index 000000000..395855231
--- /dev/null
+++ b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/restart-policy-form.tsx
@@ -0,0 +1,219 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { api } from "@/utils/api";
+
+export const restartPolicyFormSchema = z.object({
+	Condition: z.string().optional(),
+	Delay: z.coerce.number().optional(),
+	MaxAttempts: z.coerce.number().optional(),
+	Window: z.coerce.number().optional(),
+});
+
+interface RestartPolicyFormProps {
+	id: string;
+	type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
+}
+
+export const RestartPolicyForm = ({ id, type }: RestartPolicyFormProps) => {
+	const [isLoading, setIsLoading] = useState(false);
+
+	const queryMap = {
+		postgres: () =>
+			api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
+		redis: () => api.redis.one.useQuery({ redisId: id }, { enabled: !!id }),
+		mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
+		mariadb: () =>
+			api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
+		application: () =>
+			api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
+		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
+	};
+	const { data, refetch } = queryMap[type]
+		? queryMap[type]()
+		: api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id });
+
+	const mutationMap = {
+		postgres: () => api.postgres.update.useMutation(),
+		redis: () => api.redis.update.useMutation(),
+		mysql: () => api.mysql.update.useMutation(),
+		mariadb: () => api.mariadb.update.useMutation(),
+		application: () => api.application.update.useMutation(),
+		mongo: () => api.mongo.update.useMutation(),
+	};
+
+	const { mutateAsync } = mutationMap[type]
+		? mutationMap[type]()
+		: api.mongo.update.useMutation();
+
+	const form = useForm<any>({
+		resolver: zodResolver(restartPolicyFormSchema),
+		defaultValues: {
+			Condition: undefined,
+			Delay: undefined,
+			MaxAttempts: undefined,
+			Window: undefined,
+		},
+	});
+
+	useEffect(() => {
+		if (data?.restartPolicySwarm) {
+			form.reset({
+				Condition: data.restartPolicySwarm.Condition,
+				Delay: data.restartPolicySwarm.Delay,
+				MaxAttempts: data.restartPolicySwarm.MaxAttempts,
+				Window: data.restartPolicySwarm.Window,
+			});
+		}
+	}, [data, form]);
+
+	const onSubmit = async (
+		formData: z.infer<typeof restartPolicyFormSchema>,
+	) => {
+		setIsLoading(true);
+		try {
+			// Check if all values are empty, if so, send null to clear the database
+			const hasAnyValue = Object.values(formData).some(
+				value => value !== undefined && value !== null && value !== ""
+			);
+
+			await mutateAsync({
+				applicationId: id || "",
+				postgresId: id || "",
+				redisId: id || "",
+				mysqlId: id || "",
+				mariadbId: id || "",
+				mongoId: id || "",
+				restartPolicySwarm: hasAnyValue ? formData : null,
+			});
+
+			toast.success("Restart policy updated successfully");
+			refetch();
+		} catch {
+			toast.error("Error updating restart policy");
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	return (
+		<Form {...form}>
+			<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+				<FormField
+					control={form.control}
+					name="Condition"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Condition</FormLabel>
+							<FormDescription>When to restart the container</FormDescription>
+							<Select onValueChange={field.onChange} value={field.value}>
+								<FormControl>
+									<SelectTrigger>
+										<SelectValue placeholder="Select restart condition" />
+									</SelectTrigger>
+								</FormControl>
+								<SelectContent>
+									<SelectItem value="none">None</SelectItem>
+									<SelectItem value="on-failure">On Failure</SelectItem>
+									<SelectItem value="any">Any</SelectItem>
+								</SelectContent>
+							</Select>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name="Delay"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Delay (nanoseconds)</FormLabel>
+							<FormDescription>
+								Wait time between restart attempts
+							</FormDescription>
+							<FormControl>
+								<Input type="number" placeholder="10000000000" {...field} />
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name="MaxAttempts"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Max Attempts</FormLabel>
+							<FormDescription>
+								Maximum number of restart attempts
+							</FormDescription>
+							<FormControl>
+								<Input type="number" placeholder="3" {...field} />
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name="Window"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Window (nanoseconds)</FormLabel>
+							<FormDescription>
+								Time window to evaluate restart policy
+							</FormDescription>
+							<FormControl>
+								<Input type="number" placeholder="10000000000" {...field} />
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<div className="flex justify-end gap-2">
+					<Button
+						type="button"
+						variant="outline"
+						onClick={() => {
+							form.reset({
+								Condition: undefined,
+								Delay: undefined,
+								MaxAttempts: undefined,
+								Window: undefined,
+							});
+						}}
+					>
+						Clear
+					</Button>
+					<Button type="submit" isLoading={isLoading}>
+						Save Restart Policy
+					</Button>
+				</div>
+			</form>
+		</Form>
+	);
+};
diff --git a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/rollback-config-form.tsx b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/rollback-config-form.tsx
new file mode 100644
index 000000000..3f298a7e8
--- /dev/null
+++ b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/rollback-config-form.tsx
@@ -0,0 +1,257 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { api } from "@/utils/api";
+
+export const rollbackConfigFormSchema = z.object({
+	Parallelism: z.coerce.number().optional(),
+	Delay: z.coerce.number().optional(),
+	FailureAction: z.string().optional(),
+	Monitor: z.coerce.number().optional(),
+	MaxFailureRatio: z.coerce.number().optional(),
+	Order: z.string().optional(),
+});
+
+interface RollbackConfigFormProps {
+	id: string;
+	type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
+}
+
+export const RollbackConfigForm = ({ id, type }: RollbackConfigFormProps) => {
+	const [isLoading, setIsLoading] = useState(false);
+
+	const queryMap = {
+		postgres: () =>
+			api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
+		redis: () => api.redis.one.useQuery({ redisId: id }, { enabled: !!id }),
+		mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
+		mariadb: () =>
+			api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
+		application: () =>
+			api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
+		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
+	};
+	const { data, refetch } = queryMap[type]
+		? queryMap[type]()
+		: api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id });
+
+	const mutationMap = {
+		postgres: () => api.postgres.update.useMutation(),
+		redis: () => api.redis.update.useMutation(),
+		mysql: () => api.mysql.update.useMutation(),
+		mariadb: () => api.mariadb.update.useMutation(),
+		application: () => api.application.update.useMutation(),
+		mongo: () => api.mongo.update.useMutation(),
+	};
+
+	const { mutateAsync } = mutationMap[type]
+		? mutationMap[type]()
+		: api.mongo.update.useMutation();
+
+	const form = useForm<any>({
+		resolver: zodResolver(rollbackConfigFormSchema),
+		defaultValues: {
+			Parallelism: undefined,
+			Delay: undefined,
+			FailureAction: undefined,
+			Monitor: undefined,
+			MaxFailureRatio: undefined,
+			Order: undefined,
+		},
+	});
+
+	useEffect(() => {
+		if (data?.rollbackConfigSwarm) {
+			form.reset(data.rollbackConfigSwarm);
+		}
+	}, [data, form]);
+
+	const onSubmit = async (
+		formData: z.infer<typeof rollbackConfigFormSchema>,
+	) => {
+		setIsLoading(true);
+		try {
+			// Check if all values are empty, if so, send null to clear the database
+			const hasAnyValue = Object.values(formData).some(
+				value => value !== undefined && value !== null && value !== ""
+			);
+
+			await mutateAsync({
+				applicationId: id || "",
+				postgresId: id || "",
+				redisId: id || "",
+				mysqlId: id || "",
+				mariadbId: id || "",
+				mongoId: id || "",
+				rollbackConfigSwarm: hasAnyValue ? formData : null,
+			});
+
+			toast.success("Rollback config updated successfully");
+			refetch();
+		} catch {
+			toast.error("Error updating rollback config");
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	return (
+		<Form {...form}>
+			<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+				<FormField
+					control={form.control}
+					name="Parallelism"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Parallelism</FormLabel>
+							<FormDescription>
+								Number of tasks to rollback simultaneously
+							</FormDescription>
+							<FormControl>
+								<Input type="number" placeholder="1" {...field} />
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name="Delay"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Delay (nanoseconds)</FormLabel>
+							<FormDescription>Delay between task rollbacks</FormDescription>
+							<FormControl>
+								<Input type="number" placeholder="10000000000" {...field} />
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name="FailureAction"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Failure Action</FormLabel>
+							<FormDescription>Action on rollback failure</FormDescription>
+							<Select onValueChange={field.onChange} value={field.value}>
+								<FormControl>
+									<SelectTrigger>
+										<SelectValue placeholder="Select failure action" />
+									</SelectTrigger>
+								</FormControl>
+								<SelectContent>
+									<SelectItem value="pause">Pause</SelectItem>
+									<SelectItem value="continue">Continue</SelectItem>
+								</SelectContent>
+							</Select>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name="Monitor"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Monitor (nanoseconds)</FormLabel>
+							<FormDescription>
+								Duration to monitor for failure after rollback
+							</FormDescription>
+							<FormControl>
+								<Input type="number" placeholder="10000000000" {...field} />
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name="MaxFailureRatio"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Max Failure Ratio</FormLabel>
+							<FormDescription>
+								Maximum failure ratio tolerated (0-1)
+							</FormDescription>
+							<FormControl>
+								<Input type="number" step="0.01" placeholder="0.1" {...field} />
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name="Order"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Order</FormLabel>
+							<FormDescription>Rollback order strategy</FormDescription>
+							<Select onValueChange={field.onChange} value={field.value}>
+								<FormControl>
+									<SelectTrigger>
+										<SelectValue placeholder="Select order" />
+									</SelectTrigger>
+								</FormControl>
+								<SelectContent>
+									<SelectItem value="stop-first">Stop First</SelectItem>
+									<SelectItem value="start-first">Start First</SelectItem>
+								</SelectContent>
+							</Select>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<div className="flex justify-end gap-2">
+					<Button
+						type="button"
+						variant="outline"
+						onClick={() => {
+							form.reset({
+								Parallelism: undefined,
+								Delay: undefined,
+								FailureAction: undefined,
+								Monitor: undefined,
+								MaxFailureRatio: undefined,
+								Order: undefined,
+							});
+						}}
+					>
+						Clear
+					</Button>
+					<Button type="submit" isLoading={isLoading}>
+						Save Rollback Config
+					</Button>
+				</div>
+			</form>
+		</Form>
+	);
+};
diff --git a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/stop-grace-period-form.tsx b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/stop-grace-period-form.tsx
new file mode 100644
index 000000000..30194557b
--- /dev/null
+++ b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/stop-grace-period-form.tsx
@@ -0,0 +1,152 @@
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { api } from "@/utils/api";
+
+const hasStopGracePeriodSwarm = (
+	value: unknown,
+): value is { stopGracePeriodSwarm: bigint | number | string | null } =>
+	typeof value === "object" &&
+	value !== null &&
+	"stopGracePeriodSwarm" in value;
+
+interface StopGracePeriodFormProps {
+	id: string;
+	type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
+}
+
+export const StopGracePeriodForm = ({ id, type }: StopGracePeriodFormProps) => {
+	const [isLoading, setIsLoading] = useState(false);
+
+	const queryMap = {
+		postgres: () =>
+			api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
+		redis: () => api.redis.one.useQuery({ redisId: id }, { enabled: !!id }),
+		mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
+		mariadb: () =>
+			api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
+		application: () =>
+			api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
+		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
+	};
+	const { data, refetch } = queryMap[type]
+		? queryMap[type]()
+		: api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id });
+
+	const mutationMap = {
+		postgres: () => api.postgres.update.useMutation(),
+		redis: () => api.redis.update.useMutation(),
+		mysql: () => api.mysql.update.useMutation(),
+		mariadb: () => api.mariadb.update.useMutation(),
+		application: () => api.application.update.useMutation(),
+		mongo: () => api.mongo.update.useMutation(),
+	};
+
+	const { mutateAsync } = mutationMap[type]
+		? mutationMap[type]()
+		: api.mongo.update.useMutation();
+
+	const form = useForm<any>({
+		defaultValues: {
+			value: null as bigint | null,
+		},
+	});
+
+	useEffect(() => {
+		if (hasStopGracePeriodSwarm(data)) {
+			const value = data.stopGracePeriodSwarm;
+			const normalizedValue =
+				value === null || value === undefined
+					? null
+					: typeof value === "bigint"
+						? value
+						: BigInt(value);
+			form.reset({
+				value: normalizedValue,
+			});
+		}
+	}, [data, form]);
+
+	const onSubmit = async (formData: any) => {
+		setIsLoading(true);
+		try {
+			await mutateAsync({
+				applicationId: id || "",
+				postgresId: id || "",
+				redisId: id || "",
+				mysqlId: id || "",
+				mariadbId: id || "",
+				mongoId: id || "",
+				stopGracePeriodSwarm: formData.value,
+			});
+
+			toast.success("Stop grace period updated successfully");
+			refetch();
+		} catch {
+			toast.error("Error updating stop grace period");
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	return (
+		<Form {...form}>
+			<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+				<FormField
+					control={form.control}
+					name="value"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Stop Grace Period (nanoseconds)</FormLabel>
+							<FormDescription>
+								Time to wait before forcefully killing the container
+								<br />
+								Examples: 30000000000 (30s), 120000000000 (2m)
+							</FormDescription>
+							<FormControl>
+								<Input
+									type="number"
+									placeholder="30000000000"
+									{...field}
+									value={field?.value !== null && field?.value !== undefined ? field.value.toString() : ""}
+									onChange={(e) =>
+										field.onChange(e.target.value ? BigInt(e.target.value) : null)
+									}
+								/>
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<div className="flex justify-end gap-2">
+					<Button
+						type="button"
+						variant="outline"
+						onClick={() => {
+							form.reset({
+								value: null,
+							});
+						}}
+					>
+						Clear
+					</Button>
+					<Button type="submit" isLoading={isLoading}>
+						Save Stop Grace Period
+					</Button>
+				</div>
+			</form>
+		</Form>
+	);
+};
diff --git a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/update-config-form.tsx b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/update-config-form.tsx
new file mode 100644
index 000000000..f756e47e1
--- /dev/null
+++ b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/update-config-form.tsx
@@ -0,0 +1,264 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { api } from "@/utils/api";
+
+export const updateConfigFormSchema = z.object({
+	Parallelism: z.coerce.number().optional(),
+	Delay: z.coerce.number().optional(),
+	FailureAction: z.string().optional(),
+	Monitor: z.coerce.number().optional(),
+	MaxFailureRatio: z.coerce.number().optional(),
+	Order: z.string().optional(),
+});
+
+interface UpdateConfigFormProps {
+	id: string;
+	type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
+}
+
+export const UpdateConfigForm = ({ id, type }: UpdateConfigFormProps) => {
+	const [isLoading, setIsLoading] = useState(false);
+
+	const queryMap = {
+		postgres: () =>
+			api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
+		redis: () => api.redis.one.useQuery({ redisId: id }, { enabled: !!id }),
+		mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
+		mariadb: () =>
+			api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
+		application: () =>
+			api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
+		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
+	};
+	const { data, refetch } = queryMap[type]
+		? queryMap[type]()
+		: api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id });
+
+	const mutationMap = {
+		postgres: () => api.postgres.update.useMutation(),
+		redis: () => api.redis.update.useMutation(),
+		mysql: () => api.mysql.update.useMutation(),
+		mariadb: () => api.mariadb.update.useMutation(),
+		application: () => api.application.update.useMutation(),
+		mongo: () => api.mongo.update.useMutation(),
+	};
+
+	const { mutateAsync } = mutationMap[type]
+		? mutationMap[type]()
+		: api.mongo.update.useMutation();
+
+	const form = useForm<any>({
+		resolver: zodResolver(updateConfigFormSchema),
+		defaultValues: {
+			Parallelism: undefined,
+			Delay: undefined,
+			FailureAction: undefined,
+			Monitor: undefined,
+			MaxFailureRatio: undefined,
+			Order: undefined,
+		},
+	});
+
+	useEffect(() => {
+		if (data?.updateConfigSwarm) {
+			const config = data.updateConfigSwarm;
+			form.reset({
+				Parallelism: config.Parallelism,
+				Delay: config.Delay,
+				FailureAction: config.FailureAction,
+				Monitor: config.Monitor,
+				MaxFailureRatio: config.MaxFailureRatio,
+				Order: config.Order,
+			});
+		}
+	}, [data, form]);
+
+	const onSubmit = async (formData: z.infer<typeof updateConfigFormSchema>) => {
+		setIsLoading(true);
+		try {
+			// Check if all values are empty, if so, send null to clear the database
+			const hasAnyValue = Object.values(formData).some(
+				value => value !== undefined && value !== null && value !== ""
+			);
+
+			await mutateAsync({
+				applicationId: id || "",
+				postgresId: id || "",
+				redisId: id || "",
+				mysqlId: id || "",
+				mariadbId: id || "",
+				mongoId: id || "",
+				updateConfigSwarm: hasAnyValue ? formData : null,
+			});
+
+			toast.success("Update config updated successfully");
+			refetch();
+		} catch {
+			toast.error("Error updating update config");
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	return (
+		<Form {...form}>
+			<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+				<FormField
+					control={form.control}
+					name="Parallelism"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Parallelism</FormLabel>
+							<FormDescription>
+								Number of tasks to update simultaneously
+							</FormDescription>
+							<FormControl>
+								<Input type="number" placeholder="1" {...field} />
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name="Delay"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Delay (nanoseconds)</FormLabel>
+							<FormDescription>Delay between task updates</FormDescription>
+							<FormControl>
+								<Input type="number" placeholder="10000000000" {...field} />
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name="FailureAction"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Failure Action</FormLabel>
+							<FormDescription>Action on update failure</FormDescription>
+							<Select onValueChange={field.onChange} value={field.value}>
+								<FormControl>
+									<SelectTrigger>
+										<SelectValue placeholder="Select failure action" />
+									</SelectTrigger>
+								</FormControl>
+								<SelectContent>
+									<SelectItem value="pause">Pause</SelectItem>
+									<SelectItem value="continue">Continue</SelectItem>
+									<SelectItem value="rollback">Rollback</SelectItem>
+								</SelectContent>
+							</Select>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name="Monitor"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Monitor (nanoseconds)</FormLabel>
+							<FormDescription>
+								Duration to monitor for failure after update
+							</FormDescription>
+							<FormControl>
+								<Input type="number" placeholder="10000000000" {...field} />
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name="MaxFailureRatio"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Max Failure Ratio</FormLabel>
+							<FormDescription>
+								Maximum failure ratio tolerated (0-1)
+							</FormDescription>
+							<FormControl>
+								<Input type="number" step="0.01" placeholder="0.1" {...field} />
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name="Order"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Order</FormLabel>
+							<FormDescription>Update order strategy</FormDescription>
+							<Select onValueChange={field.onChange} value={field.value}>
+								<FormControl>
+									<SelectTrigger>
+										<SelectValue placeholder="Select order" />
+									</SelectTrigger>
+								</FormControl>
+								<SelectContent>
+									<SelectItem value="stop-first">Stop First</SelectItem>
+									<SelectItem value="start-first">Start First</SelectItem>
+								</SelectContent>
+							</Select>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<div className="flex justify-end gap-2">
+					<Button
+						type="button"
+						variant="outline"
+						onClick={() => {
+							form.reset({
+								Parallelism: undefined,
+								Delay: undefined,
+								FailureAction: undefined,
+								Monitor: undefined,
+								MaxFailureRatio: undefined,
+								Order: undefined,
+							});
+						}}
+					>
+						Clear
+					</Button>
+					<Button type="submit" isLoading={isLoading}>
+						Save Update Config
+					</Button>
+				</div>
+			</form>
+		</Form>
+	);
+};
diff --git a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/utils.ts b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/utils.ts
new file mode 100644
index 000000000..b6120ec9b
--- /dev/null
+++ b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/utils.ts
@@ -0,0 +1,26 @@
+/**
+ * Filters out undefined, null, and empty string values from form data
+ * Only returns fields that have actual values
+ */
+export const filterEmptyValues = (formData: Record<string, any>): Record<string, any> => {
+	return Object.entries(formData).reduce((acc, [key, value]) => {
+		// Keep arrays even if empty (they might be intentionally cleared)
+		if (Array.isArray(value)) {
+			if (value.length > 0) {
+				acc[key] = value;
+			}
+		}
+		// For other values, filter out undefined, null, and empty strings
+		else if (value !== undefined && value !== null && value !== "") {
+			acc[key] = value;
+		}
+		return acc;
+	}, {} as Record<string, any>);
+};
+
+/**
+ * Checks if filtered data has any values to save
+ */
+export const hasValues = (data: Record<string, any>): boolean => {
+	return Object.keys(data).length > 0;
+};

From a0d8eb9380d613b199191d84856e39f0e1a29380 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <siumauricio@icloud.com>
Date: Tue, 20 Jan 2026 16:02:11 +0100
Subject: [PATCH 2/4] fix(labels-form): improve readability of labelsToSend
 assignment

---
 .../application/advanced/cluster/swarm-forms/labels-form.tsx   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/labels-form.tsx b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/labels-form.tsx
index db173313b..d1681dcd0 100644
--- a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/labels-form.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/labels-form.tsx
@@ -102,7 +102,8 @@ export const LabelsForm = ({ id, type }: LabelsFormProps) => {
 				) || {};
 
 			// If no labels, send null to clear the database
-			const labelsToSend = Object.keys(labelsObject).length > 0 ? labelsObject : null;
+			const labelsToSend =
+				Object.keys(labelsObject).length > 0 ? labelsObject : null;
 
 			await mutateAsync({
 				applicationId: id || "",

From 7e48b2cf29687a4e2ec4e9281eeec6830adab598 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Tue, 20 Jan 2026 15:02:58 +0000
Subject: [PATCH 3/4] [autofix.ci] apply automated fixes

---
 .../swarm-forms/endpoint-spec-form.tsx        |  5 +++-
 .../cluster/swarm-forms/health-check-form.tsx |  2 +-
 .../cluster/swarm-forms/placement-form.tsx    |  2 +-
 .../swarm-forms/restart-policy-form.tsx       |  2 +-
 .../swarm-forms/rollback-config-form.tsx      |  2 +-
 .../swarm-forms/stop-grace-period-form.tsx    | 10 +++++--
 .../swarm-forms/update-config-form.tsx        |  2 +-
 .../advanced/cluster/swarm-forms/utils.ts     | 29 +++++++++++--------
 8 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/endpoint-spec-form.tsx b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/endpoint-spec-form.tsx
index 9bd6735c3..7ee31e5b6 100644
--- a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/endpoint-spec-form.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/endpoint-spec-form.tsx
@@ -82,7 +82,10 @@ export const EndpointSpecForm = ({ id, type }: EndpointSpecFormProps) => {
 		setIsLoading(true);
 		try {
 			// Check if all values are empty, if so, send null to clear the database
-			const hasAnyValue = formData.Mode !== undefined && formData.Mode !== null && formData.Mode !== "";
+			const hasAnyValue =
+				formData.Mode !== undefined &&
+				formData.Mode !== null &&
+				formData.Mode !== "";
 
 			await mutateAsync({
 				applicationId: id || "",
diff --git a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/health-check-form.tsx b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/health-check-form.tsx
index 378be5dbb..b2fc49ef3 100644
--- a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/health-check-form.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/health-check-form.tsx
@@ -90,7 +90,7 @@ export const HealthCheckForm = ({ id, type }: HealthCheckFormProps) => {
 		setIsLoading(true);
 		try {
 			// Check if all values are empty, if so, send null to clear the database
-			const hasAnyValue = 
+			const hasAnyValue =
 				(formData.Test && formData.Test.length > 0) ||
 				formData.Interval !== undefined ||
 				formData.Timeout !== undefined ||
diff --git a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/placement-form.tsx b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/placement-form.tsx
index 7c2ef074c..b0c354513 100644
--- a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/placement-form.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/placement-form.tsx
@@ -103,7 +103,7 @@ export const PlacementForm = ({ id, type }: PlacementFormProps) => {
 		setIsLoading(true);
 		try {
 			// Check if all values are empty, if so, send null to clear the database
-			const hasAnyValue = 
+			const hasAnyValue =
 				(formData.Constraints && formData.Constraints.length > 0) ||
 				(formData.Preferences && formData.Preferences.length > 0) ||
 				(formData.Platforms && formData.Platforms.length > 0) ||
diff --git a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/restart-policy-form.tsx b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/restart-policy-form.tsx
index 395855231..b7fb649be 100644
--- a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/restart-policy-form.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/restart-policy-form.tsx
@@ -94,7 +94,7 @@ export const RestartPolicyForm = ({ id, type }: RestartPolicyFormProps) => {
 		try {
 			// Check if all values are empty, if so, send null to clear the database
 			const hasAnyValue = Object.values(formData).some(
-				value => value !== undefined && value !== null && value !== ""
+				(value) => value !== undefined && value !== null && value !== "",
 			);
 
 			await mutateAsync({
diff --git a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/rollback-config-form.tsx b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/rollback-config-form.tsx
index 3f298a7e8..c9c6ad128 100644
--- a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/rollback-config-form.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/rollback-config-form.tsx
@@ -93,7 +93,7 @@ export const RollbackConfigForm = ({ id, type }: RollbackConfigFormProps) => {
 		try {
 			// Check if all values are empty, if so, send null to clear the database
 			const hasAnyValue = Object.values(formData).some(
-				value => value !== undefined && value !== null && value !== ""
+				(value) => value !== undefined && value !== null && value !== "",
 			);
 
 			await mutateAsync({
diff --git a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/stop-grace-period-form.tsx b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/stop-grace-period-form.tsx
index 30194557b..a324da31b 100644
--- a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/stop-grace-period-form.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/stop-grace-period-form.tsx
@@ -119,9 +119,15 @@ export const StopGracePeriodForm = ({ id, type }: StopGracePeriodFormProps) => {
 									type="number"
 									placeholder="30000000000"
 									{...field}
-									value={field?.value !== null && field?.value !== undefined ? field.value.toString() : ""}
+									value={
+										field?.value !== null && field?.value !== undefined
+											? field.value.toString()
+											: ""
+									}
 									onChange={(e) =>
-										field.onChange(e.target.value ? BigInt(e.target.value) : null)
+										field.onChange(
+											e.target.value ? BigInt(e.target.value) : null,
+										)
 									}
 								/>
 							</FormControl>
diff --git a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/update-config-form.tsx b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/update-config-form.tsx
index f756e47e1..26c42adff 100644
--- a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/update-config-form.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/update-config-form.tsx
@@ -99,7 +99,7 @@ export const UpdateConfigForm = ({ id, type }: UpdateConfigFormProps) => {
 		try {
 			// Check if all values are empty, if so, send null to clear the database
 			const hasAnyValue = Object.values(formData).some(
-				value => value !== undefined && value !== null && value !== ""
+				(value) => value !== undefined && value !== null && value !== "",
 			);
 
 			await mutateAsync({
diff --git a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/utils.ts b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/utils.ts
index b6120ec9b..58793c02e 100644
--- a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/utils.ts
+++ b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/utils.ts
@@ -2,20 +2,25 @@
  * Filters out undefined, null, and empty string values from form data
  * Only returns fields that have actual values
  */
-export const filterEmptyValues = (formData: Record<string, any>): Record<string, any> => {
-	return Object.entries(formData).reduce((acc, [key, value]) => {
-		// Keep arrays even if empty (they might be intentionally cleared)
-		if (Array.isArray(value)) {
-			if (value.length > 0) {
+export const filterEmptyValues = (
+	formData: Record<string, any>,
+): Record<string, any> => {
+	return Object.entries(formData).reduce(
+		(acc, [key, value]) => {
+			// Keep arrays even if empty (they might be intentionally cleared)
+			if (Array.isArray(value)) {
+				if (value.length > 0) {
+					acc[key] = value;
+				}
+			}
+			// For other values, filter out undefined, null, and empty strings
+			else if (value !== undefined && value !== null && value !== "") {
 				acc[key] = value;
 			}
-		}
-		// For other values, filter out undefined, null, and empty strings
-		else if (value !== undefined && value !== null && value !== "") {
-			acc[key] = value;
-		}
-		return acc;
-	}, {} as Record<string, any>);
+			return acc;
+		},
+		{} as Record<string, any>,
+	);
 };
 
 /**

From a76147d820e53236c370e5e750c9511e6acb4dea Mon Sep 17 00:00:00 2001
From: Mauricio Siu <siumauricio@icloud.com>
Date: Tue, 20 Jan 2026 16:19:12 +0100
Subject: [PATCH 4/4] feat(cluster): enhance swarm settings UI with tooltips
 and documentation links

- Added tooltips to menu items in the swarm settings for better user guidance.
- Included documentation URLs and descriptions for Health Check, Restart Policy, Placement, Update Config, Rollback Config, Mode, Labels, Stop Grace Period, and Endpoint Spec.
- Updated type assertions in rollback and update config forms for improved type safety.
---
 .../cluster/modify-swarm-settings.tsx         | 115 +++++++++++++++---
 .../swarm-forms/rollback-config-form.tsx      |   2 +-
 .../swarm-forms/update-config-form.tsx        |   2 +-
 3 files changed, 98 insertions(+), 21 deletions(-)

diff --git a/apps/dokploy/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx b/apps/dokploy/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx
index 5721132a7..aa96d320d 100644
--- a/apps/dokploy/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx
@@ -1,4 +1,4 @@
-import { Settings } from "lucide-react";
+import { ExternalLink, Settings } from "lucide-react";
 import { useState } from "react";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
@@ -10,6 +10,12 @@ import {
 	DialogTitle,
 	DialogTrigger,
 } from "@/components/ui/dialog";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import {
 	EndpointSpecForm,
@@ -27,6 +33,8 @@ type MenuItem = {
 	id: string;
 	label: string;
 	description: string;
+	docUrl?: string;
+	docDescription?: string;
 };
 
 const menuItems: MenuItem[] = [
@@ -34,38 +42,81 @@ const menuItems: MenuItem[] = [
 		id: "health-check",
 		label: "Health Check",
 		description: "Configure health check settings",
+		docUrl:
+			"https://docs.docker.com/reference/cli/docker/service/create/#healthcheck",
+		docDescription:
+			"Configure HEALTHCHECK to test a container's health. Determines if a container is healthy by running a command inside the container.",
 	},
 	{
 		id: "restart-policy",
 		label: "Restart Policy",
 		description: "Configure restart policy",
+		docUrl:
+			"https://docs.docker.com/reference/cli/docker/service/create/#restart-policy",
+		docDescription:
+			"Configure the restart policy for containers in the service. Controls when and how containers should be restarted.",
 	},
 	{
 		id: "placement",
 		label: "Placement",
 		description: "Configure placement constraints",
+		docUrl:
+			"https://docs.docker.com/reference/cli/docker/service/create/#placement-pref",
+		docDescription:
+			"Control which nodes service tasks can be scheduled on. Use constraints, preferences, and platform specifications.",
 	},
 	{
 		id: "update-config",
 		label: "Update Config",
 		description: "Configure update strategy",
+		docUrl:
+			"https://docs.docker.com/reference/cli/docker/service/create/#update-config",
+		docDescription:
+			"Configure how the service should be updated. Controls parallelism, delay, failure action, and order of updates.",
 	},
 	{
 		id: "rollback-config",
 		label: "Rollback Config",
 		description: "Configure rollback strategy",
+		docUrl:
+			"https://docs.docker.com/reference/cli/docker/service/create/#rollback-config",
+		docDescription:
+			"Configure automated rollback on update failure. Similar to update config but applies to rollback operations.",
+	},
+	{
+		id: "mode",
+		label: "Mode",
+		description: "Configure service mode",
+		docUrl: "https://docs.docker.com/reference/cli/docker/service/create/#mode",
+		docDescription:
+			"Set service mode to either 'replicated' (default) with a specified number of tasks, or 'global' (one task per node).",
+	},
+	{
+		id: "labels",
+		label: "Labels",
+		description: "Configure service labels",
+		docUrl:
+			"https://docs.docker.com/reference/cli/docker/service/create/#label",
+		docDescription:
+			"Add metadata to services using labels. Labels are key-value pairs for organizing and filtering services.",
 	},
-	{ id: "mode", label: "Mode", description: "Configure service mode" },
-	{ id: "labels", label: "Labels", description: "Configure service labels" },
 	{
 		id: "stop-grace-period",
 		label: "Stop Grace Period",
 		description: "Configure stop grace period",
+		docUrl:
+			"https://docs.docker.com/reference/cli/docker/service/create/#stop-grace-period",
+		docDescription:
+			"Time to wait before forcefully killing a container. Given in nanoseconds. Default is 10 seconds.",
 	},
 	{
 		id: "endpoint-spec",
 		label: "Endpoint Spec",
 		description: "Configure endpoint specification",
+		docUrl:
+			"https://docs.docker.com/reference/cli/docker/service/create/#endpoint-mode",
+		docDescription:
+			"Configure endpoint mode for service discovery. Choose between 'vip' (virtual IP) or 'dnsrr' (DNS round-robin).",
 	},
 ];
 
@@ -110,22 +161,48 @@ export const AddSwarmSettings = ({ id, type }: Props) => {
 					{/* Left Column - Menu */}
 					<div className="w-64 flex-shrink-0 border-r pr-4 overflow-y-auto">
 						<nav className="space-y-1">
-							{menuItems.map((item) => (
-								<button
-									key={item.id}
-									type="button"
-									onClick={() => setActiveMenu(item.id)}
-									className={cn(
-										"w-full text-left px-3 py-2 rounded-md text-sm transition-colors",
-										activeMenu === item.id
-											? "bg-primary text-primary-foreground"
-											: "hover:bg-muted",
-									)}
-								>
-									<div className="font-medium">{item.label}</div>
-									<div className="text-xs opacity-80">{item.description}</div>
-								</button>
-							))}
+							<TooltipProvider>
+								{menuItems.map((item) => (
+									<div key={item.id} className="relative group">
+										<button
+											type="button"
+											onClick={() => setActiveMenu(item.id)}
+											className={cn(
+												"w-full text-left px-3 py-2 rounded-md text-sm transition-colors",
+												activeMenu === item.id
+													? "bg-primary text-primary-foreground"
+													: "hover:bg-muted",
+											)}
+										>
+											<div className="flex items-center justify-between gap-2">
+												<div className="flex-1">
+													<div className="font-medium">{item.label}</div>
+													<div className="text-xs opacity-80">
+														{item.description}
+													</div>
+												</div>
+												{item.docUrl && (
+													<Tooltip>
+														<TooltipTrigger asChild>
+															<a
+																href={item.docUrl}
+																target="_blank"
+																rel="noopener noreferrer"
+																onClick={(e) => e.stopPropagation()}
+															>
+																<ExternalLink className="size-3.5" />
+															</a>
+														</TooltipTrigger>
+														<TooltipContent side="right" className="max-w-xs">
+															<p className="text-xs">{item.docDescription}</p>
+														</TooltipContent>
+													</Tooltip>
+												)}
+											</div>
+										</button>
+									</div>
+								))}
+							</TooltipProvider>
 						</nav>
 					</div>
 
diff --git a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/rollback-config-form.tsx b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/rollback-config-form.tsx
index c9c6ad128..d53215348 100644
--- a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/rollback-config-form.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/rollback-config-form.tsx
@@ -103,7 +103,7 @@ export const RollbackConfigForm = ({ id, type }: RollbackConfigFormProps) => {
 				mysqlId: id || "",
 				mariadbId: id || "",
 				mongoId: id || "",
-				rollbackConfigSwarm: hasAnyValue ? formData : null,
+				rollbackConfigSwarm: (hasAnyValue ? formData : null) as any,
 			});
 
 			toast.success("Rollback config updated successfully");
diff --git a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/update-config-form.tsx b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/update-config-form.tsx
index 26c42adff..4119c41f8 100644
--- a/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/update-config-form.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/update-config-form.tsx
@@ -109,7 +109,7 @@ export const UpdateConfigForm = ({ id, type }: UpdateConfigFormProps) => {
 				mysqlId: id || "",
 				mariadbId: id || "",
 				mongoId: id || "",
-				updateConfigSwarm: hasAnyValue ? formData : null,
+				updateConfigSwarm: (hasAnyValue ? formData : null) as any,
 			});
 
 			toast.success("Update config updated successfully");