diff --git a/apps/dokploy/components/dashboard/application/advanced/traefik/show-traefik-config.tsx b/apps/dokploy/components/dashboard/application/advanced/traefik/show-traefik-config.tsx
index ae23f18668..3349cf418c 100644
--- a/apps/dokploy/components/dashboard/application/advanced/traefik/show-traefik-config.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/traefik/show-traefik-config.tsx
@@ -1,4 +1,4 @@
-import { File, Loader2 } from "lucide-react";
+import { File } from "lucide-react";
 import { CodeEditor } from "@/components/shared/code-editor";
 import {
 	Card,
@@ -7,6 +7,14 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import {
+	Empty,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyMedia,
+	EmptyTitle,
+} from "@/components/ui/empty";
+import { Skeleton } from "@/components/ui/skeleton";
 import { api } from "@/utils/api";
 import { UpdateTraefikConfig } from "./update-traefik-config";
 
@@ -36,17 +44,22 @@ export const ShowTraefikConfig = ({ applicationId }: Props) => {
 			</CardHeader>
 			<CardContent className="flex flex-col gap-4">
 				{isLoading ? (
-					<span className="text-base text-muted-foreground flex flex-row gap-3 items-center justify-center min-h-[10vh]">
-						Loading...
-						<Loader2 className="animate-spin" />
-					</span>
-				) : !data ? (
-					<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
-						<File className="size-8 text-muted-foreground" />
-						<span className="text-base text-muted-foreground">
-							No traefik config detected
-						</span>
+					<div className="flex flex-col gap-3 min-h-[10vh]">
+						<Skeleton className="h-4 w-32" />
+						<Skeleton className="h-32 w-full" />
 					</div>
+				) : !data ? (
+					<Empty className="min-h-[10vh]">
+						<EmptyHeader>
+							<EmptyMedia variant="icon">
+								<File className="size-5 text-muted-foreground" />
+							</EmptyMedia>
+							<EmptyTitle>No Traefik config detected</EmptyTitle>
+							<EmptyDescription>
+								Add a configuration file to manage custom rules.
+							</EmptyDescription>
+						</EmptyHeader>
+					</Empty>
 				) : (
 					<div className="flex flex-col pt-2 relative">
 						<div className="flex flex-col gap-6 max-h-[35rem] min-h-[10rem] overflow-y-auto">
diff --git a/apps/dokploy/components/dashboard/application/deployments/show-deployments.tsx b/apps/dokploy/components/dashboard/application/deployments/show-deployments.tsx
index cfe747d27e..4c12de0544 100644
--- a/apps/dokploy/components/dashboard/application/deployments/show-deployments.tsx
+++ b/apps/dokploy/components/dashboard/application/deployments/show-deployments.tsx
@@ -2,7 +2,6 @@ import {
 	ChevronDown,
 	ChevronUp,
 	Clock,
-	Loader2,
 	RefreshCcw,
 	RocketIcon,
 	Settings,
@@ -22,6 +21,14 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import {
+	Empty,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyMedia,
+	EmptyTitle,
+} from "@/components/ui/empty";
+import { ListSkeleton } from "@/components/shared/list-skeleton";
 import { api, type RouterOutputs } from "@/utils/api";
 import { ShowRollbackSettings } from "../rollbacks/show-rollback-settings";
 import { CancelQueues } from "./cancel-queues";
@@ -231,19 +238,23 @@ export const ShowDeployments = ({
 				)}
 
 				{isLoadingDeployments ? (
-					<div className="flex w-full flex-row items-center justify-center gap-3 pt-10 min-h-[25vh]">
-						<Loader2 className="size-6 text-muted-foreground animate-spin" />
-						<span className="text-base text-muted-foreground">
-							Loading deployments...
-						</span>
-					</div>
+					<ListSkeleton
+						items={3}
+						gridClassName="grid grid-cols-1 gap-3"
+						className="pt-6"
+					/>
 				) : deployments?.length === 0 ? (
-					<div className="flex w-full flex-col items-center justify-center gap-3 pt-10 min-h-[25vh]">
-						<RocketIcon className="size-8 text-muted-foreground" />
-						<span className="text-base text-muted-foreground">
-							No deployments found
-						</span>
-					</div>
+					<Empty className="min-h-[25vh] pt-6">
+						<EmptyHeader>
+							<EmptyMedia variant="icon">
+								<RocketIcon className="size-5 text-muted-foreground" />
+							</EmptyMedia>
+							<EmptyTitle>No deployments yet</EmptyTitle>
+							<EmptyDescription>
+								Your deployment history will show up here once you deploy.
+							</EmptyDescription>
+						</EmptyHeader>
+					</Empty>
 				) : (
 					<div className="flex flex-col gap-4">
 						{deployments?.map((deployment, index) => {
diff --git a/apps/dokploy/components/dashboard/application/domains/show-domains.tsx b/apps/dokploy/components/dashboard/application/domains/show-domains.tsx
index 1fd3d82e90..eb12e2af1d 100644
--- a/apps/dokploy/components/dashboard/application/domains/show-domains.tsx
+++ b/apps/dokploy/components/dashboard/application/domains/show-domains.tsx
@@ -14,6 +14,7 @@ import Link from "next/link";
 import { useState } from "react";
 import { toast } from "sonner";
 import { DialogAction } from "@/components/shared/dialog-action";
+import { ListSkeleton } from "@/components/shared/list-skeleton";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -23,6 +24,14 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import {
+	Empty,
+	EmptyContent,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyMedia,
+	EmptyTitle,
+} from "@/components/ui/empty";
 import {
 	Tooltip,
 	TooltipContent,
@@ -160,27 +169,30 @@ export const ShowDomains = ({ id, type }: Props) => {
 				</CardHeader>
 				<CardContent className="flex w-full flex-row gap-4">
 					{isLoadingDomains ? (
-						<div className="flex w-full flex-row gap-4 min-h-[40vh] justify-center items-center">
-							<Loader2 className="size-5 animate-spin text-muted-foreground" />
-							<span className="text-base text-muted-foreground">
-								Loading domains...
-							</span>
-						</div>
+						<ListSkeleton
+							items={4}
+							gridClassName="grid grid-cols-1 xl:grid-cols-2 gap-4 w-full"
+							className="min-h-[40vh]"
+						/>
 					) : data?.length === 0 ? (
-						<div className="flex w-full flex-col items-center justify-center gap-3 min-h-[40vh]">
-							<GlobeIcon className="size-8 text-muted-foreground" />
-							<span className="text-base text-muted-foreground">
-								To access the application it is required to set at least 1
-								domain
-							</span>
-							<div className="flex flex-row gap-4 flex-wrap">
+						<Empty className="min-h-[40vh] w-full">
+							<EmptyHeader>
+								<EmptyMedia variant="icon">
+									<GlobeIcon className="size-5 text-muted-foreground" />
+								</EmptyMedia>
+								<EmptyTitle>No domains yet</EmptyTitle>
+								<EmptyDescription>
+									Add at least one domain to access your application.
+								</EmptyDescription>
+							</EmptyHeader>
+							<EmptyContent>
 								<AddDomain id={id} type={type}>
 									<Button>
 										<GlobeIcon className="size-4" /> Add Domain
 									</Button>
 								</AddDomain>
-							</div>
-						</div>
+							</EmptyContent>
+						</Empty>
 					) : (
 						<div className="grid grid-cols-1 gap-4 xl:grid-cols-2 w-full min-h-[40vh] ">
 							{data?.map((item) => {
diff --git a/apps/dokploy/components/dashboard/application/general/generic/save-bitbucket-provider.tsx b/apps/dokploy/components/dashboard/application/general/generic/save-bitbucket-provider.tsx
index 1f54ddd582..abddce1ec4 100644
--- a/apps/dokploy/components/dashboard/application/general/generic/save-bitbucket-provider.tsx
+++ b/apps/dokploy/components/dashboard/application/general/generic/save-bitbucket-provider.tsx
@@ -7,8 +7,10 @@ import { toast } from "sonner";
 import { z } from "zod";
 import { BitbucketIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
+import { ListSkeleton } from "@/components/shared/list-skeleton";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
 	Command,
 	CommandEmpty,
@@ -237,13 +239,15 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 														!field.value && "text-muted-foreground",
 													)}
 												>
-													{isLoadingRepositories
-														? "Loading...."
-														: field.value.owner
-															? repositories?.find(
-																	(repo) => repo.name === field.value.repo,
-																)?.name
-															: "Select repository"}
+													{isLoadingRepositories ? (
+														<Skeleton className="h-4 w-28" />
+													) : field.value.owner ? (
+														repositories?.find(
+															(repo) => repo.name === field.value.repo,
+														)?.name
+													) : (
+														"Select repository"
+													)}
 
 													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 												</Button>
@@ -256,9 +260,13 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 													className="h-9"
 												/>
 												{isLoadingRepositories && (
-													<span className="py-6 text-center text-sm">
-														Loading Repositories....
-													</span>
+													<div className="p-4">
+														<ListSkeleton
+															items={4}
+															gridClassName="grid grid-cols-1 gap-2"
+															itemClassName="border-none bg-transparent p-0"
+														/>
+													</div>
 												)}
 												<CommandEmpty>No repositories found.</CommandEmpty>
 												<ScrollArea className="h-96">
@@ -320,13 +328,16 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 														!field.value && "text-muted-foreground",
 													)}
 												>
-													{status === "loading" && fetchStatus === "fetching"
-														? "Loading...."
-														: field.value
-															? branches?.find(
-																	(branch) => branch.name === field.value,
-																)?.name
-															: "Select branch"}
+													{status === "loading" &&
+													fetchStatus === "fetching" ? (
+														<Skeleton className="h-4 w-24" />
+													) : field.value ? (
+														branches?.find(
+															(branch) => branch.name === field.value,
+														)?.name
+													) : (
+														"Select branch"
+													)}
 													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 												</Button>
 											</FormControl>
@@ -338,9 +349,13 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 													className="h-9"
 												/>
 												{status === "loading" && fetchStatus === "fetching" && (
-													<span className="py-6 text-center text-sm text-muted-foreground">
-														Loading Branches....
-													</span>
+													<div className="p-4">
+														<ListSkeleton
+															items={4}
+															gridClassName="grid grid-cols-1 gap-2"
+															itemClassName="border-none bg-transparent p-0"
+														/>
+													</div>
 												)}
 												{!repository?.owner && (
 													<span className="py-6 text-center text-sm text-muted-foreground">
diff --git a/apps/dokploy/components/dashboard/application/general/generic/save-gitea-provider.tsx b/apps/dokploy/components/dashboard/application/general/generic/save-gitea-provider.tsx
index 2198f4a975..2a24616719 100644
--- a/apps/dokploy/components/dashboard/application/general/generic/save-gitea-provider.tsx
+++ b/apps/dokploy/components/dashboard/application/general/generic/save-gitea-provider.tsx
@@ -7,8 +7,10 @@ import { toast } from "sonner";
 import { z } from "zod";
 import { GiteaIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
+import { ListSkeleton } from "@/components/shared/list-skeleton";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
 	Command,
 	CommandEmpty,
@@ -258,14 +260,16 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
 														!field.value && "text-muted-foreground",
 													)}
 												>
-													{isLoadingRepositories
-														? "Loading...."
-														: field.value.owner
-															? repositories?.find(
-																	(repo: GiteaRepository) =>
-																		repo.name === field.value.repo,
-																)?.name
-															: "Select repository"}
+													{isLoadingRepositories ? (
+														<Skeleton className="h-4 w-28" />
+													) : field.value.owner ? (
+														repositories?.find(
+															(repo: GiteaRepository) =>
+																repo.name === field.value.repo,
+														)?.name
+													) : (
+														"Select repository"
+													)}
 
 													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 												</Button>
@@ -278,9 +282,13 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
 													className="h-9"
 												/>
 												{isLoadingRepositories && (
-													<span className="py-6 text-center text-sm">
-														Loading Repositories....
-													</span>
+													<div className="p-4">
+														<ListSkeleton
+															items={4}
+															gridClassName="grid grid-cols-1 gap-2"
+															itemClassName="border-none bg-transparent p-0"
+														/>
+													</div>
 												)}
 												<CommandEmpty>No repositories found.</CommandEmpty>
 												<ScrollArea className="h-96">
@@ -349,14 +357,17 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
 														!field.value && "text-muted-foreground",
 													)}
 												>
-													{status === "loading" && fetchStatus === "fetching"
-														? "Loading...."
-														: field.value
-															? branches?.find(
-																	(branch: GiteaBranch) =>
-																		branch.name === field.value,
-																)?.name
-															: "Select branch"}
+													{status === "loading" &&
+													fetchStatus === "fetching" ? (
+														<Skeleton className="h-4 w-24" />
+													) : field.value ? (
+														branches?.find(
+															(branch: GiteaBranch) =>
+																branch.name === field.value,
+														)?.name
+													) : (
+														"Select branch"
+													)}
 													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 												</Button>
 											</FormControl>
@@ -368,9 +379,13 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
 													className="h-9"
 												/>
 												{status === "loading" && fetchStatus === "fetching" && (
-													<span className="py-6 text-center text-sm text-muted-foreground">
-														Loading Branches....
-													</span>
+													<div className="p-4">
+														<ListSkeleton
+															items={4}
+															gridClassName="grid grid-cols-1 gap-2"
+															itemClassName="border-none bg-transparent p-0"
+														/>
+													</div>
 												)}
 												{!repository?.owner && (
 													<span className="py-6 text-center text-sm text-muted-foreground">
diff --git a/apps/dokploy/components/dashboard/application/general/generic/save-github-provider.tsx b/apps/dokploy/components/dashboard/application/general/generic/save-github-provider.tsx
index 80d6850ca9..267bead744 100644
--- a/apps/dokploy/components/dashboard/application/general/generic/save-github-provider.tsx
+++ b/apps/dokploy/components/dashboard/application/general/generic/save-github-provider.tsx
@@ -6,8 +6,10 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 import { GithubIcon } from "@/components/icons/data-tools-icons";
+import { ListSkeleton } from "@/components/shared/list-skeleton";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
 	Command,
 	CommandEmpty,
@@ -233,13 +235,15 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 														!field.value && "text-muted-foreground",
 													)}
 												>
-													{isLoadingRepositories
-														? "Loading...."
-														: field.value.owner
-															? repositories?.find(
-																	(repo) => repo.name === field.value.repo,
-																)?.name
-															: "Select repository"}
+													{isLoadingRepositories ? (
+														<Skeleton className="h-4 w-28" />
+													) : field.value.owner ? (
+														repositories?.find(
+															(repo) => repo.name === field.value.repo,
+														)?.name
+													) : (
+														"Select repository"
+													)}
 
 													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 												</Button>
@@ -252,9 +256,13 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 													className="h-9"
 												/>
 												{isLoadingRepositories && (
-													<span className="py-6 text-center text-sm">
-														Loading Repositories....
-													</span>
+													<div className="p-4">
+														<ListSkeleton
+															items={4}
+															gridClassName="grid grid-cols-1 gap-2"
+															itemClassName="border-none bg-transparent p-0"
+														/>
+													</div>
 												)}
 												<CommandEmpty>No repositories found.</CommandEmpty>
 												<ScrollArea className="h-96">
@@ -316,13 +324,16 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 														!field.value && "text-muted-foreground",
 													)}
 												>
-													{status === "loading" && fetchStatus === "fetching"
-														? "Loading...."
-														: field.value
-															? branches?.find(
-																	(branch) => branch.name === field.value,
-																)?.name
-															: "Select branch"}
+													{status === "loading" &&
+													fetchStatus === "fetching" ? (
+														<Skeleton className="h-4 w-24" />
+													) : field.value ? (
+														branches?.find(
+															(branch) => branch.name === field.value,
+														)?.name
+													) : (
+														"Select branch"
+													)}
 													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 												</Button>
 											</FormControl>
@@ -334,9 +345,13 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 													className="h-9"
 												/>
 												{status === "loading" && fetchStatus === "fetching" && (
-													<span className="py-6 text-center text-sm text-muted-foreground">
-														Loading Branches....
-													</span>
+													<div className="p-4">
+														<ListSkeleton
+															items={4}
+															gridClassName="grid grid-cols-1 gap-2"
+															itemClassName="border-none bg-transparent p-0"
+														/>
+													</div>
 												)}
 												{!repository?.owner && (
 													<span className="py-6 text-center text-sm text-muted-foreground">
diff --git a/apps/dokploy/components/dashboard/application/general/generic/save-gitlab-provider.tsx b/apps/dokploy/components/dashboard/application/general/generic/save-gitlab-provider.tsx
index 6197fc49ff..ef1ceddde6 100644
--- a/apps/dokploy/components/dashboard/application/general/generic/save-gitlab-provider.tsx
+++ b/apps/dokploy/components/dashboard/application/general/generic/save-gitlab-provider.tsx
@@ -7,8 +7,10 @@ import { toast } from "sonner";
 import { z } from "zod";
 import { GitlabIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
+import { ListSkeleton } from "@/components/shared/list-skeleton";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
 	Command,
 	CommandEmpty,
@@ -254,13 +256,15 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 														!field.value && "text-muted-foreground",
 													)}
 												>
-													{isLoadingRepositories
-														? "Loading...."
-														: field.value.owner
-															? repositories?.find(
-																	(repo) => repo.name === field.value.repo,
-																)?.name
-															: "Select repository"}
+													{isLoadingRepositories ? (
+														<Skeleton className="h-4 w-28" />
+													) : field.value.owner ? (
+														repositories?.find(
+															(repo) => repo.name === field.value.repo,
+														)?.name
+													) : (
+														"Select repository"
+													)}
 
 													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 												</Button>
@@ -273,9 +277,13 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 													className="h-9"
 												/>
 												{isLoadingRepositories && (
-													<span className="py-6 text-center text-sm">
-														Loading Repositories....
-													</span>
+													<div className="p-4">
+														<ListSkeleton
+															items={4}
+															gridClassName="grid grid-cols-1 gap-2"
+															itemClassName="border-none bg-transparent p-0"
+														/>
+													</div>
 												)}
 												<CommandEmpty>No repositories found.</CommandEmpty>
 												<ScrollArea className="h-96">
@@ -347,13 +355,16 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 														!field.value && "text-muted-foreground",
 													)}
 												>
-													{status === "loading" && fetchStatus === "fetching"
-														? "Loading...."
-														: field.value
-															? branches?.find(
-																	(branch) => branch.name === field.value,
-																)?.name
-															: "Select branch"}
+													{status === "loading" &&
+													fetchStatus === "fetching" ? (
+														<Skeleton className="h-4 w-24" />
+													) : field.value ? (
+														branches?.find(
+															(branch) => branch.name === field.value,
+														)?.name
+													) : (
+														"Select branch"
+													)}
 													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 												</Button>
 											</FormControl>
@@ -365,9 +376,13 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 													className="h-9"
 												/>
 												{status === "loading" && fetchStatus === "fetching" && (
-													<span className="py-6 text-center text-sm text-muted-foreground">
-														Loading Branches....
-													</span>
+													<div className="p-4">
+														<ListSkeleton
+															items={4}
+															gridClassName="grid grid-cols-1 gap-2"
+															itemClassName="border-none bg-transparent p-0"
+														/>
+													</div>
 												)}
 												{!repository?.owner && (
 													<span className="py-6 text-center text-sm text-muted-foreground">
diff --git a/apps/dokploy/components/dashboard/application/general/generic/show.tsx b/apps/dokploy/components/dashboard/application/general/generic/show.tsx
index a60db800c9..1398936711 100644
--- a/apps/dokploy/components/dashboard/application/general/generic/show.tsx
+++ b/apps/dokploy/components/dashboard/application/general/generic/show.tsx
@@ -1,4 +1,4 @@
-import { GitBranch, Loader2, UploadCloud } from "lucide-react";
+import { GitBranch, UploadCloud } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
 import { toast } from "sonner";
@@ -14,6 +14,7 @@ import {
 	GitIcon,
 	GitlabIcon,
 } from "@/components/icons/data-tools-icons";
+import { ListSkeleton } from "@/components/shared/list-skeleton";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { api } from "@/utils/api";
@@ -87,12 +88,11 @@ export const ShowProviderForm = ({ applicationId }: Props) => {
 					</CardTitle>
 				</CardHeader>
 				<CardContent>
-					<div className="flex min-h-[25vh] items-center justify-center">
-						<div className="flex items-center gap-2 text-muted-foreground">
-							<Loader2 className="size-4 animate-spin" />
-							<span>Loading providers...</span>
-						</div>
-					</div>
+					<ListSkeleton
+						items={3}
+						gridClassName="grid grid-cols-1 gap-3"
+						className="min-h-[25vh]"
+					/>
 				</CardContent>
 			</Card>
 		);
diff --git a/apps/dokploy/components/dashboard/application/logs/show.tsx b/apps/dokploy/components/dashboard/application/logs/show.tsx
index e5dff075ee..9ac30fb24b 100644
--- a/apps/dokploy/components/dashboard/application/logs/show.tsx
+++ b/apps/dokploy/components/dashboard/application/logs/show.tsx
@@ -1,4 +1,4 @@
-import { Loader2 } from "lucide-react";
+import { Skeleton } from "@/components/ui/skeleton";
 import dynamic from "next/dynamic";
 import { useEffect, useState } from "react";
 import { Badge } from "@/components/ui/badge";
@@ -121,9 +121,8 @@ export const ShowDockerLogs = ({ appName, serverId }: Props) => {
 				<Select onValueChange={setContainerId} value={containerId}>
 					<SelectTrigger>
 						{isLoading ? (
-							<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground">
-								<span>Loading...</span>
-								<Loader2 className="animate-spin size-4" />
+							<div className="flex items-center gap-2">
+								<Skeleton className="h-4 w-24" />
 							</div>
 						) : (
 							<SelectValue placeholder="Select a container" />
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 6cf8d88305..9bb17c7ba2 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
@@ -4,7 +4,6 @@ import {
 	FileText,
 	GitPullRequest,
 	Hammer,
-	Loader2,
 	PenSquare,
 	RocketIcon,
 	Trash2,
@@ -23,7 +22,16 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import {
+	Empty,
+	EmptyContent,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyMedia,
+	EmptyTitle,
+} from "@/components/ui/empty";
 import { Input } from "@/components/ui/input";
+import { ListSkeleton } from "@/components/shared/list-skeleton";
 import {
 	Tooltip,
 	TooltipContent,
@@ -97,19 +105,20 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => {
 							</span>
 						</div>
 						{isLoadingPreviewDeployments ? (
-							<div className="flex w-full flex-row items-center justify-center gap-3 min-h-[35vh]">
-								<Loader2 className="size-5 text-muted-foreground animate-spin" />
-								<span className="text-base text-muted-foreground">
-									Loading preview deployments...
-								</span>
-							</div>
+							<ListSkeleton items={3} gridClassName="grid grid-cols-1 gap-3" />
 						) : !previewDeployments?.length ? (
-							<div className="flex w-full flex-col items-center justify-center gap-3 min-h-[35vh]">
-								<RocketIcon className="size-8 text-muted-foreground" />
-								<span className="text-base text-muted-foreground">
-									No preview deployments found
-								</span>
-							</div>
+							<Empty className="min-h-[35vh]">
+								<EmptyHeader>
+									<EmptyMedia variant="icon">
+										<RocketIcon className="size-5 text-muted-foreground" />
+									</EmptyMedia>
+									<EmptyTitle>No preview deployments yet</EmptyTitle>
+									<EmptyDescription>
+										Preview deployments will appear when you open a pull
+										request.
+									</EmptyDescription>
+								</EmptyHeader>
+							</Empty>
 						) : (
 							<div className="flex flex-col gap-4">
 								{previewDeployments?.map((deployment) => {
@@ -298,14 +307,21 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => {
 						)}
 					</>
 				) : (
-					<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>
+					<Empty className="min-h-[35vh]">
+						<EmptyHeader>
+							<EmptyMedia variant="icon">
+								<RocketIcon className="size-5 text-muted-foreground" />
+							</EmptyMedia>
+							<EmptyTitle>Preview deployments are disabled</EmptyTitle>
+							<EmptyDescription>
+								Enable preview deployments to create a deployment per pull
+								request.
+							</EmptyDescription>
+						</EmptyHeader>
+						<EmptyContent>
+							<ShowPreviewSettings applicationId={applicationId} />
+						</EmptyContent>
+					</Empty>
 				)}
 			</CardContent>
 		</Card>
diff --git a/apps/dokploy/components/dashboard/application/schedules/show-schedules.tsx b/apps/dokploy/components/dashboard/application/schedules/show-schedules.tsx
index 26bfa94219..7b58916e78 100644
--- a/apps/dokploy/components/dashboard/application/schedules/show-schedules.tsx
+++ b/apps/dokploy/components/dashboard/application/schedules/show-schedules.tsx
@@ -9,6 +9,7 @@ import {
 import { useState } from "react";
 import { toast } from "sonner";
 import { DialogAction } from "@/components/shared/dialog-action";
+import { ListSkeleton } from "@/components/shared/list-skeleton";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -18,6 +19,14 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import {
+	Empty,
+	EmptyContent,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyMedia,
+	EmptyTitle,
+} from "@/components/ui/empty";
 import {
 	Tooltip,
 	TooltipContent,
@@ -91,12 +100,11 @@ export const ShowSchedules = ({ id, scheduleType = "application" }: Props) => {
 			</CardHeader>
 			<CardContent className="px-0">
 				{isLoadingSchedules ? (
-					<div className="flex gap-4 w-full items-center justify-center text-center mx-auto min-h-[45vh]">
-						<Loader2 className="size-4 text-muted-foreground/70 transition-colors animate-spin self-center" />
-						<span className="text-sm text-muted-foreground/70">
-							Loading scheduled tasks...
-						</span>
-					</div>
+					<ListSkeleton
+						items={4}
+						gridClassName="grid grid-cols-1 xl:grid-cols-2 gap-4"
+						className="min-h-[45vh]"
+					/>
 				) : schedules && schedules.length > 0 ? (
 					<div className="grid xl:grid-cols-2 gap-4 grid-cols-1 h-full">
 						{schedules.map((schedule) => {
@@ -229,16 +237,20 @@ export const ShowSchedules = ({ id, scheduleType = "application" }: Props) => {
 						})}
 					</div>
 				) : (
-					<div className="flex flex-col gap-2 items-center justify-center py-12 rounded-lg">
-						<Clock className="size-8 mb-4 text-muted-foreground" />
-						<p className="text-lg font-medium text-muted-foreground">
-							No scheduled tasks
-						</p>
-						<p className="text-sm text-muted-foreground mt-1">
-							Create your first scheduled task to automate your workflows
-						</p>
-						<HandleSchedules id={id} scheduleType={scheduleType} />
-					</div>
+					<Empty className="min-h-[45vh]">
+						<EmptyHeader>
+							<EmptyMedia variant="icon">
+								<Clock className="size-5 text-muted-foreground" />
+							</EmptyMedia>
+							<EmptyTitle>No scheduled tasks yet</EmptyTitle>
+							<EmptyDescription>
+								Create your first scheduled task to automate your workflows.
+							</EmptyDescription>
+						</EmptyHeader>
+						<EmptyContent>
+							<HandleSchedules id={id} scheduleType={scheduleType} />
+						</EmptyContent>
+					</Empty>
 				)}
 			</CardContent>
 		</Card>
diff --git a/apps/dokploy/components/dashboard/application/volume-backups/restore-volume-backups.tsx b/apps/dokploy/components/dashboard/application/volume-backups/restore-volume-backups.tsx
index 6eda336486..588be84e37 100644
--- a/apps/dokploy/components/dashboard/application/volume-backups/restore-volume-backups.tsx
+++ b/apps/dokploy/components/dashboard/application/volume-backups/restore-volume-backups.tsx
@@ -8,6 +8,7 @@ import { toast } from "sonner";
 import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { DrawerLogs } from "@/components/shared/drawer-logs";
+import { ListSkeleton } from "@/components/shared/list-skeleton";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -34,6 +35,12 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
+import {
+	Empty,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyTitle,
+} from "@/components/ui/empty";
 import { Input } from "@/components/ui/input";
 import {
 	Popover,
@@ -295,17 +302,31 @@ export const RestoreVolumeBackups = ({ id, type, serverId }: Props) => {
 													className="h-9"
 												/>
 												{isLoading ? (
-													<div className="py-6 text-center text-sm">
-														Loading backup files...
+													<div className="p-4">
+														<ListSkeleton
+															items={4}
+															gridClassName="grid grid-cols-1 gap-2"
+															itemClassName="border-none bg-transparent p-0"
+														/>
 													</div>
 												) : files.length === 0 && search ? (
-													<div className="py-6 text-center text-sm text-muted-foreground">
-														No backup files found for "{search}"
-													</div>
+													<Empty className="border-none p-4">
+														<EmptyHeader>
+															<EmptyTitle>No backup files found</EmptyTitle>
+															<EmptyDescription>
+																No matches for "{search}".
+															</EmptyDescription>
+														</EmptyHeader>
+													</Empty>
 												) : files.length === 0 ? (
-													<div className="py-6 text-center text-sm text-muted-foreground">
-														No backup files available
-													</div>
+													<Empty className="border-none p-4">
+														<EmptyHeader>
+															<EmptyTitle>No backup files available</EmptyTitle>
+															<EmptyDescription>
+																Create a backup to see files here.
+															</EmptyDescription>
+														</EmptyHeader>
+													</Empty>
 												) : (
 													<ScrollArea className="h-64">
 														<CommandGroup className="w-96">
diff --git a/apps/dokploy/components/dashboard/application/volume-backups/show-volume-backups.tsx b/apps/dokploy/components/dashboard/application/volume-backups/show-volume-backups.tsx
index 2e4dac4729..3a42649a69 100644
--- a/apps/dokploy/components/dashboard/application/volume-backups/show-volume-backups.tsx
+++ b/apps/dokploy/components/dashboard/application/volume-backups/show-volume-backups.tsx
@@ -8,6 +8,7 @@ import {
 import { useState } from "react";
 import { toast } from "sonner";
 import { DialogAction } from "@/components/shared/dialog-action";
+import { ListSkeleton } from "@/components/shared/list-skeleton";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -17,6 +18,14 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import {
+	Empty,
+	EmptyContent,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyMedia,
+	EmptyTitle,
+} from "@/components/ui/empty";
 import {
 	Tooltip,
 	TooltipContent,
@@ -107,12 +116,11 @@ export const ShowVolumeBackups = ({
 			</CardHeader>
 			<CardContent className="px-0">
 				{isLoadingVolumeBackups ? (
-					<div className="flex gap-4 w-full items-center justify-center text-center mx-auto min-h-[45vh]">
-						<Loader2 className="size-4 text-muted-foreground/70 transition-colors animate-spin self-center" />
-						<span className="text-sm text-muted-foreground/70">
-							Loading volume backups...
-						</span>
-					</div>
+					<ListSkeleton
+						items={4}
+						gridClassName="grid grid-cols-1 xl:grid-cols-2 gap-4"
+						className="min-h-[45vh]"
+					/>
 				) : volumeBackups && volumeBackups.length > 0 ? (
 					<div className="grid xl:grid-cols-2 gap-4 grid-cols-1 h-full">
 						{volumeBackups.map((volumeBackup) => {
@@ -233,19 +241,23 @@ export const ShowVolumeBackups = ({
 						})}
 					</div>
 				) : (
-					<div className="flex flex-col gap-2 items-center justify-center py-12 rounded-lg">
-						<DatabaseBackup className="size-8 mb-4 text-muted-foreground" />
-						<p className="text-lg font-medium text-muted-foreground">
-							No volume backups
-						</p>
-						<p className="text-sm text-muted-foreground mt-1">
-							Create your first volume backup to automate your workflows
-						</p>
-						<div className="flex items-center gap-2">
-							<HandleVolumeBackups id={id} volumeBackupType={type} />
-							<RestoreVolumeBackups id={id} type={type} serverId={serverId} />
-						</div>
-					</div>
+					<Empty className="min-h-[45vh]">
+						<EmptyHeader>
+							<EmptyMedia variant="icon">
+								<DatabaseBackup className="size-5 text-muted-foreground" />
+							</EmptyMedia>
+							<EmptyTitle>No volume backups yet</EmptyTitle>
+							<EmptyDescription>
+								Create your first volume backup to automate your workflows.
+							</EmptyDescription>
+						</EmptyHeader>
+						<EmptyContent>
+							<div className="flex items-center gap-2">
+								<HandleVolumeBackups id={id} volumeBackupType={type} />
+								<RestoreVolumeBackups id={id} type={type} serverId={serverId} />
+							</div>
+						</EmptyContent>
+					</Empty>
 				)}
 			</CardContent>
 		</Card>
diff --git a/apps/dokploy/components/dashboard/compose/general/generic/save-bitbucket-provider-compose.tsx b/apps/dokploy/components/dashboard/compose/general/generic/save-bitbucket-provider-compose.tsx
index 06c88fff47..1febeb7b96 100644
--- a/apps/dokploy/components/dashboard/compose/general/generic/save-bitbucket-provider-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/general/generic/save-bitbucket-provider-compose.tsx
@@ -7,8 +7,10 @@ import { toast } from "sonner";
 import { z } from "zod";
 import { BitbucketIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
+import { ListSkeleton } from "@/components/shared/list-skeleton";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
 	Command,
 	CommandEmpty,
@@ -239,13 +241,15 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 														!field.value && "text-muted-foreground",
 													)}
 												>
-													{isLoadingRepositories
-														? "Loading...."
-														: field.value.owner
-															? repositories?.find(
-																	(repo) => repo.name === field.value.repo,
-																)?.name
-															: "Select repository"}
+													{isLoadingRepositories ? (
+														<Skeleton className="h-4 w-28" />
+													) : field.value.owner ? (
+														repositories?.find(
+															(repo) => repo.name === field.value.repo,
+														)?.name
+													) : (
+														"Select repository"
+													)}
 
 													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 												</Button>
@@ -258,9 +262,13 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 													className="h-9"
 												/>
 												{isLoadingRepositories && (
-													<span className="py-6 text-center text-sm">
-														Loading Repositories....
-													</span>
+													<div className="p-4">
+														<ListSkeleton
+															items={4}
+															gridClassName="grid grid-cols-1 gap-2"
+															itemClassName="border-none bg-transparent p-0"
+														/>
+													</div>
 												)}
 												<CommandEmpty>No repositories found.</CommandEmpty>
 												<ScrollArea className="h-96">
@@ -322,13 +330,16 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 														!field.value && "text-muted-foreground",
 													)}
 												>
-													{status === "loading" && fetchStatus === "fetching"
-														? "Loading...."
-														: field.value
-															? branches?.find(
-																	(branch) => branch.name === field.value,
-																)?.name
-															: "Select branch"}
+													{status === "loading" &&
+													fetchStatus === "fetching" ? (
+														<Skeleton className="h-4 w-24" />
+													) : field.value ? (
+														branches?.find(
+															(branch) => branch.name === field.value,
+														)?.name
+													) : (
+														"Select branch"
+													)}
 													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 												</Button>
 											</FormControl>
@@ -340,9 +351,13 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 													className="h-9"
 												/>
 												{status === "loading" && fetchStatus === "fetching" && (
-													<span className="py-6 text-center text-sm text-muted-foreground">
-														Loading Branches....
-													</span>
+													<div className="p-4">
+														<ListSkeleton
+															items={4}
+															gridClassName="grid grid-cols-1 gap-2"
+															itemClassName="border-none bg-transparent p-0"
+														/>
+													</div>
 												)}
 												{!repository?.owner && (
 													<span className="py-6 text-center text-sm text-muted-foreground">
diff --git a/apps/dokploy/components/dashboard/compose/general/generic/save-gitea-provider-compose.tsx b/apps/dokploy/components/dashboard/compose/general/generic/save-gitea-provider-compose.tsx
index fce5622855..b0299bcfbe 100644
--- a/apps/dokploy/components/dashboard/compose/general/generic/save-gitea-provider-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/general/generic/save-gitea-provider-compose.tsx
@@ -7,8 +7,10 @@ import { toast } from "sonner";
 import { z } from "zod";
 import { GiteaIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
+import { ListSkeleton } from "@/components/shared/list-skeleton";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
 	Command,
 	CommandEmpty,
@@ -244,13 +246,15 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
 														!field.value && "text-muted-foreground",
 													)}
 												>
-													{isLoadingRepositories
-														? "Loading...."
-														: field.value.owner
-															? repositories?.find(
-																	(repo) => repo.name === field.value.repo,
-																)?.name
-															: "Select repository"}
+													{isLoadingRepositories ? (
+														<Skeleton className="h-4 w-28" />
+													) : field.value.owner ? (
+														repositories?.find(
+															(repo) => repo.name === field.value.repo,
+														)?.name
+													) : (
+														"Select repository"
+													)}
 													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 												</Button>
 											</FormControl>
@@ -262,9 +266,13 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
 													className="h-9"
 												/>
 												{isLoadingRepositories && (
-													<span className="py-6 text-center text-sm">
-														Loading Repositories....
-													</span>
+													<div className="p-4">
+														<ListSkeleton
+															items={4}
+															gridClassName="grid grid-cols-1 gap-2"
+															itemClassName="border-none bg-transparent p-0"
+														/>
+													</div>
 												)}
 												<CommandEmpty>No repositories found.</CommandEmpty>
 												<ScrollArea className="h-96">
@@ -327,13 +335,16 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
 														!field.value && "text-muted-foreground",
 													)}
 												>
-													{status === "loading" && fetchStatus === "fetching"
-														? "Loading...."
-														: field.value
-															? branches?.find(
-																	(branch) => branch.name === field.value,
-																)?.name
-															: "Select branch"}
+													{status === "loading" &&
+													fetchStatus === "fetching" ? (
+														<Skeleton className="h-4 w-24" />
+													) : field.value ? (
+														branches?.find(
+															(branch) => branch.name === field.value,
+														)?.name
+													) : (
+														"Select branch"
+													)}
 													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 												</Button>
 											</FormControl>
diff --git a/apps/dokploy/components/dashboard/compose/general/generic/save-github-provider-compose.tsx b/apps/dokploy/components/dashboard/compose/general/generic/save-github-provider-compose.tsx
index 5ad950e4c7..fab136a166 100644
--- a/apps/dokploy/components/dashboard/compose/general/generic/save-github-provider-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/general/generic/save-github-provider-compose.tsx
@@ -6,8 +6,10 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 import { GithubIcon } from "@/components/icons/data-tools-icons";
+import { ListSkeleton } from "@/components/shared/list-skeleton";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
 	Command,
 	CommandEmpty,
@@ -234,13 +236,15 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 														!field.value && "text-muted-foreground",
 													)}
 												>
-													{isLoadingRepositories
-														? "Loading...."
-														: field.value.owner
-															? repositories?.find(
-																	(repo) => repo.name === field.value.repo,
-																)?.name
-															: "Select repository"}
+													{isLoadingRepositories ? (
+														<Skeleton className="h-4 w-28" />
+													) : field.value.owner ? (
+														repositories?.find(
+															(repo) => repo.name === field.value.repo,
+														)?.name
+													) : (
+														"Select repository"
+													)}
 
 													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 												</Button>
@@ -253,9 +257,13 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 													className="h-9"
 												/>
 												{isLoadingRepositories && (
-													<span className="py-6 text-center text-sm">
-														Loading Repositories....
-													</span>
+													<div className="p-4">
+														<ListSkeleton
+															items={4}
+															gridClassName="grid grid-cols-1 gap-2"
+															itemClassName="border-none bg-transparent p-0"
+														/>
+													</div>
 												)}
 												<CommandEmpty>No repositories found.</CommandEmpty>
 												<ScrollArea className="h-96">
@@ -317,13 +325,16 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 														!field.value && "text-muted-foreground",
 													)}
 												>
-													{status === "loading" && fetchStatus === "fetching"
-														? "Loading...."
-														: field.value
-															? branches?.find(
-																	(branch) => branch.name === field.value,
-																)?.name
-															: "Select branch"}
+													{status === "loading" &&
+													fetchStatus === "fetching" ? (
+														<Skeleton className="h-4 w-24" />
+													) : field.value ? (
+														branches?.find(
+															(branch) => branch.name === field.value,
+														)?.name
+													) : (
+														"Select branch"
+													)}
 													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 												</Button>
 											</FormControl>
@@ -335,9 +346,13 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 													className="h-9"
 												/>
 												{status === "loading" && fetchStatus === "fetching" && (
-													<span className="py-6 text-center text-sm text-muted-foreground">
-														Loading Branches....
-													</span>
+													<div className="p-4">
+														<ListSkeleton
+															items={4}
+															gridClassName="grid grid-cols-1 gap-2"
+															itemClassName="border-none bg-transparent p-0"
+														/>
+													</div>
 												)}
 												{!repository?.owner && (
 													<span className="py-6 text-center text-sm text-muted-foreground">
diff --git a/apps/dokploy/components/dashboard/compose/general/generic/save-gitlab-provider-compose.tsx b/apps/dokploy/components/dashboard/compose/general/generic/save-gitlab-provider-compose.tsx
index 98c2afa110..198b6bea93 100644
--- a/apps/dokploy/components/dashboard/compose/general/generic/save-gitlab-provider-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/general/generic/save-gitlab-provider-compose.tsx
@@ -7,8 +7,10 @@ import { toast } from "sonner";
 import { z } from "zod";
 import { GitlabIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
+import { ListSkeleton } from "@/components/shared/list-skeleton";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
 	Command,
 	CommandEmpty,
@@ -256,13 +258,15 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 														!field.value && "text-muted-foreground",
 													)}
 												>
-													{isLoadingRepositories
-														? "Loading...."
-														: field.value.owner
-															? repositories?.find(
-																	(repo) => repo.name === field.value.repo,
-																)?.name
-															: "Select repository"}
+													{isLoadingRepositories ? (
+														<Skeleton className="h-4 w-28" />
+													) : field.value.owner ? (
+														repositories?.find(
+															(repo) => repo.name === field.value.repo,
+														)?.name
+													) : (
+														"Select repository"
+													)}
 
 													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 												</Button>
@@ -275,9 +279,13 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 													className="h-9"
 												/>
 												{isLoadingRepositories && (
-													<span className="py-6 text-center text-sm">
-														Loading Repositories....
-													</span>
+													<div className="p-4">
+														<ListSkeleton
+															items={4}
+															gridClassName="grid grid-cols-1 gap-2"
+															itemClassName="border-none bg-transparent p-0"
+														/>
+													</div>
 												)}
 												<CommandEmpty>No repositories found.</CommandEmpty>
 												<ScrollArea className="h-96">
@@ -349,13 +357,16 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 														!field.value && "text-muted-foreground",
 													)}
 												>
-													{status === "loading" && fetchStatus === "fetching"
-														? "Loading...."
-														: field.value
-															? branches?.find(
-																	(branch) => branch.name === field.value,
-																)?.name
-															: "Select branch"}
+													{status === "loading" &&
+													fetchStatus === "fetching" ? (
+														<Skeleton className="h-4 w-24" />
+													) : field.value ? (
+														branches?.find(
+															(branch) => branch.name === field.value,
+														)?.name
+													) : (
+														"Select branch"
+													)}
 													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 												</Button>
 											</FormControl>
@@ -367,9 +378,13 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 													className="h-9"
 												/>
 												{status === "loading" && fetchStatus === "fetching" && (
-													<span className="py-6 text-center text-sm text-muted-foreground">
-														Loading Branches....
-													</span>
+													<div className="p-4">
+														<ListSkeleton
+															items={4}
+															gridClassName="grid grid-cols-1 gap-2"
+															itemClassName="border-none bg-transparent p-0"
+														/>
+													</div>
 												)}
 												{!repository?.owner && (
 													<span className="py-6 text-center text-sm text-muted-foreground">
diff --git a/apps/dokploy/components/dashboard/compose/general/generic/show.tsx b/apps/dokploy/components/dashboard/compose/general/generic/show.tsx
index 798f722498..627e8f7d9e 100644
--- a/apps/dokploy/components/dashboard/compose/general/generic/show.tsx
+++ b/apps/dokploy/components/dashboard/compose/general/generic/show.tsx
@@ -1,4 +1,4 @@
-import { CodeIcon, GitBranch, Loader2 } from "lucide-react";
+import { CodeIcon, GitBranch } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
 import { toast } from "sonner";
@@ -10,6 +10,7 @@ import {
 	GitIcon,
 	GitlabIcon,
 } from "@/components/icons/data-tools-icons";
+import { ListSkeleton } from "@/components/shared/list-skeleton";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { api } from "@/utils/api";
@@ -76,12 +77,11 @@ export const ShowProviderFormCompose = ({ composeId }: Props) => {
 					</CardTitle>
 				</CardHeader>
 				<CardContent>
-					<div className="flex min-h-[25vh] items-center justify-center">
-						<div className="flex items-center gap-2 text-muted-foreground">
-							<Loader2 className="size-4 animate-spin" />
-							<span>Loading providers...</span>
-						</div>
-					</div>
+					<ListSkeleton
+						items={3}
+						gridClassName="grid grid-cols-1 gap-3"
+						className="min-h-[25vh]"
+					/>
 				</CardContent>
 			</Card>
 		);
diff --git a/apps/dokploy/components/dashboard/compose/logs/show-stack.tsx b/apps/dokploy/components/dashboard/compose/logs/show-stack.tsx
index 98c6c0470e..2a181381e8 100644
--- a/apps/dokploy/components/dashboard/compose/logs/show-stack.tsx
+++ b/apps/dokploy/components/dashboard/compose/logs/show-stack.tsx
@@ -1,4 +1,3 @@
-import { Loader2 } from "lucide-react";
 import dynamic from "next/dynamic";
 import { useEffect, useState } from "react";
 import { badgeStateColor } from "@/components/dashboard/application/logs/show";
@@ -21,6 +20,7 @@ import {
 	SelectValue,
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
+import { Skeleton } from "@/components/ui/skeleton";
 import { api } from "@/utils/api";
 export const DockerLogs = dynamic(
 	() =>
@@ -107,9 +107,8 @@ export const ShowDockerLogsStack = ({ appName, serverId }: Props) => {
 				<Select onValueChange={setContainerId} value={containerId}>
 					<SelectTrigger>
 						{isLoading ? (
-							<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground">
-								<span>Loading...</span>
-								<Loader2 className="animate-spin size-4" />
+							<div className="flex items-center gap-2">
+								<Skeleton className="h-4 w-24" />
 							</div>
 						) : (
 							<SelectValue placeholder="Select a container" />
diff --git a/apps/dokploy/components/dashboard/compose/logs/show.tsx b/apps/dokploy/components/dashboard/compose/logs/show.tsx
index a4551f4156..765c2ebd7a 100644
--- a/apps/dokploy/components/dashboard/compose/logs/show.tsx
+++ b/apps/dokploy/components/dashboard/compose/logs/show.tsx
@@ -1,4 +1,3 @@
-import { Loader2 } from "lucide-react";
 import dynamic from "next/dynamic";
 import { useEffect, useState } from "react";
 import { badgeStateColor } from "@/components/dashboard/application/logs/show";
@@ -20,6 +19,7 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
 import { api } from "@/utils/api";
 export const DockerLogs = dynamic(
 	() =>
@@ -74,9 +74,8 @@ export const ShowDockerLogsCompose = ({
 				<Select onValueChange={setContainerId} value={containerId}>
 					<SelectTrigger>
 						{isLoading ? (
-							<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground">
-								<span>Loading...</span>
-								<Loader2 className="animate-spin size-4" />
+							<div className="flex items-center gap-2">
+								<Skeleton className="h-4 w-24" />
 							</div>
 						) : (
 							<SelectValue placeholder="Select a container" />
diff --git a/apps/dokploy/components/dashboard/database/backups/handle-backup.tsx b/apps/dokploy/components/dashboard/database/backups/handle-backup.tsx
index f2ca41b85e..d14eb5f574 100644
--- a/apps/dokploy/components/dashboard/database/backups/handle-backup.tsx
+++ b/apps/dokploy/components/dashboard/database/backups/handle-backup.tsx
@@ -12,7 +12,9 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
+import { ListSkeleton } from "@/components/shared/list-skeleton";
 import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
 	Command,
 	CommandEmpty,
@@ -396,14 +398,16 @@ export const HandleBackup = ({
 															!field.value && "text-muted-foreground",
 														)}
 													>
-														{isLoading
-															? "Loading...."
-															: field.value
-																? data?.find(
-																		(destination) =>
-																			destination.destinationId === field.value,
-																	)?.name
-																: "Select Destination"}
+														{isLoading ? (
+															<Skeleton className="h-4 w-24" />
+														) : field.value ? (
+															data?.find(
+																(destination) =>
+																	destination.destinationId === field.value,
+															)?.name
+														) : (
+															"Select Destination"
+														)}
 
 														<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 													</Button>
@@ -416,9 +420,13 @@ export const HandleBackup = ({
 														className="h-9"
 													/>
 													{isLoading && (
-														<span className="py-6 text-center text-sm">
-															Loading Destinations....
-														</span>
+														<div className="p-4">
+															<ListSkeleton
+																items={4}
+																gridClassName="grid grid-cols-1 gap-2"
+																itemClassName="border-none bg-transparent p-0"
+															/>
+														</div>
 													)}
 													<CommandEmpty>No destinations found.</CommandEmpty>
 													<ScrollArea className="h-64">
diff --git a/apps/dokploy/components/dashboard/database/backups/restore-backup.tsx b/apps/dokploy/components/dashboard/database/backups/restore-backup.tsx
index 01f6944e18..20071bfd89 100644
--- a/apps/dokploy/components/dashboard/database/backups/restore-backup.tsx
+++ b/apps/dokploy/components/dashboard/database/backups/restore-backup.tsx
@@ -14,6 +14,7 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 import { DrawerLogs } from "@/components/shared/drawer-logs";
+import { ListSkeleton } from "@/components/shared/list-skeleton";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -40,6 +41,12 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
+import {
+	Empty,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyTitle,
+} from "@/components/ui/empty";
 import { Input } from "@/components/ui/input";
 import {
 	Popover,
@@ -455,17 +462,31 @@ export const RestoreBackup = ({
 													className="h-9"
 												/>
 												{isLoading ? (
-													<div className="py-6 text-center text-sm">
-														Loading backup files...
+													<div className="p-4">
+														<ListSkeleton
+															items={4}
+															gridClassName="grid grid-cols-1 gap-2"
+															itemClassName="border-none bg-transparent p-0"
+														/>
 													</div>
 												) : files.length === 0 && search ? (
-													<div className="py-6 text-center text-sm text-muted-foreground">
-														No backup files found for "{search}"
-													</div>
+													<Empty className="border-none p-4">
+														<EmptyHeader>
+															<EmptyTitle>No backup files found</EmptyTitle>
+															<EmptyDescription>
+																No matches for "{search}".
+															</EmptyDescription>
+														</EmptyHeader>
+													</Empty>
 												) : files.length === 0 ? (
-													<div className="py-6 text-center text-sm text-muted-foreground">
-														No backup files available
-													</div>
+													<Empty className="border-none p-4">
+														<EmptyHeader>
+															<EmptyTitle>No backup files available</EmptyTitle>
+															<EmptyDescription>
+																Create a backup to see files here.
+															</EmptyDescription>
+														</EmptyHeader>
+													</Empty>
 												) : (
 													<ScrollArea className="h-64">
 														<CommandGroup className="w-96">
diff --git a/apps/dokploy/components/dashboard/docker/show/show-containers.tsx b/apps/dokploy/components/dashboard/docker/show/show-containers.tsx
index 52398aabe1..d4bfd931b8 100644
--- a/apps/dokploy/components/dashboard/docker/show/show-containers.tsx
+++ b/apps/dokploy/components/dashboard/docker/show/show-containers.tsx
@@ -11,6 +11,7 @@ import {
 } from "@tanstack/react-table";
 import { ChevronDown, Container } from "lucide-react";
 import * as React from "react";
+import { ListSkeleton } from "@/components/shared/list-skeleton";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -19,6 +20,13 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import {
+	Empty,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyMedia,
+	EmptyTitle,
+} from "@/components/ui/empty";
 import {
 	DropdownMenu,
 	DropdownMenuCheckboxItem,
@@ -138,17 +146,25 @@ export const ShowContainers = ({ serverId }: Props) => {
 								</div>
 								<div className="rounded-md border">
 									{isLoading ? (
-										<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
-											<span className="text-muted-foreground text-lg font-medium">
-												Loading...
-											</span>
+										<div className="p-4">
+											<ListSkeleton
+												items={6}
+												gridClassName="grid grid-cols-1 gap-3"
+												itemClassName="border-none bg-transparent p-0"
+											/>
 										</div>
 									) : data?.length === 0 ? (
-										<div className="flex-col gap-2 flex items-center justify-center h-[55vh]">
-											<span className="text-muted-foreground text-lg font-medium">
-												No results.
-											</span>
-										</div>
+										<Empty className="min-h-[55vh]">
+											<EmptyHeader>
+												<EmptyMedia variant="icon">
+													<Container className="size-5 text-muted-foreground" />
+												</EmptyMedia>
+												<EmptyTitle>No containers found</EmptyTitle>
+												<EmptyDescription>
+													Containers will appear here once they're running.
+												</EmptyDescription>
+											</EmptyHeader>
+										</Empty>
 									) : (
 										<Table>
 											<TableHeader>
@@ -192,15 +208,11 @@ export const ShowContainers = ({ serverId }: Props) => {
 															colSpan={columns.length}
 															className="h-24 text-center"
 														>
-															{isLoading ? (
-																<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
-																	<span className="text-muted-foreground text-lg font-medium">
-																		Loading...
-																	</span>
-																</div>
-															) : (
-																<>No results.</>
-															)}
+															<Empty className="border-none p-4">
+																<EmptyHeader>
+																	<EmptyTitle>No results.</EmptyTitle>
+																</EmptyHeader>
+															</Empty>
 														</TableCell>
 													</TableRow>
 												)}
diff --git a/apps/dokploy/components/dashboard/file-system/show-traefik-file.tsx b/apps/dokploy/components/dashboard/file-system/show-traefik-file.tsx
index 8c848a0dc5..891e7cb3e8 100644
--- a/apps/dokploy/components/dashboard/file-system/show-traefik-file.tsx
+++ b/apps/dokploy/components/dashboard/file-system/show-traefik-file.tsx
@@ -1,5 +1,4 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Loader2 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -16,6 +15,7 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
+import { Skeleton } from "@/components/ui/skeleton";
 import { api } from "@/utils/api";
 import { validateAndFormatYAML } from "../application/advanced/traefik/update-traefik-config";
 
@@ -99,11 +99,10 @@ export const ShowTraefikFile = ({ path, serverId }: Props) => {
 				>
 					<div className="flex flex-col overflow-auto">
 						{isLoadingFile ? (
-							<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
-								<span className="text-muted-foreground text-lg font-medium">
-									Loading...
-								</span>
-								<Loader2 className="animate-spin size-8 text-muted-foreground" />
+							<div className="w-full flex flex-col gap-4 h-[55vh]">
+								<Skeleton className="h-4 w-40" />
+								<Skeleton className="h-3 w-64" />
+								<Skeleton className="h-[35rem] w-full" />
 							</div>
 						) : (
 							<FormField
diff --git a/apps/dokploy/components/dashboard/file-system/show-traefik-system.tsx b/apps/dokploy/components/dashboard/file-system/show-traefik-system.tsx
index 94a5c72a6d..64f065baef 100644
--- a/apps/dokploy/components/dashboard/file-system/show-traefik-system.tsx
+++ b/apps/dokploy/components/dashboard/file-system/show-traefik-system.tsx
@@ -1,4 +1,4 @@
-import { FileIcon, Folder, Loader2, Workflow } from "lucide-react";
+import { FileIcon, Folder, Workflow } from "lucide-react";
 import React from "react";
 import { AlertBlock } from "@/components/shared/alert-block";
 import {
@@ -8,7 +8,16 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import {
+	Empty,
+	EmptyContent,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyMedia,
+	EmptyTitle,
+} from "@/components/ui/empty";
 import { Tree } from "@/components/ui/file-tree";
+import { Skeleton } from "@/components/ui/skeleton";
 import { api } from "@/utils/api";
 import { ShowTraefikFile } from "./show-traefik-file";
 
@@ -60,21 +69,31 @@ export const ShowTraefikSystem = ({ serverId }: Props) => {
 									</AlertBlock>
 								)}
 								{isLoading && (
-									<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
-										<span className="text-muted-foreground text-lg font-medium">
-											Loading...
-										</span>
-										<Loader2 className="animate-spin size-8 text-muted-foreground" />
+									<div className="w-full flex flex-col gap-4">
+										<div className="flex flex-col gap-3">
+											<Skeleton className="h-4 w-40" />
+											<Skeleton className="h-4 w-64" />
+										</div>
+										<div className="flex flex-col lg:flex-row gap-4 md:gap-10 w-full">
+											<Skeleton className="h-[55vh] w-full lg:max-w-[19rem]" />
+											<Skeleton className="h-[55vh] w-full" />
+										</div>
 									</div>
 								)}
 								{directories?.length === 0 && (
-									<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
-										<span className="text-muted-foreground text-lg font-medium">
-											No directories or files detected in{" "}
-											{"'/etc/dokploy/traefik'"}
-										</span>
-										<Folder className="size-8 text-muted-foreground" />
-									</div>
+									<Empty className="min-h-[55vh] w-full">
+										<EmptyHeader>
+											<EmptyMedia variant="icon">
+												<Folder className="size-5 text-muted-foreground" />
+											</EmptyMedia>
+											<EmptyTitle>No files found</EmptyTitle>
+											<EmptyDescription>
+												No directories or files detected in{" "}
+												{"'/etc/dokploy/traefik'"}.
+											</EmptyDescription>
+										</EmptyHeader>
+										<EmptyContent />
+									</Empty>
 								)}
 								{directories && directories?.length > 0 && (
 									<>
@@ -89,12 +108,18 @@ export const ShowTraefikSystem = ({ serverId }: Props) => {
 											{file ? (
 												<ShowTraefikFile path={file} serverId={serverId} />
 											) : (
-												<div className="h-full w-full flex-col gap-2 flex items-center justify-center">
-													<span className="text-muted-foreground text-lg font-medium">
-														No file selected
-													</span>
-													<FileIcon className="size-8 text-muted-foreground" />
-												</div>
+												<Empty className="min-h-[55vh] w-full">
+													<EmptyHeader>
+														<EmptyMedia variant="icon">
+															<FileIcon className="size-5 text-muted-foreground" />
+														</EmptyMedia>
+														<EmptyTitle>No file selected</EmptyTitle>
+														<EmptyDescription>
+															Choose a file from the tree to view and edit its
+															content.
+														</EmptyDescription>
+													</EmptyHeader>
+												</Empty>
 											)}
 										</div>
 									</>
diff --git a/apps/dokploy/components/dashboard/impersonation/impersonation-bar.tsx b/apps/dokploy/components/dashboard/impersonation/impersonation-bar.tsx
index f779839967..39a3d63e1c 100644
--- a/apps/dokploy/components/dashboard/impersonation/impersonation-bar.tsx
+++ b/apps/dokploy/components/dashboard/impersonation/impersonation-bar.tsx
@@ -20,6 +20,7 @@ import {
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { Logo } from "@/components/shared/logo";
+import { ListSkeleton } from "@/components/shared/list-skeleton";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -222,8 +223,12 @@ export const ImpersonationBar = () => {
 												className="h-9"
 											/>
 											{isLoading ? (
-												<div className="py-6 text-center text-sm">
-													Loading users...
+												<div className="p-4">
+													<ListSkeleton
+														items={4}
+														gridClassName="grid grid-cols-1 gap-2"
+														itemClassName="border-none bg-transparent p-0"
+													/>
 												</div>
 											) : (
 												<>
diff --git a/apps/dokploy/components/dashboard/monitoring/free/container/show-free-compose-monitoring.tsx b/apps/dokploy/components/dashboard/monitoring/free/container/show-free-compose-monitoring.tsx
index 246ae296d3..37bb16a806 100644
--- a/apps/dokploy/components/dashboard/monitoring/free/container/show-free-compose-monitoring.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/free/container/show-free-compose-monitoring.tsx
@@ -1,4 +1,3 @@
-import { Loader2 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { badgeStateColor } from "@/components/dashboard/application/logs/show";
@@ -20,6 +19,7 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
 import { api } from "@/utils/api";
 import { ContainerFreeMonitoring } from "./show-free-container-monitoring";
 
@@ -82,9 +82,8 @@ export const ComposeFreeMonitoring = ({
 					>
 						<SelectTrigger>
 							{isLoading ? (
-								<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground">
-									<span>Loading...</span>
-									<Loader2 className="animate-spin size-4" />
+								<div className="flex items-center gap-2">
+									<Skeleton className="h-4 w-24" />
 								</div>
 							) : (
 								<SelectValue placeholder="Select a container" />
diff --git a/apps/dokploy/components/dashboard/monitoring/paid/container/show-paid-compose-monitoring.tsx b/apps/dokploy/components/dashboard/monitoring/paid/container/show-paid-compose-monitoring.tsx
index 0260438065..dac710ef02 100644
--- a/apps/dokploy/components/dashboard/monitoring/paid/container/show-paid-compose-monitoring.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/paid/container/show-paid-compose-monitoring.tsx
@@ -1,4 +1,3 @@
-import { Loader2 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { badgeStateColor } from "@/components/dashboard/application/logs/show";
@@ -21,6 +20,7 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
 import { api } from "@/utils/api";
 import { ContainerPaidMonitoring } from "./show-paid-container-monitoring";
 
@@ -88,9 +88,8 @@ export const ComposePaidMonitoring = ({
 						>
 							<SelectTrigger>
 								{isLoading ? (
-									<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground">
-										<span>Loading...</span>
-										<Loader2 className="animate-spin size-4" />
+									<div className="flex items-center gap-2">
+										<Skeleton className="h-4 w-24" />
 									</div>
 								) : (
 									<SelectValue placeholder="Select a container" />
diff --git a/apps/dokploy/components/dashboard/project/add-template.tsx b/apps/dokploy/components/dashboard/project/add-template.tsx
index 72c42da491..04a5f7173c 100644
--- a/apps/dokploy/components/dashboard/project/add-template.tsx
+++ b/apps/dokploy/components/dashboard/project/add-template.tsx
@@ -6,7 +6,6 @@ import {
 	HelpCircle,
 	LayoutGrid,
 	List,
-	Loader2,
 	PuzzleIcon,
 	SearchIcon,
 } from "lucide-react";
@@ -15,6 +14,7 @@ import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { GithubIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
+import { ListSkeleton } from "@/components/shared/list-skeleton";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -52,6 +52,14 @@ import {
 	PopoverTrigger,
 } from "@/components/ui/popover";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+	Empty,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyMedia,
+	EmptyTitle,
+} from "@/components/ui/empty";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
 	Select,
 	SelectContent,
@@ -190,11 +198,13 @@ export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
 												"w-full sm:w-[200px] justify-between !bg-input",
 											)}
 										>
-											{isLoadingTags
-												? "Loading...."
-												: selectedTags.length > 0
-													? `Selected ${selectedTags.length} tags`
-													: "Select tag"}
+											{isLoadingTags ? (
+												<Skeleton className="h-4 w-24" />
+											) : selectedTags.length > 0 ? (
+												`Selected ${selectedTags.length} tags`
+											) : (
+												"Select tag"
+											)}
 
 											<ChevronsUpDown className="ml-2 h-4 w-4 opacity-50" />
 										</Button>
@@ -206,9 +216,13 @@ export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
 												className="h-9"
 											/>
 											{isLoadingTags && (
-												<span className="py-6 text-center text-sm">
-													Loading Tags....
-												</span>
+												<div className="p-4">
+													<ListSkeleton
+														items={4}
+														gridClassName="grid grid-cols-1 gap-2"
+														itemClassName="border-none bg-transparent p-0"
+													/>
+												</div>
 											)}
 											<CommandEmpty>No tags found.</CommandEmpty>
 											<ScrollArea className="h-96">
@@ -292,19 +306,28 @@ export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
 						)}
 
 						{isLoadingTemplates ? (
-							<div className="flex justify-center items-center w-full h-full flex-row gap-4">
-								<Loader2 className="size-8 text-muted-foreground animate-spin min-h-[60vh]" />
-								<div className="text-lg font-medium text-muted-foreground">
-									Loading templates...
-								</div>
-							</div>
+							<ListSkeleton
+								items={8}
+								gridClassName={cn(
+									"grid gap-6",
+									viewMode === "detailed"
+										? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
+										: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6",
+								)}
+								className="min-h-[50vh]"
+							/>
 						) : templates.length === 0 ? (
-							<div className="flex justify-center items-center w-full gap-2 min-h-[50vh]">
-								<SearchIcon className="text-muted-foreground size-6" />
-								<div className="text-xl font-medium text-muted-foreground">
-									No templates found
-								</div>
-							</div>
+							<Empty className="min-h-[50vh]">
+								<EmptyHeader>
+									<EmptyMedia variant="icon">
+										<SearchIcon className="text-muted-foreground size-5" />
+									</EmptyMedia>
+									<EmptyTitle>No templates found</EmptyTitle>
+									<EmptyDescription>
+										Try adjusting filters or check back later.
+									</EmptyDescription>
+								</EmptyHeader>
+							</Empty>
 						) : (
 							<div
 								className={cn(
diff --git a/apps/dokploy/components/dashboard/projects/show.tsx b/apps/dokploy/components/dashboard/projects/show.tsx
index 8234593e10..f69750f42f 100644
--- a/apps/dokploy/components/dashboard/projects/show.tsx
+++ b/apps/dokploy/components/dashboard/projects/show.tsx
@@ -4,7 +4,6 @@ import {
 	BookIcon,
 	ExternalLinkIcon,
 	FolderInput,
-	Loader2,
 	MoreHorizontalIcon,
 	Search,
 	TrashIcon,
@@ -37,6 +36,14 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import {
+	Empty,
+	EmptyContent,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyMedia,
+	EmptyTitle,
+} from "@/components/ui/empty";
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -53,6 +60,7 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
 import { TimeBadge } from "@/components/ui/time-badge";
 import { api } from "@/utils/api";
 import { useDebounce } from "@/utils/hooks/use-debounce";
@@ -201,9 +209,19 @@ export const ShowProjects = () => {
 
 						<CardContent className="space-y-2 py-8 border-t gap-4 flex flex-col min-h-[60vh]">
 							{isLoading ? (
-								<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[60vh]">
-									<span>Loading...</span>
-									<Loader2 className="animate-spin size-4" />
+								<div className="flex flex-col gap-6 min-h-[60vh]">
+									<div className="flex max-sm:flex-col gap-4 items-center w-full">
+										<Skeleton className="h-10 w-full" />
+										<Skeleton className="h-10 w-48 max-sm:w-full" />
+									</div>
+									<div className="w-full grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5 gap-5">
+										{Array.from({ length: 6 }).map((_, index) => (
+											<Skeleton
+												key={`project-skeleton-${index}`}
+												className="h-40 w-full rounded-xl"
+											/>
+										))}
+									</div>
 								</div>
 							) : (
 								<>
@@ -244,12 +262,31 @@ export const ShowProjects = () => {
 										</div>
 									</div>
 									{filteredProjects?.length === 0 && (
-										<div className="mt-6 flex h-[50vh] w-full flex-col items-center justify-center space-y-4">
-											<FolderInput className="size-8 self-center text-muted-foreground" />
-											<span className="text-center font-medium text-muted-foreground">
-												No projects found
-											</span>
-										</div>
+										<Empty className="mt-6 min-h-[50vh]">
+											<EmptyHeader>
+												<EmptyMedia variant="icon">
+													<FolderInput className="size-5 text-muted-foreground" />
+												</EmptyMedia>
+												<EmptyTitle>
+													{debouncedSearchQuery
+														? "No projects match your search"
+														: "No projects yet"}
+												</EmptyTitle>
+												<EmptyDescription>
+													{debouncedSearchQuery
+														? "Try a different keyword or clear the filter."
+														: "Create your first project to get started."}
+												</EmptyDescription>
+											</EmptyHeader>
+											{(auth?.role === "owner" ||
+												auth?.role === "admin" ||
+												auth?.canCreateProjects) &&
+												!debouncedSearchQuery && (
+													<EmptyContent>
+														<HandleProject />
+													</EmptyContent>
+												)}
+										</Empty>
 									)}
 									<div className="w-full grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5 flex-wrap gap-5">
 										{filteredProjects?.map((project) => {
diff --git a/apps/dokploy/components/dashboard/requests/show-requests.tsx b/apps/dokploy/components/dashboard/requests/show-requests.tsx
index cc4f1764a0..34852bf540 100644
--- a/apps/dokploy/components/dashboard/requests/show-requests.tsx
+++ b/apps/dokploy/components/dashboard/requests/show-requests.tsx
@@ -19,6 +19,13 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import {
+	Empty,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyMedia,
+	EmptyTitle,
+} from "@/components/ui/empty";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import {
@@ -248,19 +255,19 @@ export const ShowRequests = () => {
 									<RequestsTable dateRange={dateRange} />
 								</>
 							) : (
-								<div className="flex flex-col items-center justify-center py-12 gap-4 text-muted-foreground">
-									<AlertCircle className="size-12 text-muted-foreground/50" />
-									<div className="text-center space-y-2">
-										<h3 className="text-lg font-medium">
-											Requests are not activated
-										</h3>
-										<p className="text-sm max-w-md">
+								<Empty className="min-h-[30vh]">
+									<EmptyHeader>
+										<EmptyMedia variant="icon">
+											<AlertCircle className="size-5 text-muted-foreground" />
+										</EmptyMedia>
+										<EmptyTitle>Requests are not activated</EmptyTitle>
+										<EmptyDescription>
 											Activate requests to see incoming traffic statistics and
 											monitor your application's usage. After activation, you'll
 											need to reload Traefik for the changes to take effect.
-										</p>
-									</div>
-								</div>
+										</EmptyDescription>
+									</EmptyHeader>
+								</Empty>
 							)}
 						</CardContent>
 					</div>
diff --git a/apps/dokploy/components/dashboard/settings/ai-form.tsx b/apps/dokploy/components/dashboard/settings/ai-form.tsx
index f7f81c9cf1..1324d43dd9 100644
--- a/apps/dokploy/components/dashboard/settings/ai-form.tsx
+++ b/apps/dokploy/components/dashboard/settings/ai-form.tsx
@@ -1,8 +1,9 @@
 "use client";
 
-import { BotIcon, Loader2, Trash2 } from "lucide-react";
+import { BotIcon, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 import { DialogAction } from "@/components/shared/dialog-action";
+import { ListSkeleton } from "@/components/shared/list-skeleton";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -11,6 +12,14 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import {
+	Empty,
+	EmptyContent,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyMedia,
+	EmptyTitle,
+} from "@/components/ui/empty";
 import { api } from "@/utils/api";
 import { HandleAi } from "./handle-ai";
 
@@ -34,20 +43,24 @@ export const AiForm = () => {
 					</CardHeader>
 					<CardContent className="space-y-2 py-8 border-t">
 						{isLoading ? (
-							<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[25vh]">
-								<span>Loading...</span>
-								<Loader2 className="animate-spin size-4" />
-							</div>
+							<ListSkeleton items={3} gridClassName="grid grid-cols-1 gap-3" />
 						) : (
 							<>
 								{aiConfigs?.length === 0 ? (
-									<div className="flex flex-col items-center gap-3  min-h-[25vh] justify-center">
-										<BotIcon className="size-8 self-center text-muted-foreground" />
-										<span className="text-base text-muted-foreground text-center">
-											You don't have any AI configurations
-										</span>
-										<HandleAi />
-									</div>
+									<Empty className="min-h-[25vh]">
+										<EmptyHeader>
+											<EmptyMedia variant="icon">
+												<BotIcon className="size-5 text-muted-foreground" />
+											</EmptyMedia>
+											<EmptyTitle>No AI configs yet</EmptyTitle>
+											<EmptyDescription>
+												Add an AI provider to unlock automation features.
+											</EmptyDescription>
+										</EmptyHeader>
+										<EmptyContent>
+											<HandleAi />
+										</EmptyContent>
+									</Empty>
 								) : (
 									<div className="flex flex-col gap-4 rounded-lg min-h-[25vh]">
 										{aiConfigs?.map((config) => (
diff --git a/apps/dokploy/components/dashboard/settings/api/show-api-keys.tsx b/apps/dokploy/components/dashboard/settings/api/show-api-keys.tsx
index efa68929f3..5978710b82 100644
--- a/apps/dokploy/components/dashboard/settings/api/show-api-keys.tsx
+++ b/apps/dokploy/components/dashboard/settings/api/show-api-keys.tsx
@@ -12,6 +12,13 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import {
+	Empty,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyMedia,
+	EmptyTitle,
+} from "@/components/ui/empty";
 import { api } from "@/utils/api";
 import { AddApiKey } from "./add-api-key";
 
@@ -121,12 +128,17 @@ export const ShowApiKeys = () => {
 									</div>
 								))
 							) : (
-								<div className="flex flex-col items-center gap-3 py-6">
-									<KeyIcon className="size-8 text-muted-foreground" />
-									<span className="text-base text-muted-foreground">
-										No API keys found
-									</span>
-								</div>
+								<Empty className="min-h-[12vh] border-none p-4">
+									<EmptyHeader>
+										<EmptyMedia variant="icon">
+											<KeyIcon className="size-5 text-muted-foreground" />
+										</EmptyMedia>
+										<EmptyTitle>No API keys yet</EmptyTitle>
+										<EmptyDescription>
+											Create an API key to integrate with Dokploy.
+										</EmptyDescription>
+									</EmptyHeader>
+								</Empty>
 							)}
 						</div>
 
diff --git a/apps/dokploy/components/dashboard/settings/billing/show-billing.tsx b/apps/dokploy/components/dashboard/settings/billing/show-billing.tsx
index 1460244c11..1a40a52f49 100644
--- a/apps/dokploy/components/dashboard/settings/billing/show-billing.tsx
+++ b/apps/dokploy/components/dashboard/settings/billing/show-billing.tsx
@@ -5,7 +5,6 @@ import {
 	CheckIcon,
 	CreditCard,
 	FileText,
-	Loader2,
 	MinusIcon,
 	PlusIcon,
 } from "lucide-react";
@@ -23,6 +22,7 @@ import {
 } from "@/components/ui/card";
 import { NumberInput } from "@/components/ui/input";
 import { Progress } from "@/components/ui/progress";
+import { Skeleton } from "@/components/ui/skeleton";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
@@ -187,10 +187,11 @@ export const ShowBilling = () => {
 								</Button>
 							</div>
 							{isLoading ? (
-								<span className="text-base text-muted-foreground flex flex-row gap-3 items-center justify-center min-h-[10vh]">
-									Loading...
-									<Loader2 className="animate-spin" />
-								</span>
+								<div className="flex flex-col gap-4 min-h-[10vh]">
+									<Skeleton className="h-6 w-40" />
+									<Skeleton className="h-4 w-64" />
+									<Skeleton className="h-24 w-full max-w-sm" />
+								</div>
 							) : (
 								<>
 									{products?.map((product) => {
diff --git a/apps/dokploy/components/dashboard/settings/billing/show-invoices.tsx b/apps/dokploy/components/dashboard/settings/billing/show-invoices.tsx
index 73cc82efce..940d5b2f93 100644
--- a/apps/dokploy/components/dashboard/settings/billing/show-invoices.tsx
+++ b/apps/dokploy/components/dashboard/settings/billing/show-invoices.tsx
@@ -1,7 +1,8 @@
-import { Download, ExternalLink, FileText, Loader2 } from "lucide-react";
+import { Download, ExternalLink, FileText } from "lucide-react";
 import type Stripe from "stripe";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { ListSkeleton } from "@/components/shared/list-skeleton";
 import {
 	Table,
 	TableBody,
@@ -10,6 +11,13 @@ import {
 	TableHeader,
 	TableRow,
 } from "@/components/ui/table";
+import {
+	Empty,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyMedia,
+	EmptyTitle,
+} from "@/components/ui/empty";
 import { api } from "@/utils/api";
 
 const formatDate = (timestamp: number | null) => {
@@ -58,12 +66,7 @@ export const ShowInvoices = () => {
 	return (
 		<div className="space-y-4">
 			{isLoading ? (
-				<div className="flex items-center justify-center min-h-[20vh]">
-					<span className="text-base text-muted-foreground flex flex-row gap-3 items-center">
-						Loading invoices...
-						<Loader2 className="animate-spin" />
-					</span>
-				</div>
+				<ListSkeleton items={4} gridClassName="grid grid-cols-1 gap-3" />
 			) : invoices && invoices.length > 0 ? (
 				<div className="rounded-md border">
 					<Table>
@@ -124,13 +127,17 @@ export const ShowInvoices = () => {
 					</Table>
 				</div>
 			) : (
-				<div className="flex flex-col items-center justify-center min-h-[20vh] gap-2">
-					<FileText className="size-12 text-muted-foreground" />
-					<p className="text-base text-muted-foreground">No invoices found</p>
-					<p className="text-sm text-muted-foreground">
-						Your invoices will appear here once you have a subscription
-					</p>
-				</div>
+				<Empty className="min-h-[20vh]">
+					<EmptyHeader>
+						<EmptyMedia variant="icon">
+							<FileText className="size-6 text-muted-foreground" />
+						</EmptyMedia>
+						<EmptyTitle>No invoices yet</EmptyTitle>
+						<EmptyDescription>
+							Your invoices will appear here once you have a subscription.
+						</EmptyDescription>
+					</EmptyHeader>
+				</Empty>
 			)}
 		</div>
 	);
diff --git a/apps/dokploy/components/dashboard/settings/certificates/show-certificates.tsx b/apps/dokploy/components/dashboard/settings/certificates/show-certificates.tsx
index 8356d89c63..e442c2cfff 100644
--- a/apps/dokploy/components/dashboard/settings/certificates/show-certificates.tsx
+++ b/apps/dokploy/components/dashboard/settings/certificates/show-certificates.tsx
@@ -1,7 +1,8 @@
-import { AlertCircle, Link, Loader2, ShieldCheck, Trash2 } from "lucide-react";
+import { AlertCircle, Link, ShieldCheck, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { DialogAction } from "@/components/shared/dialog-action";
+import { ListSkeleton } from "@/components/shared/list-skeleton";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -10,6 +11,14 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import {
+	Empty,
+	EmptyContent,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyMedia,
+	EmptyTitle,
+} from "@/components/ui/empty";
 import { api } from "@/utils/api";
 import { AddCertificate } from "./add-certificate";
 import { getCertificateChainInfo, getExpirationStatus } from "./utils";
@@ -41,20 +50,24 @@ export const ShowCertificates = () => {
 					</CardHeader>
 					<CardContent className="space-y-2 py-8 border-t">
 						{isLoading ? (
-							<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[25vh]">
-								<span>Loading...</span>
-								<Loader2 className="animate-spin size-4" />
-							</div>
+							<ListSkeleton items={3} gridClassName="grid grid-cols-1 gap-3" />
 						) : (
 							<>
 								{data?.length === 0 ? (
-									<div className="flex flex-col items-center gap-3  min-h-[25vh] justify-center">
-										<ShieldCheck className="size-8 self-center text-muted-foreground" />
-										<span className="text-base text-muted-foreground text-center">
-											You don't have any certificates created
-										</span>
-										<AddCertificate />
-									</div>
+									<Empty className="min-h-[25vh]">
+										<EmptyHeader>
+											<EmptyMedia variant="icon">
+												<ShieldCheck className="size-5 text-muted-foreground" />
+											</EmptyMedia>
+											<EmptyTitle>No certificates yet</EmptyTitle>
+											<EmptyDescription>
+												Create a certificate to secure your applications.
+											</EmptyDescription>
+										</EmptyHeader>
+										<EmptyContent>
+											<AddCertificate />
+										</EmptyContent>
+									</Empty>
 								) : (
 									<div className="flex flex-col gap-4  min-h-[25vh]">
 										<div className="flex flex-col gap-4 rounded-lg ">
diff --git a/apps/dokploy/components/dashboard/settings/cluster/registry/show-registry.tsx b/apps/dokploy/components/dashboard/settings/cluster/registry/show-registry.tsx
index c5dd60622a..54b4c4e45c 100644
--- a/apps/dokploy/components/dashboard/settings/cluster/registry/show-registry.tsx
+++ b/apps/dokploy/components/dashboard/settings/cluster/registry/show-registry.tsx
@@ -1,6 +1,7 @@
-import { Loader2, Package, Trash2 } from "lucide-react";
+import { Package, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 import { DialogAction } from "@/components/shared/dialog-action";
+import { ListSkeleton } from "@/components/shared/list-skeleton";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -9,6 +10,14 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import {
+	Empty,
+	EmptyContent,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyMedia,
+	EmptyTitle,
+} from "@/components/ui/empty";
 import { api } from "@/utils/api";
 import { HandleRegistry } from "./handle-registry";
 
@@ -32,20 +41,24 @@ export const ShowRegistry = () => {
 					</CardHeader>
 					<CardContent className="space-y-2 py-8 border-t">
 						{isLoading ? (
-							<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[25vh]">
-								<span>Loading...</span>
-								<Loader2 className="animate-spin size-4" />
-							</div>
+							<ListSkeleton items={3} gridClassName="grid grid-cols-1 gap-3" />
 						) : (
 							<>
 								{data?.length === 0 ? (
-									<div className="flex flex-col items-center gap-3  min-h-[25vh] justify-center">
-										<Package className="size-8 self-center text-muted-foreground" />
-										<span className="text-base text-muted-foreground text-center">
-											You don't have any registry configurations
-										</span>
-										<HandleRegistry />
-									</div>
+									<Empty className="min-h-[25vh]">
+										<EmptyHeader>
+											<EmptyMedia variant="icon">
+												<Package className="size-5 text-muted-foreground" />
+											</EmptyMedia>
+											<EmptyTitle>No registries yet</EmptyTitle>
+											<EmptyDescription>
+												Add a registry to authenticate private image pulls.
+											</EmptyDescription>
+										</EmptyHeader>
+										<EmptyContent>
+											<HandleRegistry />
+										</EmptyContent>
+									</Empty>
 								) : (
 									<div className="flex flex-col gap-4  min-h-[25vh]">
 										<div className="flex flex-col gap-4 rounded-lg ">
diff --git a/apps/dokploy/components/dashboard/settings/destination/show-destinations.tsx b/apps/dokploy/components/dashboard/settings/destination/show-destinations.tsx
index f0ad39807c..c2d0cec2b8 100644
--- a/apps/dokploy/components/dashboard/settings/destination/show-destinations.tsx
+++ b/apps/dokploy/components/dashboard/settings/destination/show-destinations.tsx
@@ -1,6 +1,7 @@
-import { Database, FolderUp, Loader2, Trash2 } from "lucide-react";
+import { Database, FolderUp, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 import { DialogAction } from "@/components/shared/dialog-action";
+import { ListSkeleton } from "@/components/shared/list-skeleton";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -9,6 +10,14 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import {
+	Empty,
+	EmptyContent,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyMedia,
+	EmptyTitle,
+} from "@/components/ui/empty";
 import { api } from "@/utils/api";
 import { HandleDestinations } from "./handle-destinations";
 
@@ -32,21 +41,24 @@ export const ShowDestinations = () => {
 					</CardHeader>
 					<CardContent className="space-y-2 py-8 border-t">
 						{isLoading ? (
-							<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[25vh]">
-								<span>Loading...</span>
-								<Loader2 className="animate-spin size-4" />
-							</div>
+							<ListSkeleton items={3} gridClassName="grid grid-cols-1 gap-3" />
 						) : (
 							<>
 								{data?.length === 0 ? (
-									<div className="flex flex-col items-center gap-3  min-h-[25vh] justify-center">
-										<FolderUp className="size-8 self-center text-muted-foreground" />
-										<span className="text-base text-muted-foreground">
-											To create a backup it is required to set at least 1
-											provider.
-										</span>
-										<HandleDestinations />
-									</div>
+									<Empty className="min-h-[25vh]">
+										<EmptyHeader>
+											<EmptyMedia variant="icon">
+												<FolderUp className="size-5 text-muted-foreground" />
+											</EmptyMedia>
+											<EmptyTitle>No destinations yet</EmptyTitle>
+											<EmptyDescription>
+												Add at least one provider to enable backups.
+											</EmptyDescription>
+										</EmptyHeader>
+										<EmptyContent>
+											<HandleDestinations />
+										</EmptyContent>
+									</Empty>
 								) : (
 									<div className="flex flex-col gap-4  min-h-[25vh]">
 										<div className="flex flex-col gap-4 rounded-lg ">
diff --git a/apps/dokploy/components/dashboard/settings/git/show-git-providers.tsx b/apps/dokploy/components/dashboard/settings/git/show-git-providers.tsx
index 5e4c126964..372491e524 100644
--- a/apps/dokploy/components/dashboard/settings/git/show-git-providers.tsx
+++ b/apps/dokploy/components/dashboard/settings/git/show-git-providers.tsx
@@ -1,11 +1,5 @@
 import { formatDate } from "date-fns";
-import {
-	ExternalLinkIcon,
-	GitBranch,
-	ImportIcon,
-	Loader2,
-	Trash2,
-} from "lucide-react";
+import { ExternalLinkIcon, GitBranch, ImportIcon, Trash2 } from "lucide-react";
 import Link from "next/link";
 import { toast } from "sonner";
 import {
@@ -15,6 +9,7 @@ import {
 	GitlabIcon,
 } from "@/components/icons/data-tools-icons";
 import { DialogAction } from "@/components/shared/dialog-action";
+import { ListSkeleton } from "@/components/shared/list-skeleton";
 import { Badge } from "@/components/ui/badge";
 import { Button, buttonVariants } from "@/components/ui/button";
 import {
@@ -24,6 +19,14 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import {
+	Empty,
+	EmptyContent,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyMedia,
+	EmptyTitle,
+} from "@/components/ui/empty";
 import { api } from "@/utils/api";
 import { useUrl } from "@/utils/hooks/use-url";
 import { AddBitbucketProvider } from "./bitbucket/add-bitbucket-provider";
@@ -67,19 +70,21 @@ export const ShowGitProviders = () => {
 					</CardHeader>
 					<CardContent className="space-y-2 py-8 border-t">
 						{isLoading ? (
-							<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[25vh]">
-								<span>Loading...</span>
-								<Loader2 className="animate-spin size-4" />
-							</div>
+							<ListSkeleton items={3} gridClassName="grid grid-cols-1 gap-3" />
 						) : (
 							<>
 								{data?.length === 0 ? (
-									<div className="flex flex-col items-center gap-3 min-h-[25vh] justify-center">
-										<GitBranch className="size-8 self-center text-muted-foreground" />
-										<span className="text-base text-muted-foreground text-center">
-											Create your first Git Provider
-										</span>
-										<div>
+									<Empty className="min-h-[25vh]">
+										<EmptyHeader>
+											<EmptyMedia variant="icon">
+												<GitBranch className="size-5 text-muted-foreground" />
+											</EmptyMedia>
+											<EmptyTitle>No Git providers yet</EmptyTitle>
+											<EmptyDescription>
+												Connect a Git provider to enable repository access.
+											</EmptyDescription>
+										</EmptyHeader>
+										<EmptyContent className="max-w-2xl">
 											<div className="flex items-center bg-sidebar p-1 w-full rounded-lg">
 												<div className="flex flex-wrap items-center gap-4 p-3.5 rounded-lg bg-background border w-full [&>button]:grow">
 													<AddGithubProvider />
@@ -88,8 +93,8 @@ export const ShowGitProviders = () => {
 													<AddGiteaProvider />
 												</div>
 											</div>
-										</div>
-									</div>
+										</EmptyContent>
+									</Empty>
 								) : (
 									<div className="flex flex-col gap-4 min-h-[25vh]">
 										<div className="flex flex-col gap-2 rounded-lg ">
diff --git a/apps/dokploy/components/dashboard/settings/handle-ai.tsx b/apps/dokploy/components/dashboard/settings/handle-ai.tsx
index b5a0d51d87..3ed161cc1c 100644
--- a/apps/dokploy/components/dashboard/settings/handle-ai.tsx
+++ b/apps/dokploy/components/dashboard/settings/handle-ai.tsx
@@ -31,6 +31,13 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
+import {
+	Empty,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyTitle,
+} from "@/components/ui/empty";
+import { Skeleton } from "@/components/ui/skeleton";
 import { Input } from "@/components/ui/input";
 import {
 	Popover,
@@ -247,15 +254,20 @@ export const HandleAi = ({ aiId }: Props) => {
 						)}
 
 						{isLoadingServerModels && (
-							<span className="text-sm text-muted-foreground">
-								Loading models...
-							</span>
+							<div className="py-2">
+								<Skeleton className="h-4 w-32" />
+							</div>
 						)}
 
 						{!isLoadingServerModels && !models?.length && (
-							<span className="text-sm text-muted-foreground">
-								No models available
-							</span>
+							<Empty className="border-none p-2">
+								<EmptyHeader>
+									<EmptyTitle>No models available</EmptyTitle>
+									<EmptyDescription>
+										Check your API key or provider settings.
+									</EmptyDescription>
+								</EmptyHeader>
+							</Empty>
 						)}
 
 						{!isLoadingServerModels && models && models.length > 0 && (
diff --git a/apps/dokploy/components/dashboard/settings/notifications/show-notifications.tsx b/apps/dokploy/components/dashboard/settings/notifications/show-notifications.tsx
index 06ffd91e42..faea143507 100644
--- a/apps/dokploy/components/dashboard/settings/notifications/show-notifications.tsx
+++ b/apps/dokploy/components/dashboard/settings/notifications/show-notifications.tsx
@@ -1,4 +1,4 @@
-import { Bell, Loader2, Mail, PenBoxIcon, Trash2 } from "lucide-react";
+import { Bell, Mail, PenBoxIcon, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 import {
 	DiscordIcon,
@@ -9,6 +9,7 @@ import {
 	TelegramIcon,
 } from "@/components/icons/notification-icons";
 import { DialogAction } from "@/components/shared/dialog-action";
+import { ListSkeleton } from "@/components/shared/list-skeleton";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -17,6 +18,14 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import {
+	Empty,
+	EmptyContent,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyMedia,
+	EmptyTitle,
+} from "@/components/ui/empty";
 import { api } from "@/utils/api";
 import { HandleNotifications } from "./handle-notifications";
 
@@ -41,21 +50,24 @@ export const ShowNotifications = () => {
 					</CardHeader>
 					<CardContent className="space-y-2 py-8 border-t">
 						{isLoading ? (
-							<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[25vh]">
-								<span>Loading...</span>
-								<Loader2 className="animate-spin size-4" />
-							</div>
+							<ListSkeleton items={3} gridClassName="grid grid-cols-1 gap-3" />
 						) : (
 							<>
 								{data?.length === 0 ? (
-									<div className="flex flex-col items-center gap-3  min-h-[25vh] justify-center">
-										<Bell />
-										<span className="text-base text-muted-foreground text-center">
-											To send notifications it is required to set at least 1
-											provider.
-										</span>
-										<HandleNotifications />
-									</div>
+									<Empty className="min-h-[25vh]">
+										<EmptyHeader>
+											<EmptyMedia variant="icon">
+												<Bell className="size-5 text-muted-foreground" />
+											</EmptyMedia>
+											<EmptyTitle>No notification providers yet</EmptyTitle>
+											<EmptyDescription>
+												Add at least one provider to start receiving alerts.
+											</EmptyDescription>
+										</EmptyHeader>
+										<EmptyContent>
+											<HandleNotifications />
+										</EmptyContent>
+									</Empty>
 								) : (
 									<div className="flex flex-col gap-4 min-h-[25vh]">
 										<div className="flex flex-col gap-4 rounded-lg ">
diff --git a/apps/dokploy/components/dashboard/settings/profile/profile-form.tsx b/apps/dokploy/components/dashboard/settings/profile/profile-form.tsx
index ad66aa0fab..376c0923ec 100644
--- a/apps/dokploy/components/dashboard/settings/profile/profile-form.tsx
+++ b/apps/dokploy/components/dashboard/settings/profile/profile-form.tsx
@@ -1,5 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Loader2, Palette, User } from "lucide-react";
+import { Palette, User } from "lucide-react";
 import { useTranslation } from "next-i18next";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -25,6 +25,7 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import { Skeleton } from "@/components/ui/skeleton";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Switch } from "@/components/ui/switch";
 import { getAvatarType, isSolidColorAvatar } from "@/lib/avatar-utils";
@@ -170,9 +171,13 @@ export const ProfileForm = () => {
 					<CardContent className="space-y-2 py-8 border-t">
 						{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 						{isLoading ? (
-							<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[35vh]">
-								<span>Loading...</span>
-								<Loader2 className="animate-spin size-4" />
+							<div className="flex flex-col gap-4 min-h-[35vh]">
+								<Skeleton className="h-6 w-40" />
+								<div className="space-y-3">
+									<Skeleton className="h-10 w-full" />
+									<Skeleton className="h-10 w-full" />
+									<Skeleton className="h-10 w-full" />
+								</div>
 							</div>
 						) : (
 							<>
diff --git a/apps/dokploy/components/dashboard/settings/servers/show-servers.tsx b/apps/dokploy/components/dashboard/settings/servers/show-servers.tsx
index 92d6fc5c30..259b864c81 100644
--- a/apps/dokploy/components/dashboard/settings/servers/show-servers.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/show-servers.tsx
@@ -3,7 +3,6 @@ import {
 	Clock,
 	Key,
 	KeyIcon,
-	Loader2,
 	MoreHorizontal,
 	Network,
 	ServerIcon,
@@ -26,12 +25,21 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import {
+	Empty,
+	EmptyContent,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyMedia,
+	EmptyTitle,
+} from "@/components/ui/empty";
 import {
 	DropdownMenu,
 	DropdownMenuContent,
 	DropdownMenuLabel,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
 	Tooltip,
 	TooltipContent,
@@ -89,36 +97,63 @@ export const ShowServers = () => {
 					</CardHeader>
 					<CardContent className="space-y-2 py-8 border-t">
 						{isLoading ? (
-							<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[25vh]">
-								<span>Loading...</span>
-								<Loader2 className="animate-spin size-4" />
+							<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 min-h-[25vh]">
+								{Array.from({ length: 3 }).map((_, index) => (
+									<Card
+										key={`server-skeleton-${index}`}
+										className="bg-background"
+									>
+										<CardHeader className="space-y-2">
+											<Skeleton className="h-5 w-32" />
+											<Skeleton className="h-4 w-44" />
+										</CardHeader>
+										<CardContent className="space-y-3">
+											<Skeleton className="h-4 w-40" />
+											<Skeleton className="h-4 w-28" />
+											<Skeleton className="h-4 w-36" />
+										</CardContent>
+									</Card>
+								))}
 							</div>
 						) : (
 							<>
 								{sshKeys?.length === 0 && data?.length === 0 ? (
-									<div className="flex flex-col items-center gap-3 min-h-[25vh] justify-center">
-										<KeyIcon className="size-8" />
-										<span className="text-base text-muted-foreground">
-											No SSH Keys found. Add a SSH Key to start adding servers.{" "}
-											<Link
-												href="/dashboard/settings/ssh-keys"
-												className="text-primary"
-											>
-												Add SSH Key
-											</Link>
-										</span>
-									</div>
+									<Empty className="min-h-[25vh]">
+										<EmptyHeader>
+											<EmptyMedia variant="icon">
+												<KeyIcon className="size-5 text-muted-foreground" />
+											</EmptyMedia>
+											<EmptyTitle>No SSH keys yet</EmptyTitle>
+											<EmptyDescription>
+												Add an SSH key to start connecting servers.
+											</EmptyDescription>
+										</EmptyHeader>
+										<EmptyContent>
+											<Button asChild>
+												<Link href="/dashboard/settings/ssh-keys">
+													Add SSH Key
+												</Link>
+											</Button>
+										</EmptyContent>
+									</Empty>
 								) : (
 									<>
 										{data?.length === 0 ? (
-											<div className="flex flex-col items-center gap-3  min-h-[25vh] justify-center">
-												<ServerIcon className="size-8 self-center text-muted-foreground" />
-												<span className="text-base text-muted-foreground">
-													Start adding servers to deploy your applications
-													remotely.
-												</span>
-												<HandleServers />
-											</div>
+											<Empty className="min-h-[25vh]">
+												<EmptyHeader>
+													<EmptyMedia variant="icon">
+														<ServerIcon className="size-5 text-muted-foreground" />
+													</EmptyMedia>
+													<EmptyTitle>No servers yet</EmptyTitle>
+													<EmptyDescription>
+														Start adding servers to deploy your applications
+														remotely.
+													</EmptyDescription>
+												</EmptyHeader>
+												<EmptyContent>
+													<HandleServers />
+												</EmptyContent>
+											</Empty>
 										) : (
 											<div className="flex flex-col gap-4 min-h-[25vh]">
 												<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
diff --git a/apps/dokploy/components/dashboard/settings/ssh-keys/show-ssh-keys.tsx b/apps/dokploy/components/dashboard/settings/ssh-keys/show-ssh-keys.tsx
index 0a29f2d8f0..304cce196a 100644
--- a/apps/dokploy/components/dashboard/settings/ssh-keys/show-ssh-keys.tsx
+++ b/apps/dokploy/components/dashboard/settings/ssh-keys/show-ssh-keys.tsx
@@ -1,7 +1,8 @@
 import { formatDistanceToNow } from "date-fns";
-import { KeyRound, Loader2, Trash2 } from "lucide-react";
+import { KeyRound, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 import { DialogAction } from "@/components/shared/dialog-action";
+import { ListSkeleton } from "@/components/shared/list-skeleton";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -10,6 +11,14 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import {
+	Empty,
+	EmptyContent,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyMedia,
+	EmptyTitle,
+} from "@/components/ui/empty";
 import { api } from "@/utils/api";
 import { HandleSSHKeys } from "./handle-ssh-keys";
 
@@ -34,20 +43,24 @@ export const ShowDestinations = () => {
 					</CardHeader>
 					<CardContent className="space-y-2 py-8 border-t">
 						{isLoading ? (
-							<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[25vh]">
-								<span>Loading...</span>
-								<Loader2 className="animate-spin size-4" />
-							</div>
+							<ListSkeleton items={3} gridClassName="grid grid-cols-1 gap-3" />
 						) : (
 							<>
 								{data?.length === 0 ? (
-									<div className="flex flex-col items-center gap-3  min-h-[25vh] justify-center">
-										<KeyRound className="size-8 self-center text-muted-foreground" />
-										<span className="text-base text-muted-foreground text-center">
-											You don't have any SSH keys
-										</span>
-										<HandleSSHKeys />
-									</div>
+									<Empty className="min-h-[25vh]">
+										<EmptyHeader>
+											<EmptyMedia variant="icon">
+												<KeyRound className="size-5 text-muted-foreground" />
+											</EmptyMedia>
+											<EmptyTitle>No SSH keys yet</EmptyTitle>
+											<EmptyDescription>
+												Add an SSH key to connect servers and private repos.
+											</EmptyDescription>
+										</EmptyHeader>
+										<EmptyContent>
+											<HandleSSHKeys />
+										</EmptyContent>
+									</Empty>
 								) : (
 									<div className="flex flex-col gap-4  min-h-[25vh]">
 										<div className="flex flex-col gap-4 rounded-lg ">
diff --git a/apps/dokploy/components/dashboard/settings/users/add-permissions.tsx b/apps/dokploy/components/dashboard/settings/users/add-permissions.tsx
index 7c6ef8b846..9b7039703c 100644
--- a/apps/dokploy/components/dashboard/settings/users/add-permissions.tsx
+++ b/apps/dokploy/components/dashboard/settings/users/add-permissions.tsx
@@ -25,6 +25,12 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
+import {
+	Empty,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyTitle,
+} from "@/components/ui/empty";
 import { Switch } from "@/components/ui/switch";
 import { api, type RouterOutputs } from "@/utils/api";
 
@@ -510,9 +516,14 @@ export const AddUserPermissions = ({ userId }: Props) => {
 										</FormDescription>
 									</div>
 									{projects?.length === 0 && (
-										<p className="text-sm text-muted-foreground">
-											No projects found
-										</p>
+										<Empty className="border-none p-4">
+											<EmptyHeader>
+												<EmptyTitle>No projects found</EmptyTitle>
+												<EmptyDescription>
+													Add a project before assigning access.
+												</EmptyDescription>
+											</EmptyHeader>
+										</Empty>
 									)}
 									<div className="grid md:grid-cols-1 gap-4">
 										{projects?.map((project, projectIndex) => {
@@ -604,9 +615,16 @@ export const AddUserPermissions = ({ userId }: Props) => {
 																{/* Environments */}
 																<div className="ml-6 w-full space-y-3">
 																	{project.environments.length === 0 && (
-																		<p className="text-sm text-muted-foreground">
-																			No environments found
-																		</p>
+																		<Empty className="border-none p-2">
+																			<EmptyHeader>
+																				<EmptyTitle>
+																					No environments found
+																				</EmptyTitle>
+																				<EmptyDescription>
+																					Add an environment to grant access.
+																				</EmptyDescription>
+																			</EmptyHeader>
+																		</Empty>
 																	)}
 																	{project.environments.map(
 																		(environment, envIndex) => {
@@ -708,9 +726,17 @@ export const AddUserPermissions = ({ userId }: Props) => {
 																					{/* Services */}
 																					<div className="ml-4 space-y-2">
 																						{services.length === 0 && (
-																							<p className="text-xs text-muted-foreground">
-																								No services found
-																							</p>
+																							<Empty className="border-none p-2">
+																								<EmptyHeader>
+																									<EmptyTitle>
+																										No services found
+																									</EmptyTitle>
+																									<EmptyDescription>
+																										Add a service to grant
+																										access.
+																									</EmptyDescription>
+																								</EmptyHeader>
+																							</Empty>
 																						)}
 																						{services.map(
 																							(service, serviceIndex) => (
diff --git a/apps/dokploy/components/dashboard/settings/users/show-invitations.tsx b/apps/dokploy/components/dashboard/settings/users/show-invitations.tsx
index 6e56f4c708..5ef78b8eab 100644
--- a/apps/dokploy/components/dashboard/settings/users/show-invitations.tsx
+++ b/apps/dokploy/components/dashboard/settings/users/show-invitations.tsx
@@ -1,7 +1,8 @@
 import copy from "copy-to-clipboard";
 import { format, isPast } from "date-fns";
-import { Loader2, Mail, MoreHorizontal, Users } from "lucide-react";
+import { Mail, MoreHorizontal, Users } from "lucide-react";
 import { toast } from "sonner";
+import { ListSkeleton } from "@/components/shared/list-skeleton";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -11,6 +12,14 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import {
+	Empty,
+	EmptyContent,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyMedia,
+	EmptyTitle,
+} from "@/components/ui/empty";
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -53,20 +62,24 @@ export const ShowInvitations = () => {
 					</CardHeader>
 					<CardContent className="space-y-2 py-8 border-t">
 						{isLoading ? (
-							<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[25vh]">
-								<span>Loading...</span>
-								<Loader2 className="animate-spin size-4" />
-							</div>
+							<ListSkeleton items={4} gridClassName="grid grid-cols-1 gap-3" />
 						) : (
 							<>
 								{data?.length === 0 ? (
-									<div className="flex flex-col items-center gap-3  min-h-[25vh] justify-center">
-										<Users className="size-8 self-center text-muted-foreground" />
-										<span className="text-base text-muted-foreground">
-											Invite users to your organization
-										</span>
-										<AddInvitation />
-									</div>
+									<Empty className="min-h-[25vh]">
+										<EmptyHeader>
+											<EmptyMedia variant="icon">
+												<Users className="size-5 text-muted-foreground" />
+											</EmptyMedia>
+											<EmptyTitle>No invitations yet</EmptyTitle>
+											<EmptyDescription>
+												Invite users to your organization.
+											</EmptyDescription>
+										</EmptyHeader>
+										<EmptyContent>
+											<AddInvitation />
+										</EmptyContent>
+									</Empty>
 								) : (
 									<div className="flex flex-col gap-4  min-h-[25vh]">
 										<Table>
diff --git a/apps/dokploy/components/dashboard/settings/users/show-users.tsx b/apps/dokploy/components/dashboard/settings/users/show-users.tsx
index a52cfda6dd..b216c3a6ff 100644
--- a/apps/dokploy/components/dashboard/settings/users/show-users.tsx
+++ b/apps/dokploy/components/dashboard/settings/users/show-users.tsx
@@ -1,7 +1,8 @@
 import { format } from "date-fns";
-import { Loader2, MoreHorizontal, Users } from "lucide-react";
+import { MoreHorizontal, Users } from "lucide-react";
 import { toast } from "sonner";
 import { DialogAction } from "@/components/shared/dialog-action";
+import { ListSkeleton } from "@/components/shared/list-skeleton";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -11,6 +12,13 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import {
+	Empty,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyMedia,
+	EmptyTitle,
+} from "@/components/ui/empty";
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -54,19 +62,21 @@ export const ShowUsers = () => {
 					</CardHeader>
 					<CardContent className="space-y-2 py-8 border-t">
 						{isLoading ? (
-							<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[25vh]">
-								<span>Loading...</span>
-								<Loader2 className="animate-spin size-4" />
-							</div>
+							<ListSkeleton items={4} gridClassName="grid grid-cols-1 gap-3" />
 						) : (
 							<>
 								{data?.length === 0 ? (
-									<div className="flex flex-col items-center gap-3  min-h-[25vh] justify-center">
-										<Users className="size-8 self-center text-muted-foreground" />
-										<span className="text-base text-muted-foreground">
-											Invite users to your Dokploy account
-										</span>
-									</div>
+									<Empty className="min-h-[25vh]">
+										<EmptyHeader>
+											<EmptyMedia variant="icon">
+												<Users className="size-5 text-muted-foreground" />
+											</EmptyMedia>
+											<EmptyTitle>No users yet</EmptyTitle>
+											<EmptyDescription>
+												Invite teammates to collaborate on your Dokploy account.
+											</EmptyDescription>
+										</EmptyHeader>
+									</Empty>
 								) : (
 									<div className="flex flex-col gap-4  min-h-[25vh]">
 										<Table>
diff --git a/apps/dokploy/components/dashboard/settings/web-server/docker-terminal-modal.tsx b/apps/dokploy/components/dashboard/settings/web-server/docker-terminal-modal.tsx
index 30471bcbac..bac83dcf76 100644
--- a/apps/dokploy/components/dashboard/settings/web-server/docker-terminal-modal.tsx
+++ b/apps/dokploy/components/dashboard/settings/web-server/docker-terminal-modal.tsx
@@ -1,4 +1,4 @@
-import { Loader2 } from "lucide-react";
+import { Skeleton } from "@/components/ui/skeleton";
 import dynamic from "next/dynamic";
 import type React from "react";
 import { useEffect, useState } from "react";
@@ -102,9 +102,8 @@ export const DockerTerminalModal = ({
 				<Select onValueChange={setContainerId} value={containerId}>
 					<SelectTrigger>
 						{isLoading ? (
-							<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground">
-								<span>Loading...</span>
-								<Loader2 className="animate-spin size-4" />
+							<div className="flex items-center gap-2">
+								<Skeleton className="h-4 w-24" />
 							</div>
 						) : (
 							<SelectValue placeholder="Select a container" />
diff --git a/apps/dokploy/components/dashboard/settings/web-server/show-modal-logs.tsx b/apps/dokploy/components/dashboard/settings/web-server/show-modal-logs.tsx
index 9aac258200..ca2763f968 100644
--- a/apps/dokploy/components/dashboard/settings/web-server/show-modal-logs.tsx
+++ b/apps/dokploy/components/dashboard/settings/web-server/show-modal-logs.tsx
@@ -1,4 +1,4 @@
-import { Loader2 } from "lucide-react";
+import { Skeleton } from "@/components/ui/skeleton";
 import dynamic from "next/dynamic";
 import type React from "react";
 import { useEffect, useState } from "react";
@@ -77,9 +77,8 @@ export const ShowModalLogs = ({
 					<Select onValueChange={setContainerId} value={containerId}>
 						<SelectTrigger>
 							{isLoading ? (
-								<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground">
-									<span>Loading...</span>
-									<Loader2 className="animate-spin size-4" />
+								<div className="flex items-center gap-2">
+									<Skeleton className="h-4 w-24" />
 								</div>
 							) : (
 								<SelectValue placeholder="Select a container" />
diff --git a/apps/dokploy/components/dashboard/swarm/applications/data-table.tsx b/apps/dokploy/components/dashboard/swarm/applications/data-table.tsx
index 1fa97bbf37..f5113e849d 100644
--- a/apps/dokploy/components/dashboard/swarm/applications/data-table.tsx
+++ b/apps/dokploy/components/dashboard/swarm/applications/data-table.tsx
@@ -153,15 +153,6 @@ export function DataTable<TData, TValue>({
 									className="h-24 text-center"
 								>
 									No results.
-									{/* {isLoading ? (
-                    <div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
-                      <span className="text-muted-foreground text-lg font-medium">
-                        Loading...
-                      </span>
-                    </div>
-                  ) : (
-                    <>No results.</>
-                  )} */}
 								</TableCell>
 							</TableRow>
 						)}
diff --git a/apps/dokploy/components/dashboard/swarm/applications/show-applications.tsx b/apps/dokploy/components/dashboard/swarm/applications/show-applications.tsx
index 6734991f10..6a2d4c2b0a 100644
--- a/apps/dokploy/components/dashboard/swarm/applications/show-applications.tsx
+++ b/apps/dokploy/components/dashboard/swarm/applications/show-applications.tsx
@@ -1,4 +1,4 @@
-import { Layers, Loader2 } from "lucide-react";
+import { Layers, ServerOff } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -8,6 +8,13 @@ import {
 	DialogTitle,
 	DialogTrigger,
 } from "@/components/ui/dialog";
+import {
+	Empty,
+	EmptyHeader,
+	EmptyMedia,
+	EmptyTitle,
+} from "@/components/ui/empty";
+import { Skeleton } from "@/components/ui/skeleton";
 import { api } from "@/utils/api";
 import { type ApplicationList, columns } from "./columns";
 import { DataTable } from "./data-table";
@@ -33,8 +40,8 @@ export const ShowNodeApplications = ({ serverId }: Props) => {
 		return (
 			<Dialog>
 				<DialogTrigger asChild>
-					<Button variant="outline" size="sm" className="w-full">
-						<Loader2 className="h-4 w-4 mr-2 animate-spin" />
+					<Button variant="outline" size="sm" className="w-full" disabled>
+						<Skeleton className="h-4 w-20" />
 					</Button>
 				</DialogTrigger>
 			</Dialog>
@@ -43,9 +50,14 @@ export const ShowNodeApplications = ({ serverId }: Props) => {
 
 	if (!NodeApps || !NodeAppDetails) {
 		return (
-			<span className="text-sm w-full flex text-center justify-center items-center">
-				No data found
-			</span>
+			<Empty className="min-h-[6rem] border-none p-4">
+				<EmptyHeader>
+					<EmptyMedia variant="icon">
+						<ServerOff className="size-4 text-muted-foreground" />
+					</EmptyMedia>
+					<EmptyTitle>No data found</EmptyTitle>
+				</EmptyHeader>
+			</Empty>
 		);
 	}
 
diff --git a/apps/dokploy/components/dashboard/swarm/monitoring-card.tsx b/apps/dokploy/components/dashboard/swarm/monitoring-card.tsx
index ef6791ffe9..ce45398d89 100644
--- a/apps/dokploy/components/dashboard/swarm/monitoring-card.tsx
+++ b/apps/dokploy/components/dashboard/swarm/monitoring-card.tsx
@@ -1,14 +1,23 @@
 import {
 	Activity,
-	Loader2,
 	Monitor,
 	Server,
+	ServerOff,
 	Settings,
 	WorkflowIcon,
 } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+	Empty,
+	EmptyContent,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyMedia,
+	EmptyTitle,
+} from "@/components/ui/empty";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
 	Tooltip,
 	TooltipContent,
@@ -29,29 +38,93 @@ export default function SwarmMonitorCard({ serverId }: Props) {
 
 	if (isLoading) {
 		return (
-			<div className="w-full max-w-7xl mx-auto">
-				<div className="mb-6 border min-h-[55vh] flex rounded-lg h-full items-center justify-center  text-muted-foreground">
-					{/* <div className="flex items-center justify-center h-full text-muted-foreground"> */}
-
-					<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[55vh]">
-						<span>Loading...</span>
-						<Loader2 className="animate-spin size-4" />
+			<Card className="h-full bg-sidebar p-2.5 rounded-xl mx-auto w-full">
+				<div className="rounded-xl bg-background shadow-md p-6 flex flex-col gap-6">
+					<div className="flex items-center flex-wrap gap-4 justify-between">
+						<div className="space-y-2">
+							<Skeleton className="h-6 w-56" />
+							<Skeleton className="h-4 w-72" />
+						</div>
+						{!serverId && <Skeleton className="h-10 w-40" />}
+					</div>
+					<div className="grid gap-6 lg:grid-cols-3">
+						{Array.from({ length: 3 }).map((_, index) => (
+							<Card
+								key={`swarm-stat-skeleton-${index}`}
+								className="bg-background"
+							>
+								<CardHeader className="space-y-2">
+									<Skeleton className="h-4 w-24" />
+									<Skeleton className="h-8 w-16" />
+								</CardHeader>
+							</Card>
+						))}
+					</div>
+					<div className="grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4">
+						{Array.from({ length: 6 }).map((_, index) => (
+							<Skeleton
+								key={`swarm-node-skeleton-${index}`}
+								className="h-40 w-full rounded-xl"
+							/>
+						))}
 					</div>
-					{/* </div> */}
 				</div>
-			</div>
+			</Card>
 		);
 	}
 
 	if (!nodes) {
 		return (
-			<div className="w-full max-w-7xl mx-auto">
-				<div className="mb-6 border min-h-[55vh] flex justify-center items-center rounded-lg h-full">
-					<div className="flex items-center justify-center h-full  text-destructive">
-						<span>Failed to load data</span>
-					</div>
+			<Card className="h-full bg-sidebar p-2.5 rounded-xl mx-auto w-full">
+				<div className="rounded-xl bg-background shadow-md p-6">
+					<Empty className="min-h-[55vh]">
+						<EmptyHeader>
+							<EmptyMedia variant="icon">
+								<ServerOff className="size-5 text-muted-foreground" />
+							</EmptyMedia>
+							<EmptyTitle>Unable to load swarm data</EmptyTitle>
+							<EmptyDescription>
+								We couldn't reach the swarm API. Check your server connection
+								and try again.
+							</EmptyDescription>
+						</EmptyHeader>
+						<EmptyContent>
+							<Button onClick={() => window.location.reload()}>Retry</Button>
+						</EmptyContent>
+					</Empty>
 				</div>
-			</div>
+			</Card>
+		);
+	}
+
+	if (nodes.length === 0) {
+		return (
+			<Card className="h-full bg-sidebar p-2.5 rounded-xl mx-auto w-full">
+				<div className="rounded-xl bg-background shadow-md p-6">
+					<Empty className="min-h-[55vh]">
+						<EmptyHeader>
+							<EmptyMedia variant="icon">
+								<Server className="size-5 text-muted-foreground" />
+							</EmptyMedia>
+							<EmptyTitle>No swarm nodes yet</EmptyTitle>
+							<EmptyDescription>
+								Add nodes to start monitoring your cluster health and activity.
+							</EmptyDescription>
+						</EmptyHeader>
+						{!serverId && (
+							<EmptyContent>
+								<Button
+									onClick={() =>
+										window.location.replace("/dashboard/settings/cluster")
+									}
+								>
+									Manage Cluster
+								</Button>
+							</EmptyContent>
+						)}
+					</Empty>
+				</div>
+			</Card>
 		);
 	}
 
diff --git a/apps/dokploy/components/layouts/onboarding-layout.tsx b/apps/dokploy/components/layouts/onboarding-layout.tsx
index fff5413e06..32b0e62f49 100644
--- a/apps/dokploy/components/layouts/onboarding-layout.tsx
+++ b/apps/dokploy/components/layouts/onboarding-layout.tsx
@@ -34,13 +34,16 @@ export const OnboardingLayout = ({ children }: Props) => {
 					{children}
 				</div>
 				<div className="flex items-center gap-4 justify-center absolute bottom-4 right-4 text-muted-foreground">
-					<Button variant="ghost" size="icon">
-						<Link href="https://github.com/dokploy/dokploy">
+					<Button variant="ghost" size="icon" asChild>
+						<Link
+							href="https://github.com/dokploy/dokploy"
+							aria-label="Dokploy on GitHub"
+						>
 							<GithubIcon />
 						</Link>
 					</Button>
-					<Button variant="ghost" size="icon">
-						<Link href="https://x.com/getdokploy">
+					<Button variant="ghost" size="icon" asChild>
+						<Link href="https://x.com/getdokploy" aria-label="Dokploy on X">
 							<svg
 								stroke="currentColor"
 								fill="currentColor"
@@ -53,8 +56,11 @@ export const OnboardingLayout = ({ children }: Props) => {
 							</svg>
 						</Link>
 					</Button>
-					<Button variant="ghost" size="icon">
-						<Link href="https://discord.com/invite/2tBnJ3jDJc">
+					<Button variant="ghost" size="icon" asChild>
+						<Link
+							href="https://discord.com/invite/2tBnJ3jDJc"
+							aria-label="Join Dokploy on Discord"
+						>
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
 								viewBox="0 0 48 48"
diff --git a/apps/dokploy/components/shared/list-skeleton.tsx b/apps/dokploy/components/shared/list-skeleton.tsx
new file mode 100644
index 0000000000..8b1157b910
--- /dev/null
+++ b/apps/dokploy/components/shared/list-skeleton.tsx
@@ -0,0 +1,54 @@
+import * as React from "react";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+
+interface ListSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+	items?: number;
+	gridClassName?: string;
+	itemClassName?: string;
+	showHeader?: boolean;
+	headerLines?: number;
+}
+
+const headerWidths = ["w-48", "w-64", "w-40", "w-56"];
+const itemLineWidths = ["w-1/2", "w-2/3", "w-1/3"];
+
+export function ListSkeleton({
+	items = 6,
+	gridClassName,
+	itemClassName,
+	showHeader = false,
+	headerLines = 2,
+	className,
+	...props
+}: ListSkeletonProps) {
+	return (
+		<div className={cn("flex flex-col gap-4", className)} {...props}>
+			{showHeader && (
+				<div className="space-y-2">
+					{Array.from({ length: headerLines }).map((_, index) => (
+						<Skeleton
+							key={`list-skeleton-header-${index}`}
+							className={cn("h-4", headerWidths[index % headerWidths.length])}
+						/>
+					))}
+				</div>
+			)}
+			<div className={cn("grid gap-4", gridClassName)}>
+				{Array.from({ length: items }).map((_, index) => (
+					<div
+						key={`list-skeleton-item-${index}`}
+						className={cn(
+							"rounded-xl border bg-card p-4 space-y-3",
+							itemClassName,
+						)}
+					>
+						<Skeleton className={cn("h-4", itemLineWidths[0])} />
+						<Skeleton className={cn("h-4", itemLineWidths[1])} />
+						<Skeleton className={cn("h-3", itemLineWidths[2])} />
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}
diff --git a/apps/dokploy/components/ui/empty.tsx b/apps/dokploy/components/ui/empty.tsx
new file mode 100644
index 0000000000..9240502aea
--- /dev/null
+++ b/apps/dokploy/components/ui/empty.tsx
@@ -0,0 +1,104 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="empty"
+			className={cn(
+				"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-lg border-dashed p-6 text-center md:p-12",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="empty-header"
+			className={cn(
+				"flex max-w-sm flex-col items-center gap-2 text-center",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+const emptyMediaVariants = cva(
+	"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: "bg-transparent",
+				icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+
+function EmptyMedia({
+	className,
+	variant = "default",
+	...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+	return (
+		<div
+			data-slot="empty-icon"
+			data-variant={variant}
+			className={cn(emptyMediaVariants({ variant, className }))}
+			{...props}
+		/>
+	);
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="empty-title"
+			className={cn("text-lg font-medium tracking-tight", className)}
+			{...props}
+		/>
+	);
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+	return (
+		<div
+			data-slot="empty-description"
+			className={cn(
+				"text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="empty-content"
+			className={cn(
+				"flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Empty,
+	EmptyHeader,
+	EmptyTitle,
+	EmptyDescription,
+	EmptyContent,
+	EmptyMedia,
+};
diff --git a/apps/dokploy/components/ui/input.tsx b/apps/dokploy/components/ui/input.tsx
index ddeb368944..53ca9190b6 100644
--- a/apps/dokploy/components/ui/input.tsx
+++ b/apps/dokploy/components/ui/input.tsx
@@ -89,20 +89,20 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 							{shouldShowGenerator && (
 								<button
 									type="button"
-									className="hover:text-foreground focus:outline-none"
+									className="rounded-sm p-0.5 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
 									onClick={handleGeneratePassword}
 									aria-label="Generate password"
 									title="Generate password"
-									tabIndex={-1}
 								>
 									<RefreshCcw className="h-4 w-4" />
 								</button>
 							)}
 							<button
 								type="button"
-								className="hover:text-foreground focus:outline-none"
+								className="rounded-sm p-0.5 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
 								onClick={() => setShowPassword(!showPassword)}
-								tabIndex={-1}
+								aria-label={showPassword ? "Hide password" : "Show password"}
+								aria-pressed={showPassword}
 							>
 								{showPassword ? (
 									<EyeOffIcon className="h-4 w-4" />
diff --git a/apps/dokploy/pages/dashboard/monitoring.tsx b/apps/dokploy/pages/dashboard/monitoring.tsx
index 51339e6bad..e46529b83a 100644
--- a/apps/dokploy/pages/dashboard/monitoring.tsx
+++ b/apps/dokploy/pages/dashboard/monitoring.tsx
@@ -1,12 +1,12 @@
 import { IS_CLOUD } from "@dokploy/server/constants";
 import { validateRequest } from "@dokploy/server/lib/auth";
-import { Loader2 } from "lucide-react";
 import type { GetServerSidePropsContext } from "next";
 import type { ReactElement } from "react";
 import { ContainerFreeMonitoring } from "@/components/dashboard/monitoring/free/container/show-free-container-monitoring";
 import { ShowPaidMonitoring } from "@/components/dashboard/monitoring/paid/servers/show-paid-monitoring";
 import { DashboardLayout } from "@/components/layouts/dashboard-layout";
 import { Card } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
 import { useLocalStorage } from "@/hooks/useLocalStorage";
 import { api } from "@/utils/api";
 
@@ -37,9 +37,12 @@ const Dashboard = () => {
 			</AlertBlock> */}
 			{isLoading ? (
 				<Card className="bg-sidebar  p-2.5 rounded-xl  mx-auto  items-center">
-					<div className="rounded-xl bg-background flex shadow-md px-4 min-h-[50vh] justify-center items-center text-muted-foreground">
-						Loading...
-						<Loader2 className="h-4 w-4 animate-spin" />
+					<div className="rounded-xl bg-background flex shadow-md px-6 py-8 min-h-[50vh]">
+						<div className="w-full space-y-4">
+							<Skeleton className="h-6 w-48" />
+							<Skeleton className="h-4 w-80" />
+							<Skeleton className="h-[35vh] w-full" />
+						</div>
 					</div>
 				</Card>
 			) : (
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId].tsx
index af901311e2..76fede50d4 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId].tsx
@@ -50,6 +50,7 @@ import { DateTooltip } from "@/components/shared/date-tooltip";
 import { DialogAction } from "@/components/shared/dialog-action";
 import { FocusShortcutInput } from "@/components/shared/focus-shortcut-input";
 import { StatusTooltip } from "@/components/shared/status-tooltip";
+import { ListSkeleton } from "@/components/shared/list-skeleton";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -59,6 +60,13 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import {
+	Empty,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyMedia,
+	EmptyTitle,
+} from "@/components/ui/empty";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
 	Command,
@@ -846,20 +854,25 @@ const EnvironmentPage = (
 
 	if (isLoading) {
 		return (
-			<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[60vh]">
-				<span>Loading...</span>
-				<Loader2 className="animate-spin size-4" />
+			<div className="py-8">
+				<ListSkeleton
+					items={6}
+					gridClassName="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-5"
+				/>
 			</div>
 		);
 	}
 
 	if (!currentEnvironment) {
 		return (
-			<div className="flex flex-col items-center justify-center min-h-[60vh]">
-				<span className="text-lg font-medium text-muted-foreground">
-					Environment not found
-				</span>
-			</div>
+			<Empty className="min-h-[60vh]">
+				<EmptyHeader>
+					<EmptyTitle>Environment not found</EmptyTitle>
+					<EmptyDescription>
+						This environment may have been removed or you don't have access.
+					</EmptyDescription>
+				</EmptyHeader>
+			</Empty>
 		);
 	}
 
@@ -1451,22 +1464,30 @@ const EnvironmentPage = (
 
 								<div className="flex w-full gap-8">
 									{emptyServices ? (
-										<div className="flex h-[70vh] w-full flex-col items-center justify-center">
-											<FolderInput className="size-8 self-center text-muted-foreground" />
-											<span className="text-center font-medium text-muted-foreground">
-												No services added yet. Click on Create Service.
-											</span>
-										</div>
+										<Empty className="min-h-[70vh] w-full">
+											<EmptyHeader>
+												<EmptyMedia variant="icon">
+													<FolderInput className="size-5 text-muted-foreground" />
+												</EmptyMedia>
+												<EmptyTitle>No services yet</EmptyTitle>
+												<EmptyDescription>
+													Create a service to start deploying workloads in this
+													environment.
+												</EmptyDescription>
+											</EmptyHeader>
+										</Empty>
 									) : filteredServices.length === 0 ? (
-										<div className="flex h-[70vh] w-full flex-col items-center justify-center">
-											<Search className="size-8 self-center text-muted-foreground" />
-											<span className="text-center font-medium text-muted-foreground">
-												No services found with the current filters
-											</span>
-											<span className="text-sm text-muted-foreground">
-												Try adjusting your search or filters
-											</span>
-										</div>
+										<Empty className="min-h-[70vh] w-full">
+											<EmptyHeader>
+												<EmptyMedia variant="icon">
+													<Search className="size-5 text-muted-foreground" />
+												</EmptyMedia>
+												<EmptyTitle>No services match your filters</EmptyTitle>
+												<EmptyDescription>
+													Try adjusting your search terms or filters.
+												</EmptyDescription>
+											</EmptyHeader>
+										</Empty>
 									) : (
 										<div className="flex w-full flex-col gap-4">
 											<div className="gap-5 pb-10 grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">