diff --git a/apps/dokploy/components/dashboard/database/backups/show-backups.tsx b/apps/dokploy/components/dashboard/database/backups/show-backups.tsx
index 0a6517f96..ff31da750 100644
--- a/apps/dokploy/components/dashboard/database/backups/show-backups.tsx
+++ b/apps/dokploy/components/dashboard/database/backups/show-backups.tsx
@@ -23,6 +23,12 @@ import { RestoreBackup } from "./restore-backup";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { HandleBackup } from "./handle-backup";
 import { cn } from "@/lib/utils";
+import {
+	MariadbIcon,
+	MongodbIcon,
+	MysqlIcon,
+	PostgresqlIcon,
+} from "@/components/icons/data-tools-icons";
 
 interface Props {
 	id: string;
@@ -169,78 +175,109 @@ export const ShowBackups = ({
 								<div className="flex flex-col gap-6">
 									{postgres?.backups.map((backup) => (
 										<div key={backup.backupId}>
-											<div className="flex w-full flex-col md:flex-row md:items-center justify-between gap-4 md:gap-10 border rounded-lg p-4">
-												<div
-													className={cn(
-														"grid grid-cols-1 md:grid-cols-3 xl:grid-cols-6 flex-col gap-8",
-														backup.backupType === "compose" && "xl:grid-cols-8",
-													)}
-												>
-													{backup.backupType === "compose" && (
-														<>
-															<div className="flex flex-col gap-1">
-																<span className="font-medium">
-																	Service Name
-																</span>
-																<span className="text-sm text-muted-foreground">
-																	{backup.serviceName}
+											<div className="flex w-full flex-col md:flex-row md:items-start justify-between gap-4 border rounded-lg p-4 hover:bg-muted/50 transition-colors">
+												<div className="flex flex-col w-full gap-4">
+													<div className="flex items-center gap-3">
+														{backup.backupType === "compose" && (
+															<div className="flex items-center justify-center size-10 rounded-lg">
+																{backup.databaseType === "postgres" && (
+																	<PostgresqlIcon className="size-7" />
+																)}
+																{backup.databaseType === "mysql" && (
+																	<MysqlIcon className="size-7" />
+																)}
+																{backup.databaseType === "mariadb" && (
+																	<MariadbIcon className="size-7" />
+																)}
+																{backup.databaseType === "mongo" && (
+																	<MongodbIcon className="size-7" />
+																)}
+															</div>
+														)}
+														<div className="flex flex-col gap-1">
+															{backup.backupType === "compose" && (
+																<div className="flex items-center gap-2">
+																	<h3 className="font-medium">
+																		{backup.serviceName}
+																	</h3>
+																	<span className="px-1.5 py-0.5 rounded-full bg-muted text-xs font-medium capitalize">
+																		{backup.databaseType}
+																	</span>
+																</div>
+															)}
+															<div className="flex items-center gap-2">
+																<div
+																	className={cn(
+																		"size-1.5 rounded-full",
+																		backup.enabled
+																			? "bg-green-500"
+																			: "bg-red-500",
+																	)}
+																/>
+																<span className="text-xs text-muted-foreground">
+																	{backup.enabled ? "Active" : "Inactive"}
 																</span>
 															</div>
+														</div>
+													</div>
 
-															<div className="flex flex-col gap-1">
-																<span className="font-medium">
-																	Database Type
-																</span>
-																<span className="text-sm text-muted-foreground">
-																	{backup.databaseType}
-																</span>
-															</div>
-														</>
-													)}
-													<div className="flex flex-col gap-1">
-														<span className="font-medium">Destination</span>
-														<span className="text-sm text-muted-foreground">
-															{backup.destination.name}
-														</span>
-													</div>
-													<div className="flex flex-col gap-1">
-														<span className="font-medium">Database</span>
-														<span className="text-sm text-muted-foreground">
-															{backup.database}
-														</span>
-													</div>
-													<div className="flex flex-col gap-1">
-														<span className="font-medium">Scheduled</span>
-														<span className="text-sm text-muted-foreground">
-															{backup.schedule}
-														</span>
-													</div>
-													<div className="flex flex-col gap-1">
-														<span className="font-medium">Prefix Storage</span>
-														<span className="text-sm text-muted-foreground">
-															{backup.prefix}
-														</span>
-													</div>
-													<div className="flex flex-col gap-1">
-														<span className="font-medium">Enabled</span>
-														<span className="text-sm text-muted-foreground">
-															{backup.enabled ? "Yes" : "No"}
-														</span>
-													</div>
-													<div className="flex flex-col gap-1">
-														<span className="font-medium">Keep Latest</span>
-														<span className="text-sm text-muted-foreground">
-															{backup.keepLatestCount || "All"}
-														</span>
+													<div className="flex flex-wrap gap-x-8 gap-y-2">
+														<div className="min-w-[200px]">
+															<span className="text-sm font-medium text-muted-foreground">
+																Destination
+															</span>
+															<p className="font-medium text-sm mt-0.5">
+																{backup.destination.name}
+															</p>
+														</div>
+
+														<div className="min-w-[150px]">
+															<span className="text-sm font-medium text-muted-foreground">
+																Database
+															</span>
+															<p className="font-medium text-sm mt-0.5">
+																{backup.database}
+															</p>
+														</div>
+
+														<div className="min-w-[120px]">
+															<span className="text-sm font-medium text-muted-foreground">
+																Schedule
+															</span>
+															<p className="font-medium text-sm mt-0.5">
+																{backup.schedule}
+															</p>
+														</div>
+
+														<div className="min-w-[150px]">
+															<span className="text-sm font-medium text-muted-foreground">
+																Prefix Storage
+															</span>
+															<p className="font-medium text-sm mt-0.5">
+																{backup.prefix}
+															</p>
+														</div>
+
+														<div className="min-w-[100px]">
+															<span className="text-sm font-medium text-muted-foreground">
+																Keep Latest
+															</span>
+															<p className="font-medium text-sm mt-0.5">
+																{backup.keepLatestCount || "All"}
+															</p>
+														</div>
 													</div>
 												</div>
-												<div className="flex flex-row gap-4">
+
+												<div className="flex flex-row md:flex-col gap-1.5">
 													<TooltipProvider delayDuration={0}>
 														<Tooltip>
 															<TooltipTrigger asChild>
 																<Button
 																	type="button"
 																	variant="ghost"
+																	size="icon"
+																	className="size-8"
 																	isLoading={
 																		isManualBackup &&
 																		activeManualBackup === backup.backupId
@@ -263,7 +300,7 @@ export const ShowBackups = ({
 																		setActiveManualBackup(undefined);
 																	}}
 																>
-																	<Play className="size-5  text-muted-foreground" />
+																	<Play className="size-4 text-muted-foreground" />
 																</Button>
 															</TooltipTrigger>
 															<TooltipContent>Run Manual Backup</TooltipContent>
@@ -295,7 +332,7 @@ export const ShowBackups = ({
 														<Button
 															variant="ghost"
 															size="icon"
-															className="group hover:bg-red-500/10"
+															className="group hover:bg-red-500/10 size-8"
 															isLoading={isRemoving}
 														>
 															<Trash2 className="size-4 text-primary group-hover:text-red-500" />