diff --git a/apps/dokploy/components/dashboard/application/general/generic/show.tsx b/apps/dokploy/components/dashboard/application/general/generic/show.tsx
index 6cf4022c1..5f1940b0b 100644
--- a/apps/dokploy/components/dashboard/application/general/generic/show.tsx
+++ b/apps/dokploy/components/dashboard/application/general/generic/show.tsx
@@ -14,6 +14,7 @@ import {
 	GitIcon,
 	GitlabIcon,
 } from "@/components/icons/data-tools-icons";
+import { ScrollFadeContainer } from "@/components/shared/scroll-fade-container";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { api } from "@/utils/api";
@@ -153,7 +154,7 @@ export const ShowProviderForm = ({ applicationId }: Props) => {
 						setSab(e as TabState);
 					}}
 				>
-					<div className="flex flex-row items-center justify-between w-full overflow-auto">
+					<ScrollFadeContainer className="flex flex-row items-center justify-between w-full">
 						<TabsList
 							variant="line"
 							className="flex gap-4 justify-start bg-transparent"
@@ -208,7 +209,7 @@ export const ShowProviderForm = ({ applicationId }: Props) => {
 								Drop
 							</TabsTrigger>
 						</TabsList>
-					</div>
+					</ScrollFadeContainer>
 
 					<TabsContent value="github" className="w-full p-2">
 						{githubProviders && githubProviders?.length > 0 ? (
diff --git a/apps/dokploy/components/dashboard/compose/general/generic/show.tsx b/apps/dokploy/components/dashboard/compose/general/generic/show.tsx
index c2b6f4d0e..b47c9d359 100644
--- a/apps/dokploy/components/dashboard/compose/general/generic/show.tsx
+++ b/apps/dokploy/components/dashboard/compose/general/generic/show.tsx
@@ -10,6 +10,7 @@ import {
 	GitIcon,
 	GitlabIcon,
 } from "@/components/icons/data-tools-icons";
+import { ScrollFadeContainer } from "@/components/shared/scroll-fade-container";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { api } from "@/utils/api";
@@ -142,7 +143,7 @@ export const ShowProviderFormCompose = ({ composeId }: Props) => {
 						setSab(e as TabState);
 					}}
 				>
-					<div className="flex flex-row items-center justify-between w-full overflow-auto">
+					<ScrollFadeContainer className="flex flex-row items-center justify-between w-full">
 						<TabsList
 							variant="line"
 							className="flex gap-4 justify-start bg-transparent"
@@ -189,7 +190,7 @@ export const ShowProviderFormCompose = ({ composeId }: Props) => {
 								Raw
 							</TabsTrigger>
 						</TabsList>
-					</div>
+					</ScrollFadeContainer>
 
 					<TabsContent value="github" className="w-full p-2">
 						{githubProviders && githubProviders?.length > 0 ? (
diff --git a/apps/dokploy/components/shared/scroll-fade-container.tsx b/apps/dokploy/components/shared/scroll-fade-container.tsx
new file mode 100644
index 000000000..885ec8bc7
--- /dev/null
+++ b/apps/dokploy/components/shared/scroll-fade-container.tsx
@@ -0,0 +1,84 @@
+import { cn } from "@/lib/utils";
+import { type RefObject, useEffect, useRef, useState } from "react";
+
+export const useScrollFade = <T extends HTMLElement>(
+	deps: unknown[] = [],
+): [RefObject<T | null>, boolean, boolean] => {
+	const ref = useRef<T>(null);
+	const [canScrollLeft, setCanScrollLeft] = useState(false);
+	const [canScrollRight, setCanScrollRight] = useState(false);
+
+	useEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+
+		const updateFades = () => {
+			setCanScrollLeft(el.scrollLeft > 0);
+			setCanScrollRight(
+				Math.ceil(el.scrollLeft + el.clientWidth) < el.scrollWidth,
+			);
+		};
+
+		updateFades();
+
+		el.addEventListener("scroll", updateFades, { passive: true });
+		const resizeObserver = new ResizeObserver(updateFades);
+		resizeObserver.observe(el);
+
+		return () => {
+			el.removeEventListener("scroll", updateFades);
+			resizeObserver.disconnect();
+		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, deps);
+
+	return [ref, canScrollLeft, canScrollRight];
+};
+
+export const ScrollFadeEdges = ({
+	canScrollLeft,
+	canScrollRight,
+}: {
+	canScrollLeft: boolean;
+	canScrollRight: boolean;
+}) => (
+	<>
+		<div
+			className={cn(
+				"pointer-events-none absolute inset-y-0 left-0 w-8 bg-gradient-to-r from-background to-transparent transition-opacity",
+				canScrollLeft ? "opacity-100" : "opacity-0",
+			)}
+		/>
+		<div
+			className={cn(
+				"pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-background to-transparent transition-opacity",
+				canScrollRight ? "opacity-100" : "opacity-0",
+			)}
+		/>
+	</>
+);
+
+interface Props {
+	children: React.ReactNode;
+	className?: string;
+}
+
+export const ScrollFadeContainer = ({ children, className }: Props) => {
+	const [ref, canScrollLeft, canScrollRight] =
+		useScrollFade<HTMLDivElement>([children]);
+
+	return (
+		<div className="relative min-w-0">
+			<div
+				ref={ref}
+				className={cn("overflow-x-auto no-scrollbar", className)}
+			>
+				{children}
+			</div>
+			<ScrollFadeEdges
+				canScrollLeft={canScrollLeft}
+				canScrollRight={canScrollRight}
+			/>
+		</div>
+	);
+};
diff --git a/apps/dokploy/components/ui/table.tsx b/apps/dokploy/components/ui/table.tsx
index da95d3590..043d5e222 100644
--- a/apps/dokploy/components/ui/table.tsx
+++ b/apps/dokploy/components/ui/table.tsx
@@ -2,19 +2,31 @@
 
 import type * as React from "react";
 
+import {
+	ScrollFadeEdges,
+	useScrollFade,
+} from "@/components/shared/scroll-fade-container";
 import { cn } from "@/lib/utils";
 
 function Table({ className, ...props }: React.ComponentProps<"table">) {
+	const [ref, canScrollLeft, canScrollRight] =
+		useScrollFade<HTMLDivElement>([props.children]);
+
 	return (
 		<div
+			ref={ref}
 			data-slot="table-container"
-			className="relative w-full overflow-x-auto"
+			className="relative w-full overflow-x-auto no-scrollbar"
 		>
 			<table
 				data-slot="table"
 				className={cn("w-full caption-bottom text-sm", className)}
 				{...props}
 			/>
+			<ScrollFadeEdges
+				canScrollLeft={canScrollLeft}
+				canScrollRight={canScrollRight}
+			/>
 		</div>
 	);
 }
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/application/[applicationId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/application/[applicationId].tsx
index cf04a998f..5b67099cb 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/application/[applicationId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/application/[applicationId].tsx
@@ -49,6 +49,7 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
+import { ScrollFadeContainer } from "@/components/shared/scroll-fade-container";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
 	Tooltip,
@@ -241,7 +242,7 @@ const Service = (
 										router.push(newPath);
 									}}
 								>
-									<div className="flex flex-row items-center justify-between w-full overflow-auto">
+									<ScrollFadeContainer className="flex flex-row items-center justify-between w-full">
 										<TabsList className="flex gap-8 max-md:gap-4 justify-start">
 											<TabsTrigger value="general">General</TabsTrigger>
 											{permissions?.envVars.read && (
@@ -286,7 +287,7 @@ const Service = (
 												<TabsTrigger value="advanced">Advanced</TabsTrigger>
 											)}
 										</TabsList>
-									</div>
+									</ScrollFadeContainer>
 
 									<TabsContent value="general">
 										<div className="flex flex-col gap-4 pt-2.5">
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/compose/[composeId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/compose/[composeId].tsx
index 7f4cfc12d..86fc55040 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/compose/[composeId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/compose/[composeId].tsx
@@ -38,6 +38,7 @@ import { TransferService } from "@/components/dashboard/shared/transfer-service"
 import { DashboardLayout } from "@/components/layouts/dashboard-layout";
 import { AdvanceBreadcrumb } from "@/components/shared/advance-breadcrumb";
 import { StatusTooltip } from "@/components/shared/status-tooltip";
+import { ScrollFadeContainer } from "@/components/shared/scroll-fade-container";
 import { Badge } from "@/components/ui/badge";
 import {
 	Card,
@@ -233,7 +234,7 @@ const Service = (
 										router.push(newPath);
 									}}
 								>
-									<div className="flex flex-row items-center w-full overflow-auto">
+									<ScrollFadeContainer className="flex flex-row items-center w-full">
 										<TabsList className="flex gap-8 max-md:gap-4 justify-start">
 											<TabsTrigger value="general">General</TabsTrigger>
 											{permissions?.envVars.read && (
@@ -279,7 +280,7 @@ const Service = (
 												<TabsTrigger value="advanced">Advanced</TabsTrigger>
 											)}
 										</TabsList>
-									</div>
+									</ScrollFadeContainer>
 
 									<TabsContent value="general">
 										<div className="flex flex-col gap-4 pt-2.5">
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/libsql/[libsqlId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/libsql/[libsqlId].tsx
index 362e754a0..d2a0b348b 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/libsql/[libsqlId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/libsql/[libsqlId].tsx
@@ -28,6 +28,7 @@ import { LibsqlIcon } from "@/components/icons/data-tools-icons";
 import { DashboardLayout } from "@/components/layouts/dashboard-layout";
 import { AdvanceBreadcrumb } from "@/components/shared/advance-breadcrumb";
 import { StatusTooltip } from "@/components/shared/status-tooltip";
+import { ScrollFadeContainer } from "@/components/shared/scroll-fade-container";
 import { Badge } from "@/components/ui/badge";
 import {
 	Card,
@@ -193,7 +194,7 @@ const Libsql = (
 										router.push(newPath, undefined, { shallow: true });
 									}}
 								>
-									<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-auto">
+									<ScrollFadeContainer className="flex flex-row items-center justify-between w-full gap-4">
 										<TabsList
 											className={cn(
 												"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
@@ -213,7 +214,7 @@ const Libsql = (
 											<TabsTrigger value="backups">Backups</TabsTrigger>
 											<TabsTrigger value="advanced">Advanced</TabsTrigger>
 										</TabsList>
-									</div>
+									</ScrollFadeContainer>
 
 									<TabsContent value="general">
 										<div className="flex flex-col gap-4 pt-2.5">
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mariadb/[mariadbId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mariadb/[mariadbId].tsx
index 5dc531e83..eca2e6a6c 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mariadb/[mariadbId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mariadb/[mariadbId].tsx
@@ -28,6 +28,7 @@ import { MariadbIcon } from "@/components/icons/data-tools-icons";
 import { DashboardLayout } from "@/components/layouts/dashboard-layout";
 import { AdvanceBreadcrumb } from "@/components/shared/advance-breadcrumb";
 import { StatusTooltip } from "@/components/shared/status-tooltip";
+import { ScrollFadeContainer } from "@/components/shared/scroll-fade-container";
 import { Badge } from "@/components/ui/badge";
 import {
 	Card,
@@ -207,7 +208,7 @@ const Mariadb = (
 										router.push(newPath, undefined, { shallow: true });
 									}}
 								>
-									<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-auto">
+									<ScrollFadeContainer className="flex flex-row items-center justify-between w-full gap-4">
 										<TabsList
 											className={cn(
 												"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
@@ -238,7 +239,7 @@ const Mariadb = (
 												<TabsTrigger value="advanced">Advanced</TabsTrigger>
 											)}
 										</TabsList>
-									</div>
+									</ScrollFadeContainer>
 
 									<TabsContent value="general">
 										<div className="flex flex-col gap-4 pt-2.5">
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mongo/[mongoId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mongo/[mongoId].tsx
index b94984b69..62d2078c8 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mongo/[mongoId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mongo/[mongoId].tsx
@@ -28,6 +28,7 @@ import { MongodbIcon } from "@/components/icons/data-tools-icons";
 import { DashboardLayout } from "@/components/layouts/dashboard-layout";
 import { AdvanceBreadcrumb } from "@/components/shared/advance-breadcrumb";
 import { StatusTooltip } from "@/components/shared/status-tooltip";
+import { ScrollFadeContainer } from "@/components/shared/scroll-fade-container";
 import { Badge } from "@/components/ui/badge";
 import {
 	Card,
@@ -207,7 +208,7 @@ const Mongo = (
 										router.push(newPath, undefined, { shallow: true });
 									}}
 								>
-									<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-auto">
+									<ScrollFadeContainer className="flex flex-row items-center justify-between w-full gap-4">
 										<TabsList
 											className={cn(
 												"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
@@ -238,7 +239,7 @@ const Mongo = (
 												<TabsTrigger value="advanced">Advanced</TabsTrigger>
 											)}
 										</TabsList>
-									</div>
+									</ScrollFadeContainer>
 
 									<TabsContent value="general">
 										<div className="flex flex-col gap-4 pt-2.5">
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mysql/[mysqlId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mysql/[mysqlId].tsx
index 840062c71..f05ab4512 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mysql/[mysqlId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mysql/[mysqlId].tsx
@@ -28,6 +28,7 @@ import { MysqlIcon } from "@/components/icons/data-tools-icons";
 import { DashboardLayout } from "@/components/layouts/dashboard-layout";
 import { AdvanceBreadcrumb } from "@/components/shared/advance-breadcrumb";
 import { StatusTooltip } from "@/components/shared/status-tooltip";
+import { ScrollFadeContainer } from "@/components/shared/scroll-fade-container";
 import { Badge } from "@/components/ui/badge";
 import {
 	Card,
@@ -207,7 +208,7 @@ const MySql = (
 											router.push(newPath, undefined, { shallow: true });
 										}}
 									>
-										<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-auto">
+										<ScrollFadeContainer className="flex flex-row items-center justify-between w-full gap-4">
 											<TabsList
 												className={cn(
 													"md:grid md:w-fit max-md:overflow-y-scroll justify-start ",
@@ -238,7 +239,7 @@ const MySql = (
 													<TabsTrigger value="advanced">Advanced</TabsTrigger>
 												)}
 											</TabsList>
-										</div>
+										</ScrollFadeContainer>
 
 										<TabsContent value="general">
 											<div className="flex flex-col gap-4 pt-2.5">
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/postgres/[postgresId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/postgres/[postgresId].tsx
index 9cd1a9538..89c7edaf2 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/postgres/[postgresId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/postgres/[postgresId].tsx
@@ -28,6 +28,7 @@ import { PostgresqlIcon } from "@/components/icons/data-tools-icons";
 import { DashboardLayout } from "@/components/layouts/dashboard-layout";
 import { AdvanceBreadcrumb } from "@/components/shared/advance-breadcrumb";
 import { StatusTooltip } from "@/components/shared/status-tooltip";
+import { ScrollFadeContainer } from "@/components/shared/scroll-fade-container";
 import { Badge } from "@/components/ui/badge";
 import {
 	Card,
@@ -208,7 +209,7 @@ const Postgresql = (
 										});
 									}}
 								>
-									<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-auto">
+									<ScrollFadeContainer className="flex flex-row items-center justify-between w-full gap-4">
 										<TabsList
 											className={cn(
 												"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
@@ -239,7 +240,7 @@ const Postgresql = (
 												<TabsTrigger value="advanced">Advanced</TabsTrigger>
 											)}
 										</TabsList>
-									</div>
+									</ScrollFadeContainer>
 
 									<TabsContent value="general">
 										<div className="flex flex-col gap-4 pt-2.5">
diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/redis/[redisId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/redis/[redisId].tsx
index fed0b5dc8..b2cddb22c 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/redis/[redisId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/redis/[redisId].tsx
@@ -27,6 +27,7 @@ import { RedisIcon } from "@/components/icons/data-tools-icons";
 import { DashboardLayout } from "@/components/layouts/dashboard-layout";
 import { AdvanceBreadcrumb } from "@/components/shared/advance-breadcrumb";
 import { StatusTooltip } from "@/components/shared/status-tooltip";
+import { ScrollFadeContainer } from "@/components/shared/scroll-fade-container";
 import { Badge } from "@/components/ui/badge";
 import {
 	Card,
@@ -206,7 +207,7 @@ const Redis = (
 										router.push(newPath, undefined, { shallow: true });
 									}}
 								>
-									<div className="flex flex-row items-center justify-between w-full gap-4 overflow-x-auto">
+									<ScrollFadeContainer className="flex flex-row items-center justify-between w-full gap-4">
 										<TabsList
 											className={cn(
 												"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
@@ -236,7 +237,7 @@ const Redis = (
 												<TabsTrigger value="advanced">Advanced</TabsTrigger>
 											)}
 										</TabsList>
-									</div>
+									</ScrollFadeContainer>
 
 									<TabsContent value="general">
 										<div className="flex flex-col gap-4 pt-2.5">