From 9bf4a97cee6da0888adf5510566252d42b043593 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <siumauricio@icloud.com>
Date: Mon, 13 Apr 2026 21:34:26 -0600
Subject: [PATCH] refactor: update color system to use oklch color format

- Changed color definitions in tailwind.config.ts and various components to use oklch format for improved color manipulation.
- Updated button backgrounds in multiple components to enhance visibility and consistency across light and dark themes.
- Adjusted chart color configurations to align with the new color system.
- Refined global CSS variables for better color management in light and dark modes.
---
 .../generic/save-bitbucket-provider.tsx       |   4 +-
 .../general/generic/save-gitea-provider.tsx   |   4 +-
 .../general/generic/save-github-provider.tsx  |   4 +-
 .../general/generic/save-gitlab-provider.tsx  |   4 +-
 .../schedules/handle-schedules.tsx            |   2 +-
 .../volume-backups/restore-volume-backups.tsx |   4 +-
 .../save-bitbucket-provider-compose.tsx       |   4 +-
 .../generic/save-gitea-provider-compose.tsx   |   4 +-
 .../generic/save-github-provider-compose.tsx  |   4 +-
 .../generic/save-gitlab-provider-compose.tsx  |   4 +-
 .../database/backups/handle-backup.tsx        |   2 +-
 .../database/backups/restore-backup.tsx       |   4 +-
 .../free/container/docker-block-chart.tsx     |   4 +-
 .../free/container/docker-cpu-chart.tsx       |   2 +-
 .../free/container/docker-disk-chart.tsx      |   2 +-
 .../container/docker-disk-usage-chart.tsx     |  10 +-
 .../free/container/docker-memory-chart.tsx    |   2 +-
 .../free/container/docker-network-chart.tsx   |   4 +-
 .../paid/container/container-cpu-chart.tsx    |   8 +-
 .../paid/container/container-memory-chart.tsx |   8 +-
 .../container/container-network-chart.tsx     |  16 +-
 .../monitoring/paid/servers/cpu-chart.tsx     |   8 +-
 .../monitoring/paid/servers/disk-chart.tsx    |   6 +-
 .../monitoring/paid/servers/memory-chart.tsx  |   8 +-
 .../monitoring/paid/servers/network-chart.tsx |  16 +-
 .../dashboard/project/add-template.tsx        |   2 +-
 .../requests/request-distribution-chart.tsx   |   6 +-
 .../whitelabeling/whitelabeling-settings.tsx  | 130 ++++++++--------
 apps/dokploy/components/ui/command.tsx        |  10 +-
 apps/dokploy/components/ui/input.tsx          |   3 +-
 apps/dokploy/components/ui/select.tsx         |   2 +-
 apps/dokploy/components/ui/sidebar.tsx        |   2 +-
 apps/dokploy/components/ui/switch.tsx         |   4 +-
 apps/dokploy/pages/_app.tsx                   |   2 +-
 apps/dokploy/styles/globals.css               | 140 +++++++++---------
 apps/dokploy/tailwind.config.ts               |  54 +++----
 packages/server/package.json                  |  29 ++--
 37 files changed, 266 insertions(+), 256 deletions(-)

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 a4fab46d9..e167987da 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
@@ -241,7 +241,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														"w-full justify-between !bg-input",
+														"w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
 														!field.value && "text-muted-foreground",
 													)}
 												>
@@ -329,7 +329,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														" w-full justify-between !bg-input",
+														" w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
 														!field.value && "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 02cae2c4a..803b4e9df 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
@@ -254,7 +254,7 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														"w-full justify-between !bg-input",
+														"w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
 														!field.value && "text-muted-foreground",
 													)}
 												>
@@ -349,7 +349,7 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														" w-full justify-between !bg-input",
+														" w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
 														!field.value && "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 6bce2d243..d4b2ec672 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
@@ -229,7 +229,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														"w-full justify-between !bg-input",
+														"w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
 														!field.value && "text-muted-foreground",
 													)}
 												>
@@ -316,7 +316,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														" w-full justify-between !bg-input",
+														" w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
 														!field.value && "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 b49a1658f..ebddce777 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
@@ -250,7 +250,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														"w-full justify-between !bg-input",
+														"w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
 														!field.value && "text-muted-foreground",
 													)}
 												>
@@ -347,7 +347,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														" w-full justify-between !bg-input",
+														" w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
 														!field.value && "text-muted-foreground",
 													)}
 												>
diff --git a/apps/dokploy/components/dashboard/application/schedules/handle-schedules.tsx b/apps/dokploy/components/dashboard/application/schedules/handle-schedules.tsx
index 36ddb53f1..5c292c9d3 100644
--- a/apps/dokploy/components/dashboard/application/schedules/handle-schedules.tsx
+++ b/apps/dokploy/components/dashboard/application/schedules/handle-schedules.tsx
@@ -511,7 +511,7 @@ export const HandleSchedules = ({ id, scheduleId, scheduleType }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														"w-full justify-between !bg-input",
+														"w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
 														!field.value && "text-muted-foreground",
 													)}
 												>
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 684620947..e7239436f 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
@@ -181,7 +181,7 @@ export const RestoreVolumeBackups = ({ id, type, serverId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														"w-full justify-between !bg-input",
+														"w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
 														!field.value && "text-muted-foreground",
 													)}
 												>
@@ -263,7 +263,7 @@ export const RestoreVolumeBackups = ({ id, type, serverId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														"w-full justify-between !bg-input",
+														"w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
 														!field.value && "text-muted-foreground",
 													)}
 												>
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 3e099251e..0f89bdca6 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
@@ -243,7 +243,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														"w-full justify-between !bg-input",
+														"w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
 														!field.value && "text-muted-foreground",
 													)}
 												>
@@ -331,7 +331,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														" w-full justify-between !bg-input",
+														" w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
 														!field.value && "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 7ea71fc89..714e72d5f 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
@@ -240,7 +240,7 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														"w-full justify-between !bg-input",
+														"w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
 														!field.value && "text-muted-foreground",
 													)}
 												>
@@ -327,7 +327,7 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														"w-full justify-between !bg-input",
+														"w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
 														!field.value && "text-muted-foreground",
 													)}
 												>
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 827ce1a8a..1f5558baa 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
@@ -230,7 +230,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														"w-full justify-between !bg-input",
+														"w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
 														!field.value && "text-muted-foreground",
 													)}
 												>
@@ -317,7 +317,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														" w-full justify-between !bg-input",
+														" w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
 														!field.value && "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 63de87d8f..263e68199 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
@@ -252,7 +252,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														"w-full justify-between !bg-input",
+														"w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
 														!field.value && "text-muted-foreground",
 													)}
 												>
@@ -349,7 +349,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 												<Button
 													variant="outline"
 													className={cn(
-														" w-full justify-between !bg-input",
+														" w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
 														!field.value && "text-muted-foreground",
 													)}
 												>
diff --git a/apps/dokploy/components/dashboard/database/backups/handle-backup.tsx b/apps/dokploy/components/dashboard/database/backups/handle-backup.tsx
index 26880e9b5..2eeb41f91 100644
--- a/apps/dokploy/components/dashboard/database/backups/handle-backup.tsx
+++ b/apps/dokploy/components/dashboard/database/backups/handle-backup.tsx
@@ -409,7 +409,7 @@ export const HandleBackup = ({
 													<Button
 														variant="outline"
 														className={cn(
-															"w-full justify-between !bg-input",
+															"w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
 															!field.value && "text-muted-foreground",
 														)}
 													>
diff --git a/apps/dokploy/components/dashboard/database/backups/restore-backup.tsx b/apps/dokploy/components/dashboard/database/backups/restore-backup.tsx
index 7b212acb9..fcbdf6f8f 100644
--- a/apps/dokploy/components/dashboard/database/backups/restore-backup.tsx
+++ b/apps/dokploy/components/dashboard/database/backups/restore-backup.tsx
@@ -346,7 +346,7 @@ export const RestoreBackup = ({
 												<Button
 													variant="outline"
 													className={cn(
-														"w-full justify-between !bg-input",
+														"w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
 														!field.value && "text-muted-foreground",
 													)}
 												>
@@ -428,7 +428,7 @@ export const RestoreBackup = ({
 												<Button
 													variant="outline"
 													className={cn(
-														"w-full justify-between !bg-input",
+														"w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
 														!field.value && "text-muted-foreground",
 													)}
 												>
diff --git a/apps/dokploy/components/dashboard/monitoring/free/container/docker-block-chart.tsx b/apps/dokploy/components/dashboard/monitoring/free/container/docker-block-chart.tsx
index 851892102..4ff875787 100644
--- a/apps/dokploy/components/dashboard/monitoring/free/container/docker-block-chart.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/free/container/docker-block-chart.tsx
@@ -17,11 +17,11 @@ interface Props {
 const chartConfig = {
 	readMb: {
 		label: "Read (MB)",
-		color: "hsl(var(--chart-1))",
+		color: "oklch(var(--chart-1))",
 	},
 	writeMb: {
 		label: "Write (MB)",
-		color: "hsl(var(--chart-2))",
+		color: "oklch(var(--chart-2))",
 	},
 } satisfies ChartConfig;
 
diff --git a/apps/dokploy/components/dashboard/monitoring/free/container/docker-cpu-chart.tsx b/apps/dokploy/components/dashboard/monitoring/free/container/docker-cpu-chart.tsx
index 40d08684f..4dceaf7be 100644
--- a/apps/dokploy/components/dashboard/monitoring/free/container/docker-cpu-chart.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/free/container/docker-cpu-chart.tsx
@@ -17,7 +17,7 @@ interface Props {
 const chartConfig = {
 	usage: {
 		label: "CPU Usage",
-		color: "hsl(var(--chart-1))",
+		color: "oklch(var(--chart-1))",
 	},
 } satisfies ChartConfig;
 
diff --git a/apps/dokploy/components/dashboard/monitoring/free/container/docker-disk-chart.tsx b/apps/dokploy/components/dashboard/monitoring/free/container/docker-disk-chart.tsx
index 2aa660bf3..0659ca0e2 100644
--- a/apps/dokploy/components/dashboard/monitoring/free/container/docker-disk-chart.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/free/container/docker-disk-chart.tsx
@@ -16,7 +16,7 @@ interface Props {
 const chartConfig = {
 	usedGb: {
 		label: "Used (GB)",
-		color: "hsl(var(--chart-3))",
+		color: "oklch(var(--chart-3))",
 	},
 } satisfies ChartConfig;
 
diff --git a/apps/dokploy/components/dashboard/monitoring/free/container/docker-disk-usage-chart.tsx b/apps/dokploy/components/dashboard/monitoring/free/container/docker-disk-usage-chart.tsx
index 18a26c91f..edebec600 100644
--- a/apps/dokploy/components/dashboard/monitoring/free/container/docker-disk-usage-chart.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/free/container/docker-disk-usage-chart.tsx
@@ -25,19 +25,19 @@ const chartConfig = {
 	},
 	images: {
 		label: "Images",
-		color: "hsl(var(--chart-1))",
+		color: "oklch(var(--chart-1))",
 	},
 	containers: {
 		label: "Containers",
-		color: "hsl(var(--chart-2))",
+		color: "oklch(var(--chart-2))",
 	},
 	volumes: {
 		label: "Volumes",
-		color: "hsl(var(--chart-3))",
+		color: "oklch(var(--chart-3))",
 	},
 	buildCache: {
 		label: "Build Cache",
-		color: "hsl(var(--chart-4))",
+		color: "oklch(var(--chart-4))",
 	},
 } satisfies ChartConfig;
 
@@ -138,7 +138,7 @@ export const DockerDiskUsageChart = () => {
 						innerRadius={60}
 						outerRadius={85}
 						strokeWidth={3}
-						stroke="hsl(var(--background))"
+						stroke="oklch(var(--background))"
 						minAngle={15}
 					>
 						{chartData.map((entry) => (
diff --git a/apps/dokploy/components/dashboard/monitoring/free/container/docker-memory-chart.tsx b/apps/dokploy/components/dashboard/monitoring/free/container/docker-memory-chart.tsx
index 30cf56d4a..2d5471d38 100644
--- a/apps/dokploy/components/dashboard/monitoring/free/container/docker-memory-chart.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/free/container/docker-memory-chart.tsx
@@ -19,7 +19,7 @@ interface Props {
 const chartConfig = {
 	usage: {
 		label: "Memory (GB)",
-		color: "hsl(var(--chart-2))",
+		color: "oklch(var(--chart-2))",
 	},
 } satisfies ChartConfig;
 
diff --git a/apps/dokploy/components/dashboard/monitoring/free/container/docker-network-chart.tsx b/apps/dokploy/components/dashboard/monitoring/free/container/docker-network-chart.tsx
index fcb959722..06a73a44e 100644
--- a/apps/dokploy/components/dashboard/monitoring/free/container/docker-network-chart.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/free/container/docker-network-chart.tsx
@@ -17,11 +17,11 @@ interface Props {
 const chartConfig = {
 	inMB: {
 		label: "In (MB)",
-		color: "hsl(var(--chart-1))",
+		color: "oklch(var(--chart-1))",
 	},
 	outMB: {
 		label: "Out (MB)",
-		color: "hsl(var(--chart-2))",
+		color: "oklch(var(--chart-2))",
 	},
 } satisfies ChartConfig;
 
diff --git a/apps/dokploy/components/dashboard/monitoring/paid/container/container-cpu-chart.tsx b/apps/dokploy/components/dashboard/monitoring/paid/container/container-cpu-chart.tsx
index 76b010c7c..1fabb0057 100644
--- a/apps/dokploy/components/dashboard/monitoring/paid/container/container-cpu-chart.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/paid/container/container-cpu-chart.tsx
@@ -27,7 +27,7 @@ interface Props {
 const chartConfig = {
 	cpu: {
 		label: "CPU",
-		color: "hsl(var(--chart-1))",
+		color: "oklch(var(--chart-1))",
 	},
 } satisfies ChartConfig;
 
@@ -58,12 +58,12 @@ export const ContainerCPUChart = ({ data }: Props) => {
 							<linearGradient id="fillCPU" x1="0" y1="0" x2="0" y2="1">
 								<stop
 									offset="5%"
-									stopColor="hsl(var(--chart-1))"
+									stopColor="oklch(var(--chart-1))"
 									stopOpacity={0.8}
 								/>
 								<stop
 									offset="95%"
-									stopColor="hsl(var(--chart-1))"
+									stopColor="oklch(var(--chart-1))"
 									stopOpacity={0.1}
 								/>
 							</linearGradient>
@@ -112,7 +112,7 @@ export const ContainerCPUChart = ({ data }: Props) => {
 							dataKey="cpu"
 							type="monotone"
 							fill="url(#fillCPU)"
-							stroke="hsl(var(--chart-1))"
+							stroke="oklch(var(--chart-1))"
 							strokeWidth={2}
 						/>
 						<ChartLegend
diff --git a/apps/dokploy/components/dashboard/monitoring/paid/container/container-memory-chart.tsx b/apps/dokploy/components/dashboard/monitoring/paid/container/container-memory-chart.tsx
index ff5e85843..0fffa2386 100644
--- a/apps/dokploy/components/dashboard/monitoring/paid/container/container-memory-chart.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/paid/container/container-memory-chart.tsx
@@ -33,7 +33,7 @@ interface Props {
 const chartConfig = {
 	memory: {
 		label: "Memory",
-		color: "hsl(var(--chart-2))",
+		color: "oklch(var(--chart-2))",
 	},
 } satisfies ChartConfig;
 
@@ -73,12 +73,12 @@ export const ContainerMemoryChart = ({ data }: Props) => {
 							<linearGradient id="fillMemory" x1="0" y1="0" x2="0" y2="1">
 								<stop
 									offset="5%"
-									stopColor="hsl(var(--chart-2))"
+									stopColor="oklch(var(--chart-2))"
 									stopOpacity={0.8}
 								/>
 								<stop
 									offset="95%"
-									stopColor="hsl(var(--chart-2))"
+									stopColor="oklch(var(--chart-2))"
 									stopOpacity={0.1}
 								/>
 							</linearGradient>
@@ -133,7 +133,7 @@ export const ContainerMemoryChart = ({ data }: Props) => {
 							dataKey="memory"
 							type="monotone"
 							fill="url(#fillMemory)"
-							stroke="hsl(var(--chart-2))"
+							stroke="oklch(var(--chart-2))"
 							strokeWidth={2}
 						/>
 						<ChartLegend
diff --git a/apps/dokploy/components/dashboard/monitoring/paid/container/container-network-chart.tsx b/apps/dokploy/components/dashboard/monitoring/paid/container/container-network-chart.tsx
index f962e2ae3..a3226c5b8 100644
--- a/apps/dokploy/components/dashboard/monitoring/paid/container/container-network-chart.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/paid/container/container-network-chart.tsx
@@ -40,11 +40,11 @@ interface FormattedMetric {
 const chartConfig = {
 	input: {
 		label: "Input",
-		color: "hsl(var(--chart-3))",
+		color: "oklch(var(--chart-3))",
 	},
 	output: {
 		label: "Output",
-		color: "hsl(var(--chart-4))",
+		color: "oklch(var(--chart-4))",
 	},
 } satisfies ChartConfig;
 
@@ -84,24 +84,24 @@ export const ContainerNetworkChart = ({ data }: Props) => {
 							<linearGradient id="fillInput" x1="0" y1="0" x2="0" y2="1">
 								<stop
 									offset="5%"
-									stopColor="hsl(var(--chart-3))"
+									stopColor="oklch(var(--chart-3))"
 									stopOpacity={0.8}
 								/>
 								<stop
 									offset="95%"
-									stopColor="hsl(var(--chart-3))"
+									stopColor="oklch(var(--chart-3))"
 									stopOpacity={0.1}
 								/>
 							</linearGradient>
 							<linearGradient id="fillOutput" x1="0" y1="0" x2="0" y2="1">
 								<stop
 									offset="5%"
-									stopColor="hsl(var(--chart-4))"
+									stopColor="oklch(var(--chart-4))"
 									stopOpacity={0.8}
 								/>
 								<stop
 									offset="95%"
-									stopColor="hsl(var(--chart-4))"
+									stopColor="oklch(var(--chart-4))"
 									stopOpacity={0.1}
 								/>
 							</linearGradient>
@@ -162,7 +162,7 @@ export const ContainerNetworkChart = ({ data }: Props) => {
 							dataKey="input"
 							type="monotone"
 							fill="url(#fillInput)"
-							stroke="hsl(var(--chart-3))"
+							stroke="oklch(var(--chart-3))"
 							strokeWidth={2}
 						/>
 						<Area
@@ -170,7 +170,7 @@ export const ContainerNetworkChart = ({ data }: Props) => {
 							dataKey="output"
 							type="monotone"
 							fill="url(#fillOutput)"
-							stroke="hsl(var(--chart-4))"
+							stroke="oklch(var(--chart-4))"
 							strokeWidth={2}
 						/>
 						<ChartLegend
diff --git a/apps/dokploy/components/dashboard/monitoring/paid/servers/cpu-chart.tsx b/apps/dokploy/components/dashboard/monitoring/paid/servers/cpu-chart.tsx
index efa84ffc4..6a7f40a59 100644
--- a/apps/dokploy/components/dashboard/monitoring/paid/servers/cpu-chart.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/paid/servers/cpu-chart.tsx
@@ -22,7 +22,7 @@ interface CPUChartProps {
 const chartConfig = {
 	cpu: {
 		label: "CPU",
-		color: "hsl(var(--chart-1))",
+		color: "oklch(var(--chart-1))",
 	},
 } satisfies ChartConfig;
 
@@ -45,12 +45,12 @@ export function CPUChart({ data }: CPUChartProps) {
 							<linearGradient id="fillCPU" x1="0" y1="0" x2="0" y2="1">
 								<stop
 									offset="5%"
-									stopColor="hsl(var(--chart-1))"
+									stopColor="oklch(var(--chart-1))"
 									stopOpacity={0.8}
 								/>
 								<stop
 									offset="95%"
-									stopColor="hsl(var(--chart-1))"
+									stopColor="oklch(var(--chart-1))"
 									stopOpacity={0.1}
 								/>
 							</linearGradient>
@@ -99,7 +99,7 @@ export function CPUChart({ data }: CPUChartProps) {
 							dataKey="cpu"
 							type="monotone"
 							fill="url(#fillCPU)"
-							stroke="hsl(var(--chart-1))"
+							stroke="oklch(var(--chart-1))"
 							strokeWidth={2}
 						/>
 						<ChartLegend
diff --git a/apps/dokploy/components/dashboard/monitoring/paid/servers/disk-chart.tsx b/apps/dokploy/components/dashboard/monitoring/paid/servers/disk-chart.tsx
index 3a81526cc..c0de02921 100644
--- a/apps/dokploy/components/dashboard/monitoring/paid/servers/disk-chart.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/paid/servers/disk-chart.tsx
@@ -29,14 +29,14 @@ export function DiskChart({ data }: RadialChartProps) {
 	const chartData = [
 		{
 			disk: 25,
-			fill: "hsl(var(--chart-2))",
+			fill: "oklch(var(--chart-2))",
 		},
 	];
 
 	const chartConfig = {
 		disk: {
 			label: "Disk",
-			color: "hsl(var(--chart-2))",
+			color: "oklch(var(--chart-2))",
 		},
 	} satisfies ChartConfig;
 
@@ -71,7 +71,7 @@ export function DiskChart({ data }: RadialChartProps) {
 							dataKey="disk"
 							background
 							cornerRadius={10}
-							fill="hsl(var(--chart-2))"
+							fill="oklch(var(--chart-2))"
 						/>
 						<PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
 							<Label
diff --git a/apps/dokploy/components/dashboard/monitoring/paid/servers/memory-chart.tsx b/apps/dokploy/components/dashboard/monitoring/paid/servers/memory-chart.tsx
index 1981dace3..2891e53bb 100644
--- a/apps/dokploy/components/dashboard/monitoring/paid/servers/memory-chart.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/paid/servers/memory-chart.tsx
@@ -20,7 +20,7 @@ interface MemoryChartProps {
 const chartConfig = {
 	Memory: {
 		label: "Memory",
-		color: "hsl(var(--chart-2))",
+		color: "oklch(var(--chart-2))",
 	},
 } satisfies ChartConfig;
 
@@ -46,12 +46,12 @@ export function MemoryChart({ data }: MemoryChartProps) {
 							<linearGradient id="fillMemory" x1="0" y1="0" x2="0" y2="1">
 								<stop
 									offset="5%"
-									stopColor="hsl(var(--chart-2))"
+									stopColor="oklch(var(--chart-2))"
 									stopOpacity={0.8}
 								/>
 								<stop
 									offset="95%"
-									stopColor="hsl(var(--chart-2))"
+									stopColor="oklch(var(--chart-2))"
 									stopOpacity={0.1}
 								/>
 							</linearGradient>
@@ -116,7 +116,7 @@ export function MemoryChart({ data }: MemoryChartProps) {
 							dataKey="memUsed"
 							type="monotone"
 							fill="url(#fillMemory)"
-							stroke="hsl(var(--chart-2))"
+							stroke="oklch(var(--chart-2))"
 							strokeWidth={2}
 							name="Memory"
 						/>
diff --git a/apps/dokploy/components/dashboard/monitoring/paid/servers/network-chart.tsx b/apps/dokploy/components/dashboard/monitoring/paid/servers/network-chart.tsx
index bbb522fdc..a4359f8dc 100644
--- a/apps/dokploy/components/dashboard/monitoring/paid/servers/network-chart.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/paid/servers/network-chart.tsx
@@ -22,11 +22,11 @@ interface NetworkChartProps {
 const chartConfig = {
 	networkIn: {
 		label: "Network In",
-		color: "hsl(var(--chart-3))",
+		color: "oklch(var(--chart-3))",
 	},
 	networkOut: {
 		label: "Network Out",
-		color: "hsl(var(--chart-4))",
+		color: "oklch(var(--chart-4))",
 	},
 } satisfies ChartConfig;
 
@@ -52,24 +52,24 @@ export function NetworkChart({ data }: NetworkChartProps) {
 							<linearGradient id="fillNetworkIn" x1="0" y1="0" x2="0" y2="1">
 								<stop
 									offset="5%"
-									stopColor="hsl(var(--chart-3))"
+									stopColor="oklch(var(--chart-3))"
 									stopOpacity={0.8}
 								/>
 								<stop
 									offset="95%"
-									stopColor="hsl(var(--chart-3))"
+									stopColor="oklch(var(--chart-3))"
 									stopOpacity={0.1}
 								/>
 							</linearGradient>
 							<linearGradient id="fillNetworkOut" x1="0" y1="0" x2="0" y2="1">
 								<stop
 									offset="5%"
-									stopColor="hsl(var(--chart-4))"
+									stopColor="oklch(var(--chart-4))"
 									stopOpacity={0.8}
 								/>
 								<stop
 									offset="95%"
-									stopColor="hsl(var(--chart-4))"
+									stopColor="oklch(var(--chart-4))"
 									stopOpacity={0.1}
 								/>
 							</linearGradient>
@@ -121,7 +121,7 @@ export function NetworkChart({ data }: NetworkChartProps) {
 							dataKey="networkIn"
 							type="monotone"
 							fill="url(#fillNetworkIn)"
-							stroke="hsl(var(--chart-3))"
+							stroke="oklch(var(--chart-3))"
 							strokeWidth={2}
 						/>
 						<Area
@@ -129,7 +129,7 @@ export function NetworkChart({ data }: NetworkChartProps) {
 							dataKey="networkOut"
 							type="monotone"
 							fill="url(#fillNetworkOut)"
-							stroke="hsl(var(--chart-4))"
+							stroke="oklch(var(--chart-4))"
 							strokeWidth={2}
 						/>
 						<ChartLegend
diff --git a/apps/dokploy/components/dashboard/project/add-template.tsx b/apps/dokploy/components/dashboard/project/add-template.tsx
index 959afe905..8c8272c6c 100644
--- a/apps/dokploy/components/dashboard/project/add-template.tsx
+++ b/apps/dokploy/components/dashboard/project/add-template.tsx
@@ -236,7 +236,7 @@ export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
 										<Button
 											variant="outline"
 											className={cn(
-												"w-full sm:w-[200px] justify-between !bg-input",
+												"w-full sm:w-[200px] justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
 											)}
 										>
 											{isLoadingTags
diff --git a/apps/dokploy/components/dashboard/requests/request-distribution-chart.tsx b/apps/dokploy/components/dashboard/requests/request-distribution-chart.tsx
index c760c8175..690832d57 100644
--- a/apps/dokploy/components/dashboard/requests/request-distribution-chart.tsx
+++ b/apps/dokploy/components/dashboard/requests/request-distribution-chart.tsx
@@ -27,7 +27,7 @@ const chartConfig = {
 	},
 	count: {
 		label: "Count",
-		color: "hsl(var(--chart-1))",
+		color: "oklch(var(--chart-1))",
 	},
 } satisfies ChartConfig;
 
@@ -101,9 +101,9 @@ export const RequestDistributionChart = ({
 						<Area
 							dataKey="count"
 							type="monotone"
-							fill="hsl(var(--chart-1))"
+							fill="oklch(var(--chart-1))"
 							fillOpacity={0.4}
-							stroke="hsl(var(--chart-1))"
+							stroke="oklch(var(--chart-1))"
 						/>
 					</AreaChart>
 				</ChartContainer>
diff --git a/apps/dokploy/components/proprietary/whitelabeling/whitelabeling-settings.tsx b/apps/dokploy/components/proprietary/whitelabeling/whitelabeling-settings.tsx
index abbaca4a5..cce032b65 100644
--- a/apps/dokploy/components/proprietary/whitelabeling/whitelabeling-settings.tsx
+++ b/apps/dokploy/components/proprietary/whitelabeling/whitelabeling-settings.tsx
@@ -60,99 +60,99 @@ const DEFAULT_CSS_TEMPLATE = `/* ============================================
 
 /* ---------- Light Mode ---------- */
 :root {
-  --background: 0 0% 100%;
-  --foreground: 240 10% 3.9%;
+  --background: 1 0 0;
+  --foreground: 0.145 0 0;
 
-  --card: 0 0% 100%;
-  --card-foreground: 240 10% 3.9%;
+  --card: 1 0 0;
+  --card-foreground: 0.145 0 0;
 
-  --popover: 0 0% 100%;
-  --popover-foreground: 240 10% 3.9%;
+  --popover: 1 0 0;
+  --popover-foreground: 0.145 0 0;
 
-  --primary: 240 5.9% 10%;
-  --primary-foreground: 0 0% 98%;
+  --primary: 0.205 0 0;
+  --primary-foreground: 0.985 0 0;
 
-  --secondary: 240 4.8% 95.9%;
-  --secondary-foreground: 240 5.9% 10%;
+  --secondary: 0.97 0 0;
+  --secondary-foreground: 0.205 0 0;
 
-  --muted: 240 4.8% 95.9%;
-  --muted-foreground: 240 3.8% 46.1%;
+  --muted: 0.97 0 0;
+  --muted-foreground: 0.556 0 0;
 
-  --accent: 240 4.8% 95.9%;
-  --accent-foreground: 240 5.9% 10%;
+  --accent: 0.97 0 0;
+  --accent-foreground: 0.205 0 0;
 
-  --destructive: 0 84.2% 50.2%;
-  --destructive-foreground: 0 0% 98%;
+  --destructive: 0.577 0.245 27.325;
+  --destructive-foreground: 0.985 0 0;
 
-  --border: 240 5.9% 90%;
-  --input: 240 5.9% 90%;
-  --ring: 240 10% 3.9%;
-  --radius: 0.5rem;
+  --border: 0.922 0 0;
+  --input: 0.922 0 0;
+  --ring: 0.708 0 0;
+  --radius: 0.625rem;
 
   /* Sidebar */
-  --sidebar-background: 0 0% 98%;
-  --sidebar-foreground: 240 5.3% 26.1%;
-  --sidebar-primary: 240 5.9% 10%;
-  --sidebar-primary-foreground: 0 0% 98%;
-  --sidebar-accent: 240 4.8% 95.9%;
-  --sidebar-accent-foreground: 240 5.9% 10%;
-  --sidebar-border: 220 13% 91%;
-  --sidebar-ring: 217.2 91.2% 59.8%;
+  --sidebar: 0.985 0 0;
+  --sidebar-foreground: 0.145 0 0;
+  --sidebar-primary: 0.205 0 0;
+  --sidebar-primary-foreground: 0.985 0 0;
+  --sidebar-accent: 0.97 0 0;
+  --sidebar-accent-foreground: 0.205 0 0;
+  --sidebar-border: 0.922 0 0;
+  --sidebar-ring: 0.708 0 0;
 
   /* Charts */
-  --chart-1: 173 58% 39%;
-  --chart-2: 12 76% 61%;
-  --chart-3: 197 37% 24%;
-  --chart-4: 43 74% 66%;
-  --chart-5: 27 87% 67%;
+  --chart-1: 0.646 0.222 41.116;
+  --chart-2: 0.6 0.118 184.704;
+  --chart-3: 0.398 0.07 227.392;
+  --chart-4: 0.828 0.189 84.429;
+  --chart-5: 0.769 0.188 70.08;
 }
 
 /* ---------- Dark Mode ---------- */
 .dark {
-  --background: 0 0% 0%;
-  --foreground: 0 0% 98%;
+  --background: 0.145 0 0;
+  --foreground: 0.985 0 0;
 
-  --card: 240 4% 10%;
-  --card-foreground: 0 0% 98%;
+  --card: 0.205 0 0;
+  --card-foreground: 0.985 0 0;
 
-  --popover: 240 10% 3.9%;
-  --popover-foreground: 0 0% 98%;
+  --popover: 0.205 0 0;
+  --popover-foreground: 0.985 0 0;
 
-  --primary: 0 0% 98%;
-  --primary-foreground: 240 5.9% 10%;
+  --primary: 0.922 0 0;
+  --primary-foreground: 0.205 0 0;
 
-  --secondary: 240 3.7% 15.9%;
-  --secondary-foreground: 0 0% 98%;
+  --secondary: 0.269 0 0;
+  --secondary-foreground: 0.985 0 0;
 
-  --muted: 240 4% 10%;
-  --muted-foreground: 240 5% 64.9%;
+  --muted: 0.269 0 0;
+  --muted-foreground: 0.708 0 0;
 
-  --accent: 240 3.7% 15.9%;
-  --accent-foreground: 0 0% 98%;
+  --accent: 0.269 0 0;
+  --accent-foreground: 0.985 0 0;
 
-  --destructive: 0 84.2% 50.2%;
-  --destructive-foreground: 0 0% 98%;
+  --destructive: 0.704 0.191 22.216;
+  --destructive-foreground: 0.985 0 0;
 
-  --border: 240 3.7% 15.9%;
-  --input: 240 4% 10%;
-  --ring: 240 4.9% 83.9%;
+  --border: 0.371 0 0;
+  --input: 0.371 0 0;
+  --ring: 0.556 0 0;
 
   /* Sidebar */
-  --sidebar-background: 240 5.9% 10%;
-  --sidebar-foreground: 240 4.8% 95.9%;
-  --sidebar-primary: 224.3 76.3% 48%;
-  --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 240 3.7% 15.9%;
-  --sidebar-accent-foreground: 240 4.8% 95.9%;
-  --sidebar-border: 240 3.7% 15.9%;
-  --sidebar-ring: 217.2 91.2% 59.8%;
+  --sidebar: 0.205 0 0;
+  --sidebar-foreground: 0.985 0 0;
+  --sidebar-primary: 0.488 0.243 264.376;
+  --sidebar-primary-foreground: 0.985 0 0;
+  --sidebar-accent: 0.269 0 0;
+  --sidebar-accent-foreground: 0.985 0 0;
+  --sidebar-border: 0.371 0 0;
+  --sidebar-ring: 0.556 0 0;
 
   /* Charts */
-  --chart-1: 220 70% 50%;
-  --chart-2: 340 75% 55%;
-  --chart-3: 30 80% 55%;
-  --chart-4: 280 65% 60%;
-  --chart-5: 160 60% 45%;
+  --chart-1: 0.488 0.243 264.376;
+  --chart-2: 0.696 0.17 162.48;
+  --chart-3: 0.769 0.188 70.08;
+  --chart-4: 0.627 0.265 303.9;
+  --chart-5: 0.645 0.246 16.439;
 }
 
 /* ---------- Custom Styles ---------- */
diff --git a/apps/dokploy/components/ui/command.tsx b/apps/dokploy/components/ui/command.tsx
index 12d5b0ddd..a63ec1cb8 100644
--- a/apps/dokploy/components/ui/command.tsx
+++ b/apps/dokploy/components/ui/command.tsx
@@ -13,7 +13,7 @@ const Command = React.forwardRef<
 	<CommandPrimitive
 		ref={ref}
 		className={cn(
-			"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground p-px",
+			"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
 			className,
 		)}
 		{...props}
@@ -39,12 +39,12 @@ const CommandInput = React.forwardRef<
 	React.ElementRef<typeof CommandPrimitive.Input>,
 	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
-	<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-		<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+	<div className="flex h-9 items-center gap-2 border-b px-3" cmdk-input-wrapper="">
+		<Search className="size-4 shrink-0 opacity-50" />
 		<CommandPrimitive.Input
 			ref={ref}
 			className={cn(
-				"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+				"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
 				className,
 			)}
 			{...props}
@@ -115,7 +115,7 @@ const CommandItem = React.forwardRef<
 	<CommandPrimitive.Item
 		ref={ref}
 		className={cn(
-			"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 			className,
 		)}
 		{...props}
diff --git a/apps/dokploy/components/ui/input.tsx b/apps/dokploy/components/ui/input.tsx
index ddeb36894..822101fdf 100644
--- a/apps/dokploy/components/ui/input.tsx
+++ b/apps/dokploy/components/ui/input.tsx
@@ -76,8 +76,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 					<input
 						type={inputType}
 						className={cn(
-							// bg-gray
-							"flex h-10 w-full rounded-md bg-input px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border disabled:cursor-not-allowed disabled:opacity-50",
+							"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 md:text-sm",
 							isPassword && (shouldShowGenerator ? "pr-16" : "pr-10"),
 							className,
 						)}
diff --git a/apps/dokploy/components/ui/select.tsx b/apps/dokploy/components/ui/select.tsx
index cbf47dca8..b154bc44a 100644
--- a/apps/dokploy/components/ui/select.tsx
+++ b/apps/dokploy/components/ui/select.tsx
@@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef<
 	<SelectPrimitive.Trigger
 		ref={ref}
 		className={cn(
-			"flex h-10 w-full items-center justify-between rounded-md border border-input bg-input px-3 py-2 text-sm  placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+			"flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30 [&>span]:line-clamp-1",
 			className,
 		)}
 		{...props}
diff --git a/apps/dokploy/components/ui/sidebar.tsx b/apps/dokploy/components/ui/sidebar.tsx
index c198eaecc..9e2b0b5c2 100644
--- a/apps/dokploy/components/ui/sidebar.tsx
+++ b/apps/dokploy/components/ui/sidebar.tsx
@@ -528,7 +528,7 @@ const sidebarMenuButtonVariants = cva(
 			variant: {
 				default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
 				outline:
-					"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+					"bg-background shadow-[0_0_0_1px_oklch(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_oklch(var(--sidebar-accent))]",
 			},
 			size: {
 				default: "h-8 text-sm",
diff --git a/apps/dokploy/components/ui/switch.tsx b/apps/dokploy/components/ui/switch.tsx
index 2a263ee53..345679258 100644
--- a/apps/dokploy/components/ui/switch.tsx
+++ b/apps/dokploy/components/ui/switch.tsx
@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<SwitchPrimitives.Root
 		className={cn(
-			"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted-foreground/80",
+			"peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80",
 			className,
 		)}
 		{...props}
@@ -19,7 +19,7 @@ const Switch = React.forwardRef<
 	>
 		<SwitchPrimitives.Thumb
 			className={cn(
-				"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+				"pointer-events-none block size-4 rounded-full bg-background ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground",
 			)}
 		/>
 	</SwitchPrimitives.Root>
diff --git a/apps/dokploy/pages/_app.tsx b/apps/dokploy/pages/_app.tsx
index 86af79bd0..76eee3fc7 100644
--- a/apps/dokploy/pages/_app.tsx
+++ b/apps/dokploy/pages/_app.tsx
@@ -48,7 +48,7 @@ const MyApp = ({
 				disableTransitionOnChange
 				forcedTheme={Component.theme}
 			>
-				<NextTopLoader color="hsl(var(--sidebar-ring))" />
+				<NextTopLoader color="oklch(var(--sidebar-ring))" />
 				<WhitelabelingProvider />
 				<Toaster richColors />
 				<SearchCommand />
diff --git a/apps/dokploy/styles/globals.css b/apps/dokploy/styles/globals.css
index 8bd768e1a..a3c3e53c2 100644
--- a/apps/dokploy/styles/globals.css
+++ b/apps/dokploy/styles/globals.css
@@ -5,97 +5,97 @@
 @layer base {
 	:root {
 		--terminal-paste: rgba(0, 0, 0, 0.2);
-		--background: 0 0% 100%;
-		--foreground: 240 10% 3.9%;
+		--background: 1 0 0;
+		--foreground: 0.145 0 0;
 
-		--card: 0 0% 100%;
-		--card-foreground: 240 10% 3.9%;
+		--card: 1 0 0;
+		--card-foreground: 0.145 0 0;
 
-		--popover: 0 0% 100%;
-		--popover-foreground: 240 10% 3.9%;
+		--popover: 1 0 0;
+		--popover-foreground: 0.145 0 0;
 
-		--primary: 240 5.9% 10%;
-		--primary-foreground: 0 0% 98%;
+		--primary: 0.205 0 0;
+		--primary-foreground: 0.985 0 0;
 
-		--secondary: 240 4.8% 95.9%;
-		--secondary-foreground: 240 5.9% 10%;
+		--secondary: 0.97 0 0;
+		--secondary-foreground: 0.205 0 0;
 
-		--muted: 240 4.8% 95.9%;
-		--muted-foreground: 240 3.8% 46.1%;
+		--muted: 0.97 0 0;
+		--muted-foreground: 0.556 0 0;
 
-		--accent: 240 4.8% 95.9%;
-		--accent-foreground: 240 5.9% 10%;
+		--accent: 0.97 0 0;
+		--accent-foreground: 0.205 0 0;
 
-		--destructive: 0 84.2% 50.2%;
-		--destructive-foreground: 0 0% 98%;
+		--destructive: 0.577 0.245 27.325;
+		--destructive-foreground: 0.985 0 0;
 
-		--border: 240 5.9% 90%;
-		--input: 240 5.9% 90%;
-		--ring: 240 10% 3.9%;
+		--border: 0.922 0 0;
+		--input: 0.922 0 0;
+		--ring: 0.708 0 0;
 
-		--radius: 0.5rem;
+		--radius: 0.625rem;
 		--overlay: rgba(0, 0, 0, 0.2);
 
-		--chart-1: 173 58% 39%;
-		--chart-2: 12 76% 61%;
-		--chart-3: 197 37% 24%;
-		--chart-4: 43 74% 66%;
-		--chart-5: 27 87% 67%;
-		--sidebar-background: 0 0% 98%;
-		--sidebar-foreground: 240 5.3% 26.1%;
-		--sidebar-primary: 240 5.9% 10%;
-		--sidebar-primary-foreground: 0 0% 98%;
-		--sidebar-accent: 240 4.8% 95.9%;
-		--sidebar-accent-foreground: 240 5.9% 10%;
-		--sidebar-border: 220 13% 91%;
-		--sidebar-ring: 217.2 91.2% 59.8%;
+		--chart-1: 0.646 0.222 41.116;
+		--chart-2: 0.6 0.118 184.704;
+		--chart-3: 0.398 0.07 227.392;
+		--chart-4: 0.828 0.189 84.429;
+		--chart-5: 0.769 0.188 70.08;
+		--sidebar: 0.985 0 0;
+		--sidebar-foreground: 0.145 0 0;
+		--sidebar-primary: 0.205 0 0;
+		--sidebar-primary-foreground: 0.985 0 0;
+		--sidebar-accent: 0.97 0 0;
+		--sidebar-accent-foreground: 0.205 0 0;
+		--sidebar-border: 0.922 0 0;
+		--sidebar-ring: 0.708 0 0;
 	}
 
 	.dark {
 		--terminal-paste: rgba(255, 255, 255, 0.2);
-		--background: 0 0% 0%;
-		--foreground: 0 0% 98%;
+		--background: 0.145 0 0;
+		--foreground: 0.985 0 0;
 
-		--card: 240 4% 10%;
-		--card-foreground: 0 0% 98%;
+		--card: 0.205 0 0;
+		--card-foreground: 0.985 0 0;
 
-		--popover: 240 10% 3.9%;
-		--popover-foreground: 0 0% 98%;
+		--popover: 0.205 0 0;
+		--popover-foreground: 0.985 0 0;
 
-		--primary: 0 0% 98%;
-		--primary-foreground: 240 5.9% 10%;
+		--primary: 0.922 0 0;
+		--primary-foreground: 0.205 0 0;
 
-		--secondary: 240 3.7% 15.9%;
-		--secondary-foreground: 0 0% 98%;
+		--secondary: 0.269 0 0;
+		--secondary-foreground: 0.985 0 0;
 
-		--muted: 240 4% 10%;
-		--muted-foreground: 240 5% 64.9%;
+		--muted: 0.269 0 0;
+		--muted-foreground: 0.708 0 0;
 
-		--accent: 240 3.7% 15.9%;
-		--accent-foreground: 0 0% 98%;
+		--accent: 0.269 0 0;
+		--accent-foreground: 0.985 0 0;
 
-		--destructive: 0 84.2% 50.2%;
-		--destructive-foreground: 0 0% 98%;
+		--destructive: 0.704 0.191 22.216;
+		--destructive-foreground: 0.985 0 0;
 
-		--border: 240 3.7% 15.9%;
-		--input: 240 4% 10%;
-		--ring: 240 4.9% 83.9%;
+		--border: 0.371 0 0;
+		--input: 0.371 0 0;
+		--ring: 0.556 0 0;
 
 		--overlay: rgba(0, 0, 0, 0.5);
 
-		--chart-1: 220 70% 50%;
-		--chart-5: 160 60% 45%;
-		--chart-3: 30 80% 55%;
-		--chart-4: 280 65% 60%;
-		--chart-2: 340 75% 55%;
-		--sidebar-background: 240 5.9% 10%;
-		--sidebar-foreground: 240 4.8% 95.9%;
-		--sidebar-primary: 224.3 76.3% 48%;
-		--sidebar-primary-foreground: 0 0% 100%;
-		--sidebar-accent: 240 3.7% 15.9%;
-		--sidebar-accent-foreground: 240 4.8% 95.9%;
-		--sidebar-border: 240 3.7% 15.9%;
-		--sidebar-ring: 217.2 91.2% 59.8%;
+		--chart-1: 0.488 0.243 264.376;
+		--chart-2: 0.696 0.17 162.48;
+		--chart-3: 0.769 0.188 70.08;
+		--chart-4: 0.627 0.265 303.9;
+		--chart-5: 0.645 0.246 16.439;
+		--sidebar: 0.205 0 0;
+		--sidebar-foreground: 0.985 0 0;
+		--sidebar-primary: 0.488 0.243 264.376;
+		--sidebar-primary-foreground: 0.985 0 0;
+		--sidebar-accent: 0.269 0 0;
+		--sidebar-accent-foreground: 0.985 0 0;
+		--sidebar-border: 0.371 0 0;
+		--sidebar-ring: 0.556 0 0;
 	}
 }
 
@@ -118,13 +118,13 @@
 	}
 
 	::-webkit-scrollbar-thumb {
-		background: hsl(var(--border));
+		background: oklch(var(--border));
 		border-radius: 0.3125rem;
 	}
 
 	* {
 		scrollbar-width: thin;
-		scrollbar-color: hsl(var(--border)) transparent;
+		scrollbar-color: oklch(var(--border)) transparent;
 	}
 }
 
@@ -216,7 +216,7 @@
 @layer utilities {
 	.custom-logs-scrollbar {
 		scrollbar-width: thin;
-		scrollbar-color: hsl(var(--muted-foreground)) transparent;
+		scrollbar-color: oklch(var(--muted-foreground)) transparent;
 	}
 
 	.custom-logs-scrollbar::-webkit-scrollbar {
@@ -229,12 +229,12 @@
 	}
 
 	.custom-logs-scrollbar::-webkit-scrollbar-thumb {
-		background-color: hsl(var(--muted-foreground) / 0.3);
+		background-color: oklch(var(--muted-foreground) / 0.3);
 		border-radius: 20px;
 	}
 
 	.custom-logs-scrollbar::-webkit-scrollbar-thumb:hover {
-		background-color: hsl(var(--muted-foreground) / 0.5);
+		background-color: oklch(var(--muted-foreground) / 0.5);
 	}
 }
 
diff --git a/apps/dokploy/tailwind.config.ts b/apps/dokploy/tailwind.config.ts
index 15ea693d3..c46f5c02f 100644
--- a/apps/dokploy/tailwind.config.ts
+++ b/apps/dokploy/tailwind.config.ts
@@ -32,48 +32,48 @@ const config = {
 				"10xl": "105rem",
 			},
 			colors: {
-				border: "hsl(var(--border))",
-				input: "hsl(var(--input))",
-				ring: "hsl(var(--ring))",
-				background: "hsl(var(--background))",
-				foreground: "hsl(var(--foreground))",
+				border: "oklch(var(--border) / <alpha-value>)",
+				input: "oklch(var(--input) / <alpha-value>)",
+				ring: "oklch(var(--ring) / <alpha-value>)",
+				background: "oklch(var(--background) / <alpha-value>)",
+				foreground: "oklch(var(--foreground) / <alpha-value>)",
 				primary: {
-					DEFAULT: "hsl(var(--primary))",
-					foreground: "hsl(var(--primary-foreground))",
+					DEFAULT: "oklch(var(--primary) / <alpha-value>)",
+					foreground: "oklch(var(--primary-foreground) / <alpha-value>)",
 				},
 				secondary: {
-					DEFAULT: "hsl(var(--secondary))",
-					foreground: "hsl(var(--secondary-foreground))",
+					DEFAULT: "oklch(var(--secondary) / <alpha-value>)",
+					foreground: "oklch(var(--secondary-foreground) / <alpha-value>)",
 				},
 				destructive: {
-					DEFAULT: "hsl(var(--destructive))",
-					foreground: "hsl(var(--destructive-foreground))",
+					DEFAULT: "oklch(var(--destructive) / <alpha-value>)",
+					foreground: "oklch(var(--destructive-foreground) / <alpha-value>)",
 				},
 				muted: {
-					DEFAULT: "hsl(var(--muted))",
-					foreground: "hsl(var(--muted-foreground))",
+					DEFAULT: "oklch(var(--muted) / <alpha-value>)",
+					foreground: "oklch(var(--muted-foreground) / <alpha-value>)",
 				},
 				accent: {
-					DEFAULT: "hsl(var(--accent))",
-					foreground: "hsl(var(--accent-foreground))",
+					DEFAULT: "oklch(var(--accent) / <alpha-value>)",
+					foreground: "oklch(var(--accent-foreground) / <alpha-value>)",
 				},
 				popover: {
-					DEFAULT: "hsl(var(--popover))",
-					foreground: "hsl(var(--popover-foreground))",
+					DEFAULT: "oklch(var(--popover) / <alpha-value>)",
+					foreground: "oklch(var(--popover-foreground) / <alpha-value>)",
 				},
 				card: {
-					DEFAULT: "hsl(var(--card))",
-					foreground: "hsl(var(--card-foreground))",
+					DEFAULT: "oklch(var(--card) / <alpha-value>)",
+					foreground: "oklch(var(--card-foreground) / <alpha-value>)",
 				},
 				sidebar: {
-					DEFAULT: "hsl(var(--sidebar-background))",
-					foreground: "hsl(var(--sidebar-foreground))",
-					primary: "hsl(var(--sidebar-primary))",
-					"primary-foreground": "hsl(var(--sidebar-primary-foreground))",
-					accent: "hsl(var(--sidebar-accent))",
-					"accent-foreground": "hsl(var(--sidebar-accent-foreground))",
-					border: "hsl(var(--sidebar-border))",
-					ring: "hsl(var(--sidebar-ring))",
+					DEFAULT: "oklch(var(--sidebar) / <alpha-value>)",
+					foreground: "oklch(var(--sidebar-foreground) / <alpha-value>)",
+					primary: "oklch(var(--sidebar-primary) / <alpha-value>)",
+					"primary-foreground": "oklch(var(--sidebar-primary-foreground) / <alpha-value>)",
+					accent: "oklch(var(--sidebar-accent) / <alpha-value>)",
+					"accent-foreground": "oklch(var(--sidebar-accent-foreground) / <alpha-value>)",
+					border: "oklch(var(--sidebar-border) / <alpha-value>)",
+					ring: "oklch(var(--sidebar-ring) / <alpha-value>)",
 				},
 			},
 			borderRadius: {
diff --git a/packages/server/package.json b/packages/server/package.json
index 7fe2eaba0..f72c93437 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -1,21 +1,32 @@
 {
   "name": "@dokploy/server",
   "version": "1.0.0",
-  "main": "./src/index.ts",
+  "main": "./dist/index.js",
   "type": "module",
   "exports": {
-    ".": "./src/index.ts",
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs.js"
+    },
     "./db": {
-      "import": "./src/db/index.ts",
+      "import": "./dist/db/index.js",
       "require": "./dist/db/index.cjs.js"
     },
-    "./setup/*": {
-      "import": "./src/setup/*.ts",
-      "require": "./dist/setup/index.cjs.js"
+    "./*": {
+      "import": "./dist/*",
+      "require": "./dist/*.cjs"
     },
-    "./constants": {
-      "import": "./src/constants/index.ts",
-      "require": "./dist/constants.cjs.js"
+    "./dist": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./dist/db": {
+      "import": "./dist/db/index.js",
+      "require": "./dist/db/index.cjs.js"
+    },
+    "./dist/db/schema": {
+      "import": "./dist/db/schema/index.js",
+      "require": "./dist/db/schema/index.cjs.js"
     }
   },
   "scripts": {