From d3a54172b5df4f9a68a94622146879baa92e3354 Mon Sep 17 00:00:00 2001
From: Jhon <jhon@stelli.dev>
Date: Sat, 26 Jul 2025 13:53:28 -0300
Subject: [PATCH 1/3] feat(ux): add conditional server selection functionality
 to application forms

---
 .../dashboard/project/add-application.tsx     |  468 +++----
 .../dashboard/project/add-compose.tsx         |  534 ++++----
 .../dashboard/project/add-database.tsx        | 1072 +++++++++--------
 .../dashboard/project/add-template.tsx        |  966 +++++++--------
 .../dashboard/project/ai/step-one.tsx         |   65 +-
 5 files changed, 1562 insertions(+), 1543 deletions(-)

diff --git a/apps/dokploy/components/dashboard/project/add-application.tsx b/apps/dokploy/components/dashboard/project/add-application.tsx
index 9ed31464a..bdf010dc5 100644
--- a/apps/dokploy/components/dashboard/project/add-application.tsx
+++ b/apps/dokploy/components/dashboard/project/add-application.tsx
@@ -1,256 +1,260 @@
-import { AlertBlock } from "@/components/shared/alert-block";
-import { Button } from "@/components/ui/button";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
-import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
-import {
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import {
-	Select,
-	SelectContent,
-	SelectGroup,
-	SelectItem,
-	SelectLabel,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
-import { Textarea } from "@/components/ui/textarea";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { slugify } from "@/lib/slug";
-import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Folder, HelpCircle } from "lucide-react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { slugify } from "@/lib/slug";
+import { api } from "@/utils/api";
 
 const AddTemplateSchema = z.object({
-	name: z.string().min(1, {
-		message: "Name is required",
-	}),
-	appName: z
-		.string()
-		.min(1, {
-			message: "App name is required",
-		})
-		.regex(/^[a-z](?!.*--)([a-z0-9-]*[a-z])?$/, {
-			message:
-				"App name supports lowercase letters, numbers, '-' and can only start and end letters, and does not support continuous '-'",
-		}),
-	description: z.string().optional(),
-	serverId: z.string().optional(),
+  name: z.string().min(1, {
+    message: "Name is required",
+  }),
+  appName: z
+    .string()
+    .min(1, {
+      message: "App name is required",
+    })
+    .regex(/^[a-z](?!.*--)([a-z0-9-]*[a-z])?$/, {
+      message:
+        "App name supports lowercase letters, numbers, '-' and can only start and end letters, and does not support continuous '-'",
+    }),
+  description: z.string().optional(),
+  serverId: z.string().optional(),
 });
 
 type AddTemplate = z.infer<typeof AddTemplateSchema>;
 
 interface Props {
-	projectId: string;
-	projectName?: string;
+  projectId: string;
+  projectName?: string;
 }
 
 export const AddApplication = ({ projectId, projectName }: Props) => {
-	const utils = api.useUtils();
-	const { data: isCloud } = api.settings.isCloud.useQuery();
-	const [visible, setVisible] = useState(false);
-	const slug = slugify(projectName);
-	const { data: servers } = api.server.withSSHKey.useQuery();
+  const utils = api.useUtils();
+  const { data: isCloud } = api.settings.isCloud.useQuery();
+  const [visible, setVisible] = useState(false);
+  const slug = slugify(projectName);
+  const { data: servers } = api.server.withSSHKey.useQuery();
 
-	const { mutateAsync, isLoading, error, isError } =
-		api.application.create.useMutation();
+  const hasServers = servers && servers.length > 0;
 
-	const form = useForm<AddTemplate>({
-		defaultValues: {
-			name: "",
-			appName: `${slug}-`,
-			description: "",
-		},
-		resolver: zodResolver(AddTemplateSchema),
-	});
+  const { mutateAsync, isLoading, error, isError } =
+    api.application.create.useMutation();
 
-	const onSubmit = async (data: AddTemplate) => {
-		await mutateAsync({
-			name: data.name,
-			appName: data.appName,
-			description: data.description,
-			projectId,
-			serverId: data.serverId,
-		})
-			.then(async () => {
-				toast.success("Service Created");
-				form.reset();
-				setVisible(false);
-				await utils.project.one.invalidate({
-					projectId,
-				});
-			})
-			.catch(() => {
-				toast.error("Error creating the service");
-			});
-	};
+  const form = useForm<AddTemplate>({
+    defaultValues: {
+      name: "",
+      appName: `${slug}-`,
+      description: "",
+    },
+    resolver: zodResolver(AddTemplateSchema),
+  });
 
-	return (
-		<Dialog open={visible} onOpenChange={setVisible}>
-			<DialogTrigger className="w-full">
-				<DropdownMenuItem
-					className="w-full cursor-pointer space-x-3"
-					onSelect={(e) => e.preventDefault()}
-				>
-					<Folder className="size-4 text-muted-foreground" />
-					<span>Application</span>
-				</DropdownMenuItem>
-			</DialogTrigger>
-			<DialogContent className="sm:max-w-lg">
-				<DialogHeader>
-					<DialogTitle>Create</DialogTitle>
-					<DialogDescription>
-						Assign a name and description to your application
-					</DialogDescription>
-				</DialogHeader>
-				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
-				<Form {...form}>
-					<form
-						id="hook-form"
-						onSubmit={form.handleSubmit(onSubmit)}
-						className="grid w-full gap-4"
-					>
-						<FormField
-							control={form.control}
-							name="name"
-							render={({ field }) => (
-								<FormItem>
-									<FormLabel>Name</FormLabel>
-									<FormControl>
-										<Input
-											placeholder="Frontend"
-											{...field}
-											onChange={(e) => {
-												const val = e.target.value?.trim() || "";
-												const serviceName = slugify(val);
-												form.setValue("appName", `${slug}-${serviceName}`);
-												field.onChange(val);
-											}}
-										/>
-									</FormControl>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="serverId"
-							render={({ field }) => (
-								<FormItem>
-									<TooltipProvider delayDuration={0}>
-										<Tooltip>
-											<TooltipTrigger asChild>
-												<FormLabel className="break-all w-fit flex flex-row gap-1 items-center">
-													Select a Server {!isCloud ? "(Optional)" : ""}
-													<HelpCircle className="size-4 text-muted-foreground" />
-												</FormLabel>
-											</TooltipTrigger>
-											<TooltipContent
-												className="z-[999] w-[300px]"
-												align="start"
-												side="top"
-											>
-												<span>
-													If no server is selected, the application will be
-													deployed on the server where the user is logged in.
-												</span>
-											</TooltipContent>
-										</Tooltip>
-									</TooltipProvider>
+  const onSubmit = async (data: AddTemplate) => {
+    await mutateAsync({
+      name: data.name,
+      appName: data.appName,
+      description: data.description,
+      projectId,
+      serverId: data.serverId,
+    })
+      .then(async () => {
+        toast.success("Service Created");
+        form.reset();
+        setVisible(false);
+        await utils.project.one.invalidate({
+          projectId,
+        });
+      })
+      .catch(() => {
+        toast.error("Error creating the service");
+      });
+  };
 
-									<Select
-										onValueChange={field.onChange}
-										defaultValue={field.value}
-									>
-										<SelectTrigger>
-											<SelectValue placeholder="Select a Server" />
-										</SelectTrigger>
-										<SelectContent>
-											<SelectGroup>
-												{servers?.map((server) => (
-													<SelectItem
-														key={server.serverId}
-														value={server.serverId}
-													>
-														<span className="flex items-center gap-2 justify-between w-full">
-															<span>{server.name}</span>
-															<span className="text-muted-foreground text-xs self-center">
-																{server.ipAddress}
-															</span>
-														</span>
-													</SelectItem>
-												))}
-												<SelectLabel>Servers ({servers?.length})</SelectLabel>
-											</SelectGroup>
-										</SelectContent>
-									</Select>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="appName"
-							render={({ field }) => (
-								<FormItem>
-									<FormLabel>App Name</FormLabel>
-									<FormControl>
-										<Input placeholder="my-app" {...field} />
-									</FormControl>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="description"
-							render={({ field }) => (
-								<FormItem>
-									<FormLabel>Description</FormLabel>
-									<FormControl>
-										<Textarea
-											placeholder="Description of your service..."
-											className="resize-none"
-											{...field}
-										/>
-									</FormControl>
+  return (
+    <Dialog open={visible} onOpenChange={setVisible}>
+      <DialogTrigger className="w-full">
+        <DropdownMenuItem
+          className="w-full cursor-pointer space-x-3"
+          onSelect={(e) => e.preventDefault()}
+        >
+          <Folder className="size-4 text-muted-foreground" />
+          <span>Application</span>
+        </DropdownMenuItem>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Create</DialogTitle>
+          <DialogDescription>
+            Assign a name and description to your application
+          </DialogDescription>
+        </DialogHeader>
+        {isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+        <Form {...form}>
+          <form
+            id="hook-form"
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="grid w-full gap-4"
+          >
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Name</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="Frontend"
+                      {...field}
+                      onChange={(e) => {
+                        const val = e.target.value?.trim() || "";
+                        const serviceName = slugify(val);
+                        form.setValue("appName", `${slug}-${serviceName}`);
+                        field.onChange(val);
+                      }}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {hasServers && (
+              <FormField
+                control={form.control}
+                name="serverId"
+                render={({ field }) => (
+                  <FormItem>
+                    <TooltipProvider delayDuration={0}>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <FormLabel className="break-all w-fit flex flex-row gap-1 items-center">
+                            Select a Server {!isCloud ? "(Optional)" : ""}
+                            <HelpCircle className="size-4 text-muted-foreground" />
+                          </FormLabel>
+                        </TooltipTrigger>
+                        <TooltipContent
+                          className="z-[999] w-[300px]"
+                          align="start"
+                          side="top"
+                        >
+                          <span>
+                            If no server is selected, the application will be
+                            deployed on the server where the user is logged in.
+                          </span>
+                        </TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
 
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-					</form>
+                    <Select
+                      onValueChange={field.onChange}
+                      defaultValue={field.value}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select a Server" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectGroup>
+                          {servers?.map((server) => (
+                            <SelectItem
+                              key={server.serverId}
+                              value={server.serverId}
+                            >
+                              <span className="flex items-center gap-2 justify-between w-full">
+                                <span>{server.name}</span>
+                                <span className="text-muted-foreground text-xs self-center">
+                                  {server.ipAddress}
+                                </span>
+                              </span>
+                            </SelectItem>
+                          ))}
+                          <SelectLabel>Servers ({servers?.length})</SelectLabel>
+                        </SelectGroup>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+            <FormField
+              control={form.control}
+              name="appName"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>App Name</FormLabel>
+                  <FormControl>
+                    <Input placeholder="my-app" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Description</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder="Description of your service..."
+                      className="resize-none"
+                      {...field}
+                    />
+                  </FormControl>
 
-					<DialogFooter>
-						<Button isLoading={isLoading} form="hook-form" type="submit">
-							Create
-						</Button>
-					</DialogFooter>
-				</Form>
-			</DialogContent>
-		</Dialog>
-	);
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </form>
+
+          <DialogFooter>
+            <Button isLoading={isLoading} form="hook-form" type="submit">
+              Create
+            </Button>
+          </DialogFooter>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
 };
diff --git a/apps/dokploy/components/dashboard/project/add-compose.tsx b/apps/dokploy/components/dashboard/project/add-compose.tsx
index a60bfdd70..6823558ac 100644
--- a/apps/dokploy/components/dashboard/project/add-compose.tsx
+++ b/apps/dokploy/components/dashboard/project/add-compose.tsx
@@ -1,290 +1,294 @@
-import { AlertBlock } from "@/components/shared/alert-block";
-import { Button } from "@/components/ui/button";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
-import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
-import {
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import {
-	Select,
-	SelectContent,
-	SelectGroup,
-	SelectItem,
-	SelectLabel,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
-import { Textarea } from "@/components/ui/textarea";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { slugify } from "@/lib/slug";
-import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { CircuitBoard, HelpCircle } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { slugify } from "@/lib/slug";
+import { api } from "@/utils/api";
 
 const AddComposeSchema = z.object({
-	composeType: z.enum(["docker-compose", "stack"]).optional(),
-	name: z.string().min(1, {
-		message: "Name is required",
-	}),
-	appName: z
-		.string()
-		.min(1, {
-			message: "App name is required",
-		})
-		.regex(/^[a-z](?!.*--)([a-z0-9-]*[a-z])?$/, {
-			message:
-				"App name supports lowercase letters, numbers, '-' and can only start and end letters, and does not support continuous '-'",
-		}),
-	description: z.string().optional(),
-	serverId: z.string().optional(),
+  composeType: z.enum(["docker-compose", "stack"]).optional(),
+  name: z.string().min(1, {
+    message: "Name is required",
+  }),
+  appName: z
+    .string()
+    .min(1, {
+      message: "App name is required",
+    })
+    .regex(/^[a-z](?!.*--)([a-z0-9-]*[a-z])?$/, {
+      message:
+        "App name supports lowercase letters, numbers, '-' and can only start and end letters, and does not support continuous '-'",
+    }),
+  description: z.string().optional(),
+  serverId: z.string().optional(),
 });
 
 type AddCompose = z.infer<typeof AddComposeSchema>;
 
 interface Props {
-	projectId: string;
-	projectName?: string;
+  projectId: string;
+  projectName?: string;
 }
 
 export const AddCompose = ({ projectId, projectName }: Props) => {
-	const utils = api.useUtils();
-	const [visible, setVisible] = useState(false);
-	const slug = slugify(projectName);
-	const { data: isCloud } = api.settings.isCloud.useQuery();
-	const { data: servers } = api.server.withSSHKey.useQuery();
-	const { mutateAsync, isLoading, error, isError } =
-		api.compose.create.useMutation();
+  const utils = api.useUtils();
+  const [visible, setVisible] = useState(false);
+  const slug = slugify(projectName);
+  const { data: isCloud } = api.settings.isCloud.useQuery();
+  const { data: servers } = api.server.withSSHKey.useQuery();
+  const { mutateAsync, isLoading, error, isError } =
+    api.compose.create.useMutation();
 
-	const form = useForm<AddCompose>({
-		defaultValues: {
-			name: "",
-			description: "",
-			composeType: "docker-compose",
-			appName: `${slug}-`,
-		},
-		resolver: zodResolver(AddComposeSchema),
-	});
+  const hasServers = servers && servers.length > 0;
 
-	useEffect(() => {
-		form.reset();
-	}, [form, form.reset, form.formState.isSubmitSuccessful]);
+  const form = useForm<AddCompose>({
+    defaultValues: {
+      name: "",
+      description: "",
+      composeType: "docker-compose",
+      appName: `${slug}-`,
+    },
+    resolver: zodResolver(AddComposeSchema),
+  });
 
-	const onSubmit = async (data: AddCompose) => {
-		await mutateAsync({
-			name: data.name,
-			description: data.description,
-			projectId,
-			composeType: data.composeType,
-			appName: data.appName,
-			serverId: data.serverId,
-		})
-			.then(async () => {
-				toast.success("Compose Created");
-				setVisible(false);
-				await utils.project.one.invalidate({
-					projectId,
-				});
-			})
-			.catch(() => {
-				toast.error("Error creating the compose");
-			});
-	};
+  useEffect(() => {
+    form.reset();
+  }, [form, form.reset, form.formState.isSubmitSuccessful]);
 
-	return (
-		<Dialog open={visible} onOpenChange={setVisible}>
-			<DialogTrigger className="w-full">
-				<DropdownMenuItem
-					className="w-full cursor-pointer space-x-3"
-					onSelect={(e) => e.preventDefault()}
-				>
-					<CircuitBoard className="size-4 text-muted-foreground" />
-					<span>Compose</span>
-				</DropdownMenuItem>
-			</DialogTrigger>
-			<DialogContent className="sm:max-w-xl">
-				<DialogHeader>
-					<DialogTitle>Create Compose</DialogTitle>
-					<DialogDescription>
-						Assign a name and description to your compose
-					</DialogDescription>
-				</DialogHeader>
-				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+  const onSubmit = async (data: AddCompose) => {
+    await mutateAsync({
+      name: data.name,
+      description: data.description,
+      projectId,
+      composeType: data.composeType,
+      appName: data.appName,
+      serverId: data.serverId,
+    })
+      .then(async () => {
+        toast.success("Compose Created");
+        setVisible(false);
+        await utils.project.one.invalidate({
+          projectId,
+        });
+      })
+      .catch(() => {
+        toast.error("Error creating the compose");
+      });
+  };
 
-				<Form {...form}>
-					<form
-						id="hook-form"
-						onSubmit={form.handleSubmit(onSubmit)}
-						className="grid w-full gap-4"
-					>
-						<div className="flex flex-col gap-4">
-							<FormField
-								control={form.control}
-								name="name"
-								render={({ field }) => (
-									<FormItem>
-										<FormLabel>Name</FormLabel>
-										<FormControl>
-											<Input
-												placeholder="Frontend"
-												{...field}
-												onChange={(e) => {
-													const val = e.target.value?.trim() || "";
-													const serviceName = slugify(val);
-													form.setValue("appName", `${slug}-${serviceName}`);
-													field.onChange(val);
-												}}
-											/>
-										</FormControl>
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
-						</div>
-						<FormField
-							control={form.control}
-							name="serverId"
-							render={({ field }) => (
-								<FormItem>
-									<TooltipProvider delayDuration={0}>
-										<Tooltip>
-											<TooltipTrigger asChild>
-												<FormLabel className="break-all w-fit flex flex-row gap-1 items-center">
-													Select a Server {!isCloud ? "(Optional)" : ""}
-													<HelpCircle className="size-4 text-muted-foreground" />
-												</FormLabel>
-											</TooltipTrigger>
-											<TooltipContent
-												className="z-[999] w-[300px]"
-												align="start"
-												side="top"
-											>
-												<span>
-													If no server is selected, the application will be
-													deployed on the server where the user is logged in.
-												</span>
-											</TooltipContent>
-										</Tooltip>
-									</TooltipProvider>
+  return (
+    <Dialog open={visible} onOpenChange={setVisible}>
+      <DialogTrigger className="w-full">
+        <DropdownMenuItem
+          className="w-full cursor-pointer space-x-3"
+          onSelect={(e) => e.preventDefault()}
+        >
+          <CircuitBoard className="size-4 text-muted-foreground" />
+          <span>Compose</span>
+        </DropdownMenuItem>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-xl">
+        <DialogHeader>
+          <DialogTitle>Create Compose</DialogTitle>
+          <DialogDescription>
+            Assign a name and description to your compose
+          </DialogDescription>
+        </DialogHeader>
+        {isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 
-									<Select
-										onValueChange={field.onChange}
-										defaultValue={field.value}
-									>
-										<SelectTrigger>
-											<SelectValue placeholder="Select a Server" />
-										</SelectTrigger>
-										<SelectContent>
-											<SelectGroup>
-												{servers?.map((server) => (
-													<SelectItem
-														key={server.serverId}
-														value={server.serverId}
-													>
-														<span className="flex items-center gap-2 justify-between w-full">
-															<span>{server.name}</span>
-															<span className="text-muted-foreground text-xs self-center">
-																{server.ipAddress}
-															</span>
-														</span>
-													</SelectItem>
-												))}
-												<SelectLabel>Servers ({servers?.length})</SelectLabel>
-											</SelectGroup>
-										</SelectContent>
-									</Select>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="appName"
-							render={({ field }) => (
-								<FormItem>
-									<FormLabel>App Name</FormLabel>
-									<FormControl>
-										<Input placeholder="my-app" {...field} />
-									</FormControl>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="composeType"
-							render={({ field }) => (
-								<FormItem>
-									<FormLabel>Compose Type</FormLabel>
-									<Select
-										onValueChange={field.onChange}
-										defaultValue={field.value}
-									>
-										<FormControl>
-											<SelectTrigger>
-												<SelectValue placeholder="Select a compose type" />
-											</SelectTrigger>
-										</FormControl>
-										<SelectContent>
-											<SelectItem value="docker-compose">
-												Docker Compose
-											</SelectItem>
-											<SelectItem value="stack">Stack</SelectItem>
-										</SelectContent>
-									</Select>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="description"
-							render={({ field }) => (
-								<FormItem>
-									<FormLabel>Description</FormLabel>
-									<FormControl>
-										<Textarea
-											placeholder="Description of your service..."
-											className="resize-none"
-											{...field}
-										/>
-									</FormControl>
+        <Form {...form}>
+          <form
+            id="hook-form"
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="grid w-full gap-4"
+          >
+            <div className="flex flex-col gap-4">
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Name</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Frontend"
+                        {...field}
+                        onChange={(e) => {
+                          const val = e.target.value?.trim() || "";
+                          const serviceName = slugify(val);
+                          form.setValue("appName", `${slug}-${serviceName}`);
+                          field.onChange(val);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+            {hasServers && (
+              <FormField
+                control={form.control}
+                name="serverId"
+                render={({ field }) => (
+                  <FormItem>
+                    <TooltipProvider delayDuration={0}>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <FormLabel className="break-all w-fit flex flex-row gap-1 items-center">
+                            Select a Server {!isCloud ? "(Optional)" : ""}
+                            <HelpCircle className="size-4 text-muted-foreground" />
+                          </FormLabel>
+                        </TooltipTrigger>
+                        <TooltipContent
+                          className="z-[999] w-[300px]"
+                          align="start"
+                          side="top"
+                        >
+                          <span>
+                            If no server is selected, the application will be
+                            deployed on the server where the user is logged in.
+                          </span>
+                        </TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
 
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-					</form>
+                    <Select
+                      onValueChange={field.onChange}
+                      defaultValue={field.value}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select a Server" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectGroup>
+                          {servers?.map((server) => (
+                            <SelectItem
+                              key={server.serverId}
+                              value={server.serverId}
+                            >
+                              <span className="flex items-center gap-2 justify-between w-full">
+                                <span>{server.name}</span>
+                                <span className="text-muted-foreground text-xs self-center">
+                                  {server.ipAddress}
+                                </span>
+                              </span>
+                            </SelectItem>
+                          ))}
+                          <SelectLabel>Servers ({servers?.length})</SelectLabel>
+                        </SelectGroup>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+            <FormField
+              control={form.control}
+              name="appName"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>App Name</FormLabel>
+                  <FormControl>
+                    <Input placeholder="my-app" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="composeType"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Compose Type</FormLabel>
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                  >
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select a compose type" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="docker-compose">
+                        Docker Compose
+                      </SelectItem>
+                      <SelectItem value="stack">Stack</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Description</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder="Description of your service..."
+                      className="resize-none"
+                      {...field}
+                    />
+                  </FormControl>
 
-					<DialogFooter>
-						<Button isLoading={isLoading} form="hook-form" type="submit">
-							Create
-						</Button>
-					</DialogFooter>
-				</Form>
-			</DialogContent>
-		</Dialog>
-	);
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </form>
+
+          <DialogFooter>
+            <Button isLoading={isLoading} form="hook-form" type="submit">
+              Create
+            </Button>
+          </DialogFooter>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
 };
diff --git a/apps/dokploy/components/dashboard/project/add-database.tsx b/apps/dokploy/components/dashboard/project/add-database.tsx
index b4ac685dc..fdb1c3992 100644
--- a/apps/dokploy/components/dashboard/project/add-database.tsx
+++ b/apps/dokploy/components/dashboard/project/add-database.tsx
@@ -1,586 +1,590 @@
-import {
-	MariadbIcon,
-	MongodbIcon,
-	MysqlIcon,
-	PostgresqlIcon,
-	RedisIcon,
-} from "@/components/icons/data-tools-icons";
-import { Button } from "@/components/ui/button";
-import {
-	Dialog,
-	DialogContent,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
-import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
-import {
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import {
-	Select,
-	SelectContent,
-	SelectGroup,
-	SelectItem,
-	SelectLabel,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
-import { Textarea } from "@/components/ui/textarea";
-import { slugify } from "@/lib/slug";
-import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { AlertTriangle, Database } from "lucide-react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import {
+  MariadbIcon,
+  MongodbIcon,
+  MysqlIcon,
+  PostgresqlIcon,
+  RedisIcon,
+} from "@/components/icons/data-tools-icons";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import { slugify } from "@/lib/slug";
+import { api } from "@/utils/api";
 
 type DbType = typeof mySchema._type.type;
 
 const dockerImageDefaultPlaceholder: Record<DbType, string> = {
-	mongo: "mongo:6",
-	mariadb: "mariadb:11",
-	mysql: "mysql:8",
-	postgres: "postgres:15",
-	redis: "redis:7",
+  mongo: "mongo:6",
+  mariadb: "mariadb:11",
+  mysql: "mysql:8",
+  postgres: "postgres:15",
+  redis: "redis:7",
 };
 
 const databasesUserDefaultPlaceholder: Record<
-	Exclude<DbType, "redis">,
-	string
+  Exclude<DbType, "redis">,
+  string
 > = {
-	mongo: "mongo",
-	mariadb: "mariadb",
-	mysql: "mysql",
-	postgres: "postgres",
+  mongo: "mongo",
+  mariadb: "mariadb",
+  mysql: "mysql",
+  postgres: "postgres",
 };
 
 const baseDatabaseSchema = z.object({
-	name: z.string().min(1, "Name required"),
-	appName: z
-		.string()
-		.min(1, {
-			message: "App name is required",
-		})
-		.regex(/^[a-z](?!.*--)([a-z0-9-]*[a-z])?$/, {
-			message:
-				"App name supports lowercase letters, numbers, '-' and can only start and end letters, and does not support continuous '-'",
-		}),
-	databasePassword: z.string(),
-	dockerImage: z.string(),
-	description: z.string().nullable(),
-	serverId: z.string().nullable(),
+  name: z.string().min(1, "Name required"),
+  appName: z
+    .string()
+    .min(1, {
+      message: "App name is required",
+    })
+    .regex(/^[a-z](?!.*--)([a-z0-9-]*[a-z])?$/, {
+      message:
+        "App name supports lowercase letters, numbers, '-' and can only start and end letters, and does not support continuous '-'",
+    }),
+  databasePassword: z.string(),
+  dockerImage: z.string(),
+  description: z.string().nullable(),
+  serverId: z.string().nullable(),
 });
 
 const mySchema = z.discriminatedUnion("type", [
-	z
-		.object({
-			type: z.literal("postgres"),
-			databaseName: z.string().default("postgres"),
-			databaseUser: z.string().default("postgres"),
-		})
-		.merge(baseDatabaseSchema),
-	z
-		.object({
-			type: z.literal("mongo"),
-			databaseUser: z.string().default("mongo"),
-			replicaSets: z.boolean().default(false),
-		})
-		.merge(baseDatabaseSchema),
-	z
-		.object({
-			type: z.literal("redis"),
-		})
-		.merge(baseDatabaseSchema),
-	z
-		.object({
-			type: z.literal("mysql"),
-			databaseRootPassword: z.string().default(""),
-			databaseUser: z.string().default("mysql"),
-			databaseName: z.string().default("mysql"),
-		})
-		.merge(baseDatabaseSchema),
-	z
-		.object({
-			type: z.literal("mariadb"),
-			dockerImage: z.string().default("mariadb:4"),
-			databaseRootPassword: z.string().default(""),
-			databaseUser: z.string().default("mariadb"),
-			databaseName: z.string().default("mariadb"),
-		})
-		.merge(baseDatabaseSchema),
+  z
+    .object({
+      type: z.literal("postgres"),
+      databaseName: z.string().default("postgres"),
+      databaseUser: z.string().default("postgres"),
+    })
+    .merge(baseDatabaseSchema),
+  z
+    .object({
+      type: z.literal("mongo"),
+      databaseUser: z.string().default("mongo"),
+      replicaSets: z.boolean().default(false),
+    })
+    .merge(baseDatabaseSchema),
+  z
+    .object({
+      type: z.literal("redis"),
+    })
+    .merge(baseDatabaseSchema),
+  z
+    .object({
+      type: z.literal("mysql"),
+      databaseRootPassword: z.string().default(""),
+      databaseUser: z.string().default("mysql"),
+      databaseName: z.string().default("mysql"),
+    })
+    .merge(baseDatabaseSchema),
+  z
+    .object({
+      type: z.literal("mariadb"),
+      dockerImage: z.string().default("mariadb:4"),
+      databaseRootPassword: z.string().default(""),
+      databaseUser: z.string().default("mariadb"),
+      databaseName: z.string().default("mariadb"),
+    })
+    .merge(baseDatabaseSchema),
 ]);
 
 const databasesMap = {
-	postgres: {
-		icon: <PostgresqlIcon />,
-		label: "PostgreSQL",
-	},
-	mongo: {
-		icon: <MongodbIcon />,
-		label: "MongoDB",
-	},
-	mariadb: {
-		icon: <MariadbIcon />,
-		label: "MariaDB",
-	},
-	mysql: {
-		icon: <MysqlIcon />,
-		label: "MySQL",
-	},
-	redis: {
-		icon: <RedisIcon />,
-		label: "Redis",
-	},
+  postgres: {
+    icon: <PostgresqlIcon />,
+    label: "PostgreSQL",
+  },
+  mongo: {
+    icon: <MongodbIcon />,
+    label: "MongoDB",
+  },
+  mariadb: {
+    icon: <MariadbIcon />,
+    label: "MariaDB",
+  },
+  mysql: {
+    icon: <MysqlIcon />,
+    label: "MySQL",
+  },
+  redis: {
+    icon: <RedisIcon />,
+    label: "Redis",
+  },
 };
 
 type AddDatabase = z.infer<typeof mySchema>;
 
 interface Props {
-	projectId: string;
-	projectName?: string;
+  projectId: string;
+  projectName?: string;
 }
 
 export const AddDatabase = ({ projectId, projectName }: Props) => {
-	const utils = api.useUtils();
-	const [visible, setVisible] = useState(false);
-	const slug = slugify(projectName);
-	const { data: servers } = api.server.withSSHKey.useQuery();
-	const postgresMutation = api.postgres.create.useMutation();
-	const mongoMutation = api.mongo.create.useMutation();
-	const redisMutation = api.redis.create.useMutation();
-	const mariadbMutation = api.mariadb.create.useMutation();
-	const mysqlMutation = api.mysql.create.useMutation();
+  const utils = api.useUtils();
+  const [visible, setVisible] = useState(false);
+  const slug = slugify(projectName);
+  const { data: servers } = api.server.withSSHKey.useQuery();
+  const postgresMutation = api.postgres.create.useMutation();
+  const mongoMutation = api.mongo.create.useMutation();
+  const redisMutation = api.redis.create.useMutation();
+  const mariadbMutation = api.mariadb.create.useMutation();
+  const mysqlMutation = api.mysql.create.useMutation();
 
-	const form = useForm<AddDatabase>({
-		defaultValues: {
-			type: "postgres",
-			dockerImage: "",
-			name: "",
-			appName: `${slug}-`,
-			databasePassword: "",
-			description: "",
-			databaseName: "",
-			databaseUser: "",
-			serverId: null,
-		},
-		resolver: zodResolver(mySchema),
-	});
-	const type = form.watch("type");
-	const activeMutation = {
-		postgres: postgresMutation,
-		mongo: mongoMutation,
-		redis: redisMutation,
-		mariadb: mariadbMutation,
-		mysql: mysqlMutation,
-	};
+  const hasServers = servers && servers.length > 0;
 
-	const onSubmit = async (data: AddDatabase) => {
-		const defaultDockerImage =
-			data.dockerImage || dockerImageDefaultPlaceholder[data.type];
+  const form = useForm<AddDatabase>({
+    defaultValues: {
+      type: "postgres",
+      dockerImage: "",
+      name: "",
+      appName: `${slug}-`,
+      databasePassword: "",
+      description: "",
+      databaseName: "",
+      databaseUser: "",
+      serverId: null,
+    },
+    resolver: zodResolver(mySchema),
+  });
+  const type = form.watch("type");
+  const activeMutation = {
+    postgres: postgresMutation,
+    mongo: mongoMutation,
+    redis: redisMutation,
+    mariadb: mariadbMutation,
+    mysql: mysqlMutation,
+  };
 
-		let promise: Promise<unknown> | null = null;
-		const commonParams = {
-			name: data.name,
-			appName: data.appName,
-			dockerImage: defaultDockerImage,
-			projectId,
-			serverId: data.serverId,
-			description: data.description,
-		};
+  const onSubmit = async (data: AddDatabase) => {
+    const defaultDockerImage =
+      data.dockerImage || dockerImageDefaultPlaceholder[data.type];
 
-		if (data.type === "postgres") {
-			promise = postgresMutation.mutateAsync({
-				...commonParams,
-				databasePassword: data.databasePassword,
-				databaseName: data.databaseName || "postgres",
+    let promise: Promise<unknown> | null = null;
+    const commonParams = {
+      name: data.name,
+      appName: data.appName,
+      dockerImage: defaultDockerImage,
+      projectId,
+      serverId: data.serverId,
+      description: data.description,
+    };
 
-				databaseUser:
-					data.databaseUser || databasesUserDefaultPlaceholder[data.type],
-				serverId: data.serverId,
-			});
-		} else if (data.type === "mongo") {
-			promise = mongoMutation.mutateAsync({
-				...commonParams,
-				databasePassword: data.databasePassword,
-				databaseUser:
-					data.databaseUser || databasesUserDefaultPlaceholder[data.type],
-				serverId: data.serverId,
-				replicaSets: data.replicaSets,
-			});
-		} else if (data.type === "redis") {
-			promise = redisMutation.mutateAsync({
-				...commonParams,
-				databasePassword: data.databasePassword,
-				serverId: data.serverId,
-				projectId,
-			});
-		} else if (data.type === "mariadb") {
-			promise = mariadbMutation.mutateAsync({
-				...commonParams,
-				databasePassword: data.databasePassword,
-				databaseRootPassword: data.databaseRootPassword,
-				databaseName: data.databaseName || "mariadb",
-				databaseUser:
-					data.databaseUser || databasesUserDefaultPlaceholder[data.type],
-				serverId: data.serverId,
-			});
-		} else if (data.type === "mysql") {
-			promise = mysqlMutation.mutateAsync({
-				...commonParams,
-				databasePassword: data.databasePassword,
-				databaseName: data.databaseName || "mysql",
-				databaseUser:
-					data.databaseUser || databasesUserDefaultPlaceholder[data.type],
-				databaseRootPassword: data.databaseRootPassword,
-				serverId: data.serverId,
-			});
-		}
+    if (data.type === "postgres") {
+      promise = postgresMutation.mutateAsync({
+        ...commonParams,
+        databasePassword: data.databasePassword,
+        databaseName: data.databaseName || "postgres",
 
-		if (promise) {
-			await promise
-				.then(async () => {
-					toast.success("Database Created");
-					form.reset({
-						type: "postgres",
-						dockerImage: "",
-						name: "",
-						appName: `${projectName}-`,
-						databasePassword: "",
-						description: "",
-						databaseName: "",
-						databaseUser: "",
-					});
-					setVisible(false);
-					await utils.project.one.invalidate({
-						projectId,
-					});
-				})
-				.catch(() => {
-					toast.error("Error creating a database");
-				});
-		}
-	};
-	return (
-		<Dialog open={visible} onOpenChange={setVisible}>
-			<DialogTrigger className="w-full">
-				<DropdownMenuItem
-					className="w-full cursor-pointer space-x-3"
-					onSelect={(e) => e.preventDefault()}
-				>
-					<Database className="size-4 text-muted-foreground" />
-					<span>Database</span>
-				</DropdownMenuItem>
-			</DialogTrigger>
-			<DialogContent className="md:max-h-[90vh]  sm:max-w-2xl">
-				<DialogHeader>
-					<DialogTitle>Databases</DialogTitle>
-				</DialogHeader>
+        databaseUser:
+          data.databaseUser || databasesUserDefaultPlaceholder[data.type],
+        serverId: data.serverId,
+      });
+    } else if (data.type === "mongo") {
+      promise = mongoMutation.mutateAsync({
+        ...commonParams,
+        databasePassword: data.databasePassword,
+        databaseUser:
+          data.databaseUser || databasesUserDefaultPlaceholder[data.type],
+        serverId: data.serverId,
+        replicaSets: data.replicaSets,
+      });
+    } else if (data.type === "redis") {
+      promise = redisMutation.mutateAsync({
+        ...commonParams,
+        databasePassword: data.databasePassword,
+        serverId: data.serverId,
+        projectId,
+      });
+    } else if (data.type === "mariadb") {
+      promise = mariadbMutation.mutateAsync({
+        ...commonParams,
+        databasePassword: data.databasePassword,
+        databaseRootPassword: data.databaseRootPassword,
+        databaseName: data.databaseName || "mariadb",
+        databaseUser:
+          data.databaseUser || databasesUserDefaultPlaceholder[data.type],
+        serverId: data.serverId,
+      });
+    } else if (data.type === "mysql") {
+      promise = mysqlMutation.mutateAsync({
+        ...commonParams,
+        databasePassword: data.databasePassword,
+        databaseName: data.databaseName || "mysql",
+        databaseUser:
+          data.databaseUser || databasesUserDefaultPlaceholder[data.type],
+        databaseRootPassword: data.databaseRootPassword,
+        serverId: data.serverId,
+      });
+    }
 
-				<Form {...form}>
-					<form
-						id="hook-form"
-						onSubmit={form.handleSubmit(onSubmit)}
-						className="grid w-full gap-8 "
-					>
-						<FormField
-							control={form.control}
-							defaultValue={form.control._defaultValues.type}
-							name="type"
-							render={({ field }) => (
-								<FormItem className="space-y-3">
-									<FormLabel className="text-muted-foreground">
-										Select a database
-									</FormLabel>
-									<FormControl>
-										<RadioGroup
-											onValueChange={field.onChange}
-											defaultValue={field.value}
-											className="grid w-full grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4"
-										>
-											{Object.entries(databasesMap).map(([key, value]) => (
-												<FormItem
-													key={key}
-													className="flex w-full items-center space-x-3 space-y-0"
-												>
-													<FormControl className="w-full">
-														<div>
-															<RadioGroupItem
-																value={key}
-																id={key}
-																className="peer sr-only"
-															/>
-															<Label
-																htmlFor={key}
-																className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
-															>
-																{value.icon}
-																{value.label}
-															</Label>
-														</div>
-													</FormControl>
-												</FormItem>
-											))}
-										</RadioGroup>
-									</FormControl>
-									<FormMessage />
-									{activeMutation[field.value].isError && (
-										<div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
-											<AlertTriangle className="text-red-600 dark:text-red-400" />
-											<span className="text-sm text-red-600 dark:text-red-400">
-												{activeMutation[field.value].error?.message}
-											</span>
-										</div>
-									)}
-								</FormItem>
-							)}
-						/>
-						<div className="flex flex-col gap-4">
-							<FormLabel className="text-lg font-semibold leading-none tracking-tight">
-								Fill the next fields.
-							</FormLabel>
-							<div className="flex flex-col gap-2">
-								<FormField
-									control={form.control}
-									name="name"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel>Name</FormLabel>
-											<FormControl>
-												<Input
-													placeholder="Name"
-													{...field}
-													onChange={(e) => {
-														const val = e.target.value?.trim() || "";
-														const serviceName = slugify(val);
-														form.setValue("appName", `${slug}-${serviceName}`);
-														field.onChange(val);
-													}}
-												/>
-											</FormControl>
+    if (promise) {
+      await promise
+        .then(async () => {
+          toast.success("Database Created");
+          form.reset({
+            type: "postgres",
+            dockerImage: "",
+            name: "",
+            appName: `${projectName}-`,
+            databasePassword: "",
+            description: "",
+            databaseName: "",
+            databaseUser: "",
+          });
+          setVisible(false);
+          await utils.project.one.invalidate({
+            projectId,
+          });
+        })
+        .catch(() => {
+          toast.error("Error creating a database");
+        });
+    }
+  };
+  return (
+    <Dialog open={visible} onOpenChange={setVisible}>
+      <DialogTrigger className="w-full">
+        <DropdownMenuItem
+          className="w-full cursor-pointer space-x-3"
+          onSelect={(e) => e.preventDefault()}
+        >
+          <Database className="size-4 text-muted-foreground" />
+          <span>Database</span>
+        </DropdownMenuItem>
+      </DialogTrigger>
+      <DialogContent className="md:max-h-[90vh]  sm:max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>Databases</DialogTitle>
+        </DialogHeader>
 
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-								<FormField
-									control={form.control}
-									name="serverId"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel>Select a Server</FormLabel>
-											<Select
-												onValueChange={field.onChange}
-												defaultValue={field.value || ""}
-											>
-												<SelectTrigger>
-													<SelectValue placeholder="Select a Server" />
-												</SelectTrigger>
-												<SelectContent>
-													<SelectGroup>
-														{servers?.map((server) => (
-															<SelectItem
-																key={server.serverId}
-																value={server.serverId}
-															>
-																{server.name}
-															</SelectItem>
-														))}
-														<SelectLabel>
-															Servers ({servers?.length})
-														</SelectLabel>
-													</SelectGroup>
-												</SelectContent>
-											</Select>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-								<FormField
-									control={form.control}
-									name="appName"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel>App Name</FormLabel>
-											<FormControl>
-												<Input placeholder="my-app" {...field} />
-											</FormControl>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
+        <Form {...form}>
+          <form
+            id="hook-form"
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="grid w-full gap-8 "
+          >
+            <FormField
+              control={form.control}
+              defaultValue={form.control._defaultValues.type}
+              name="type"
+              render={({ field }) => (
+                <FormItem className="space-y-3">
+                  <FormLabel className="text-muted-foreground">
+                    Select a database
+                  </FormLabel>
+                  <FormControl>
+                    <RadioGroup
+                      onValueChange={field.onChange}
+                      defaultValue={field.value}
+                      className="grid w-full grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4"
+                    >
+                      {Object.entries(databasesMap).map(([key, value]) => (
+                        <FormItem
+                          key={key}
+                          className="flex w-full items-center space-x-3 space-y-0"
+                        >
+                          <FormControl className="w-full">
+                            <div>
+                              <RadioGroupItem
+                                value={key}
+                                id={key}
+                                className="peer sr-only"
+                              />
+                              <Label
+                                htmlFor={key}
+                                className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
+                              >
+                                {value.icon}
+                                {value.label}
+                              </Label>
+                            </div>
+                          </FormControl>
+                        </FormItem>
+                      ))}
+                    </RadioGroup>
+                  </FormControl>
+                  <FormMessage />
+                  {activeMutation[field.value].isError && (
+                    <div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
+                      <AlertTriangle className="text-red-600 dark:text-red-400" />
+                      <span className="text-sm text-red-600 dark:text-red-400">
+                        {activeMutation[field.value].error?.message}
+                      </span>
+                    </div>
+                  )}
+                </FormItem>
+              )}
+            />
+            <div className="flex flex-col gap-4">
+              <FormLabel className="text-lg font-semibold leading-none tracking-tight">
+                Fill the next fields.
+              </FormLabel>
+              <div className="flex flex-col gap-2">
+                <FormField
+                  control={form.control}
+                  name="name"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Name</FormLabel>
+                      <FormControl>
+                        <Input
+                          placeholder="Name"
+                          {...field}
+                          onChange={(e) => {
+                            const val = e.target.value?.trim() || "";
+                            const serviceName = slugify(val);
+                            form.setValue("appName", `${slug}-${serviceName}`);
+                            field.onChange(val);
+                          }}
+                        />
+                      </FormControl>
 
-								<FormField
-									control={form.control}
-									name="description"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel>Description</FormLabel>
-											<FormControl>
-												<Textarea
-													className="h-24"
-													placeholder="Description"
-													{...field}
-													value={field.value || ""}
-												/>
-											</FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                {hasServers && (
+                  <FormField
+                    control={form.control}
+                    name="serverId"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Select a Server</FormLabel>
+                        <Select
+                          onValueChange={field.onChange}
+                          defaultValue={field.value || ""}
+                        >
+                          <SelectTrigger>
+                            <SelectValue placeholder="Select a Server" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectGroup>
+                              {servers?.map((server) => (
+                                <SelectItem
+                                  key={server.serverId}
+                                  value={server.serverId}
+                                >
+                                  {server.name}
+                                </SelectItem>
+                              ))}
+                              <SelectLabel>
+                                Servers ({servers?.length})
+                              </SelectLabel>
+                            </SelectGroup>
+                          </SelectContent>
+                        </Select>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                )}
+                <FormField
+                  control={form.control}
+                  name="appName"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>App Name</FormLabel>
+                      <FormControl>
+                        <Input placeholder="my-app" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
 
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-								{(type === "mysql" ||
-									type === "mariadb" ||
-									type === "postgres") && (
-									<FormField
-										control={form.control}
-										name="databaseName"
-										render={({ field }) => (
-											<FormItem>
-												<FormLabel>Database Name</FormLabel>
-												<FormControl>
-													<Input placeholder="Database Name" {...field} />
-												</FormControl>
+                <FormField
+                  control={form.control}
+                  name="description"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Description</FormLabel>
+                      <FormControl>
+                        <Textarea
+                          className="h-24"
+                          placeholder="Description"
+                          {...field}
+                          value={field.value || ""}
+                        />
+                      </FormControl>
 
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
-								)}
-								{(type === "mysql" ||
-									type === "mariadb" ||
-									type === "postgres" ||
-									type === "mongo") && (
-									<FormField
-										control={form.control}
-										name="databaseUser"
-										render={({ field }) => (
-											<FormItem>
-												<FormLabel>Database User</FormLabel>
-												<FormControl>
-													<Input
-														placeholder={`Default ${databasesUserDefaultPlaceholder[type]}`}
-														autoComplete="off"
-														{...field}
-													/>
-												</FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                {(type === "mysql" ||
+                  type === "mariadb" ||
+                  type === "postgres") && (
+                    <FormField
+                      control={form.control}
+                      name="databaseName"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Database Name</FormLabel>
+                          <FormControl>
+                            <Input placeholder="Database Name" {...field} />
+                          </FormControl>
 
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
-								)}
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  )}
+                {(type === "mysql" ||
+                  type === "mariadb" ||
+                  type === "postgres" ||
+                  type === "mongo") && (
+                    <FormField
+                      control={form.control}
+                      name="databaseUser"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Database User</FormLabel>
+                          <FormControl>
+                            <Input
+                              placeholder={`Default ${databasesUserDefaultPlaceholder[type]}`}
+                              autoComplete="off"
+                              {...field}
+                            />
+                          </FormControl>
 
-								<FormField
-									control={form.control}
-									name="databasePassword"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel>Database Password</FormLabel>
-											<FormControl>
-												<Input
-													type="password"
-													placeholder="******************"
-													autoComplete="one-time-code"
-													{...field}
-												/>
-											</FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  )}
 
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-								{(type === "mysql" || type === "mariadb") && (
-									<FormField
-										control={form.control}
-										name="databaseRootPassword"
-										render={({ field }) => (
-											<FormItem>
-												<FormLabel>Database Root password</FormLabel>
-												<FormControl>
-													<Input
-														type="password"
-														placeholder="******************"
-														{...field}
-													/>
-												</FormControl>
+                <FormField
+                  control={form.control}
+                  name="databasePassword"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Database Password</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="password"
+                          placeholder="******************"
+                          autoComplete="one-time-code"
+                          {...field}
+                        />
+                      </FormControl>
 
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
-								)}
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                {(type === "mysql" || type === "mariadb") && (
+                  <FormField
+                    control={form.control}
+                    name="databaseRootPassword"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Database Root password</FormLabel>
+                        <FormControl>
+                          <Input
+                            type="password"
+                            placeholder="******************"
+                            {...field}
+                          />
+                        </FormControl>
 
-								<FormField
-									control={form.control}
-									name="dockerImage"
-									defaultValue={form.formState.defaultValues?.dockerImage}
-									render={({ field }) => {
-										return (
-											<FormItem>
-												<FormLabel>Docker image</FormLabel>
-												<FormControl>
-													<Input
-														placeholder={`Default ${dockerImageDefaultPlaceholder[type]}`}
-														{...field}
-													/>
-												</FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                )}
 
-												<FormMessage />
-											</FormItem>
-										);
-									}}
-								/>
+                <FormField
+                  control={form.control}
+                  name="dockerImage"
+                  defaultValue={form.formState.defaultValues?.dockerImage}
+                  render={({ field }) => {
+                    return (
+                      <FormItem>
+                        <FormLabel>Docker image</FormLabel>
+                        <FormControl>
+                          <Input
+                            placeholder={`Default ${dockerImageDefaultPlaceholder[type]}`}
+                            {...field}
+                          />
+                        </FormControl>
 
-								{type === "mongo" && (
-									<FormField
-										control={form.control}
-										name="replicaSets"
-										render={({ field }) => {
-											return (
-												<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm">
-													<div className="space-y-0.5">
-														<FormLabel>Use Replica Sets</FormLabel>
-													</div>
-													<FormControl>
-														<Switch
-															checked={field.value}
-															onCheckedChange={field.onChange}
-														/>
-													</FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    );
+                  }}
+                />
 
-													<FormMessage />
-												</FormItem>
-											);
-										}}
-									/>
-								)}
-							</div>
-						</div>
-					</form>
+                {type === "mongo" && (
+                  <FormField
+                    control={form.control}
+                    name="replicaSets"
+                    render={({ field }) => {
+                      return (
+                        <FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm">
+                          <div className="space-y-0.5">
+                            <FormLabel>Use Replica Sets</FormLabel>
+                          </div>
+                          <FormControl>
+                            <Switch
+                              checked={field.value}
+                              onCheckedChange={field.onChange}
+                            />
+                          </FormControl>
 
-					<DialogFooter>
-						<Button
-							isLoading={form.formState.isSubmitting}
-							form="hook-form"
-							type="submit"
-						>
-							Create
-						</Button>
-					</DialogFooter>
-				</Form>
-			</DialogContent>
-		</Dialog>
-	);
+                          <FormMessage />
+                        </FormItem>
+                      );
+                    }}
+                  />
+                )}
+              </div>
+            </div>
+          </form>
+
+          <DialogFooter>
+            <Button
+              isLoading={form.formState.isSubmitting}
+              form="hook-form"
+              type="submit"
+            >
+              Create
+            </Button>
+          </DialogFooter>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
 };
diff --git a/apps/dokploy/components/dashboard/project/add-template.tsx b/apps/dokploy/components/dashboard/project/add-template.tsx
index 53ae30141..a5d46e98a 100644
--- a/apps/dokploy/components/dashboard/project/add-template.tsx
+++ b/apps/dokploy/components/dashboard/project/add-template.tsx
@@ -1,524 +1,528 @@
+import {
+  BookText,
+  CheckIcon,
+  ChevronsUpDown,
+  Globe,
+  HelpCircle,
+  LayoutGrid,
+  List,
+  Loader2,
+  PuzzleIcon,
+  SearchIcon,
+} from "lucide-react";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
 import { GithubIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
 import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-	AlertDialogTrigger,
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
-	Command,
-	CommandEmpty,
-	CommandGroup,
-	CommandInput,
-	CommandItem,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
 } from "@/components/ui/command";
 import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
 } from "@/components/ui/dialog";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import {
-	Popover,
-	PopoverContent,
-	PopoverTrigger,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
 } from "@/components/ui/popover";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import {
-	Select,
-	SelectContent,
-	SelectGroup,
-	SelectItem,
-	SelectLabel,
-	SelectTrigger,
-	SelectValue,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
 } from "@/components/ui/select";
 import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import {
-	BookText,
-	CheckIcon,
-	ChevronsUpDown,
-	Globe,
-	HelpCircle,
-	LayoutGrid,
-	List,
-	Loader2,
-	PuzzleIcon,
-	SearchIcon,
-} from "lucide-react";
-import Link from "next/link";
-import { useEffect, useState } from "react";
-import { toast } from "sonner";
 
 const TEMPLATE_BASE_URL_KEY = "dokploy_template_base_url";
 
 interface Props {
-	projectId: string;
-	baseUrl?: string;
+  projectId: string;
+  baseUrl?: string;
 }
 
 export const AddTemplate = ({ projectId, baseUrl }: Props) => {
-	const [query, setQuery] = useState("");
-	const [open, setOpen] = useState(false);
-	const [viewMode, setViewMode] = useState<"detailed" | "icon">("detailed");
-	const [selectedTags, setSelectedTags] = useState<string[]>([]);
-	const [customBaseUrl, setCustomBaseUrl] = useState<string | undefined>(() => {
-		// Try to get from props first, then localStorage
-		if (baseUrl) return baseUrl;
-		if (typeof window !== "undefined") {
-			return localStorage.getItem(TEMPLATE_BASE_URL_KEY) || undefined;
-		}
-		return undefined;
-	});
+  const [query, setQuery] = useState("");
+  const [open, setOpen] = useState(false);
+  const [viewMode, setViewMode] = useState<"detailed" | "icon">("detailed");
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const [customBaseUrl, setCustomBaseUrl] = useState<string | undefined>(() => {
+    // Try to get from props first, then localStorage
+    if (baseUrl) return baseUrl;
+    if (typeof window !== "undefined") {
+      return localStorage.getItem(TEMPLATE_BASE_URL_KEY) || undefined;
+    }
+    return undefined;
+  });
 
-	// Save to localStorage when customBaseUrl changes
-	useEffect(() => {
-		if (customBaseUrl) {
-			localStorage.setItem(TEMPLATE_BASE_URL_KEY, customBaseUrl);
-		} else {
-			localStorage.removeItem(TEMPLATE_BASE_URL_KEY);
-		}
-	}, [customBaseUrl]);
+  // Save to localStorage when customBaseUrl changes
+  useEffect(() => {
+    if (customBaseUrl) {
+      localStorage.setItem(TEMPLATE_BASE_URL_KEY, customBaseUrl);
+    } else {
+      localStorage.removeItem(TEMPLATE_BASE_URL_KEY);
+    }
+  }, [customBaseUrl]);
 
-	const {
-		data,
-		isLoading: isLoadingTemplates,
-		error: errorTemplates,
-		isError: isErrorTemplates,
-	} = api.compose.templates.useQuery(
-		{ baseUrl: customBaseUrl },
-		{
-			enabled: open,
-		},
-	);
-	const { data: isCloud } = api.settings.isCloud.useQuery();
-	const { data: servers } = api.server.withSSHKey.useQuery();
-	const { data: tags, isLoading: isLoadingTags } = api.compose.getTags.useQuery(
-		{ baseUrl: customBaseUrl },
-		{
-			enabled: open,
-		},
-	);
-	const utils = api.useUtils();
+  const {
+    data,
+    isLoading: isLoadingTemplates,
+    error: errorTemplates,
+    isError: isErrorTemplates,
+  } = api.compose.templates.useQuery(
+    { baseUrl: customBaseUrl },
+    {
+      enabled: open,
+    },
+  );
+  const { data: isCloud } = api.settings.isCloud.useQuery();
+  const { data: servers } = api.server.withSSHKey.useQuery();
+  const { data: tags, isLoading: isLoadingTags } = api.compose.getTags.useQuery(
+    { baseUrl: customBaseUrl },
+    {
+      enabled: open,
+    },
+  );
+  const utils = api.useUtils();
 
-	const [serverId, setServerId] = useState<string | undefined>(undefined);
-	const { mutateAsync, isLoading, error, isError } =
-		api.compose.deployTemplate.useMutation();
+  const [serverId, setServerId] = useState<string | undefined>(undefined);
+  const { mutateAsync, isLoading, error, isError } =
+    api.compose.deployTemplate.useMutation();
 
-	const templates =
-		data?.filter((template) => {
-			const matchesTags =
-				selectedTags.length === 0 ||
-				template.tags.some((tag) => selectedTags.includes(tag));
-			const matchesQuery =
-				query === "" ||
-				template.name.toLowerCase().includes(query.toLowerCase()) ||
-				template.description.toLowerCase().includes(query.toLowerCase());
-			return matchesTags && matchesQuery;
-		}) || [];
+  const templates =
+    data?.filter((template) => {
+      const matchesTags =
+        selectedTags.length === 0 ||
+        template.tags.some((tag) => selectedTags.includes(tag));
+      const matchesQuery =
+        query === "" ||
+        template.name.toLowerCase().includes(query.toLowerCase()) ||
+        template.description.toLowerCase().includes(query.toLowerCase());
+      return matchesTags && matchesQuery;
+    }) || [];
 
-	return (
-		<Dialog open={open} onOpenChange={setOpen}>
-			<DialogTrigger className="w-full">
-				<DropdownMenuItem
-					className="w-full cursor-pointer space-x-3"
-					onSelect={(e) => e.preventDefault()}
-				>
-					<PuzzleIcon className="size-4 text-muted-foreground" />
-					<span>Template</span>
-				</DropdownMenuItem>
-			</DialogTrigger>
-			<DialogContent className="sm:max-w-[90vw] p-0">
-				<DialogHeader className="sticky top-0 z-10 bg-background p-6 border-b">
-					<div className="flex flex-col space-y-6">
-						<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
-							<div>
-								<DialogTitle>Create from Template</DialogTitle>
-								<DialogDescription>
-									Create an open source application from a template
-								</DialogDescription>
-							</div>
-							<div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
-								<Input
-									placeholder="Search Template"
-									onChange={(e) => setQuery(e.target.value)}
-									className="w-full sm:w-[200px]"
-									value={query}
-								/>
-								<Input
-									placeholder="Base URL (optional)"
-									onChange={(e) =>
-										setCustomBaseUrl(e.target.value || undefined)
-									}
-									className="w-full sm:w-[300px]"
-									value={customBaseUrl || ""}
-								/>
-								<Popover modal={true}>
-									<PopoverTrigger asChild>
-										<Button
-											variant="outline"
-											className={cn(
-												"w-full sm:w-[200px] justify-between !bg-input",
-											)}
-										>
-											{isLoadingTags
-												? "Loading...."
-												: selectedTags.length > 0
-													? `Selected ${selectedTags.length} tags`
-													: "Select tag"}
+  const hasServers = servers && servers.length > 0;
 
-											<ChevronsUpDown className="ml-2 h-4 w-4 opacity-50" />
-										</Button>
-									</PopoverTrigger>
-									<PopoverContent className="p-0" align="start">
-										<Command>
-											<CommandInput
-												placeholder="Search tag..."
-												className="h-9"
-											/>
-											{isLoadingTags && (
-												<span className="py-6 text-center text-sm">
-													Loading Tags....
-												</span>
-											)}
-											<CommandEmpty>No tags found.</CommandEmpty>
-											<ScrollArea className="h-96">
-												<CommandGroup>
-													{tags?.map((tag) => (
-														<CommandItem
-															value={tag}
-															key={tag}
-															onSelect={() => {
-																if (selectedTags.includes(tag)) {
-																	setSelectedTags(
-																		selectedTags.filter((t) => t !== tag),
-																	);
-																	return;
-																}
-																setSelectedTags([...selectedTags, tag]);
-															}}
-														>
-															{tag}
-															<CheckIcon
-																className={cn(
-																	"ml-auto h-4 w-4",
-																	selectedTags.includes(tag)
-																		? "opacity-100"
-																		: "opacity-0",
-																)}
-															/>
-														</CommandItem>
-													))}
-												</CommandGroup>
-											</ScrollArea>
-										</Command>
-									</PopoverContent>
-								</Popover>
-								<Button
-									size="icon"
-									onClick={() =>
-										setViewMode(viewMode === "detailed" ? "icon" : "detailed")
-									}
-									className="h-9 w-9"
-								>
-									{viewMode === "detailed" ? (
-										<LayoutGrid className="size-4" />
-									) : (
-										<List className="size-4" />
-									)}
-								</Button>
-							</div>
-						</div>
-						{selectedTags.length > 0 && (
-							<div className="flex flex-wrap justify-end gap-2">
-								{selectedTags.map((tag) => (
-									<Badge
-										key={tag}
-										variant="secondary"
-										className="cursor-pointer"
-										onClick={() =>
-											setSelectedTags(selectedTags.filter((t) => t !== tag))
-										}
-									>
-										{tag} ×
-									</Badge>
-								))}
-							</div>
-						)}
-					</div>
-				</DialogHeader>
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger className="w-full">
+        <DropdownMenuItem
+          className="w-full cursor-pointer space-x-3"
+          onSelect={(e) => e.preventDefault()}
+        >
+          <PuzzleIcon className="size-4 text-muted-foreground" />
+          <span>Template</span>
+        </DropdownMenuItem>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[90vw] p-0">
+        <DialogHeader className="sticky top-0 z-10 bg-background p-6 border-b">
+          <div className="flex flex-col space-y-6">
+            <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
+              <div>
+                <DialogTitle>Create from Template</DialogTitle>
+                <DialogDescription>
+                  Create an open source application from a template
+                </DialogDescription>
+              </div>
+              <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
+                <Input
+                  placeholder="Search Template"
+                  onChange={(e) => setQuery(e.target.value)}
+                  className="w-full sm:w-[200px]"
+                  value={query}
+                />
+                <Input
+                  placeholder="Base URL (optional)"
+                  onChange={(e) =>
+                    setCustomBaseUrl(e.target.value || undefined)
+                  }
+                  className="w-full sm:w-[300px]"
+                  value={customBaseUrl || ""}
+                />
+                <Popover modal={true}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      className={cn(
+                        "w-full sm:w-[200px] justify-between !bg-input",
+                      )}
+                    >
+                      {isLoadingTags
+                        ? "Loading...."
+                        : selectedTags.length > 0
+                          ? `Selected ${selectedTags.length} tags`
+                          : "Select tag"}
 
-				<ScrollArea className="h-[calc(98vh-8rem)]">
-					<div className="p-6">
-						{isError && (
-							<AlertBlock type="error" className="mb-4">
-								{error?.message}
-							</AlertBlock>
-						)}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="p-0" align="start">
+                    <Command>
+                      <CommandInput
+                        placeholder="Search tag..."
+                        className="h-9"
+                      />
+                      {isLoadingTags && (
+                        <span className="py-6 text-center text-sm">
+                          Loading Tags....
+                        </span>
+                      )}
+                      <CommandEmpty>No tags found.</CommandEmpty>
+                      <ScrollArea className="h-96">
+                        <CommandGroup>
+                          {tags?.map((tag) => (
+                            <CommandItem
+                              value={tag}
+                              key={tag}
+                              onSelect={() => {
+                                if (selectedTags.includes(tag)) {
+                                  setSelectedTags(
+                                    selectedTags.filter((t) => t !== tag),
+                                  );
+                                  return;
+                                }
+                                setSelectedTags([...selectedTags, tag]);
+                              }}
+                            >
+                              {tag}
+                              <CheckIcon
+                                className={cn(
+                                  "ml-auto h-4 w-4",
+                                  selectedTags.includes(tag)
+                                    ? "opacity-100"
+                                    : "opacity-0",
+                                )}
+                              />
+                            </CommandItem>
+                          ))}
+                        </CommandGroup>
+                      </ScrollArea>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+                <Button
+                  size="icon"
+                  onClick={() =>
+                    setViewMode(viewMode === "detailed" ? "icon" : "detailed")
+                  }
+                  className="h-9 w-9"
+                >
+                  {viewMode === "detailed" ? (
+                    <LayoutGrid className="size-4" />
+                  ) : (
+                    <List className="size-4" />
+                  )}
+                </Button>
+              </div>
+            </div>
+            {selectedTags.length > 0 && (
+              <div className="flex flex-wrap justify-end gap-2">
+                {selectedTags.map((tag) => (
+                  <Badge
+                    key={tag}
+                    variant="secondary"
+                    className="cursor-pointer"
+                    onClick={() =>
+                      setSelectedTags(selectedTags.filter((t) => t !== tag))
+                    }
+                  >
+                    {tag} ×
+                  </Badge>
+                ))}
+              </div>
+            )}
+          </div>
+        </DialogHeader>
 
-						{isErrorTemplates && (
-							<AlertBlock type="error" className="mb-4">
-								{errorTemplates?.message}
-							</AlertBlock>
-						)}
+        <ScrollArea className="h-[calc(98vh-8rem)]">
+          <div className="p-6">
+            {isError && (
+              <AlertBlock type="error" className="mb-4">
+                {error?.message}
+              </AlertBlock>
+            )}
 
-						{isLoadingTemplates ? (
-							<div className="flex justify-center items-center w-full h-full flex-row gap-4">
-								<Loader2 className="size-8 text-muted-foreground animate-spin min-h-[60vh]" />
-								<div className="text-lg font-medium text-muted-foreground">
-									Loading templates...
-								</div>
-							</div>
-						) : templates.length === 0 ? (
-							<div className="flex justify-center items-center w-full gap-2 min-h-[50vh]">
-								<SearchIcon className="text-muted-foreground size-6" />
-								<div className="text-xl font-medium text-muted-foreground">
-									No templates found
-								</div>
-							</div>
-						) : (
-							<div
-								className={cn(
-									"grid gap-6",
-									viewMode === "detailed"
-										? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
-										: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6",
-								)}
-							>
-								{templates?.map((template) => (
-									<div
-										key={template?.id}
-										className={cn(
-											"flex flex-col border rounded-lg overflow-hidden relative",
-											viewMode === "icon" && "h-[200px]",
-											viewMode === "detailed" && "h-[400px]",
-										)}
-									>
-										<Badge className="absolute top-2 right-2" variant="blue">
-											{template?.version}
-										</Badge>
-										<div
-											className={cn(
-												"flex-none p-6 pb-3 flex flex-col items-center gap-4 bg-muted/30",
-												viewMode === "detailed" && "border-b",
-											)}
-										>
-											<img
-												src={`${customBaseUrl || "https://templates.dokploy.com/"}/blueprints/${template?.id}/${template?.logo}`}
-												className={cn(
-													"object-contain",
-													viewMode === "detailed" ? "size-24" : "size-16",
-												)}
-												alt={template?.name}
-											/>
-											<div className="flex flex-col items-center gap-2">
-												<span className="text-sm font-medium line-clamp-1">
-													{template?.name}
-												</span>
-												{viewMode === "detailed" &&
-													template?.tags?.length > 0 && (
-														<div className="flex flex-wrap justify-center gap-1.5">
-															{template?.tags?.map((tag) => (
-																<Badge
-																	key={tag}
-																	variant="green"
-																	className="text-[10px] px-2 py-0"
-																>
-																	{tag}
-																</Badge>
-															))}
-														</div>
-													)}
-											</div>
-										</div>
+            {isErrorTemplates && (
+              <AlertBlock type="error" className="mb-4">
+                {errorTemplates?.message}
+              </AlertBlock>
+            )}
 
-										{/* Template Content */}
-										{viewMode === "detailed" && (
-											<ScrollArea className="flex-1 p-6">
-												<div className="text-sm text-muted-foreground">
-													{template?.description}
-												</div>
-											</ScrollArea>
-										)}
+            {isLoadingTemplates ? (
+              <div className="flex justify-center items-center w-full h-full flex-row gap-4">
+                <Loader2 className="size-8 text-muted-foreground animate-spin min-h-[60vh]" />
+                <div className="text-lg font-medium text-muted-foreground">
+                  Loading templates...
+                </div>
+              </div>
+            ) : templates.length === 0 ? (
+              <div className="flex justify-center items-center w-full gap-2 min-h-[50vh]">
+                <SearchIcon className="text-muted-foreground size-6" />
+                <div className="text-xl font-medium text-muted-foreground">
+                  No templates found
+                </div>
+              </div>
+            ) : (
+              <div
+                className={cn(
+                  "grid gap-6",
+                  viewMode === "detailed"
+                    ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
+                    : "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6",
+                )}
+              >
+                {templates?.map((template) => (
+                  <div
+                    key={template?.id}
+                    className={cn(
+                      "flex flex-col border rounded-lg overflow-hidden relative",
+                      viewMode === "icon" && "h-[200px]",
+                      viewMode === "detailed" && "h-[400px]",
+                    )}
+                  >
+                    <Badge className="absolute top-2 right-2" variant="blue">
+                      {template?.version}
+                    </Badge>
+                    <div
+                      className={cn(
+                        "flex-none p-6 pb-3 flex flex-col items-center gap-4 bg-muted/30",
+                        viewMode === "detailed" && "border-b",
+                      )}
+                    >
+                      <img
+                        src={`${customBaseUrl || "https://templates.dokploy.com/"}/blueprints/${template?.id}/${template?.logo}`}
+                        className={cn(
+                          "object-contain",
+                          viewMode === "detailed" ? "size-24" : "size-16",
+                        )}
+                        alt={template?.name}
+                      />
+                      <div className="flex flex-col items-center gap-2">
+                        <span className="text-sm font-medium line-clamp-1">
+                          {template?.name}
+                        </span>
+                        {viewMode === "detailed" &&
+                          template?.tags?.length > 0 && (
+                            <div className="flex flex-wrap justify-center gap-1.5">
+                              {template?.tags?.map((tag) => (
+                                <Badge
+                                  key={tag}
+                                  variant="green"
+                                  className="text-[10px] px-2 py-0"
+                                >
+                                  {tag}
+                                </Badge>
+                              ))}
+                            </div>
+                          )}
+                      </div>
+                    </div>
 
-										{/* Create Button */}
-										<div
-											className={cn(
-												"flex-none px-6 py-3 mt-auto",
-												viewMode === "detailed"
-													? "flex items-center justify-between bg-muted/30 border-t"
-													: "flex justify-center",
-											)}
-										>
-											{viewMode === "detailed" && (
-												<div className="flex gap-2">
-													{template?.links?.github && (
-														<Link
-															href={template?.links?.github}
-															target="_blank"
-															className="text-muted-foreground hover:text-foreground transition-colors"
-														>
-															<GithubIcon className="size-5" />
-														</Link>
-													)}
-													{template?.links?.website && (
-														<Link
-															href={template?.links?.website}
-															target="_blank"
-															className="text-muted-foreground hover:text-foreground transition-colors"
-														>
-															<Globe className="size-5" />
-														</Link>
-													)}
-													{template?.links?.docs && (
-														<Link
-															href={template?.links?.docs}
-															target="_blank"
-															className="text-muted-foreground hover:text-foreground transition-colors"
-														>
-															<BookText className="size-5" />
-														</Link>
-													)}
-												</div>
-											)}
-											<AlertDialog>
-												<AlertDialogTrigger asChild>
-													<Button
-														variant="secondary"
-														size="sm"
-														className={cn(
-															"w-auto",
-															viewMode === "detailed" && "w-auto",
-														)}
-													>
-														Create
-													</Button>
-												</AlertDialogTrigger>
-												<AlertDialogContent>
-													<AlertDialogHeader>
-														<AlertDialogTitle>
-															Are you absolutely sure?
-														</AlertDialogTitle>
-														<AlertDialogDescription>
-															This will create an application from the{" "}
-															{template?.name} template and add it to your
-															project.
-														</AlertDialogDescription>
+                    {/* Template Content */}
+                    {viewMode === "detailed" && (
+                      <ScrollArea className="flex-1 p-6">
+                        <div className="text-sm text-muted-foreground">
+                          {template?.description}
+                        </div>
+                      </ScrollArea>
+                    )}
 
-														<div>
-															<TooltipProvider delayDuration={0}>
-																<Tooltip>
-																	<TooltipTrigger asChild>
-																		<Label className="break-all w-fit flex flex-row gap-1 items-center pb-2 pt-3.5">
-																			Select a Server{" "}
-																			{!isCloud ? "(Optional)" : ""}
-																			<HelpCircle className="size-4 text-muted-foreground" />
-																		</Label>
-																	</TooltipTrigger>
-																	<TooltipContent
-																		className="z-[999] w-[300px]"
-																		align="start"
-																		side="top"
-																	>
-																		<span>
-																			If no server is selected, the application
-																			will be deployed on the server where the
-																			user is logged in.
-																		</span>
-																	</TooltipContent>
-																</Tooltip>
-															</TooltipProvider>
+                    {/* Create Button */}
+                    <div
+                      className={cn(
+                        "flex-none px-6 py-3 mt-auto",
+                        viewMode === "detailed"
+                          ? "flex items-center justify-between bg-muted/30 border-t"
+                          : "flex justify-center",
+                      )}
+                    >
+                      {viewMode === "detailed" && (
+                        <div className="flex gap-2">
+                          {template?.links?.github && (
+                            <Link
+                              href={template?.links?.github}
+                              target="_blank"
+                              className="text-muted-foreground hover:text-foreground transition-colors"
+                            >
+                              <GithubIcon className="size-5" />
+                            </Link>
+                          )}
+                          {template?.links?.website && (
+                            <Link
+                              href={template?.links?.website}
+                              target="_blank"
+                              className="text-muted-foreground hover:text-foreground transition-colors"
+                            >
+                              <Globe className="size-5" />
+                            </Link>
+                          )}
+                          {template?.links?.docs && (
+                            <Link
+                              href={template?.links?.docs}
+                              target="_blank"
+                              className="text-muted-foreground hover:text-foreground transition-colors"
+                            >
+                              <BookText className="size-5" />
+                            </Link>
+                          )}
+                        </div>
+                      )}
+                      <AlertDialog>
+                        <AlertDialogTrigger asChild>
+                          <Button
+                            variant="secondary"
+                            size="sm"
+                            className={cn(
+                              "w-auto",
+                              viewMode === "detailed" && "w-auto",
+                            )}
+                          >
+                            Create
+                          </Button>
+                        </AlertDialogTrigger>
+                        <AlertDialogContent>
+                          <AlertDialogHeader>
+                            <AlertDialogTitle>
+                              Are you absolutely sure?
+                            </AlertDialogTitle>
+                            <AlertDialogDescription>
+                              This will create an application from the{" "}
+                              {template?.name} template and add it to your
+                              project.
+                            </AlertDialogDescription>
 
-															<Select
-																onValueChange={(e) => {
-																	setServerId(e);
-																}}
-															>
-																<SelectTrigger>
-																	<SelectValue placeholder="Select a Server" />
-																</SelectTrigger>
-																<SelectContent>
-																	<SelectGroup>
-																		{servers?.map((server) => (
-																			<SelectItem
-																				key={server.serverId}
-																				value={server.serverId}
-																			>
-																				<span className="flex items-center gap-2 justify-between w-full">
-																					<span>{server.name}</span>
-																					<span className="text-muted-foreground text-xs self-center">
-																						{server.ipAddress}
-																					</span>
-																				</span>
-																			</SelectItem>
-																		))}
-																		<SelectLabel>
-																			Servers ({servers?.length})
-																		</SelectLabel>
-																	</SelectGroup>
-																</SelectContent>
-															</Select>
-														</div>
-													</AlertDialogHeader>
-													<AlertDialogFooter>
-														<AlertDialogCancel>Cancel</AlertDialogCancel>
-														<AlertDialogAction
-															disabled={isLoading}
-															onClick={async () => {
-																const promise = mutateAsync({
-																	projectId,
-																	serverId: serverId || undefined,
-																	id: template.id,
-																	baseUrl: customBaseUrl,
-																});
-																toast.promise(promise, {
-																	loading: "Setting up...",
-																	success: () => {
-																		utils.project.one.invalidate({
-																			projectId,
-																		});
-																		setOpen(false);
-																		return `${template.name} template created successfully`;
-																	},
-																	error: () => {
-																		return `An error occurred deploying ${template.name} template`;
-																	},
-																});
-															}}
-														>
-															Confirm
-														</AlertDialogAction>
-													</AlertDialogFooter>
-												</AlertDialogContent>
-											</AlertDialog>
-										</div>
-									</div>
-								))}
-							</div>
-						)}
-					</div>
-				</ScrollArea>
-			</DialogContent>
-		</Dialog>
-	);
+                            {hasServers && (
+                              <div>
+                                <TooltipProvider delayDuration={0}>
+                                  <Tooltip>
+                                    <TooltipTrigger asChild>
+                                      <Label className="break-all w-fit flex flex-row gap-1 items-center pb-2 pt-3.5">
+                                        Select a Server{" "}
+                                        {!isCloud ? "(Optional)" : ""}
+                                        <HelpCircle className="size-4 text-muted-foreground" />
+                                      </Label>
+                                    </TooltipTrigger>
+                                    <TooltipContent
+                                      className="z-[999] w-[300px]"
+                                      align="start"
+                                      side="top"
+                                    >
+                                      <span>
+                                        If no server is selected, the
+                                        application will be deployed on the
+                                        server where the user is logged in.
+                                      </span>
+                                    </TooltipContent>
+                                  </Tooltip>
+                                </TooltipProvider>
+
+                                <Select
+                                  onValueChange={(e) => {
+                                    setServerId(e);
+                                  }}
+                                >
+                                  <SelectTrigger>
+                                    <SelectValue placeholder="Select a Server" />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    <SelectGroup>
+                                      {servers?.map((server) => (
+                                        <SelectItem
+                                          key={server.serverId}
+                                          value={server.serverId}
+                                        >
+                                          <span className="flex items-center gap-2 justify-between w-full">
+                                            <span>{server.name}</span>
+                                            <span className="text-muted-foreground text-xs self-center">
+                                              {server.ipAddress}
+                                            </span>
+                                          </span>
+                                        </SelectItem>
+                                      ))}
+                                      <SelectLabel>
+                                        Servers ({servers?.length})
+                                      </SelectLabel>
+                                    </SelectGroup>
+                                  </SelectContent>
+                                </Select>
+                              </div>
+                            )}
+                          </AlertDialogHeader>
+                          <AlertDialogFooter>
+                            <AlertDialogCancel>Cancel</AlertDialogCancel>
+                            <AlertDialogAction
+                              disabled={isLoading}
+                              onClick={async () => {
+                                const promise = mutateAsync({
+                                  projectId,
+                                  serverId: serverId || undefined,
+                                  id: template.id,
+                                  baseUrl: customBaseUrl,
+                                });
+                                toast.promise(promise, {
+                                  loading: "Setting up...",
+                                  success: () => {
+                                    utils.project.one.invalidate({
+                                      projectId,
+                                    });
+                                    setOpen(false);
+                                    return `${template.name} template created successfully`;
+                                  },
+                                  error: () => {
+                                    return `An error occurred deploying ${template.name} template`;
+                                  },
+                                });
+                              }}
+                            >
+                              Confirm
+                            </AlertDialogAction>
+                          </AlertDialogFooter>
+                        </AlertDialogContent>
+                      </AlertDialog>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </ScrollArea>
+      </DialogContent>
+    </Dialog>
+  );
 };
diff --git a/apps/dokploy/components/dashboard/project/ai/step-one.tsx b/apps/dokploy/components/dashboard/project/ai/step-one.tsx
index e2a6795fe..29cf90305 100644
--- a/apps/dokploy/components/dashboard/project/ai/step-one.tsx
+++ b/apps/dokploy/components/dashboard/project/ai/step-one.tsx
@@ -25,6 +25,7 @@ const examples = [
 export const StepOne = ({ setTemplateInfo, templateInfo }: any) => {
 	// Get servers from the API
 	const { data: servers } = api.server.withSSHKey.useQuery();
+	const hasServers = servers && servers.length > 0;
 
 	const handleExampleClick = (example: string) => {
 		setTemplateInfo({ ...templateInfo, userInput: example });
@@ -47,37 +48,39 @@ export const StepOne = ({ setTemplateInfo, templateInfo }: any) => {
 						/>
 					</div>
 
-					<div className="space-y-2">
-						<Label htmlFor="server-deploy">
-							Select the server where you want to deploy (optional)
-						</Label>
-						<Select
-							value={templateInfo.server?.serverId}
-							onValueChange={(value) => {
-								const server = servers?.find((s) => s.serverId === value);
-								if (server) {
-									setTemplateInfo({
-										...templateInfo,
-										server: server,
-									});
-								}
-							}}
-						>
-							<SelectTrigger className="w-full">
-								<SelectValue placeholder="Select a server" />
-							</SelectTrigger>
-							<SelectContent>
-								<SelectGroup>
-									{servers?.map((server) => (
-										<SelectItem key={server.serverId} value={server.serverId}>
-											{server.name}
-										</SelectItem>
-									))}
-									<SelectLabel>Servers ({servers?.length})</SelectLabel>
-								</SelectGroup>
-							</SelectContent>
-						</Select>
-					</div>
+					{hasServers && (
+						<div className="space-y-2">
+							<Label htmlFor="server-deploy">
+								Select the server where you want to deploy (optional)
+							</Label>
+							<Select
+								value={templateInfo.server?.serverId}
+								onValueChange={(value) => {
+									const server = servers?.find((s) => s.serverId === value);
+									if (server) {
+										setTemplateInfo({
+											...templateInfo,
+											server: server,
+										});
+									}
+								}}
+							>
+								<SelectTrigger className="w-full">
+									<SelectValue placeholder="Select a server" />
+								</SelectTrigger>
+								<SelectContent>
+									<SelectGroup>
+										{servers?.map((server) => (
+											<SelectItem key={server.serverId} value={server.serverId}>
+												{server.name}
+											</SelectItem>
+										))}
+										<SelectLabel>Servers ({servers?.length})</SelectLabel>
+									</SelectGroup>
+								</SelectContent>
+							</Select>
+						</div>
+					)}
 
 					<div className="space-y-2">
 						<Label>Examples:</Label>

From 212c1b2d5f266d881c3f40953673ffc593980ad4 Mon Sep 17 00:00:00 2001
From: Jhon <jhon@stelli.dev>
Date: Sat, 26 Jul 2025 14:18:26 -0300
Subject: [PATCH 2/3] feat(dashboard): show "Action Required" badge for
 incomplete Git provider setup

---
 .../settings/git/show-git-providers.tsx       | 495 +++++++++---------
 1 file changed, 251 insertions(+), 244 deletions(-)

diff --git a/apps/dokploy/components/dashboard/settings/git/show-git-providers.tsx b/apps/dokploy/components/dashboard/settings/git/show-git-providers.tsx
index 05273ca2a..593f8f994 100644
--- a/apps/dokploy/components/dashboard/settings/git/show-git-providers.tsx
+++ b/apps/dokploy/components/dashboard/settings/git/show-git-providers.tsx
@@ -1,27 +1,27 @@
 import {
-	BitbucketIcon,
-	GiteaIcon,
-	GithubIcon,
-	GitlabIcon,
+  BitbucketIcon,
+  GiteaIcon,
+  GithubIcon,
+  GitlabIcon,
 } from "@/components/icons/data-tools-icons";
 import { DialogAction } from "@/components/shared/dialog-action";
 import { Button, buttonVariants } from "@/components/ui/button";
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
 import { useUrl } from "@/utils/hooks/use-url";
 import { formatDate } from "date-fns";
 import {
-	ExternalLinkIcon,
-	GitBranch,
-	ImportIcon,
-	Loader2,
-	Trash2,
+  ExternalLinkIcon,
+  GitBranch,
+  ImportIcon,
+  Loader2,
+  Trash2,
 } from "lucide-react";
 import Link from "next/link";
 import { toast } from "sonner";
@@ -33,249 +33,256 @@ import { AddGithubProvider } from "./github/add-github-provider";
 import { EditGithubProvider } from "./github/edit-github-provider";
 import { AddGitlabProvider } from "./gitlab/add-gitlab-provider";
 import { EditGitlabProvider } from "./gitlab/edit-gitlab-provider";
+import { Badge } from "@/components/ui/badge";
 
 export const ShowGitProviders = () => {
-	const { data, isLoading, refetch } = api.gitProvider.getAll.useQuery();
-	const { mutateAsync, isLoading: isRemoving } =
-		api.gitProvider.remove.useMutation();
-	const url = useUrl();
+  const { data, isLoading, refetch } = api.gitProvider.getAll.useQuery();
+  const { mutateAsync, isLoading: isRemoving } =
+    api.gitProvider.remove.useMutation();
+  const url = useUrl();
 
-	const getGitlabUrl = (
-		clientId: string,
-		gitlabId: string,
-		gitlabUrl: string,
-	) => {
-		const redirectUri = `${url}/api/providers/gitlab/callback?gitlabId=${gitlabId}`;
-		const scope = "api read_user read_repository";
-		const authUrl = `${gitlabUrl}/oauth/authorize?client_id=${clientId}&redirect_uri=${encodeURIComponent(redirectUri)}&response_type=code&scope=${encodeURIComponent(scope)}`;
-		return authUrl;
-	};
+  const getGitlabUrl = (
+    clientId: string,
+    gitlabId: string,
+    gitlabUrl: string,
+  ) => {
+    const redirectUri = `${url}/api/providers/gitlab/callback?gitlabId=${gitlabId}`;
+    const scope = "api read_user read_repository";
+    const authUrl = `${gitlabUrl}/oauth/authorize?client_id=${clientId}&redirect_uri=${encodeURIComponent(redirectUri)}&response_type=code&scope=${encodeURIComponent(scope)}`;
+    return authUrl;
+  };
 
-	return (
-		<div className="w-full">
-			<Card className="h-full bg-sidebar p-2.5 rounded-xl max-w-5xl mx-auto">
-				<div className="rounded-xl bg-background shadow-md ">
-					<CardHeader className="">
-						<CardTitle className="text-xl flex flex-row gap-2">
-							<GitBranch className="size-6 text-muted-foreground self-center" />
-							Git Providers
-						</CardTitle>
-						<CardDescription>
-							Connect your Git provider for authentication.
-						</CardDescription>
-					</CardHeader>
-					<CardContent className="space-y-2 py-8 border-t">
-						{isLoading ? (
-							<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[25vh]">
-								<span>Loading...</span>
-								<Loader2 className="animate-spin size-4" />
-							</div>
-						) : (
-							<>
-								{data?.length === 0 ? (
-									<div className="flex flex-col items-center gap-3 min-h-[25vh] justify-center">
-										<GitBranch className="size-8 self-center text-muted-foreground" />
-										<span className="text-base text-muted-foreground text-center">
-											Create your first Git Provider
-										</span>
-										<div>
-											<div className="flex items-center bg-sidebar p-1 w-full rounded-lg">
-												<div className="flex flex-wrap items-center gap-4 p-3.5 rounded-lg bg-background border w-full [&>button]:grow">
-													<AddGithubProvider />
-													<AddGitlabProvider />
-													<AddBitbucketProvider />
-													<AddGiteaProvider />
-												</div>
-											</div>
-										</div>
-									</div>
-								) : (
-									<div className="flex flex-col gap-4 min-h-[25vh]">
-										<div className="flex flex-col gap-2 rounded-lg ">
-											<span className="text-base font-medium">
-												Available Providers
-											</span>
-											<div className="flex items-center bg-sidebar p-1 w-full rounded-lg">
-												<div className="flex flex-wrap items-center gap-4 p-3.5 rounded-lg bg-background border w-full [&>button]:grow">
-													<AddGithubProvider />
-													<AddGitlabProvider />
-													<AddBitbucketProvider />
-													<AddGiteaProvider />
-												</div>
-											</div>
-										</div>
+  return (
+    <div className="w-full">
+      <Card className="h-full bg-sidebar p-2.5 rounded-xl max-w-5xl mx-auto">
+        <div className="rounded-xl bg-background shadow-md ">
+          <CardHeader className="">
+            <CardTitle className="text-xl flex flex-row gap-2">
+              <GitBranch className="size-6 text-muted-foreground self-center" />
+              Git Providers
+            </CardTitle>
+            <CardDescription>
+              Connect your Git provider for authentication.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-2 py-8 border-t">
+            {isLoading ? (
+              <div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[25vh]">
+                <span>Loading...</span>
+                <Loader2 className="animate-spin size-4" />
+              </div>
+            ) : (
+              <>
+                {data?.length === 0 ? (
+                  <div className="flex flex-col items-center gap-3 min-h-[25vh] justify-center">
+                    <GitBranch className="size-8 self-center text-muted-foreground" />
+                    <span className="text-base text-muted-foreground text-center">
+                      Create your first Git Provider
+                    </span>
+                    <div>
+                      <div className="flex items-center bg-sidebar p-1 w-full rounded-lg">
+                        <div className="flex flex-wrap items-center gap-4 p-3.5 rounded-lg bg-background border w-full [&>button]:grow">
+                          <AddGithubProvider />
+                          <AddGitlabProvider />
+                          <AddBitbucketProvider />
+                          <AddGiteaProvider />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="flex flex-col gap-4 min-h-[25vh]">
+                    <div className="flex flex-col gap-2 rounded-lg ">
+                      <span className="text-base font-medium">
+                        Available Providers
+                      </span>
+                      <div className="flex items-center bg-sidebar p-1 w-full rounded-lg">
+                        <div className="flex flex-wrap items-center gap-4 p-3.5 rounded-lg bg-background border w-full [&>button]:grow">
+                          <AddGithubProvider />
+                          <AddGitlabProvider />
+                          <AddBitbucketProvider />
+                          <AddGiteaProvider />
+                        </div>
+                      </div>
+                    </div>
 
-										<div className="flex flex-col gap-4 rounded-lg ">
-											{data?.map((gitProvider, _index) => {
-												const isGithub = gitProvider.providerType === "github";
-												const isGitlab = gitProvider.providerType === "gitlab";
-												const isBitbucket =
-													gitProvider.providerType === "bitbucket";
-												const isGitea = gitProvider.providerType === "gitea";
+                    <div className="flex flex-col gap-4 rounded-lg ">
+                      {data?.map((gitProvider, _index) => {
+                        const isGithub = gitProvider.providerType === "github";
+                        const isGitlab = gitProvider.providerType === "gitlab";
+                        const isBitbucket =
+                          gitProvider.providerType === "bitbucket";
+                        const isGitea = gitProvider.providerType === "gitea";
 
-												const haveGithubRequirements =
-													isGithub &&
-													gitProvider.github?.githubPrivateKey &&
-													gitProvider.github?.githubAppId &&
-													gitProvider.github?.githubInstallationId;
+                        const haveGithubRequirements =
+                          isGithub &&
+                          gitProvider.github?.githubPrivateKey &&
+                          gitProvider.github?.githubAppId &&
+                          gitProvider.github?.githubInstallationId;
 
-												const haveGitlabRequirements =
-													isGitlab &&
-													gitProvider.gitlab?.accessToken &&
-													gitProvider.gitlab?.refreshToken;
+                        const haveGitlabRequirements =
+                          isGitlab &&
+                          gitProvider.gitlab?.accessToken &&
+                          gitProvider.gitlab?.refreshToken;
 
-												return (
-													<div
-														key={gitProvider.gitProviderId}
-														className="flex items-center justify-between bg-sidebar p-1 w-full rounded-lg"
-													>
-														<div className="flex items-center justify-between p-3.5 rounded-lg bg-background border w-full">
-															<div className="flex flex-col items-center justify-between">
-																<div className="flex gap-2 flex-row items-center">
-																	{isGithub && (
-																		<GithubIcon className="size-5" />
-																	)}
-																	{isGitlab && (
-																		<GitlabIcon className="size-5" />
-																	)}
-																	{isBitbucket && (
-																		<BitbucketIcon className="size-5" />
-																	)}
-																	{isGitea && <GiteaIcon className="size-5" />}
-																	<div className="flex flex-col gap-1">
-																		<span className="text-sm font-medium">
-																			{gitProvider.name}
-																		</span>
-																		<span className="text-xs text-muted-foreground">
-																			{formatDate(
-																				gitProvider.createdAt,
-																				"yyyy-MM-dd hh:mm:ss a",
-																			)}
-																		</span>
-																	</div>
-																</div>
-															</div>
+                        return (
+                          <div
+                            key={gitProvider.gitProviderId}
+                            className="flex items-center justify-between bg-sidebar p-1 w-full rounded-lg"
+                          >
+                            <div className="flex items-center justify-between p-3.5 rounded-lg bg-background border w-full">
+                              <div className="flex flex-col items-center justify-between">
+                                <div className="flex gap-2 flex-row items-center">
+                                  {isGithub && (
+                                    <GithubIcon className="size-5" />
+                                  )}
+                                  {isGitlab && (
+                                    <GitlabIcon className="size-5" />
+                                  )}
+                                  {isBitbucket && (
+                                    <BitbucketIcon className="size-5" />
+                                  )}
+                                  {isGitea && <GiteaIcon className="size-5" />}
+                                  <div className="flex flex-col gap-1">
+                                    <span className="text-sm font-medium">
+                                      {gitProvider.name}
+                                    </span>
+                                    <span className="text-xs text-muted-foreground">
+                                      {formatDate(
+                                        gitProvider.createdAt,
+                                        "yyyy-MM-dd hh:mm:ss a",
+                                      )}
+                                    </span>
+                                  </div>
+                                </div>
+                              </div>
 
-															<div className="flex flex-row gap-1">
-																{!haveGithubRequirements && isGithub && (
-																	<div className="flex flex-col gap-1">
-																		<Link
-																			href={`${gitProvider?.github?.githubAppName}/installations/new?state=gh_setup:${gitProvider?.github.githubId}`}
-																			className={buttonVariants({
-																				size: "icon",
-																				variant: "ghost",
-																			})}
-																		>
-																			<ImportIcon className="size-4 text-primary" />
-																		</Link>
-																	</div>
-																)}
-																{haveGithubRequirements && isGithub && (
-																	<div className="flex flex-col gap-1">
-																		<Link
-																			href={`${gitProvider?.github?.githubAppName}`}
-																			target="_blank"
-																			className={buttonVariants({
-																				size: "icon",
-																				variant: "ghost",
-																			})}
-																		>
-																			<ExternalLinkIcon className="size-4 text-primary" />
-																		</Link>
-																	</div>
-																)}
-																{!haveGitlabRequirements && isGitlab && (
-																	<div className="flex flex-col gap-1">
-																		<Link
-																			href={getGitlabUrl(
-																				gitProvider.gitlab?.applicationId || "",
-																				gitProvider.gitlab?.gitlabId || "",
-																				gitProvider.gitlab?.gitlabUrl,
-																			)}
-																			target="_blank"
-																			className={buttonVariants({
-																				size: "icon",
-																				variant: "ghost",
-																			})}
-																		>
-																			<ImportIcon className="size-4 text-primary" />
-																		</Link>
-																	</div>
-																)}
+                              <div className="flex flex-row gap-1">
+                                {!haveGithubRequirements && isGithub && (
+                                  <div className="flex flex-row gap-1 items-center">
+                                    <Badge variant="outline" className="text-xs">
+                                      Action Required
+                                    </Badge>
+                                    <Link
+                                      href={`${gitProvider?.github?.githubAppName}/installations/new?state=gh_setup:${gitProvider?.github.githubId}`}
+                                      className={buttonVariants({
+                                        size: "icon",
+                                        variant: "ghost",
+                                      })}
+                                    >
+                                      <ImportIcon className="size-4 text-primary" />
+                                    </Link>
+                                  </div>
+                                )}
+                                {haveGithubRequirements && isGithub && (
+                                  <div className="flex flex-col gap-1">
+                                    <Link
+                                      href={`${gitProvider?.github?.githubAppName}`}
+                                      target="_blank"
+                                      className={buttonVariants({
+                                        size: "icon",
+                                        variant: "ghost",
+                                      })}
+                                    >
+                                      <ExternalLinkIcon className="size-4 text-primary" />
+                                    </Link>
+                                  </div>
+                                )}
+                                {!haveGitlabRequirements && isGitlab && (
+                                  <div className="flex flex-row gap-1 items-center">
+                                    <Badge variant="outline" className="text-xs">
+                                      Action Required
+                                    </Badge>
+                                    <Link
+                                      href={getGitlabUrl(
+                                        gitProvider.gitlab?.applicationId || "",
+                                        gitProvider.gitlab?.gitlabId || "",
+                                        gitProvider.gitlab?.gitlabUrl,
+                                      )}
+                                      target="_blank"
+                                      className={buttonVariants({
+                                        size: "icon",
+                                        variant: "ghost",
+                                      })}
+                                    >
+                                      <ImportIcon className="size-4 text-primary" />
+                                    </Link>
+                                  </div>
+                                )}
 
-																{isGithub && haveGithubRequirements && (
-																	<EditGithubProvider
-																		githubId={gitProvider.github?.githubId}
-																	/>
-																)}
+                                {isGithub && haveGithubRequirements && (
+                                  <EditGithubProvider
+                                    githubId={gitProvider.github?.githubId}
+                                  />
+                                )}
 
-																{isGitlab && (
-																	<EditGitlabProvider
-																		gitlabId={gitProvider.gitlab?.gitlabId}
-																	/>
-																)}
+                                {isGitlab && (
+                                  <EditGitlabProvider
+                                    gitlabId={gitProvider.gitlab?.gitlabId}
+                                  />
+                                )}
 
-																{isBitbucket && (
-																	<EditBitbucketProvider
-																		bitbucketId={
-																			gitProvider.bitbucket?.bitbucketId
-																		}
-																	/>
-																)}
+                                {isBitbucket && (
+                                  <EditBitbucketProvider
+                                    bitbucketId={
+                                      gitProvider.bitbucket?.bitbucketId
+                                    }
+                                  />
+                                )}
 
-																{isGitea && (
-																	<EditGiteaProvider
-																		giteaId={gitProvider.gitea?.giteaId}
-																	/>
-																)}
+                                {isGitea && (
+                                  <EditGiteaProvider
+                                    giteaId={gitProvider.gitea?.giteaId}
+                                  />
+                                )}
 
-																<DialogAction
-																	title="Delete Git Provider"
-																	description="Are you sure you want to delete this Git Provider?"
-																	type="destructive"
-																	onClick={async () => {
-																		await mutateAsync({
-																			gitProviderId: gitProvider.gitProviderId,
-																		})
-																			.then(() => {
-																				toast.success(
-																					"Git Provider deleted successfully",
-																				);
-																				refetch();
-																			})
-																			.catch(() => {
-																				toast.error(
-																					"Error deleting Git Provider",
-																				);
-																			});
-																	}}
-																>
-																	<Button
-																		variant="ghost"
-																		size="icon"
-																		className="group hover:bg-red-500/10"
-																		isLoading={isRemoving}
-																	>
-																		<Trash2 className="size-4 text-primary group-hover:text-red-500" />
-																	</Button>
-																</DialogAction>
-															</div>
-														</div>
-													</div>
-												);
-											})}
-										</div>
+                                <DialogAction
+                                  title="Delete Git Provider"
+                                  description="Are you sure you want to delete this Git Provider?"
+                                  type="destructive"
+                                  onClick={async () => {
+                                    await mutateAsync({
+                                      gitProviderId: gitProvider.gitProviderId,
+                                    })
+                                      .then(() => {
+                                        toast.success(
+                                          "Git Provider deleted successfully",
+                                        );
+                                        refetch();
+                                      })
+                                      .catch(() => {
+                                        toast.error(
+                                          "Error deleting Git Provider",
+                                        );
+                                      });
+                                  }}
+                                >
+                                  <Button
+                                    variant="ghost"
+                                    size="icon"
+                                    className="group hover:bg-red-500/10"
+                                    isLoading={isRemoving}
+                                  >
+                                    <Trash2 className="size-4 text-primary group-hover:text-red-500" />
+                                  </Button>
+                                </DialogAction>
+                              </div>
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </div>
 
-										<div className="flex flex-row gap-2 flex-wrap w-full justify-end mr-4">
-											{/* <AddCertificate /> */}
-										</div>
-									</div>
-								)}
-							</>
-						)}
-					</CardContent>
-				</div>
-			</Card>
-		</div>
-	);
+                    <div className="flex flex-row gap-2 flex-wrap w-full justify-end mr-4">
+                      {/* <AddCertificate /> */}
+                    </div>
+                  </div>
+                )}
+              </>
+            )}
+          </CardContent>
+        </div>
+      </Card>
+    </div>
+  );
 };

From d561068bcdd3b1e4e71551683578cfde0172cee1 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Sat, 26 Jul 2025 17:26:20 +0000
Subject: [PATCH 3/3] [autofix.ci] apply automated fixes

---
 .../dashboard/project/add-application.tsx     |  440 +++----
 .../dashboard/project/add-compose.tsx         |  506 ++++----
 .../dashboard/project/add-database.tsx        | 1040 ++++++++---------
 .../dashboard/project/add-template.tsx        |  958 +++++++--------
 .../settings/git/show-git-providers.tsx       |  506 ++++----
 5 files changed, 1728 insertions(+), 1722 deletions(-)

diff --git a/apps/dokploy/components/dashboard/project/add-application.tsx b/apps/dokploy/components/dashboard/project/add-application.tsx
index bdf010dc5..a6946df7d 100644
--- a/apps/dokploy/components/dashboard/project/add-application.tsx
+++ b/apps/dokploy/components/dashboard/project/add-application.tsx
@@ -7,254 +7,254 @@ import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
 } from "@/components/ui/dialog";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
 import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
 } from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { slugify } from "@/lib/slug";
 import { api } from "@/utils/api";
 
 const AddTemplateSchema = z.object({
-  name: z.string().min(1, {
-    message: "Name is required",
-  }),
-  appName: z
-    .string()
-    .min(1, {
-      message: "App name is required",
-    })
-    .regex(/^[a-z](?!.*--)([a-z0-9-]*[a-z])?$/, {
-      message:
-        "App name supports lowercase letters, numbers, '-' and can only start and end letters, and does not support continuous '-'",
-    }),
-  description: z.string().optional(),
-  serverId: z.string().optional(),
+	name: z.string().min(1, {
+		message: "Name is required",
+	}),
+	appName: z
+		.string()
+		.min(1, {
+			message: "App name is required",
+		})
+		.regex(/^[a-z](?!.*--)([a-z0-9-]*[a-z])?$/, {
+			message:
+				"App name supports lowercase letters, numbers, '-' and can only start and end letters, and does not support continuous '-'",
+		}),
+	description: z.string().optional(),
+	serverId: z.string().optional(),
 });
 
 type AddTemplate = z.infer<typeof AddTemplateSchema>;
 
 interface Props {
-  projectId: string;
-  projectName?: string;
+	projectId: string;
+	projectName?: string;
 }
 
 export const AddApplication = ({ projectId, projectName }: Props) => {
-  const utils = api.useUtils();
-  const { data: isCloud } = api.settings.isCloud.useQuery();
-  const [visible, setVisible] = useState(false);
-  const slug = slugify(projectName);
-  const { data: servers } = api.server.withSSHKey.useQuery();
+	const utils = api.useUtils();
+	const { data: isCloud } = api.settings.isCloud.useQuery();
+	const [visible, setVisible] = useState(false);
+	const slug = slugify(projectName);
+	const { data: servers } = api.server.withSSHKey.useQuery();
 
-  const hasServers = servers && servers.length > 0;
+	const hasServers = servers && servers.length > 0;
 
-  const { mutateAsync, isLoading, error, isError } =
-    api.application.create.useMutation();
+	const { mutateAsync, isLoading, error, isError } =
+		api.application.create.useMutation();
 
-  const form = useForm<AddTemplate>({
-    defaultValues: {
-      name: "",
-      appName: `${slug}-`,
-      description: "",
-    },
-    resolver: zodResolver(AddTemplateSchema),
-  });
+	const form = useForm<AddTemplate>({
+		defaultValues: {
+			name: "",
+			appName: `${slug}-`,
+			description: "",
+		},
+		resolver: zodResolver(AddTemplateSchema),
+	});
 
-  const onSubmit = async (data: AddTemplate) => {
-    await mutateAsync({
-      name: data.name,
-      appName: data.appName,
-      description: data.description,
-      projectId,
-      serverId: data.serverId,
-    })
-      .then(async () => {
-        toast.success("Service Created");
-        form.reset();
-        setVisible(false);
-        await utils.project.one.invalidate({
-          projectId,
-        });
-      })
-      .catch(() => {
-        toast.error("Error creating the service");
-      });
-  };
+	const onSubmit = async (data: AddTemplate) => {
+		await mutateAsync({
+			name: data.name,
+			appName: data.appName,
+			description: data.description,
+			projectId,
+			serverId: data.serverId,
+		})
+			.then(async () => {
+				toast.success("Service Created");
+				form.reset();
+				setVisible(false);
+				await utils.project.one.invalidate({
+					projectId,
+				});
+			})
+			.catch(() => {
+				toast.error("Error creating the service");
+			});
+	};
 
-  return (
-    <Dialog open={visible} onOpenChange={setVisible}>
-      <DialogTrigger className="w-full">
-        <DropdownMenuItem
-          className="w-full cursor-pointer space-x-3"
-          onSelect={(e) => e.preventDefault()}
-        >
-          <Folder className="size-4 text-muted-foreground" />
-          <span>Application</span>
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-lg">
-        <DialogHeader>
-          <DialogTitle>Create</DialogTitle>
-          <DialogDescription>
-            Assign a name and description to your application
-          </DialogDescription>
-        </DialogHeader>
-        {isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
-        <Form {...form}>
-          <form
-            id="hook-form"
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="grid w-full gap-4"
-          >
-            <FormField
-              control={form.control}
-              name="name"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Name</FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder="Frontend"
-                      {...field}
-                      onChange={(e) => {
-                        const val = e.target.value?.trim() || "";
-                        const serviceName = slugify(val);
-                        form.setValue("appName", `${slug}-${serviceName}`);
-                        field.onChange(val);
-                      }}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            {hasServers && (
-              <FormField
-                control={form.control}
-                name="serverId"
-                render={({ field }) => (
-                  <FormItem>
-                    <TooltipProvider delayDuration={0}>
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <FormLabel className="break-all w-fit flex flex-row gap-1 items-center">
-                            Select a Server {!isCloud ? "(Optional)" : ""}
-                            <HelpCircle className="size-4 text-muted-foreground" />
-                          </FormLabel>
-                        </TooltipTrigger>
-                        <TooltipContent
-                          className="z-[999] w-[300px]"
-                          align="start"
-                          side="top"
-                        >
-                          <span>
-                            If no server is selected, the application will be
-                            deployed on the server where the user is logged in.
-                          </span>
-                        </TooltipContent>
-                      </Tooltip>
-                    </TooltipProvider>
+	return (
+		<Dialog open={visible} onOpenChange={setVisible}>
+			<DialogTrigger className="w-full">
+				<DropdownMenuItem
+					className="w-full cursor-pointer space-x-3"
+					onSelect={(e) => e.preventDefault()}
+				>
+					<Folder className="size-4 text-muted-foreground" />
+					<span>Application</span>
+				</DropdownMenuItem>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>Create</DialogTitle>
+					<DialogDescription>
+						Assign a name and description to your application
+					</DialogDescription>
+				</DialogHeader>
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+				<Form {...form}>
+					<form
+						id="hook-form"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<FormField
+							control={form.control}
+							name="name"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Name</FormLabel>
+									<FormControl>
+										<Input
+											placeholder="Frontend"
+											{...field}
+											onChange={(e) => {
+												const val = e.target.value?.trim() || "";
+												const serviceName = slugify(val);
+												form.setValue("appName", `${slug}-${serviceName}`);
+												field.onChange(val);
+											}}
+										/>
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						{hasServers && (
+							<FormField
+								control={form.control}
+								name="serverId"
+								render={({ field }) => (
+									<FormItem>
+										<TooltipProvider delayDuration={0}>
+											<Tooltip>
+												<TooltipTrigger asChild>
+													<FormLabel className="break-all w-fit flex flex-row gap-1 items-center">
+														Select a Server {!isCloud ? "(Optional)" : ""}
+														<HelpCircle className="size-4 text-muted-foreground" />
+													</FormLabel>
+												</TooltipTrigger>
+												<TooltipContent
+													className="z-[999] w-[300px]"
+													align="start"
+													side="top"
+												>
+													<span>
+														If no server is selected, the application will be
+														deployed on the server where the user is logged in.
+													</span>
+												</TooltipContent>
+											</Tooltip>
+										</TooltipProvider>
 
-                    <Select
-                      onValueChange={field.onChange}
-                      defaultValue={field.value}
-                    >
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select a Server" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectGroup>
-                          {servers?.map((server) => (
-                            <SelectItem
-                              key={server.serverId}
-                              value={server.serverId}
-                            >
-                              <span className="flex items-center gap-2 justify-between w-full">
-                                <span>{server.name}</span>
-                                <span className="text-muted-foreground text-xs self-center">
-                                  {server.ipAddress}
-                                </span>
-                              </span>
-                            </SelectItem>
-                          ))}
-                          <SelectLabel>Servers ({servers?.length})</SelectLabel>
-                        </SelectGroup>
-                      </SelectContent>
-                    </Select>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            )}
-            <FormField
-              control={form.control}
-              name="appName"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>App Name</FormLabel>
-                  <FormControl>
-                    <Input placeholder="my-app" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name="description"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Description</FormLabel>
-                  <FormControl>
-                    <Textarea
-                      placeholder="Description of your service..."
-                      className="resize-none"
-                      {...field}
-                    />
-                  </FormControl>
+										<Select
+											onValueChange={field.onChange}
+											defaultValue={field.value}
+										>
+											<SelectTrigger>
+												<SelectValue placeholder="Select a Server" />
+											</SelectTrigger>
+											<SelectContent>
+												<SelectGroup>
+													{servers?.map((server) => (
+														<SelectItem
+															key={server.serverId}
+															value={server.serverId}
+														>
+															<span className="flex items-center gap-2 justify-between w-full">
+																<span>{server.name}</span>
+																<span className="text-muted-foreground text-xs self-center">
+																	{server.ipAddress}
+																</span>
+															</span>
+														</SelectItem>
+													))}
+													<SelectLabel>Servers ({servers?.length})</SelectLabel>
+												</SelectGroup>
+											</SelectContent>
+										</Select>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						)}
+						<FormField
+							control={form.control}
+							name="appName"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>App Name</FormLabel>
+									<FormControl>
+										<Input placeholder="my-app" {...field} />
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="description"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Description</FormLabel>
+									<FormControl>
+										<Textarea
+											placeholder="Description of your service..."
+											className="resize-none"
+											{...field}
+										/>
+									</FormControl>
 
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-          </form>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</form>
 
-          <DialogFooter>
-            <Button isLoading={isLoading} form="hook-form" type="submit">
-              Create
-            </Button>
-          </DialogFooter>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
+					<DialogFooter>
+						<Button isLoading={isLoading} form="hook-form" type="submit">
+							Create
+						</Button>
+					</DialogFooter>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
 };
diff --git a/apps/dokploy/components/dashboard/project/add-compose.tsx b/apps/dokploy/components/dashboard/project/add-compose.tsx
index 6823558ac..c32e55c16 100644
--- a/apps/dokploy/components/dashboard/project/add-compose.tsx
+++ b/apps/dokploy/components/dashboard/project/add-compose.tsx
@@ -7,288 +7,288 @@ import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
 } from "@/components/ui/dialog";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
 import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
 } from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { slugify } from "@/lib/slug";
 import { api } from "@/utils/api";
 
 const AddComposeSchema = z.object({
-  composeType: z.enum(["docker-compose", "stack"]).optional(),
-  name: z.string().min(1, {
-    message: "Name is required",
-  }),
-  appName: z
-    .string()
-    .min(1, {
-      message: "App name is required",
-    })
-    .regex(/^[a-z](?!.*--)([a-z0-9-]*[a-z])?$/, {
-      message:
-        "App name supports lowercase letters, numbers, '-' and can only start and end letters, and does not support continuous '-'",
-    }),
-  description: z.string().optional(),
-  serverId: z.string().optional(),
+	composeType: z.enum(["docker-compose", "stack"]).optional(),
+	name: z.string().min(1, {
+		message: "Name is required",
+	}),
+	appName: z
+		.string()
+		.min(1, {
+			message: "App name is required",
+		})
+		.regex(/^[a-z](?!.*--)([a-z0-9-]*[a-z])?$/, {
+			message:
+				"App name supports lowercase letters, numbers, '-' and can only start and end letters, and does not support continuous '-'",
+		}),
+	description: z.string().optional(),
+	serverId: z.string().optional(),
 });
 
 type AddCompose = z.infer<typeof AddComposeSchema>;
 
 interface Props {
-  projectId: string;
-  projectName?: string;
+	projectId: string;
+	projectName?: string;
 }
 
 export const AddCompose = ({ projectId, projectName }: Props) => {
-  const utils = api.useUtils();
-  const [visible, setVisible] = useState(false);
-  const slug = slugify(projectName);
-  const { data: isCloud } = api.settings.isCloud.useQuery();
-  const { data: servers } = api.server.withSSHKey.useQuery();
-  const { mutateAsync, isLoading, error, isError } =
-    api.compose.create.useMutation();
+	const utils = api.useUtils();
+	const [visible, setVisible] = useState(false);
+	const slug = slugify(projectName);
+	const { data: isCloud } = api.settings.isCloud.useQuery();
+	const { data: servers } = api.server.withSSHKey.useQuery();
+	const { mutateAsync, isLoading, error, isError } =
+		api.compose.create.useMutation();
 
-  const hasServers = servers && servers.length > 0;
+	const hasServers = servers && servers.length > 0;
 
-  const form = useForm<AddCompose>({
-    defaultValues: {
-      name: "",
-      description: "",
-      composeType: "docker-compose",
-      appName: `${slug}-`,
-    },
-    resolver: zodResolver(AddComposeSchema),
-  });
+	const form = useForm<AddCompose>({
+		defaultValues: {
+			name: "",
+			description: "",
+			composeType: "docker-compose",
+			appName: `${slug}-`,
+		},
+		resolver: zodResolver(AddComposeSchema),
+	});
 
-  useEffect(() => {
-    form.reset();
-  }, [form, form.reset, form.formState.isSubmitSuccessful]);
+	useEffect(() => {
+		form.reset();
+	}, [form, form.reset, form.formState.isSubmitSuccessful]);
 
-  const onSubmit = async (data: AddCompose) => {
-    await mutateAsync({
-      name: data.name,
-      description: data.description,
-      projectId,
-      composeType: data.composeType,
-      appName: data.appName,
-      serverId: data.serverId,
-    })
-      .then(async () => {
-        toast.success("Compose Created");
-        setVisible(false);
-        await utils.project.one.invalidate({
-          projectId,
-        });
-      })
-      .catch(() => {
-        toast.error("Error creating the compose");
-      });
-  };
+	const onSubmit = async (data: AddCompose) => {
+		await mutateAsync({
+			name: data.name,
+			description: data.description,
+			projectId,
+			composeType: data.composeType,
+			appName: data.appName,
+			serverId: data.serverId,
+		})
+			.then(async () => {
+				toast.success("Compose Created");
+				setVisible(false);
+				await utils.project.one.invalidate({
+					projectId,
+				});
+			})
+			.catch(() => {
+				toast.error("Error creating the compose");
+			});
+	};
 
-  return (
-    <Dialog open={visible} onOpenChange={setVisible}>
-      <DialogTrigger className="w-full">
-        <DropdownMenuItem
-          className="w-full cursor-pointer space-x-3"
-          onSelect={(e) => e.preventDefault()}
-        >
-          <CircuitBoard className="size-4 text-muted-foreground" />
-          <span>Compose</span>
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-xl">
-        <DialogHeader>
-          <DialogTitle>Create Compose</DialogTitle>
-          <DialogDescription>
-            Assign a name and description to your compose
-          </DialogDescription>
-        </DialogHeader>
-        {isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+	return (
+		<Dialog open={visible} onOpenChange={setVisible}>
+			<DialogTrigger className="w-full">
+				<DropdownMenuItem
+					className="w-full cursor-pointer space-x-3"
+					onSelect={(e) => e.preventDefault()}
+				>
+					<CircuitBoard className="size-4 text-muted-foreground" />
+					<span>Compose</span>
+				</DropdownMenuItem>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-xl">
+				<DialogHeader>
+					<DialogTitle>Create Compose</DialogTitle>
+					<DialogDescription>
+						Assign a name and description to your compose
+					</DialogDescription>
+				</DialogHeader>
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 
-        <Form {...form}>
-          <form
-            id="hook-form"
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="grid w-full gap-4"
-          >
-            <div className="flex flex-col gap-4">
-              <FormField
-                control={form.control}
-                name="name"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Name</FormLabel>
-                    <FormControl>
-                      <Input
-                        placeholder="Frontend"
-                        {...field}
-                        onChange={(e) => {
-                          const val = e.target.value?.trim() || "";
-                          const serviceName = slugify(val);
-                          form.setValue("appName", `${slug}-${serviceName}`);
-                          field.onChange(val);
-                        }}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </div>
-            {hasServers && (
-              <FormField
-                control={form.control}
-                name="serverId"
-                render={({ field }) => (
-                  <FormItem>
-                    <TooltipProvider delayDuration={0}>
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <FormLabel className="break-all w-fit flex flex-row gap-1 items-center">
-                            Select a Server {!isCloud ? "(Optional)" : ""}
-                            <HelpCircle className="size-4 text-muted-foreground" />
-                          </FormLabel>
-                        </TooltipTrigger>
-                        <TooltipContent
-                          className="z-[999] w-[300px]"
-                          align="start"
-                          side="top"
-                        >
-                          <span>
-                            If no server is selected, the application will be
-                            deployed on the server where the user is logged in.
-                          </span>
-                        </TooltipContent>
-                      </Tooltip>
-                    </TooltipProvider>
+				<Form {...form}>
+					<form
+						id="hook-form"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<div className="flex flex-col gap-4">
+							<FormField
+								control={form.control}
+								name="name"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Name</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="Frontend"
+												{...field}
+												onChange={(e) => {
+													const val = e.target.value?.trim() || "";
+													const serviceName = slugify(val);
+													form.setValue("appName", `${slug}-${serviceName}`);
+													field.onChange(val);
+												}}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+						{hasServers && (
+							<FormField
+								control={form.control}
+								name="serverId"
+								render={({ field }) => (
+									<FormItem>
+										<TooltipProvider delayDuration={0}>
+											<Tooltip>
+												<TooltipTrigger asChild>
+													<FormLabel className="break-all w-fit flex flex-row gap-1 items-center">
+														Select a Server {!isCloud ? "(Optional)" : ""}
+														<HelpCircle className="size-4 text-muted-foreground" />
+													</FormLabel>
+												</TooltipTrigger>
+												<TooltipContent
+													className="z-[999] w-[300px]"
+													align="start"
+													side="top"
+												>
+													<span>
+														If no server is selected, the application will be
+														deployed on the server where the user is logged in.
+													</span>
+												</TooltipContent>
+											</Tooltip>
+										</TooltipProvider>
 
-                    <Select
-                      onValueChange={field.onChange}
-                      defaultValue={field.value}
-                    >
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select a Server" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectGroup>
-                          {servers?.map((server) => (
-                            <SelectItem
-                              key={server.serverId}
-                              value={server.serverId}
-                            >
-                              <span className="flex items-center gap-2 justify-between w-full">
-                                <span>{server.name}</span>
-                                <span className="text-muted-foreground text-xs self-center">
-                                  {server.ipAddress}
-                                </span>
-                              </span>
-                            </SelectItem>
-                          ))}
-                          <SelectLabel>Servers ({servers?.length})</SelectLabel>
-                        </SelectGroup>
-                      </SelectContent>
-                    </Select>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            )}
-            <FormField
-              control={form.control}
-              name="appName"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>App Name</FormLabel>
-                  <FormControl>
-                    <Input placeholder="my-app" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name="composeType"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Compose Type</FormLabel>
-                  <Select
-                    onValueChange={field.onChange}
-                    defaultValue={field.value}
-                  >
-                    <FormControl>
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select a compose type" />
-                      </SelectTrigger>
-                    </FormControl>
-                    <SelectContent>
-                      <SelectItem value="docker-compose">
-                        Docker Compose
-                      </SelectItem>
-                      <SelectItem value="stack">Stack</SelectItem>
-                    </SelectContent>
-                  </Select>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name="description"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Description</FormLabel>
-                  <FormControl>
-                    <Textarea
-                      placeholder="Description of your service..."
-                      className="resize-none"
-                      {...field}
-                    />
-                  </FormControl>
+										<Select
+											onValueChange={field.onChange}
+											defaultValue={field.value}
+										>
+											<SelectTrigger>
+												<SelectValue placeholder="Select a Server" />
+											</SelectTrigger>
+											<SelectContent>
+												<SelectGroup>
+													{servers?.map((server) => (
+														<SelectItem
+															key={server.serverId}
+															value={server.serverId}
+														>
+															<span className="flex items-center gap-2 justify-between w-full">
+																<span>{server.name}</span>
+																<span className="text-muted-foreground text-xs self-center">
+																	{server.ipAddress}
+																</span>
+															</span>
+														</SelectItem>
+													))}
+													<SelectLabel>Servers ({servers?.length})</SelectLabel>
+												</SelectGroup>
+											</SelectContent>
+										</Select>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						)}
+						<FormField
+							control={form.control}
+							name="appName"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>App Name</FormLabel>
+									<FormControl>
+										<Input placeholder="my-app" {...field} />
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="composeType"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Compose Type</FormLabel>
+									<Select
+										onValueChange={field.onChange}
+										defaultValue={field.value}
+									>
+										<FormControl>
+											<SelectTrigger>
+												<SelectValue placeholder="Select a compose type" />
+											</SelectTrigger>
+										</FormControl>
+										<SelectContent>
+											<SelectItem value="docker-compose">
+												Docker Compose
+											</SelectItem>
+											<SelectItem value="stack">Stack</SelectItem>
+										</SelectContent>
+									</Select>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="description"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Description</FormLabel>
+									<FormControl>
+										<Textarea
+											placeholder="Description of your service..."
+											className="resize-none"
+											{...field}
+										/>
+									</FormControl>
 
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-          </form>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</form>
 
-          <DialogFooter>
-            <Button isLoading={isLoading} form="hook-form" type="submit">
-              Create
-            </Button>
-          </DialogFooter>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
+					<DialogFooter>
+						<Button isLoading={isLoading} form="hook-form" type="submit">
+							Create
+						</Button>
+					</DialogFooter>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
 };
diff --git a/apps/dokploy/components/dashboard/project/add-database.tsx b/apps/dokploy/components/dashboard/project/add-database.tsx
index fdb1c3992..2e676c9b5 100644
--- a/apps/dokploy/components/dashboard/project/add-database.tsx
+++ b/apps/dokploy/components/dashboard/project/add-database.tsx
@@ -5,41 +5,41 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 import {
-  MariadbIcon,
-  MongodbIcon,
-  MysqlIcon,
-  PostgresqlIcon,
-  RedisIcon,
+	MariadbIcon,
+	MongodbIcon,
+	MysqlIcon,
+	PostgresqlIcon,
+	RedisIcon,
 } from "@/components/icons/data-tools-icons";
 import { Button } from "@/components/ui/button";
 import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
+	Dialog,
+	DialogContent,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
 } from "@/components/ui/dialog";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
 import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
@@ -49,542 +49,542 @@ import { api } from "@/utils/api";
 type DbType = typeof mySchema._type.type;
 
 const dockerImageDefaultPlaceholder: Record<DbType, string> = {
-  mongo: "mongo:6",
-  mariadb: "mariadb:11",
-  mysql: "mysql:8",
-  postgres: "postgres:15",
-  redis: "redis:7",
+	mongo: "mongo:6",
+	mariadb: "mariadb:11",
+	mysql: "mysql:8",
+	postgres: "postgres:15",
+	redis: "redis:7",
 };
 
 const databasesUserDefaultPlaceholder: Record<
-  Exclude<DbType, "redis">,
-  string
+	Exclude<DbType, "redis">,
+	string
 > = {
-  mongo: "mongo",
-  mariadb: "mariadb",
-  mysql: "mysql",
-  postgres: "postgres",
+	mongo: "mongo",
+	mariadb: "mariadb",
+	mysql: "mysql",
+	postgres: "postgres",
 };
 
 const baseDatabaseSchema = z.object({
-  name: z.string().min(1, "Name required"),
-  appName: z
-    .string()
-    .min(1, {
-      message: "App name is required",
-    })
-    .regex(/^[a-z](?!.*--)([a-z0-9-]*[a-z])?$/, {
-      message:
-        "App name supports lowercase letters, numbers, '-' and can only start and end letters, and does not support continuous '-'",
-    }),
-  databasePassword: z.string(),
-  dockerImage: z.string(),
-  description: z.string().nullable(),
-  serverId: z.string().nullable(),
+	name: z.string().min(1, "Name required"),
+	appName: z
+		.string()
+		.min(1, {
+			message: "App name is required",
+		})
+		.regex(/^[a-z](?!.*--)([a-z0-9-]*[a-z])?$/, {
+			message:
+				"App name supports lowercase letters, numbers, '-' and can only start and end letters, and does not support continuous '-'",
+		}),
+	databasePassword: z.string(),
+	dockerImage: z.string(),
+	description: z.string().nullable(),
+	serverId: z.string().nullable(),
 });
 
 const mySchema = z.discriminatedUnion("type", [
-  z
-    .object({
-      type: z.literal("postgres"),
-      databaseName: z.string().default("postgres"),
-      databaseUser: z.string().default("postgres"),
-    })
-    .merge(baseDatabaseSchema),
-  z
-    .object({
-      type: z.literal("mongo"),
-      databaseUser: z.string().default("mongo"),
-      replicaSets: z.boolean().default(false),
-    })
-    .merge(baseDatabaseSchema),
-  z
-    .object({
-      type: z.literal("redis"),
-    })
-    .merge(baseDatabaseSchema),
-  z
-    .object({
-      type: z.literal("mysql"),
-      databaseRootPassword: z.string().default(""),
-      databaseUser: z.string().default("mysql"),
-      databaseName: z.string().default("mysql"),
-    })
-    .merge(baseDatabaseSchema),
-  z
-    .object({
-      type: z.literal("mariadb"),
-      dockerImage: z.string().default("mariadb:4"),
-      databaseRootPassword: z.string().default(""),
-      databaseUser: z.string().default("mariadb"),
-      databaseName: z.string().default("mariadb"),
-    })
-    .merge(baseDatabaseSchema),
+	z
+		.object({
+			type: z.literal("postgres"),
+			databaseName: z.string().default("postgres"),
+			databaseUser: z.string().default("postgres"),
+		})
+		.merge(baseDatabaseSchema),
+	z
+		.object({
+			type: z.literal("mongo"),
+			databaseUser: z.string().default("mongo"),
+			replicaSets: z.boolean().default(false),
+		})
+		.merge(baseDatabaseSchema),
+	z
+		.object({
+			type: z.literal("redis"),
+		})
+		.merge(baseDatabaseSchema),
+	z
+		.object({
+			type: z.literal("mysql"),
+			databaseRootPassword: z.string().default(""),
+			databaseUser: z.string().default("mysql"),
+			databaseName: z.string().default("mysql"),
+		})
+		.merge(baseDatabaseSchema),
+	z
+		.object({
+			type: z.literal("mariadb"),
+			dockerImage: z.string().default("mariadb:4"),
+			databaseRootPassword: z.string().default(""),
+			databaseUser: z.string().default("mariadb"),
+			databaseName: z.string().default("mariadb"),
+		})
+		.merge(baseDatabaseSchema),
 ]);
 
 const databasesMap = {
-  postgres: {
-    icon: <PostgresqlIcon />,
-    label: "PostgreSQL",
-  },
-  mongo: {
-    icon: <MongodbIcon />,
-    label: "MongoDB",
-  },
-  mariadb: {
-    icon: <MariadbIcon />,
-    label: "MariaDB",
-  },
-  mysql: {
-    icon: <MysqlIcon />,
-    label: "MySQL",
-  },
-  redis: {
-    icon: <RedisIcon />,
-    label: "Redis",
-  },
+	postgres: {
+		icon: <PostgresqlIcon />,
+		label: "PostgreSQL",
+	},
+	mongo: {
+		icon: <MongodbIcon />,
+		label: "MongoDB",
+	},
+	mariadb: {
+		icon: <MariadbIcon />,
+		label: "MariaDB",
+	},
+	mysql: {
+		icon: <MysqlIcon />,
+		label: "MySQL",
+	},
+	redis: {
+		icon: <RedisIcon />,
+		label: "Redis",
+	},
 };
 
 type AddDatabase = z.infer<typeof mySchema>;
 
 interface Props {
-  projectId: string;
-  projectName?: string;
+	projectId: string;
+	projectName?: string;
 }
 
 export const AddDatabase = ({ projectId, projectName }: Props) => {
-  const utils = api.useUtils();
-  const [visible, setVisible] = useState(false);
-  const slug = slugify(projectName);
-  const { data: servers } = api.server.withSSHKey.useQuery();
-  const postgresMutation = api.postgres.create.useMutation();
-  const mongoMutation = api.mongo.create.useMutation();
-  const redisMutation = api.redis.create.useMutation();
-  const mariadbMutation = api.mariadb.create.useMutation();
-  const mysqlMutation = api.mysql.create.useMutation();
+	const utils = api.useUtils();
+	const [visible, setVisible] = useState(false);
+	const slug = slugify(projectName);
+	const { data: servers } = api.server.withSSHKey.useQuery();
+	const postgresMutation = api.postgres.create.useMutation();
+	const mongoMutation = api.mongo.create.useMutation();
+	const redisMutation = api.redis.create.useMutation();
+	const mariadbMutation = api.mariadb.create.useMutation();
+	const mysqlMutation = api.mysql.create.useMutation();
 
-  const hasServers = servers && servers.length > 0;
+	const hasServers = servers && servers.length > 0;
 
-  const form = useForm<AddDatabase>({
-    defaultValues: {
-      type: "postgres",
-      dockerImage: "",
-      name: "",
-      appName: `${slug}-`,
-      databasePassword: "",
-      description: "",
-      databaseName: "",
-      databaseUser: "",
-      serverId: null,
-    },
-    resolver: zodResolver(mySchema),
-  });
-  const type = form.watch("type");
-  const activeMutation = {
-    postgres: postgresMutation,
-    mongo: mongoMutation,
-    redis: redisMutation,
-    mariadb: mariadbMutation,
-    mysql: mysqlMutation,
-  };
+	const form = useForm<AddDatabase>({
+		defaultValues: {
+			type: "postgres",
+			dockerImage: "",
+			name: "",
+			appName: `${slug}-`,
+			databasePassword: "",
+			description: "",
+			databaseName: "",
+			databaseUser: "",
+			serverId: null,
+		},
+		resolver: zodResolver(mySchema),
+	});
+	const type = form.watch("type");
+	const activeMutation = {
+		postgres: postgresMutation,
+		mongo: mongoMutation,
+		redis: redisMutation,
+		mariadb: mariadbMutation,
+		mysql: mysqlMutation,
+	};
 
-  const onSubmit = async (data: AddDatabase) => {
-    const defaultDockerImage =
-      data.dockerImage || dockerImageDefaultPlaceholder[data.type];
+	const onSubmit = async (data: AddDatabase) => {
+		const defaultDockerImage =
+			data.dockerImage || dockerImageDefaultPlaceholder[data.type];
 
-    let promise: Promise<unknown> | null = null;
-    const commonParams = {
-      name: data.name,
-      appName: data.appName,
-      dockerImage: defaultDockerImage,
-      projectId,
-      serverId: data.serverId,
-      description: data.description,
-    };
+		let promise: Promise<unknown> | null = null;
+		const commonParams = {
+			name: data.name,
+			appName: data.appName,
+			dockerImage: defaultDockerImage,
+			projectId,
+			serverId: data.serverId,
+			description: data.description,
+		};
 
-    if (data.type === "postgres") {
-      promise = postgresMutation.mutateAsync({
-        ...commonParams,
-        databasePassword: data.databasePassword,
-        databaseName: data.databaseName || "postgres",
+		if (data.type === "postgres") {
+			promise = postgresMutation.mutateAsync({
+				...commonParams,
+				databasePassword: data.databasePassword,
+				databaseName: data.databaseName || "postgres",
 
-        databaseUser:
-          data.databaseUser || databasesUserDefaultPlaceholder[data.type],
-        serverId: data.serverId,
-      });
-    } else if (data.type === "mongo") {
-      promise = mongoMutation.mutateAsync({
-        ...commonParams,
-        databasePassword: data.databasePassword,
-        databaseUser:
-          data.databaseUser || databasesUserDefaultPlaceholder[data.type],
-        serverId: data.serverId,
-        replicaSets: data.replicaSets,
-      });
-    } else if (data.type === "redis") {
-      promise = redisMutation.mutateAsync({
-        ...commonParams,
-        databasePassword: data.databasePassword,
-        serverId: data.serverId,
-        projectId,
-      });
-    } else if (data.type === "mariadb") {
-      promise = mariadbMutation.mutateAsync({
-        ...commonParams,
-        databasePassword: data.databasePassword,
-        databaseRootPassword: data.databaseRootPassword,
-        databaseName: data.databaseName || "mariadb",
-        databaseUser:
-          data.databaseUser || databasesUserDefaultPlaceholder[data.type],
-        serverId: data.serverId,
-      });
-    } else if (data.type === "mysql") {
-      promise = mysqlMutation.mutateAsync({
-        ...commonParams,
-        databasePassword: data.databasePassword,
-        databaseName: data.databaseName || "mysql",
-        databaseUser:
-          data.databaseUser || databasesUserDefaultPlaceholder[data.type],
-        databaseRootPassword: data.databaseRootPassword,
-        serverId: data.serverId,
-      });
-    }
+				databaseUser:
+					data.databaseUser || databasesUserDefaultPlaceholder[data.type],
+				serverId: data.serverId,
+			});
+		} else if (data.type === "mongo") {
+			promise = mongoMutation.mutateAsync({
+				...commonParams,
+				databasePassword: data.databasePassword,
+				databaseUser:
+					data.databaseUser || databasesUserDefaultPlaceholder[data.type],
+				serverId: data.serverId,
+				replicaSets: data.replicaSets,
+			});
+		} else if (data.type === "redis") {
+			promise = redisMutation.mutateAsync({
+				...commonParams,
+				databasePassword: data.databasePassword,
+				serverId: data.serverId,
+				projectId,
+			});
+		} else if (data.type === "mariadb") {
+			promise = mariadbMutation.mutateAsync({
+				...commonParams,
+				databasePassword: data.databasePassword,
+				databaseRootPassword: data.databaseRootPassword,
+				databaseName: data.databaseName || "mariadb",
+				databaseUser:
+					data.databaseUser || databasesUserDefaultPlaceholder[data.type],
+				serverId: data.serverId,
+			});
+		} else if (data.type === "mysql") {
+			promise = mysqlMutation.mutateAsync({
+				...commonParams,
+				databasePassword: data.databasePassword,
+				databaseName: data.databaseName || "mysql",
+				databaseUser:
+					data.databaseUser || databasesUserDefaultPlaceholder[data.type],
+				databaseRootPassword: data.databaseRootPassword,
+				serverId: data.serverId,
+			});
+		}
 
-    if (promise) {
-      await promise
-        .then(async () => {
-          toast.success("Database Created");
-          form.reset({
-            type: "postgres",
-            dockerImage: "",
-            name: "",
-            appName: `${projectName}-`,
-            databasePassword: "",
-            description: "",
-            databaseName: "",
-            databaseUser: "",
-          });
-          setVisible(false);
-          await utils.project.one.invalidate({
-            projectId,
-          });
-        })
-        .catch(() => {
-          toast.error("Error creating a database");
-        });
-    }
-  };
-  return (
-    <Dialog open={visible} onOpenChange={setVisible}>
-      <DialogTrigger className="w-full">
-        <DropdownMenuItem
-          className="w-full cursor-pointer space-x-3"
-          onSelect={(e) => e.preventDefault()}
-        >
-          <Database className="size-4 text-muted-foreground" />
-          <span>Database</span>
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent className="md:max-h-[90vh]  sm:max-w-2xl">
-        <DialogHeader>
-          <DialogTitle>Databases</DialogTitle>
-        </DialogHeader>
+		if (promise) {
+			await promise
+				.then(async () => {
+					toast.success("Database Created");
+					form.reset({
+						type: "postgres",
+						dockerImage: "",
+						name: "",
+						appName: `${projectName}-`,
+						databasePassword: "",
+						description: "",
+						databaseName: "",
+						databaseUser: "",
+					});
+					setVisible(false);
+					await utils.project.one.invalidate({
+						projectId,
+					});
+				})
+				.catch(() => {
+					toast.error("Error creating a database");
+				});
+		}
+	};
+	return (
+		<Dialog open={visible} onOpenChange={setVisible}>
+			<DialogTrigger className="w-full">
+				<DropdownMenuItem
+					className="w-full cursor-pointer space-x-3"
+					onSelect={(e) => e.preventDefault()}
+				>
+					<Database className="size-4 text-muted-foreground" />
+					<span>Database</span>
+				</DropdownMenuItem>
+			</DialogTrigger>
+			<DialogContent className="md:max-h-[90vh]  sm:max-w-2xl">
+				<DialogHeader>
+					<DialogTitle>Databases</DialogTitle>
+				</DialogHeader>
 
-        <Form {...form}>
-          <form
-            id="hook-form"
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="grid w-full gap-8 "
-          >
-            <FormField
-              control={form.control}
-              defaultValue={form.control._defaultValues.type}
-              name="type"
-              render={({ field }) => (
-                <FormItem className="space-y-3">
-                  <FormLabel className="text-muted-foreground">
-                    Select a database
-                  </FormLabel>
-                  <FormControl>
-                    <RadioGroup
-                      onValueChange={field.onChange}
-                      defaultValue={field.value}
-                      className="grid w-full grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4"
-                    >
-                      {Object.entries(databasesMap).map(([key, value]) => (
-                        <FormItem
-                          key={key}
-                          className="flex w-full items-center space-x-3 space-y-0"
-                        >
-                          <FormControl className="w-full">
-                            <div>
-                              <RadioGroupItem
-                                value={key}
-                                id={key}
-                                className="peer sr-only"
-                              />
-                              <Label
-                                htmlFor={key}
-                                className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
-                              >
-                                {value.icon}
-                                {value.label}
-                              </Label>
-                            </div>
-                          </FormControl>
-                        </FormItem>
-                      ))}
-                    </RadioGroup>
-                  </FormControl>
-                  <FormMessage />
-                  {activeMutation[field.value].isError && (
-                    <div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
-                      <AlertTriangle className="text-red-600 dark:text-red-400" />
-                      <span className="text-sm text-red-600 dark:text-red-400">
-                        {activeMutation[field.value].error?.message}
-                      </span>
-                    </div>
-                  )}
-                </FormItem>
-              )}
-            />
-            <div className="flex flex-col gap-4">
-              <FormLabel className="text-lg font-semibold leading-none tracking-tight">
-                Fill the next fields.
-              </FormLabel>
-              <div className="flex flex-col gap-2">
-                <FormField
-                  control={form.control}
-                  name="name"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Name</FormLabel>
-                      <FormControl>
-                        <Input
-                          placeholder="Name"
-                          {...field}
-                          onChange={(e) => {
-                            const val = e.target.value?.trim() || "";
-                            const serviceName = slugify(val);
-                            form.setValue("appName", `${slug}-${serviceName}`);
-                            field.onChange(val);
-                          }}
-                        />
-                      </FormControl>
+				<Form {...form}>
+					<form
+						id="hook-form"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-8 "
+					>
+						<FormField
+							control={form.control}
+							defaultValue={form.control._defaultValues.type}
+							name="type"
+							render={({ field }) => (
+								<FormItem className="space-y-3">
+									<FormLabel className="text-muted-foreground">
+										Select a database
+									</FormLabel>
+									<FormControl>
+										<RadioGroup
+											onValueChange={field.onChange}
+											defaultValue={field.value}
+											className="grid w-full grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4"
+										>
+											{Object.entries(databasesMap).map(([key, value]) => (
+												<FormItem
+													key={key}
+													className="flex w-full items-center space-x-3 space-y-0"
+												>
+													<FormControl className="w-full">
+														<div>
+															<RadioGroupItem
+																value={key}
+																id={key}
+																className="peer sr-only"
+															/>
+															<Label
+																htmlFor={key}
+																className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
+															>
+																{value.icon}
+																{value.label}
+															</Label>
+														</div>
+													</FormControl>
+												</FormItem>
+											))}
+										</RadioGroup>
+									</FormControl>
+									<FormMessage />
+									{activeMutation[field.value].isError && (
+										<div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
+											<AlertTriangle className="text-red-600 dark:text-red-400" />
+											<span className="text-sm text-red-600 dark:text-red-400">
+												{activeMutation[field.value].error?.message}
+											</span>
+										</div>
+									)}
+								</FormItem>
+							)}
+						/>
+						<div className="flex flex-col gap-4">
+							<FormLabel className="text-lg font-semibold leading-none tracking-tight">
+								Fill the next fields.
+							</FormLabel>
+							<div className="flex flex-col gap-2">
+								<FormField
+									control={form.control}
+									name="name"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Name</FormLabel>
+											<FormControl>
+												<Input
+													placeholder="Name"
+													{...field}
+													onChange={(e) => {
+														const val = e.target.value?.trim() || "";
+														const serviceName = slugify(val);
+														form.setValue("appName", `${slug}-${serviceName}`);
+														field.onChange(val);
+													}}
+												/>
+											</FormControl>
 
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                {hasServers && (
-                  <FormField
-                    control={form.control}
-                    name="serverId"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>Select a Server</FormLabel>
-                        <Select
-                          onValueChange={field.onChange}
-                          defaultValue={field.value || ""}
-                        >
-                          <SelectTrigger>
-                            <SelectValue placeholder="Select a Server" />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectGroup>
-                              {servers?.map((server) => (
-                                <SelectItem
-                                  key={server.serverId}
-                                  value={server.serverId}
-                                >
-                                  {server.name}
-                                </SelectItem>
-                              ))}
-                              <SelectLabel>
-                                Servers ({servers?.length})
-                              </SelectLabel>
-                            </SelectGroup>
-                          </SelectContent>
-                        </Select>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                )}
-                <FormField
-                  control={form.control}
-                  name="appName"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>App Name</FormLabel>
-                      <FormControl>
-                        <Input placeholder="my-app" {...field} />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								{hasServers && (
+									<FormField
+										control={form.control}
+										name="serverId"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Select a Server</FormLabel>
+												<Select
+													onValueChange={field.onChange}
+													defaultValue={field.value || ""}
+												>
+													<SelectTrigger>
+														<SelectValue placeholder="Select a Server" />
+													</SelectTrigger>
+													<SelectContent>
+														<SelectGroup>
+															{servers?.map((server) => (
+																<SelectItem
+																	key={server.serverId}
+																	value={server.serverId}
+																>
+																	{server.name}
+																</SelectItem>
+															))}
+															<SelectLabel>
+																Servers ({servers?.length})
+															</SelectLabel>
+														</SelectGroup>
+													</SelectContent>
+												</Select>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								)}
+								<FormField
+									control={form.control}
+									name="appName"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>App Name</FormLabel>
+											<FormControl>
+												<Input placeholder="my-app" {...field} />
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
 
-                <FormField
-                  control={form.control}
-                  name="description"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Description</FormLabel>
-                      <FormControl>
-                        <Textarea
-                          className="h-24"
-                          placeholder="Description"
-                          {...field}
-                          value={field.value || ""}
-                        />
-                      </FormControl>
+								<FormField
+									control={form.control}
+									name="description"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Description</FormLabel>
+											<FormControl>
+												<Textarea
+													className="h-24"
+													placeholder="Description"
+													{...field}
+													value={field.value || ""}
+												/>
+											</FormControl>
 
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                {(type === "mysql" ||
-                  type === "mariadb" ||
-                  type === "postgres") && (
-                    <FormField
-                      control={form.control}
-                      name="databaseName"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel>Database Name</FormLabel>
-                          <FormControl>
-                            <Input placeholder="Database Name" {...field} />
-                          </FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								{(type === "mysql" ||
+									type === "mariadb" ||
+									type === "postgres") && (
+									<FormField
+										control={form.control}
+										name="databaseName"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Database Name</FormLabel>
+												<FormControl>
+													<Input placeholder="Database Name" {...field} />
+												</FormControl>
 
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-                  )}
-                {(type === "mysql" ||
-                  type === "mariadb" ||
-                  type === "postgres" ||
-                  type === "mongo") && (
-                    <FormField
-                      control={form.control}
-                      name="databaseUser"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel>Database User</FormLabel>
-                          <FormControl>
-                            <Input
-                              placeholder={`Default ${databasesUserDefaultPlaceholder[type]}`}
-                              autoComplete="off"
-                              {...field}
-                            />
-                          </FormControl>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								)}
+								{(type === "mysql" ||
+									type === "mariadb" ||
+									type === "postgres" ||
+									type === "mongo") && (
+									<FormField
+										control={form.control}
+										name="databaseUser"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Database User</FormLabel>
+												<FormControl>
+													<Input
+														placeholder={`Default ${databasesUserDefaultPlaceholder[type]}`}
+														autoComplete="off"
+														{...field}
+													/>
+												</FormControl>
 
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-                  )}
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								)}
 
-                <FormField
-                  control={form.control}
-                  name="databasePassword"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Database Password</FormLabel>
-                      <FormControl>
-                        <Input
-                          type="password"
-                          placeholder="******************"
-                          autoComplete="one-time-code"
-                          {...field}
-                        />
-                      </FormControl>
+								<FormField
+									control={form.control}
+									name="databasePassword"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Database Password</FormLabel>
+											<FormControl>
+												<Input
+													type="password"
+													placeholder="******************"
+													autoComplete="one-time-code"
+													{...field}
+												/>
+											</FormControl>
 
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                {(type === "mysql" || type === "mariadb") && (
-                  <FormField
-                    control={form.control}
-                    name="databaseRootPassword"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>Database Root password</FormLabel>
-                        <FormControl>
-                          <Input
-                            type="password"
-                            placeholder="******************"
-                            {...field}
-                          />
-                        </FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								{(type === "mysql" || type === "mariadb") && (
+									<FormField
+										control={form.control}
+										name="databaseRootPassword"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Database Root password</FormLabel>
+												<FormControl>
+													<Input
+														type="password"
+														placeholder="******************"
+														{...field}
+													/>
+												</FormControl>
 
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                )}
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								)}
 
-                <FormField
-                  control={form.control}
-                  name="dockerImage"
-                  defaultValue={form.formState.defaultValues?.dockerImage}
-                  render={({ field }) => {
-                    return (
-                      <FormItem>
-                        <FormLabel>Docker image</FormLabel>
-                        <FormControl>
-                          <Input
-                            placeholder={`Default ${dockerImageDefaultPlaceholder[type]}`}
-                            {...field}
-                          />
-                        </FormControl>
+								<FormField
+									control={form.control}
+									name="dockerImage"
+									defaultValue={form.formState.defaultValues?.dockerImage}
+									render={({ field }) => {
+										return (
+											<FormItem>
+												<FormLabel>Docker image</FormLabel>
+												<FormControl>
+													<Input
+														placeholder={`Default ${dockerImageDefaultPlaceholder[type]}`}
+														{...field}
+													/>
+												</FormControl>
 
-                        <FormMessage />
-                      </FormItem>
-                    );
-                  }}
-                />
+												<FormMessage />
+											</FormItem>
+										);
+									}}
+								/>
 
-                {type === "mongo" && (
-                  <FormField
-                    control={form.control}
-                    name="replicaSets"
-                    render={({ field }) => {
-                      return (
-                        <FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm">
-                          <div className="space-y-0.5">
-                            <FormLabel>Use Replica Sets</FormLabel>
-                          </div>
-                          <FormControl>
-                            <Switch
-                              checked={field.value}
-                              onCheckedChange={field.onChange}
-                            />
-                          </FormControl>
+								{type === "mongo" && (
+									<FormField
+										control={form.control}
+										name="replicaSets"
+										render={({ field }) => {
+											return (
+												<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm">
+													<div className="space-y-0.5">
+														<FormLabel>Use Replica Sets</FormLabel>
+													</div>
+													<FormControl>
+														<Switch
+															checked={field.value}
+															onCheckedChange={field.onChange}
+														/>
+													</FormControl>
 
-                          <FormMessage />
-                        </FormItem>
-                      );
-                    }}
-                  />
-                )}
-              </div>
-            </div>
-          </form>
+													<FormMessage />
+												</FormItem>
+											);
+										}}
+									/>
+								)}
+							</div>
+						</div>
+					</form>
 
-          <DialogFooter>
-            <Button
-              isLoading={form.formState.isSubmitting}
-              form="hook-form"
-              type="submit"
-            >
-              Create
-            </Button>
-          </DialogFooter>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
+					<DialogFooter>
+						<Button
+							isLoading={form.formState.isSubmitting}
+							form="hook-form"
+							type="submit"
+						>
+							Create
+						</Button>
+					</DialogFooter>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
 };
diff --git a/apps/dokploy/components/dashboard/project/add-template.tsx b/apps/dokploy/components/dashboard/project/add-template.tsx
index a5d46e98a..5eb994fc4 100644
--- a/apps/dokploy/components/dashboard/project/add-template.tsx
+++ b/apps/dokploy/components/dashboard/project/add-template.tsx
@@ -1,14 +1,14 @@
 import {
-  BookText,
-  CheckIcon,
-  ChevronsUpDown,
-  Globe,
-  HelpCircle,
-  LayoutGrid,
-  List,
-  Loader2,
-  PuzzleIcon,
-  SearchIcon,
+	BookText,
+	CheckIcon,
+	ChevronsUpDown,
+	Globe,
+	HelpCircle,
+	LayoutGrid,
+	List,
+	Loader2,
+	PuzzleIcon,
+	SearchIcon,
 } from "lucide-react";
 import Link from "next/link";
 import { useEffect, useState } from "react";
@@ -16,56 +16,56 @@ import { toast } from "sonner";
 import { GithubIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
 import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
 } from "@/components/ui/command";
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
 } from "@/components/ui/dialog";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
 } from "@/components/ui/popover";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
 } from "@/components/ui/select";
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
@@ -73,456 +73,456 @@ import { api } from "@/utils/api";
 const TEMPLATE_BASE_URL_KEY = "dokploy_template_base_url";
 
 interface Props {
-  projectId: string;
-  baseUrl?: string;
+	projectId: string;
+	baseUrl?: string;
 }
 
 export const AddTemplate = ({ projectId, baseUrl }: Props) => {
-  const [query, setQuery] = useState("");
-  const [open, setOpen] = useState(false);
-  const [viewMode, setViewMode] = useState<"detailed" | "icon">("detailed");
-  const [selectedTags, setSelectedTags] = useState<string[]>([]);
-  const [customBaseUrl, setCustomBaseUrl] = useState<string | undefined>(() => {
-    // Try to get from props first, then localStorage
-    if (baseUrl) return baseUrl;
-    if (typeof window !== "undefined") {
-      return localStorage.getItem(TEMPLATE_BASE_URL_KEY) || undefined;
-    }
-    return undefined;
-  });
+	const [query, setQuery] = useState("");
+	const [open, setOpen] = useState(false);
+	const [viewMode, setViewMode] = useState<"detailed" | "icon">("detailed");
+	const [selectedTags, setSelectedTags] = useState<string[]>([]);
+	const [customBaseUrl, setCustomBaseUrl] = useState<string | undefined>(() => {
+		// Try to get from props first, then localStorage
+		if (baseUrl) return baseUrl;
+		if (typeof window !== "undefined") {
+			return localStorage.getItem(TEMPLATE_BASE_URL_KEY) || undefined;
+		}
+		return undefined;
+	});
 
-  // Save to localStorage when customBaseUrl changes
-  useEffect(() => {
-    if (customBaseUrl) {
-      localStorage.setItem(TEMPLATE_BASE_URL_KEY, customBaseUrl);
-    } else {
-      localStorage.removeItem(TEMPLATE_BASE_URL_KEY);
-    }
-  }, [customBaseUrl]);
+	// Save to localStorage when customBaseUrl changes
+	useEffect(() => {
+		if (customBaseUrl) {
+			localStorage.setItem(TEMPLATE_BASE_URL_KEY, customBaseUrl);
+		} else {
+			localStorage.removeItem(TEMPLATE_BASE_URL_KEY);
+		}
+	}, [customBaseUrl]);
 
-  const {
-    data,
-    isLoading: isLoadingTemplates,
-    error: errorTemplates,
-    isError: isErrorTemplates,
-  } = api.compose.templates.useQuery(
-    { baseUrl: customBaseUrl },
-    {
-      enabled: open,
-    },
-  );
-  const { data: isCloud } = api.settings.isCloud.useQuery();
-  const { data: servers } = api.server.withSSHKey.useQuery();
-  const { data: tags, isLoading: isLoadingTags } = api.compose.getTags.useQuery(
-    { baseUrl: customBaseUrl },
-    {
-      enabled: open,
-    },
-  );
-  const utils = api.useUtils();
+	const {
+		data,
+		isLoading: isLoadingTemplates,
+		error: errorTemplates,
+		isError: isErrorTemplates,
+	} = api.compose.templates.useQuery(
+		{ baseUrl: customBaseUrl },
+		{
+			enabled: open,
+		},
+	);
+	const { data: isCloud } = api.settings.isCloud.useQuery();
+	const { data: servers } = api.server.withSSHKey.useQuery();
+	const { data: tags, isLoading: isLoadingTags } = api.compose.getTags.useQuery(
+		{ baseUrl: customBaseUrl },
+		{
+			enabled: open,
+		},
+	);
+	const utils = api.useUtils();
 
-  const [serverId, setServerId] = useState<string | undefined>(undefined);
-  const { mutateAsync, isLoading, error, isError } =
-    api.compose.deployTemplate.useMutation();
+	const [serverId, setServerId] = useState<string | undefined>(undefined);
+	const { mutateAsync, isLoading, error, isError } =
+		api.compose.deployTemplate.useMutation();
 
-  const templates =
-    data?.filter((template) => {
-      const matchesTags =
-        selectedTags.length === 0 ||
-        template.tags.some((tag) => selectedTags.includes(tag));
-      const matchesQuery =
-        query === "" ||
-        template.name.toLowerCase().includes(query.toLowerCase()) ||
-        template.description.toLowerCase().includes(query.toLowerCase());
-      return matchesTags && matchesQuery;
-    }) || [];
+	const templates =
+		data?.filter((template) => {
+			const matchesTags =
+				selectedTags.length === 0 ||
+				template.tags.some((tag) => selectedTags.includes(tag));
+			const matchesQuery =
+				query === "" ||
+				template.name.toLowerCase().includes(query.toLowerCase()) ||
+				template.description.toLowerCase().includes(query.toLowerCase());
+			return matchesTags && matchesQuery;
+		}) || [];
 
-  const hasServers = servers && servers.length > 0;
+	const hasServers = servers && servers.length > 0;
 
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger className="w-full">
-        <DropdownMenuItem
-          className="w-full cursor-pointer space-x-3"
-          onSelect={(e) => e.preventDefault()}
-        >
-          <PuzzleIcon className="size-4 text-muted-foreground" />
-          <span>Template</span>
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-[90vw] p-0">
-        <DialogHeader className="sticky top-0 z-10 bg-background p-6 border-b">
-          <div className="flex flex-col space-y-6">
-            <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
-              <div>
-                <DialogTitle>Create from Template</DialogTitle>
-                <DialogDescription>
-                  Create an open source application from a template
-                </DialogDescription>
-              </div>
-              <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
-                <Input
-                  placeholder="Search Template"
-                  onChange={(e) => setQuery(e.target.value)}
-                  className="w-full sm:w-[200px]"
-                  value={query}
-                />
-                <Input
-                  placeholder="Base URL (optional)"
-                  onChange={(e) =>
-                    setCustomBaseUrl(e.target.value || undefined)
-                  }
-                  className="w-full sm:w-[300px]"
-                  value={customBaseUrl || ""}
-                />
-                <Popover modal={true}>
-                  <PopoverTrigger asChild>
-                    <Button
-                      variant="outline"
-                      className={cn(
-                        "w-full sm:w-[200px] justify-between !bg-input",
-                      )}
-                    >
-                      {isLoadingTags
-                        ? "Loading...."
-                        : selectedTags.length > 0
-                          ? `Selected ${selectedTags.length} tags`
-                          : "Select tag"}
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger className="w-full">
+				<DropdownMenuItem
+					className="w-full cursor-pointer space-x-3"
+					onSelect={(e) => e.preventDefault()}
+				>
+					<PuzzleIcon className="size-4 text-muted-foreground" />
+					<span>Template</span>
+				</DropdownMenuItem>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-[90vw] p-0">
+				<DialogHeader className="sticky top-0 z-10 bg-background p-6 border-b">
+					<div className="flex flex-col space-y-6">
+						<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
+							<div>
+								<DialogTitle>Create from Template</DialogTitle>
+								<DialogDescription>
+									Create an open source application from a template
+								</DialogDescription>
+							</div>
+							<div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
+								<Input
+									placeholder="Search Template"
+									onChange={(e) => setQuery(e.target.value)}
+									className="w-full sm:w-[200px]"
+									value={query}
+								/>
+								<Input
+									placeholder="Base URL (optional)"
+									onChange={(e) =>
+										setCustomBaseUrl(e.target.value || undefined)
+									}
+									className="w-full sm:w-[300px]"
+									value={customBaseUrl || ""}
+								/>
+								<Popover modal={true}>
+									<PopoverTrigger asChild>
+										<Button
+											variant="outline"
+											className={cn(
+												"w-full sm:w-[200px] justify-between !bg-input",
+											)}
+										>
+											{isLoadingTags
+												? "Loading...."
+												: selectedTags.length > 0
+													? `Selected ${selectedTags.length} tags`
+													: "Select tag"}
 
-                      <ChevronsUpDown className="ml-2 h-4 w-4 opacity-50" />
-                    </Button>
-                  </PopoverTrigger>
-                  <PopoverContent className="p-0" align="start">
-                    <Command>
-                      <CommandInput
-                        placeholder="Search tag..."
-                        className="h-9"
-                      />
-                      {isLoadingTags && (
-                        <span className="py-6 text-center text-sm">
-                          Loading Tags....
-                        </span>
-                      )}
-                      <CommandEmpty>No tags found.</CommandEmpty>
-                      <ScrollArea className="h-96">
-                        <CommandGroup>
-                          {tags?.map((tag) => (
-                            <CommandItem
-                              value={tag}
-                              key={tag}
-                              onSelect={() => {
-                                if (selectedTags.includes(tag)) {
-                                  setSelectedTags(
-                                    selectedTags.filter((t) => t !== tag),
-                                  );
-                                  return;
-                                }
-                                setSelectedTags([...selectedTags, tag]);
-                              }}
-                            >
-                              {tag}
-                              <CheckIcon
-                                className={cn(
-                                  "ml-auto h-4 w-4",
-                                  selectedTags.includes(tag)
-                                    ? "opacity-100"
-                                    : "opacity-0",
-                                )}
-                              />
-                            </CommandItem>
-                          ))}
-                        </CommandGroup>
-                      </ScrollArea>
-                    </Command>
-                  </PopoverContent>
-                </Popover>
-                <Button
-                  size="icon"
-                  onClick={() =>
-                    setViewMode(viewMode === "detailed" ? "icon" : "detailed")
-                  }
-                  className="h-9 w-9"
-                >
-                  {viewMode === "detailed" ? (
-                    <LayoutGrid className="size-4" />
-                  ) : (
-                    <List className="size-4" />
-                  )}
-                </Button>
-              </div>
-            </div>
-            {selectedTags.length > 0 && (
-              <div className="flex flex-wrap justify-end gap-2">
-                {selectedTags.map((tag) => (
-                  <Badge
-                    key={tag}
-                    variant="secondary"
-                    className="cursor-pointer"
-                    onClick={() =>
-                      setSelectedTags(selectedTags.filter((t) => t !== tag))
-                    }
-                  >
-                    {tag} ×
-                  </Badge>
-                ))}
-              </div>
-            )}
-          </div>
-        </DialogHeader>
+											<ChevronsUpDown className="ml-2 h-4 w-4 opacity-50" />
+										</Button>
+									</PopoverTrigger>
+									<PopoverContent className="p-0" align="start">
+										<Command>
+											<CommandInput
+												placeholder="Search tag..."
+												className="h-9"
+											/>
+											{isLoadingTags && (
+												<span className="py-6 text-center text-sm">
+													Loading Tags....
+												</span>
+											)}
+											<CommandEmpty>No tags found.</CommandEmpty>
+											<ScrollArea className="h-96">
+												<CommandGroup>
+													{tags?.map((tag) => (
+														<CommandItem
+															value={tag}
+															key={tag}
+															onSelect={() => {
+																if (selectedTags.includes(tag)) {
+																	setSelectedTags(
+																		selectedTags.filter((t) => t !== tag),
+																	);
+																	return;
+																}
+																setSelectedTags([...selectedTags, tag]);
+															}}
+														>
+															{tag}
+															<CheckIcon
+																className={cn(
+																	"ml-auto h-4 w-4",
+																	selectedTags.includes(tag)
+																		? "opacity-100"
+																		: "opacity-0",
+																)}
+															/>
+														</CommandItem>
+													))}
+												</CommandGroup>
+											</ScrollArea>
+										</Command>
+									</PopoverContent>
+								</Popover>
+								<Button
+									size="icon"
+									onClick={() =>
+										setViewMode(viewMode === "detailed" ? "icon" : "detailed")
+									}
+									className="h-9 w-9"
+								>
+									{viewMode === "detailed" ? (
+										<LayoutGrid className="size-4" />
+									) : (
+										<List className="size-4" />
+									)}
+								</Button>
+							</div>
+						</div>
+						{selectedTags.length > 0 && (
+							<div className="flex flex-wrap justify-end gap-2">
+								{selectedTags.map((tag) => (
+									<Badge
+										key={tag}
+										variant="secondary"
+										className="cursor-pointer"
+										onClick={() =>
+											setSelectedTags(selectedTags.filter((t) => t !== tag))
+										}
+									>
+										{tag} ×
+									</Badge>
+								))}
+							</div>
+						)}
+					</div>
+				</DialogHeader>
 
-        <ScrollArea className="h-[calc(98vh-8rem)]">
-          <div className="p-6">
-            {isError && (
-              <AlertBlock type="error" className="mb-4">
-                {error?.message}
-              </AlertBlock>
-            )}
+				<ScrollArea className="h-[calc(98vh-8rem)]">
+					<div className="p-6">
+						{isError && (
+							<AlertBlock type="error" className="mb-4">
+								{error?.message}
+							</AlertBlock>
+						)}
 
-            {isErrorTemplates && (
-              <AlertBlock type="error" className="mb-4">
-                {errorTemplates?.message}
-              </AlertBlock>
-            )}
+						{isErrorTemplates && (
+							<AlertBlock type="error" className="mb-4">
+								{errorTemplates?.message}
+							</AlertBlock>
+						)}
 
-            {isLoadingTemplates ? (
-              <div className="flex justify-center items-center w-full h-full flex-row gap-4">
-                <Loader2 className="size-8 text-muted-foreground animate-spin min-h-[60vh]" />
-                <div className="text-lg font-medium text-muted-foreground">
-                  Loading templates...
-                </div>
-              </div>
-            ) : templates.length === 0 ? (
-              <div className="flex justify-center items-center w-full gap-2 min-h-[50vh]">
-                <SearchIcon className="text-muted-foreground size-6" />
-                <div className="text-xl font-medium text-muted-foreground">
-                  No templates found
-                </div>
-              </div>
-            ) : (
-              <div
-                className={cn(
-                  "grid gap-6",
-                  viewMode === "detailed"
-                    ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
-                    : "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6",
-                )}
-              >
-                {templates?.map((template) => (
-                  <div
-                    key={template?.id}
-                    className={cn(
-                      "flex flex-col border rounded-lg overflow-hidden relative",
-                      viewMode === "icon" && "h-[200px]",
-                      viewMode === "detailed" && "h-[400px]",
-                    )}
-                  >
-                    <Badge className="absolute top-2 right-2" variant="blue">
-                      {template?.version}
-                    </Badge>
-                    <div
-                      className={cn(
-                        "flex-none p-6 pb-3 flex flex-col items-center gap-4 bg-muted/30",
-                        viewMode === "detailed" && "border-b",
-                      )}
-                    >
-                      <img
-                        src={`${customBaseUrl || "https://templates.dokploy.com/"}/blueprints/${template?.id}/${template?.logo}`}
-                        className={cn(
-                          "object-contain",
-                          viewMode === "detailed" ? "size-24" : "size-16",
-                        )}
-                        alt={template?.name}
-                      />
-                      <div className="flex flex-col items-center gap-2">
-                        <span className="text-sm font-medium line-clamp-1">
-                          {template?.name}
-                        </span>
-                        {viewMode === "detailed" &&
-                          template?.tags?.length > 0 && (
-                            <div className="flex flex-wrap justify-center gap-1.5">
-                              {template?.tags?.map((tag) => (
-                                <Badge
-                                  key={tag}
-                                  variant="green"
-                                  className="text-[10px] px-2 py-0"
-                                >
-                                  {tag}
-                                </Badge>
-                              ))}
-                            </div>
-                          )}
-                      </div>
-                    </div>
+						{isLoadingTemplates ? (
+							<div className="flex justify-center items-center w-full h-full flex-row gap-4">
+								<Loader2 className="size-8 text-muted-foreground animate-spin min-h-[60vh]" />
+								<div className="text-lg font-medium text-muted-foreground">
+									Loading templates...
+								</div>
+							</div>
+						) : templates.length === 0 ? (
+							<div className="flex justify-center items-center w-full gap-2 min-h-[50vh]">
+								<SearchIcon className="text-muted-foreground size-6" />
+								<div className="text-xl font-medium text-muted-foreground">
+									No templates found
+								</div>
+							</div>
+						) : (
+							<div
+								className={cn(
+									"grid gap-6",
+									viewMode === "detailed"
+										? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
+										: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6",
+								)}
+							>
+								{templates?.map((template) => (
+									<div
+										key={template?.id}
+										className={cn(
+											"flex flex-col border rounded-lg overflow-hidden relative",
+											viewMode === "icon" && "h-[200px]",
+											viewMode === "detailed" && "h-[400px]",
+										)}
+									>
+										<Badge className="absolute top-2 right-2" variant="blue">
+											{template?.version}
+										</Badge>
+										<div
+											className={cn(
+												"flex-none p-6 pb-3 flex flex-col items-center gap-4 bg-muted/30",
+												viewMode === "detailed" && "border-b",
+											)}
+										>
+											<img
+												src={`${customBaseUrl || "https://templates.dokploy.com/"}/blueprints/${template?.id}/${template?.logo}`}
+												className={cn(
+													"object-contain",
+													viewMode === "detailed" ? "size-24" : "size-16",
+												)}
+												alt={template?.name}
+											/>
+											<div className="flex flex-col items-center gap-2">
+												<span className="text-sm font-medium line-clamp-1">
+													{template?.name}
+												</span>
+												{viewMode === "detailed" &&
+													template?.tags?.length > 0 && (
+														<div className="flex flex-wrap justify-center gap-1.5">
+															{template?.tags?.map((tag) => (
+																<Badge
+																	key={tag}
+																	variant="green"
+																	className="text-[10px] px-2 py-0"
+																>
+																	{tag}
+																</Badge>
+															))}
+														</div>
+													)}
+											</div>
+										</div>
 
-                    {/* Template Content */}
-                    {viewMode === "detailed" && (
-                      <ScrollArea className="flex-1 p-6">
-                        <div className="text-sm text-muted-foreground">
-                          {template?.description}
-                        </div>
-                      </ScrollArea>
-                    )}
+										{/* Template Content */}
+										{viewMode === "detailed" && (
+											<ScrollArea className="flex-1 p-6">
+												<div className="text-sm text-muted-foreground">
+													{template?.description}
+												</div>
+											</ScrollArea>
+										)}
 
-                    {/* Create Button */}
-                    <div
-                      className={cn(
-                        "flex-none px-6 py-3 mt-auto",
-                        viewMode === "detailed"
-                          ? "flex items-center justify-between bg-muted/30 border-t"
-                          : "flex justify-center",
-                      )}
-                    >
-                      {viewMode === "detailed" && (
-                        <div className="flex gap-2">
-                          {template?.links?.github && (
-                            <Link
-                              href={template?.links?.github}
-                              target="_blank"
-                              className="text-muted-foreground hover:text-foreground transition-colors"
-                            >
-                              <GithubIcon className="size-5" />
-                            </Link>
-                          )}
-                          {template?.links?.website && (
-                            <Link
-                              href={template?.links?.website}
-                              target="_blank"
-                              className="text-muted-foreground hover:text-foreground transition-colors"
-                            >
-                              <Globe className="size-5" />
-                            </Link>
-                          )}
-                          {template?.links?.docs && (
-                            <Link
-                              href={template?.links?.docs}
-                              target="_blank"
-                              className="text-muted-foreground hover:text-foreground transition-colors"
-                            >
-                              <BookText className="size-5" />
-                            </Link>
-                          )}
-                        </div>
-                      )}
-                      <AlertDialog>
-                        <AlertDialogTrigger asChild>
-                          <Button
-                            variant="secondary"
-                            size="sm"
-                            className={cn(
-                              "w-auto",
-                              viewMode === "detailed" && "w-auto",
-                            )}
-                          >
-                            Create
-                          </Button>
-                        </AlertDialogTrigger>
-                        <AlertDialogContent>
-                          <AlertDialogHeader>
-                            <AlertDialogTitle>
-                              Are you absolutely sure?
-                            </AlertDialogTitle>
-                            <AlertDialogDescription>
-                              This will create an application from the{" "}
-                              {template?.name} template and add it to your
-                              project.
-                            </AlertDialogDescription>
+										{/* Create Button */}
+										<div
+											className={cn(
+												"flex-none px-6 py-3 mt-auto",
+												viewMode === "detailed"
+													? "flex items-center justify-between bg-muted/30 border-t"
+													: "flex justify-center",
+											)}
+										>
+											{viewMode === "detailed" && (
+												<div className="flex gap-2">
+													{template?.links?.github && (
+														<Link
+															href={template?.links?.github}
+															target="_blank"
+															className="text-muted-foreground hover:text-foreground transition-colors"
+														>
+															<GithubIcon className="size-5" />
+														</Link>
+													)}
+													{template?.links?.website && (
+														<Link
+															href={template?.links?.website}
+															target="_blank"
+															className="text-muted-foreground hover:text-foreground transition-colors"
+														>
+															<Globe className="size-5" />
+														</Link>
+													)}
+													{template?.links?.docs && (
+														<Link
+															href={template?.links?.docs}
+															target="_blank"
+															className="text-muted-foreground hover:text-foreground transition-colors"
+														>
+															<BookText className="size-5" />
+														</Link>
+													)}
+												</div>
+											)}
+											<AlertDialog>
+												<AlertDialogTrigger asChild>
+													<Button
+														variant="secondary"
+														size="sm"
+														className={cn(
+															"w-auto",
+															viewMode === "detailed" && "w-auto",
+														)}
+													>
+														Create
+													</Button>
+												</AlertDialogTrigger>
+												<AlertDialogContent>
+													<AlertDialogHeader>
+														<AlertDialogTitle>
+															Are you absolutely sure?
+														</AlertDialogTitle>
+														<AlertDialogDescription>
+															This will create an application from the{" "}
+															{template?.name} template and add it to your
+															project.
+														</AlertDialogDescription>
 
-                            {hasServers && (
-                              <div>
-                                <TooltipProvider delayDuration={0}>
-                                  <Tooltip>
-                                    <TooltipTrigger asChild>
-                                      <Label className="break-all w-fit flex flex-row gap-1 items-center pb-2 pt-3.5">
-                                        Select a Server{" "}
-                                        {!isCloud ? "(Optional)" : ""}
-                                        <HelpCircle className="size-4 text-muted-foreground" />
-                                      </Label>
-                                    </TooltipTrigger>
-                                    <TooltipContent
-                                      className="z-[999] w-[300px]"
-                                      align="start"
-                                      side="top"
-                                    >
-                                      <span>
-                                        If no server is selected, the
-                                        application will be deployed on the
-                                        server where the user is logged in.
-                                      </span>
-                                    </TooltipContent>
-                                  </Tooltip>
-                                </TooltipProvider>
+														{hasServers && (
+															<div>
+																<TooltipProvider delayDuration={0}>
+																	<Tooltip>
+																		<TooltipTrigger asChild>
+																			<Label className="break-all w-fit flex flex-row gap-1 items-center pb-2 pt-3.5">
+																				Select a Server{" "}
+																				{!isCloud ? "(Optional)" : ""}
+																				<HelpCircle className="size-4 text-muted-foreground" />
+																			</Label>
+																		</TooltipTrigger>
+																		<TooltipContent
+																			className="z-[999] w-[300px]"
+																			align="start"
+																			side="top"
+																		>
+																			<span>
+																				If no server is selected, the
+																				application will be deployed on the
+																				server where the user is logged in.
+																			</span>
+																		</TooltipContent>
+																	</Tooltip>
+																</TooltipProvider>
 
-                                <Select
-                                  onValueChange={(e) => {
-                                    setServerId(e);
-                                  }}
-                                >
-                                  <SelectTrigger>
-                                    <SelectValue placeholder="Select a Server" />
-                                  </SelectTrigger>
-                                  <SelectContent>
-                                    <SelectGroup>
-                                      {servers?.map((server) => (
-                                        <SelectItem
-                                          key={server.serverId}
-                                          value={server.serverId}
-                                        >
-                                          <span className="flex items-center gap-2 justify-between w-full">
-                                            <span>{server.name}</span>
-                                            <span className="text-muted-foreground text-xs self-center">
-                                              {server.ipAddress}
-                                            </span>
-                                          </span>
-                                        </SelectItem>
-                                      ))}
-                                      <SelectLabel>
-                                        Servers ({servers?.length})
-                                      </SelectLabel>
-                                    </SelectGroup>
-                                  </SelectContent>
-                                </Select>
-                              </div>
-                            )}
-                          </AlertDialogHeader>
-                          <AlertDialogFooter>
-                            <AlertDialogCancel>Cancel</AlertDialogCancel>
-                            <AlertDialogAction
-                              disabled={isLoading}
-                              onClick={async () => {
-                                const promise = mutateAsync({
-                                  projectId,
-                                  serverId: serverId || undefined,
-                                  id: template.id,
-                                  baseUrl: customBaseUrl,
-                                });
-                                toast.promise(promise, {
-                                  loading: "Setting up...",
-                                  success: () => {
-                                    utils.project.one.invalidate({
-                                      projectId,
-                                    });
-                                    setOpen(false);
-                                    return `${template.name} template created successfully`;
-                                  },
-                                  error: () => {
-                                    return `An error occurred deploying ${template.name} template`;
-                                  },
-                                });
-                              }}
-                            >
-                              Confirm
-                            </AlertDialogAction>
-                          </AlertDialogFooter>
-                        </AlertDialogContent>
-                      </AlertDialog>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-        </ScrollArea>
-      </DialogContent>
-    </Dialog>
-  );
+																<Select
+																	onValueChange={(e) => {
+																		setServerId(e);
+																	}}
+																>
+																	<SelectTrigger>
+																		<SelectValue placeholder="Select a Server" />
+																	</SelectTrigger>
+																	<SelectContent>
+																		<SelectGroup>
+																			{servers?.map((server) => (
+																				<SelectItem
+																					key={server.serverId}
+																					value={server.serverId}
+																				>
+																					<span className="flex items-center gap-2 justify-between w-full">
+																						<span>{server.name}</span>
+																						<span className="text-muted-foreground text-xs self-center">
+																							{server.ipAddress}
+																						</span>
+																					</span>
+																				</SelectItem>
+																			))}
+																			<SelectLabel>
+																				Servers ({servers?.length})
+																			</SelectLabel>
+																		</SelectGroup>
+																	</SelectContent>
+																</Select>
+															</div>
+														)}
+													</AlertDialogHeader>
+													<AlertDialogFooter>
+														<AlertDialogCancel>Cancel</AlertDialogCancel>
+														<AlertDialogAction
+															disabled={isLoading}
+															onClick={async () => {
+																const promise = mutateAsync({
+																	projectId,
+																	serverId: serverId || undefined,
+																	id: template.id,
+																	baseUrl: customBaseUrl,
+																});
+																toast.promise(promise, {
+																	loading: "Setting up...",
+																	success: () => {
+																		utils.project.one.invalidate({
+																			projectId,
+																		});
+																		setOpen(false);
+																		return `${template.name} template created successfully`;
+																	},
+																	error: () => {
+																		return `An error occurred deploying ${template.name} template`;
+																	},
+																});
+															}}
+														>
+															Confirm
+														</AlertDialogAction>
+													</AlertDialogFooter>
+												</AlertDialogContent>
+											</AlertDialog>
+										</div>
+									</div>
+								))}
+							</div>
+						)}
+					</div>
+				</ScrollArea>
+			</DialogContent>
+		</Dialog>
+	);
 };
diff --git a/apps/dokploy/components/dashboard/settings/git/show-git-providers.tsx b/apps/dokploy/components/dashboard/settings/git/show-git-providers.tsx
index 593f8f994..eda9d8afb 100644
--- a/apps/dokploy/components/dashboard/settings/git/show-git-providers.tsx
+++ b/apps/dokploy/components/dashboard/settings/git/show-git-providers.tsx
@@ -1,27 +1,27 @@
 import {
-  BitbucketIcon,
-  GiteaIcon,
-  GithubIcon,
-  GitlabIcon,
+	BitbucketIcon,
+	GiteaIcon,
+	GithubIcon,
+	GitlabIcon,
 } from "@/components/icons/data-tools-icons";
 import { DialogAction } from "@/components/shared/dialog-action";
 import { Button, buttonVariants } from "@/components/ui/button";
 import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
 import { useUrl } from "@/utils/hooks/use-url";
 import { formatDate } from "date-fns";
 import {
-  ExternalLinkIcon,
-  GitBranch,
-  ImportIcon,
-  Loader2,
-  Trash2,
+	ExternalLinkIcon,
+	GitBranch,
+	ImportIcon,
+	Loader2,
+	Trash2,
 } from "lucide-react";
 import Link from "next/link";
 import { toast } from "sonner";
@@ -36,253 +36,259 @@ import { EditGitlabProvider } from "./gitlab/edit-gitlab-provider";
 import { Badge } from "@/components/ui/badge";
 
 export const ShowGitProviders = () => {
-  const { data, isLoading, refetch } = api.gitProvider.getAll.useQuery();
-  const { mutateAsync, isLoading: isRemoving } =
-    api.gitProvider.remove.useMutation();
-  const url = useUrl();
+	const { data, isLoading, refetch } = api.gitProvider.getAll.useQuery();
+	const { mutateAsync, isLoading: isRemoving } =
+		api.gitProvider.remove.useMutation();
+	const url = useUrl();
 
-  const getGitlabUrl = (
-    clientId: string,
-    gitlabId: string,
-    gitlabUrl: string,
-  ) => {
-    const redirectUri = `${url}/api/providers/gitlab/callback?gitlabId=${gitlabId}`;
-    const scope = "api read_user read_repository";
-    const authUrl = `${gitlabUrl}/oauth/authorize?client_id=${clientId}&redirect_uri=${encodeURIComponent(redirectUri)}&response_type=code&scope=${encodeURIComponent(scope)}`;
-    return authUrl;
-  };
+	const getGitlabUrl = (
+		clientId: string,
+		gitlabId: string,
+		gitlabUrl: string,
+	) => {
+		const redirectUri = `${url}/api/providers/gitlab/callback?gitlabId=${gitlabId}`;
+		const scope = "api read_user read_repository";
+		const authUrl = `${gitlabUrl}/oauth/authorize?client_id=${clientId}&redirect_uri=${encodeURIComponent(redirectUri)}&response_type=code&scope=${encodeURIComponent(scope)}`;
+		return authUrl;
+	};
 
-  return (
-    <div className="w-full">
-      <Card className="h-full bg-sidebar p-2.5 rounded-xl max-w-5xl mx-auto">
-        <div className="rounded-xl bg-background shadow-md ">
-          <CardHeader className="">
-            <CardTitle className="text-xl flex flex-row gap-2">
-              <GitBranch className="size-6 text-muted-foreground self-center" />
-              Git Providers
-            </CardTitle>
-            <CardDescription>
-              Connect your Git provider for authentication.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-2 py-8 border-t">
-            {isLoading ? (
-              <div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[25vh]">
-                <span>Loading...</span>
-                <Loader2 className="animate-spin size-4" />
-              </div>
-            ) : (
-              <>
-                {data?.length === 0 ? (
-                  <div className="flex flex-col items-center gap-3 min-h-[25vh] justify-center">
-                    <GitBranch className="size-8 self-center text-muted-foreground" />
-                    <span className="text-base text-muted-foreground text-center">
-                      Create your first Git Provider
-                    </span>
-                    <div>
-                      <div className="flex items-center bg-sidebar p-1 w-full rounded-lg">
-                        <div className="flex flex-wrap items-center gap-4 p-3.5 rounded-lg bg-background border w-full [&>button]:grow">
-                          <AddGithubProvider />
-                          <AddGitlabProvider />
-                          <AddBitbucketProvider />
-                          <AddGiteaProvider />
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                ) : (
-                  <div className="flex flex-col gap-4 min-h-[25vh]">
-                    <div className="flex flex-col gap-2 rounded-lg ">
-                      <span className="text-base font-medium">
-                        Available Providers
-                      </span>
-                      <div className="flex items-center bg-sidebar p-1 w-full rounded-lg">
-                        <div className="flex flex-wrap items-center gap-4 p-3.5 rounded-lg bg-background border w-full [&>button]:grow">
-                          <AddGithubProvider />
-                          <AddGitlabProvider />
-                          <AddBitbucketProvider />
-                          <AddGiteaProvider />
-                        </div>
-                      </div>
-                    </div>
+	return (
+		<div className="w-full">
+			<Card className="h-full bg-sidebar p-2.5 rounded-xl max-w-5xl mx-auto">
+				<div className="rounded-xl bg-background shadow-md ">
+					<CardHeader className="">
+						<CardTitle className="text-xl flex flex-row gap-2">
+							<GitBranch className="size-6 text-muted-foreground self-center" />
+							Git Providers
+						</CardTitle>
+						<CardDescription>
+							Connect your Git provider for authentication.
+						</CardDescription>
+					</CardHeader>
+					<CardContent className="space-y-2 py-8 border-t">
+						{isLoading ? (
+							<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[25vh]">
+								<span>Loading...</span>
+								<Loader2 className="animate-spin size-4" />
+							</div>
+						) : (
+							<>
+								{data?.length === 0 ? (
+									<div className="flex flex-col items-center gap-3 min-h-[25vh] justify-center">
+										<GitBranch className="size-8 self-center text-muted-foreground" />
+										<span className="text-base text-muted-foreground text-center">
+											Create your first Git Provider
+										</span>
+										<div>
+											<div className="flex items-center bg-sidebar p-1 w-full rounded-lg">
+												<div className="flex flex-wrap items-center gap-4 p-3.5 rounded-lg bg-background border w-full [&>button]:grow">
+													<AddGithubProvider />
+													<AddGitlabProvider />
+													<AddBitbucketProvider />
+													<AddGiteaProvider />
+												</div>
+											</div>
+										</div>
+									</div>
+								) : (
+									<div className="flex flex-col gap-4 min-h-[25vh]">
+										<div className="flex flex-col gap-2 rounded-lg ">
+											<span className="text-base font-medium">
+												Available Providers
+											</span>
+											<div className="flex items-center bg-sidebar p-1 w-full rounded-lg">
+												<div className="flex flex-wrap items-center gap-4 p-3.5 rounded-lg bg-background border w-full [&>button]:grow">
+													<AddGithubProvider />
+													<AddGitlabProvider />
+													<AddBitbucketProvider />
+													<AddGiteaProvider />
+												</div>
+											</div>
+										</div>
 
-                    <div className="flex flex-col gap-4 rounded-lg ">
-                      {data?.map((gitProvider, _index) => {
-                        const isGithub = gitProvider.providerType === "github";
-                        const isGitlab = gitProvider.providerType === "gitlab";
-                        const isBitbucket =
-                          gitProvider.providerType === "bitbucket";
-                        const isGitea = gitProvider.providerType === "gitea";
+										<div className="flex flex-col gap-4 rounded-lg ">
+											{data?.map((gitProvider, _index) => {
+												const isGithub = gitProvider.providerType === "github";
+												const isGitlab = gitProvider.providerType === "gitlab";
+												const isBitbucket =
+													gitProvider.providerType === "bitbucket";
+												const isGitea = gitProvider.providerType === "gitea";
 
-                        const haveGithubRequirements =
-                          isGithub &&
-                          gitProvider.github?.githubPrivateKey &&
-                          gitProvider.github?.githubAppId &&
-                          gitProvider.github?.githubInstallationId;
+												const haveGithubRequirements =
+													isGithub &&
+													gitProvider.github?.githubPrivateKey &&
+													gitProvider.github?.githubAppId &&
+													gitProvider.github?.githubInstallationId;
 
-                        const haveGitlabRequirements =
-                          isGitlab &&
-                          gitProvider.gitlab?.accessToken &&
-                          gitProvider.gitlab?.refreshToken;
+												const haveGitlabRequirements =
+													isGitlab &&
+													gitProvider.gitlab?.accessToken &&
+													gitProvider.gitlab?.refreshToken;
 
-                        return (
-                          <div
-                            key={gitProvider.gitProviderId}
-                            className="flex items-center justify-between bg-sidebar p-1 w-full rounded-lg"
-                          >
-                            <div className="flex items-center justify-between p-3.5 rounded-lg bg-background border w-full">
-                              <div className="flex flex-col items-center justify-between">
-                                <div className="flex gap-2 flex-row items-center">
-                                  {isGithub && (
-                                    <GithubIcon className="size-5" />
-                                  )}
-                                  {isGitlab && (
-                                    <GitlabIcon className="size-5" />
-                                  )}
-                                  {isBitbucket && (
-                                    <BitbucketIcon className="size-5" />
-                                  )}
-                                  {isGitea && <GiteaIcon className="size-5" />}
-                                  <div className="flex flex-col gap-1">
-                                    <span className="text-sm font-medium">
-                                      {gitProvider.name}
-                                    </span>
-                                    <span className="text-xs text-muted-foreground">
-                                      {formatDate(
-                                        gitProvider.createdAt,
-                                        "yyyy-MM-dd hh:mm:ss a",
-                                      )}
-                                    </span>
-                                  </div>
-                                </div>
-                              </div>
+												return (
+													<div
+														key={gitProvider.gitProviderId}
+														className="flex items-center justify-between bg-sidebar p-1 w-full rounded-lg"
+													>
+														<div className="flex items-center justify-between p-3.5 rounded-lg bg-background border w-full">
+															<div className="flex flex-col items-center justify-between">
+																<div className="flex gap-2 flex-row items-center">
+																	{isGithub && (
+																		<GithubIcon className="size-5" />
+																	)}
+																	{isGitlab && (
+																		<GitlabIcon className="size-5" />
+																	)}
+																	{isBitbucket && (
+																		<BitbucketIcon className="size-5" />
+																	)}
+																	{isGitea && <GiteaIcon className="size-5" />}
+																	<div className="flex flex-col gap-1">
+																		<span className="text-sm font-medium">
+																			{gitProvider.name}
+																		</span>
+																		<span className="text-xs text-muted-foreground">
+																			{formatDate(
+																				gitProvider.createdAt,
+																				"yyyy-MM-dd hh:mm:ss a",
+																			)}
+																		</span>
+																	</div>
+																</div>
+															</div>
 
-                              <div className="flex flex-row gap-1">
-                                {!haveGithubRequirements && isGithub && (
-                                  <div className="flex flex-row gap-1 items-center">
-                                    <Badge variant="outline" className="text-xs">
-                                      Action Required
-                                    </Badge>
-                                    <Link
-                                      href={`${gitProvider?.github?.githubAppName}/installations/new?state=gh_setup:${gitProvider?.github.githubId}`}
-                                      className={buttonVariants({
-                                        size: "icon",
-                                        variant: "ghost",
-                                      })}
-                                    >
-                                      <ImportIcon className="size-4 text-primary" />
-                                    </Link>
-                                  </div>
-                                )}
-                                {haveGithubRequirements && isGithub && (
-                                  <div className="flex flex-col gap-1">
-                                    <Link
-                                      href={`${gitProvider?.github?.githubAppName}`}
-                                      target="_blank"
-                                      className={buttonVariants({
-                                        size: "icon",
-                                        variant: "ghost",
-                                      })}
-                                    >
-                                      <ExternalLinkIcon className="size-4 text-primary" />
-                                    </Link>
-                                  </div>
-                                )}
-                                {!haveGitlabRequirements && isGitlab && (
-                                  <div className="flex flex-row gap-1 items-center">
-                                    <Badge variant="outline" className="text-xs">
-                                      Action Required
-                                    </Badge>
-                                    <Link
-                                      href={getGitlabUrl(
-                                        gitProvider.gitlab?.applicationId || "",
-                                        gitProvider.gitlab?.gitlabId || "",
-                                        gitProvider.gitlab?.gitlabUrl,
-                                      )}
-                                      target="_blank"
-                                      className={buttonVariants({
-                                        size: "icon",
-                                        variant: "ghost",
-                                      })}
-                                    >
-                                      <ImportIcon className="size-4 text-primary" />
-                                    </Link>
-                                  </div>
-                                )}
+															<div className="flex flex-row gap-1">
+																{!haveGithubRequirements && isGithub && (
+																	<div className="flex flex-row gap-1 items-center">
+																		<Badge
+																			variant="outline"
+																			className="text-xs"
+																		>
+																			Action Required
+																		</Badge>
+																		<Link
+																			href={`${gitProvider?.github?.githubAppName}/installations/new?state=gh_setup:${gitProvider?.github.githubId}`}
+																			className={buttonVariants({
+																				size: "icon",
+																				variant: "ghost",
+																			})}
+																		>
+																			<ImportIcon className="size-4 text-primary" />
+																		</Link>
+																	</div>
+																)}
+																{haveGithubRequirements && isGithub && (
+																	<div className="flex flex-col gap-1">
+																		<Link
+																			href={`${gitProvider?.github?.githubAppName}`}
+																			target="_blank"
+																			className={buttonVariants({
+																				size: "icon",
+																				variant: "ghost",
+																			})}
+																		>
+																			<ExternalLinkIcon className="size-4 text-primary" />
+																		</Link>
+																	</div>
+																)}
+																{!haveGitlabRequirements && isGitlab && (
+																	<div className="flex flex-row gap-1 items-center">
+																		<Badge
+																			variant="outline"
+																			className="text-xs"
+																		>
+																			Action Required
+																		</Badge>
+																		<Link
+																			href={getGitlabUrl(
+																				gitProvider.gitlab?.applicationId || "",
+																				gitProvider.gitlab?.gitlabId || "",
+																				gitProvider.gitlab?.gitlabUrl,
+																			)}
+																			target="_blank"
+																			className={buttonVariants({
+																				size: "icon",
+																				variant: "ghost",
+																			})}
+																		>
+																			<ImportIcon className="size-4 text-primary" />
+																		</Link>
+																	</div>
+																)}
 
-                                {isGithub && haveGithubRequirements && (
-                                  <EditGithubProvider
-                                    githubId={gitProvider.github?.githubId}
-                                  />
-                                )}
+																{isGithub && haveGithubRequirements && (
+																	<EditGithubProvider
+																		githubId={gitProvider.github?.githubId}
+																	/>
+																)}
 
-                                {isGitlab && (
-                                  <EditGitlabProvider
-                                    gitlabId={gitProvider.gitlab?.gitlabId}
-                                  />
-                                )}
+																{isGitlab && (
+																	<EditGitlabProvider
+																		gitlabId={gitProvider.gitlab?.gitlabId}
+																	/>
+																)}
 
-                                {isBitbucket && (
-                                  <EditBitbucketProvider
-                                    bitbucketId={
-                                      gitProvider.bitbucket?.bitbucketId
-                                    }
-                                  />
-                                )}
+																{isBitbucket && (
+																	<EditBitbucketProvider
+																		bitbucketId={
+																			gitProvider.bitbucket?.bitbucketId
+																		}
+																	/>
+																)}
 
-                                {isGitea && (
-                                  <EditGiteaProvider
-                                    giteaId={gitProvider.gitea?.giteaId}
-                                  />
-                                )}
+																{isGitea && (
+																	<EditGiteaProvider
+																		giteaId={gitProvider.gitea?.giteaId}
+																	/>
+																)}
 
-                                <DialogAction
-                                  title="Delete Git Provider"
-                                  description="Are you sure you want to delete this Git Provider?"
-                                  type="destructive"
-                                  onClick={async () => {
-                                    await mutateAsync({
-                                      gitProviderId: gitProvider.gitProviderId,
-                                    })
-                                      .then(() => {
-                                        toast.success(
-                                          "Git Provider deleted successfully",
-                                        );
-                                        refetch();
-                                      })
-                                      .catch(() => {
-                                        toast.error(
-                                          "Error deleting Git Provider",
-                                        );
-                                      });
-                                  }}
-                                >
-                                  <Button
-                                    variant="ghost"
-                                    size="icon"
-                                    className="group hover:bg-red-500/10"
-                                    isLoading={isRemoving}
-                                  >
-                                    <Trash2 className="size-4 text-primary group-hover:text-red-500" />
-                                  </Button>
-                                </DialogAction>
-                              </div>
-                            </div>
-                          </div>
-                        );
-                      })}
-                    </div>
+																<DialogAction
+																	title="Delete Git Provider"
+																	description="Are you sure you want to delete this Git Provider?"
+																	type="destructive"
+																	onClick={async () => {
+																		await mutateAsync({
+																			gitProviderId: gitProvider.gitProviderId,
+																		})
+																			.then(() => {
+																				toast.success(
+																					"Git Provider deleted successfully",
+																				);
+																				refetch();
+																			})
+																			.catch(() => {
+																				toast.error(
+																					"Error deleting Git Provider",
+																				);
+																			});
+																	}}
+																>
+																	<Button
+																		variant="ghost"
+																		size="icon"
+																		className="group hover:bg-red-500/10"
+																		isLoading={isRemoving}
+																	>
+																		<Trash2 className="size-4 text-primary group-hover:text-red-500" />
+																	</Button>
+																</DialogAction>
+															</div>
+														</div>
+													</div>
+												);
+											})}
+										</div>
 
-                    <div className="flex flex-row gap-2 flex-wrap w-full justify-end mr-4">
-                      {/* <AddCertificate /> */}
-                    </div>
-                  </div>
-                )}
-              </>
-            )}
-          </CardContent>
-        </div>
-      </Card>
-    </div>
-  );
+										<div className="flex flex-row gap-2 flex-wrap w-full justify-end mr-4">
+											{/* <AddCertificate /> */}
+										</div>
+									</div>
+								)}
+							</>
+						)}
+					</CardContent>
+				</div>
+			</Card>
+		</div>
+	);
 };