diff --git a/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-builds.tsx b/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-builds.tsx
index 4eb2107f6..bff6c9290 100644
--- a/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-builds.tsx
+++ b/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-builds.tsx
@@ -26,7 +26,7 @@ export const ShowPreviewBuilds = ({ deployments, serverId }: Props) => {
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
-				<Button variant="outline">View Builds</Button>
+				<Button className="sm:w-auto w-full" size="sm" variant="outline">View Builds</Button>
 			</DialogTrigger>
 			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-5xl">
 				<DialogHeader>
diff --git a/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx b/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx
index 45451e78f..898d412a0 100644
--- a/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx
+++ b/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx
@@ -1,212 +1,237 @@
-import { DateTooltip } from "@/components/shared/date-tooltip";
-import { StatusTooltip } from "@/components/shared/status-tooltip";
+import React from "react";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import { Switch } from "@/components/ui/switch";
-import { api } from "@/utils/api";
-import { Pencil, RocketIcon } from "lucide-react";
-import React, { useEffect, useState } from "react";
-import { toast } from "sonner";
-import { ShowDeployment } from "../deployments/show-deployment";
+  Clock,
+  GitBranch,
+  GitPullRequest,
+  Pencil,
+  RocketIcon,
+} from "lucide-react";
 import Link from "next/link";
 import { ShowModalLogs } from "../../settings/web-server/show-modal-logs";
 import { DialogAction } from "@/components/shared/dialog-action";
-import { AddPreviewDomain } from "./add-preview-domain";
-import { GithubIcon } from "@/components/icons/data-tools-icons";
-import { ShowPreviewSettings } from "./show-preview-settings";
+import { api } from "@/utils/api";
 import { ShowPreviewBuilds } from "./show-preview-builds";
+import { DateTooltip } from "@/components/shared/date-tooltip";
+import { toast } from "sonner";
+import { StatusTooltip } from "@/components/shared/status-tooltip";
+import { AddPreviewDomain } from "./add-preview-domain";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { ShowPreviewSettings } from "./show-preview-settings";
 
 interface Props {
-	applicationId: string;
+  applicationId: string;
 }
 
 export const ShowPreviewDeployments = ({ applicationId }: Props) => {
-	const [activeLog, setActiveLog] = useState<string | null>(null);
-	const { data } = api.application.one.useQuery({ applicationId });
+  const { data } = api.application.one.useQuery({ applicationId });
 
-	const { mutateAsync: deletePreviewDeployment, isLoading } =
-		api.previewDeployment.delete.useMutation();
-	const { data: previewDeployments, refetch: refetchPreviewDeployments } =
-		api.previewDeployment.all.useQuery(
-			{ applicationId },
-			{
-				enabled: !!applicationId,
-			},
-		);
-	// const [url, setUrl] = React.useState("");
-	// useEffect(() => {
-	// 	setUrl(document.location.origin);
-	// }, []);
+  const { mutateAsync: deletePreviewDeployment, isLoading } =
+    api.previewDeployment.delete.useMutation();
 
-	return (
-		<Card className="bg-background">
-			<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
-				<div className="flex flex-col gap-2">
-					<CardTitle className="text-xl">Preview Deployments</CardTitle>
-					<CardDescription>See all the preview deployments</CardDescription>
-				</div>
-				{data?.isPreviewDeploymentsActive && (
-					<ShowPreviewSettings applicationId={applicationId} />
-				)}
-			</CardHeader>
-			<CardContent className="flex flex-col gap-4">
-				{data?.isPreviewDeploymentsActive ? (
-					<>
-						<div className="flex flex-col gap-2 text-sm">
-							<span>
-								Preview deployments are a way to test your application before it
-								is deployed to production. It will create a new deployment for
-								each pull request you create.
-							</span>
-						</div>
-						{data?.previewDeployments?.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 preview deployments found
-								</span>
-							</div>
-						) : (
-							<div className="flex flex-col gap-4">
-								{previewDeployments?.map((previewDeployment) => {
-									const { deployments, domain } = previewDeployment;
+  const { data: previewDeployments, refetch: refetchPreviewDeployments } =
+    api.previewDeployment.all.useQuery(
+      { applicationId },
+      {
+        enabled: !!applicationId,
+      }
+    );
 
-									return (
-										<div
-											key={previewDeployment?.previewDeploymentId}
-											className="flex flex-col  justify-between rounded-lg border p-4 gap-2"
-										>
-											<div className="flex justify-between gap-2 max-sm:flex-wrap">
-												<div className="flex flex-col gap-2">
-													{deployments?.length === 0 ? (
-														<div>
-															<span className="text-sm text-muted-foreground">
-																No deployments found
-															</span>
-														</div>
-													) : (
-														<div className="flex items-center gap-2">
-															<span className="flex items-center gap-4 font-medium capitalize text-foreground">
-																{previewDeployment?.pullRequestTitle}
-															</span>
-															<StatusTooltip
-																status={previewDeployment.previewStatus}
-																className="size-2.5"
-															/>
-														</div>
-													)}
-													<div className="flex flex-col gap-1">
-														{previewDeployment?.pullRequestTitle && (
-															<div className="flex items-center gap-2">
-																<span className="break-all text-sm text-muted-foreground w-fit">
-																	Title: {previewDeployment?.pullRequestTitle}
-																</span>
-															</div>
-														)}
+  const handleDeletePreviewDeployment = async (previewDeploymentId: string) => {
+    deletePreviewDeployment({
+      previewDeploymentId: previewDeploymentId,
+    })
+      .then(() => {
+        refetchPreviewDeployments();
+        toast.success("Preview deployment deleted");
+      })
+      .catch((error) => {
+        toast.error(error.message);
+      });
+  };
 
-														{previewDeployment?.pullRequestURL && (
-															<div className="flex items-center gap-2">
-																<GithubIcon />
-																<Link
-																	target="_blank"
-																	href={previewDeployment?.pullRequestURL}
-																	className="break-all text-sm text-muted-foreground w-fit hover:underline hover:text-foreground"
-																>
-																	Pull Request URL
-																</Link>
-															</div>
-														)}
-													</div>
-													<div className="flex flex-col ">
-														<span>Domain </span>
-														<div className="flex flex-row items-center gap-4">
-															<Link
-																target="_blank"
-																href={`http://${domain?.host}`}
-																className="text-sm text-muted-foreground w-fit hover:underline hover:text-foreground"
-															>
-																{domain?.host}
-															</Link>
-															<AddPreviewDomain
-																previewDeploymentId={
-																	previewDeployment.previewDeploymentId
-																}
-																domainId={domain?.domainId}
-															>
-																<Button variant="outline" size="sm">
-																	<Pencil className="size-4 text-muted-foreground" />
-																</Button>
-															</AddPreviewDomain>
-														</div>
-													</div>
-												</div>
+  return (
+    <Card className="bg-background">
+      <CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
+        <div className="flex flex-col gap-2">
+          <CardTitle className="text-xl">Preview Deployments</CardTitle>
+          <CardDescription>See all the preview deployments</CardDescription>
+        </div>
+        {data?.isPreviewDeploymentsActive && (
+          <ShowPreviewSettings applicationId={applicationId} />
+        )}
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        {data?.isPreviewDeploymentsActive ? (
+          <>
+            <div className="flex flex-col gap-2 text-sm">
+              <span>
+                Preview deployments are a way to test your application before it
+                is deployed to production. It will create a new deployment for
+                each pull request you create.
+              </span>
+            </div>
+            {!previewDeployments?.length ? (
+              <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 preview deployments found
+                </span>
+              </div>
+            ) : (
+              <div className="flex flex-col gap-4">
+                {previewDeployments.map((previewDeployment) => (
+                  <div
+                    key={previewDeployment.previewDeploymentId}
+                    className="w-full border rounded-xl"
+                  >
+                    <div className="md:p-6 p-2 md:pb-3 flex flex-row items-center justify-between">
+                      <span className="text-lg font-bold">
+                        {previewDeployment.pullRequestTitle}
+                      </span>
+                      <Badge
+                        variant="outline"
+                        className="text-sm font-medium gap-x-2"
+                      >
+                        <StatusTooltip
+                          status={previewDeployment.previewStatus}
+                          className="size-2.5"
+                        />
+                        {previewDeployment.previewStatus
+                          ?.replace("running", "Running")
+                          .replace("done", "Done")
+                          .replace("error", "Error")
+                          .replace("idle", "Idle") || "Idle"}
+                      </Badge>
+                    </div>
 
-												<div className="flex flex-col sm:items-end gap-2 max-sm:w-full">
-													{previewDeployment?.createdAt && (
-														<div className="text-sm capitalize text-muted-foreground">
-															<DateTooltip
-																date={previewDeployment?.createdAt}
-															/>
-														</div>
-													)}
-													<ShowPreviewBuilds
-														deployments={previewDeployment?.deployments || []}
-														serverId={data?.serverId || ""}
-													/>
+                    <div className="md:p-6 p-2 md:pt-0 space-y-4">
+                      <div className="flex sm:flex-row flex-col items-center gap-2">
+                        <Link
+                          href={`http://${previewDeployment.domain?.host}`}
+                          target="_blank"
+                          className="text-sm text-blue-500/95 hover:underline gap-2 flex w-full sm:flex-row flex-col items-center justify-between rounded-lg border p-2"
+                        >
+                          {previewDeployment.domain?.host}
+                        </Link>
 
-													<ShowModalLogs
-														appName={previewDeployment.appName}
-														serverId={data?.serverId || ""}
-													>
-														<Button variant="outline">View Logs</Button>
-													</ShowModalLogs>
+                        <AddPreviewDomain
+                          previewDeploymentId={
+                            previewDeployment.previewDeploymentId
+                          }
+                          domainId={previewDeployment.domain?.domainId}
+                        >
+                          <Button
+                            className="sm:w-auto w-full"
+                            size="sm"
+                            variant="outline"
+                          >
+                            <Pencil className="size-4" />
+                            Edit
+                          </Button>
+                        </AddPreviewDomain>
+                      </div>
 
-													<DialogAction
-														title="Delete Preview"
-														description="Are you sure you want to delete this preview?"
-														onClick={() => {
-															deletePreviewDeployment({
-																previewDeploymentId:
-																	previewDeployment.previewDeploymentId,
-															})
-																.then(() => {
-																	refetchPreviewDeployments();
-																	toast.success("Preview deployment deleted");
-																})
-																.catch((error) => {
-																	toast.error(error.message);
-																});
-														}}
-													>
-														<Button variant="destructive" isLoading={isLoading}>
-															Delete Preview
-														</Button>
-													</DialogAction>
-												</div>
-											</div>
-										</div>
-									);
-								})}
-							</div>
-						)}
-					</>
-				) : (
-					<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">
-							Preview deployments are disabled for this application, please
-							enable it
-						</span>
-						<ShowPreviewSettings applicationId={applicationId} />
-					</div>
-				)}
-			</CardContent>
-		</Card>
-	);
+                      <div className="flex sm:flex-row text-sm flex-col items-center justify-between">
+                        <div className="flex items-center space-x-2">
+                          <GitBranch className="size-5 text-gray-400" />
+                          <span>Branch:</span>
+                          <Badge className="p-2" variant="blank">
+                            {previewDeployment.branch}
+                          </Badge>
+                        </div>
+                        <div className="flex items-center space-x-2">
+                          <Clock className="size-5 text-gray-400" />
+                          <span>Deployed:</span>
+                          <Badge className="p-2" variant="blank">
+                            <DateTooltip date={previewDeployment.createdAt} />
+                          </Badge>
+                        </div>
+                      </div>
+
+                      <Separator />
+
+                      <div className="rounded-lg bg-muted p-4">
+                        <h3 className="mb-2 text-sm font-medium">
+                          Pull Request
+                        </h3>
+                        <div className="flex items-center space-x-2 text-sm text-muted-foreground">
+                          <GitPullRequest className="size-5 text-gray-400" />
+                          <Link
+                            className="hover:text-blue-500/95 hover:underline"
+                            target="_blank"
+                            href={previewDeployment.pullRequestURL}
+                          >
+                            {previewDeployment.pullRequestTitle}
+                          </Link>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="justify-center flex-wrap md:p-6 p-2 md:pt-0">
+                      <div className="flex flex-wrap justify-end gap-2">
+                        <ShowModalLogs
+                          appName={previewDeployment.appName}
+                          serverId={data?.serverId || ""}
+                        >
+                          <Button
+                            className="sm:w-auto w-full"
+                            variant="outline"
+                            size="sm"
+                          >
+                            View Logs
+                          </Button>
+                        </ShowModalLogs>
+
+                        <ShowPreviewBuilds
+                          deployments={previewDeployment.deployments || []}
+                          serverId={data?.serverId || ""}
+                        />
+
+                        <DialogAction
+                          title="Delete Preview"
+                          description="Are you sure you want to delete this preview?"
+                          onClick={() =>
+                            handleDeletePreviewDeployment(
+                              previewDeployment.previewDeploymentId
+                            )
+                          }
+                        >
+                          <Button
+                            className="sm:w-auto w-full"
+                            variant="destructive"
+                            isLoading={isLoading}
+                            size="sm"
+                          >
+                            Delete Preview
+                          </Button>
+                        </DialogAction>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </>
+        ) : (
+          <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">
+              Preview deployments are disabled for this application, please
+              enable it
+            </span>
+            <ShowPreviewSettings applicationId={applicationId} />
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
 };