diff --git a/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx b/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx
index 8c15e2cd..39bff46a 100644
--- a/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx
+++ b/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx
@@ -6,6 +6,8 @@ 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";
 
 interface Props {
 	logPath: string | null;
@@ -15,6 +17,7 @@ interface Props {
 }
 export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 	const [data, setData] = useState("");
+	const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
 	const endOfLogsRef = useRef<HTMLDivElement>(null);
 	const wsRef = useRef<WebSocket | null>(null); // Ref to hold WebSocket instance
 
@@ -52,6 +55,11 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 		endOfLogsRef.current?.scrollIntoView({ behavior: "smooth" });
 	};
 
+	useEffect(() => {
+		const logs = parseLogs(data);
+		setFilteredLogs(logs);
+	}, [data]);
+
 	useEffect(() => {
 		scrollToBottom();
 	}, [data]);
@@ -81,12 +89,15 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 				</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>
+							{filteredLogs.map((log: LogLine, index: number) => (
+								<TerminalLine
+									key={index}
+									log={log}
+								/>
+							)) || "Loading..."}
 						<div ref={endOfLogsRef} />
-					</code>
+					</div>
 				</div>
 			</DialogContent>
 		</Dialog>
diff --git a/apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx b/apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx
index 14f3bcd7..4439a984 100644
--- 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,8 @@ 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";
 
 interface Props {
 	logPath: string | null;
@@ -21,8 +23,8 @@ export const ShowDeploymentCompose = ({
 }: 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
-
 	useEffect(() => {
 		if (!open || !logPath) return;
 
@@ -58,6 +60,13 @@ export const ShowDeploymentCompose = ({
 		endOfLogsRef.current?.scrollIntoView({ behavior: "smooth" });
 	};
 
+	useEffect(() => {
+		const logs = parseLogs(data);
+		console.log(data);
+		console.log(logs);
+		setFilteredLogs(logs);
+	}, [data]);
+
 	useEffect(() => {
 		scrollToBottom();
 	}, [data]);
@@ -87,12 +96,16 @@ export const ShowDeploymentCompose = ({
 				</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>
+						
+					{filteredLogs.map((log: LogLine, index: number) => (
+								<TerminalLine
+									key={index}
+									log={log}
+								/>
+							)) || "Loading..."}
 						<div ref={endOfLogsRef} />
-					</code>
+					</div>
 				</div>
 			</DialogContent>
 		</Dialog>