xMerge branch 'canary' into feature/delete-docker-volumes

2025-06-26 18:27:59 +00:00 · 2024-12-18 12:10:04 +01:00
parent 7725b3ca36 829aa2a63c
commit 63c0912849
73 changed files with 7747 additions and 1071 deletions
--- a/apps/dokploy/components/dashboard/application/delete-application.tsx
+++ b/apps/dokploy/components/dashboard/application/delete-application.tsx
@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -19,7 +20,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { TrashIcon } from "lucide-react";
+import { Copy, TrashIcon } from "lucide-react";
 import { useRouter } from "next/router";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -102,9 +103,26 @@ export const DeleteApplication = ({ applicationId }: Props) => {
 								name="projectName"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel>
-											To confirm, type "{data?.name}/{data?.appName}" in the box
-											below
+										<FormLabel className="flex items-center gap-2">
+											<span>
+												To confirm, type{" "}
+												<Badge
+													className="p-2 rounded-md ml-1 mr-1 hover:border-primary hover:text-primary-foreground hover:bg-primary hover:cursor-pointer"
+													variant="outline"
+													onClick={() => {
+														if (data?.name && data?.appName) {
+															navigator.clipboard.writeText(
+																`${data.name}/${data.appName}`,
+															);
+															toast.success("Copied to clipboard. Be careful!");
+														}
+													}}
+												>
+													{data?.name}/{data?.appName}&nbsp;
+													<Copy className="h-4 w-4 ml-1 text-muted-foreground" />
+												</Badge>{" "}
+												in the box below:
+											</span>
 										</FormLabel>
 										<FormControl>
 											<Input
--- a/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx
+++ b/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx
@@ -6,6 +6,10 @@ import {
 	DialogTitle,
 } from "@/components/ui/dialog";
 import { useEffect, useRef, useState } from "react";
+import { TerminalLine } from "../../docker/logs/terminal-line";
+import { LogLine, parseLogs } from "../../docker/logs/utils";
+import { Badge } from "@/components/ui/badge";
+import { Loader2 } from "lucide-react";

 interface Props {
 	logPath: string | null;
@@ -15,9 +19,26 @@ interface Props {
 }
 export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 	const [data, setData] = useState("");
-	const endOfLogsRef = useRef<HTMLDivElement>(null);
+	const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
 	const wsRef = useRef<WebSocket | null>(null); // Ref to hold WebSocket instance
+	const [autoScroll, setAutoScroll] = useState(true);
+	const scrollRef = useRef<HTMLDivElement>(null);

+
+	const scrollToBottom = () => {
+		if (autoScroll && scrollRef.current) {
+		  scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+		}
+	  };
+	
+	const handleScroll = () => {
+		if (!scrollRef.current) return;
+	
+		const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+		const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 10;
+		setAutoScroll(isAtBottom);
+	  };
+	
 	useEffect(() => {
 		if (!open || !logPath) return;

@@ -48,13 +69,20 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 		};
 	}, [logPath, open]);

-	const scrollToBottom = () => {
-		endOfLogsRef.current?.scrollIntoView({ behavior: "smooth" });
-	};
+
+	useEffect(() => {
+		const logs = parseLogs(data);
+		setFilteredLogs(logs);
+	}, [data]);

 	useEffect(() => {
 		scrollToBottom();
-	}, [data]);
+	
+		if (autoScroll && scrollRef.current) {
+		  scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+		}
+	  }, [filteredLogs, autoScroll]);
+

 	return (
 		<Dialog
@@ -76,17 +104,27 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 				<DialogHeader>
 					<DialogTitle>Deployment</DialogTitle>
 					<DialogDescription>
-						See all the details of this deployment
+						See all the details of this deployment | <Badge variant="blank" className="text-xs">{filteredLogs.length} lines</Badge>
 					</DialogDescription>
 				</DialogHeader>

-				<div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-[59rem]">
-					<code>
-						<pre className="whitespace-pre-wrap break-words">
-							{data || "Loading..."}
-						</pre>
-						<div ref={endOfLogsRef} />
-					</code>
+				<div 
+					ref={scrollRef}
+					onScroll={handleScroll}
+					className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#d4d4d4] dark:bg-[#050506] rounded custom-logs-scrollbar"
+				>					{ 
+						filteredLogs.length > 0 ? filteredLogs.map((log: LogLine, index: number) => (
+							<TerminalLine
+								key={index}
+								log={log}
+								noTimestamp
+							/>
+						)) : 
+						(
+							<div className="flex justify-center items-center h-full text-muted-foreground">
+								<Loader2 className="h-6 w-6 animate-spin" />
+							</div>
+						)}
 				</div>
 			</DialogContent>
 		</Dialog>
--- a/apps/dokploy/components/dashboard/application/logs/show.tsx
+++ b/apps/dokploy/components/dashboard/application/logs/show.tsx
@@ -90,7 +90,6 @@ export const ShowDockerLogs = ({ appName, serverId }: Props) => {
 				</Select>
 				<DockerLogs
 					serverId={serverId || ""}
-					id="terminal"
 					containerId={containerId || "select-a-container"}
 				/>
 			</CardContent>
--- a/apps/dokploy/components/dashboard/compose/delete-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/delete-compose.tsx
@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
@@ -21,6 +22,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Copy } from "lucide-react";
 import { TrashIcon } from "lucide-react";
 import { useRouter } from "next/router";
 import { useState } from "react";
@@ -105,10 +107,27 @@ export const DeleteCompose = ({ composeId }: Props) => {
 								name="projectName"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel>
-											To confirm, type "{data?.name}/{data?.appName}" in the box
-											below
-										</FormLabel>{" "}
+										<FormLabel className="flex items-center gap-2">
+											<span>
+												To confirm, type{" "}
+												<Badge
+													className="p-2 rounded-md ml-1 mr-1 hover:border-primary hover:text-primary-foreground hover:bg-primary hover:cursor-pointer"
+													variant="outline"
+													onClick={() => {
+														if (data?.name && data?.appName) {
+															navigator.clipboard.writeText(
+																`${data.name}/${data.appName}`,
+															);
+															toast.success("Copied to clipboard. Be careful!");
+														}
+													}}
+												>
+													{data?.name}/{data?.appName}&nbsp;
+													<Copy className="h-4 w-4 ml-1 text-muted-foreground" />
+												</Badge>{" "}
+												in the box below:
+											</span>
+										</FormLabel>
 										<FormControl>
 											<Input
 												placeholder="Enter compose name to confirm"
--- a/apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx
@@ -6,6 +6,11 @@ import {
 	DialogTitle,
 } from "@/components/ui/dialog";
 import { useEffect, useRef, useState } from "react";
+import { TerminalLine } from "../../docker/logs/terminal-line";
+import { LogLine, parseLogs } from "../../docker/logs/utils";
+import { Badge } from "@/components/ui/badge";
+import { Loader2 } from "lucide-react";
+

 interface Props {
 	logPath: string | null;
@@ -20,9 +25,26 @@ export const ShowDeploymentCompose = ({
 	serverId,
 }: Props) => {
 	const [data, setData] = useState("");
-	const endOfLogsRef = useRef<HTMLDivElement>(null);
+	const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
 	const wsRef = useRef<WebSocket | null>(null); // Ref to hold WebSocket instance
+	const [autoScroll, setAutoScroll] = useState(true);
+	const scrollRef = useRef<HTMLDivElement>(null);

+	const scrollToBottom = () => {
+		if (autoScroll && scrollRef.current) {
+		  scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+		}
+	  };
+	
+	const handleScroll = () => {
+		if (!scrollRef.current) return;
+	
+		const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+		const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 10;
+		setAutoScroll(isAtBottom);
+	  };
+	
+	
 	useEffect(() => {
 		if (!open || !logPath) return;

@@ -54,13 +76,19 @@ export const ShowDeploymentCompose = ({
 		};
 	}, [logPath, open]);

-	const scrollToBottom = () => {
-		endOfLogsRef.current?.scrollIntoView({ behavior: "smooth" });
-	};
+
+	useEffect(() => {
+		const logs = parseLogs(data);
+		setFilteredLogs(logs);
+	}, [data]);

 	useEffect(() => {
 		scrollToBottom();
-	}, [data]);
+	
+		if (autoScroll && scrollRef.current) {
+		  scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+		}
+	  }, [filteredLogs, autoScroll]);

 	return (
 		<Dialog
@@ -78,21 +106,35 @@ export const ShowDeploymentCompose = ({
 				}
 			}}
 		>
-			<DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}>
+			<DialogContent className={"sm:max-w-5xl max-h-screen"}>
 				<DialogHeader>
 					<DialogTitle>Deployment</DialogTitle>
 					<DialogDescription>
-						See all the details of this deployment
+					See all the details of this deployment | <Badge variant="blank" className="text-xs">{filteredLogs.length} lines</Badge>
 					</DialogDescription>
 				</DialogHeader>

-				<div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-[59rem]">
-					<code>
-						<pre className="whitespace-pre-wrap break-words">
-							{data || "Loading..."}
-						</pre>
-						<div ref={endOfLogsRef} />
-					</code>
+				<div 
+					ref={scrollRef}
+					onScroll={handleScroll}
+					className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#d4d4d4] dark:bg-[#050506] rounded custom-logs-scrollbar"
+				>
+						
+						
+					{ 
+						filteredLogs.length > 0 ? filteredLogs.map((log: LogLine, index: number) => (
+							<TerminalLine
+								key={index}
+								log={log}
+								noTimestamp
+							/>
+						)) : 
+						(
+						<div className="flex justify-center items-center h-full text-muted-foreground">
+							<Loader2 className="h-6 w-6 animate-spin" />
+						</div>
+						)
+					}
 				</div>
 			</DialogContent>
 		</Dialog>
--- a/apps/dokploy/components/dashboard/compose/logs/show.tsx
+++ b/apps/dokploy/components/dashboard/compose/logs/show.tsx
@@ -96,7 +96,6 @@ export const ShowDockerLogsCompose = ({
 				</Select>
 				<DockerLogs
 					serverId={serverId || ""}
-					id="terminal"
 					containerId={containerId || "select-a-container"}
 				/>
 			</CardContent>
--- a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
@@ -1,115 +1,309 @@
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Terminal } from "@xterm/xterm";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { api } from "@/utils/api";
+import { Download as DownloadIcon, Loader2 } from "lucide-react";
 import React, { useEffect, useRef } from "react";
-import { FitAddon } from "xterm-addon-fit";
-import "@xterm/xterm/css/xterm.css";
+import { TerminalLine } from "./terminal-line";
+import { type LogLine, getLogType, parseLogs } from "./utils";

 interface Props {
-	id: string;
-	containerId: string;
-	serverId?: string | null;
+  containerId: string;
+  serverId?: string | null;
 }

-export const DockerLogsId: React.FC<Props> = ({
-	id,
-	containerId,
-	serverId,
-}) => {
-	const [term, setTerm] = React.useState<Terminal>();
-	const [lines, setLines] = React.useState<number>(40);
-	const wsRef = useRef<WebSocket | null>(null); // Ref to hold WebSocket instance
+type TimeFilter = "all" | "1h" | "6h" | "24h" | "168h" | "720h";
+type TypeFilter = "all" | "error" | "warning" | "success" | "info" | "debug";

-	useEffect(() => {
-		// if (containerId === "select-a-container") {
-		// 	return;
-		// }
-		const container = document.getElementById(id);
-		if (container) {
-			container.innerHTML = "";
-		}
+export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
+  const { data } = api.docker.getConfig.useQuery(
+    {
+      containerId,
+      serverId: serverId ?? undefined,
+    },
+    {
+      enabled: !!containerId,
+    }
+  );

-		if (wsRef.current) {
-			if (wsRef.current.readyState === WebSocket.OPEN) {
-				wsRef.current.close();
-			}
-			wsRef.current = null;
-		}
-		const termi = new Terminal({
-			cursorBlink: true,
-			cols: 80,
-			rows: 30,
-			lineHeight: 1.25,
-			fontWeight: 400,
-			fontSize: 14,
-			fontFamily:
-				'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+  const [rawLogs, setRawLogs] = React.useState("");
+  const [filteredLogs, setFilteredLogs] = React.useState<LogLine[]>([]);
+  const [autoScroll, setAutoScroll] = React.useState(true);
+  const [lines, setLines] = React.useState<number>(100);
+  const [search, setSearch] = React.useState<string>("");

-			convertEol: true,
-			theme: {
-				cursor: "transparent",
-				background: "rgba(0, 0, 0, 0)",
-			},
-		});
+  const [since, setSince] = React.useState<TimeFilter>("all");
+  const [typeFilter, setTypeFilter] = React.useState<TypeFilter>("all");
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [isLoading, setIsLoading] = React.useState(false);

-		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+  const scrollToBottom = () => {
+    if (autoScroll && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  };

-		const wsUrl = `${protocol}//${window.location.host}/docker-container-logs?containerId=${containerId}&tail=${lines}${serverId ? `&serverId=${serverId}` : ""}`;
-		const ws = new WebSocket(wsUrl);
-		wsRef.current = ws;
-		const fitAddon = new FitAddon();
-		termi.loadAddon(fitAddon);
-		// @ts-ignore
-		termi.open(container);
-		fitAddon.fit();
-		termi.focus();
-		setTerm(termi);
+  const handleScroll = () => {
+    if (!scrollRef.current) return;

-		ws.onerror = (error) => {
-			console.error("WebSocket error: ", error);
-		};
+    const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+    const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 10;
+    setAutoScroll(isAtBottom);
+  };

-		ws.onmessage = (e) => {
-			termi.write(e.data);
-		};
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearch(e.target.value || "");
+  };

-		ws.onclose = (e) => {
-			console.log(e.reason);
+  const handleLines = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setRawLogs("");
+    setFilteredLogs([]);
+    setLines(Number(e.target.value) || 1);
+  };

-			termi.write(`Connection closed!\nReason: ${e.reason}\n`);
-			wsRef.current = null;
-		};
-		return () => {
-			if (wsRef.current?.readyState === WebSocket.OPEN) {
-				ws.close();
-				wsRef.current = null;
-			}
-		};
-	}, [lines, containerId]);
+  const handleSince = (value: TimeFilter) => {
+    setRawLogs("");
+    setFilteredLogs([]);
+    setSince(value);
+  };

-	useEffect(() => {
-		term?.clear();
-	}, [lines, term]);
+  const handleTypeFilter = (value: TypeFilter) => {
+    setTypeFilter(value);
+  };

-	return (
-		<div className="flex flex-col gap-4">
-			<div className="flex flex-col gap-2">
-				<Label>
-					<span>Number of lines to show</span>
-				</Label>
-				<Input
-					type="text"
-					placeholder="Number of lines to show (Defaults to 35)"
-					value={lines}
-					onChange={(e) => {
-						setLines(Number(e.target.value) || 1);
-					}}
-				/>
-			</div>
+  useEffect(() => {
+    if (!containerId) return;
+    
+    let isCurrentConnection = true;
+    let noDataTimeout: NodeJS.Timeout;
+    setIsLoading(true);
+    setRawLogs("");
+    setFilteredLogs([]);

-			<div className="w-full h-full rounded-lg p-2 bg-[#19191A]">
-				<div id={id} />
-			</div>
-		</div>
-	);
-};
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const params = new globalThis.URLSearchParams({
+      containerId,
+      tail: lines.toString(),
+      since,
+      search,
+    });
+
+    if (serverId) {
+      params.append("serverId", serverId);
+    }
+
+    const wsUrl = `${protocol}//${
+      window.location.host
+    }/docker-container-logs?${params.toString()}`;
+    console.log("Connecting to WebSocket:", wsUrl);
+    const ws = new WebSocket(wsUrl);
+
+    const resetNoDataTimeout = () => {
+      if (noDataTimeout) clearTimeout(noDataTimeout);
+      noDataTimeout = setTimeout(() => {
+        if (isCurrentConnection) {
+          setIsLoading(false);
+        }
+      }, 2000); // Wait 2 seconds for data before showing "No logs found"
+    };
+
+    ws.onopen = () => {
+      if (!isCurrentConnection) {
+        ws.close();
+        return;
+      }
+      console.log("WebSocket connected");
+      resetNoDataTimeout();
+    };
+
+    ws.onmessage = (e) => {
+      if (!isCurrentConnection) return;
+      setRawLogs((prev) => prev + e.data);
+      setIsLoading(false);
+      if (noDataTimeout) clearTimeout(noDataTimeout);
+    };
+
+    ws.onerror = (error) => {
+      if (!isCurrentConnection) return;
+      console.error("WebSocket error:", error);
+      setIsLoading(false);
+      if (noDataTimeout) clearTimeout(noDataTimeout);
+    };
+
+    ws.onclose = (e) => {
+      if (!isCurrentConnection) return;
+      console.log("WebSocket closed:", e.reason);
+      setIsLoading(false);
+      if (noDataTimeout) clearTimeout(noDataTimeout);
+    };
+
+    return () => {
+      isCurrentConnection = false;
+      if (noDataTimeout) clearTimeout(noDataTimeout);
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.close();
+      }
+    };
+  }, [containerId, serverId, lines, search, since]);
+
+  const handleDownload = () => {
+    const logContent = filteredLogs
+      .map(
+        ({ timestamp, message }: { timestamp: Date | null; message: string }) =>
+          `${timestamp?.toISOString() || "No timestamp"} ${message}`
+      )
+      .join("\n");
+
+    const blob = new Blob([logContent], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    const appName = data.Name.replace("/", "") || "app";
+    const isoDate = new Date().toISOString();
+    a.href = url;
+    a.download = `${appName}-${isoDate.slice(0, 10).replace(/-/g, "")}_${isoDate
+      .slice(11, 19)
+      .replace(/:/g, "")}.log.txt`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  const handleFilter = (logs: LogLine[]) => {
+    return logs.filter((log) => {
+      const logType = getLogType(log.message).type;
+
+      const matchesType = typeFilter === "all" || logType === typeFilter;
+
+      return matchesType;
+    });
+  };
+
+  useEffect(() => {
+    setRawLogs("");
+    setFilteredLogs([]);
+  }, [containerId]);
+
+  useEffect(() => {
+    const logs = parseLogs(rawLogs);
+    const filtered = handleFilter(logs);
+    setFilteredLogs(filtered);
+  }, [rawLogs, search, lines, since, typeFilter]);
+
+  useEffect(() => {
+    scrollToBottom();
+
+    if (autoScroll && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [filteredLogs, autoScroll]);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="rounded-lg overflow-hidden">
+        <div className="space-y-4">
+          <div className="flex flex-wrap justify-between items-start sm:items-center gap-4">
+            <div className="flex flex-wrap gap-4">
+              <Input
+                type="text"
+                placeholder="Number of lines to show"
+                value={lines}
+                onChange={handleLines}
+                className="inline-flex h-9 text-sm placeholder-gray-400 w-full sm:w-auto"
+              />
+
+              <Select value={since} onValueChange={handleSince}>
+                <SelectTrigger className="sm:w-[180px] w-full h-9">
+                  <SelectValue placeholder="Time filter" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="1h">Last hour</SelectItem>
+                  <SelectItem value="6h">Last 6 hours</SelectItem>
+                  <SelectItem value="24h">Last 24 hours</SelectItem>
+                  <SelectItem value="168h">Last 7 days</SelectItem>
+                  <SelectItem value="720h">Last 30 days</SelectItem>
+                  <SelectItem value="all">All time</SelectItem>
+                </SelectContent>
+              </Select>
+
+              <Select value={typeFilter} onValueChange={handleTypeFilter}>
+                <SelectTrigger className="sm:w-[180px] w-full h-9">
+                  <SelectValue placeholder="Type filter" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">
+                    <Badge variant="blank">All</Badge>
+                  </SelectItem>
+                  <SelectItem value="error">
+                    <Badge variant="red">Error</Badge>
+                  </SelectItem>
+                  <SelectItem value="warning">
+                    <Badge variant="orange">Warning</Badge>
+                  </SelectItem>
+                  <SelectItem value="debug">
+                    <Badge variant="yellow">Debug</Badge>
+                  </SelectItem>
+                  <SelectItem value="success">
+                    <Badge variant="green">Success</Badge>
+                  </SelectItem>
+                  <SelectItem value="info">
+                    <Badge variant="blue">Info</Badge>
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+
+              <Input
+                type="search"
+                placeholder="Search logs..."
+                value={search}
+                onChange={handleSearch}
+                className="inline-flex h-9 text-sm placeholder-gray-400 w-full sm:w-auto"
+              />
+            </div>
+
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-9"
+              onClick={handleDownload}
+              disabled={filteredLogs.length === 0 || !data?.Name}
+            >
+              <DownloadIcon className="mr-2 h-4 w-4" />
+              Download logs
+            </Button>
+          </div>
+          <div
+            ref={scrollRef}
+            onScroll={handleScroll}
+            className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#d4d4d4] dark:bg-[#050506] rounded custom-logs-scrollbar"
+          >
+            {filteredLogs.length > 0 ? (
+              filteredLogs.map((filteredLog: LogLine, index: number) => (
+                <TerminalLine
+                  key={index}
+                  log={filteredLog}
+                  searchTerm={search}
+                />
+              ))
+            ) : isLoading ? (
+              <div className="flex justify-center items-center h-full text-muted-foreground">
+                <Loader2 className="h-6 w-6 animate-spin" />
+              </div>
+            ) : (
+              <div className="flex justify-center items-center h-full text-muted-foreground">
+                No logs found
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
--- a/apps/dokploy/components/dashboard/docker/logs/show-docker-modal-logs.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/show-docker-modal-logs.tsx
@@ -46,11 +46,7 @@ export const ShowDockerModalLogs = ({
 					<DialogDescription>View the logs for {containerId}</DialogDescription>
 				</DialogHeader>
 				<div className="flex flex-col gap-4 pt-2.5">
-					<DockerLogsId
-						id="terminal"
-						containerId={containerId || ""}
-						serverId={serverId}
-					/>
+					<DockerLogsId containerId={containerId || ""} serverId={serverId} />
 				</div>
 			</DialogContent>
 		</Dialog>
--- a/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
@@ -0,0 +1,111 @@
+import { Badge } from "@/components/ui/badge";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipPortal,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { escapeRegExp } from "lodash";
+import React from "react";
+import { type LogLine, getLogType } from "./utils";
+
+interface LogLineProps {
+	log: LogLine;
+	noTimestamp?: boolean;
+	searchTerm?: string;
+}
+
+export function TerminalLine({ log, noTimestamp, searchTerm }: LogLineProps) {
+	const { timestamp, message, rawTimestamp } = log;
+	const { type, variant, color } = getLogType(message);
+
+	const formattedTime = timestamp
+		? timestamp.toLocaleString([], {
+				month: "2-digit",
+				day: "2-digit",
+				hour: "2-digit",
+				minute: "2-digit",
+				year: "2-digit",
+				second: "2-digit",
+			})
+		: "--- No time found ---";
+
+	const highlightMessage = (text: string, term: string) => {
+		if (!term) return text;
+
+		const parts = text.split(new RegExp(`(${escapeRegExp(term)})`, "gi"));
+		return parts.map((part, index) =>
+			part.toLowerCase() === term.toLowerCase() ? (
+				<span key={index} className="bg-yellow-200 dark:bg-yellow-900">
+					{part}
+				</span>
+			) : (
+				part
+			),
+		);
+	};
+
+	const tooltip = (color: string, timestamp: string | null) => {
+		const square = (
+			<div className={cn("w-2 h-full flex-shrink-0 rounded-[3px]", color)} />
+		);
+		return timestamp ? (
+			<TooltipProvider delayDuration={0} disableHoverableContent>
+				<Tooltip>
+					<TooltipTrigger asChild>{square}</TooltipTrigger>
+					<TooltipPortal>
+						<TooltipContent
+							sideOffset={5}
+							className="bg-popover border-border z-[99999]"
+						>
+							<p className="text text-xs text-muted-foreground break-all max-w-md">
+								<pre>{timestamp}</pre>
+							</p>
+						</TooltipContent>
+					</TooltipPortal>
+				</Tooltip>
+			</TooltipProvider>
+		) : (
+			square
+		);
+	};
+
+	return (
+		<div
+			className={cn(
+				"font-mono text-xs flex flex-row gap-3 py-2 sm:py-0.5 group",
+				type === "error"
+					? "bg-red-500/10 hover:bg-red-500/15"
+					: type === "warning"
+						? "bg-yellow-500/10 hover:bg-yellow-500/15"
+						: type === "debug"
+							? "bg-orange-500/10 hover:bg-orange-500/15"
+							: "hover:bg-gray-200/50 dark:hover:bg-gray-800/50",
+			)}
+		>
+			{" "}
+			<div className="flex items-start gap-x-2">
+				{/* Icon to expand the log item maybe implement a colapsible later */}
+				{/* <Square className="size-4 text-muted-foreground opacity-0 group-hover/logitem:opacity-100 transition-opacity" /> */}
+				{tooltip(color, rawTimestamp)}
+				{!noTimestamp && (
+					<span className="select-none pl-2 text-muted-foreground w-full sm:w-40 flex-shrink-0">
+						{formattedTime}
+					</span>
+				)}
+
+				<Badge
+					variant={variant}
+					className="w-14 justify-center text-[10px] px-1 py-0"
+				>
+					{type}
+				</Badge>
+			</div>
+			<span className="dark:text-gray-200 font-mono text-foreground whitespace-pre-wrap break-all">
+				{searchTerm ? highlightMessage(message, searchTerm) : message}
+			</span>
+		</div>
+	);
+}
--- a/apps/dokploy/components/dashboard/docker/logs/utils.ts
+++ b/apps/dokploy/components/dashboard/docker/logs/utils.ts
@@ -0,0 +1,148 @@
+export type LogType = "error"  | "warning" | "success" | "info" | "debug";
+export type LogVariant = "red" | "yellow"  | "green"   | "blue" | "orange";
+
+export interface LogLine {
+	rawTimestamp: string | null;
+	timestamp: Date | null;
+	message: string;
+}
+
+interface LogStyle {
+	type: LogType;
+	variant: LogVariant;
+	color: string;
+}
+
+const LOG_STYLES: Record<LogType, LogStyle> = {
+	error: {
+		type: "error",
+		variant: "red",
+		color: "bg-red-500/40",
+	},
+	warning: {
+		type: "warning",
+		variant: "orange",
+		color: "bg-orange-500/40",
+	},
+	debug: {
+		type: "debug",
+		variant: "yellow",
+		color: "bg-yellow-500/40",
+	},
+	success: {
+		type: "success",
+		variant: "green",
+		color: "bg-green-500/40",
+	},
+	info: {
+		type: "info",
+		variant: "blue",
+		color: "bg-blue-600/40",
+	},
+} as const;
+
+export function parseLogs(logString: string): LogLine[] {
+	// Regex to match the log line format
+	// Exemple of return :
+	// 1 2024-12-10T10:00:00.000Z The server is running on port 8080
+	// Should return :
+	// { timestamp: new Date("2024-12-10T10:00:00.000Z"),
+	// message: "The server is running on port 8080" }
+	const logRegex =
+		/^(?:(\d+)\s+)?(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d+)?Z|\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}\.\d{3} UTC)?\s*(.*)$/;
+
+	return logString
+		.split("\n")
+		.map((line) => line.trim())
+		.filter((line) => line !== "")
+		.map((line) => {
+			const match = line.match(logRegex);
+			if (!match) return null;
+
+			const [, , timestamp, message] = match;
+
+			if (!message?.trim()) return null;
+
+			// Delete other timestamps and keep only the one from --timestamps
+			const cleanedMessage = message
+				?.replace(
+					/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d+)?Z|\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}\.\d{3} UTC/g,
+					"",
+				)
+				.trim();
+
+			return {
+				rawTimestamp: timestamp ?? null,
+				timestamp: timestamp ? new Date(timestamp.replace(" UTC", "Z")) : null,
+				message: cleanedMessage,
+			};
+		})
+		.filter((log) => log !== null);
+}
+
+// Detect log type based on message content
+export const getLogType = (message: string): LogStyle => {
+	const lowerMessage = message.toLowerCase();
+
+	if (
+		/(?:^|\s)(?:info|inf|information):?\s/i.test(lowerMessage) ||
+		/\[(?:info|information)\]/i.test(lowerMessage) ||
+		/\b(?:status|state|current|progress)\b:?\s/i.test(lowerMessage) ||
+		/\b(?:processing|executing|performing)\b/i.test(lowerMessage)
+	) {
+		return LOG_STYLES.info;
+	}
+
+	if (
+		/(?:^|\s)(?:error|err):?\s/i.test(lowerMessage) ||
+		/\b(?:exception|failed|failure)\b/i.test(lowerMessage) ||
+		/(?:stack\s?trace):\s*$/i.test(lowerMessage) ||
+		/^\s*at\s+[\w.]+\s*\(?.+:\d+:\d+\)?/.test(lowerMessage) ||
+		/\b(?:uncaught|unhandled)\s+(?:exception|error)\b/i.test(lowerMessage) ||
+		/Error:\s.*(?:in|at)\s+.*:\d+(?::\d+)?/.test(lowerMessage) ||
+		/\b(?:errno|code):\s*(?:\d+|[A-Z_]+)\b/i.test(lowerMessage) ||
+		/\[(?:error|err|fatal)\]/i.test(lowerMessage) ||
+		/\b(?:crash|critical|fatal)\b/i.test(lowerMessage) ||
+		/\b(?:fail(?:ed|ure)?|broken|dead)\b/i.test(lowerMessage)
+	) {
+		return LOG_STYLES.error;
+	}
+
+	if (
+		/(?:^|\s)(?:warning|warn):?\s/i.test(lowerMessage) ||
+		/\[(?:warn(?:ing)?|attention)\]/i.test(lowerMessage) ||
+		/(?:deprecated|obsolete)\s+(?:since|in|as\s+of)/i.test(lowerMessage) ||
+		/\b(?:caution|attention|notice):\s/i.test(lowerMessage) ||
+		/(?:might|may|could)\s+(?:not|cause|lead\s+to)/i.test(lowerMessage) ||
+		/(?:!+\s*(?:warning|caution|attention)\s*!+)/i.test(lowerMessage) ||
+		/\b(?:deprecated|obsolete)\b/i.test(lowerMessage) ||
+		/\b(?:unstable|experimental)\b/i.test(lowerMessage)
+	) {
+		return LOG_STYLES.warning;
+	}
+
+	if (
+		/(?:successfully|complete[d]?)\s+(?:initialized|started|completed|created|done|deployed)/i.test(
+			lowerMessage,
+		) ||
+		/\[(?:success|ok|done)\]/i.test(lowerMessage) ||
+		/(?:listening|running)\s+(?:on|at)\s+(?:port\s+)?\d+/i.test(lowerMessage) ||
+		/(?:connected|established|ready)\s+(?:to|for|on)/i.test(lowerMessage) ||
+		/\b(?:loaded|mounted|initialized)\s+successfully\b/i.test(lowerMessage) ||
+		/✓|√|✅|\[ok\]|done!/i.test(lowerMessage) ||
+		/\b(?:success(?:ful)?|completed|ready)\b/i.test(lowerMessage) ||
+		/\b(?:started|starting|active)\b/i.test(lowerMessage)
+	) {
+		return LOG_STYLES.success;
+	}
+
+	if (
+		/(?:^|\s)(?:info|inf):?\s/i.test(lowerMessage) ||
+		/\[(info|log|debug|trace|server|db|api|http|request|response)\]/i.test(lowerMessage) ||
+		/\b(?:version|config|import|load|get|HTTP|PATCH|POST|debug)\b:?/i.test(lowerMessage)
+	) {
+		return LOG_STYLES.debug;
+	}
+
+	return LOG_STYLES.info;
+};
--- a/apps/dokploy/components/dashboard/docker/terminal/docker-terminal.tsx
+++ b/apps/dokploy/components/dashboard/docker/terminal/docker-terminal.tsx
@@ -25,8 +25,6 @@ export const DockerTerminal: React.FC<Props> = ({
 		}
 		const term = new Terminal({
 			cursorBlink: true,
-			cols: 80,
-			rows: 30,
 			lineHeight: 1.4,
 			convertEol: true,
 			theme: {
@@ -45,6 +43,7 @@ export const DockerTerminal: React.FC<Props> = ({
 		const addonAttach = new AttachAddon(ws);
 		// @ts-ignore
 		term.open(termRef.current);
+		// @ts-ignore
 		term.loadAddon(addonFit);
 		term.loadAddon(addonAttach);
 		addonFit.fit();
@@ -66,7 +65,7 @@ export const DockerTerminal: React.FC<Props> = ({
 					</TabsList>
 				</Tabs>
 			</div>
-			<div className="w-full h-full rounded-lg p-2 bg-[#19191A]">
+			<div className="w-full h-full rounded-lg p-2 bg-transparent border">
 				<div id={id} ref={termRef} />
 			</div>
 		</div>
--- a/apps/dokploy/components/dashboard/mariadb/delete-mariadb.tsx
+++ b/apps/dokploy/components/dashboard/mariadb/delete-mariadb.tsx
@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -19,7 +20,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { TrashIcon } from "lucide-react";
+import { Copy, TrashIcon } from "lucide-react";
 import { useRouter } from "next/router";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -99,9 +100,26 @@ export const DeleteMariadb = ({ mariadbId }: Props) => {
 								name="projectName"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel>
-											To confirm, type "{data?.name}/{data?.appName}" in the box
-											below
+										<FormLabel className="flex items-center gap-2">
+											<span>
+												To confirm, type{" "}
+												<Badge
+													className="p-2 rounded-md ml-1 mr-1 hover:border-primary hover:text-primary-foreground hover:bg-primary hover:cursor-pointer"
+													variant="outline"
+													onClick={() => {
+														if (data?.name && data?.appName) {
+															navigator.clipboard.writeText(
+																`${data.name}/${data.appName}`,
+															);
+															toast.success("Copied to clipboard. Be careful!");
+														}
+													}}
+												>
+													{data?.name}/{data?.appName}&nbsp;
+													<Copy className="h-4 w-4 ml-1 text-muted-foreground" />
+												</Badge>{" "}
+												in the box below:
+											</span>
 										</FormLabel>
 										<FormControl>
 											<Input
--- a/apps/dokploy/components/dashboard/mongo/delete-mongo.tsx
+++ b/apps/dokploy/components/dashboard/mongo/delete-mongo.tsx
@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -19,7 +20,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { TrashIcon } from "lucide-react";
+import { Copy, TrashIcon } from "lucide-react";
 import { useRouter } from "next/router";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -98,9 +99,26 @@ export const DeleteMongo = ({ mongoId }: Props) => {
 								name="projectName"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel>
-											To confirm, type "{data?.name}/{data?.appName}" in the box
-											below
+										<FormLabel className="flex items-center gap-2">
+											<span>
+												To confirm, type{" "}
+												<Badge
+													className="p-2 rounded-md ml-1 mr-1 hover:border-primary hover:text-primary-foreground hover:bg-primary hover:cursor-pointer"
+													variant="outline"
+													onClick={() => {
+														if (data?.name && data?.appName) {
+															navigator.clipboard.writeText(
+																`${data.name}/${data.appName}`,
+															);
+															toast.success("Copied to clipboard. Be careful!");
+														}
+													}}
+												>
+													{data?.name}/{data?.appName}&nbsp;
+													<Copy className="h-4 w-4 ml-1 text-muted-foreground" />
+												</Badge>{" "}
+												in the box below:
+											</span>
 										</FormLabel>
 										<FormControl>
 											<Input
--- a/apps/dokploy/components/dashboard/mysql/delete-mysql.tsx
+++ b/apps/dokploy/components/dashboard/mysql/delete-mysql.tsx
@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -19,7 +20,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { TrashIcon } from "lucide-react";
+import { Copy, TrashIcon } from "lucide-react";
 import { useRouter } from "next/router";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -97,9 +98,26 @@ export const DeleteMysql = ({ mysqlId }: Props) => {
 								name="projectName"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel>
-											To confirm, type "{data?.name}/{data?.appName}" in the box
-											below
+										<FormLabel className="flex items-center gap-2">
+											<span>
+												To confirm, type{" "}
+												<Badge
+													className="p-2 rounded-md ml-1 mr-1 hover:border-primary hover:text-primary-foreground hover:bg-primary hover:cursor-pointer"
+													variant="outline"
+													onClick={() => {
+														if (data?.name && data?.appName) {
+															navigator.clipboard.writeText(
+																`${data.name}/${data.appName}`,
+															);
+															toast.success("Copied to clipboard. Be careful!");
+														}
+													}}
+												>
+													{data?.name}/{data?.appName}&nbsp;
+													<Copy className="h-4 w-4 ml-1 text-muted-foreground" />
+												</Badge>{" "}
+												in the box below:
+											</span>
 										</FormLabel>
 										<FormControl>
 											<Input
--- a/apps/dokploy/components/dashboard/postgres/delete-postgres.tsx
+++ b/apps/dokploy/components/dashboard/postgres/delete-postgres.tsx
@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -19,7 +20,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { TrashIcon } from "lucide-react";
+import { Copy, TrashIcon } from "lucide-react";
 import { useRouter } from "next/router";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -100,9 +101,26 @@ export const DeletePostgres = ({ postgresId }: Props) => {
 								name="projectName"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel>
-											To confirm, type "{data?.name}/{data?.appName}" in the box
-											below
+										<FormLabel className="flex items-center gap-2">
+											<span>
+												To confirm, type{" "}
+												<Badge
+													className="p-2 rounded-md ml-1 mr-1 hover:border-primary hover:text-primary-foreground hover:bg-primary hover:cursor-pointer"
+													variant="outline"
+													onClick={() => {
+														if (data?.name && data?.appName) {
+															navigator.clipboard.writeText(
+																`${data.name}/${data.appName}`,
+															);
+															toast.success("Copied to clipboard. Be careful!");
+														}
+													}}
+												>
+													{data?.name}/{data?.appName}&nbsp;
+													<Copy className="h-4 w-4 ml-1 text-muted-foreground" />
+												</Badge>{" "}
+												in the box below:
+											</span>
 										</FormLabel>
 										<FormControl>
 											<Input
--- a/apps/dokploy/components/dashboard/redis/delete-redis.tsx
+++ b/apps/dokploy/components/dashboard/redis/delete-redis.tsx
@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -19,7 +20,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { TrashIcon } from "lucide-react";
+import { Copy, TrashIcon } from "lucide-react";
 import { useRouter } from "next/router";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -97,9 +98,26 @@ export const DeleteRedis = ({ redisId }: Props) => {
 								name="projectName"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel>
-											To confirm, type "{data?.name}/{data?.appName}" in the box
-											below
+										<FormLabel className="flex items-center gap-2">
+											<span>
+												To confirm, type{" "}
+												<Badge
+													className="p-2 rounded-md ml-1 mr-1 hover:border-primary hover:text-primary-foreground hover:bg-primary hover:cursor-pointer"
+													variant="outline"
+													onClick={() => {
+														if (data?.name && data?.appName) {
+															navigator.clipboard.writeText(
+																`${data.name}/${data.appName}`,
+															);
+															toast.success("Copied to clipboard. Be careful!");
+														}
+													}}
+												>
+													{data?.name}/{data?.appName}&nbsp;
+													<Copy className="h-4 w-4 ml-1 text-muted-foreground" />
+												</Badge>{" "}
+												in the box below:
+											</span>
 										</FormLabel>
 										<FormControl>
 											<Input
--- a/apps/dokploy/components/dashboard/settings/profile/profile-form.tsx
+++ b/apps/dokploy/components/dashboard/settings/profile/profile-form.tsx
@@ -26,10 +26,12 @@ import { toast } from "sonner";
 import { z } from "zod";
 import { Disable2FA } from "./disable-2fa";
 import { Enable2FA } from "./enable-2fa";
+import { AlertBlock } from "@/components/shared/alert-block";

 const profileSchema = z.object({
 	email: z.string(),
 	password: z.string().nullable(),
+	currentPassword: z.string().nullable(),
 	image: z.string().optional(),
 });

@@ -52,7 +54,8 @@ const randomImages = [

 export const ProfileForm = () => {
 	const { data, refetch } = api.auth.get.useQuery();
-	const { mutateAsync, isLoading } = api.auth.update.useMutation();
+	const { mutateAsync, isLoading, isError, error } =
+		api.auth.update.useMutation();
 	const { t } = useTranslation("settings");
 	const [gravatarHash, setGravatarHash] = useState<string | null>(null);

@@ -68,6 +71,7 @@ export const ProfileForm = () => {
 			email: data?.email || "",
 			password: "",
 			image: data?.image || "",
+			currentPassword: "",
 		},
 		resolver: zodResolver(profileSchema),
 	});
@@ -78,6 +82,7 @@ export const ProfileForm = () => {
 				email: data?.email || "",
 				password: "",
 				image: data?.image || "",
+				currentPassword: "",
 			});

 			if (data.email) {
@@ -94,6 +99,7 @@ export const ProfileForm = () => {
 			email: values.email.toLowerCase(),
 			password: values.password,
 			image: values.image,
+			currentPassword: values.currentPassword,
 		})
 			.then(async () => {
 				await refetch();
@@ -116,6 +122,8 @@ export const ProfileForm = () => {
 				{!data?.is2FAEnabled ? <Enable2FA /> : <Disable2FA />}
 			</CardHeader>
 			<CardContent className="space-y-2">
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+
 				<Form {...form}>
 					<form onSubmit={form.handleSubmit(onSubmit)} className="grid gap-4">
 						<div className="space-y-4">
@@ -135,6 +143,24 @@ export const ProfileForm = () => {
 									</FormItem>
 								)}
 							/>
+							<FormField
+								control={form.control}
+								name="currentPassword"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Current Password</FormLabel>
+										<FormControl>
+											<Input
+												type="password"
+												placeholder={t("settings.profile.password")}
+												{...field}
+												value={field.value || ""}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
 							<FormField
 								control={form.control}
 								name="password"
--- a/apps/dokploy/components/dashboard/settings/profile/remove-self-account.tsx
+++ b/apps/dokploy/components/dashboard/settings/profile/remove-self-account.tsx
@@ -0,0 +1,130 @@
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useTranslation } from "next-i18next";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { DialogAction } from "@/components/shared/dialog-action";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { useRouter } from "next/router";
+
+const profileSchema = z.object({
+	password: z.string().min(1, {
+		message: "Password is required",
+	}),
+});
+
+type Profile = z.infer<typeof profileSchema>;
+
+export const RemoveSelfAccount = () => {
+	const { data } = api.auth.get.useQuery();
+	const { mutateAsync, isLoading, error, isError } =
+		api.auth.removeSelfAccount.useMutation();
+	const { t } = useTranslation("settings");
+	const router = useRouter();
+
+	const form = useForm<Profile>({
+		defaultValues: {
+			password: "",
+		},
+		resolver: zodResolver(profileSchema),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				password: "",
+			});
+		}
+		form.reset();
+	}, [form, form.reset, data]);
+
+	const onSubmit = async (values: Profile) => {
+		await mutateAsync({
+			password: values.password,
+		})
+			.then(async () => {
+				toast.success("Profile Deleted");
+				router.push("/");
+			})
+			.catch(() => {});
+	};
+
+	return (
+		<Card className="bg-transparent">
+			<CardHeader className="flex flex-row gap-2 flex-wrap justify-between items-center">
+				<div>
+					<CardTitle className="text-xl">Remove Self Account</CardTitle>
+					<CardDescription>
+						If you want to remove your account, you can do it here
+					</CardDescription>
+				</div>
+			</CardHeader>
+			<CardContent className="space-y-2">
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+
+				<Form {...form}>
+					<form
+						onSubmit={(e) => e.preventDefault()}
+						onKeyDown={(e) => {
+							if (e.key === "Enter") {
+								e.preventDefault();
+							}
+						}}
+						className="grid gap-4"
+					>
+						<div className="space-y-4">
+							<FormField
+								control={form.control}
+								name="password"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>{t("settings.profile.password")}</FormLabel>
+										<FormControl>
+											<Input
+												type="password"
+												placeholder={t("settings.profile.password")}
+												{...field}
+												value={field.value || ""}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+					</form>
+				</Form>
+				<div>
+					<DialogAction
+						title="Are you sure you want to remove your account?"
+						description="This action cannot be undone, all your projects/servers will be deleted."
+						onClick={() => form.handleSubmit(onSubmit)()}
+					>
+						<Button type="button" isLoading={isLoading} variant="destructive">
+							Remove
+						</Button>
+					</DialogAction>
+				</div>
+			</CardContent>
+		</Card>
+	);
+};
--- a/apps/dokploy/components/dashboard/settings/servers/edit-script.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/edit-script.tsx
@@ -0,0 +1,167 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { CodeEditor } from "@/components/shared/code-editor";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { FileTerminal } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+interface Props {
+	serverId: string;
+}
+
+const schema = z.object({
+	command: z.string().min(1, {
+		message: "Command is required",
+	}),
+});
+
+type Schema = z.infer<typeof schema>;
+
+export const EditScript = ({ serverId }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const { data: server } = api.server.one.useQuery(
+		{
+			serverId,
+		},
+		{
+			enabled: !!serverId,
+		},
+	);
+
+	const { mutateAsync, isLoading } = api.server.update.useMutation();
+
+	const { data: defaultCommand } = api.server.getDefaultCommand.useQuery(
+		{
+			serverId,
+		},
+		{
+			enabled: !!serverId,
+		},
+	);
+
+	const form = useForm<Schema>({
+		defaultValues: {
+			command: "",
+		},
+		resolver: zodResolver(schema),
+	});
+
+	useEffect(() => {
+		if (server) {
+			form.reset({
+				command: server.command || defaultCommand,
+			});
+		}
+	}, [server, defaultCommand]);
+
+	const onSubmit = async (formData: Schema) => {
+		if (server) {
+			await mutateAsync({
+				...server,
+				command: formData.command || "",
+				serverId,
+			})
+				.then((data) => {
+					toast.success("Script modified successfully");
+				})
+				.catch(() => {
+					toast.error("Error modifying the script");
+				});
+		}
+	};
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<Button variant="outline">
+					Modify Script
+					<FileTerminal className="size-4 text-muted-foreground" />
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-5xl overflow-x-hidden">
+				<DialogHeader>
+					<DialogTitle>Modify Script</DialogTitle>
+					<DialogDescription>
+						Modify the script which install everything necessary to deploy
+						applications on your server,
+					</DialogDescription>
+
+					<AlertBlock type="warning">
+						We recommend not modifying this script unless you know what you are doing.
+					</AlertBlock>
+				</DialogHeader>
+				<div className="grid gap-4">
+					<Form {...form}>
+						<form
+							onSubmit={form.handleSubmit(onSubmit)}
+							id="hook-form-delete-application"
+							className="grid w-full gap-4"
+						>
+							<FormField
+								control={form.control}
+								name="command"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Command</FormLabel>
+										<FormControl className="max-h-[75vh] max-w-[60rem] overflow-y-scroll overflow-x-hidden">
+											<CodeEditor
+												language="shell"
+												wrapperClassName="font-mono"
+												{...field}
+												placeholder={`
+set -e
+echo "Hello world"
+`}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</form>
+					</Form>
+				</div>
+				<DialogFooter className="flex justify-between w-full">
+					<Button
+						variant="secondary"
+						onClick={() => {
+							form.reset({
+								command: defaultCommand || "",
+							});
+						}}
+					>
+						Reset
+					</Button>
+					<Button
+						isLoading={isLoading}
+						form="hook-form-delete-application"
+						type="submit"
+					>
+						Save
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+};
--- a/apps/dokploy/components/dashboard/settings/servers/security-audit.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/security-audit.tsx
@@ -0,0 +1,233 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { api } from "@/utils/api";
+import { Loader2, LockKeyhole, RefreshCw } from "lucide-react";
+import { useState } from "react";
+import { StatusRow } from "./gpu-support";
+
+interface Props {
+	serverId: string;
+}
+
+export const SecurityAudit = ({ serverId }: Props) => {
+	const [isRefreshing, setIsRefreshing] = useState(false);
+	const { data, refetch, error, isLoading, isError } =
+		api.server.security.useQuery(
+			{ serverId },
+			{
+				enabled: !!serverId,
+			},
+		);
+	const utils = api.useUtils();
+	return (
+		<CardContent className="p-0">
+			<div className="flex flex-col gap-4">
+				<Card className="bg-background">
+					<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
+						<div className="flex flex-row gap-2 justify-between w-full  max-sm:flex-col">
+							<div className="flex flex-col gap-1">
+								<div className="flex items-center gap-2">
+									<LockKeyhole className="size-5" />
+									<CardTitle className="text-xl">
+										Setup Security Sugestions
+									</CardTitle>
+								</div>
+								<CardDescription>Check the security sugestions</CardDescription>
+							</div>
+							<Button
+								isLoading={isRefreshing}
+								onClick={async () => {
+									setIsRefreshing(true);
+									await refetch();
+									setIsRefreshing(false);
+								}}
+							>
+								<RefreshCw className="size-4" />
+								Refresh
+							</Button>
+						</div>
+						<div className="flex items-center gap-2 w-full">
+							{isError && (
+								<AlertBlock type="error" className="w-full">
+									{error.message}
+								</AlertBlock>
+							)}
+						</div>
+					</CardHeader>
+
+					<CardContent className="flex flex-col gap-4">
+						<AlertBlock type="info" className="w-full">
+							Ubuntu/Debian OS support is currently supported (Experimental)
+						</AlertBlock>
+						{isLoading ? (
+							<div className="flex items-center justify-center text-muted-foreground py-4">
+								<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+								<span>Checking Server configuration</span>
+							</div>
+						) : (
+							<div className="grid w-full gap-4">
+								<div className="border rounded-lg p-4">
+									<h3 className="text-lg font-semibold mb-1">UFW</h3>
+									<p className="text-sm text-muted-foreground mb-4">
+										UFW (Uncomplicated Firewall) is a simple firewall that can
+										be used to block incoming and outgoing traffic from your
+										server.
+									</p>
+									<div className="grid gap-2.5">
+										<StatusRow
+											label="UFW Installed"
+											isEnabled={data?.ufw?.installed}
+											description={
+												data?.ufw?.installed
+													? "Installed (Recommended)"
+													: "Not Installed (UFW should be installed for security)"
+											}
+										/>
+										<StatusRow
+											label="Status"
+											isEnabled={data?.ufw?.active}
+											description={
+												data?.ufw?.active
+													? "Active (Recommended)"
+													: "Not Active (UFW should be enabled for security)"
+											}
+										/>
+										<StatusRow
+											label="Default Incoming"
+											isEnabled={data?.ufw?.defaultIncoming === "deny"}
+											description={
+												data?.ufw?.defaultIncoming === "deny"
+													? "Default: Deny (Recommended)"
+													: `Default: ${data?.ufw?.defaultIncoming} (Should be set to 'deny' for security)`
+											}
+										/>
+									</div>
+								</div>
+
+								<div className="border rounded-lg p-4">
+									<h3 className="text-lg font-semibold mb-1">SSH</h3>
+									<p className="text-sm text-muted-foreground mb-4">
+										SSH (Secure Shell) is a protocol that allows you to securely
+										connect to a server and execute commands on it.
+									</p>
+									<div className="grid gap-2.5">
+										<StatusRow
+											label="Enabled"
+											isEnabled={data?.ssh.enabled}
+											description={
+												data?.ssh.enabled
+													? "Enabled"
+													: "Not Enabled (SSH should be enabled)"
+											}
+										/>
+										<StatusRow
+											label="Key Auth"
+											isEnabled={data?.ssh.keyAuth}
+											description={
+												data?.ssh.keyAuth
+													? "Enabled (Recommended)"
+													: "Not Enabled (Key Authentication should be enabled)"
+											}
+										/>
+										<StatusRow
+											label="Password Auth"
+											isEnabled={data?.ssh.passwordAuth === "no"}
+											description={
+												data?.ssh.passwordAuth === "no"
+													? "Disabled (Recommended)"
+													: "Enabled (Password Authentication should be disabled)"
+											}
+										/>
+										<StatusRow
+											label="Permit Root Login"
+											isEnabled={data?.ssh.permitRootLogin === "no"}
+											description={
+												data?.ssh.permitRootLogin === "no"
+													? "Disabled (Recommended)"
+													: `Enabled: ${data?.ssh.permitRootLogin} (Root Login should be disabled)`
+											}
+										/>
+										<StatusRow
+											label="Use PAM"
+											isEnabled={data?.ssh.usePam === "no"}
+											description={
+												data?.ssh.usePam === "no"
+													? "Disabled (Recommended for key-based auth)"
+													: "Enabled (Should be disabled when using key-based auth)"
+											}
+										/>
+									</div>
+								</div>
+
+								<div className="border rounded-lg p-4">
+									<h3 className="text-lg font-semibold mb-1">Fail2Ban</h3>
+									<p className="text-sm text-muted-foreground mb-4">
+										Fail2Ban (Fail2Ban) is a service that can be used to prevent
+										brute force attacks on your server.
+									</p>
+									<div className="grid gap-2.5">
+										<StatusRow
+											label="Installed"
+											isEnabled={data?.fail2ban.installed}
+											description={
+												data?.fail2ban.installed
+													? "Installed (Recommended)"
+													: "Not Installed (Fail2Ban should be installed for protection against brute force attacks)"
+											}
+										/>
+
+										<StatusRow
+											label="Enabled"
+											isEnabled={data?.fail2ban.enabled}
+											description={
+												data?.fail2ban.enabled
+													? "Enabled (Recommended)"
+													: "Not Enabled (Fail2Ban service should be enabled)"
+											}
+										/>
+										<StatusRow
+											label="Active"
+											isEnabled={data?.fail2ban.active}
+											description={
+												data?.fail2ban.active
+													? "Active (Recommended)"
+													: "Not Active (Fail2Ban service should be running)"
+											}
+										/>
+
+										<StatusRow
+											label="SSH Protection"
+											isEnabled={data?.fail2ban.sshEnabled === "true"}
+											description={
+												data?.fail2ban.sshEnabled === "true"
+													? "Enabled (Recommended)"
+													: "Not Enabled (SSH protection should be enabled to prevent brute force attacks)"
+											}
+										/>
+
+										<StatusRow
+											label="SSH Mode"
+											isEnabled={data?.fail2ban.sshMode === "aggressive"}
+											description={
+												data?.fail2ban.sshMode === "aggressive"
+													? "Aggressive Mode (Recommended)"
+													: `Mode: ${data?.fail2ban.sshMode || "Not Set"} (Aggressive mode recommended for better protection)`
+											}
+										/>
+									</div>
+								</div>
+							</div>
+						)}
+					</CardContent>
+				</Card>
+			</div>
+		</CardContent>
+	);
+};
--- a/apps/dokploy/components/dashboard/settings/servers/setup-server.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/setup-server.tsx
@@ -32,8 +32,10 @@ import Link from "next/link";
 import { useState } from "react";
 import { toast } from "sonner";
 import { ShowDeployment } from "../../application/deployments/show-deployment";
+import { EditScript } from "./edit-script";
 import { GPUSupport } from "./gpu-support";
 import { ValidateServer } from "./validate-server";
+import { SecurityAudit } from "./security-audit";

 interface Props {
 	serverId: string;
@@ -89,12 +91,18 @@ export const SetupServer = ({ serverId }: Props) => {
 						</AlertBlock>
 					</div>
 				) : (
-					<div id="hook-form-add-gitlab" className="grid w-full gap-1">
+					<div id="hook-form-add-gitlab" className="grid w-full gap-4">
+						<AlertBlock type="warning">
+							Using a root user is required to ensure everything works as
+							expected.
+						</AlertBlock>
+
 						<Tabs defaultValue="ssh-keys">
-							<TabsList className="grid grid-cols-4 w-[600px]">
+							<TabsList className="grid grid-cols-5 w-[700px]">
 								<TabsTrigger value="ssh-keys">SSH Keys</TabsTrigger>
 								<TabsTrigger value="deployments">Deployments</TabsTrigger>
 								<TabsTrigger value="validate">Validate</TabsTrigger>
+								<TabsTrigger value="audit">Security</TabsTrigger>
 								<TabsTrigger value="gpu-setup">GPU Setup</TabsTrigger>
 							</TabsList>
 							<TabsContent
@@ -139,7 +147,7 @@ export const SetupServer = ({ serverId }: Props) => {
 											Automatic process
 										</span>
 										<Link
-											href="https://docs.dokploy.com/en/docs/core/get-started/introduction"
+											href="https://docs.dokploy.com/docs/core/multi-server/instructions#requirements"
 											target="_blank"
 											className="text-primary flex flex-row gap-2"
 										>
@@ -198,6 +206,28 @@ export const SetupServer = ({ serverId }: Props) => {
 											</li>
 										</ul>
 									</div>
+									<div className="flex flex-col gap-2 w-full border rounded-lg p-4">
+										<span className="text-base font-semibold text-primary">
+											Supported Distros:
+										</span>
+										<p>
+											We strongly recommend to use the following distros to
+											ensure the best experience:
+										</p>
+										<ul>
+											<li>1. Ubuntu 24.04 LTS</li>
+											<li>2. Ubuntu 23.10 LTS </li>
+											<li>3. Ubuntu 22.04 LTS</li>
+											<li>4. Ubuntu 20.04 LTS</li>
+											<li>5. Ubuntu 18.04 LTS</li>
+											<li>6. Debian 12</li>
+											<li>7. Debian 11</li>
+											<li>8. Debian 10</li>
+											<li>9. Fedora 40</li>
+											<li>10. Centos 9</li>
+											<li>11. Centos 8</li>
+										</ul>
+									</div>
 								</div>
 							</TabsContent>
 							<TabsContent value="deployments">
@@ -214,24 +244,29 @@ export const SetupServer = ({ serverId }: Props) => {
 															See all the 5 Server Setup
 														</CardDescription>
 													</div>
-													<DialogAction
-														title={"Setup Server?"}
-														description="This will setup the server and all associated data"
-														onClick={async () => {
-															await mutateAsync({
-																serverId: server?.serverId || "",
-															})
-																.then(async () => {
-																	refetch();
-																	toast.success("Server setup successfully");
+													<div className="flex flex-row gap-2">
+														<EditScript serverId={server?.serverId || ""} />
+														<DialogAction
+															title={"Setup Server?"}
+															description="This will setup the server and all associated data"
+															onClick={async () => {
+																await mutateAsync({
+																	serverId: server?.serverId || "",
 																})
-																.catch(() => {
-																	toast.error("Error configuring server");
-																});
-														}}
-													>
-														<Button isLoading={isLoading}>Setup Server</Button>
-													</DialogAction>
+																	.then(async () => {
+																		refetch();
+																		toast.success("Server setup successfully");
+																	})
+																	.catch(() => {
+																		toast.error("Error configuring server");
+																	});
+															}}
+														>
+															<Button isLoading={isLoading}>
+																Setup Server
+															</Button>
+														</DialogAction>
+													</div>
 												</div>
 											</CardHeader>
 											<CardContent className="flex flex-col gap-4">
@@ -303,6 +338,14 @@ export const SetupServer = ({ serverId }: Props) => {
 									<ValidateServer serverId={serverId} />
 								</div>
 							</TabsContent>
+							<TabsContent
+								value="audit"
+								className="outline-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+							>
+								<div className="flex flex-col gap-2 text-sm text-muted-foreground pt-3">
+									<SecurityAudit serverId={serverId} />
+								</div>
+							</TabsContent>
 							<TabsContent
 								value="gpu-setup"
 								className="outline-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"
--- a/apps/dokploy/components/dashboard/settings/servers/show-servers.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/show-servers.tsx
@@ -31,8 +31,12 @@ import { SetupServer } from "./setup-server";
 import { ShowDockerContainersModal } from "./show-docker-containers-modal";
 import { ShowTraefikFileSystemModal } from "./show-traefik-file-system-modal";
 import { UpdateServer } from "./update-server";
+import { useRouter } from "next/router";
+import { WelcomeSuscription } from "./welcome-stripe/welcome-suscription";

 export const ShowServers = () => {
+	const router = useRouter();
+	const query = router.query;
 	const { data, refetch } = api.server.all.useQuery();
 	const { mutateAsync } = api.server.remove.useMutation();
 	const { data: sshKeys } = api.sshKey.all.useQuery();
@@ -42,12 +46,26 @@ export const ShowServers = () => {

 	return (
 		<div className="p-6 space-y-6">
+			{query?.success && isCloud && <WelcomeSuscription />}
 			<div className="space-y-2 flex flex-row justify-between items-end">
-				<div>
-					<h1 className="text-2xl font-bold">Servers</h1>
-					<p className="text-muted-foreground">
-						Add servers to deploy your applications remotely.
-					</p>
+				<div className="flex flex-col gap-2">
+					<div>
+						<h1 className="text-2xl font-bold">Servers</h1>
+						<p className="text-muted-foreground">
+							Add servers to deploy your applications remotely.
+						</p>
+					</div>
+
+					{isCloud && (
+						<span
+							className="text-primary cursor-pointer text-sm"
+							onClick={() => {
+								router.push("/dashboard/settings/servers?success=true");
+							}}
+						>
+							Reset Onboarding
+						</span>
+					)}
 				</div>

 				{sshKeys && sshKeys?.length > 0 && (
@@ -100,7 +118,9 @@ export const ShowServers = () => {
 				{data && data?.length > 0 && (
 					<div className="flex flex-col gap-6 overflow-auto">
 						<Table>
-							<TableCaption>See all servers</TableCaption>
+							<TableCaption>
+								<div className="flex flex-col  gap-4">See all servers</div>
+							</TableCaption>
 							<TableHeader>
 								<TableRow>
 									<TableHead className="w-[100px]">Name</TableHead>
--- a/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-server.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-server.tsx
@@ -0,0 +1,284 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { DialogFooter } from "@/components/ui/dialog";
+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 { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PlusIcon } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const Schema = z.object({
+	name: z.string().min(1, {
+		message: "Name is required",
+	}),
+	description: z.string().optional(),
+	ipAddress: z.string().min(1, {
+		message: "IP Address is required",
+	}),
+	port: z.number().optional(),
+	username: z.string().optional(),
+	sshKeyId: z.string().min(1, {
+		message: "SSH Key is required",
+	}),
+});
+
+type Schema = z.infer<typeof Schema>;
+
+interface Props {
+	stepper: any;
+}
+
+export const CreateServer = ({ stepper }: Props) => {
+	const { data: sshKeys } = api.sshKey.all.useQuery();
+	const [isOpen, setIsOpen] = useState(false);
+	const { data: canCreateMoreServers, refetch } =
+		api.stripe.canCreateMoreServers.useQuery();
+	const { mutateAsync, error, isError } = api.server.create.useMutation();
+	const cloudSSHKey = sshKeys?.find(
+		(sshKey) => sshKey.name === "dokploy-cloud-ssh-key",
+	);
+
+	const form = useForm<Schema>({
+		defaultValues: {
+			description: "Dokploy Cloud Server",
+			name: "My First Server",
+			ipAddress: "",
+			port: 22,
+			username: "root",
+			sshKeyId: cloudSSHKey?.sshKeyId || "",
+		},
+		resolver: zodResolver(Schema),
+	});
+
+	useEffect(() => {
+		form.reset({
+			description: "Dokploy Cloud Server",
+			name: "My First Server",
+			ipAddress: "",
+			port: 22,
+			username: "root",
+			sshKeyId: cloudSSHKey?.sshKeyId || "",
+		});
+	}, [form, form.reset, form.formState.isSubmitSuccessful, sshKeys]);
+
+	useEffect(() => {
+		refetch();
+	}, [isOpen]);
+
+	const onSubmit = async (data: Schema) => {
+		await mutateAsync({
+			name: data.name,
+			description: data.description || "",
+			ipAddress: data.ipAddress || "",
+			port: data.port || 22,
+			username: data.username || "root",
+			sshKeyId: data.sshKeyId || "",
+		})
+			.then(async (data) => {
+				toast.success("Server Created");
+				stepper.next();
+			})
+			.catch(() => {
+				toast.error("Error to create a server");
+			});
+	};
+	return (
+		<Card className="bg-background flex flex-col gap-4">
+			<div className="flex flex-col gap-2 pt-5 px-4">
+				{!canCreateMoreServers && (
+					<AlertBlock type="warning">
+						You cannot create more servers,{" "}
+						<Link href="/dashboard/settings/billing" className="text-primary">
+							Please upgrade your plan
+						</Link>
+					</AlertBlock>
+				)}
+			</div>
+
+			<CardContent className="flex flex-col">
+				<Form {...form}>
+					<form
+						id="hook-form-add-server"
+						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="Hostinger Server" {...field} />
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+						<FormField
+							control={form.control}
+							name="description"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Description</FormLabel>
+									<FormControl>
+										<Textarea
+											placeholder="This server is for databases..."
+											className="resize-none"
+											{...field}
+										/>
+									</FormControl>
+
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="sshKeyId"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Select a SSH Key</FormLabel>
+									{!cloudSSHKey && (
+										<AlertBlock>
+											Looks like you didn't have the SSH Key yet, you can create
+											one{" "}
+											<Link
+												href="/dashboard/settings/ssh-keys"
+												className="text-primary"
+											>
+												here
+											</Link>
+										</AlertBlock>
+									)}
+
+									<Select
+										onValueChange={field.onChange}
+										defaultValue={field.value}
+									>
+										<SelectTrigger>
+											<SelectValue placeholder="Select a SSH Key" />
+										</SelectTrigger>
+										<SelectContent>
+											<SelectGroup>
+												{sshKeys?.map((sshKey) => (
+													<SelectItem
+														key={sshKey.sshKeyId}
+														value={sshKey.sshKeyId}
+													>
+														{sshKey.name}
+													</SelectItem>
+												))}
+												<SelectLabel>
+													Registries ({sshKeys?.length})
+												</SelectLabel>
+											</SelectGroup>
+										</SelectContent>
+									</Select>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<div className="grid grid-cols-2 gap-4">
+							<FormField
+								control={form.control}
+								name="ipAddress"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>IP Address</FormLabel>
+										<FormControl>
+											<Input placeholder="192.168.1.100" {...field} />
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="port"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Port</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="22"
+												{...field}
+												onChange={(e) => {
+													const value = e.target.value;
+													if (value === "") {
+														field.onChange(0);
+													} else {
+														const number = Number.parseInt(value, 10);
+														if (!Number.isNaN(number)) {
+															field.onChange(number);
+														}
+													}
+												}}
+											/>
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+
+						<FormField
+							control={form.control}
+							name="username"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Username</FormLabel>
+									<FormControl>
+										<Input placeholder="root" {...field} />
+									</FormControl>
+
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</form>
+
+					<DialogFooter className="pt-5">
+						<Button
+							isLoading={form.formState.isSubmitting}
+							disabled={!canCreateMoreServers}
+							form="hook-form-add-server"
+							type="submit"
+						>
+							Create
+						</Button>
+					</DialogFooter>
+				</Form>
+			</CardContent>
+		</Card>
+	);
+};
--- a/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-ssh-key.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-ssh-key.tsx
@@ -0,0 +1,152 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { api } from "@/utils/api";
+import { ExternalLinkIcon, Loader2 } from "lucide-react";
+import copy from "copy-to-clipboard";
+import { CopyIcon } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { toast } from "sonner";
+import { CodeEditor } from "@/components/shared/code-editor";
+import Link from "next/link";
+
+export const CreateSSHKey = () => {
+	const { data, refetch } = api.sshKey.all.useQuery();
+	const generateMutation = api.sshKey.generate.useMutation();
+	const { mutateAsync, isLoading } = api.sshKey.create.useMutation();
+	const hasCreatedKey = useRef(false);
+
+	const cloudSSHKey = data?.find(
+		(sshKey) => sshKey.name === "dokploy-cloud-ssh-key",
+	);
+
+	useEffect(() => {
+		const createKey = async () => {
+			if (!data || cloudSSHKey || hasCreatedKey.current || isLoading) {
+				return;
+			}
+
+			hasCreatedKey.current = true;
+
+			try {
+				const keys = await generateMutation.mutateAsync({
+					type: "rsa",
+				});
+				await mutateAsync({
+					name: "dokploy-cloud-ssh-key",
+					description: "Used on Dokploy Cloud",
+					privateKey: keys.privateKey,
+					publicKey: keys.publicKey,
+				});
+				await refetch();
+			} catch (error) {
+				console.error("Error creating SSH key:", error);
+				hasCreatedKey.current = false;
+			}
+		};
+
+		createKey();
+	}, [data]);
+
+	return (
+		<Card className="h-full bg-transparent">
+			<CardContent>
+				<div className="grid w-full gap-4 pt-4">
+					{isLoading || !cloudSSHKey ? (
+						<div className="min-h-[25vh] justify-center flex items-center gap-4">
+							<Loader2
+								className="animate-spin text-muted-foreground"
+								size={32}
+							/>
+						</div>
+					) : (
+						<>
+							<div className="flex flex-col gap-2 text-sm text-muted-foreground">
+								<p className="text-primary text-base font-semibold">
+									You have two options to add SSH Keys to your server:
+								</p>
+
+								<ul>
+									<li>1. Add The SSH Key to Server Manually</li>
+
+									<li>
+										2. Add the public SSH Key when you create a server in your
+										preffered provider (Hostinger, Digital Ocean, Hetzner, etc){" "}
+									</li>
+								</ul>
+
+								<div className="flex flex-col gap-2 w-full border rounded-lg p-4">
+									<span className="text-base font-semibold text-primary">
+										Option 1
+									</span>
+									<ul>
+										<li className="items-center flex gap-1">
+											1. Login to your server{" "}
+										</li>
+										<li>
+											2. When you are logged in run the following command
+											<div className="flex  relative flex-col gap-4 w-full mt-2">
+												<CodeEditor
+													lineWrapping
+													language="properties"
+													value={`echo "${cloudSSHKey?.publicKey}" >> ~/.ssh/authorized_keys`}
+													readOnly
+													className="font-mono opacity-60"
+												/>
+												<button
+													type="button"
+													className="absolute right-2 top-2"
+													onClick={() => {
+														copy(
+															`echo "${cloudSSHKey?.publicKey}" >> ~/.ssh/authorized_keys`,
+														);
+														toast.success("Copied to clipboard");
+													}}
+												>
+													<CopyIcon className="size-4" />
+												</button>
+											</div>
+										</li>
+										<li className="mt-1">
+											3. You're done, follow the next step to insert the details
+											of your server.
+										</li>
+									</ul>
+								</div>
+								<div className="flex flex-col gap-2 w-full mt-2 border rounded-lg p-4">
+									<span className="text-base font-semibold text-primary">
+										Option 2
+									</span>
+									<div className="flex flex-col gap-4 w-full overflow-auto">
+										<div className="flex relative flex-col gap-2 overflow-y-auto">
+											<div className="text-sm text-primary flex flex-row gap-2 items-center">
+												Copy Public Key
+												<button
+													type="button"
+													className=" right-2 top-8"
+													onClick={() => {
+														copy(
+															cloudSSHKey?.publicKey || "Generate a SSH Key",
+														);
+														toast.success("SSH Copied to clipboard");
+													}}
+												>
+													<CopyIcon className="size-4 text-muted-foreground" />
+												</button>
+											</div>
+										</div>
+									</div>
+									<Link
+										href="https://docs.dokploy.com/docs/core/multi-server/instructions#requirements"
+										target="_blank"
+										className="text-primary flex flex-row gap-2"
+									>
+										View Tutorial <ExternalLinkIcon className="size-4" />
+									</Link>
+								</div>
+							</div>
+						</>
+					)}
+				</div>
+			</CardContent>
+		</Card>
+	);
+};
--- a/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/setup.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/setup.tsx
@@ -0,0 +1,163 @@
+import { ShowDeployment } from "@/components/dashboard/application/deployments/show-deployment";
+import { DateTooltip } from "@/components/shared/date-tooltip";
+import { DialogAction } from "@/components/shared/dialog-action";
+import { StatusTooltip } from "@/components/shared/status-tooltip";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardHeader,
+	CardTitle,
+	CardDescription,
+	CardContent,
+} from "@/components/ui/card";
+import { RocketIcon } from "lucide-react";
+import { toast } from "sonner";
+import { EditScript } from "../edit-script";
+import { api } from "@/utils/api";
+import { useState } from "react";
+import { Label } from "@/components/ui/label";
+import {
+	Select,
+	SelectTrigger,
+	SelectValue,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+} from "@/components/ui/select";
+
+export const Setup = () => {
+	const { data: servers } = api.server.all.useQuery();
+	const [serverId, setServerId] = useState<string>(
+		servers?.[0]?.serverId || "",
+	);
+	const { data: server } = api.server.one.useQuery(
+		{
+			serverId,
+		},
+		{
+			enabled: !!serverId,
+		},
+	);
+
+	const [activeLog, setActiveLog] = useState<string | null>(null);
+	const { data: deployments, refetch } = api.deployment.allByServer.useQuery(
+		{ serverId },
+		{
+			enabled: !!serverId,
+		},
+	);
+
+	const { mutateAsync, isLoading } = api.server.setup.useMutation();
+
+	return (
+		<div className="flex flex-col gap-4">
+			<Card className="bg-background">
+				<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
+					<div className="flex flex-col gap-2 w-full">
+						<Label>Select the server and click on setup server</Label>
+						<Select onValueChange={setServerId} defaultValue={serverId}>
+							<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>
+					<div className="flex flex-row gap-2 justify-between w-full max-sm:flex-col">
+						<div className="flex flex-col gap-1">
+							<CardTitle className="text-xl">Deployments</CardTitle>
+							<CardDescription>See all the 5 Server Setup</CardDescription>
+						</div>
+						<div className="flex flex-row gap-2">
+							<EditScript serverId={server?.serverId || ""} />
+							<DialogAction
+								title={"Setup Server?"}
+								description="This will setup the server and all associated data"
+								onClick={async () => {
+									await mutateAsync({
+										serverId: server?.serverId || "",
+									})
+										.then(async () => {
+											refetch();
+											toast.success("Server setup successfully");
+										})
+										.catch(() => {
+											toast.error("Error configuring server");
+										});
+								}}
+							>
+								<Button isLoading={isLoading}>Setup Server</Button>
+							</DialogAction>
+						</div>
+					</div>
+				</CardHeader>
+				<CardContent className="flex flex-col gap-4 min-h-[30vh]">
+					{server?.deployments?.length === 0 ? (
+						<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
+							<RocketIcon className="size-8 text-muted-foreground" />
+							<span className="text-base text-muted-foreground">
+								No deployments found
+							</span>
+						</div>
+					) : (
+						<div className="flex flex-col gap-4">
+							{deployments?.map((deployment) => (
+								<div
+									key={deployment.deploymentId}
+									className="flex items-center justify-between rounded-lg border p-4 gap-2"
+								>
+									<div className="flex flex-col">
+										<span className="flex items-center gap-4 font-medium capitalize text-foreground">
+											{deployment.status}
+
+											<StatusTooltip
+												status={deployment?.status}
+												className="size-2.5"
+											/>
+										</span>
+										<span className="text-sm text-muted-foreground">
+											{deployment.title}
+										</span>
+										{deployment.description && (
+											<span className="break-all text-sm text-muted-foreground">
+												{deployment.description}
+											</span>
+										)}
+									</div>
+									<div className="flex flex-col items-end gap-2">
+										<div className="text-sm capitalize text-muted-foreground">
+											<DateTooltip date={deployment.createdAt} />
+										</div>
+
+										<Button
+											onClick={() => {
+												setActiveLog(deployment.logPath);
+											}}
+										>
+											View
+										</Button>
+									</div>
+								</div>
+							))}
+						</div>
+					)}
+
+					<ShowDeployment
+						open={activeLog !== null}
+						onClose={() => setActiveLog(null)}
+						logPath={activeLog}
+					/>
+				</CardContent>
+			</Card>
+		</div>
+	);
+};
--- a/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/verify.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/verify.tsx
@@ -0,0 +1,189 @@
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardHeader,
+	CardTitle,
+	CardDescription,
+	CardContent,
+} from "@/components/ui/card";
+import { Loader2, PcCase, RefreshCw } from "lucide-react";
+import { api } from "@/utils/api";
+import { useState } from "react";
+import { Label } from "@/components/ui/label";
+
+import {
+	Select,
+	SelectTrigger,
+	SelectValue,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+} from "@/components/ui/select";
+import { StatusRow } from "../gpu-support";
+import { AlertBlock } from "@/components/shared/alert-block";
+
+export const Verify = () => {
+	const { data: servers } = api.server.all.useQuery();
+	const [serverId, setServerId] = useState<string>(
+		servers?.[0]?.serverId || "",
+	);
+	const { data, refetch, error, isLoading, isError } =
+		api.server.validate.useQuery(
+			{ serverId },
+			{
+				enabled: !!serverId,
+			},
+		);
+	const [isRefreshing, setIsRefreshing] = useState(false);
+
+	const { data: server } = api.server.one.useQuery(
+		{
+			serverId,
+		},
+		{
+			enabled: !!serverId,
+		},
+	);
+
+	return (
+		<CardContent className="p-0">
+			<div className="flex flex-col gap-4">
+				<Card className="bg-background">
+					<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
+						<div className="flex flex-col gap-2 w-full">
+							<Label>Select a server</Label>
+							<Select onValueChange={setServerId} defaultValue={serverId}>
+								<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>
+						<div className="flex flex-row gap-2 justify-between w-full  max-sm:flex-col">
+							<div className="flex flex-col gap-1">
+								<div className="flex items-center gap-2">
+									<PcCase className="size-5" />
+									<CardTitle className="text-xl">Setup Validation</CardTitle>
+								</div>
+								<CardDescription>
+									Check if your server is ready for deployment
+								</CardDescription>
+							</div>
+							<Button
+								isLoading={isRefreshing}
+								onClick={async () => {
+									setIsRefreshing(true);
+									await refetch();
+									setIsRefreshing(false);
+								}}
+							>
+								<RefreshCw className="size-4" />
+								Refresh
+							</Button>
+						</div>
+						<div className="flex items-center gap-2 w-full">
+							{isError && (
+								<AlertBlock type="error" className="w-full">
+									{error.message}
+								</AlertBlock>
+							)}
+						</div>
+					</CardHeader>
+
+					<CardContent className="flex flex-col gap-4 min-h-[25vh]">
+						{isLoading ? (
+							<div className="flex items-center justify-center text-muted-foreground py-4">
+								<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+								<span>Checking Server configuration</span>
+							</div>
+						) : (
+							<div className="grid w-full gap-4">
+								<div className="border rounded-lg p-4">
+									<h3 className="text-lg font-semibold mb-1">Status</h3>
+									<p className="text-sm text-muted-foreground mb-4">
+										Shows the server configuration status
+									</p>
+									<div className="grid gap-2.5">
+										<StatusRow
+											label="Docker Installed"
+											isEnabled={data?.docker?.enabled}
+											description={
+												data?.docker?.enabled
+													? `Installed: ${data?.docker?.version}`
+													: undefined
+											}
+										/>
+										<StatusRow
+											label="RClone Installed"
+											isEnabled={data?.rclone?.enabled}
+											description={
+												data?.rclone?.enabled
+													? `Installed: ${data?.rclone?.version}`
+													: undefined
+											}
+										/>
+										<StatusRow
+											label="Nixpacks Installed"
+											isEnabled={data?.nixpacks?.enabled}
+											description={
+												data?.nixpacks?.enabled
+													? `Installed: ${data?.nixpacks?.version}`
+													: undefined
+											}
+										/>
+										<StatusRow
+											label="Buildpacks Installed"
+											isEnabled={data?.buildpacks?.enabled}
+											description={
+												data?.buildpacks?.enabled
+													? `Installed: ${data?.buildpacks?.version}`
+													: undefined
+											}
+										/>
+										<StatusRow
+											label="Docker Swarm Initialized"
+											isEnabled={data?.isSwarmInstalled}
+											description={
+												data?.isSwarmInstalled
+													? "Initialized"
+													: "Not Initialized"
+											}
+										/>
+										<StatusRow
+											label="Dokploy Network Created"
+											isEnabled={data?.isDokployNetworkInstalled}
+											description={
+												data?.isDokployNetworkInstalled
+													? "Created"
+													: "Not Created"
+											}
+										/>
+										<StatusRow
+											label="Main Directory Created"
+											isEnabled={data?.isMainDirectoryInstalled}
+											description={
+												data?.isMainDirectoryInstalled
+													? "Created"
+													: "Not Created"
+											}
+										/>
+									</div>
+								</div>
+							</div>
+						)}
+					</CardContent>
+				</Card>
+			</div>
+		</CardContent>
+	);
+};
--- a/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/welcome-suscription.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/welcome-suscription.tsx
@@ -0,0 +1,411 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { BookIcon, Puzzle } from "lucide-react";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { defineStepper } from "@stepperize/react";
+import React from "react";
+import { Separator } from "@/components/ui/separator";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { CreateServer } from "./create-server";
+import { CreateSSHKey } from "./create-ssh-key";
+import { Setup } from "./setup";
+import { Verify } from "./verify";
+import { Database, Globe, GitMerge, Users, Code2, Plug } from "lucide-react";
+import ConfettiExplosion from "react-confetti-explosion";
+import Link from "next/link";
+import { GithubIcon } from "@/components/icons/data-tools-icons";
+
+export const { useStepper, steps, Scoped } = defineStepper(
+	{
+		id: "requisites",
+		title: "Requisites",
+		description: "Check your requisites",
+	},
+	{
+		id: "create-ssh-key",
+		title: "SSH Key",
+		description: "Create your ssh key",
+	},
+	{
+		id: "connect-server",
+		title: "Connect",
+		description: "Connect",
+	},
+	{ id: "setup", title: "Setup", description: "Setup your server" },
+	{ id: "verify", title: "Verify", description: "Verify your server" },
+	{ id: "complete", title: "Complete", description: "Checkout complete" },
+);
+
+export const WelcomeSuscription = () => {
+	const [showConfetti, setShowConfetti] = useState(false);
+	const stepper = useStepper();
+	const [isOpen, setIsOpen] = useState(true);
+	const { push } = useRouter();
+
+	useEffect(() => {
+		const confettiShown = localStorage.getItem("hasShownConfetti");
+		if (!confettiShown) {
+			setShowConfetti(true);
+			localStorage.setItem("hasShownConfetti", "true");
+		}
+	}, [showConfetti]);
+
+	return (
+		<Dialog open={isOpen}>
+			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-7xl min-h-[75vh]">
+				{showConfetti ?? "Flaso"}
+				<div className="flex justify-center items-center w-full">
+					{showConfetti && (
+						<ConfettiExplosion
+							duration={3000}
+							force={0.3}
+							particleSize={12}
+							particleCount={300}
+							className="z-[9999]"
+							zIndex={9999}
+							width={1500}
+						/>
+					)}
+				</div>
+
+				<DialogHeader>
+					<DialogTitle className="text-2xl text-center">
+						Welcome To Dokploy Cloud 🎉
+					</DialogTitle>
+					<DialogDescription className="text-center max-w-xl mx-auto">
+						Thank you for choosing Dokploy Cloud! 🚀 We're excited to have you
+						onboard. Before you dive in, you'll need to configure your remote
+						server to unlock all the features we offer.
+					</DialogDescription>
+				</DialogHeader>
+				<div className="grid gap-4">
+					<div className="flex justify-between">
+						<h2 className="text-lg font-semibold">Steps</h2>
+						<div className="flex items-center gap-2">
+							<span className="text-sm text-muted-foreground">
+								Step {stepper.current.index + 1} of {steps.length}
+							</span>
+							<div />
+						</div>
+					</div>
+					<Scoped>
+						<nav aria-label="Checkout Steps" className="group my-4">
+							<ol
+								className="flex items-center justify-between gap-2"
+								aria-orientation="horizontal"
+							>
+								{stepper.all.map((step, index, array) => (
+									<React.Fragment key={step.id}>
+										<li className="flex items-center gap-4 flex-shrink-0">
+											<Button
+												type="button"
+												role="tab"
+												variant={
+													index <= stepper.current.index ? "secondary" : "ghost"
+												}
+												aria-current={
+													stepper.current.id === step.id ? "step" : undefined
+												}
+												aria-posinset={index + 1}
+												aria-setsize={steps.length}
+												aria-selected={stepper.current.id === step.id}
+												className="flex size-10 items-center justify-center rounded-full border-2 border-border"
+												onClick={() => stepper.goTo(step.id)}
+											>
+												{index + 1}
+											</Button>
+											<span className="text-sm font-medium">{step.title}</span>
+										</li>
+										{index < array.length - 1 && (
+											<Separator
+												className={`flex-1 ${
+													index < stepper.current.index
+														? "bg-primary"
+														: "bg-muted"
+												}`}
+											/>
+										)}
+									</React.Fragment>
+								))}
+							</ol>
+						</nav>
+						{stepper.switch({
+							requisites: () => (
+								<div className="flex flex-col gap-2 border p-4 rounded-lg">
+									<span className="text-primary text-base font-bold">
+										Before getting started, please follow the steps below to
+										ensure the best experience:
+									</span>
+									<div>
+										<p className="text-primary text-sm font-medium">
+											Supported Distributions:
+										</p>
+										<ul className="list-inside list-disc pl-4 text-sm text-muted-foreground  mt-4">
+											<li>Ubuntu 24.04 LTS</li>
+											<li>Ubuntu 23.10</li>
+											<li>Ubuntu 22.04 LTS</li>
+											<li>Ubuntu 20.04 LTS</li>
+											<li>Ubuntu 18.04 LTS</li>
+											<li>Debian 12</li>
+											<li>Debian 11</li>
+											<li>Debian 10</li>
+											<li>Fedora 40</li>
+											<li>CentOS 9</li>
+											<li>CentOS 8</li>
+										</ul>
+									</div>
+									<div>
+										<p className="text-primary text-sm font-medium">
+											You will need to purchase or rent a Virtual Private Server
+											(VPS) to proceed, we recommend to use one of these
+											providers since has been heavily tested.
+										</p>
+										<ul className="list-inside list-disc pl-4 text-sm text-muted-foreground mt-4">
+											<li>
+												<a
+													href="https://www.hostinger.com/vps-hosting?REFERRALCODE=1SIUMAURICI97"
+													className="text-link underline"
+												>
+													Hostinger - Get 20% Discount
+												</a>
+											</li>
+											<li>
+												<a
+													href="https://m.do.co/c/db24efd43f35"
+													className="text-link underline"
+												>
+													DigitalOcean - Get $200 Credits
+												</a>
+											</li>
+											<li>
+												<a
+													href="https://hetzner.cloud/?ref=vou4fhxJ1W2D"
+													className="text-link underline"
+												>
+													Hetzner - Get €20 Credits
+												</a>
+											</li>
+											<li>
+												<a
+													href="https://www.vultr.com/?ref=9679828"
+													className="text-link underline"
+												>
+													Vultr
+												</a>
+											</li>
+											<li>
+												<a
+													href="https://www.linode.com/es/pricing/#compute-shared"
+													className="text-link underline"
+												>
+													Linode
+												</a>
+											</li>
+										</ul>
+										<AlertBlock className="mt-4 px-4">
+											You are free to use whatever provider, but we recommend to
+											use one of the above, to avoid issues.
+										</AlertBlock>
+									</div>
+								</div>
+							),
+							"create-ssh-key": () => <CreateSSHKey />,
+							"connect-server": () => <CreateServer stepper={stepper} />,
+							setup: () => <Setup />,
+							verify: () => <Verify />,
+							complete: () => {
+								const features = [
+									{
+										title: "Scalable Deployments",
+										description:
+											"Deploy and scale your applications effortlessly to handle any workload.",
+										icon: <Database className="text-primary" />,
+									},
+									{
+										title: "Automated Backups",
+										description: "Protect your data with automatic backups",
+										icon: <Database className="text-primary" />,
+									},
+									{
+										title: "Open Source Templates",
+										description:
+											"Big list of common open source templates in one-click",
+										icon: <Puzzle className="text-primary" />,
+									},
+									{
+										title: "Custom Domains",
+										description:
+											"Link your own domains to your applications for a professional presence.",
+										icon: <Globe className="text-primary" />,
+									},
+									{
+										title: "CI/CD Integration",
+										description:
+											"Implement continuous integration and deployment workflows to streamline development.",
+										icon: <GitMerge className="text-primary" />,
+									},
+									{
+										title: "Database Management",
+										description:
+											"Efficiently manage your databases with intuitive tools.",
+										icon: <Database className="text-primary" />,
+									},
+									{
+										title: "Team Collaboration",
+										description:
+											"Collaborate with your team on shared projects with customizable permissions.",
+										icon: <Users className="text-primary" />,
+									},
+									{
+										title: "Multi-language Support",
+										description:
+											"Deploy applications in multiple programming languages to suit your needs.",
+										icon: <Code2 className="text-primary" />,
+									},
+									{
+										title: "API Access",
+										description:
+											"Integrate and manage your applications via robust and well-documented APIs.",
+										icon: <Plug className="text-primary" />,
+									},
+								];
+								return (
+									<div className="flex flex-col gap-6">
+										<div className="flex flex-col gap-2">
+											<h2 className="text-lg font-semibold">You're All Set!</h2>
+											<p className=" text-muted-foreground">
+												Did you know you can deploy any number of applications
+												that your server can handle?
+											</p>
+											<p className="text-muted-foreground">
+												Here are some of the things you can do with Dokploy
+												Cloud:
+											</p>
+										</div>
+
+										<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+											{features.map((feature, index) => (
+												<div
+													key={index}
+													className="flex flex-col items-start p-4 bg-card rounded-lg shadow-md hover:shadow-lg transition-shadow"
+												>
+													<div className="text-3xl mb-2">{feature.icon}</div>
+													<h3 className="text-lg font-medium mb-1">
+														{feature.title}
+													</h3>
+													<p className="text-sm text-muted-foreground">
+														{feature.description}
+													</p>
+												</div>
+											))}
+										</div>
+
+										<div className="flex flex-col gap-2 mt-4">
+											<span className="text-base text-primary">
+												Need Help? We are here to help you.
+											</span>
+											<span className="text-sm text-muted-foreground">
+												Join to our Discord server and we will help you.
+											</span>
+											<div className="flex flex-row gap-4">
+												<Button className="rounded-full bg-[#5965F2] hover:bg-[#4A55E0] w-fit">
+													<Link
+														href="https://discord.gg/2tBnJ3jDJc"
+														aria-label="Dokploy on GitHub"
+														target="_blank"
+														className="flex flex-row items-center gap-2 text-white"
+													>
+														<svg
+															role="img"
+															className="h-6 w-6 fill-white"
+															viewBox="0 0 24 24"
+															xmlns="http://www.w3.org/2000/svg"
+														>
+															<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
+														</svg>
+														Join Discord
+													</Link>
+												</Button>
+												<Button className="rounded-full  w-fit">
+													<Link
+														href="https://github.com/Dokploy/dokploy"
+														aria-label="Dokploy on GitHub"
+														target="_blank"
+														className="flex flex-row items-center gap-2 "
+													>
+														<GithubIcon />
+														Github
+													</Link>
+												</Button>
+
+												<Button
+													className="rounded-full  w-fit"
+													variant="outline"
+												>
+													<Link
+														href="https://docs.dokploy.com/docs/core"
+														aria-label="Dokploy Docs"
+														target="_blank"
+														className="flex flex-row items-center gap-2 "
+													>
+														<BookIcon size={16} />
+														Docs
+													</Link>
+												</Button>
+											</div>
+										</div>
+									</div>
+								);
+							},
+						})}
+					</Scoped>
+				</div>
+				<DialogFooter>
+					<div className="flex items-center justify-between w-full">
+						{!stepper.isLast && (
+							<Button
+								variant="secondary"
+								onClick={() => {
+									setIsOpen(false);
+									push("/dashboard/settings/servers");
+								}}
+							>
+								Skip for now
+							</Button>
+						)}
+
+						<div className="flex items-center gap-2 w-full justify-end">
+							<Button
+								onClick={stepper.prev}
+								disabled={stepper.isFirst}
+								variant="secondary"
+							>
+								Back
+							</Button>
+							<Button
+								onClick={() => {
+									if (stepper.isLast) {
+										setIsOpen(false);
+										push("/dashboard/projects");
+									} else {
+										stepper.next();
+									}
+								}}
+							>
+								{stepper.isLast ? "Complete" : "Next"}
+							</Button>
+						</div>
+					</div>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+};
--- a/apps/dokploy/components/dashboard/settings/web-server/show-modal-logs.tsx
+++ b/apps/dokploy/components/dashboard/settings/web-server/show-modal-logs.tsx
@@ -91,11 +91,7 @@ export const ShowModalLogs = ({ appName, children, serverId }: Props) => {
 							</SelectGroup>
 						</SelectContent>
 					</Select>
-					<DockerLogsId
-						id="terminal"
-						containerId={containerId || ""}
-						serverId={serverId}
-					/>
+					<DockerLogsId containerId={containerId || ""} serverId={serverId} />
 				</div>
 			</DialogContent>
 		</Dialog>
--- a/apps/dokploy/components/dashboard/settings/web-server/terminal.tsx
+++ b/apps/dokploy/components/dashboard/settings/web-server/terminal.tsx
@@ -20,13 +20,11 @@ export const Terminal: React.FC<Props> = ({ id, serverId }) => {
 		}
 		const term = new XTerm({
 			cursorBlink: true,
-			cols: 80,
-			rows: 30,
 			lineHeight: 1.4,
 			convertEol: true,
 			theme: {
 				cursor: "transparent",
-				background: "#19191A",
+				background: "transparent",
 			},
 		});
 		const addonFit = new FitAddon();
@@ -40,6 +38,7 @@ export const Terminal: React.FC<Props> = ({ id, serverId }) => {

 		// @ts-ignore
 		term.open(termRef.current);
+		// @ts-ignore
 		term.loadAddon(addonFit);
 		term.loadAddon(addonAttach);
 		addonFit.fit();
@@ -50,7 +49,7 @@ export const Terminal: React.FC<Props> = ({ id, serverId }) => {

 	return (
 		<div className="flex flex-col gap-4">
-			<div className="w-full h-full bg-input rounded-lg p-2 ">
+			<div className="w-full h-full bg-transparent border rounded-lg p-2 ">
 				<div id={id} ref={termRef} className="rounded-xl" />
 			</div>
 		</div>
--- a/apps/dokploy/components/layouts/settings-layout.tsx
+++ b/apps/dokploy/components/layouts/settings-layout.tsx
@@ -77,7 +77,7 @@ export const SettingsLayout = ({ children }: Props) => {
 									{
 										title: "Registry",
 										label: "",
-										icon: ListMusic,
+										icon: GalleryVerticalEnd,
 										href: "/dashboard/settings/registry",
 									},

@@ -150,6 +150,7 @@ import {
 	BoxesIcon,
 	CreditCardIcon,
 	Database,
+	GalleryVerticalEnd,
 	GitBranch,
 	KeyIcon,
 	KeyRound,
--- a/apps/dokploy/components/shared/code-editor.tsx
+++ b/apps/dokploy/components/shared/code-editor.tsx
@@ -2,7 +2,9 @@ import { cn } from "@/lib/utils";
 import { json } from "@codemirror/lang-json";
 import { yaml } from "@codemirror/lang-yaml";
 import { StreamLanguage } from "@codemirror/language";
+
 import { properties } from "@codemirror/legacy-modes/mode/properties";
+import { shell } from "@codemirror/legacy-modes/mode/shell";
 import { EditorView } from "@codemirror/view";
 import { githubDark, githubLight } from "@uiw/codemirror-theme-github";
 import CodeMirror, { type ReactCodeMirrorProps } from "@uiw/react-codemirror";
@@ -10,7 +12,7 @@ import { useTheme } from "next-themes";
 interface Props extends ReactCodeMirrorProps {
 	wrapperClassName?: string;
 	disabled?: boolean;
-	language?: "yaml" | "json" | "properties";
+	language?: "yaml" | "json" | "properties" | "shell";
 	lineWrapping?: boolean;
 	lineNumbers?: boolean;
 }
@@ -39,7 +41,9 @@ export const CodeEditor = ({
 						? yaml()
 						: language === "json"
 							? json()
-							: StreamLanguage.define(properties),
+							: language === "shell"
+								? StreamLanguage.define(shell)
+								: StreamLanguage.define(properties),
 					props.lineWrapping ? EditorView.lineWrapping : [],
 				]}
 				{...props}
--- a/apps/dokploy/components/ui/badge.tsx
+++ b/apps/dokploy/components/ui/badge.tsx
@@ -14,6 +14,16 @@ const badgeVariants = cva(
 					"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
 				destructive:
 					"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+				red: "border-transparent select-none items-center whitespace-nowrap font-medium bg-red-500/15 text-destructive text-xs h-4 px-1 py-1 rounded-md",
+				yellow:
+					"border-transparent select-none items-center whitespace-nowrap font-medium bg-yellow-500/15 text-yellow-500 text-xs h-4 px-1 py-1 rounded-md",
+				orange:
+					"border-transparent select-none items-center whitespace-nowrap font-medium bg-orange-500/15 text-orange-500 text-xs h-4 px-1 py-1 rounded-md",
+				green:
+					"border-transparent select-none items-center whitespace-nowrap font-medium bg-emerald-500/15 text-emerald-500 text-xs h-4 px-1 py-1 rounded-md",
+				blue: "border-transparent select-none items-center whitespace-nowrap font-medium bg-blue-500/15 text-blue-500 text-xs h-4 px-1 py-1 rounded-md",
+				blank:
+					"border-transparent select-none items-center whitespace-nowrap font-medium dark:bg-white/15 bg-black/15 text-foreground text-xs h-4 px-1 py-1 rounded-md",
 				outline: "text-foreground",
 			},
 		},
--- a/apps/dokploy/components/ui/tooltip.tsx
+++ b/apps/dokploy/components/ui/tooltip.tsx
@@ -9,6 +9,8 @@ const Tooltip = TooltipPrimitive.Root;

 const TooltipTrigger = TooltipPrimitive.Trigger;

+const TooltipPortal = TooltipPrimitive.Portal;
+
 const TooltipContent = React.forwardRef<
 	React.ElementRef<typeof TooltipPrimitive.Content>,
 	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
@@ -25,4 +27,10 @@ const TooltipContent = React.forwardRef<
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;

-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+export {
+	Tooltip,
+	TooltipTrigger,
+	TooltipContent,
+	TooltipProvider,
+	TooltipPortal,
+};
--- a/apps/dokploy/drizzle/0051_hard_gorgon.sql
+++ b/apps/dokploy/drizzle/0051_hard_gorgon.sql
@@ -0,0 +1 @@
+ALTER TABLE "server" ADD COLUMN "command" text DEFAULT '' NOT NULL;
--- a/apps/dokploy/drizzle/meta/0051_snapshot.json
+++ b/apps/dokploy/drizzle/meta/0051_snapshot.json
--- a/apps/dokploy/drizzle/meta/_journal.json
+++ b/apps/dokploy/drizzle/meta/_journal.json
@@ -358,6 +358,13 @@
      "when": 1733889104203,
      "tag": "0050_nappy_wrecker",
      "breakpoints": true
+    },
+    {
+      "idx": 51,
+      "version": "6",
+      "when": 1734241482851,
+      "tag": "0051_hard_gorgon",
+      "breakpoints": true
    }
  ]
 }
--- a/apps/dokploy/package.json
+++ b/apps/dokploy/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "dokploy",
-	"version": "v0.14.1",
+	"version": "v0.15.0",
 	"private": true,
 	"license": "Apache-2.0",
 	"type": "module",
@@ -35,6 +35,8 @@
 		"test": "vitest --config __test__/vitest.config.ts"
 	},
 	"dependencies": {
+		"react-confetti-explosion":"2.1.2",
+		"@stepperize/react": "4.0.1",
 		"@codemirror/lang-json": "^6.0.1",
 		"@codemirror/lang-yaml": "^6.1.1",
 		"@codemirror/language": "^6.10.1",
--- a/apps/dokploy/pages/_app.tsx
+++ b/apps/dokploy/pages/_app.tsx
@@ -1,5 +1,6 @@
 import "@/styles/globals.css";

+import { SearchCommand } from "@/components/dashboard/search-command";
 import { Toaster } from "@/components/ui/sonner";
 import { Languages } from "@/lib/languages";
 import { api } from "@/utils/api";
@@ -11,74 +12,66 @@ import { Inter } from "next/font/google";
 import Head from "next/head";
 import Script from "next/script";
 import type { ReactElement, ReactNode } from "react";
-import { SearchCommand } from "@/components/dashboard/search-command";

 const inter = Inter({ subsets: ["latin"] });

 export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
-  getLayout?: (page: ReactElement) => ReactNode;
-  // session: Session | null;
-  theme?: string;
+	getLayout?: (page: ReactElement) => ReactNode;
+	// session: Session | null;
+	theme?: string;
 };

 type AppPropsWithLayout = AppProps & {
-  Component: NextPageWithLayout;
+	Component: NextPageWithLayout;
 };

 const MyApp = ({
-  Component,
-  pageProps: { ...pageProps },
+	Component,
+	pageProps: { ...pageProps },
 }: AppPropsWithLayout) => {
-  const getLayout = Component.getLayout ?? ((page) => page);
+	const getLayout = Component.getLayout ?? ((page) => page);

-  return (
-    <>
-      <style jsx global>{`
+	return (
+		<>
+			<style jsx global>{`
        :root {
          --font-inter: ${inter.style.fontFamily};
        }
      `}</style>
-      <Head>
-        <title>Dokploy</title>
-      </Head>
-      {process.env.NEXT_PUBLIC_UMAMI_HOST &&
-        process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID && (
-          <Script
-            src={process.env.NEXT_PUBLIC_UMAMI_HOST}
-            data-website-id={process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID}
-          />
-        )}
+			<Head>
+				<title>Dokploy</title>
+			</Head>
+			{process.env.NEXT_PUBLIC_UMAMI_HOST &&
+				process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID && (
+					<Script
+						src={process.env.NEXT_PUBLIC_UMAMI_HOST}
+						data-website-id={process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID}
+					/>
+				)}

-      <ThemeProvider
-        attribute="class"
-        defaultTheme="system"
-        enableSystem
-        disableTransitionOnChange
-        forcedTheme={Component.theme}
-      >
-        <Toaster richColors />
-        <SearchCommand />
-        {getLayout(<Component {...pageProps} />)}
-      </ThemeProvider>
-    </>
-  );
+			<ThemeProvider
+				attribute="class"
+				defaultTheme="system"
+				enableSystem
+				disableTransitionOnChange
+				forcedTheme={Component.theme}
+			>
+				<Toaster richColors />
+				<SearchCommand />
+				{getLayout(<Component {...pageProps} />)}
+			</ThemeProvider>
+		</>
+	);
 };

 export default api.withTRPC(
-  appWithTranslation(
-    MyApp,
-    // keep this in sync with next-i18next.config.js
-    // if you want to know why don't just import the config file, this because next-i18next.config.js must be a CJS, but the rest of the code is ESM.
-    // Add the config here is due to the issue: https://github.com/i18next/next-i18next/issues/2259
-    // if one day every page is translated, we can safely remove this config.
-    {
-      i18n: {
-        defaultLocale: "en",
-        locales: Object.values(Languages),
-        localeDetection: false,
-      },
-      fallbackLng: "en",
-      keySeparator: false,
-    }
-  )
+	appWithTranslation(MyApp, {
+		i18n: {
+			defaultLocale: "en",
+			locales: Object.values(Languages),
+			localeDetection: false,
+		},
+		fallbackLng: "en",
+		keySeparator: false,
+	}),
 );
--- a/apps/dokploy/pages/dashboard/project/[projectId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId].tsx
@@ -191,7 +191,7 @@ const Project = (
 					</BreadcrumbItem>
 				</Breadcrumb>
 				<Head>
-					<title>Project {data?.name} | Dokploy</title>
+					<title>Project: {data?.name} | Dokploy</title>
 				</Head>
 				<header className="mb-6 flex w-full items-center justify-between flex-wrap gap-2">
 					<div className="flex flex-col gap-2">
--- a/apps/dokploy/pages/dashboard/project/[projectId]/services/application/[applicationId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/services/application/[applicationId].tsx
@@ -111,7 +111,7 @@ const Service = (
 				</Breadcrumb>
 				<Head>
 					<title>
-						Project {data?.project.name} | {data?.name} | Dokploy
+						Application: {data?.name} - {data?.project.name} | Dokploy
 					</title>
 				</Head>
 				<header className="mb-6 flex w-full items-center justify-between max-sm:flex-wrap gap-4">
--- a/apps/dokploy/pages/dashboard/project/[projectId]/services/compose/[composeId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/services/compose/[composeId].tsx
@@ -104,7 +104,7 @@ const Service = (
 				</Breadcrumb>
 				<Head>
 					<title>
-						Project {data?.project.name} | {data?.name} | Dokploy
+						Compose: {data?.name} - {data?.project.name} | Dokploy
 					</title>
 				</Head>
 				<header className="mb-6 flex w-full items-center justify-between max-sm:flex-wrap gap-4">
--- a/apps/dokploy/pages/dashboard/project/[projectId]/services/mariadb/[mariadbId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/services/mariadb/[mariadbId].tsx
@@ -85,7 +85,7 @@ const Mariadb = (
 				</Breadcrumb>
 				<Head>
 					<title>
-						Project {data?.project.name} | {data?.name} | Dokploy
+						Database: {data?.name} - {data?.project.name} | Dokploy
 					</title>
 				</Head>
 				<header className="mb-6 flex w-full items-center justify-between max-sm:flex-wrap gap-4">
--- a/apps/dokploy/pages/dashboard/project/[projectId]/services/mongo/[mongoId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/services/mongo/[mongoId].tsx
@@ -86,7 +86,7 @@ const Mongo = (
 				</Breadcrumb>
 				<Head>
 					<title>
-						Project {data?.project.name} | {data?.name} | Dokploy
+						Database: {data?.name} - {data?.project.name} | Dokploy
 					</title>
 				</Head>
 				<header className="mb-6 flex w-full items-center justify-between max-sm:flex-wrap gap-4">
--- a/apps/dokploy/pages/dashboard/project/[projectId]/services/mysql/[mysqlId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/services/mysql/[mysqlId].tsx
@@ -84,7 +84,7 @@ const MySql = (
 				</Breadcrumb>
 				<Head>
 					<title>
-						Project {data?.project.name} | {data?.name} | Dokploy
+						Database: {data?.name} - {data?.project.name} | Dokploy
 					</title>
 				</Head>
 				<header className="mb-6 flex w-full items-center justify-between max-sm:flex-wrap gap-4">
--- a/apps/dokploy/pages/dashboard/project/[projectId]/services/postgres/[postgresId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/services/postgres/[postgresId].tsx
@@ -85,7 +85,7 @@ const Postgresql = (
 				</Breadcrumb>
 				<Head>
 					<title>
-						Project {data?.project.name} | {data?.name} | Dokploy
+						Database: {data?.name} - {data?.project.name} | Dokploy
 					</title>
 				</Head>
 				<header className="mb-6 flex w-full items-center justify-between max-sm:flex-wrap gap-4">
--- a/apps/dokploy/pages/dashboard/project/[projectId]/services/redis/[redisId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/services/redis/[redisId].tsx
@@ -84,7 +84,7 @@ const Redis = (
 				</Breadcrumb>
 				<Head>
 					<title>
-						Project {data?.project.name} | {data?.name} | Dokploy
+						Database: {data?.name} - {data?.project.name} | Dokploy
 					</title>
 				</Head>
 				<header className="mb-6 flex w-full items-center justify-between max-sm:flex-wrap gap-4">
--- a/apps/dokploy/pages/dashboard/settings/profile.tsx
+++ b/apps/dokploy/pages/dashboard/settings/profile.tsx
@@ -1,5 +1,6 @@
 import { GenerateToken } from "@/components/dashboard/settings/profile/generate-token";
 import { ProfileForm } from "@/components/dashboard/settings/profile/profile-form";
+import { RemoveSelfAccount } from "@/components/dashboard/settings/profile/remove-self-account";
 import { DashboardLayout } from "@/components/layouts/dashboard-layout";
 import { SettingsLayout } from "@/components/layouts/settings-layout";
 import { appRouter } from "@/server/api/root";
@@ -21,10 +22,14 @@ const Page = () => {
 			enabled: !!data?.id && data?.rol === "user",
 		},
 	);
+
+	const { data: isCloud } = api.settings.isCloud.useQuery();
 	return (
 		<div className="flex flex-col gap-4 w-full">
 			<ProfileForm />
 			{(user?.canAccessToAPI || data?.rol === "admin") && <GenerateToken />}
+
+			{isCloud && <RemoveSelfAccount />}
 		</div>
 	);
 };
--- a/apps/dokploy/pages/register.tsx
+++ b/apps/dokploy/pages/register.tsx
@@ -134,7 +134,7 @@ const Register = ({ isCloud }: Props) => {
 								</span>
 							</div>
 						)}
-						{data && (
+						{data?.type === "cloud" && (
 							<AlertBlock type="success" className="mx-4 my-2">
 								<span>
 									Registration succesfuly, Please check your inbox or spam
--- a/apps/dokploy/server/api/routers/auth.ts
+++ b/apps/dokploy/server/api/routers/auth.ts
@@ -20,6 +20,8 @@ import {
 	getUserByToken,
 	lucia,
 	luciaToken,
+	removeAdminByAuthId,
+	removeUserByAuthId,
 	sendDiscordNotification,
 	sendEmailNotification,
 	updateAuthById,
@@ -59,14 +61,20 @@ export const authRouter = createTRPCRouter({
 				if (IS_CLOUD) {
 					await sendDiscordNotificationWelcome(newAdmin);
 					await sendVerificationEmail(newAdmin.id);
-					return true;
+					return {
+						status: "success",
+						type: "cloud",
+					};
 				}
 				const session = await lucia.createSession(newAdmin.id || "", {});
 				ctx.res.appendHeader(
 					"Set-Cookie",
 					lucia.createSessionCookie(session.id).serialize(),
 				);
-				return true;
+				return {
+					status: "success",
+					type: "selfhosted",
+				};
 			} catch (error) {
 				throw new TRPCError({
 					code: "BAD_REQUEST",
@@ -178,6 +186,20 @@ export const authRouter = createTRPCRouter({
 	update: protectedProcedure
 		.input(apiUpdateAuth)
 		.mutation(async ({ ctx, input }) => {
+			const currentAuth = await findAuthByEmail(ctx.user.email);
+
+			if (input.password) {
+				const correctPassword = bcrypt.compareSync(
+					input.password,
+					currentAuth?.password || "",
+				);
+				if (!correctPassword) {
+					throw new TRPCError({
+						code: "BAD_REQUEST",
+						message: "Current password is incorrect",
+					});
+				}
+			}
 			const auth = await updateAuthById(ctx.user.authId, {
 				...(input.email && { email: input.email.toLowerCase() }),
 				...(input.password && {
@@ -188,6 +210,47 @@ export const authRouter = createTRPCRouter({

 			return auth;
 		}),
+	removeSelfAccount: protectedProcedure
+		.input(
+			z.object({
+				password: z.string().min(1),
+			}),
+		)
+		.mutation(async ({ ctx, input }) => {
+			if (!IS_CLOUD) {
+				throw new TRPCError({
+					code: "NOT_FOUND",
+					message: "This feature is only available in the cloud version",
+				});
+			}
+			const currentAuth = await findAuthByEmail(ctx.user.email);
+
+			const correctPassword = bcrypt.compareSync(
+				input.password,
+				currentAuth?.password || "",
+			);
+
+			if (!correctPassword) {
+				throw new TRPCError({
+					code: "BAD_REQUEST",
+					message: "Password is incorrect",
+				});
+			}
+			const { req, res } = ctx;
+			const { session } = await validateRequest(req, res);
+			if (!session) return false;
+
+			await lucia.invalidateSession(session.id);
+			res.setHeader("Set-Cookie", lucia.createBlankSessionCookie().serialize());
+
+			if (ctx.user.rol === "admin") {
+				await removeAdminByAuthId(ctx.user.authId);
+			} else {
+				await removeUserByAuthId(ctx.user.authId);
+			}
+
+			return true;
+		}),

 	generateToken: protectedProcedure.mutation(async ({ ctx, input }) => {
 		const auth = await findAuthById(ctx.user.authId);
@@ -440,7 +503,7 @@ export const sendDiscordNotificationWelcome = async (newAdmin: Auth) => {
 			webhookUrl: process.env.DISCORD_WEBHOOK_URL || "",
 		},
 		{
-			title: "✅ New User Registered",
+			title: " New User Registered",
 			color: 0x00ff00,
 			fields: [
 				{
--- a/apps/dokploy/server/api/routers/server.ts
+++ b/apps/dokploy/server/api/routers/server.ts
@@ -18,6 +18,7 @@ import {
 import {
 	IS_CLOUD,
 	createServer,
+	defaultCommand,
 	deleteServer,
 	findAdminById,
 	findServerById,
@@ -25,6 +26,7 @@ import {
 	getPublicIpWithFallback,
 	haveActiveServices,
 	removeDeploymentsByServerId,
+	serverAudit,
 	serverSetup,
 	serverValidate,
 	updateServerById,
@@ -69,6 +71,11 @@ export const serverRouter = createTRPCRouter({

 			return server;
 		}),
+	getDefaultCommand: protectedProcedure
+		.input(apiFindOneServer)
+		.query(async ({ input, ctx }) => {
+			return defaultCommand();
+		}),
 	all: protectedProcedure.query(async ({ ctx }) => {
 		const result = await db
 			.select({
@@ -160,6 +167,57 @@ export const serverRouter = createTRPCRouter({
 				});
 			}
 		}),
+
+	security: protectedProcedure
+		.input(apiFindOneServer)
+		.query(async ({ input, ctx }) => {
+			try {
+				const server = await findServerById(input.serverId);
+				if (server.adminId !== ctx.user.adminId) {
+					throw new TRPCError({
+						code: "UNAUTHORIZED",
+						message: "You are not authorized to validate this server",
+					});
+				}
+				const response = await serverAudit(input.serverId);
+				return response as unknown as {
+					ufw: {
+						installed: boolean;
+						active: boolean;
+						defaultIncoming: string;
+					};
+					ssh: {
+						enabled: boolean;
+						keyAuth: boolean;
+						permitRootLogin: string;
+						passwordAuth: string;
+						usePam: string;
+					};
+					nonRootUser: {
+						hasValidSudoUser: boolean;
+					};
+					unattendedUpgrades: {
+						installed: boolean;
+						active: boolean;
+						updateEnabled: number;
+						upgradeEnabled: number;
+					};
+					fail2ban: {
+						installed: boolean;
+						enabled: boolean;
+						active: boolean;
+						sshEnabled: string;
+						sshMode: string;
+					};
+				};
+			} catch (error) {
+				throw new TRPCError({
+					code: "BAD_REQUEST",
+					message: error instanceof Error ? error?.message : `Error: ${error}`,
+					cause: error as Error,
+				});
+			}
+		}),
 	remove: protectedProcedure
 		.input(apiRemoveServer)
 		.mutation(async ({ input, ctx }) => {
--- a/apps/dokploy/server/api/routers/ssh-key.ts
+++ b/apps/dokploy/server/api/routers/ssh-key.ts
@@ -17,7 +17,7 @@ import {
 	updateSSHKeyById,
 } from "@dokploy/server";
 import { TRPCError } from "@trpc/server";
-import { eq } from "drizzle-orm";
+import { desc, eq } from "drizzle-orm";

 export const sshRouter = createTRPCRouter({
 	create: protectedProcedure
@@ -71,6 +71,7 @@ export const sshRouter = createTRPCRouter({
 	all: protectedProcedure.query(async ({ ctx }) => {
 		return await db.query.sshKeys.findMany({
 			...(IS_CLOUD && { where: eq(sshKeys.adminId, ctx.user.adminId) }),
+			orderBy: desc(sshKeys.createdAt),
 		});
 		// TODO: Remove this line when the cloud version is ready
 	}),
--- a/apps/dokploy/server/api/routers/stripe.ts
+++ b/apps/dokploy/server/api/routers/stripe.ts
@@ -81,7 +81,7 @@ export const stripeRouter = createTRPCRouter({
 					adminId: admin.adminId,
 				},
 				allow_promotion_codes: true,
-				success_url: `${WEBSITE_URL}/dashboard/settings/billing`,
+				success_url: `${WEBSITE_URL}/dashboard/settings/servers?success=true`,
 				cancel_url: `${WEBSITE_URL}/dashboard/settings/billing`,
 			});

--- a/apps/dokploy/server/wss/docker-container-logs.ts
+++ b/apps/dokploy/server/wss/docker-container-logs.ts
@@ -31,6 +31,8 @@ export const setupDockerContainerLogsWebSocketServer = (
 		const url = new URL(req.url || "", `http://${req.headers.host}`);
 		const containerId = url.searchParams.get("containerId");
 		const tail = url.searchParams.get("tail");
+		const search = url.searchParams.get("search");
+		const since = url.searchParams.get("since");
 		const serverId = url.searchParams.get("serverId");
 		const { user, session } = await validateWebSocketRequest(req);

@@ -51,9 +53,13 @@ export const setupDockerContainerLogsWebSocketServer = (
 				const client = new Client();
 				client
 					.once("ready", () => {
-						const command = `
-						bash -c "docker container logs --tail ${tail} --follow ${containerId}"
-					`;
+						const baseCommand = `docker container logs --timestamps --tail ${tail} ${
+							since === "all" ? "" : `--since ${since}`
+						} --follow ${containerId}`;
+						const escapedSearch = search ? search.replace(/'/g, "'\\''") : "";
+						const command = search
+							? `${baseCommand} 2>&1 | grep --line-buffered -iF "${escapedSearch}"`
+							: baseCommand;
 						client.exec(command, (err, stream) => {
 							if (err) {
 								console.error("Execution error:", err);
@@ -91,21 +97,20 @@ export const setupDockerContainerLogsWebSocketServer = (
 				});
 			} else {
 				const shell = getShell();
-				const ptyProcess = spawn(
-					shell,
-					[
-						"-c",
-						`docker container logs --tail ${tail} --follow ${containerId}`,
-					],
-					{
-						name: "xterm-256color",
-						cwd: process.env.HOME,
-						env: process.env,
-						encoding: "utf8",
-						cols: 80,
-						rows: 30,
-					},
-				);
+				const baseCommand = `docker container logs --timestamps --tail ${tail} ${
+					since === "all" ? "" : `--since ${since}`
+				} --follow ${containerId}`;
+				const command = search
+					? `${baseCommand} 2>&1 | grep -iF '${search}'`
+					: baseCommand;
+				const ptyProcess = spawn(shell, ["-c", command], {
+					name: "xterm-256color",
+					cwd: process.env.HOME,
+					env: process.env,
+					encoding: "utf8",
+					cols: 80,
+					rows: 30,
+				});

 				ptyProcess.onData((data) => {
 					ws.send(data);
--- a/apps/dokploy/server/wss/docker-container-terminal.ts
+++ b/apps/dokploy/server/wss/docker-container-terminal.ts
@@ -102,21 +102,13 @@ export const setupDockerContainerTerminalWebSocketServer = (
 						port: server.port,
 						username: server.username,
 						privateKey: server.sshKey?.privateKey,
-						timeout: 99999,
 					});
 			} else {
 				const shell = getShell();
 				const ptyProcess = spawn(
 					shell,
 					["-c", `docker exec -it ${containerId} ${activeWay}`],
-					{
-						name: "xterm-256color",
-						cwd: process.env.HOME,
-						env: process.env,
-						encoding: "utf8",
-						cols: 80,
-						rows: 30,
-					},
+					{},
 				);

 				ptyProcess.onData((data) => {
--- a/apps/dokploy/server/wss/terminal.ts
+++ b/apps/dokploy/server/wss/terminal.ts
@@ -70,53 +70,44 @@ export const setupTerminalWebSocketServer = (
 		let stderr = "";
 		conn
 			.once("ready", () => {
-				conn.shell(
-					{
-						term: "terminal",
-						cols: 80,
-						rows: 30,
-						height: 30,
-						width: 80,
-					},
-					(err, stream) => {
-						if (err) throw err;
+				conn.shell({}, (err, stream) => {
+					if (err) throw err;

-						stream
-							.on("close", (code: number, signal: string) => {
-								ws.send(`\nContainer closed with code: ${code}\n`);
-								conn.end();
-							})
-							.on("data", (data: string) => {
-								stdout += data.toString();
-								ws.send(data.toString());
-							})
-							.stderr.on("data", (data) => {
-								stderr += data.toString();
-								ws.send(data.toString());
-								console.error("Error: ", data.toString());
-							});
+					stream
+						.on("close", (code: number, signal: string) => {
+							ws.send(`\nContainer closed with code: ${code}\n`);
+							conn.end();
+						})
+						.on("data", (data: string) => {
+							stdout += data.toString();
+							ws.send(data.toString());
+						})
+						.stderr.on("data", (data) => {
+							stderr += data.toString();
+							ws.send(data.toString());
+							console.error("Error: ", data.toString());
+						});

-						ws.on("message", (message) => {
-							try {
-								let command: string | Buffer[] | Buffer | ArrayBuffer;
-								if (Buffer.isBuffer(message)) {
-									command = message.toString("utf8");
-								} else {
-									command = message;
-								}
-								stream.write(command.toString());
-							} catch (error) {
-								// @ts-ignore
-								const errorMessage = error?.message as unknown as string;
-								ws.send(errorMessage);
+					ws.on("message", (message) => {
+						try {
+							let command: string | Buffer[] | Buffer | ArrayBuffer;
+							if (Buffer.isBuffer(message)) {
+								command = message.toString("utf8");
+							} else {
+								command = message;
 							}
-						});
+							stream.write(command.toString());
+						} catch (error) {
+							// @ts-ignore
+							const errorMessage = error?.message as unknown as string;
+							ws.send(errorMessage);
+						}
+					});

-						ws.on("close", () => {
-							stream.end();
-						});
-					},
-				);
+					ws.on("close", () => {
+						stream.end();
+					});
+				});
 			})
 			.on("error", (err) => {
 				if (err.level === "client-authentication") {
@@ -133,7 +124,6 @@ export const setupTerminalWebSocketServer = (
 				port: server.port,
 				username: server.username,
 				privateKey: server.sshKey?.privateKey,
-				timeout: 99999,
 			});
 	});
 };
--- a/apps/dokploy/styles/globals.css
+++ b/apps/dokploy/styles/globals.css
@@ -173,3 +173,29 @@
 		padding-top: 1rem !important;
 	}
 }
+
+/* Docker Logs Scrollbar */
+@layer utilities {
+	.custom-logs-scrollbar {
+		scrollbar-width: thin;
+		scrollbar-color: hsl(var(--muted-foreground)) transparent;
+	}
+
+	.custom-logs-scrollbar::-webkit-scrollbar {
+		width: 8px;
+		height: 8px;
+	}
+
+	.custom-logs-scrollbar::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	.custom-logs-scrollbar::-webkit-scrollbar-thumb {
+		background-color: hsl(var(--muted-foreground) / 0.3);
+		border-radius: 20px;
+	}
+
+	.custom-logs-scrollbar::-webkit-scrollbar-thumb:hover {
+		background-color: hsl(var(--muted-foreground) / 0.5);
+	}
+}
				`@@ -0,0 +1 @@`
				`ALTER TABLE "server" ADD COLUMN "command" text DEFAULT '' NOT NULL;`