diff --git a/apps/dokploy/components/dashboard/project/add-template.tsx b/apps/dokploy/components/dashboard/project/add-template.tsx
index 52008d9e7..068fc984d 100644
--- a/apps/dokploy/components/dashboard/project/add-template.tsx
+++ b/apps/dokploy/components/dashboard/project/add-template.tsx
@@ -35,6 +35,7 @@ import {
 	PopoverContent,
 	PopoverTrigger,
 } from "@/components/ui/popover";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import {
 	Select,
 	SelectContent,
@@ -52,7 +53,6 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import { ScrollArea } from "@radix-ui/react-scroll-area";
 import {
 	BookText,
 	CheckIcon,
@@ -61,12 +61,15 @@ import {
 	Github,
 	Globe,
 	HelpCircle,
+	LayoutGrid,
+	List,
 	PuzzleIcon,
 	SearchIcon,
 } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
 import { toast } from "sonner";
+
 interface Props {
 	projectId: string;
 }
@@ -74,8 +77,9 @@ interface Props {
 export const AddTemplate = ({ projectId }: Props) => {
 	const [query, setQuery] = useState("");
 	const [open, setOpen] = useState(false);
-	const { data } = api.compose.templates.useQuery();
+	const [viewMode, setViewMode] = useState<"detailed" | "icon">("detailed");
 	const [selectedTags, setSelectedTags] = useState<string[]>([]);
+	const { data } = api.compose.templates.useQuery();
 	const { data: servers } = api.server.withSSHKey.useQuery();
 	const { data: tags, isLoading: isLoadingTags } =
 		api.compose.getTags.useQuery();
@@ -108,279 +112,340 @@ export const AddTemplate = ({ projectId }: Props) => {
 					<span>Template</span>
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-7xl p-0">
-				<div className="sticky top-0 z-10 flex flex-col gap-4 bg-background p-6 border-b">
-					<DialogHeader>
-						<DialogTitle>Create from Template</DialogTitle>
-						<DialogDescription>
-							Create an open source application from a template
-						</DialogDescription>
-					</DialogHeader>
-					{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
-					<div className="flex flex-col md:flex-row gap-2">
-						<Input
-							placeholder="Search Template"
-							onChange={(e) => setQuery(e.target.value)}
-							className="w-full"
-							value={query}
-						/>
-						<Popover modal={true}>
-							<PopoverTrigger asChild>
-								<Button
-									variant="outline"
-									className={cn(
-										"md:max-w-[15rem] w-full justify-between !bg-input",
-									)}
-								>
-									{isLoadingTags
-										? "Loading...."
-										: selectedTags.length > 0
-											? `Selected ${selectedTags.length} tags`
-											: "Select tag"}
+			<DialogContent className="max-h-screen 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-4">
+						<div className="flex items-center justify-between">
+							<div>
+								<DialogTitle>Create from Template</DialogTitle>
+								<DialogDescription>
+									Create an open source application from a template
+								</DialogDescription>
+							</div>
+							<div className="flex items-center gap-4">
+								<Input
+									placeholder="Search Template"
+									onChange={(e) => setQuery(e.target.value)}
+									className="w-[200px]"
+									value={query}
+								/>
+								<Popover modal={true}>
+									<PopoverTrigger asChild>
+										<Button
+											variant="outline"
+											className={cn("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>
+											<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" />
 									)}
-									<CommandEmpty>No tags found.</CommandEmpty>
-									<ScrollArea className="h-96 overflow-y-auto">
-										<CommandGroup>
-											{tags?.map((tag) => {
-												return (
-													<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>
-					</div>
-				</div>
-				<div className="p-6 w-full">
-					{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
+								</Button>
 							</div>
 						</div>
-					) : (
-						<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 w-full gap-4">
-							{templates?.map((template, index) => (
-								<div key={`template-${index}`}>
-									<div
-										key={template.id}
-										className="flex flex-col gap-4 border p-6 rounded-lg h-full"
+						{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))
+										}
 									>
-										<div className="flex flex-col gap-4">
+										{tag} ×
+									</Badge>
+								))}
+							</div>
+						)}
+					</div>
+				</DialogHeader>
+
+				<ScrollArea className="h-[calc(98vh-8rem)]">
+					<div className="p-6">
+						{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+
+						{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-6"
+										: "grid-cols-2 sm:grid-cols-4 lg:grid-cols-8",
+								)}
+							>
+								{templates?.map((template, index) => (
+									<div
+										key={`template-${index}`}
+										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>
+										{/* Template Header */}
+										<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={`/templates/${template.logo}`}
+												className={cn(
+													"object-contain",
+													viewMode === "detailed" ? "size-24" : "size-16",
+												)}
+												alt={template.name}
+											/>
 											<div className="flex flex-col items-center gap-2">
-												<img
-													src={`/templates/${template.logo}`}
-													className="size-28 object-contain"
-													alt=""
-												/>
-											</div>
-
-											<div className="flex flex-col gap-2">
-												<div className="flex flex-col gap-2 justify-center items-center">
-													<div className="flex flex-col gap-2 items-center justify-center">
-														<div className="flex flex-row gap-2 flex-wrap">
-															<span className="text-sm font-medium">
-																{template.name}
-															</span>
-															<Badge>{template.version}</Badge>
-														</div>
-
-														<div className="flex flex-row gap-0">
-															<Link
-																href={template.links.github}
-																target="_blank"
-																className={
-																	"text-sm text-muted-foreground p-3 rounded-full hover:bg-border items-center flex transition-colors focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
-																}
-															>
-																<Github className="size-4 text-muted-foreground" />
-															</Link>
-															{template.links.website && (
-																<Link
-																	href={template.links.website}
-																	target="_blank"
-																	className={
-																		"text-sm text-muted-foreground p-3 rounded-full hover:bg-border items-center flex transition-colors focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
-																	}
-																>
-																	<Globe className="size-4 text-muted-foreground" />
-																</Link>
-															)}
-															{template.links.docs && (
-																<Link
-																	href={template.links.docs}
-																	target="_blank"
-																	className={
-																		"text-sm text-muted-foreground p-3 rounded-full hover:bg-border items-center flex transition-colors focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
-																	}
-																>
-																	<BookText className="size-4 text-muted-foreground" />
-																</Link>
-															)}
-															<Link
-																href={`https://github.com/Dokploy/dokploy/tree/canary/apps/dokploy/templates/${template.id}`}
-																target="_blank"
-																className={
-																	"text-sm text-muted-foreground p-3 rounded-full hover:bg-border items-center flex transition-colors focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
-																}
-															>
-																<Code className="size-4 text-muted-foreground" />
-															</Link>
-														</div>
-														<div className="flex flex-row gap-2 flex-wrap justify-center">
+												<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 variant="secondary" key={tag}>
+																<Badge
+																	key={tag}
+																	variant="green"
+																	className="text-[10px] px-2 py-0"
+																>
 																	{tag}
 																</Badge>
 															))}
 														</div>
-													</div>
-
-													<AlertDialog>
-														<AlertDialogTrigger asChild>
-															<Button onSelect={(e) => e.preventDefault()}>
-																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>
-
-																<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 (Optional)
-																					<HelpCircle className="size-4 text-muted-foreground" />
-																				</Label>
-																			</TooltipTrigger>
-																			<TooltipContent
-																				className="z-[999] w-[300px]"
-																				align="start"
-																				side="top"
-																			>
-																				<span>
-																					If ot 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}
-																					>
-																						{server.name}
-																					</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,
-																		});
-																		toast.promise(promise, {
-																			loading: "Setting up...",
-																			success: (data) => {
-																				utils.project.one.invalidate({
-																					projectId,
-																				});
-																				setOpen(false);
-																				return `${template.name} template created successfully`;
-																			},
-																			error: (err) => {
-																				return `An error ocurred deploying ${template.name} template`;
-																			},
-																		});
-																	}}
-																>
-																	Confirm
-																</AlertDialogAction>
-															</AlertDialogFooter>
-														</AlertDialogContent>
-													</AlertDialog>
-												</div>
-
-												<p className="text-sm text-muted-foreground line-clamp-3">
-													{template.description}
-												</p>
+													)}
 											</div>
 										</div>
+
+										{/* 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 pb-6 pt-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">
+													<Link
+														href={template.links.github}
+														target="_blank"
+														className="text-muted-foreground hover:text-foreground transition-colors"
+													>
+														<Github 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
+														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>
+
+														<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 (Optional)
+																			<HelpCircle className="size-4 text-muted-foreground" />
+																		</Label>
+																	</TooltipTrigger>
+																	<TooltipContent
+																		className="z-[999] w-[300px]"
+																		align="start"
+																		side="top"
+																	>
+																		<span>
+																			If ot 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}
+																			>
+																				{server.name}
+																			</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,
+																});
+																toast.promise(promise, {
+																	loading: "Setting up...",
+																	success: (data) => {
+																		utils.project.one.invalidate({
+																			projectId,
+																		});
+																		setOpen(false);
+																		return `${template.name} template created successfully`;
+																	},
+																	error: (err) => {
+																		return `An error ocurred deploying ${template.name} template`;
+																	},
+																});
+															}}
+														>
+															Confirm
+														</AlertDialogAction>
+													</AlertDialogFooter>
+												</AlertDialogContent>
+											</AlertDialog>
+										</div>
 									</div>
-								</div>
-							))}
-						</div>
-					)}
-				</div>
+								))}
+							</div>
+						)}
+					</div>
+				</ScrollArea>
 			</DialogContent>
 		</Dialog>
 	);