diff --git a/apps/dokploy/components/dashboard/project/add-application.tsx b/apps/dokploy/components/dashboard/project/add-application.tsx
index 16c56917d6..740b9beeb6 100644
--- a/apps/dokploy/components/dashboard/project/add-application.tsx
+++ b/apps/dokploy/components/dashboard/project/add-application.tsx
@@ -9,6 +9,7 @@ import {
 	DialogTitle,
 	DialogTrigger,
 } from "@/components/ui/dialog";
+
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
 import {
 	Form,
@@ -60,7 +61,6 @@ const AddTemplateSchema = z.object({
 	description: z.string().optional(),
 	serverId: z.string().optional(),
 });
-
 type AddTemplate = z.infer<typeof AddTemplateSchema>;
 
 interface Props {
@@ -72,6 +72,7 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
 	const utils = api.useUtils();
 	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const [visible, setVisible] = useState(false);
+	const [appNameLocked, setAppNameLocked] = useState(true);
 	const slug = slugify(projectName);
 	const { data: servers } = api.server.withSSHKey.useQuery();
 
@@ -87,6 +88,22 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
 		resolver: zodResolver(AddTemplateSchema),
 	});
 
+	const generateAppName = (value: string): string => {
+		if (!value) return `${slug}-`;
+
+		const processedValue = value
+			.trim()
+			.toLowerCase()
+			// replace dots, spaces, and special characters with dashes
+			.replace(/[^\w]+/g, "-")
+			// remove any consecutive dashes
+			.replace(/-+/g, "-")
+			// remove leading/trailing dashes
+			.replace(/^-+|-+$/g, "");
+
+		return `${slug}-${processedValue}`;
+	};
+
 	const onSubmit = async (data: AddTemplate) => {
 		await mutateAsync({
 			name: data.name,
@@ -143,13 +160,16 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
 										<Input
 											placeholder="Frontend"
 											{...field}
+											autoComplete="off"
+											autoCorrect="off"
+											autoCapitalize="off"
 											onChange={(e) => {
-												const val = e.target.value?.trim() || "";
-												form.setValue(
-													"appName",
-													`${slug}-${val.toLowerCase().replaceAll(" ", "-")}`,
-												);
+												const val = e.target.value;
 												field.onChange(val);
+
+												if (appNameLocked && val) {
+													form.setValue("appName", generateAppName(val));
+												}
 											}}
 										/>
 									</FormControl>
@@ -157,6 +177,56 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
 								</FormItem>
 							)}
 						/>
+						<FormField
+							control={form.control}
+							name="appName"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>App Name</FormLabel>
+									<TooltipProvider delayDuration={100}>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<div className="relative w-full">
+													<FormControl>
+														<Input
+															placeholder="project-frontend"
+															{...field}
+															readOnly={appNameLocked}
+															className={
+																appNameLocked
+																	? "cursor-pointer opacity-70 pr-10"
+																	: ""
+															}
+															onClick={() => {
+																if (appNameLocked) {
+																	setAppNameLocked(false);
+																}
+															}}
+														/>
+													</FormControl>
+													{appNameLocked && (
+														<div className="absolute inset-y-0 right-3 flex items-center pointer-events-none">
+															<HelpCircle className="size-4 text-muted-foreground" />
+														</div>
+													)}
+												</div>
+											</TooltipTrigger>
+											<TooltipContent
+												side="top"
+												className="z-[999] min-w-[180px] max-w-[250px] p-2 text-xs"
+												sideOffset={5}
+												avoidCollisions
+											>
+												{appNameLocked
+													? "App name is auto-generated. Click to edit manually."
+													: "App name can be edited manually."}
+											</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
 						<FormField
 							control={form.control}
 							name="serverId"
@@ -174,6 +244,7 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
 												className="z-[999] w-[300px]"
 												align="start"
 												side="top"
+												avoidCollisions
 											>
 												<span>
 													If no server is selected, the application will be
@@ -199,13 +270,9 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
 													>
 														<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>
@@ -213,19 +280,6 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
 								</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"
@@ -239,19 +293,17 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
 											{...field}
 										/>
 									</FormControl>
-
 									<FormMessage />
 								</FormItem>
 							)}
 						/>
 					</form>
-
-					<DialogFooter>
-						<Button isLoading={isLoading} form="hook-form" type="submit">
-							Create
-						</Button>
-					</DialogFooter>
 				</Form>
+				<DialogFooter>
+					<Button isLoading={isLoading} form="hook-form" type="submit">
+						Create
+					</Button>
+				</DialogFooter>
 			</DialogContent>
 		</Dialog>
 	);
diff --git a/apps/dokploy/components/dashboard/project/add-compose.tsx b/apps/dokploy/components/dashboard/project/add-compose.tsx
index ea8690a833..65118349c4 100644
--- a/apps/dokploy/components/dashboard/project/add-compose.tsx
+++ b/apps/dokploy/components/dashboard/project/add-compose.tsx
@@ -72,6 +72,7 @@ interface Props {
 export const AddCompose = ({ projectId, projectName }: Props) => {
 	const utils = api.useUtils();
 	const [visible, setVisible] = useState(false);
+	const [appNameLocked, setAppNameLocked] = useState(true);
 	const slug = slugify(projectName);
 	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const { data: servers } = api.server.withSSHKey.useQuery();
@@ -88,6 +89,22 @@ export const AddCompose = ({ projectId, projectName }: Props) => {
 		resolver: zodResolver(AddComposeSchema),
 	});
 
+	const generateAppName = (value: string): string => {
+		if (!value) return `${slug}-`;
+
+		const processedValue = value
+			.trim()
+			.toLowerCase()
+			// replace dots, spaces, and special characters with dashes
+			.replace(/[^\w]+/g, "-")
+			// remove any consecutive dashes
+			.replace(/-+/g, "-")
+			// remove leading/trailing dashes
+			.replace(/^-+|-+$/g, "");
+
+		return `${slug}-${processedValue}`;
+	};
+
 	useEffect(() => {
 		form.reset();
 	}, [form, form.reset, form.formState.isSubmitSuccessful]);
@@ -150,13 +167,17 @@ export const AddCompose = ({ projectId, projectName }: Props) => {
 											<Input
 												placeholder="Frontend"
 												{...field}
+												autoComplete="off"
+												autoCorrect="off"
+												autoCapitalize="off"
 												onChange={(e) => {
-													const val = e.target.value?.trim() || "";
-													form.setValue(
-														"appName",
-														`${slug}-${val.toLowerCase()}`,
-													);
+													const val = e.target.value;
 													field.onChange(val);
+
+													// Auto-generate App Name if locked
+													if (appNameLocked && val) {
+														form.setValue("appName", generateAppName(val));
+													}
 												}}
 											/>
 										</FormControl>
@@ -165,6 +186,56 @@ export const AddCompose = ({ projectId, projectName }: Props) => {
 								)}
 							/>
 						</div>
+						<FormField
+							control={form.control}
+							name="appName"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>App Name</FormLabel>
+									<TooltipProvider delayDuration={100}>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<div className="relative w-full">
+													<FormControl>
+														<Input
+															placeholder="project-frontend"
+															{...field}
+															readOnly={appNameLocked}
+															className={
+																appNameLocked
+																	? "cursor-pointer opacity-70 pr-10"
+																	: ""
+															}
+															onClick={() => {
+																if (appNameLocked) {
+																	setAppNameLocked(false);
+																}
+															}}
+														/>
+													</FormControl>
+													{appNameLocked && (
+														<div className="absolute inset-y-0 right-3 flex items-center pointer-events-none">
+															<HelpCircle className="size-4 text-muted-foreground" />
+														</div>
+													)}
+												</div>
+											</TooltipTrigger>
+											<TooltipContent
+												side="top"
+												className="z-[999] min-w-[180px] max-w-[250px] p-2 text-xs"
+												sideOffset={5}
+												avoidCollisions
+											>
+												{appNameLocked
+													? "App name is auto-generated. Click to edit manually."
+													: "App name can be edited manually."}
+											</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
 						<FormField
 							control={form.control}
 							name="serverId"
@@ -182,6 +253,7 @@ export const AddCompose = ({ projectId, projectName }: Props) => {
 												className="z-[999] w-[300px]"
 												align="start"
 												side="top"
+												avoidCollisions
 											>
 												<span>
 													If no server is selected, the application will be
@@ -221,19 +293,6 @@ export const AddCompose = ({ projectId, projectName }: Props) => {
 								</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"
diff --git a/apps/dokploy/components/dashboard/project/add-database.tsx b/apps/dokploy/components/dashboard/project/add-database.tsx
index a58aef2c85..47f01ac075 100644
--- a/apps/dokploy/components/dashboard/project/add-database.tsx
+++ b/apps/dokploy/components/dashboard/project/add-database.tsx
@@ -37,10 +37,16 @@ import {
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
 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 { AlertTriangle, Database } from "lucide-react";
+import { AlertTriangle, Database, HelpCircle } from "lucide-react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -156,6 +162,7 @@ export const AddDatabase = ({ projectId, projectName }: Props) => {
 	const utils = api.useUtils();
 	const [visible, setVisible] = useState(false);
 	const slug = slugify(projectName);
+	const [appNameLocked, setAppNameLocked] = useState(true);
 	const { data: servers } = api.server.withSSHKey.useQuery();
 	const postgresMutation = api.postgres.create.useMutation();
 	const mongoMutation = api.mongo.create.useMutation();
@@ -186,6 +193,22 @@ export const AddDatabase = ({ projectId, projectName }: Props) => {
 		mysql: mysqlMutation,
 	};
 
+	const generateAppName = (value: string): string => {
+		if (!value) return `${slug}-`;
+
+		const processedValue = value
+			.trim()
+			.toLowerCase()
+			// replace dots, spaces, and special characters with dashes
+			.replace(/[^\w]+/g, "-")
+			// remove any consecutive dashes
+			.replace(/-+/g, "-")
+			// remove leading/trailing dashes
+			.replace(/^-+|-+$/g, "");
+
+		return `${slug}-${processedValue}`;
+	};
+
 	const onSubmit = async (data: AddDatabase) => {
 		const defaultDockerImage =
 			data.dockerImage || dockerImageDefaultPlaceholder[data.type];
@@ -361,13 +384,16 @@ export const AddDatabase = ({ projectId, projectName }: Props) => {
 												<Input
 													placeholder="Name"
 													{...field}
+													autoComplete="off"
+													autoCorrect="off"
+													autoCapitalize="off"
 													onChange={(e) => {
 														const val = e.target.value?.trim() || "";
-														form.setValue(
-															"appName",
-															`${slug}-${val.toLowerCase()}`,
-														);
 														field.onChange(val);
+
+														if (appNameLocked && val) {
+															form.setValue("appName", generateAppName(val));
+														}
 													}}
 												/>
 											</FormControl>
@@ -376,6 +402,56 @@ export const AddDatabase = ({ projectId, projectName }: Props) => {
 										</FormItem>
 									)}
 								/>
+								<FormField
+									control={form.control}
+									name="appName"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>App Name</FormLabel>
+											<TooltipProvider delayDuration={100}>
+												<Tooltip>
+													<TooltipTrigger asChild>
+														<div className="relative w-full">
+															<FormControl>
+																<Input
+																	placeholder="my-app"
+																	{...field}
+																	readOnly={appNameLocked}
+																	className={
+																		appNameLocked
+																			? "cursor-pointer opacity-70 pr-10"
+																			: ""
+																	}
+																	onClick={() => {
+																		if (appNameLocked) {
+																			setAppNameLocked(false);
+																		}
+																	}}
+																/>
+															</FormControl>
+															{appNameLocked && (
+																<div className="absolute inset-y-0 right-3 flex items-center pointer-events-none">
+																	<HelpCircle className="size-4 text-muted-foreground" />
+																</div>
+															)}
+														</div>
+													</TooltipTrigger>
+													<TooltipContent
+														side="top"
+														className="z-[999] min-w-[180px] max-w-[250px] p-2 text-xs"
+														sideOffset={5}
+														avoidCollisions
+													>
+														{appNameLocked
+															? "App name is auto-generated. Click to edit manually."
+															: "App name can be edited manually."}
+													</TooltipContent>
+												</Tooltip>
+											</TooltipProvider>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
 								<FormField
 									control={form.control}
 									name="serverId"
@@ -409,20 +485,6 @@ export const AddDatabase = ({ projectId, projectName }: Props) => {
 										</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"
@@ -452,7 +514,11 @@ export const AddDatabase = ({ projectId, projectName }: Props) => {
 											<FormItem>
 												<FormLabel>Database Name</FormLabel>
 												<FormControl>
-													<Input placeholder="Database Name" {...field} />
+													<Input
+														placeholder="Database Name"
+														autoComplete="off"
+														{...field}
+													/>
 												</FormControl>
 
 												<FormMessage />
@@ -514,6 +580,7 @@ export const AddDatabase = ({ projectId, projectName }: Props) => {
 													<Input
 														type="password"
 														placeholder="******************"
+														autoComplete="one-time-code"
 														{...field}
 													/>
 												</FormControl>