diff --git a/apps/dokploy/components/dashboard/project/add-template.tsx b/apps/dokploy/components/dashboard/project/add-template.tsx
index 44512d93a9..8a437a0ec8 100644
--- a/apps/dokploy/components/dashboard/project/add-template.tsx
+++ b/apps/dokploy/components/dashboard/project/add-template.tsx
@@ -8,7 +8,6 @@ import {
 	LayoutGrid,
 	List,
 	Loader2,
-	PuzzleIcon,
 	SearchIcon,
 } from "lucide-react";
 import Link from "next/link";
@@ -42,9 +41,7 @@ import {
 	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 {
@@ -76,11 +73,17 @@ const TEMPLATE_BASE_URL_KEY = "dokploy_template_base_url";
 interface Props {
 	environmentId: string;
 	baseUrl?: string;
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
 }
 
-export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
+export const AddTemplate = ({
+	environmentId,
+	baseUrl,
+	open,
+	onOpenChange,
+}: Props) => {
 	const [query, setQuery] = useState("");
-	const [open, setOpen] = useState(false);
 	const [viewMode, setViewMode] = useState<"detailed" | "icon">("detailed");
 	const [selectedTags, setSelectedTags] = useState<string[]>([]);
 	const [showBookmarksOnly, setShowBookmarksOnly] = useState(false);
@@ -196,16 +199,7 @@ export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
 	};
 
 	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>
+		<Dialog open={open} onOpenChange={onOpenChange}>
 			<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">
@@ -618,7 +612,7 @@ export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
 																		utils.environment.one.invalidate({
 																			environmentId,
 																		});
-																		setOpen(false);
+																		onOpenChange(false);
 																		return `${template.name} template created successfully`;
 																	},
 																	error: () => {
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId].tsx
index 4699414468..1160c4f2e4 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId].tsx
@@ -12,6 +12,7 @@ import {
 	Loader2,
 	Play,
 	PlusIcon,
+	PuzzleIcon,
 	RefreshCw,
 	Search,
 	ServerIcon,
@@ -90,6 +91,7 @@ import {
 import {
 	DropdownMenu,
 	DropdownMenuContent,
+	DropdownMenuItem,
 	DropdownMenuLabel,
 	DropdownMenuSeparator,
 	DropdownMenuTrigger,
@@ -431,6 +433,7 @@ const EnvironmentPage = (
 	const [openCombobox, setOpenCombobox] = useState(false);
 	const [selectedServices, setSelectedServices] = useState<string[]>([]);
 	const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+	const [isTemplateDialogOpen, setIsTemplateDialogOpen] = useState(false);
 	const [isBulkDeleteDialogOpen, setIsBulkDeleteDialogOpen] = useState(false);
 	const [deleteVolumes, setDeleteVolumes] = useState(false);
 	const [selectedServerId, setSelectedServerId] = useState<string>("all");
@@ -1089,7 +1092,13 @@ const EnvironmentPage = (
 													projectName={projectData?.name}
 													environmentId={environmentId}
 												/>
-												<AddTemplate environmentId={environmentId} />
+												<DropdownMenuItem
+													className="w-full cursor-pointer space-x-3"
+													onSelect={() => setIsTemplateDialogOpen(true)}
+												>
+													<PuzzleIcon className="size-4 text-muted-foreground" />
+													<span>Template</span>
+												</DropdownMenuItem>
 												<AddAiAssistant
 													projectName={projectData?.name}
 													environmentId={environmentId}
@@ -1101,6 +1110,13 @@ const EnvironmentPage = (
 											</DropdownMenuContent>
 										</DropdownMenu>
 									)}
+									{permissions?.service.create && (
+										<AddTemplate
+											environmentId={environmentId}
+											open={isTemplateDialogOpen}
+											onOpenChange={setIsTemplateDialogOpen}
+										/>
+									)}
 								</div>
 							</div>
 						</div>