fix: enable comment toggle shortcut in env variable editor (#4402)

shouldDeploy passed undefined/null entries from commit.modified straight
into micromatch, which throws "Expected input to be a string" and fails
every webhook deployment when watch paths are configured. Filter out
non-string values before matching.

.github/workflows/dokploy.yml

@@ -138,6 +138,8 @@ jobs:
     needs: [combine-manifests]
     if: github.ref == 'refs/heads/main'
     runs-on: ubuntu-latest
+    outputs:
+      version: ${{ steps.get_version.outputs.version }}
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -160,3 +162,80 @@ jobs:
           prerelease: false
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  sync-version:
+    needs: [generate-release]
+    if: github.ref == 'refs/heads/main'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Sync version to MCP repository
+        run: |
+          git clone https://x-access-token:${{ secrets.DOCS_SYNC_TOKEN }}@github.com/dokploy/mcp.git /tmp/mcp-repo
+          cd /tmp/mcp-repo
+
+          jq --arg v "${{ needs.generate-release.outputs.version }}" '.version = $v' package.json > package.json.tmp
+          mv package.json.tmp package.json
+
+          npm install -g pnpm
+          pnpm install
+          pnpm run fetch-openapi
+          pnpm run generate
+
+          git config user.name "Dokploy Bot"
+          git config user.email "bot@dokploy.com"
+          git add -A
+          git commit -m "chore: bump version to ${{ needs.generate-release.outputs.version }}" \
+            -m "Source: ${{ github.repository }}@${{ github.sha }}" \
+            --allow-empty
+          git push
+
+          echo "✅ MCP repo synced to version ${{ needs.generate-release.outputs.version }}"
+
+      - name: Sync version to CLI repository
+        run: |
+          git clone https://x-access-token:${{ secrets.DOCS_SYNC_TOKEN }}@github.com/dokploy/cli.git /tmp/cli-repo
+          cd /tmp/cli-repo
+
+          jq --arg v "${{ needs.generate-release.outputs.version }}" '.version = $v' package.json > package.json.tmp
+          mv package.json.tmp package.json
+
+          cp ${{ github.workspace }}/openapi.json ./openapi.json
+          npm install -g pnpm
+          pnpm install
+          pnpm run generate
+
+          git config user.name "Dokploy Bot"
+          git config user.email "bot@dokploy.com"
+          git add -A
+          git commit -m "chore: bump version to ${{ needs.generate-release.outputs.version }}" \
+            -m "Source: ${{ github.repository }}@${{ github.sha }}" \
+            --allow-empty
+          git push
+
+          echo "✅ CLI repo synced to version ${{ needs.generate-release.outputs.version }}"
+
+      - name: Sync version to SDK repository
+        run: |
+          git clone https://x-access-token:${{ secrets.DOCS_SYNC_TOKEN }}@github.com/dokploy/sdk.git /tmp/sdk-repo
+          cd /tmp/sdk-repo
+
+          jq --arg v "${{ needs.generate-release.outputs.version }}" '.version = $v' package.json > package.json.tmp
+          mv package.json.tmp package.json
+
+          cp ${{ github.workspace }}/openapi.json ./openapi.json
+          npm install -g pnpm
+          pnpm install
+          pnpm run generate
+
+          git config user.name "Dokploy Bot"
+          git config user.email "bot@dokploy.com"
+          git add -A
+          git commit -m "chore: bump version to ${{ needs.generate-release.outputs.version }}" \
+            -m "Source: ${{ github.repository }}@${{ github.sha }}" \
+            --allow-empty
+          git push
+
+          echo "✅ SDK repo synced to version ${{ needs.generate-release.outputs.version }}"

.github/workflows/sync-openapi-docs.yml

@@ -68,3 +68,66 @@ jobs:
           
           echo "✅ OpenAPI synced to website successfully"
 
+      - name: Sync to MCP repository
+        run: |
+          git clone https://x-access-token:${{ secrets.DOCS_SYNC_TOKEN }}@github.com/dokploy/mcp.git mcp-repo
+
+          cd mcp-repo
+
+          cp -f ../openapi.json openapi.json
+
+          git config user.name "Dokploy Bot"
+          git config user.email "bot@dokploy.com"
+
+          git add openapi.json
+          git commit -m "chore: sync OpenAPI specification [skip ci]" \
+            -m "Source: ${{ github.repository }}@${{ github.sha }}" \
+            -m "Updated: $(date -u +'%Y-%m-%d %H:%M:%S UTC')" \
+            --allow-empty
+
+          git push
+
+          echo "✅ OpenAPI synced to MCP repository successfully"
+
+      - name: Sync to CLI repository
+        run: |
+          git clone https://x-access-token:${{ secrets.DOCS_SYNC_TOKEN }}@github.com/dokploy/cli.git cli-repo
+
+          cd cli-repo
+
+          cp -f ../openapi.json openapi.json
+
+          git config user.name "Dokploy Bot"
+          git config user.email "bot@dokploy.com"
+
+          git add openapi.json
+          git commit -m "chore: sync OpenAPI specification [skip ci]" \
+            -m "Source: ${{ github.repository }}@${{ github.sha }}" \
+            -m "Updated: $(date -u +'%Y-%m-%d %H:%M:%S UTC')" \
+            --allow-empty
+
+          git push
+
+          echo "✅ OpenAPI synced to CLI repository successfully"
+
+      - name: Sync to SDK repository
+        run: |
+          git clone https://x-access-token:${{ secrets.DOCS_SYNC_TOKEN }}@github.com/dokploy/sdk.git sdk-repo
+
+          cd sdk-repo
+
+          cp -f ../openapi.json openapi.json
+
+          git config user.name "Dokploy Bot"
+          git config user.email "bot@dokploy.com"
+
+          git add openapi.json
+          git commit -m "chore: sync OpenAPI specification [skip ci]" \
+            -m "Source: ${{ github.repository }}@${{ github.sha }}" \
+            -m "Updated: $(date -u +'%Y-%m-%d %H:%M:%S UTC')" \
+            --allow-empty
+
+          git push
+
+          echo "✅ OpenAPI synced to SDK repository successfully"
+

.vscode/settings.json

@@ -4,5 +4,8 @@
 	"editor.codeActionsOnSave": {
 		"source.fixAll.biome": "explicit",
 		"source.organizeImports.biome": "explicit"
+	},
+	"[typescript]": {
+		"editor.defaultFormatter": "biomejs.biome"
 	}
 }

Dockerfile

@@ -66,7 +66,7 @@ COPY --from=buildpacksio/pack:0.39.1 /usr/local/bin/pack /usr/local/bin/pack
 
 EXPOSE 3000
 
-HEALTHCHECK --interval=10s --timeout=3s --retries=10 \
+HEALTHCHECK --interval=30s --timeout=5s --start-period=60s --retries=5 \
   CMD curl -fs http://localhost:3000/api/trpc/settings.health || exit 1
 
   CMD ["sh", "-c", "pnpm run wait-for-postgres && exec pnpm start"]

README.md

@@ -39,7 +39,7 @@ To get started, run the following command on a VPS:
 Want to skip the installation process? [Try the Dokploy Cloud](https://app.dokploy.com).
 
 ```bash
-curl -sSL https://dokploy.com/install.sh | sh
+curl -sSL https://dokploy.com/install.sh | bash
 ```
 
 For detailed documentation, visit [docs.dokploy.com](https://docs.dokploy.com).

apps/dokploy/__test__/compose/domain/host-rule-format.test.ts

@@ -33,6 +33,7 @@ describe("Host rule format regression tests", () => {
 		internalPath: "/",
 		stripPath: false,
 		customEntrypoint: null,
+		middlewares: null,
 	};
 
 	describe("Host rule format validation", () => {

apps/dokploy/__test__/compose/domain/labels.test.ts

@@ -22,6 +22,7 @@ describe("createDomainLabels", () => {
 		previewDeploymentId: "",
 		internalPath: "/",
 		stripPath: false,
+		middlewares: null,
 	};
 
 	it("should create basic labels for web entrypoint", async () => {
@@ -172,12 +173,12 @@ describe("createDomainLabels", () => {
 			"websecure",
 		);
 
-		// Web entrypoint should have both middlewares with redirect first
+		// Web entrypoint with HTTPS should only have redirect
 		expect(webLabels).toContain(
-			"traefik.http.routers.test-app-1-web.middlewares=redirect-to-https@file,addprefix-test-app-1",
+			"traefik.http.routers.test-app-1-web.middlewares=redirect-to-https@file",
 		);
 
-		// Websecure should only have the addprefix middleware
+		// Websecure should have the addprefix middleware
 		expect(websecureLabels).toContain(
 			"traefik.http.routers.test-app-1-websecure.middlewares=addprefix-test-app-1",
 		);
@@ -209,9 +210,9 @@ describe("createDomainLabels", () => {
 			"traefik.http.middlewares.addprefix-test-app-1.addprefix.prefix=/hello",
 		);
 
-		// Should have middlewares in correct order: redirect, stripprefix, addprefix
+		// Web router with HTTPS should only have redirect
 		expect(webLabels).toContain(
-			"traefik.http.routers.test-app-1-web.middlewares=redirect-to-https@file,stripprefix-test-app-1,addprefix-test-app-1",
+			"traefik.http.routers.test-app-1-web.middlewares=redirect-to-https@file",
 		);
 	});
 
@@ -242,6 +243,131 @@ describe("createDomainLabels", () => {
 		);
 	});
 
+	it("should add single custom middleware to router", async () => {
+		const customMiddlewareDomain = {
+			...baseDomain,
+			middlewares: ["auth@file"],
+		};
+		const labels = await createDomainLabels(
+			appName,
+			customMiddlewareDomain,
+			"web",
+		);
+
+		expect(labels).toContain(
+			"traefik.http.routers.test-app-1-web.middlewares=auth@file",
+		);
+	});
+
+	it("should add multiple custom middlewares to router", async () => {
+		const customMiddlewareDomain = {
+			...baseDomain,
+			middlewares: ["auth@file", "rate-limit@file"],
+		};
+		const labels = await createDomainLabels(
+			appName,
+			customMiddlewareDomain,
+			"web",
+		);
+
+		expect(labels).toContain(
+			"traefik.http.routers.test-app-1-web.middlewares=auth@file,rate-limit@file",
+		);
+	});
+
+	it("should only have redirect on web router when HTTPS is enabled with custom middlewares", async () => {
+		const combinedDomain = {
+			...baseDomain,
+			https: true,
+			middlewares: ["auth@file"],
+		};
+		const labels = await createDomainLabels(appName, combinedDomain, "web");
+
+		// Web router with HTTPS should only redirect, custom middlewares go on websecure
+		expect(labels).toContain(
+			"traefik.http.routers.test-app-1-web.middlewares=redirect-to-https@file",
+		);
+		expect(labels).not.toContain("auth@file");
+	});
+
+	it("should combine custom middlewares with stripPath middleware (no HTTPS)", async () => {
+		const combinedDomain = {
+			...baseDomain,
+			path: "/api",
+			stripPath: true,
+			middlewares: ["auth@file"],
+		};
+		const labels = await createDomainLabels(appName, combinedDomain, "web");
+
+		// stripprefix should come before custom middleware
+		expect(labels).toContain(
+			"traefik.http.routers.test-app-1-web.middlewares=stripprefix-test-app-1,auth@file",
+		);
+	});
+
+	it("should only have redirect on web router even with all built-in middlewares and custom middlewares", async () => {
+		const fullDomain = {
+			...baseDomain,
+			https: true,
+			path: "/api",
+			stripPath: true,
+			internalPath: "/hello",
+			middlewares: ["auth@file", "rate-limit@file"],
+		};
+		const webLabels = await createDomainLabels(appName, fullDomain, "web");
+
+		// Web router with HTTPS should only redirect
+		expect(webLabels).toContain(
+			"traefik.http.routers.test-app-1-web.middlewares=redirect-to-https@file",
+		);
+		// Middleware definitions should still be present (Traefik needs them registered)
+		expect(webLabels).toContain(
+			"traefik.http.middlewares.stripprefix-test-app-1.stripprefix.prefixes=/api",
+		);
+		expect(webLabels).toContain(
+			"traefik.http.middlewares.addprefix-test-app-1.addprefix.prefix=/hello",
+		);
+		// But they should NOT be attached to the router
+		expect(webLabels).not.toContain("stripprefix-test-app-1,");
+		expect(webLabels).not.toContain("auth@file");
+		expect(webLabels).not.toContain("rate-limit@file");
+	});
+
+	it("should include custom middlewares on websecure entrypoint", async () => {
+		const customMiddlewareDomain = {
+			...baseDomain,
+			https: true,
+			middlewares: ["auth@file"],
+		};
+		const websecureLabels = await createDomainLabels(
+			appName,
+			customMiddlewareDomain,
+			"websecure",
+		);
+
+		// Websecure should have custom middleware but not redirect-to-https
+		expect(websecureLabels).toContain(
+			"traefik.http.routers.test-app-1-websecure.middlewares=auth@file",
+		);
+		expect(websecureLabels).not.toContain("redirect-to-https");
+	});
+
+	it("should NOT include custom middlewares on web router when HTTPS is enabled (only redirect)", async () => {
+		const domain = {
+			...baseDomain,
+			https: true,
+			middlewares: ["rate-limit@file", "auth@file"],
+		};
+		const webLabels = await createDomainLabels(appName, domain, "web");
+
+		// Web router with HTTPS should ONLY have redirect, not custom middlewares
+		expect(webLabels).toContain(
+			"traefik.http.routers.test-app-1-web.middlewares=redirect-to-https@file",
+		);
+		expect(webLabels).not.toContain("rate-limit@file");
+		expect(webLabels).not.toContain("auth@file");
+	});
+
 	it("should create basic labels for custom entrypoint", async () => {
 		const labels = await createDomainLabels(
 			appName,

apps/dokploy/__test__/deploy/github.test.ts

@@ -415,5 +415,24 @@ describe("Docker Image Name and Tag Extraction", () => {
 			expect(extractImageTag("my-image:123")).toBe("123");
 			expect(extractImageTag("my-image:1")).toBe("1");
 		});
+
+		it("should return 'latest' for registry with port but no tag", () => {
+			expect(extractImageTag("registry.example.com:5000/myimage")).toBe(
+				"latest",
+			);
+			expect(extractImageTag("registry:5000/fedora/httpd")).toBe("latest");
+			expect(extractImageTag("localhost:5000/myapp")).toBe("latest");
+			expect(extractImageTag("my-registry.io:443/org/app")).toBe("latest");
+		});
+
+		it("should extract tag from registry with port and tag", () => {
+			expect(extractImageTag("registry:5000/image:tag")).toBe("tag");
+			expect(extractImageTag("registry.example.com:5000/myimage:v2.0")).toBe(
+				"v2.0",
+			);
+			expect(extractImageTag("localhost:5000/app:sha-abc123")).toBe(
+				"sha-abc123",
+			);
+		});
 	});
 });

apps/dokploy/__test__/deploy/should-deploy.test.ts

@@ -0,0 +1,41 @@
+import { shouldDeploy } from "@dokploy/server";
+import { describe, expect, it } from "vitest";
+
+describe("shouldDeploy", () => {
+	it("should deploy when no watch paths are configured", () => {
+		expect(shouldDeploy(null, ["src/index.ts"])).toBe(true);
+		expect(shouldDeploy([], ["src/index.ts"])).toBe(true);
+	});
+
+	it("should deploy when watch paths match modified files", () => {
+		expect(shouldDeploy(["src/**"], ["src/index.ts"])).toBe(true);
+		expect(shouldDeploy(["apps/web/**"], ["apps/web/page.tsx"])).toBe(true);
+	});
+
+	it("should not deploy when watch paths do not match", () => {
+		expect(shouldDeploy(["src/**"], ["docs/readme.md"])).toBe(false);
+	});
+
+	it("should not throw when modified files contain non-string values", () => {
+		expect(() =>
+			shouldDeploy(["src/**"], ["src/index.ts", undefined, null] as any),
+		).not.toThrow();
+		expect(
+			shouldDeploy(["src/**"], ["src/index.ts", undefined, null] as any),
+		).toBe(true);
+	});
+
+	it("should not throw when modified files are undefined or null", () => {
+		expect(() => shouldDeploy(["src/**"], undefined)).not.toThrow();
+		expect(() => shouldDeploy(["src/**"], null)).not.toThrow();
+		expect(shouldDeploy(["src/**"], undefined)).toBe(false);
+		expect(shouldDeploy(["src/**"], null)).toBe(false);
+	});
+
+	it("should not throw when every modified file is non-string", () => {
+		expect(() =>
+			shouldDeploy(["src/**"], [undefined, undefined] as any),
+		).not.toThrow();
+		expect(shouldDeploy(["src/**"], [undefined, undefined] as any)).toBe(false);
+	});
+});

apps/dokploy/__test__/drop/drop.test.ts

@@ -120,6 +120,7 @@ const baseApp: ApplicationNested = {
 	environmentId: "",
 	enabled: null,
 	env: null,
+	icon: null,
 	healthCheckSwarm: null,
 	labelsSwarm: null,
 	memoryLimit: null,

apps/dokploy/__test__/server/mechanizeDockerContainer.test.ts

@@ -57,7 +57,7 @@ const createApplication = (
 			env: null,
 		},
 		replicas: 1,
-		stopGracePeriodSwarm: 0n,
+		stopGracePeriodSwarm: 0,
 		ulimitsSwarm: null,
 		serverId: "server-id",
 		...overrides,
@@ -76,8 +76,8 @@ describe("mechanizeDockerContainer", () => {
 		});
 	});
 
-	it("converts bigint stopGracePeriodSwarm to a number and keeps zero values", async () => {
+	it("passes stopGracePeriodSwarm as a number and keeps zero values", async () => {
-		const application = createApplication({ stopGracePeriodSwarm: 0n });
+		const application = createApplication({ stopGracePeriodSwarm: 0 });
 
 		await mechanizeDockerContainer(application);
 

apps/dokploy/__test__/templates/config.template.test.ts

@@ -494,4 +494,49 @@ describe("processTemplate", () => {
 			expect(result.mounts).toHaveLength(1);
 		});
 	});
+
+	describe("isolated deployment config", () => {
+		it("should default to isolated=true when not specified", () => {
+			const template: CompleteTemplate = {
+				metadata: {} as any,
+				variables: {},
+				config: {
+					domains: [],
+					env: {},
+				},
+			};
+
+			expect(template.config.isolated).toBeUndefined();
+			// undefined !== false => isolatedDeployment = true
+			expect(template.config.isolated !== false).toBe(true);
+		});
+
+		it("should be isolated when isolated=true is explicitly set", () => {
+			const template: CompleteTemplate = {
+				metadata: {} as any,
+				variables: {},
+				config: {
+					isolated: true,
+					domains: [],
+					env: {},
+				},
+			};
+
+			expect(template.config.isolated !== false).toBe(true);
+		});
+
+		it("should disable isolated deployment when isolated=false", () => {
+			const template: CompleteTemplate = {
+				metadata: {} as any,
+				variables: {},
+				config: {
+					isolated: false,
+					domains: [],
+					env: {},
+				},
+			};
+
+			expect(template.config.isolated !== false).toBe(false);
+		});
+	});
 });

apps/dokploy/__test__/templates/helpers.template.test.ts

@@ -30,9 +30,7 @@ describe("helpers functions", () => {
 			const domain = processValue("${domain}", {}, mockSchema);
 			expect(domain.startsWith(`${mockSchema.projectName}-`)).toBeTruthy();
 			expect(
-				domain.endsWith(
+				domain.endsWith(`${mockSchema.serverIp.replaceAll(".", "-")}.sslip.io`),
-					`${mockSchema.serverIp.replaceAll(".", "-")}.traefik.me`,
-				),
 			).toBeTruthy();
 		});
 	});

apps/dokploy/__test__/traefik/traefik.test.ts

@@ -95,6 +95,7 @@ const baseApp: ApplicationNested = {
 	dropBuildPath: null,
 	enabled: null,
 	env: null,
+	icon: null,
 	healthCheckSwarm: null,
 	labelsSwarm: null,
 	memoryLimit: null,
@@ -146,6 +147,7 @@ const baseDomain: Domain = {
 	previewDeploymentId: "",
 	internalPath: "/",
 	stripPath: false,
+	middlewares: null,
 };
 
 const baseRedirect: Redirect = {
@@ -265,6 +267,80 @@ test("Websecure entrypoint on https domain with redirect", async () => {
 	expect(router.middlewares).toContain("redirect-test-1");
 });
 
+/** Custom Middlewares */
+
+test("Web entrypoint with single custom middleware", async () => {
+	const router = await createRouterConfig(
+		baseApp,
+		{ ...baseDomain, middlewares: ["auth@file"] },
+		"web",
+	);
+
+	expect(router.middlewares).toContain("auth@file");
+});
+
+test("Web entrypoint with multiple custom middlewares", async () => {
+	const router = await createRouterConfig(
+		baseApp,
+		{ ...baseDomain, middlewares: ["auth@file", "rate-limit@file"] },
+		"web",
+	);
+
+	expect(router.middlewares).toContain("auth@file");
+	expect(router.middlewares).toContain("rate-limit@file");
+});
+
+test("Web entrypoint on https domain with custom middleware", async () => {
+	const router = await createRouterConfig(
+		baseApp,
+		{ ...baseDomain, https: true, middlewares: ["auth@file"] },
+		"web",
+	);
+
+	// Should only have HTTPS redirect - custom middleware applies on websecure
+	expect(router.middlewares).toContain("redirect-to-https");
+	expect(router.middlewares).not.toContain("auth@file");
+});
+
+test("Websecure entrypoint with custom middleware", async () => {
+	const router = await createRouterConfig(
+		baseApp,
+		{ ...baseDomain, https: true, middlewares: ["auth@file"] },
+		"websecure",
+	);
+
+	// Should have custom middleware but not HTTPS redirect
+	expect(router.middlewares).not.toContain("redirect-to-https");
+	expect(router.middlewares).toContain("auth@file");
+});
+
+test("Web entrypoint with redirect and custom middleware", async () => {
+	const router = await createRouterConfig(
+		{
+			...baseApp,
+			appName: "test",
+			redirects: [{ ...baseRedirect, uniqueConfigKey: 1 }],
+		},
+		{ ...baseDomain, middlewares: ["auth@file"] },
+		"web",
+	);
+
+	// Should have both redirect middleware and custom middleware
+	expect(router.middlewares).toContain("redirect-test-1");
+	expect(router.middlewares).toContain("auth@file");
+});
+
+test("Web entrypoint with empty middlewares array", async () => {
+	const router = await createRouterConfig(
+		baseApp,
+		{ ...baseDomain, https: false, middlewares: [] },
+		"web",
+	);
+
+	// Should behave same as no middlewares - no redirect for http
+	expect(router.middlewares).not.toContain("redirect-to-https");
+});
+
 /** Certificates */
 
 test("CertificateType on websecure entrypoint", async () => {
@@ -348,6 +424,26 @@ test("Custom entrypoint with internalPath adds addprefix middleware", async () =
 	expect(router.entryPoints).toEqual(["custom"]);
 });
 
+test("stripPath and internalPath together: stripprefix must come before addprefix", async () => {
+	const router = await createRouterConfig(
+		baseApp,
+		{
+			...baseDomain,
+			path: "/public",
+			stripPath: true,
+			internalPath: "/app/v2",
+		},
+		"web",
+	);
+
+	const stripIndex = router.middlewares?.indexOf("stripprefix--1") ?? -1;
+	const addIndex = router.middlewares?.indexOf("addprefix--1") ?? -1;
+
+	expect(stripIndex).toBeGreaterThanOrEqual(0);
+	expect(addIndex).toBeGreaterThanOrEqual(0);
+	expect(stripIndex).toBeLessThan(addIndex);
+});
+
 test("Custom entrypoint with https and custom cert resolver", async () => {
 	const router = await createRouterConfig(
 		baseApp,

apps/dokploy/__test__/wss/readValidDirectory.test.ts

@@ -78,4 +78,20 @@ describe("readValidDirectory (path traversal)", () => {
 	it("returns false for empty string (resolves to cwd)", () => {
 		expect(readValidDirectory("")).toBe(false);
 	});
+
+	it("returns true for Next.js dynamic route paths with square brackets", () => {
+		expect(
+			readValidDirectory(
+				`${BASE}/applications/myapp/code/app/api/[id]/route.ts`,
+			),
+		).toBe(true);
+		expect(
+			readValidDirectory(`${BASE}/applications/myapp/code/pages/[slug].tsx`),
+		).toBe(true);
+		expect(
+			readValidDirectory(
+				`${BASE}/applications/myapp/code/app/[...catch]/page.tsx`,
+			),
+		).toBe(true);
+	});
 });

apps/dokploy/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx

@@ -110,6 +110,13 @@ const menuItems: MenuItem[] = [
 	},
 ];
 
+const hasStopGracePeriodSwarm = (
+	value: unknown,
+): value is { stopGracePeriodSwarm: number | string | null } =>
+	typeof value === "object" &&
+	value !== null &&
+	"stopGracePeriodSwarm" in value;
+
 interface Props {
 	id: string;
 	type:

apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/stop-grace-period-form.tsx

@@ -16,7 +16,7 @@ import { api } from "@/utils/api";
 
 const hasStopGracePeriodSwarm = (
 	value: unknown,
-): value is { stopGracePeriodSwarm: bigint | number | string | null } =>
+): value is { stopGracePeriodSwarm: number | string | null } =>
 	typeof value === "object" &&
 	value !== null &&
 	"stopGracePeriodSwarm" in value;
@@ -68,7 +68,7 @@ export const StopGracePeriodForm = ({ id, type }: StopGracePeriodFormProps) => {
 
 	const form = useForm<any>({
 		defaultValues: {
-			value: null as bigint | null,
+			value: null as number | null,
 		},
 	});
 
@@ -76,11 +76,7 @@ export const StopGracePeriodForm = ({ id, type }: StopGracePeriodFormProps) => {
 		if (hasStopGracePeriodSwarm(data)) {
 			const value = data.stopGracePeriodSwarm;
 			const normalizedValue =
-				value === null || value === undefined
+				value === null || value === undefined ? null : Number(value);
-					? null
-					: typeof value === "bigint"
-						? value
-						: BigInt(value);
 			form.reset({
 				value: normalizedValue,
 			});
@@ -136,7 +132,7 @@ export const StopGracePeriodForm = ({ id, type }: StopGracePeriodFormProps) => {
 									}
 									onChange={(e) =>
 										field.onChange(
-											e.target.value ? BigInt(e.target.value) : null,
+											e.target.value ? Number(e.target.value) : null,
 										)
 									}
 								/>

apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx

@@ -1,6 +1,7 @@
 import copy from "copy-to-clipboard";
 import { Check, Copy, Loader2 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
+import { AnalyzeLogs } from "@/components/dashboard/docker/logs/analyze-logs";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -165,6 +166,7 @@ export const ShowDeployment = ({
 								<Copy className="h-3.5 w-3.5" />
 							)}
 						</Button>
+						<AnalyzeLogs logs={filteredLogs} context="build" />
 
 						{serverId && (
 							<div className="flex items-center space-x-2">

apps/dokploy/components/dashboard/application/domains/columns.tsx

@@ -0,0 +1,303 @@
+import type { ColumnDef } from "@tanstack/react-table";
+import {
+	ArrowUpDown,
+	CheckCircle2,
+	ExternalLink,
+	Loader2,
+	PenBoxIcon,
+	RefreshCw,
+	Server,
+	Trash2,
+	XCircle,
+} from "lucide-react";
+import Link from "next/link";
+import { DialogAction } from "@/components/shared/dialog-action";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import type { RouterOutputs } from "@/utils/api";
+import { DnsHelperModal } from "./dns-helper-modal";
+import { AddDomain } from "./handle-domain";
+import type { ValidationStates } from "./show-domains";
+
+export type Domain =
+	| RouterOutputs["domain"]["byApplicationId"][0]
+	| RouterOutputs["domain"]["byComposeId"][0];
+
+interface ColumnsProps {
+	id: string;
+	type: "application" | "compose";
+	validationStates: ValidationStates;
+	handleValidateDomain: (host: string) => Promise<void>;
+	handleDeleteDomain: (domainId: string) => Promise<void>;
+	isDeleting: boolean;
+	serverIp?: string;
+	canCreateDomain: boolean;
+	canDeleteDomain: boolean;
+}
+
+export const createColumns = ({
+	id,
+	type,
+	validationStates,
+	handleValidateDomain,
+	handleDeleteDomain,
+	isDeleting,
+	serverIp,
+	canCreateDomain,
+	canDeleteDomain,
+}: ColumnsProps): ColumnDef<Domain>[] => [
+	...(type === "compose"
+		? [
+				{
+					accessorKey: "serviceName",
+					header: "Service",
+					cell: ({ row }: { row: { getValue: (key: string) => unknown } }) => {
+						const serviceName = row.getValue("serviceName") as string | null;
+						if (!serviceName) return null;
+						return (
+							<Badge variant="outline">
+								<Server className="size-3 mr-1" />
+								{serviceName}
+							</Badge>
+						);
+					},
+				} satisfies ColumnDef<Domain>,
+			]
+		: []),
+	{
+		accessorKey: "host",
+		header: ({ column }) => {
+			return (
+				<Button
+					variant="ghost"
+					onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+				>
+					Host
+					<ArrowUpDown className="ml-2 h-4 w-4" />
+				</Button>
+			);
+		},
+		cell: ({ row }) => {
+			const domain = row.original;
+			return (
+				<Link
+					className="flex items-center gap-2 font-medium hover:underline"
+					target="_blank"
+					href={`${domain.https ? "https" : "http"}://${domain.host}${domain.path}`}
+				>
+					{domain.host}
+					<ExternalLink className="size-3" />
+				</Link>
+			);
+		},
+	},
+	{
+		accessorKey: "path",
+		header: ({ column }) => {
+			return (
+				<Button
+					variant="ghost"
+					onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+				>
+					Path
+					<ArrowUpDown className="ml-2 h-4 w-4" />
+				</Button>
+			);
+		},
+		cell: ({ row }) => {
+			const path = row.getValue("path") as string;
+			return <div className="font-mono text-sm">{path || "/"}</div>;
+		},
+	},
+	{
+		accessorKey: "port",
+		header: ({ column }) => {
+			return (
+				<Button
+					variant="ghost"
+					onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+				>
+					Port
+					<ArrowUpDown className="ml-2 h-4 w-4" />
+				</Button>
+			);
+		},
+		cell: ({ row }) => {
+			const port = row.getValue("port") as number;
+			return <Badge variant="secondary">{port}</Badge>;
+		},
+	},
+	{
+		accessorKey: "customEntrypoint",
+		header: "Entrypoint",
+		cell: ({ row }) => {
+			const entrypoint = row.getValue("customEntrypoint") as string | null;
+			if (!entrypoint) return <span className="text-muted-foreground">-</span>;
+			return <div className="font-mono text-sm">{entrypoint}</div>;
+		},
+	},
+	{
+		accessorKey: "https",
+		header: "Protocol",
+		cell: ({ row }) => {
+			const https = row.getValue("https") as boolean;
+			return (
+				<Badge variant={https ? "outline" : "secondary"}>
+					{https ? "HTTPS" : "HTTP"}
+				</Badge>
+			);
+		},
+	},
+	{
+		id: "certificate",
+		header: "Certificate",
+		cell: ({ row }) => {
+			const domain = row.original;
+			const validationState = validationStates[domain.host];
+
+			return (
+				<div className="flex items-center gap-2">
+					{domain.certificateType && (
+						<Badge variant="outline" className="capitalize">
+							{domain.certificateType}
+						</Badge>
+					)}
+					{!domain.host.includes("sslip.io") && (
+						<TooltipProvider>
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<Badge
+										variant="outline"
+										className={
+											validationState?.isValid
+												? "bg-green-500/10 text-green-500 cursor-pointer"
+												: validationState?.error
+													? "bg-red-500/10 text-red-500 cursor-pointer"
+													: "bg-yellow-500/10 text-yellow-500 cursor-pointer"
+										}
+										onClick={() => handleValidateDomain(domain.host)}
+									>
+										{validationState?.isLoading ? (
+											<>
+												<Loader2 className="size-3 mr-1 animate-spin" />
+												Checking...
+											</>
+										) : validationState?.isValid ? (
+											<>
+												<CheckCircle2 className="size-3 mr-1" />
+												{validationState.message && validationState.cdnProvider
+													? `${validationState.cdnProvider}`
+													: "Valid"}
+											</>
+										) : validationState?.error ? (
+											<>
+												<XCircle className="size-3 mr-1" />
+												Invalid
+											</>
+										) : (
+											<>
+												<RefreshCw className="size-3 mr-1" />
+												Validate
+											</>
+										)}
+									</Badge>
+								</TooltipTrigger>
+								<TooltipContent className="max-w-xs">
+									{validationState?.error ? (
+										<div className="flex flex-col gap-1">
+											<p className="font-medium text-red-500">Error:</p>
+											<p>{validationState.error}</p>
+										</div>
+									) : (
+										"Click to validate DNS configuration"
+									)}
+								</TooltipContent>
+							</Tooltip>
+						</TooltipProvider>
+					)}
+				</div>
+			);
+		},
+	},
+	{
+		accessorKey: "createdAt",
+		header: ({ column }) => {
+			return (
+				<Button
+					variant="ghost"
+					onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+				>
+					Created
+					<ArrowUpDown className="ml-2 h-4 w-4" />
+				</Button>
+			);
+		},
+		cell: ({ row }) => {
+			const createdAt = row.getValue("createdAt") as string;
+			return (
+				<div className="text-sm text-muted-foreground">
+					{new Date(createdAt).toLocaleDateString()}
+				</div>
+			);
+		},
+	},
+	{
+		id: "actions",
+		header: "Actions",
+		enableHiding: false,
+		cell: ({ row }) => {
+			const domain = row.original;
+
+			return (
+				<div className="flex items-center gap-2">
+					{!domain.host.includes("sslip.io") && (
+						<DnsHelperModal
+							domain={{
+								host: domain.host,
+								https: domain.https,
+								path: domain.path || undefined,
+							}}
+							serverIp={serverIp}
+						/>
+					)}
+					{canCreateDomain && (
+						<AddDomain id={id} type={type} domainId={domain.domainId}>
+							<Button
+								variant="ghost"
+								size="icon"
+								className="group hover:bg-blue-500/10 h-8 w-8"
+							>
+								<PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" />
+							</Button>
+						</AddDomain>
+					)}
+					{canDeleteDomain && (
+						<DialogAction
+							title="Delete Domain"
+							description="Are you sure you want to delete this domain?"
+							type="destructive"
+							onClick={async () => {
+								await handleDeleteDomain(domain.domainId);
+							}}
+						>
+							<Button
+								variant="ghost"
+								size="icon"
+								className="group hover:bg-red-500/10 h-8 w-8"
+								isLoading={isDeleting}
+							>
+								<Trash2 className="size-4 text-primary group-hover:text-red-500" />
+							</Button>
+						</DialogAction>
+					)}
+				</div>
+			);
+		},
+	},
+];

apps/dokploy/components/dashboard/application/domains/handle-domain.tsx

@@ -1,11 +1,12 @@
 import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
-import { DatabaseZap, Dices, RefreshCw } from "lucide-react";
+import { DatabaseZap, Dices, RefreshCw, X } from "lucide-react";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import z from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -68,6 +69,7 @@ export const domain = z
 		customCertResolver: z.string().optional(),
 		serviceName: z.string().optional(),
 		domainType: z.enum(["application", "compose", "preview"]).optional(),
+		middlewares: z.array(z.string()).optional(),
 	})
 	.superRefine((input, ctx) => {
 		if (input.https && !input.certificateType) {
@@ -213,6 +215,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 			customCertResolver: undefined,
 			serviceName: undefined,
 			domainType: type,
+			middlewares: [],
 		},
 		mode: "onChange",
 	});
@@ -222,7 +225,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 	const https = form.watch("https");
 	const domainType = form.watch("domainType");
 	const host = form.watch("host");
-	const isTraefikMeDomain = host?.includes("traefik.me") || false;
+	const isTraefikMeDomain = host?.includes("sslip.io") || false;
 
 	useEffect(() => {
 		if (data) {
@@ -239,6 +242,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 				customCertResolver: data?.customCertResolver || undefined,
 				serviceName: data?.serviceName || undefined,
 				domainType: data?.domainType || type,
+				middlewares: data?.middlewares || [],
 			});
 		}
 
@@ -255,6 +259,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 				certificateType: undefined,
 				customCertResolver: undefined,
 				domainType: type,
+				middlewares: [],
 			});
 		}
 	}, [form, data, isPending, domainId]);
@@ -285,6 +290,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 				composeId: id,
 			}),
 			...data,
+			customEntrypoint: data.useCustomEntrypoint ? data.customEntrypoint : null,
 		})
 			.then(async () => {
 				toast.success(dictionary.success);
@@ -507,7 +513,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 									render={({ field }) => (
 										<FormItem>
 											{!canGenerateTraefikMeDomains &&
-												field.value.includes("traefik.me") && (
+												field.value.includes("sslip.io") && (
 													<AlertBlock type="warning">
 														You need to set an IP address in your{" "}
 														<Link
@@ -518,12 +524,12 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 																? "Remote Servers -> Server -> Edit Server -> Update IP Address"
 																: "Web Server -> Server -> Update Server IP"}
 														</Link>{" "}
-														to make your traefik.me domain work.
+														to make your sslip.io domain work.
 													</AlertBlock>
 												)}
 											{isTraefikMeDomain && (
 												<AlertBlock type="info">
-													<strong>Note:</strong> traefik.me is a public HTTP
+													<strong>Note:</strong> sslip.io is a public HTTP
 													service and does not support SSL/HTTPS. HTTPS and
 													certificate options will not have any effect.
 												</AlertBlock>
@@ -561,7 +567,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 															sideOffset={5}
 															className="max-w-[10rem]"
 														>
-															<p>Generate traefik.me domain</p>
+															<p>Generate sslip.io domain</p>
 														</TooltipContent>
 													</Tooltip>
 												</TooltipProvider>
@@ -660,7 +666,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 											<div className="space-y-0.5">
 												<FormLabel>Custom Entrypoint</FormLabel>
 												<FormDescription>
-													Use custom entrypoint for domina
+													Use custom entrypoint for domain
 													<br />
 													"web" and/or "websecure" is used by default.
 												</FormDescription>
@@ -669,7 +675,12 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 											<FormControl>
 												<Switch
 													checked={field.value}
-													onCheckedChange={field.onChange}
+													onCheckedChange={(checked) => {
+														field.onChange(checked);
+														if (!checked) {
+															form.setValue("customEntrypoint", undefined);
+														}
+													}}
 												/>
 											</FormControl>
 										</FormItem>
@@ -786,6 +797,88 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 										)}
 									</>
 								)}
+								<FormField
+									control={form.control}
+									name="middlewares"
+									render={({ field }) => (
+										<FormItem>
+											<div className="flex items-center gap-2">
+												<FormLabel>Middlewares</FormLabel>
+												<TooltipProvider>
+													<Tooltip>
+														<TooltipTrigger>
+															<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
+																?
+															</div>
+														</TooltipTrigger>
+														<TooltipContent className="max-w-[300px]">
+															<p>
+																Add Traefik middleware references. Middlewares
+																must be defined in your Traefik configuration.
+															</p>
+														</TooltipContent>
+													</Tooltip>
+												</TooltipProvider>
+											</div>
+											<div className="flex flex-wrap gap-2 mb-2">
+												{field.value?.map((name, index) => (
+													<Badge key={index} variant="secondary">
+														{name}
+														<X
+															className="ml-1 size-3 cursor-pointer"
+															onClick={() => {
+																const newMiddlewares = [...(field.value || [])];
+																newMiddlewares.splice(index, 1);
+																form.setValue("middlewares", newMiddlewares);
+															}}
+														/>
+													</Badge>
+												))}
+											</div>
+											<FormControl>
+												<div className="flex gap-2">
+													<Input
+														placeholder="e.g., rate-limit@file, auth@file"
+														onKeyDown={(e) => {
+															if (e.key === "Enter") {
+																e.preventDefault();
+																const input = e.currentTarget;
+																const value = input.value.trim();
+																if (value && !field.value?.includes(value)) {
+																	form.setValue("middlewares", [
+																		...(field.value || []),
+																		value,
+																	]);
+																	input.value = "";
+																}
+															}
+														}}
+													/>
+													<Button
+														type="button"
+														variant="secondary"
+														onClick={() => {
+															const input = document.querySelector(
+																'input[placeholder="e.g., rate-limit@file, auth@file"]',
+															) as HTMLInputElement;
+															const value = input.value.trim();
+															if (value && !field.value?.includes(value)) {
+																form.setValue("middlewares", [
+																	...(field.value || []),
+																	value,
+																]);
+																input.value = "";
+															}
+														}}
+													>
+														Add
+													</Button>
+												</div>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
 							</div>
 						</div>
 					</form>

apps/dokploy/components/dashboard/application/domains/show-domains.tsx

@@ -1,8 +1,22 @@
+import {
+	type ColumnFiltersState,
+	flexRender,
+	getCoreRowModel,
+	getFilteredRowModel,
+	getPaginationRowModel,
+	getSortedRowModel,
+	type SortingState,
+	useReactTable,
+	type VisibilityState,
+} from "@tanstack/react-table";
 import {
 	CheckCircle2,
+	ChevronDown,
 	ExternalLink,
 	GlobeIcon,
 	InfoIcon,
+	LayoutGrid,
+	LayoutList,
 	Loader2,
 	PenBoxIcon,
 	RefreshCw,
@@ -23,6 +37,21 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import {
+	DropdownMenu,
+	DropdownMenuCheckboxItem,
+	DropdownMenuContent,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
 import {
 	Tooltip,
 	TooltipContent,
@@ -30,6 +59,7 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
+import { createColumns } from "./columns";
 import { DnsHelperModal } from "./dns-helper-modal";
 import { AddDomain } from "./handle-domain";
 
@@ -74,6 +104,19 @@ export const ShowDomains = ({ id, type }: Props) => {
 	const [validationStates, setValidationStates] = useState<ValidationStates>(
 		{},
 	);
+	const [viewMode, setViewMode] = useState<"grid" | "table">(() => {
+		if (typeof window !== "undefined") {
+			return (
+				(localStorage.getItem("domains-view-mode") as "grid" | "table") ??
+				"grid"
+			);
+		}
+		return "grid";
+	});
+	const [sorting, setSorting] = useState<SortingState>([]);
+	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+	const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+	const [rowSelection, setRowSelection] = useState({});
 	const { data: ip } = api.settings.getIp.useQuery();
 
 	const {
@@ -103,6 +146,16 @@ export const ShowDomains = ({ id, type }: Props) => {
 	const { mutateAsync: deleteDomain, isPending: isRemoving } =
 		api.domain.delete.useMutation();
 
+	const handleDeleteDomain = async (domainId: string) => {
+		try {
+			await deleteDomain({ domainId });
+			refetch();
+			toast.success("Domain deleted successfully");
+		} catch {
+			toast.error("Error deleting domain");
+		}
+	};
+
 	const handleValidateDomain = async (host: string) => {
 		setValidationStates((prev) => ({
 			...prev,
@@ -140,6 +193,37 @@ export const ShowDomains = ({ id, type }: Props) => {
 		}
 	};
 
+	const columns = createColumns({
+		id,
+		type,
+		validationStates,
+		handleValidateDomain,
+		handleDeleteDomain,
+		isDeleting: isRemoving,
+		serverIp: application?.server?.ipAddress?.toString() || ip?.toString(),
+		canCreateDomain,
+		canDeleteDomain,
+	});
+
+	const table = useReactTable({
+		data: data ?? [],
+		columns,
+		onSortingChange: setSorting,
+		onColumnFiltersChange: setColumnFilters,
+		getCoreRowModel: getCoreRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		getFilteredRowModel: getFilteredRowModel(),
+		onColumnVisibilityChange: setColumnVisibility,
+		onRowSelectionChange: setRowSelection,
+		state: {
+			sorting,
+			columnFilters,
+			columnVisibility,
+			rowSelection,
+		},
+	});
+
 	return (
 		<div className="flex w-full flex-col gap-5 ">
 			<Card className="bg-background">
@@ -151,13 +235,32 @@ export const ShowDomains = ({ id, type }: Props) => {
 						</CardDescription>
 					</div>
 
-					<div className="flex flex-row gap-4 flex-wrap">
+					<div className="flex flex-row gap-2 flex-wrap">
-						{canCreateDomain && data && data?.length > 0 && (
+						{data && data?.length > 0 && (
-							<AddDomain id={id} type={type}>
+							<>
-								<Button>
+								<Button
-									<GlobeIcon className="size-4" /> Add Domain
+									variant="outline"
+									size="icon"
+									onClick={() => {
+										const next = viewMode === "grid" ? "table" : "grid";
+										localStorage.setItem("domains-view-mode", next);
+										setViewMode(next);
+									}}
+								>
+									{viewMode === "grid" ? (
+										<LayoutList className="size-4" />
+									) : (
+										<LayoutGrid className="size-4" />
+									)}
 								</Button>
-							</AddDomain>
+								{canCreateDomain && (
+									<AddDomain id={id} type={type}>
+										<Button>
+											<GlobeIcon className="size-4" /> Add Domain
+										</Button>
+									</AddDomain>
+								)}
+							</>
 						)}
 					</div>
 				</CardHeader>
@@ -186,6 +289,122 @@ export const ShowDomains = ({ id, type }: Props) => {
 								</div>
 							)}
 						</div>
+					) : viewMode === "table" ? (
+						<div className="flex flex-col gap-4 w-full">
+							<div className="flex items-center gap-2 max-sm:flex-wrap">
+								<Input
+									placeholder="Filter by host..."
+									value={
+										(table.getColumn("host")?.getFilterValue() as string) ?? ""
+									}
+									onChange={(event) =>
+										table.getColumn("host")?.setFilterValue(event.target.value)
+									}
+									className="md:max-w-sm"
+								/>
+								<DropdownMenu>
+									<DropdownMenuTrigger asChild>
+										<Button
+											variant="outline"
+											className="sm:ml-auto max-sm:w-full"
+										>
+											Columns <ChevronDown className="ml-2 h-4 w-4" />
+										</Button>
+									</DropdownMenuTrigger>
+									<DropdownMenuContent align="end">
+										{table
+											.getAllColumns()
+											.filter((column) => column.getCanHide())
+											.map((column) => {
+												return (
+													<DropdownMenuCheckboxItem
+														key={column.id}
+														className="capitalize"
+														checked={column.getIsVisible()}
+														onCheckedChange={(value) =>
+															column.toggleVisibility(!!value)
+														}
+													>
+														{column.id}
+													</DropdownMenuCheckboxItem>
+												);
+											})}
+									</DropdownMenuContent>
+								</DropdownMenu>
+							</div>
+							<div className="rounded-md border">
+								<Table>
+									<TableHeader>
+										{table.getHeaderGroups().map((headerGroup) => (
+											<TableRow key={headerGroup.id}>
+												{headerGroup.headers.map((header) => {
+													return (
+														<TableHead key={header.id}>
+															{header.isPlaceholder
+																? null
+																: flexRender(
+																		header.column.columnDef.header,
+																		header.getContext(),
+																	)}
+														</TableHead>
+													);
+												})}
+											</TableRow>
+										))}
+									</TableHeader>
+									<TableBody>
+										{table?.getRowModel()?.rows?.length ? (
+											table.getRowModel().rows.map((row) => (
+												<TableRow
+													key={row.id}
+													data-state={row.getIsSelected() && "selected"}
+												>
+													{row.getVisibleCells().map((cell) => (
+														<TableCell key={cell.id}>
+															{flexRender(
+																cell.column.columnDef.cell,
+																cell.getContext(),
+															)}
+														</TableCell>
+													))}
+												</TableRow>
+											))
+										) : (
+											<TableRow>
+												<TableCell
+													colSpan={columns.length}
+													className="h-24 text-center"
+												>
+													No results.
+												</TableCell>
+											</TableRow>
+										)}
+									</TableBody>
+								</Table>
+							</div>
+							{data && data?.length > 0 && (
+								<div className="flex items-center justify-end space-x-2 py-4">
+									<div className="space-x-2 flex flex-wrap">
+										<Button
+											variant="outline"
+											size="sm"
+											onClick={() => table.previousPage()}
+											disabled={!table.getCanPreviousPage()}
+										>
+											Previous
+										</Button>
+										<Button
+											variant="outline"
+											size="sm"
+											onClick={() => table.nextPage()}
+											disabled={!table.getCanNextPage()}
+										>
+											Next
+										</Button>
+									</div>
+								</div>
+							)}
+						</div>
 					) : (
 						<div className="grid grid-cols-1 gap-4 xl:grid-cols-2 w-full min-h-[40vh] ">
 							{data?.map((item) => {
@@ -206,7 +425,7 @@ export const ShowDomains = ({ id, type }: Props) => {
 														</Badge>
 													)}
 													<div className="flex gap-2 flex-wrap">
-														{!item.host.includes("traefik.me") && (
+														{!item.host.includes("sslip.io") && (
 															<DnsHelperModal
 																domain={{
 																	host: item.host,
@@ -341,6 +560,22 @@ export const ShowDomains = ({ id, type }: Props) => {
 														</TooltipProvider>
 													)}
 
+													{item.middlewares?.map((middleware, index) => (
+														<TooltipProvider key={`${middleware}-${index}`}>
+															<Tooltip>
+																<TooltipTrigger asChild>
+																	<Badge variant="secondary">
+																		<InfoIcon className="size-3 mr-1" />
+																		Middleware: {middleware}
+																	</Badge>
+																</TooltipTrigger>
+																<TooltipContent>
+																	<p>Traefik middleware reference</p>
+																</TooltipContent>
+															</Tooltip>
+														</TooltipProvider>
+													))}
+
 													<TooltipProvider>
 														<Tooltip>
 															<TooltipTrigger asChild>

apps/dokploy/components/dashboard/application/environment/show-environment.tsx

@@ -56,17 +56,17 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 	const [isEnvVisible, setIsEnvVisible] = useState(true);
 
 	const mutationMap = {
-		compose: () => api.compose.update.useMutation(),
+		compose: () => api.compose.saveEnvironment.useMutation(),
-		libsql: () => api.libsql.update.useMutation(),
+		libsql: () => api.libsql.saveEnvironment.useMutation(),
-		mariadb: () => api.mariadb.update.useMutation(),
+		mariadb: () => api.mariadb.saveEnvironment.useMutation(),
-		mongo: () => api.mongo.update.useMutation(),
+		mongo: () => api.mongo.saveEnvironment.useMutation(),
-		mysql: () => api.mysql.update.useMutation(),
+		mysql: () => api.mysql.saveEnvironment.useMutation(),
-		postgres: () => api.postgres.update.useMutation(),
+		postgres: () => api.postgres.saveEnvironment.useMutation(),
-		redis: () => api.redis.update.useMutation(),
+		redis: () => api.redis.saveEnvironment.useMutation(),
 	};
 	const { mutateAsync, isPending } = mutationMap[type]
 		? mutationMap[type]()
-		: api.mongo.update.useMutation();
+		: api.mongo.saveEnvironment.useMutation();
 
 	const form = useForm<EnvironmentSchema>({
 		defaultValues: {
@@ -116,7 +116,7 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 	// Add keyboard shortcut for Ctrl+S/Cmd+S
 	useEffect(() => {
 		const handleKeyDown = (e: KeyboardEvent) => {
-			if ((e.ctrlKey || e.metaKey) && e.key === "s" && !isPending) {
+			if ((e.ctrlKey || e.metaKey) && e.code === "KeyS" && !isPending) {
 				e.preventDefault();
 				form.handleSubmit(onSubmit)();
 			}

apps/dokploy/components/dashboard/application/environment/show.tsx

@@ -106,7 +106,7 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 	// Add keyboard shortcut for Ctrl+S/Cmd+S
 	useEffect(() => {
 		const handleKeyDown = (e: KeyboardEvent) => {
-			if ((e.ctrlKey || e.metaKey) && e.key === "s" && !isPending) {
+			if ((e.ctrlKey || e.metaKey) && e.code === "KeyS" && !isPending) {
 				e.preventDefault();
 				form.handleSubmit(onSubmit)();
 			}

apps/dokploy/components/dashboard/application/general/generic/save-bitbucket-provider.tsx

@@ -5,6 +5,7 @@ import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { VALID_BRANCH_REGEX } from "@dokploy/server/utils/git-branch-validation";
 import { BitbucketIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Badge } from "@/components/ui/badge";
@@ -57,7 +58,10 @@ const BitbucketProviderSchema = z.object({
 			slug: z.string().optional(),
 		})
 		.required(),
-	branch: z.string().min(1, "Branch is required"),
+	branch: z
+		.string()
+		.min(1, "Branch is required")
+		.regex(VALID_BRANCH_REGEX, "Invalid branch name"),
 	bitbucketId: z.string().min(1, "Bitbucket Provider is required"),
 	watchPaths: z.array(z.string()).optional(),
 	enableSubmodules: z.boolean().optional(),

apps/dokploy/components/dashboard/application/general/generic/save-git-provider.tsx

@@ -6,6 +6,7 @@ import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { VALID_BRANCH_REGEX } from "@dokploy/server/utils/git-branch-validation";
 import { GitIcon } from "@/components/icons/data-tools-icons";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -41,7 +42,10 @@ const GitProviderSchema = z.object({
 	repositoryURL: z.string().min(1, {
 		message: "Repository URL is required",
 	}),
-	branch: z.string().min(1, "Branch required"),
+	branch: z
+		.string()
+		.min(1, "Branch required")
+		.regex(VALID_BRANCH_REGEX, "Invalid branch name"),
 	sshKey: z.string().optional(),
 	watchPaths: z.array(z.string()).optional(),
 	enableSubmodules: z.boolean().default(false),
@@ -55,7 +59,7 @@ interface Props {
 
 export const SaveGitProvider = ({ applicationId }: Props) => {
 	const { data, refetch } = api.application.one.useQuery({ applicationId });
-	const { data: sshKeys } = api.sshKey.all.useQuery();
+	const { data: sshKeys } = api.sshKey.allForApps.useQuery();
 	const router = useRouter();
 
 	const { mutateAsync, isPending } =
@@ -107,110 +111,103 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 
 	return (
 		<Form {...form}>
-			<form
+			<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-				onSubmit={form.handleSubmit(onSubmit)}
+				<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 items-start">
-				className="flex flex-col gap-4"
+					<FormField
-			>
+						control={form.control}
-				<div className="grid md:grid-cols-2 gap-4">
+						name="repositoryURL"
-					<div className="flex items-end col-span-2 gap-4">
+						render={({ field }) => (
-						<div className="grow">
+							<FormItem className="col-span-2 lg:col-span-3">
-							<FormField
+								<div className="flex items-center justify-between h-5">
-								control={form.control}
+									<FormLabel>Repository URL</FormLabel>
-								name="repositoryURL"
+									{field.value?.startsWith("https://") && (
-								render={({ field }) => (
+										<Link
-									<FormItem>
+											href={field.value}
-										<div className="flex items-center justify-between">
+											target="_blank"
-											<FormLabel>Repository URL</FormLabel>
+											rel="noopener noreferrer"
-											{field.value?.startsWith("https://") && (
+											className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"
-												<Link
+										>
-													href={field.value}
+											<GitIcon className="h-4 w-4" />
-													target="_blank"
+											<span>View Repository</span>
-													rel="noopener noreferrer"
+										</Link>
-													className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"
+									)}
-												>
+								</div>
-													<GitIcon className="h-4 w-4" />
+								<FormControl>
-													<span>View Repository</span>
+									<Input placeholder="Repository URL" {...field} />
-												</Link>
+								</FormControl>
-											)}
+								<FormMessage />
-										</div>
+							</FormItem>
-										<FormControl>
-											<Input placeholder="Repository URL" {...field} />
-										</FormControl>
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
-						</div>
-						{sshKeys && sshKeys.length > 0 ? (
-							<FormField
-								control={form.control}
-								name="sshKey"
-								render={({ field }) => (
-									<FormItem className="basis-40">
-										<FormLabel className="w-full inline-flex justify-between">
-											SSH Key
-											<LockIcon className="size-4 text-muted-foreground" />
-										</FormLabel>
-										<FormControl>
-											<Select
-												key={field.value}
-												onValueChange={field.onChange}
-												defaultValue={field.value}
-												value={field.value}
-											>
-												<SelectTrigger>
-													<SelectValue placeholder="Select a key" />
-												</SelectTrigger>
-												<SelectContent>
-													<SelectGroup>
-														{sshKeys?.map((sshKey) => (
-															<SelectItem
-																key={sshKey.sshKeyId}
-																value={sshKey.sshKeyId}
-															>
-																{sshKey.name}
-															</SelectItem>
-														))}
-														<SelectItem value="none">None</SelectItem>
-														<SelectLabel>Keys ({sshKeys?.length})</SelectLabel>
-													</SelectGroup>
-												</SelectContent>
-											</Select>
-										</FormControl>
-									</FormItem>
-								)}
-							/>
-						) : (
-							<Button
-								variant="secondary"
-								onClick={() => router.push("/dashboard/settings/ssh-keys")}
-								type="button"
-							>
-								<KeyRoundIcon className="size-4" /> Add SSH Key
-							</Button>
 						)}
-					</div>
+					/>
-					<div className="space-y-4">
+					{sshKeys && sshKeys.length > 0 ? (
 						<FormField
 							control={form.control}
-							name="branch"
+							name="sshKey"
 							render={({ field }) => (
-								<FormItem>
+								<FormItem className="col-span-2 lg:col-span-1">
-									<FormLabel>Branch</FormLabel>
+									<FormLabel className="w-full inline-flex justify-between">
+										SSH Key
+										<LockIcon className="size-4 text-muted-foreground" />
+									</FormLabel>
 									<FormControl>
-										<Input placeholder="Branch" {...field} />
+										<Select
+											key={field.value}
+											onValueChange={field.onChange}
+											defaultValue={field.value}
+											value={field.value}
+										>
+											<SelectTrigger>
+												<SelectValue placeholder="Select a key" />
+											</SelectTrigger>
+											<SelectContent>
+												<SelectGroup>
+													{sshKeys?.map((sshKey) => (
+														<SelectItem
+															key={sshKey.sshKeyId}
+															value={sshKey.sshKeyId}
+														>
+															{sshKey.name}
+														</SelectItem>
+													))}
+													<SelectItem value="none">None</SelectItem>
+													<SelectLabel>Keys ({sshKeys?.length})</SelectLabel>
+												</SelectGroup>
+											</SelectContent>
+										</Select>
 									</FormControl>
-									<FormMessage />
 								</FormItem>
 							)}
 						/>
-					</div>
+					) : (
+						<Button
+							variant="secondary"
+							onClick={() => router.push("/dashboard/settings/ssh-keys")}
+							type="button"
+							className="col-span-2 lg:col-span-1 lg:mt-7"
+						>
+							<KeyRoundIcon className="size-4" /> Add SSH Key
+						</Button>
+					)}
+
+					<FormField
+						control={form.control}
+						name="branch"
+						render={({ field }) => (
+							<FormItem className="col-span-2">
+								<FormLabel>Branch</FormLabel>
+								<FormControl>
+									<Input placeholder="Branch" {...field} />
+								</FormControl>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
 
 					<FormField
 						control={form.control}
 						name="buildPath"
 						render={({ field }) => (
-							<FormItem>
+							<FormItem className="col-span-2">
 								<FormLabel>Build Path</FormLabel>
 								<FormControl>
 									<Input placeholder="/" {...field} />
@@ -223,7 +220,7 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 						control={form.control}
 						name="watchPaths"
 						render={({ field }) => (
-							<FormItem className="md:col-span-2">
+							<FormItem className="col-span-2 lg:col-span-4">
 								<div className="flex items-center gap-2">
 									<FormLabel>Watch Paths</FormLabel>
 									<TooltipProvider>

apps/dokploy/components/dashboard/application/general/generic/save-gitea-provider.tsx

@@ -5,6 +5,7 @@ import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { VALID_BRANCH_REGEX } from "@dokploy/server/utils/git-branch-validation";
 import { GiteaIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Badge } from "@/components/ui/badge";
@@ -72,7 +73,10 @@ const GiteaProviderSchema = z.object({
 			owner: z.string().min(1, "Owner is required"),
 		})
 		.required(),
-	branch: z.string().min(1, "Branch is required"),
+	branch: z
+		.string()
+		.min(1, "Branch is required")
+		.regex(VALID_BRANCH_REGEX, "Invalid branch name"),
 	giteaId: z.string().min(1, "Gitea Provider is required"),
 	watchPaths: z.array(z.string()).default([]),
 	enableSubmodules: z.boolean().optional(),

apps/dokploy/components/dashboard/application/general/generic/save-github-provider.tsx

@@ -5,6 +5,7 @@ import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { VALID_BRANCH_REGEX } from "@dokploy/server/utils/git-branch-validation";
 import { GithubIcon } from "@/components/icons/data-tools-icons";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -55,7 +56,10 @@ const GithubProviderSchema = z.object({
 			owner: z.string().min(1, "Owner is required"),
 		})
 		.required(),
-	branch: z.string().min(1, "Branch is required"),
+	branch: z
+		.string()
+		.min(1, "Branch is required")
+		.regex(VALID_BRANCH_REGEX, "Invalid branch name"),
 	githubId: z.string().min(1, "Github Provider is required"),
 	watchPaths: z.array(z.string()).optional(),
 	triggerType: z.enum(["push", "tag"]).default("push"),

apps/dokploy/components/dashboard/application/general/generic/save-gitlab-provider.tsx

@@ -5,6 +5,7 @@ import { useEffect, useMemo } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { VALID_BRANCH_REGEX } from "@dokploy/server/utils/git-branch-validation";
 import { GitlabIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Badge } from "@/components/ui/badge";
@@ -58,7 +59,10 @@ const GitlabProviderSchema = z.object({
 			id: z.number().nullable(),
 		})
 		.required(),
-	branch: z.string().min(1, "Branch is required"),
+	branch: z
+		.string()
+		.min(1, "Branch is required")
+		.regex(VALID_BRANCH_REGEX, "Invalid branch name"),
 	gitlabId: z.string().min(1, "Gitlab Provider is required"),
 	watchPaths: z.array(z.string()).optional(),
 	enableSubmodules: z.boolean().default(false),

apps/dokploy/components/dashboard/application/general/show.tsx

@@ -58,7 +58,7 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 				<CardHeader>
 					<CardTitle className="text-xl">Deploy Settings</CardTitle>
 				</CardHeader>
-				<CardContent className="flex flex-row gap-4 flex-wrap">
+				<CardContent className="grid grid-cols-2 lg:flex lg:flex-row lg:flex-wrap gap-4">
 					<TooltipProvider delayDuration={0} disableHoverableContent={false}>
 						{canDeploy && (
 							<DialogAction
@@ -274,14 +274,14 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 					>
 						<Button
 							variant="outline"
-							className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+							className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2 col-span-2"
 						>
 							<Terminal className="size-4 mr-1" />
 							Open Terminal
 						</Button>
 					</DockerTerminalModal>
 					{canUpdateService && (
-						<div className="flex flex-row items-center gap-2 rounded-md px-4 py-2 border">
+						<div className="flex flex-row items-center gap-2 justify-between rounded-md px-4 py-2 border col-span-2 md:col-span-1">
 							<span className="text-sm font-medium">Autodeploy</span>
 							<Switch
 								aria-label="Toggle autodeploy"
@@ -305,7 +305,7 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 					)}
 
 					{canUpdateService && (
-						<div className="flex flex-row items-center gap-2 rounded-md px-4 py-2 border">
+						<div className="flex flex-row items-center gap-2 justify-between rounded-md px-4 py-2 border col-span-2 md:col-span-1">
 							<span className="text-sm font-medium">Clean Cache</span>
 							<Switch
 								aria-label="Toggle clean cache"

apps/dokploy/components/dashboard/application/icon/show-icon-settings.tsx

@@ -0,0 +1,277 @@
+import DOMPurify from "dompurify";
+import { GlobeIcon, Pencil, Search, X } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { Dropzone } from "@/components/ui/dropzone";
+import { Input } from "@/components/ui/input";
+import { type BundledIcon, bundledIcons } from "@/lib/bundled-icons";
+import { api } from "@/utils/api";
+
+interface ShowIconSettingsProps {
+	applicationId: string;
+	icon?: string | null;
+}
+
+const svgToDataUrl = (icon: BundledIcon): string => {
+	const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#${icon.hex}"><path d="${icon.path}"/></svg>`;
+	return `data:image/svg+xml;base64,${btoa(svg)}`;
+};
+
+export const ShowIconSettings = ({
+	applicationId,
+	icon,
+}: ShowIconSettingsProps) => {
+	const [open, setOpen] = useState(false);
+	const [iconSearchQuery, setIconSearchQuery] = useState("");
+	const [iconsToShow, setIconsToShow] = useState(24);
+
+	const filteredIcons = useMemo(() => {
+		if (!iconSearchQuery) return bundledIcons;
+		const q = iconSearchQuery.toLowerCase();
+		return bundledIcons.filter(
+			(i) =>
+				i.title.toLowerCase().includes(q) || i.slug.toLowerCase().includes(q),
+		);
+	}, [iconSearchQuery]);
+
+	const displayedIcons = filteredIcons.slice(0, iconsToShow);
+	const hasMoreIcons = filteredIcons.length > iconsToShow;
+
+	const utils = api.useUtils();
+	const { mutateAsync: updateApplication } =
+		api.application.update.useMutation();
+
+	useEffect(() => {
+		if (open) {
+			setIconSearchQuery("");
+			setIconsToShow(24);
+		}
+	}, [open]);
+
+	const handleIconSelect = async (selectedIcon: BundledIcon) => {
+		try {
+			const dataUrl = svgToDataUrl(selectedIcon);
+			await updateApplication({
+				applicationId,
+				icon: dataUrl,
+			});
+			toast.success("Icon saved successfully");
+			await utils.application.one.invalidate({ applicationId });
+			setOpen(false);
+		} catch (_error) {
+			toast.error("Error saving icon");
+		}
+	};
+
+	const handleRemoveIcon = async () => {
+		try {
+			await updateApplication({
+				applicationId,
+				icon: null,
+			});
+			toast.success("Icon removed");
+			await utils.application.one.invalidate({ applicationId });
+		} catch (_error) {
+			toast.error("Error removing icon");
+		}
+	};
+
+	const sanitizeSvg = (svgContent: string): string | null => {
+		const clean = DOMPurify.sanitize(svgContent, {
+			USE_PROFILES: { svg: true, svgFilters: true },
+			ADD_TAGS: ["use"],
+		});
+		if (!clean) return null;
+		return `data:image/svg+xml;base64,${btoa(clean)}`;
+	};
+
+	const handleFileUpload = async (files: FileList | null) => {
+		if (!files || files.length === 0) return;
+		const file = files[0];
+		if (!file) return;
+
+		const allowedTypes = [
+			"image/jpeg",
+			"image/jpg",
+			"image/png",
+			"image/svg+xml",
+		];
+		const fileExtension = file.name.split(".").pop()?.toLowerCase();
+		const allowedExtensions = ["jpg", "jpeg", "png", "svg"];
+
+		if (
+			!allowedTypes.includes(file.type) &&
+			!allowedExtensions.includes(fileExtension || "")
+		) {
+			toast.error("Only JPG, JPEG, PNG, and SVG files are allowed");
+			return;
+		}
+
+		if (file.size > 2 * 1024 * 1024) {
+			toast.error("Image size must be less than 2MB");
+			return;
+		}
+
+		const isSvg = file.type === "image/svg+xml" || fileExtension === "svg";
+
+		if (isSvg) {
+			const text = await file.text();
+			const sanitizedDataUrl = sanitizeSvg(text);
+			if (!sanitizedDataUrl) {
+				toast.error("Invalid SVG file");
+				return;
+			}
+			try {
+				await updateApplication({
+					applicationId,
+					icon: sanitizedDataUrl,
+				});
+				toast.success("Icon saved!");
+				await utils.application.one.invalidate({ applicationId });
+				setOpen(false);
+			} catch (_error) {
+				toast.error("Error saving icon");
+			}
+			return;
+		}
+
+		const reader = new FileReader();
+		reader.onload = async (event) => {
+			const result = event.target?.result as string;
+			try {
+				await updateApplication({
+					applicationId,
+					icon: result,
+				});
+				toast.success("Icon saved!");
+				await utils.application.one.invalidate({ applicationId });
+				setOpen(false);
+			} catch (_error) {
+				toast.error("Error saving icon");
+			}
+		};
+		reader.readAsDataURL(file);
+	};
+
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>
+				<button
+					type="button"
+					className="relative group flex items-center justify-center"
+				>
+					{icon ? (
+						// biome-ignore lint/performance/noImgElement: icon is data URL or base64
+						<img
+							src={icon}
+							alt="Application icon"
+							className="h-8 w-8 object-contain"
+						/>
+					) : (
+						<GlobeIcon className="h-6 w-6 text-muted-foreground" />
+					)}
+					<div className="absolute inset-0 flex items-center justify-center bg-black/50 rounded opacity-0 group-hover:opacity-100 transition-opacity">
+						<Pencil className="h-3 w-3 text-white" />
+					</div>
+				</button>
+			</DialogTrigger>
+			<DialogContent className="max-w-2xl">
+				<DialogHeader>
+					<DialogTitle className="flex items-center justify-between">
+						Change Icon
+						{icon && (
+							<Button
+								variant="ghost"
+								size="sm"
+								onClick={handleRemoveIcon}
+								className="text-muted-foreground"
+							>
+								<X className="size-4 mr-1" />
+								Remove icon
+							</Button>
+						)}
+					</DialogTitle>
+				</DialogHeader>
+
+				<div className="space-y-4">
+					<div className="relative">
+						<Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+						<Input
+							placeholder="Search icons (e.g. react, vue, docker)..."
+							value={iconSearchQuery}
+							onChange={(e) => setIconSearchQuery(e.target.value)}
+							className="pl-9"
+						/>
+					</div>
+
+					<div className="max-h-[300px] overflow-y-auto border rounded-lg p-4">
+						{displayedIcons.length === 0 ? (
+							<div className="text-center py-8 text-sm text-muted-foreground">
+								No icons found
+							</div>
+						) : (
+							<>
+								<div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-2">
+									{displayedIcons.map((i) => (
+										<button
+											type="button"
+											key={i.slug}
+											onClick={() => handleIconSelect(i)}
+											className="flex flex-col items-center gap-1.5 p-2 rounded-lg border hover:border-primary hover:bg-muted transition-colors group"
+										>
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												viewBox="0 0 24 24"
+												className="size-7 group-hover:scale-110 transition-transform"
+												fill={`#${i.hex}`}
+											>
+												<path d={i.path} />
+											</svg>
+											<span className="text-[10px] text-muted-foreground capitalize truncate w-full text-center">
+												{i.title}
+											</span>
+										</button>
+									))}
+								</div>
+								{hasMoreIcons && (
+									<div className="flex justify-center mt-3">
+										<Button
+											variant="outline"
+											size="sm"
+											onClick={() => setIconsToShow((prev) => prev + 24)}
+										>
+											Load More ({filteredIcons.length - iconsToShow} remaining)
+										</Button>
+									</div>
+								)}
+							</>
+						)}
+					</div>
+
+					<div className="relative pt-3 border-t">
+						<p className="text-sm text-muted-foreground text-center mb-3">
+							or upload a custom icon
+						</p>
+						<Dropzone
+							dropMessage="Drag & drop an icon or click to upload"
+							accept=".jpg,.jpeg,.png,.svg,image/jpeg,image/png,image/svg+xml"
+							onChange={handleFileUpload}
+							classNameWrapper="border-2 border-dashed border-border hover:border-primary bg-muted/30 hover:bg-muted/50 transition-all rounded-lg"
+						/>
+						<div className="mt-2 text-center text-xs text-muted-foreground">
+							Supported formats: JPG, JPEG, PNG, SVG (max 2MB)
+						</div>
+					</div>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/components/dashboard/application/preview-deployments/add-preview-domain.tsx

@@ -87,7 +87,7 @@ export const AddPreviewDomain = ({
 	});
 
 	const host = form.watch("host");
-	const isTraefikMeDomain = host?.includes("traefik.me") || false;
+	const isTraefikMeDomain = host?.includes("sslip.io") || false;
 
 	useEffect(() => {
 		if (data) {
@@ -162,7 +162,7 @@ export const AddPreviewDomain = ({
 										<FormItem>
 											{isTraefikMeDomain && (
 												<AlertBlock type="info">
-													<strong>Note:</strong> traefik.me is a public HTTP
+													<strong>Note:</strong> sslip.io is a public HTTP
 													service and does not support SSL/HTTPS. HTTPS and
 													certificate options will not have any effect.
 												</AlertBlock>
@@ -202,7 +202,7 @@ export const AddPreviewDomain = ({
 															sideOffset={5}
 															className="max-w-[10rem]"
 														>
-															<p>Generate traefik.me domain</p>
+															<p>Generate sslip.io domain</p>
 														</TooltipContent>
 													</Tooltip>
 												</TooltipProvider>

apps/dokploy/components/dashboard/application/preview-deployments/show-preview-settings.tsx

@@ -88,7 +88,7 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 	const form = useForm<Schema>({
 		defaultValues: {
 			env: "",
-			wildcardDomain: "*.traefik.me",
+			wildcardDomain: "*.sslip.io",
 			port: 3000,
 			previewLimit: 3,
 			previewLabels: [],
@@ -102,7 +102,7 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 
 	const previewHttps = form.watch("previewHttps");
 	const wildcardDomain = form.watch("wildcardDomain");
-	const isTraefikMeDomain = wildcardDomain?.includes("traefik.me") || false;
+	const isTraefikMeDomain = wildcardDomain?.includes("sslip.io") || false;
 
 	useEffect(() => {
 		setIsEnabled(data?.isPreviewDeploymentsActive || false);
@@ -114,7 +114,7 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 				env: data.previewEnv || "",
 				buildArgs: data.previewBuildArgs || "",
 				buildSecrets: data.previewBuildSecrets || "",
-				wildcardDomain: data.previewWildcard || "*.traefik.me",
+				wildcardDomain: data.previewWildcard || "*.sslip.io",
 				port: data.previewPort || 3000,
 				previewLabels: data.previewLabels || [],
 				previewLimit: data.previewLimit || 3,
@@ -173,7 +173,7 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 					<div className="grid gap-4">
 						{isTraefikMeDomain && (
 							<AlertBlock type="info">
-								<strong>Note:</strong> traefik.me is a public HTTP service and
+								<strong>Note:</strong> sslip.io is a public HTTP service and
 								does not support SSL/HTTPS. HTTPS and certificate options will
 								not have any effect.
 							</AlertBlock>
@@ -192,7 +192,7 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 											<FormItem>
 												<FormLabel>Wildcard Domain</FormLabel>
 												<FormControl>
-													<Input placeholder="*.traefik.me" {...field} />
+													<Input placeholder="*.sslip.io" {...field} />
 												</FormControl>
 												<FormMessage />
 											</FormItem>

apps/dokploy/components/dashboard/application/schedules/handle-schedules.tsx

@@ -80,6 +80,7 @@ export const commonCronExpressions = [
 const formSchema = z
 	.object({
 		name: z.string().min(1, "Name is required"),
+		description: z.string().optional(),
 		cronExpression: z.string().min(1, "Cron expression is required"),
 		shellType: z.enum(["bash", "sh"]).default("bash"),
 		command: z.string(),
@@ -224,6 +225,7 @@ export const HandleSchedules = ({ id, scheduleId, scheduleType }: Props) => {
 		resolver: standardSchemaResolver(formSchema),
 		defaultValues: {
 			name: "",
+			description: "",
 			cronExpression: "",
 			shellType: "bash",
 			command: "",
@@ -263,6 +265,7 @@ export const HandleSchedules = ({ id, scheduleId, scheduleType }: Props) => {
 		if (scheduleId && schedule) {
 			form.reset({
 				name: schedule.name,
+				description: schedule.description || "",
 				cronExpression: schedule.cronExpression,
 				shellType: schedule.shellType,
 				command: schedule.command,
@@ -479,6 +482,26 @@ export const HandleSchedules = ({ id, scheduleId, scheduleType }: Props) => {
 							)}
 						/>
 
+						<FormField
+							control={form.control}
+							name="description"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Description</FormLabel>
+									<FormControl>
+										<Input
+											placeholder="Backs up the database every day at midnight"
+											{...field}
+										/>
+									</FormControl>
+									<FormDescription>
+										Optional description of what this schedule does
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
 						<ScheduleFormField
 							name="cronExpression"
 							formControl={form.control}

apps/dokploy/components/dashboard/application/schedules/show-schedules.tsx

@@ -125,6 +125,11 @@ export const ShowSchedules = ({ id, scheduleType = "application" }: Props) => {
 													{schedule.enabled ? "Enabled" : "Disabled"}
 												</Badge>
 											</div>
+											{schedule.description && (
+												<p className="text-xs text-muted-foreground/70 [overflow-wrap:anywhere] line-clamp-2">
+													{schedule.description}
+												</p>
+											)}
 											<div className="flex items-center gap-2 text-sm text-muted-foreground flex-wrap">
 												<Badge
 													variant="outline"

apps/dokploy/components/dashboard/compose/containers/show-compose-containers.tsx

@@ -0,0 +1,290 @@
+import { Loader2, MoreHorizontal, RefreshCw } from "lucide-react";
+import dynamic from "next/dynamic";
+import { useState } from "react";
+import { toast } from "sonner";
+import { ShowContainerConfig } from "@/components/dashboard/docker/config/show-container-config";
+import { ShowContainerMounts } from "@/components/dashboard/docker/mounts/show-container-mounts";
+import { ShowContainerNetworks } from "@/components/dashboard/docker/networks/show-container-networks";
+import { DockerTerminalModal } from "@/components/dashboard/docker/terminal/docker-terminal-modal";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import { api } from "@/utils/api";
+
+const DockerLogsId = dynamic(
+	() =>
+		import("@/components/dashboard/docker/logs/docker-logs-id").then(
+			(e) => e.DockerLogsId,
+		),
+	{
+		ssr: false,
+	},
+);
+
+interface Props {
+	appName: string;
+	serverId?: string;
+	appType: "stack" | "docker-compose";
+}
+
+export const ShowComposeContainers = ({
+	appName,
+	appType,
+	serverId,
+}: Props) => {
+	const { data, isPending, refetch } =
+		api.docker.getContainersByAppNameMatch.useQuery(
+			{
+				appName,
+				appType,
+				serverId,
+			},
+			{
+				enabled: !!appName,
+			},
+		);
+
+	return (
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row items-center justify-between">
+				<div>
+					<CardTitle className="text-xl">Containers</CardTitle>
+					<CardDescription>
+						Inspect each container in this compose and run basic lifecycle
+						actions.
+					</CardDescription>
+				</div>
+				<Button
+					variant="outline"
+					size="icon"
+					onClick={() => refetch()}
+					disabled={isPending}
+				>
+					<RefreshCw className={`h-4 w-4 ${isPending ? "animate-spin" : ""}`} />
+				</Button>
+			</CardHeader>
+			<CardContent>
+				{isPending ? (
+					<div className="flex items-center justify-center h-[20vh]">
+						<Loader2 className="animate-spin h-6 w-6 text-muted-foreground" />
+					</div>
+				) : !data || data.length === 0 ? (
+					<div className="flex items-center justify-center h-[20vh]">
+						<span className="text-muted-foreground">
+							No containers found. Deploy the compose to see containers here.
+						</span>
+					</div>
+				) : (
+					<div className="rounded-md border">
+						<Table>
+							<TableHeader>
+								<TableRow>
+									<TableHead>Name</TableHead>
+									<TableHead>State</TableHead>
+									<TableHead>Status</TableHead>
+									<TableHead>Container ID</TableHead>
+									<TableHead className="text-right" />
+								</TableRow>
+							</TableHeader>
+							<TableBody>
+								{data.map((container) => (
+									<ContainerRow
+										key={container.containerId}
+										container={container}
+										serverId={serverId}
+										onActionComplete={() => refetch()}
+									/>
+								))}
+							</TableBody>
+						</Table>
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
+};
+
+interface ContainerRowProps {
+	container: {
+		containerId: string;
+		name: string;
+		state: string;
+		status: string;
+	};
+	serverId?: string;
+	onActionComplete: () => void;
+}
+
+const ContainerRow = ({
+	container,
+	serverId,
+	onActionComplete,
+}: ContainerRowProps) => {
+	const [logsOpen, setLogsOpen] = useState(false);
+	const [actionLoading, setActionLoading] = useState<string | null>(null);
+
+	const restartMutation = api.docker.restartContainer.useMutation();
+	const startMutation = api.docker.startContainer.useMutation();
+	const stopMutation = api.docker.stopContainer.useMutation();
+	const killMutation = api.docker.killContainer.useMutation();
+
+	const handleAction = async (
+		action: string,
+		mutationFn: typeof restartMutation,
+	) => {
+		setActionLoading(action);
+		try {
+			await mutationFn.mutateAsync({
+				containerId: container.containerId,
+				serverId,
+			});
+			toast.success(`Container ${action} successfully`);
+			onActionComplete();
+		} catch (error) {
+			toast.error(
+				`Failed to ${action} container: ${error instanceof Error ? error.message : "Unknown error"}`,
+			);
+		} finally {
+			setActionLoading(null);
+		}
+	};
+
+	return (
+		<TableRow>
+			<TableCell className="font-medium">{container.name}</TableCell>
+			<TableCell>
+				<Badge
+					variant={
+						container.state === "running"
+							? "default"
+							: container.state === "exited"
+								? "secondary"
+								: "destructive"
+					}
+				>
+					{container.state}
+				</Badge>
+			</TableCell>
+			<TableCell>{container.status}</TableCell>
+			<TableCell className="font-mono text-sm text-muted-foreground">
+				{container.containerId}
+			</TableCell>
+			<TableCell className="text-right">
+				<Dialog open={logsOpen} onOpenChange={setLogsOpen}>
+					<DropdownMenu>
+						<DropdownMenuTrigger asChild>
+							<Button variant="ghost" className="h-8 w-8 p-0">
+								{actionLoading ? (
+									<Loader2 className="h-4 w-4 animate-spin" />
+								) : (
+									<MoreHorizontal className="h-4 w-4" />
+								)}
+							</Button>
+						</DropdownMenuTrigger>
+						<DropdownMenuContent align="end">
+							<DropdownMenuLabel>Actions</DropdownMenuLabel>
+							<DialogTrigger asChild>
+								<DropdownMenuItem
+									className="cursor-pointer"
+									onSelect={(e) => e.preventDefault()}
+								>
+									View Logs
+								</DropdownMenuItem>
+							</DialogTrigger>
+							<ShowContainerConfig
+								containerId={container.containerId}
+								serverId={serverId || ""}
+							/>
+							<ShowContainerMounts
+								containerId={container.containerId}
+								serverId={serverId || ""}
+							/>
+							<ShowContainerNetworks
+								containerId={container.containerId}
+								serverId={serverId || ""}
+							/>
+							<DockerTerminalModal
+								containerId={container.containerId}
+								serverId={serverId || ""}
+							>
+								Terminal
+							</DockerTerminalModal>
+							<DropdownMenuSeparator />
+							<DropdownMenuItem
+								className="cursor-pointer"
+								disabled={actionLoading !== null}
+								onClick={() => handleAction("restart", restartMutation)}
+							>
+								Restart
+							</DropdownMenuItem>
+							<DropdownMenuItem
+								className="cursor-pointer"
+								disabled={actionLoading !== null}
+								onClick={() => handleAction("start", startMutation)}
+							>
+								Start
+							</DropdownMenuItem>
+							<DropdownMenuItem
+								className="cursor-pointer"
+								disabled={actionLoading !== null}
+								onClick={() => handleAction("stop", stopMutation)}
+							>
+								Stop
+							</DropdownMenuItem>
+							<DropdownMenuItem
+								className="cursor-pointer text-red-500 focus:text-red-600"
+								disabled={actionLoading !== null}
+								onClick={() => handleAction("kill", killMutation)}
+							>
+								Kill
+							</DropdownMenuItem>
+						</DropdownMenuContent>
+					</DropdownMenu>
+					<DialogContent className="sm:max-w-7xl">
+						<DialogHeader>
+							<DialogTitle>View Logs</DialogTitle>
+							<DialogDescription>Logs for {container.name}</DialogDescription>
+						</DialogHeader>
+						<div className="flex flex-col gap-4 pt-2.5">
+							<DockerLogsId
+								containerId={container.containerId}
+								serverId={serverId}
+								runType="native"
+							/>
+						</div>
+					</DialogContent>
+				</Dialog>
+			</TableCell>
+		</TableRow>
+	);
+};

apps/dokploy/components/dashboard/compose/general/compose-file-editor.tsx

@@ -49,12 +49,12 @@ export const ComposeFileEditor = ({ composeId }: Props) => {
 	const composeFile = form.watch("composeFile");
 
 	useEffect(() => {
-		if (data && !composeFile) {
+		if (data) {
 			form.reset({
 				composeFile: data.composeFile || "",
 			});
 		}
-	}, [form, form.reset, data]);
+	}, [form, data]);
 
 	useEffect(() => {
 		if (data?.composeFile !== undefined) {
@@ -95,7 +95,7 @@ export const ComposeFileEditor = ({ composeId }: Props) => {
 	// Add keyboard shortcut for Ctrl+S/Cmd+S
 	useEffect(() => {
 		const handleKeyDown = (e: KeyboardEvent) => {
-			if ((e.ctrlKey || e.metaKey) && e.key === "s" && !isPending) {
+			if ((e.ctrlKey || e.metaKey) && e.code === "KeyS" && !isPending) {
 				e.preventDefault();
 				form.handleSubmit(onSubmit)();
 			}

apps/dokploy/components/dashboard/compose/general/generic/save-bitbucket-provider-compose.tsx

@@ -5,6 +5,7 @@ import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { VALID_BRANCH_REGEX } from "@dokploy/server/utils/git-branch-validation";
 import { BitbucketIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Badge } from "@/components/ui/badge";
@@ -57,7 +58,10 @@ const BitbucketProviderSchema = z.object({
 			slug: z.string().optional(),
 		})
 		.required(),
-	branch: z.string().min(1, "Branch is required"),
+	branch: z
+		.string()
+		.min(1, "Branch is required")
+		.regex(VALID_BRANCH_REGEX, "Invalid branch name"),
 	bitbucketId: z.string().min(1, "Bitbucket Provider is required"),
 	watchPaths: z.array(z.string()).optional(),
 	enableSubmodules: z.boolean().default(false),

apps/dokploy/components/dashboard/compose/general/generic/save-git-provider-compose.tsx

@@ -6,6 +6,7 @@ import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { VALID_BRANCH_REGEX } from "@dokploy/server/utils/git-branch-validation";
 import { GitIcon } from "@/components/icons/data-tools-icons";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -41,7 +42,10 @@ const GitProviderSchema = z.object({
 	repositoryURL: z.string().min(1, {
 		message: "Repository URL is required",
 	}),
-	branch: z.string().min(1, "Branch required"),
+	branch: z
+		.string()
+		.min(1, "Branch required")
+		.regex(VALID_BRANCH_REGEX, "Invalid branch name"),
 	sshKey: z.string().optional(),
 	watchPaths: z.array(z.string()).optional(),
 	enableSubmodules: z.boolean().default(false),
@@ -55,7 +59,7 @@ interface Props {
 
 export const SaveGitProviderCompose = ({ composeId }: Props) => {
 	const { data, refetch } = api.compose.one.useQuery({ composeId });
-	const { data: sshKeys } = api.sshKey.all.useQuery();
+	const { data: sshKeys } = api.sshKey.allForApps.useQuery();
 	const router = useRouter();
 
 	const { mutateAsync, isPending } = api.compose.update.useMutation();

apps/dokploy/components/dashboard/compose/general/generic/save-gitea-provider-compose.tsx

@@ -1,10 +1,11 @@
 import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
-import { CheckIcon, ChevronsUpDown, Plus, X } from "lucide-react";
+import { CheckIcon, ChevronsUpDown, HelpCircle, Plus, X } from "lucide-react";
 import Link from "next/link";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { VALID_BRANCH_REGEX } from "@dokploy/server/utils/git-branch-validation";
 import { GiteaIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Badge } from "@/components/ui/badge";
@@ -57,7 +58,10 @@ const GiteaProviderSchema = z.object({
 			owner: z.string().min(1, "Owner is required"),
 		})
 		.required(),
-	branch: z.string().min(1, "Branch is required"),
+	branch: z
+		.string()
+		.min(1, "Branch is required")
+		.regex(VALID_BRANCH_REGEX, "Invalid branch name"),
 	giteaId: z.string().min(1, "Gitea Provider is required"),
 	watchPaths: z.array(z.string()).optional(),
 	enableSubmodules: z.boolean().default(false),
@@ -409,10 +413,8 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
 										<FormLabel>Watch Paths</FormLabel>
 										<TooltipProvider>
 											<Tooltip>
-												<TooltipTrigger>
+												<TooltipTrigger asChild>
-													<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
+													<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
-														?
-													</div>
 												</TooltipTrigger>
 												<TooltipContent>
 													<p>

apps/dokploy/components/dashboard/compose/general/generic/save-github-provider-compose.tsx

@@ -1,3 +1,4 @@
+import { VALID_BRANCH_REGEX } from "@dokploy/server/utils/git-branch-validation";
 import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
 import { CheckIcon, ChevronsUpDown, HelpCircle, X } from "lucide-react";
 import Link from "next/link";
@@ -55,7 +56,10 @@ const GithubProviderSchema = z.object({
 			owner: z.string().min(1, "Owner is required"),
 		})
 		.required(),
-	branch: z.string().min(1, "Branch is required"),
+	branch: z
+		.string()
+		.min(1, "Branch is required")
+		.regex(VALID_BRANCH_REGEX, "Invalid branch name"),
 	githubId: z.string().min(1, "Github Provider is required"),
 	watchPaths: z.array(z.string()).optional(),
 	triggerType: z.enum(["push", "tag"]).default("push"),

apps/dokploy/components/dashboard/compose/general/generic/save-gitlab-provider-compose.tsx

@@ -5,6 +5,7 @@ import { useEffect, useMemo } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { VALID_BRANCH_REGEX } from "@dokploy/server/utils/git-branch-validation";
 import { GitlabIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Badge } from "@/components/ui/badge";
@@ -58,7 +59,10 @@ const GitlabProviderSchema = z.object({
 			gitlabPathNamespace: z.string().min(1),
 		})
 		.required(),
-	branch: z.string().min(1, "Branch is required"),
+	branch: z
+		.string()
+		.min(1, "Branch is required")
+		.regex(VALID_BRANCH_REGEX, "Invalid branch name"),
 	gitlabId: z.string().min(1, "Gitlab Provider is required"),
 	watchPaths: z.array(z.string()).optional(),
 	enableSubmodules: z.boolean().default(false),

apps/dokploy/components/dashboard/database/backups/restore-backup.tsx

@@ -288,7 +288,6 @@ export const RestoreBackup = ({
 			toast.error("Please select a database type");
 			return;
 		}
-		console.log({ data });
 		setIsDeploying(true);
 	};
 

apps/dokploy/components/dashboard/docker/logs/analyze-logs.tsx

@@ -0,0 +1,220 @@
+"use client";
+import copy from "copy-to-clipboard";
+import {
+	Bot,
+	Check,
+	Copy,
+	Loader2,
+	RotateCcw,
+	Settings,
+	X,
+} from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+import ReactMarkdown from "react-markdown";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { api } from "@/utils/api";
+import type { LogLine } from "./utils";
+
+interface Props {
+	logs: LogLine[];
+	context: "build" | "runtime";
+}
+
+const MAX_LOG_LINES = 200;
+
+export function AnalyzeLogs({ logs, context }: Props) {
+	const [open, setOpen] = useState(false);
+	const [aiId, setAiId] = useState<string>("");
+	const [copied, setCopied] = useState(false);
+	const { data: providers } = api.ai.getEnabledProviders.useQuery(undefined, {
+		enabled: open,
+	});
+	const { mutate, isPending, data, reset } = api.ai.analyzeLogs.useMutation({
+		onError: (error) => {
+			toast.error("Analysis failed", {
+				description: error.message,
+			});
+		},
+	});
+
+	const handleAnalyze = () => {
+		if (!aiId || logs.length === 0) return;
+
+		const logsText = logs
+			.slice(-MAX_LOG_LINES)
+			.map((l) => l.message)
+			.join("\n");
+
+		mutate({ aiId, logs: logsText, context });
+	};
+
+	const handleCopy = () => {
+		if (!data?.analysis) return;
+		const success = copy(data.analysis);
+		if (success) {
+			setCopied(true);
+			setTimeout(() => setCopied(false), 2000);
+		}
+	};
+
+	return (
+		<Popover
+			open={open}
+			onOpenChange={(isOpen) => {
+				setOpen(isOpen);
+				if (!isOpen) {
+					reset();
+					setAiId("");
+				}
+			}}
+		>
+			<PopoverTrigger asChild>
+				<Button
+					variant="outline"
+					size="sm"
+					className="h-9"
+					disabled={logs.length === 0}
+					title="Analyze logs with AI"
+				>
+					<Bot className="mr-2 size-4" />
+					AI
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent className="w-[550px] p-0" align="end">
+				<div className="flex items-center justify-between border-b px-4 py-3">
+					<div className="flex items-center gap-2">
+						<Bot className="h-4 w-4" />
+						<span className="text-sm font-medium">Log Analysis</span>
+					</div>
+					<Button
+						variant="ghost"
+						size="icon"
+						className="h-6 w-6"
+						onClick={() => setOpen(false)}
+					>
+						<X className="h-3.5 w-3.5" />
+					</Button>
+				</div>
+				<div className="p-4 space-y-3">
+					{!data?.analysis ? (
+						providers && providers.length === 0 ? (
+							<div className="flex flex-col items-center gap-3 py-2 text-center">
+								<p className="text-sm text-muted-foreground">
+									No AI providers configured. Set up a provider to start
+									analyzing logs.
+								</p>
+								<Button size="sm" variant="outline" asChild>
+									<Link href="/dashboard/settings/ai">
+										<Settings className="mr-2 h-3.5 w-3.5" />
+										Configure AI Provider
+									</Link>
+								</Button>
+							</div>
+						) : (
+							<>
+								<Select value={aiId} onValueChange={setAiId}>
+									<SelectTrigger className="h-9 text-sm">
+										<SelectValue placeholder="Select AI provider..." />
+									</SelectTrigger>
+									<SelectContent>
+										{providers?.map((p) => (
+											<SelectItem key={p.aiId} value={p.aiId}>
+												{p.name} ({p.model})
+											</SelectItem>
+										))}
+									</SelectContent>
+								</Select>
+								<Button
+									size="sm"
+									className="w-full"
+									disabled={!aiId || isPending || logs.length === 0}
+									onClick={handleAnalyze}
+								>
+									{isPending ? (
+										<>
+											<Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />
+											Analyzing...
+										</>
+									) : (
+										<>
+											<Bot className="mr-2 h-3.5 w-3.5" />
+											Analyze{" "}
+											{logs.length > MAX_LOG_LINES
+												? `last ${MAX_LOG_LINES}`
+												: logs.length}{" "}
+											lines
+										</>
+									)}
+								</Button>
+							</>
+						)
+					) : (
+						<>
+							<div className="max-h-[400px] overflow-y-auto">
+								<div className="prose prose-sm dark:prose-invert max-w-none text-sm break-words">
+									<ReactMarkdown>{data.analysis}</ReactMarkdown>
+								</div>
+							</div>
+							<div className="flex gap-2">
+								<Button
+									size="sm"
+									variant="outline"
+									className="flex-1"
+									onClick={() => {
+										reset();
+										handleAnalyze();
+									}}
+									disabled={isPending}
+								>
+									{isPending ? (
+										<Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />
+									) : (
+										<RotateCcw className="mr-2 h-3.5 w-3.5" />
+									)}
+									Re-analyze
+								</Button>
+								<Button
+									size="sm"
+									variant="outline"
+									onClick={handleCopy}
+									title="Copy analysis to clipboard"
+								>
+									{copied ? (
+										<Check className="h-3.5 w-3.5" />
+									) : (
+										<Copy className="h-3.5 w-3.5" />
+									)}
+								</Button>
+								<Button
+									size="sm"
+									variant="ghost"
+									onClick={() => {
+										reset();
+										setAiId("");
+									}}
+									title="Change provider"
+								>
+									<X className="h-3.5 w-3.5" />
+								</Button>
+							</div>
+						</>
+					)}
+				</div>
+			</PopoverContent>
+		</Popover>
+	);
+}

apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx

@@ -12,6 +12,7 @@ import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
+import { AnalyzeLogs } from "./analyze-logs";
 import { LineCountFilter } from "./line-count-filter";
 import { SinceLogsFilter, type TimeFilter } from "./since-logs-filter";
 import { StatusLogsFilter } from "./status-logs-filter";
@@ -346,11 +347,13 @@ export const DockerLogsId: React.FC<Props> = ({
 								title={isPaused ? "Resume logs" : "Pause logs"}
 							>
 								{isPaused ? (
-									<Play className="mr-2 h-4 w-4" />
+									<Play className="size-4" />
 								) : (
-									<Pause className="mr-2 h-4 w-4" />
+									<Pause className="size-4" />
 								)}
-								{isPaused ? "Resume" : "Pause"}
+								<span className="hidden lg:ml-2 lg:inline">
+									{isPaused ? "Resume" : "Pause"}
+								</span>
 							</Button>
 							<Button
 								variant="outline"
@@ -361,11 +364,13 @@ export const DockerLogsId: React.FC<Props> = ({
 								title="Copy logs to clipboard"
 							>
 								{copied ? (
-									<Check className="mr-2 h-4 w-4" />
+									<Check className="size-4" />
 								) : (
-									<Copy className="mr-2 h-4 w-4" />
+									<Copy className="size-4" />
 								)}
-								Copy
+								<span className="hidden lg:ml-2 lg:inline">
+									{copied ? "Copied" : "Copy"}
+								</span>
 							</Button>
 							<Button
 								variant="outline"
@@ -373,16 +378,18 @@ export const DockerLogsId: React.FC<Props> = ({
 								className="h-9 sm:w-auto w-full"
 								onClick={handleDownload}
 								disabled={filteredLogs.length === 0 || !data?.Name}
+								title="Download logs as text file"
 							>
-								<DownloadIcon className="mr-2 h-4 w-4" />
+								<DownloadIcon className="size-4" />
-								Download logs
+								<span className="hidden lg:ml-2 lg:inline">Download logs</span>
 							</Button>
+							<AnalyzeLogs logs={filteredLogs} context="runtime" />
 						</div>
 					</div>
 					{isPaused && (
-						<AlertBlock type="warning">
+						<AlertBlock type="warning" className="items-center">
 							<div className="flex items-center gap-2">
-								<Pause className="h-4 w-4" />
+								<Pause className="size-4" />
 								<span>
 									Logs paused
 									{messageBuffer.length > 0 && (

apps/dokploy/components/dashboard/docker/logs/utils.ts

@@ -74,6 +74,18 @@ export function parseLogs(logString: string): LogLine[] {
 
 // Detect log type based on message content
 export const getLogType = (message: string): LogStyle => {
+	// Detect HTTP statusCode
+	const statusMatch = message.match(/"statusCode"\s*:\s*"?(\d{3})"?/);
+
+	if (statusMatch) {
+		const statusCode = Number(statusMatch[1]);
+
+		if (statusCode >= 500) return LOG_STYLES.error;
+		if (statusCode >= 400) return LOG_STYLES.warning;
+		if (statusCode >= 200 && statusCode < 300) return LOG_STYLES.success;
+		return LOG_STYLES.info;
+	}
+
 	const lowerMessage = message.toLowerCase();
 
 	if (

apps/dokploy/components/dashboard/docker/mounts/show-container-mounts.tsx

@@ -0,0 +1,112 @@
+import { Badge } from "@/components/ui/badge";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import { api } from "@/utils/api";
+
+interface Props {
+	containerId: string;
+	serverId?: string;
+}
+
+interface Mount {
+	Type: string;
+	Source: string;
+	Destination: string;
+	Mode: string;
+	RW: boolean;
+	Propagation: string;
+	Name?: string;
+	Driver?: string;
+}
+
+export const ShowContainerMounts = ({ containerId, serverId }: Props) => {
+	const { data } = api.docker.getConfig.useQuery(
+		{
+			containerId,
+			serverId,
+		},
+		{
+			enabled: !!containerId,
+		},
+	);
+
+	const mounts: Mount[] = data?.Mounts ?? [];
+
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<DropdownMenuItem
+					className="w-full cursor-pointer"
+					onSelect={(e) => e.preventDefault()}
+				>
+					View Mounts
+				</DropdownMenuItem>
+			</DialogTrigger>
+			<DialogContent className="w-full md:w-[70vw] min-w-[70vw]">
+				<DialogHeader>
+					<DialogTitle>Container Mounts</DialogTitle>
+					<DialogDescription>
+						Volume and bind mounts for this container
+					</DialogDescription>
+				</DialogHeader>
+				<div className="overflow-auto max-h-[70vh]">
+					{mounts.length === 0 ? (
+						<div className="text-center text-muted-foreground py-8">
+							No mounts found for this container.
+						</div>
+					) : (
+						<Table>
+							<TableHeader>
+								<TableRow>
+									<TableHead>Type</TableHead>
+									<TableHead>Source</TableHead>
+									<TableHead>Destination</TableHead>
+									<TableHead>Mode</TableHead>
+									<TableHead>Read/Write</TableHead>
+								</TableRow>
+							</TableHeader>
+							<TableBody>
+								{mounts.map((mount, index) => (
+									<TableRow key={index}>
+										<TableCell>
+											<Badge variant="outline">{mount.Type}</Badge>
+										</TableCell>
+										<TableCell className="font-mono text-xs max-w-[250px] truncate">
+											{mount.Name || mount.Source}
+										</TableCell>
+										<TableCell className="font-mono text-xs max-w-[250px] truncate">
+											{mount.Destination}
+										</TableCell>
+										<TableCell className="text-xs">
+											{mount.Mode || "-"}
+										</TableCell>
+										<TableCell>
+											<Badge variant={mount.RW ? "default" : "secondary"}>
+												{mount.RW ? "RW" : "RO"}
+											</Badge>
+										</TableCell>
+									</TableRow>
+								))}
+							</TableBody>
+						</Table>
+					)}
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/components/dashboard/docker/networks/show-container-networks.tsx

@@ -0,0 +1,119 @@
+import { Badge } from "@/components/ui/badge";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import { api } from "@/utils/api";
+
+interface Props {
+	containerId: string;
+	serverId?: string;
+}
+
+interface Network {
+	IPAMConfig: unknown;
+	Links: unknown;
+	Aliases: string[] | null;
+	MacAddress: string;
+	NetworkID: string;
+	EndpointID: string;
+	Gateway: string;
+	IPAddress: string;
+	IPPrefixLen: number;
+	IPv6Gateway: string;
+	GlobalIPv6Address: string;
+	GlobalIPv6PrefixLen: number;
+	DriverOpts: unknown;
+}
+
+export const ShowContainerNetworks = ({ containerId, serverId }: Props) => {
+	const { data } = api.docker.getConfig.useQuery(
+		{
+			containerId,
+			serverId,
+		},
+		{
+			enabled: !!containerId,
+		},
+	);
+
+	const networks: Record<string, Network> =
+		data?.NetworkSettings?.Networks ?? {};
+	const entries = Object.entries(networks);
+
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<DropdownMenuItem
+					className="w-full cursor-pointer"
+					onSelect={(e) => e.preventDefault()}
+				>
+					View Networks
+				</DropdownMenuItem>
+			</DialogTrigger>
+			<DialogContent className="w-full md:w-[70vw] min-w-[70vw]">
+				<DialogHeader>
+					<DialogTitle>Container Networks</DialogTitle>
+					<DialogDescription>
+						Networks attached to this container
+					</DialogDescription>
+				</DialogHeader>
+				<div className="overflow-auto max-h-[70vh]">
+					{entries.length === 0 ? (
+						<div className="text-center text-muted-foreground py-8">
+							No networks found for this container.
+						</div>
+					) : (
+						<Table>
+							<TableHeader>
+								<TableRow>
+									<TableHead>Network</TableHead>
+									<TableHead>IP Address</TableHead>
+									<TableHead>Gateway</TableHead>
+									<TableHead>MAC Address</TableHead>
+									<TableHead>Aliases</TableHead>
+								</TableRow>
+							</TableHeader>
+							<TableBody>
+								{entries.map(([name, network]) => (
+									<TableRow key={name}>
+										<TableCell>
+											<Badge variant="outline">{name}</Badge>
+										</TableCell>
+										<TableCell className="font-mono text-xs">
+											{network.IPAddress
+												? `${network.IPAddress}/${network.IPPrefixLen}`
+												: "-"}
+										</TableCell>
+										<TableCell className="font-mono text-xs">
+											{network.Gateway || "-"}
+										</TableCell>
+										<TableCell className="font-mono text-xs">
+											{network.MacAddress || "-"}
+										</TableCell>
+										<TableCell className="text-xs">
+											{network.Aliases?.join(", ") || "-"}
+										</TableCell>
+									</TableRow>
+								))}
+							</TableBody>
+						</Table>
+					)}
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/components/dashboard/docker/show/columns.tsx

@@ -10,8 +10,11 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { ShowContainerConfig } from "../config/show-container-config";
 import { ShowDockerModalLogs } from "../logs/show-docker-modal-logs";
+import { ShowContainerMounts } from "../mounts/show-container-mounts";
+import { ShowContainerNetworks } from "../networks/show-container-networks";
 import { RemoveContainerDialog } from "../remove/remove-container";
 import { DockerTerminalModal } from "../terminal/docker-terminal-modal";
+import { UploadFileModal } from "../upload/upload-file-modal";
 import type { Container } from "./show-containers";
 
 export const columns: ColumnDef<Container>[] = [
@@ -122,12 +125,26 @@ export const columns: ColumnDef<Container>[] = [
 							containerId={container.containerId}
 							serverId={container.serverId || ""}
 						/>
+						<ShowContainerMounts
+							containerId={container.containerId}
+							serverId={container.serverId || ""}
+						/>
+						<ShowContainerNetworks
+							containerId={container.containerId}
+							serverId={container.serverId || ""}
+						/>
 						<DockerTerminalModal
 							containerId={container.containerId}
 							serverId={container.serverId || ""}
 						>
 							Terminal
 						</DockerTerminalModal>
+						<UploadFileModal
+							containerId={container.containerId}
+							serverId={container.serverId || undefined}
+						>
+							Upload File
+						</UploadFileModal>
 						<RemoveContainerDialog
 							containerId={container.containerId}
 							serverId={container.serverId ?? undefined}

apps/dokploy/components/dashboard/docker/upload/upload-file-modal.tsx

@@ -0,0 +1,187 @@
+import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
+import { Upload } from "lucide-react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { Dropzone } from "@/components/ui/dropzone";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { api } from "@/utils/api";
+import {
+	type UploadFileToContainer,
+	uploadFileToContainerSchema,
+} from "@/utils/schema";
+
+interface Props {
+	containerId: string;
+	serverId?: string;
+	children?: React.ReactNode;
+}
+
+export const UploadFileModal = ({ children, containerId, serverId }: Props) => {
+	const [open, setOpen] = useState(false);
+
+	const { mutateAsync: uploadFile, isPending: isLoading } =
+		api.docker.uploadFileToContainer.useMutation({
+			onSuccess: () => {
+				toast.success("File uploaded successfully");
+				setOpen(false);
+				form.reset();
+			},
+			onError: (error) => {
+				toast.error(error.message || "Failed to upload file to container");
+			},
+		});
+
+	const form = useForm({
+		resolver: zodResolver(uploadFileToContainerSchema),
+		defaultValues: {
+			containerId,
+			destinationPath: "/",
+			serverId: serverId || undefined,
+		},
+	});
+
+	const file = form.watch("file");
+
+	const onSubmit = async (values: UploadFileToContainer) => {
+		if (!values.file) {
+			toast.error("Please select a file to upload");
+			return;
+		}
+
+		const formData = new FormData();
+		formData.append("containerId", values.containerId);
+		formData.append("file", values.file);
+		formData.append("destinationPath", values.destinationPath);
+		if (values.serverId) {
+			formData.append("serverId", values.serverId);
+		}
+
+		await uploadFile(formData);
+	};
+
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>
+				<DropdownMenuItem
+					className="w-full cursor-pointer space-x-3"
+					onSelect={(e) => e.preventDefault()}
+				>
+					{children}
+				</DropdownMenuItem>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-2xl">
+				<DialogHeader>
+					<DialogTitle className="flex items-center gap-2">
+						<Upload className="h-5 w-5" />
+						Upload File to Container
+					</DialogTitle>
+					<DialogDescription>
+						Upload a file directly into the container's filesystem
+					</DialogDescription>
+				</DialogHeader>
+
+				<Form {...form}>
+					<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+						<FormField
+							control={form.control}
+							name="destinationPath"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Destination Path</FormLabel>
+									<FormControl>
+										<Input
+											{...field}
+											placeholder="/path/to/file"
+											className="font-mono"
+										/>
+									</FormControl>
+									<FormMessage />
+									<p className="text-xs text-muted-foreground">
+										Enter the full path where the file should be uploaded in the
+										container (e.g., /app/config.json)
+									</p>
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="file"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>File</FormLabel>
+									<FormControl>
+										<Dropzone
+											{...field}
+											dropMessage="Drop file here or click to browse"
+											onChange={(files) => {
+												if (files && files.length > 0) {
+													field.onChange(files[0]);
+												} else {
+													field.onChange(null);
+												}
+											}}
+										/>
+									</FormControl>
+									<FormMessage />
+									{file instanceof File && (
+										<div className="flex items-center gap-2 p-2 bg-muted rounded-md">
+											<span className="text-sm text-muted-foreground flex-1">
+												{file.name} ({(file.size / 1024).toFixed(2)} KB)
+											</span>
+											<Button
+												type="button"
+												variant="ghost"
+												size="sm"
+												onClick={() => field.onChange(null)}
+											>
+												Remove
+											</Button>
+										</div>
+									)}
+								</FormItem>
+							)}
+						/>
+
+						<DialogFooter>
+							<Button
+								type="button"
+								variant="outline"
+								onClick={() => setOpen(false)}
+							>
+								Cancel
+							</Button>
+							<Button
+								type="submit"
+								isLoading={isLoading}
+								disabled={!file || isLoading}
+							>
+								Upload File
+							</Button>
+						</DialogFooter>
+					</form>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/components/dashboard/home/show-home.tsx

@@ -0,0 +1,291 @@
+import { formatDistanceToNow } from "date-fns";
+import { ArrowRight, Rocket, Server } from "lucide-react";
+import Link from "next/link";
+import { useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { api } from "@/utils/api";
+
+type DeploymentStatus = "idle" | "running" | "done" | "error";
+
+const statusDotClass: Record<string, string> = {
+	done: "bg-emerald-500",
+	running: "bg-amber-500",
+	error: "bg-red-500",
+	idle: "bg-muted-foreground/40",
+};
+
+function getServiceInfo(d: any) {
+	const app = d.application;
+	const comp = d.compose;
+	const serverName: string =
+		d.server?.name ?? app?.server?.name ?? comp?.server?.name ?? "Dokploy";
+	if (app?.environment?.project && app.environment) {
+		return {
+			name: app.name as string,
+			environment: app.environment.name as string,
+			projectName: app.environment.project.name as string,
+			serverName,
+			href: `/dashboard/project/${app.environment.project.projectId}/environment/${app.environment.environmentId}/services/application/${app.applicationId}`,
+		};
+	}
+	if (comp?.environment?.project && comp.environment) {
+		return {
+			name: comp.name as string,
+			environment: comp.environment.name as string,
+			projectName: comp.environment.project.name as string,
+			serverName,
+			href: `/dashboard/project/${comp.environment.project.projectId}/environment/${comp.environment.environmentId}/services/compose/${comp.composeId}`,
+		};
+	}
+	return null;
+}
+
+function StatCard({
+	label,
+	value,
+	delta,
+}: {
+	label: string;
+	value: string;
+	delta?: string;
+}) {
+	return (
+		<div className="rounded-xl border bg-background p-5 min-h-[140px] flex flex-col justify-between">
+			<span className="text-xs uppercase tracking-wider text-muted-foreground">
+				{label}
+			</span>
+			<div className="flex flex-col gap-1">
+				<span className="text-3xl font-semibold tracking-tight">{value}</span>
+				{delta && (
+					<span className="text-xs text-muted-foreground">{delta}</span>
+				)}
+			</div>
+		</div>
+	);
+}
+
+function StatusListCard({
+	label,
+	items,
+}: {
+	label: string;
+	items: { dotClass: string; label: string; count: number }[];
+}) {
+	return (
+		<div className="rounded-xl border bg-background p-5 min-h-[140px] flex flex-col gap-3">
+			<span className="text-xs uppercase tracking-wider text-muted-foreground">
+				{label}
+			</span>
+			<ul className="flex flex-col gap-1.5">
+				{items.map((item) => (
+					<li key={item.label} className="flex items-center gap-2.5 text-sm">
+						<span
+							className={`size-2 rounded-full shrink-0 ${item.dotClass}`}
+							aria-hidden
+						/>
+						<span className="font-semibold tabular-nums w-8">{item.count}</span>
+						<span className="text-muted-foreground">{item.label}</span>
+					</li>
+				))}
+			</ul>
+		</div>
+	);
+}
+
+export const ShowHome = () => {
+	const { data: auth } = api.user.get.useQuery();
+	const { data: homeStats } = api.project.homeStats.useQuery();
+	const { data: permissions } = api.user.getPermissions.useQuery();
+	const canReadDeployments = !!permissions?.deployment.read;
+	const { data: deployments } = api.deployment.allCentralized.useQuery(
+		undefined,
+		{
+			enabled: canReadDeployments,
+			refetchInterval: 10000,
+		},
+	);
+
+	const firstName = auth?.user?.firstName?.trim();
+
+	const totals = homeStats ?? {
+		projects: 0,
+		environments: 0,
+		applications: 0,
+		compose: 0,
+		databases: 0,
+		services: 0,
+	};
+	const statusBreakdown = homeStats?.status ?? {
+		running: 0,
+		error: 0,
+		idle: 0,
+	};
+
+	const recentDeployments = useMemo(() => {
+		if (!deployments) return [];
+		return [...deployments]
+			.sort(
+				(a, b) =>
+					new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+			)
+			.slice(0, 10);
+	}, [deployments]);
+
+	const deployStats = useMemo(() => {
+		const now = Date.now();
+		const weekMs = 7 * 24 * 60 * 60 * 1000;
+		const lastStart = now - weekMs;
+		const prevStart = now - 2 * weekMs;
+
+		const last: NonNullable<typeof deployments> = [];
+		const prev: NonNullable<typeof deployments> = [];
+		for (const d of deployments ?? []) {
+			const t = new Date(d.createdAt).getTime();
+			if (t >= lastStart) last.push(d);
+			else if (t >= prevStart) prev.push(d);
+		}
+
+		const lastCount = last.length;
+		const prevCount = prev.length;
+		let delta: string | undefined;
+		if (prevCount > 0) {
+			const pct = Math.round(((lastCount - prevCount) / prevCount) * 100);
+			delta = `${pct >= 0 ? "+" : ""}${pct}% vs prev 7d`;
+		} else if (lastCount > 0) {
+			delta = "no prior data";
+		} else {
+			delta = "no activity yet";
+		}
+
+		return { value: String(lastCount), delta };
+	}, [deployments]);
+
+	return (
+		<div className="w-full">
+			<Card className="h-full bg-sidebar p-2.5 rounded-xl min-h-[85vh]">
+				<div className="rounded-xl bg-background shadow-md p-6 flex flex-col gap-6 h-full">
+					<div className="flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between">
+						<h1 className="text-3xl font-semibold tracking-tight">
+							{firstName ? `Welcome back, ${firstName}` : "Welcome back"}
+						</h1>
+						<Button asChild variant="secondary" className="w-fit">
+							<Link href="/dashboard/projects">
+								Go to projects
+								<ArrowRight className="size-4" />
+							</Link>
+						</Button>
+					</div>
+
+					<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+						<StatCard
+							label="Projects"
+							value={String(totals.projects)}
+							delta={`${totals.environments} ${totals.environments === 1 ? "environment" : "environments"}`}
+						/>
+						<StatCard
+							label="Services"
+							value={String(totals.services)}
+							delta={`${totals.applications} apps · ${totals.compose} compose · ${totals.databases} db`}
+						/>
+						<StatCard
+							label="Deploys / 7d"
+							value={deployStats.value}
+							delta={deployStats.delta}
+						/>
+						<StatusListCard
+							label="Status"
+							items={[
+								{
+									dotClass: "bg-emerald-500",
+									label: "running",
+									count: statusBreakdown.running,
+								},
+								{
+									dotClass: "bg-red-500",
+									label: "errored",
+									count: statusBreakdown.error,
+								},
+								{
+									dotClass: "bg-muted-foreground/40",
+									label: "idle",
+									count: statusBreakdown.idle,
+								},
+							]}
+						/>
+					</div>
+
+					<div className="rounded-xl border bg-background">
+						<div className="flex items-center justify-between px-5 py-4 border-b">
+							<div className="flex items-center gap-2">
+								<Rocket className="size-4 text-muted-foreground" />
+								<h2 className="text-sm font-semibold">Recent deployments</h2>
+							</div>
+							{canReadDeployments && (
+								<Link
+									href="/dashboard/deployments"
+									className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+								>
+									view all →
+								</Link>
+							)}
+						</div>
+						{!canReadDeployments ? (
+							<div className="min-h-[400px] flex flex-col items-center justify-center gap-3 text-center text-sm text-muted-foreground p-10">
+								<Rocket className="size-8 opacity-40" />
+								<span>You do not have permission to view deployments.</span>
+							</div>
+						) : recentDeployments.length === 0 ? (
+							<div className="min-h-[400px] flex flex-col items-center justify-center gap-3 text-center text-sm text-muted-foreground p-10">
+								<Rocket className="size-8 opacity-40" />
+								<span>No deployments yet.</span>
+							</div>
+						) : (
+							<ul className="divide-y">
+								{recentDeployments.map((d) => {
+									const info = getServiceInfo(d);
+									if (!info) return null;
+									const status = (d.status ?? "idle") as DeploymentStatus;
+									return (
+										<li key={d.deploymentId}>
+											<Link
+												href={info.href}
+												className="flex items-center gap-4 px-5 py-4 hover:bg-muted/40 transition-colors"
+											>
+												<span
+													className={`size-2 rounded-full shrink-0 ${statusDotClass[status] ?? statusDotClass.idle}`}
+													aria-hidden
+												/>
+												<div className="flex flex-col min-w-0 flex-1">
+													<span className="text-sm truncate">{info.name}</span>
+													<span className="text-xs text-muted-foreground truncate">
+														{info.projectName} · {info.environment}
+													</span>
+												</div>
+												<span className="text-xs text-muted-foreground w-36 hidden lg:flex items-center justify-end gap-1.5 truncate">
+													<Server className="size-3 shrink-0" />
+													<span className="truncate">{info.serverName}</span>
+												</span>
+												<span className="text-xs text-muted-foreground w-20 text-right hidden sm:inline">
+													{status}
+												</span>
+												<span className="text-xs text-muted-foreground w-24 text-right hidden md:inline">
+													{formatDistanceToNow(new Date(d.createdAt), {
+														addSuffix: true,
+													})}
+												</span>
+												<span className="text-xs text-muted-foreground hover:text-foreground transition-colors">
+													logs →
+												</span>
+											</Link>
+										</li>
+									);
+								})}
+							</ul>
+						)}
+					</div>
+				</div>
+			</Card>
+		</div>
+	);
+};

apps/dokploy/components/dashboard/mariadb/general/show-internal-mariadb-credentials.tsx

@@ -1,4 +1,6 @@
+import { toast } from "sonner";
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
+import { UpdateDatabasePassword } from "@/components/shared/update-database-password";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -9,6 +11,9 @@ interface Props {
 }
 export const ShowInternalMariadbCredentials = ({ mariadbId }: Props) => {
 	const { data } = api.mariadb.one.useQuery({ mariadbId });
+	const utils = api.useUtils();
+	const { mutateAsync: changePassword } =
+		api.mariadb.changePassword.useMutation();
 	return (
 		<>
 			<div className="flex w-full flex-col gap-5 ">
@@ -28,20 +33,43 @@ export const ShowInternalMariadbCredentials = ({ mariadbId }: Props) => {
 							</div>
 							<div className="flex flex-col gap-2">
 								<Label>Password</Label>
-								<div className="flex flex-row gap-4">
+								<div className="flex flex-row gap-2 items-center">
 									<ToggleVisibilityInput
 										disabled
 										value={data?.databasePassword}
 									/>
+									<UpdateDatabasePassword
+										onUpdatePassword={async (newPassword) => {
+											await changePassword({
+												mariadbId,
+												password: newPassword,
+												type: "user",
+											});
+											toast.success("Password updated successfully");
+											utils.mariadb.one.invalidate({ mariadbId });
+										}}
+									/>
 								</div>
 							</div>
 							<div className="flex flex-col gap-2">
 								<Label>Root Password</Label>
-								<div className="flex flex-row gap-4">
+								<div className="flex flex-row gap-2 items-center">
 									<ToggleVisibilityInput
 										disabled
 										value={data?.databaseRootPassword}
 									/>
+									<UpdateDatabasePassword
+										label="Root Password"
+										onUpdatePassword={async (newPassword) => {
+											await changePassword({
+												mariadbId,
+												password: newPassword,
+												type: "root",
+											});
+											toast.success("Root password updated successfully");
+											utils.mariadb.one.invalidate({ mariadbId });
+										}}
+									/>
 								</div>
 							</div>
 							<div className="flex flex-col gap-2">

apps/dokploy/components/dashboard/mongo/general/show-external-mongo-credentials.tsx

@@ -82,7 +82,8 @@ export const ShowExternalMongoCredentials = ({ mongoId }: Props) => {
 		const buildConnectionUrl = () => {
 			const port = form.watch("externalPort") || data?.externalPort;
 
-			return `mongodb://${data?.databaseUser}:${data?.databasePassword}@${getIp}:${port}`;
+			const params = `authSource=admin${data?.replicaSets ? "" : "&directConnection=true"}`;
+			return `mongodb://${data?.databaseUser}:${data?.databasePassword}@${getIp}:${port}/?${params}`;
 		};
 
 		setConnectionUrl(buildConnectionUrl());

apps/dokploy/components/dashboard/mongo/general/show-internal-mongo-credentials.tsx

@@ -1,4 +1,6 @@
+import { toast } from "sonner";
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
+import { UpdateDatabasePassword } from "@/components/shared/update-database-password";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -9,6 +11,9 @@ interface Props {
 }
 export const ShowInternalMongoCredentials = ({ mongoId }: Props) => {
 	const { data } = api.mongo.one.useQuery({ mongoId });
+	const utils = api.useUtils();
+	const { mutateAsync: changePassword } =
+		api.mongo.changePassword.useMutation();
 	return (
 		<>
 			<div className="flex w-full flex-col gap-5 ">
@@ -25,11 +30,21 @@ export const ShowInternalMongoCredentials = ({ mongoId }: Props) => {
 
 							<div className="flex flex-col gap-2">
 								<Label>Password</Label>
-								<div className="flex flex-row gap-4">
+								<div className="flex flex-row gap-2 items-center">
 									<ToggleVisibilityInput
 										disabled
 										value={data?.databasePassword}
 									/>
+									<UpdateDatabasePassword
+										onUpdatePassword={async (newPassword) => {
+											await changePassword({
+												mongoId,
+												password: newPassword,
+											});
+											toast.success("Password updated successfully");
+											utils.mongo.one.invalidate({ mongoId });
+										}}
+									/>
 								</div>
 							</div>
 
@@ -47,7 +62,7 @@ export const ShowInternalMongoCredentials = ({ mongoId }: Props) => {
 								<Label>Internal Connection URL </Label>
 								<ToggleVisibilityInput
 									disabled
-									value={`mongodb://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:27017`}
+									value={`mongodb://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:27017/?authSource=admin${data?.replicaSets ? "" : "&directConnection=true"}`}
 								/>
 							</div>
 						</div>

apps/dokploy/components/dashboard/monitoring/free/container/docker-block-chart.tsx

@@ -1,103 +1,103 @@
 import { format } from "date-fns";
+import { Area, AreaChart, CartesianGrid, YAxis } from "recharts";
 import {
-	Area,
+	type ChartConfig,
-	AreaChart,
+	ChartContainer,
-	CartesianGrid,
+	ChartLegend,
-	Legend,
+	ChartLegendContent,
-	ResponsiveContainer,
+	ChartTooltip,
-	Tooltip,
+	ChartTooltipContent,
-	YAxis,
+} from "@/components/ui/chart";
-} from "recharts";
 import type { DockerStatsJSON } from "./show-free-container-monitoring";
 
 interface Props {
 	accumulativeData: DockerStatsJSON["block"];
 }
 
+const chartConfig = {
+	readMb: {
+		label: "Read (MB)",
+		color: "hsl(var(--chart-1))",
+	},
+	writeMb: {
+		label: "Write (MB)",
+		color: "hsl(var(--chart-2))",
+	},
+} satisfies ChartConfig;
+
 export const DockerBlockChart = ({ accumulativeData }: Props) => {
-	const transformedData = accumulativeData.map((item, index) => {
+	const transformedData = accumulativeData.map((item, index) => ({
-		return {
+		time: item.time,
-			time: item.time,
+		name: `Point ${index + 1}`,
-			name: `Point ${index + 1}`,
+		readMb: item.value.readMb,
-			readMb: item.value.readMb,
+		writeMb: item.value.writeMb,
-			writeMb: item.value.writeMb,
+	}));
-		};
-	});
 
 	return (
-		<div className="mt-6 w-full h-[10rem]">
+		<ChartContainer config={chartConfig} className="mt-4 h-[10rem] w-full">
-			<ResponsiveContainer>
+			<AreaChart
-				<AreaChart
+				data={transformedData}
-					data={transformedData}
+				margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
-					margin={{
+			>
-						top: 10,
+				<defs>
-						right: 30,
+					<linearGradient id="fillBlockRead" x1="0" y1="0" x2="0" y2="1">
-						left: 0,
+						<stop
-						bottom: 0,
+							offset="5%"
-					}}
+							stopColor="var(--color-readMb)"
-				>
+							stopOpacity={0.8}
-					<defs>
+						/>
-						<linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
+						<stop
-							<stop offset="5%" stopColor="#27272A" stopOpacity={0.8} />
+							offset="95%"
-							<stop offset="95%" stopColor="#8884d8" stopOpacity={0} />
+							stopColor="var(--color-readMb)"
-						</linearGradient>
+							stopOpacity={0.1}
-						<linearGradient id="colorWrite" x1="0" y1="0" x2="0" y2="1">
+						/>
-							<stop offset="5%" stopColor="#82ca9d" stopOpacity={0.8} />
+					</linearGradient>
-							<stop offset="95%" stopColor="#82ca9d" stopOpacity={0} />
+					<linearGradient id="fillBlockWrite" x1="0" y1="0" x2="0" y2="1">
-						</linearGradient>
+						<stop
-					</defs>
+							offset="5%"
-					<YAxis stroke="#A1A1AA" />
+							stopColor="var(--color-writeMb)"
-					<CartesianGrid strokeDasharray="3 3" stroke="#27272A" />
+							stopOpacity={0.8}
-					{/* @ts-ignore */}
+						/>
-					<Tooltip content={<CustomTooltip />} />
+						<stop
-					<Legend />
+							offset="95%"
-					<Area
+							stopColor="var(--color-writeMb)"
-						type="monotone"
+							stopOpacity={0.1}
-						dataKey="readMb"
+						/>
-						stroke="#27272A"
+					</linearGradient>
-						fillOpacity={1}
+				</defs>
-						fill="url(#colorUv)"
+				<CartesianGrid vertical={false} />
-						name="Read Mb"
+				<YAxis tickLine={false} axisLine={false} />
-					/>
+				<ChartTooltip
-					<Area
+					cursor={false}
-						type="monotone"
+					content={
-						dataKey="writeMb"
+						<ChartTooltipContent
-						stroke="#82ca9d"
+							labelFormatter={(_, payload) => {
-						fillOpacity={1}
+								const time = payload?.[0]?.payload?.time;
-						fill="url(#colorWrite)"
+								return time ? format(new Date(time), "PPpp") : "";
-						name="Write Mb"
+							}}
-					/>
+							formatter={(value, name) => {
-				</AreaChart>
+								const label = name === "readMb" ? "Read" : "Write";
-			</ResponsiveContainer>
+								return [`${value} MB`, label];
-		</div>
+							}}
+						/>
+					}
+				/>
+				<Area
+					type="monotone"
+					dataKey="readMb"
+					stroke="var(--color-readMb)"
+					fill="url(#fillBlockRead)"
+					strokeWidth={2}
+				/>
+				<Area
+					type="monotone"
+					dataKey="writeMb"
+					stroke="var(--color-writeMb)"
+					fill="url(#fillBlockWrite)"
+					strokeWidth={2}
+				/>
+				<ChartLegend content={<ChartLegendContent />} />
+			</AreaChart>
+		</ChartContainer>
 	);
 };
-interface CustomTooltipProps {
-	active: boolean;
-	payload?: {
-		color?: string;
-		dataKey?: string;
-		value?: number;
-		payload: {
-			time: string;
-			readMb: number;
-			writeMb: number;
-		};
-	}[];
-}
-
-const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
-	if (active && payload && payload.length && payload[0]) {
-		return (
-			<div className="custom-tooltip bg-background p-2 shadow-lg rounded-md text-primary border">
-				{payload[0].payload.time && (
-					<p>{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}</p>
-				)}
-				<p>{`Read ${payload[0].payload.readMb} `}</p>
-				<p>{`Write: ${payload[0].payload.writeMb} `}</p>
-			</div>
-		);
-	}
-
-	return null;
-};

apps/dokploy/components/dashboard/monitoring/free/container/docker-cpu-chart.tsx

@@ -1,87 +1,81 @@
 import { format } from "date-fns";
+import { Area, AreaChart, CartesianGrid, YAxis } from "recharts";
 import {
-	Area,
+	type ChartConfig,
-	AreaChart,
+	ChartContainer,
-	CartesianGrid,
+	ChartLegend,
-	Legend,
+	ChartLegendContent,
-	ResponsiveContainer,
+	ChartTooltip,
-	Tooltip,
+	ChartTooltipContent,
-	YAxis,
+} from "@/components/ui/chart";
-} from "recharts";
 import type { DockerStatsJSON } from "./show-free-container-monitoring";
 
 interface Props {
 	accumulativeData: DockerStatsJSON["cpu"];
 }
 
+const chartConfig = {
+	usage: {
+		label: "CPU Usage",
+		color: "hsl(var(--chart-1))",
+	},
+} satisfies ChartConfig;
+
 export const DockerCpuChart = ({ accumulativeData }: Props) => {
-	const transformedData = accumulativeData.map((item, index) => {
+	const transformedData = accumulativeData.map((item, index) => ({
-		return {
+		name: `Point ${index + 1}`,
-			name: `Point ${index + 1}`,
+		time: item.time,
-			time: item.time,
+		usage: item.value.toString().split("%")[0],
-			usage: item.value.toString().split("%")[0],
+	}));
-		};
+
-	});
 	return (
-		<div className="mt-6 w-full h-[10rem]">
+		<ChartContainer config={chartConfig} className="mt-4 h-[10rem] w-full">
-			<ResponsiveContainer>
+			<AreaChart
-				<AreaChart
+				data={transformedData}
-					data={transformedData}
+				margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
-					margin={{
+			>
-						top: 10,
+				<defs>
-						right: 30,
+					<linearGradient id="fillCpu" x1="0" y1="0" x2="0" y2="1">
-						left: 0,
+						<stop
-						bottom: 0,
+							offset="5%"
-					}}
+							stopColor="var(--color-usage)"
-				>
+							stopOpacity={0.8}
-					<defs>
+						/>
-						<linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
+						<stop
-							<stop offset="5%" stopColor="#27272A" stopOpacity={0.8} />
+							offset="95%"
-							<stop offset="95%" stopColor="white" stopOpacity={0} />
+							stopColor="var(--color-usage)"
-						</linearGradient>
+							stopOpacity={0.1}
-					</defs>
+						/>
-					<YAxis stroke="#A1A1AA" domain={[0, 100]} />
+					</linearGradient>
-					<CartesianGrid strokeDasharray="3 3" stroke="#27272A" />
+				</defs>
-					{/* @ts-ignore */}
+				<CartesianGrid vertical={false} />
-					<Tooltip content={<CustomTooltip />} />
+				<YAxis
-					<Legend />
+					tickFormatter={(value) => `${value}%`}
-					<Area
+					domain={[0, 100]}
-						type="monotone"
+					tickLine={false}
-						dataKey="usage"
+					axisLine={false}
-						stroke="#27272A"
+				/>
-						fillOpacity={1}
+				<ChartTooltip
-						fill="url(#colorUv)"
+					cursor={false}
-					/>
+					content={
-				</AreaChart>
+						<ChartTooltipContent
-			</ResponsiveContainer>
+							labelFormatter={(_, payload) => {
-		</div>
+								const time = payload?.[0]?.payload?.time;
+								return time ? format(new Date(time), "PPpp") : "";
+							}}
+							formatter={(value) => [`${value}%`, "CPU Usage"]}
+						/>
+					}
+				/>
+				<Area
+					type="monotone"
+					dataKey="usage"
+					stroke="var(--color-usage)"
+					fill="url(#fillCpu)"
+					strokeWidth={2}
+				/>
+				<ChartLegend content={<ChartLegendContent />} />
+			</AreaChart>
+		</ChartContainer>
 	);
 };
-
-interface CustomTooltipProps {
-	active: boolean;
-	payload?: {
-		color?: string;
-		dataKey?: string;
-		value?: number;
-		payload: {
-			time: string;
-			usage: number;
-		};
-	}[];
-}
-
-const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
-	if (active && payload && payload.length && payload[0]) {
-		return (
-			<div className="custom-tooltip bg-background p-2 shadow-lg rounded-md text-primary border">
-				{payload[0].payload.time && (
-					<p>{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}</p>
-				)}
-				<p>{`CPU Usage: ${payload[0].payload.usage}%`}</p>
-			</div>
-		);
-	}
-
-	return null;
-};

apps/dokploy/components/dashboard/monitoring/free/container/docker-disk-chart.tsx

@@ -1,13 +1,11 @@
 import { format } from "date-fns";
+import { Area, AreaChart, CartesianGrid, YAxis } from "recharts";
 import {
-	Area,
+	type ChartConfig,
-	AreaChart,
+	ChartContainer,
-	CartesianGrid,
+	ChartTooltip,
-	Legend,
+	ChartTooltipContent,
-	ResponsiveContainer,
+} from "@/components/ui/chart";
-	Tooltip,
-	YAxis,
-} from "recharts";
 import type { DockerStatsJSON } from "./show-free-container-monitoring";
 
 interface Props {
@@ -15,91 +13,70 @@ interface Props {
 	diskTotal: number;
 }
 
+const chartConfig = {
+	usedGb: {
+		label: "Used (GB)",
+		color: "hsl(var(--chart-3))",
+	},
+} satisfies ChartConfig;
+
 export const DockerDiskChart = ({ accumulativeData, diskTotal }: Props) => {
-	const transformedData = accumulativeData.map((item, index) => {
+	const transformedData = accumulativeData.map((item, index) => ({
-		return {
+		time: item.time,
-			time: item.time,
+		name: `Point ${index + 1}`,
-			name: `Point ${index + 1}`,
+		usedGb: +item.value.diskUsage,
-			usedGb: +item.value.diskUsage,
+		totalGb: +item.value.diskTotal,
-			totalGb: +item.value.diskTotal,
+	}));
-			freeGb: item.value.diskFree,
-		};
-	});
 
 	return (
-		<div className="mt-6 w-full h-[10rem]">
+		<ChartContainer config={chartConfig} className="mt-4 h-[10rem] w-full">
-			<ResponsiveContainer>
+			<AreaChart
-				<AreaChart
+				data={transformedData}
-					data={transformedData}
+				margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
-					margin={{
+			>
-						top: 10,
+				<defs>
-						right: 30,
+					<linearGradient id="fillDiskUsed" x1="0" y1="0" x2="0" y2="1">
-						left: 0,
+						<stop
-						bottom: 0,
+							offset="5%"
-					}}
+							stopColor="var(--color-usedGb)"
-				>
+							stopOpacity={0.8}
-					<defs>
+						/>
-						<linearGradient id="colorUsed" x1="0" y1="0" x2="0" y2="1">
+						<stop
-							<stop offset="5%" stopColor="#6C28D9" stopOpacity={0.8} />
+							offset="95%"
-							<stop offset="95%" stopColor="#6C28D9" stopOpacity={0} />
+							stopColor="var(--color-usedGb)"
-						</linearGradient>
+							stopOpacity={0.1}
-						<linearGradient id="colorFree" x1="0" y1="0" x2="0" y2="1">
+						/>
-							<stop offset="5%" stopColor="#6C28D9" stopOpacity={0.2} />
+					</linearGradient>
-							<stop offset="95%" stopColor="#6C28D9" stopOpacity={0} />
+				</defs>
-						</linearGradient>
+				<CartesianGrid vertical={false} />
-					</defs>
+				<YAxis
-					<YAxis stroke="#A1A1AA" domain={[0, diskTotal]} />
+					domain={[0, diskTotal]}
-					<CartesianGrid strokeDasharray="3 3" stroke="#27272A" />
+					tickLine={false}
-					{/* @ts-ignore */}
+					axisLine={false}
-					<Tooltip content={<CustomTooltip />} />
+					tickFormatter={(value) => `${value} GB`}
-					<Legend />
+				/>
-					<Area
+				<ChartTooltip
-						type="monotone"
+					cursor={false}
-						dataKey="usedGb"
+					content={
-						stroke="#6C28D9"
+						<ChartTooltipContent
-						fillOpacity={1}
+							labelFormatter={(_, payload) => {
-						fill="url(#colorUsed)"
+								const time = payload?.[0]?.payload?.time;
-						name="Used GB"
+								return time ? format(new Date(time), "PPpp") : "";
-					/>
+							}}
-					<Area
+							formatter={(value) => {
-						type="monotone"
+								return [`${value} GB`, "Used"];
-						dataKey="freeGb"
+							}}
-						stroke="#8884d8"
+						/>
-						fillOpacity={1}
+					}
-						fill="url(#colorFree)"
+				/>
-						name="Free GB"
+				<Area
-					/>
+					type="monotone"
-				</AreaChart>
+					dataKey="usedGb"
-			</ResponsiveContainer>
+					stroke="var(--color-usedGb)"
-		</div>
+					fill="url(#fillDiskUsed)"
+					strokeWidth={2}
+				/>
+			</AreaChart>
+		</ChartContainer>
 	);
 };
-interface CustomTooltipProps {
-	active: boolean;
-	payload?: {
-		color?: string;
-		dataKey?: string;
-		value?: number;
-		payload: {
-			time: string;
-			usedGb: number;
-			freeGb: number;
-			totalGb: number;
-		};
-	}[];
-}
-
-const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
-	if (active && payload && payload.length && payload[0]) {
-		return (
-			<div className="custom-tooltip bg-background p-2 shadow-lg rounded-md text-primary border">
-				<p>{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}</p>
-				<p>{`Disk usage: ${payload[0].payload.usedGb} GB`}</p>
-				<p>{`Disk free: ${payload[0].payload.freeGb} GB`}</p>
-				<p>{`Total disk: ${payload[0].payload.totalGb} GB`}</p>
-			</div>
-		);
-	}
-
-	return null;
-};

apps/dokploy/components/dashboard/monitoring/free/container/docker-disk-usage-chart.tsx

@@ -0,0 +1,182 @@
+import { Loader2, RefreshCw } from "lucide-react";
+import { useMemo } from "react";
+import { Cell, Label, Pie, PieChart } from "recharts";
+import { Button } from "@/components/ui/button";
+import {
+	type ChartConfig,
+	ChartContainer,
+	ChartLegend,
+	ChartLegendContent,
+	ChartTooltip,
+	ChartTooltipContent,
+} from "@/components/ui/chart";
+import { api } from "@/utils/api";
+
+const TYPE_TO_KEY: Record<string, string> = {
+	Images: "images",
+	Containers: "containers",
+	"Local Volumes": "volumes",
+	"Build Cache": "buildCache",
+};
+
+const chartConfig = {
+	value: {
+		label: "Size",
+	},
+	images: {
+		label: "Images",
+		color: "hsl(var(--chart-1))",
+	},
+	containers: {
+		label: "Containers",
+		color: "hsl(var(--chart-2))",
+	},
+	volumes: {
+		label: "Volumes",
+		color: "hsl(var(--chart-3))",
+	},
+	buildCache: {
+		label: "Build Cache",
+		color: "hsl(var(--chart-4))",
+	},
+} satisfies ChartConfig;
+
+const formatSize = (bytes: number): string => {
+	if (bytes >= 1024 ** 3) return `${(bytes / 1024 ** 3).toFixed(2)} GB`;
+	if (bytes >= 1024 ** 2) return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
+	if (bytes >= 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+	return `${bytes} B`;
+};
+
+export const DockerDiskUsageChart = () => {
+	const { data, isLoading, refetch, isRefetching } =
+		api.settings.getDockerDiskUsage.useQuery(undefined, {
+			refetchOnWindowFocus: false,
+		});
+
+	const { chartData, totalBytes } = useMemo(() => {
+		const items =
+			data
+				?.filter((item) => item.sizeBytes > 0)
+				.map((item) => {
+					const key = TYPE_TO_KEY[item.type] ?? item.type;
+					return {
+						name: key,
+						value: item.sizeBytes,
+						size: item.size,
+						active: item.active,
+						totalCount: item.totalCount,
+						reclaimable: item.reclaimable,
+						fill: `var(--color-${key})`,
+					};
+				}) ?? [];
+		return {
+			chartData: items,
+			totalBytes: items.reduce((sum, item) => sum + item.value, 0),
+		};
+	}, [data]);
+
+	if (isLoading) {
+		return (
+			<div className="flex items-center justify-center h-[16rem]">
+				<Loader2 className="size-5 animate-spin text-muted-foreground" />
+			</div>
+		);
+	}
+
+	if (chartData.length === 0) {
+		return (
+			<p className="text-xs text-muted-foreground mt-4">
+				No Docker disk usage data available.
+			</p>
+		);
+	}
+
+	return (
+		<div className="flex flex-col gap-2 w-full">
+			<div className="flex items-center justify-between">
+				<span className="text-sm text-muted-foreground">
+					Total: {formatSize(totalBytes)}
+				</span>
+				<Button
+					variant="ghost"
+					size="icon"
+					className="h-7 w-7"
+					onClick={() => refetch()}
+					disabled={isRefetching}
+				>
+					<RefreshCw
+						className={`size-3.5 ${isRefetching ? "animate-spin" : ""}`}
+					/>
+				</Button>
+			</div>
+			<ChartContainer
+				config={chartConfig}
+				className="mx-auto w-full max-h-[250px] [&_.recharts-pie-label-text]:fill-foreground"
+			>
+				<PieChart>
+					<ChartTooltip
+						content={
+							<ChartTooltipContent
+								nameKey="name"
+								formatter={(value, name) => {
+									const item = chartData.find((d) => d.name === name);
+									if (!item) return [formatSize(value as number), name];
+									return [
+										`${item.size} — ${item.active} active / ${item.totalCount} total — Reclaimable: ${item.reclaimable}`,
+										chartConfig[name as keyof typeof chartConfig]?.label ??
+											name,
+									];
+								}}
+							/>
+						}
+					/>
+					<Pie
+						data={chartData}
+						dataKey="value"
+						nameKey="name"
+						innerRadius={60}
+						outerRadius={85}
+						strokeWidth={3}
+						stroke="hsl(var(--background))"
+						minAngle={15}
+					>
+						{chartData.map((entry) => (
+							<Cell key={entry.name} fill={entry.fill} />
+						))}
+						<Label
+							content={({ viewBox }) => {
+								if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+									return (
+										<text
+											x={viewBox.cx}
+											y={viewBox.cy}
+											textAnchor="middle"
+											dominantBaseline="middle"
+										>
+											<tspan
+												x={viewBox.cx}
+												y={(viewBox.cy || 0) - 8}
+												className="fill-foreground text-2xl font-bold"
+											>
+												{formatSize(totalBytes)}
+											</tspan>
+											<tspan
+												x={viewBox.cx}
+												y={(viewBox.cy || 0) + 14}
+												className="fill-muted-foreground text-xs"
+											>
+												Docker Usage
+											</tspan>
+										</text>
+									);
+								}
+							}}
+						/>
+					</Pie>
+					<ChartLegend content={<ChartLegendContent nameKey="name" />} />
+				</PieChart>
+			</ChartContainer>
+		</div>
+	);
+};

apps/dokploy/components/dashboard/monitoring/free/container/docker-memory-chart.tsx

@@ -1,13 +1,13 @@
 import { format } from "date-fns";
+import { Area, AreaChart, CartesianGrid, YAxis } from "recharts";
 import {
-	Area,
+	type ChartConfig,
-	AreaChart,
+	ChartContainer,
-	CartesianGrid,
+	ChartLegend,
-	Legend,
+	ChartLegendContent,
-	ResponsiveContainer,
+	ChartTooltip,
-	Tooltip,
+	ChartTooltipContent,
-	YAxis,
+} from "@/components/ui/chart";
-} from "recharts";
 import type { DockerStatsJSON } from "./show-free-container-monitoring";
 import { convertMemoryToBytes } from "./show-free-container-monitoring";
 
@@ -16,78 +16,72 @@ interface Props {
 	memoryLimitGB: number;
 }
 
+const chartConfig = {
+	usage: {
+		label: "Memory (GB)",
+		color: "hsl(var(--chart-2))",
+	},
+} satisfies ChartConfig;
+
 export const DockerMemoryChart = ({
 	accumulativeData,
 	memoryLimitGB,
 }: Props) => {
-	const transformedData = accumulativeData.map((item, index) => {
+	const transformedData = accumulativeData.map((item, index) => ({
-		return {
+		time: item.time,
-			time: item.time,
+		name: `Point ${index + 1}`,
-			name: `Point ${index + 1}`,
+		// @ts-ignore
-			// @ts-ignore
+		usage: (convertMemoryToBytes(item.value.used) / 1024 ** 3).toFixed(2),
-			usage: (convertMemoryToBytes(item.value.used) / 1024 ** 3).toFixed(2),
+	}));
-		};
+
-	});
 	return (
-		<div className="mt-6 w-full h-[10rem]">
+		<ChartContainer config={chartConfig} className="mt-4 h-[10rem] w-full">
-			<ResponsiveContainer>
+			<AreaChart
-				<AreaChart
+				data={transformedData}
-					data={transformedData}
+				margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
-					margin={{
+			>
-						top: 10,
+				<defs>
-						right: 30,
+					<linearGradient id="fillMemory" x1="0" y1="0" x2="0" y2="1">
-						left: 0,
+						<stop
-						bottom: 0,
+							offset="5%"
-					}}
+							stopColor="var(--color-usage)"
-				>
+							stopOpacity={0.8}
-					<defs>
+						/>
-						<linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
+						<stop
-							<stop offset="5%" stopColor="#27272A" stopOpacity={0.8} />
+							offset="95%"
-							<stop offset="95%" stopColor="white" stopOpacity={0} />
+							stopColor="var(--color-usage)"
-						</linearGradient>
+							stopOpacity={0.1}
-					</defs>
+						/>
-					<YAxis stroke="#A1A1AA" domain={[0, +memoryLimitGB.toFixed(2)]} />
+					</linearGradient>
-					<CartesianGrid strokeDasharray="3 3" stroke="#27272A" />
+				</defs>
-					{/* @ts-ignore */}
+				<CartesianGrid vertical={false} />
-					<Tooltip content={<CustomTooltip />} />
+				<YAxis
-					<Legend />
+					tickFormatter={(value) => `${value} GB`}
-					<Area
+					domain={[0, +memoryLimitGB.toFixed(2)]}
-						type="monotone"
+					tickLine={false}
-						dataKey="usage"
+					axisLine={false}
-						stroke="#27272A"
+				/>
-						fillOpacity={1}
+				<ChartTooltip
-						fill="url(#colorUv)"
+					cursor={false}
-					/>
+					content={
-				</AreaChart>
+						<ChartTooltipContent
-			</ResponsiveContainer>
+							labelFormatter={(_, payload) => {
-		</div>
+								const time = payload?.[0]?.payload?.time;
+								return time ? format(new Date(time), "PPpp") : "";
+							}}
+							formatter={(value) => [`${value} GB`, "Memory"]}
+						/>
+					}
+				/>
+				<Area
+					type="monotone"
+					dataKey="usage"
+					stroke="var(--color-usage)"
+					fill="url(#fillMemory)"
+					strokeWidth={2}
+				/>
+				<ChartLegend content={<ChartLegendContent />} />
+			</AreaChart>
+		</ChartContainer>
 	);
 };
-interface CustomTooltipProps {
-	active: boolean;
-	payload?: {
-		color?: string;
-		dataKey?: string;
-		value?: number;
-		payload: {
-			time: string;
-			usage: number;
-		};
-	}[];
-}
-
-const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
-	if (active && payload && payload.length && payload[0] && payload[0].payload) {
-		return (
-			<div className="custom-tooltip bg-background p-2 shadow-lg rounded-md text-primary border">
-				{payload[0].payload.time && (
-					<p>{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}</p>
-				)}
-
-				<p>{`Memory usage: ${payload[0].payload.usage} GB`}</p>
-			</div>
-		);
-	}
-
-	return null;
-};

apps/dokploy/components/dashboard/monitoring/free/container/docker-network-chart.tsx

@@ -1,99 +1,99 @@
 import { format } from "date-fns";
+import { Area, AreaChart, CartesianGrid, YAxis } from "recharts";
 import {
-	Area,
+	type ChartConfig,
-	AreaChart,
+	ChartContainer,
-	CartesianGrid,
+	ChartLegend,
-	Legend,
+	ChartLegendContent,
-	ResponsiveContainer,
+	ChartTooltip,
-	Tooltip,
+	ChartTooltipContent,
-	YAxis,
+} from "@/components/ui/chart";
-} from "recharts";
 import type { DockerStatsJSON } from "./show-free-container-monitoring";
 
 interface Props {
 	accumulativeData: DockerStatsJSON["network"];
 }
 
+const chartConfig = {
+	inMB: {
+		label: "In (MB)",
+		color: "hsl(var(--chart-1))",
+	},
+	outMB: {
+		label: "Out (MB)",
+		color: "hsl(var(--chart-2))",
+	},
+} satisfies ChartConfig;
+
 export const DockerNetworkChart = ({ accumulativeData }: Props) => {
-	const transformedData = accumulativeData.map((item, index) => {
+	const transformedData = accumulativeData.map((item, index) => ({
-		return {
+		time: item.time,
-			time: item.time,
+		name: `Point ${index + 1}`,
-			name: `Point ${index + 1}`,
+		inMB: item.value.inputMb,
-			inMB: item.value.inputMb,
+		outMB: item.value.outputMb,
-			outMB: item.value.outputMb,
+	}));
-		};
+
-	});
 	return (
-		<div className="mt-6 w-full h-[10rem]">
+		<ChartContainer config={chartConfig} className="mt-4 h-[10rem] w-full">
-			<ResponsiveContainer>
+			<AreaChart
-				<AreaChart
+				data={transformedData}
-					data={transformedData}
+				margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
-					margin={{
+			>
-						top: 10,
+				<defs>
-						right: 30,
+					<linearGradient id="fillNetIn" x1="0" y1="0" x2="0" y2="1">
-						left: 0,
+						<stop offset="5%" stopColor="var(--color-inMB)" stopOpacity={0.8} />
-						bottom: 0,
+						<stop
-					}}
+							offset="95%"
-				>
+							stopColor="var(--color-inMB)"
-					<defs>
+							stopOpacity={0.1}
-						<linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
+						/>
-							<stop offset="5%" stopColor="#27272A" stopOpacity={0.8} />
+					</linearGradient>
-							<stop offset="95%" stopColor="white" stopOpacity={0} />
+					<linearGradient id="fillNetOut" x1="0" y1="0" x2="0" y2="1">
-						</linearGradient>
+						<stop
-					</defs>
+							offset="5%"
-					<YAxis stroke="#A1A1AA" />
+							stopColor="var(--color-outMB)"
-					<CartesianGrid strokeDasharray="3 3" stroke="#27272A" />
+							stopOpacity={0.8}
-					{/* @ts-ignore */}
+						/>
-					<Tooltip content={<CustomTooltip />} />
+						<stop
-					<Legend />
+							offset="95%"
-					<Area
+							stopColor="var(--color-outMB)"
-						type="monotone"
+							stopOpacity={0.1}
-						dataKey="inMB"
+						/>
-						stroke="#8884d8"
+					</linearGradient>
-						fillOpacity={1}
+				</defs>
-						fill="url(#colorUv)"
+				<CartesianGrid vertical={false} />
-						name="In MB"
+				<YAxis tickLine={false} axisLine={false} />
-					/>
+				<ChartTooltip
-					<Area
+					cursor={false}
-						type="monotone"
+					content={
-						dataKey="outMB"
+						<ChartTooltipContent
-						stroke="#82ca9d"
+							labelFormatter={(_, payload) => {
-						fillOpacity={1}
+								const time = payload?.[0]?.payload?.time;
-						fill="url(#colorUv)"
+								return time ? format(new Date(time), "PPpp") : "";
-						name="Out MB"
+							}}
-					/>
+							formatter={(value, name) => {
-				</AreaChart>
+								const label = name === "inMB" ? "In" : "Out";
-			</ResponsiveContainer>
+								return [`${value} MB`, label];
-		</div>
+							}}
+						/>
+					}
+				/>
+				<Area
+					type="monotone"
+					dataKey="inMB"
+					stroke="var(--color-inMB)"
+					fill="url(#fillNetIn)"
+					strokeWidth={2}
+				/>
+				<Area
+					type="monotone"
+					dataKey="outMB"
+					stroke="var(--color-outMB)"
+					fill="url(#fillNetOut)"
+					strokeWidth={2}
+				/>
+				<ChartLegend content={<ChartLegendContent />} />
+			</AreaChart>
+		</ChartContainer>
 	);
 };
-
-interface CustomTooltipProps {
-	active: boolean;
-	payload?: {
-		color?: string;
-		dataKey?: string;
-		value?: number;
-		payload: {
-			time: string;
-			inMB: number;
-			outMB: number;
-		};
-	}[];
-}
-
-const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
-	if (active && payload && payload.length && payload[0]) {
-		return (
-			<div className="custom-tooltip bg-background p-2 shadow-lg rounded-md text-primary border">
-				{payload[0].payload.time && (
-					<p>{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}</p>
-				)}
-				<p>{`In  Usage: ${payload[0].payload.inMB} `}</p>
-				<p>{`Out  Usage: ${payload[0].payload.outMB} `}</p>
-			</div>
-		);
-	}
-
-	return null;
-};

apps/dokploy/components/dashboard/monitoring/free/container/show-free-container-monitoring.tsx

@@ -5,6 +5,7 @@ import { api } from "@/utils/api";
 import { DockerBlockChart } from "./docker-block-chart";
 import { DockerCpuChart } from "./docker-cpu-chart";
 import { DockerDiskChart } from "./docker-disk-chart";
+import { DockerDiskUsageChart } from "./docker-disk-usage-chart";
 import { DockerMemoryChart } from "./docker-memory-chart";
 import { DockerNetworkChart } from "./docker-network-chart";
 
@@ -219,11 +220,11 @@ export const ContainerFreeMonitoring = ({
 					<CardContent>
 						<div className="flex flex-col gap-2 w-full">
 							<span className="text-sm text-muted-foreground">
-								Used: {currentData.cpu.value}
+								Used: {String(currentData.cpu.value ?? "0%")}
 							</span>
 							<Progress
 								value={Number.parseInt(
-									currentData.cpu.value.replace("%", ""),
+									String(currentData.cpu.value ?? "0%").replace("%", ""),
 									10,
 								)}
 								className="w-[100%]"
@@ -284,6 +285,18 @@ export const ContainerFreeMonitoring = ({
 						</CardContent>
 					</Card>
 				)}
+				{appName === "dokploy" && (
+					<Card className="bg-background">
+						<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+							<CardTitle className="text-sm font-medium">
+								Docker Disk Usage
+							</CardTitle>
+						</CardHeader>
+						<CardContent>
+							<DockerDiskUsageChart />
+						</CardContent>
+					</Card>
+				)}
 
 				<Card className="bg-background">
 					<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">

apps/dokploy/components/dashboard/mysql/general/show-internal-mysql-credentials.tsx

@@ -1,4 +1,6 @@
+import { toast } from "sonner";
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
+import { UpdateDatabasePassword } from "@/components/shared/update-database-password";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -9,6 +11,9 @@ interface Props {
 }
 export const ShowInternalMysqlCredentials = ({ mysqlId }: Props) => {
 	const { data } = api.mysql.one.useQuery({ mysqlId });
+	const utils = api.useUtils();
+	const { mutateAsync: changePassword } =
+		api.mysql.changePassword.useMutation();
 	return (
 		<>
 			<div className="flex w-full flex-col gap-5 ">
@@ -28,20 +33,43 @@ export const ShowInternalMysqlCredentials = ({ mysqlId }: Props) => {
 							</div>
 							<div className="flex flex-col gap-2">
 								<Label>Password</Label>
-								<div className="flex flex-row gap-4">
+								<div className="flex flex-row gap-2 items-center">
 									<ToggleVisibilityInput
 										disabled
 										value={data?.databasePassword}
 									/>
+									<UpdateDatabasePassword
+										onUpdatePassword={async (newPassword) => {
+											await changePassword({
+												mysqlId,
+												password: newPassword,
+												type: "user",
+											});
+											toast.success("Password updated successfully");
+											utils.mysql.one.invalidate({ mysqlId });
+										}}
+									/>
 								</div>
 							</div>
 							<div className="flex flex-col gap-2">
 								<Label>Root Password</Label>
-								<div className="flex flex-row gap-4">
+								<div className="flex flex-row gap-2 items-center">
 									<ToggleVisibilityInput
 										disabled
 										value={data?.databaseRootPassword}
 									/>
+									<UpdateDatabasePassword
+										label="Root Password"
+										onUpdatePassword={async (newPassword) => {
+											await changePassword({
+												mysqlId,
+												password: newPassword,
+												type: "root",
+											});
+											toast.success("Root password updated successfully");
+											utils.mysql.one.invalidate({ mysqlId });
+										}}
+									/>
 								</div>
 							</div>
 							<div className="flex flex-col gap-2">

apps/dokploy/components/dashboard/postgres/general/show-internal-postgres-credentials.tsx

@@ -1,4 +1,6 @@
+import { toast } from "sonner";
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
+import { UpdateDatabasePassword } from "@/components/shared/update-database-password";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -9,6 +11,9 @@ interface Props {
 }
 export const ShowInternalPostgresCredentials = ({ postgresId }: Props) => {
 	const { data } = api.postgres.one.useQuery({ postgresId });
+	const utils = api.useUtils();
+	const { mutateAsync: changePassword } =
+		api.postgres.changePassword.useMutation();
 	return (
 		<>
 			<div className="flex w-full flex-col gap-5 ">
@@ -28,11 +33,21 @@ export const ShowInternalPostgresCredentials = ({ postgresId }: Props) => {
 							</div>
 							<div className="flex flex-col gap-2">
 								<Label>Password</Label>
-								<div className="flex flex-row gap-4">
+								<div className="flex flex-row gap-2 items-center">
 									<ToggleVisibilityInput
 										value={data?.databasePassword}
 										disabled
 									/>
+									<UpdateDatabasePassword
+										onUpdatePassword={async (newPassword) => {
+											await changePassword({
+												postgresId,
+												password: newPassword,
+											});
+											toast.success("Password updated successfully");
+											utils.postgres.one.invalidate({ postgresId });
+										}}
+									/>
 								</div>
 							</div>
 							<div className="flex flex-col gap-2">

apps/dokploy/components/dashboard/project/add-application.tsx

@@ -43,6 +43,7 @@ import {
 } from "@/components/ui/tooltip";
 import { slugify } from "@/lib/slug";
 import { api } from "@/utils/api";
+import { APP_NAME_MESSAGE, APP_NAME_REGEX } from "@/utils/schema";
 
 const AddTemplateSchema = z.object({
 	name: z.string().min(1, {
@@ -53,9 +54,8 @@ const AddTemplateSchema = z.object({
 		.min(1, {
 			message: "App name is required",
 		})
-		.regex(/^[a-z](?!.*--)([a-z0-9-]*[a-z])?$/, {
+		.regex(APP_NAME_REGEX, {
-			message:
+			message: APP_NAME_MESSAGE,
-				"App name supports lowercase letters, numbers, '-' and can only start and end letters, and does not support continuous '-'",
 		}),
 	description: z.string().optional(),
 	serverId: z.string().optional(),

apps/dokploy/components/dashboard/project/add-compose.tsx

@@ -43,6 +43,7 @@ import {
 } from "@/components/ui/tooltip";
 import { slugify } from "@/lib/slug";
 import { api } from "@/utils/api";
+import { APP_NAME_MESSAGE, APP_NAME_REGEX } from "@/utils/schema";
 
 const AddComposeSchema = z.object({
 	composeType: z.enum(["docker-compose", "stack"]).optional(),
@@ -54,9 +55,8 @@ const AddComposeSchema = z.object({
 		.min(1, {
 			message: "App name is required",
 		})
-		.regex(/^[a-z](?!.*--)([a-z0-9-]*[a-z])?$/, {
+		.regex(APP_NAME_REGEX, {
-			message:
+			message: APP_NAME_MESSAGE,
-				"App name supports lowercase letters, numbers, '-' and can only start and end letters, and does not support continuous '-'",
 		}),
 	description: z.string().optional(),
 	serverId: z.string().optional(),
@@ -78,9 +78,6 @@ export const AddCompose = ({ environmentId, projectName }: Props) => {
 	const { mutateAsync, isPending, error, isError } =
 		api.compose.create.useMutation();
 
-	// Get environment data to extract projectId
-	// const { data: environment } = api.environment.one.useQuery({ environmentId });
-
 	const hasServers = servers && servers.length > 0;
 	// Show dropdown logic based on cloud environment
 	// Cloud: show only if there are remote servers (no Dokploy option)

apps/dokploy/components/dashboard/project/add-database.tsx

@@ -52,12 +52,13 @@ import {
 } from "@/components/ui/tooltip";
 import { slugify } from "@/lib/slug";
 import { api } from "@/utils/api";
+import { APP_NAME_MESSAGE, APP_NAME_REGEX } from "@/utils/schema";
 
 type DbType = z.infer<typeof mySchema>["type"];
 
 const dockerImageDefaultPlaceholder: Record<DbType, string> = {
+	mongo: "mongo:8",
 	libsql: "ghcr.io/tursodatabase/libsql-server:v0.24.32",
-	mongo: "mongo:7",
 	mariadb: "mariadb:11",
 	mysql: "mysql:8",
 	postgres: "postgres:18",
@@ -82,9 +83,8 @@ const baseDatabaseSchema = z.object({
 		.min(1, {
 			message: "App name is required",
 		})
-		.regex(/^[a-z](?!.*--)([a-z0-9-]*[a-z])?$/, {
+		.regex(APP_NAME_REGEX, {
-			message:
+			message: APP_NAME_MESSAGE,
-				"App name supports lowercase letters, numbers, '-' and can only start and end letters, and does not support continuous '-'",
 		}),
 	databasePassword: z
 		.string()
@@ -632,7 +632,6 @@ export const AddDatabase = ({ environmentId, projectName }: Props) => {
 										control={form.control}
 										name="enableNamespaces"
 										render={({ field }) => {
-											console.log(field.value);
 											return (
 												<FormItem>
 													<FormLabel>Enable Namespaces</FormLabel>

apps/dokploy/components/dashboard/project/add-import.tsx

@@ -0,0 +1,494 @@
+import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
+import { Code2, FileInput, Globe2, HardDrive, HelpCircle } from "lucide-react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { CodeEditor } from "@/components/shared/code-editor";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { Textarea } from "@/components/ui/textarea";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { slugify } from "@/lib/slug";
+import { api } from "@/utils/api";
+import { APP_NAME_MESSAGE, APP_NAME_REGEX } from "@/utils/schema";
+
+const AddImportSchema = z.object({
+	name: z.string().min(1, { message: "Name is required" }),
+	appName: z
+		.string()
+		.min(1, { message: "App name is required" })
+		.regex(APP_NAME_REGEX, { message: APP_NAME_MESSAGE }),
+	base64: z.string().min(1, { message: "Base64 content is required" }),
+	serverId: z.string().optional(),
+});
+
+type AddImport = z.infer<typeof AddImportSchema>;
+
+type TemplateInfo = {
+	compose: string;
+	template: {
+		domains: Array<{
+			serviceName: string;
+			port: number;
+			path?: string;
+			host?: string;
+		}>;
+		envs: string[];
+		mounts: Array<{ filePath: string; content: string }>;
+	};
+};
+
+interface Props {
+	environmentId: string;
+	projectName?: string;
+}
+
+export const AddImport = ({ environmentId, projectName }: Props) => {
+	const utils = api.useUtils();
+	const [visible, setVisible] = useState(false);
+	const [previewOpen, setPreviewOpen] = useState(false);
+	const [mountOpen, setMountOpen] = useState(false);
+	const [selectedMount, setSelectedMount] = useState<{
+		filePath: string;
+		content: string;
+	} | null>(null);
+	const [templateInfo, setTemplateInfo] = useState<TemplateInfo | null>(null);
+
+	const slug = slugify(projectName);
+	const { data: isCloud } = api.settings.isCloud.useQuery();
+	const { data: servers } = api.server.withSSHKey.useQuery();
+	const shouldShowServerDropdown = !!(servers && servers.length > 0);
+
+	const { mutateAsync: previewTemplate, isPending: isProcessing } =
+		api.compose.previewTemplate.useMutation();
+	const { mutateAsync: createCompose, isPending: isCreating } =
+		api.compose.create.useMutation();
+	const { mutateAsync: importCompose, isPending: isImporting } =
+		api.compose.import.useMutation();
+
+	const form = useForm<AddImport>({
+		defaultValues: { name: "", appName: `${slug}-`, base64: "" },
+		resolver: zodResolver(AddImportSchema),
+	});
+
+	const resetAll = () => {
+		form.reset({ name: "", appName: `${slug}-`, base64: "" });
+		setTemplateInfo(null);
+		setPreviewOpen(false);
+		setMountOpen(false);
+		setSelectedMount(null);
+	};
+
+	const handleOpenChange = (open: boolean) => {
+		if (!open) resetAll();
+		setVisible(open);
+	};
+
+	const handleLoad = async (data: AddImport) => {
+		try {
+			const result = await previewTemplate({
+				appName: data.appName,
+				base64: data.base64.trim(),
+				serverId: data.serverId === "dokploy" ? undefined : data.serverId,
+			});
+			setTemplateInfo(result);
+			setPreviewOpen(true);
+		} catch (error) {
+			toast.error(
+				error instanceof Error ? error.message : "Error processing template",
+			);
+		}
+	};
+
+	const handleImport = async () => {
+		const data = form.getValues();
+		try {
+			const compose = await createCompose({
+				name: data.name,
+				appName: data.appName,
+				environmentId,
+				composeType: "docker-compose",
+				serverId: data.serverId === "dokploy" ? undefined : data.serverId,
+			});
+			await importCompose({
+				composeId: compose.composeId,
+				base64: data.base64.trim(),
+			});
+			toast.success("Compose imported successfully");
+			await utils.environment.one.invalidate({ environmentId });
+			resetAll();
+			setVisible(false);
+		} catch (error) {
+			toast.error(
+				error instanceof Error ? error.message : "Error importing compose",
+			);
+		}
+	};
+
+	const handleCancelPreview = () => {
+		setPreviewOpen(false);
+		setTemplateInfo(null);
+	};
+
+	return (
+		<>
+			<Dialog open={visible} onOpenChange={handleOpenChange}>
+				<DialogTrigger className="w-full">
+					<DropdownMenuItem
+						className="w-full cursor-pointer space-x-3"
+						onSelect={(e) => e.preventDefault()}
+					>
+						<FileInput className="size-4 text-muted-foreground" />
+						<span>Import</span>
+					</DropdownMenuItem>
+				</DialogTrigger>
+				<DialogContent className="sm:max-w-xl">
+					<DialogHeader>
+						<DialogTitle>Import Compose</DialogTitle>
+						<DialogDescription>
+							Paste a base64-encoded compose export to preview and import it
+						</DialogDescription>
+					</DialogHeader>
+
+					<Form {...form}>
+						<form
+							id="hook-form-import"
+							onSubmit={form.handleSubmit(handleLoad)}
+							className="grid w-full gap-4"
+						>
+							<FormField
+								control={form.control}
+								name="name"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Name</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="My App"
+												{...field}
+												onChange={(e) => {
+													const val = e.target.value || "";
+													form.setValue(
+														"appName",
+														`${slug}-${slugify(val.trim())}`,
+													);
+													field.onChange(val);
+												}}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							{shouldShowServerDropdown && (
+								<FormField
+									control={form.control}
+									name="serverId"
+									render={({ field }) => (
+										<FormItem>
+											<TooltipProvider delayDuration={0}>
+												<Tooltip>
+													<TooltipTrigger asChild>
+														<FormLabel className="break-all w-fit flex flex-row gap-1 items-center">
+															Select a Server {!isCloud ? "(Optional)" : ""}
+															<HelpCircle className="size-4 text-muted-foreground" />
+														</FormLabel>
+													</TooltipTrigger>
+													<TooltipContent
+														className="z-[999] w-[300px]"
+														align="start"
+														side="top"
+													>
+														<span>
+															If no server is selected, the compose will be
+															deployed on the server where the user is logged
+															in.
+														</span>
+													</TooltipContent>
+												</Tooltip>
+											</TooltipProvider>
+											<Select
+												onValueChange={field.onChange}
+												defaultValue={
+													field.value || (!isCloud ? "dokploy" : undefined)
+												}
+											>
+												<SelectTrigger>
+													<SelectValue
+														placeholder={
+															!isCloud ? "Dokploy" : "Select a Server"
+														}
+													/>
+												</SelectTrigger>
+												<SelectContent>
+													<SelectGroup>
+														{!isCloud && (
+															<SelectItem value="dokploy">
+																<span className="flex items-center gap-2 justify-between w-full">
+																	<span>Dokploy</span>
+																	<span className="text-muted-foreground text-xs self-center">
+																		Default
+																	</span>
+																</span>
+															</SelectItem>
+														)}
+														{servers?.map((server) => (
+															<SelectItem
+																key={server.serverId}
+																value={server.serverId}
+															>
+																<span className="flex items-center gap-2 justify-between w-full">
+																	<span>{server.name}</span>
+																	<span className="text-muted-foreground text-xs self-center">
+																		{server.ipAddress}
+																	</span>
+																</span>
+															</SelectItem>
+														))}
+														<SelectLabel>
+															Servers (
+															{(servers?.length ?? 0) + (!isCloud ? 1 : 0)})
+														</SelectLabel>
+													</SelectGroup>
+												</SelectContent>
+											</Select>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+							)}
+
+							<FormField
+								control={form.control}
+								name="appName"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>App Name</FormLabel>
+										<FormControl>
+											<Input placeholder="my-app" {...field} />
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="base64"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Configuration (Base64)</FormLabel>
+										<FormControl>
+											<Textarea
+												placeholder="Paste your base64-encoded compose export here..."
+												className="font-mono resize-none h-32"
+												{...field}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<div className="flex justify-end">
+								<Button
+									type="submit"
+									variant="outline"
+									isLoading={isCreating || isProcessing}
+								>
+									Load
+								</Button>
+							</div>
+						</form>
+					</Form>
+				</DialogContent>
+			</Dialog>
+
+			{/* Preview modal */}
+			<Dialog
+				open={previewOpen}
+				onOpenChange={(open) => !open && handleCancelPreview()}
+			>
+				<DialogContent className="max-w-[60vw]">
+					<DialogHeader>
+						<DialogTitle className="text-2xl font-bold">
+							Template Information
+						</DialogTitle>
+						<DialogDescription className="space-y-2">
+							<p>Review the template information before importing</p>
+							<AlertBlock type="warning">
+								Warning: This will remove all existing environment variables,
+								mounts, and domains from this service.
+							</AlertBlock>
+						</DialogDescription>
+					</DialogHeader>
+
+					<div className="flex flex-col gap-6">
+						<div className="space-y-4">
+							<div className="flex items-center gap-2">
+								<Code2 className="h-5 w-5 text-primary" />
+								<h3 className="text-lg font-semibold">Docker Compose</h3>
+							</div>
+							<CodeEditor
+								language="yaml"
+								value={templateInfo?.compose || ""}
+								className="font-mono"
+								readOnly
+							/>
+						</div>
+
+						{templateInfo?.template.domains &&
+							templateInfo.template.domains.length > 0 && (
+								<>
+									<Separator />
+									<div className="space-y-4">
+										<div className="flex items-center gap-2">
+											<Globe2 className="h-5 w-5 text-primary" />
+											<h3 className="text-lg font-semibold">Domains</h3>
+										</div>
+										<div className="grid grid-cols-1 gap-3">
+											{templateInfo.template.domains.map((domain, index) => (
+												<div
+													key={index}
+													className="rounded-lg border bg-card p-3 text-card-foreground shadow-sm"
+												>
+													<div className="font-medium">
+														{domain.serviceName}
+													</div>
+													<div className="text-sm text-muted-foreground space-y-1">
+														<div>Port: {domain.port}</div>
+														{domain.host && <div>Host: {domain.host}</div>}
+														{domain.path && <div>Path: {domain.path}</div>}
+													</div>
+												</div>
+											))}
+										</div>
+									</div>
+								</>
+							)}
+
+						{templateInfo?.template.envs &&
+							templateInfo.template.envs.length > 0 && (
+								<>
+									<Separator />
+									<div className="space-y-4">
+										<div className="flex items-center gap-2">
+											<Code2 className="h-5 w-5 text-primary" />
+											<h3 className="text-lg font-semibold">
+												Environment Variables
+											</h3>
+										</div>
+										<div className="grid grid-cols-1 gap-2">
+											{templateInfo.template.envs.map((env, index) => (
+												<div
+													key={index}
+													className="rounded-lg truncate border bg-card p-2 font-mono text-sm"
+												>
+													{env}
+												</div>
+											))}
+										</div>
+									</div>
+								</>
+							)}
+
+						{templateInfo?.template.mounts &&
+							templateInfo.template.mounts.length > 0 && (
+								<>
+									<Separator />
+									<div className="space-y-4">
+										<div className="flex items-center gap-2">
+											<HardDrive className="h-5 w-5 text-primary" />
+											<h3 className="text-lg font-semibold">Mounts</h3>
+										</div>
+										<div className="grid grid-cols-1 gap-2">
+											{templateInfo.template.mounts.map((mount, index) => (
+												<div
+													key={index}
+													className="rounded-lg border bg-card p-2 font-mono text-sm hover:bg-accent cursor-pointer transition-colors"
+													onClick={() => {
+														setSelectedMount(mount);
+														setMountOpen(true);
+													}}
+												>
+													{mount.filePath}
+												</div>
+											))}
+										</div>
+									</div>
+								</>
+							)}
+					</div>
+
+					<div className="flex justify-end gap-2 pt-4">
+						<Button variant="outline" onClick={handleCancelPreview}>
+							Cancel
+						</Button>
+						<Button isLoading={isImporting} onClick={handleImport}>
+							Import
+						</Button>
+					</div>
+				</DialogContent>
+			</Dialog>
+
+			{/* Mount content modal */}
+			<Dialog open={mountOpen} onOpenChange={setMountOpen}>
+				<DialogContent className="max-w-[50vw]">
+					<DialogHeader>
+						<DialogTitle className="text-xl font-bold">
+							{selectedMount?.filePath}
+						</DialogTitle>
+						<DialogDescription>Mount File Content</DialogDescription>
+					</DialogHeader>
+					<ScrollArea className="h-[45vh] pr-4">
+						<CodeEditor
+							language="yaml"
+							value={selectedMount?.content || ""}
+							className="font-mono"
+							readOnly
+						/>
+					</ScrollArea>
+					<div className="flex justify-end gap-2 pt-4">
+						<Button onClick={() => setMountOpen(false)}>Close</Button>
+					</div>
+				</DialogContent>
+			</Dialog>
+		</>
+	);
+};

apps/dokploy/components/dashboard/project/add-template.tsx

@@ -1,4 +1,5 @@
 import {
+	Bookmark,
 	BookText,
 	CheckIcon,
 	ChevronsUpDown,
@@ -82,6 +83,7 @@ export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
 	const [open, setOpen] = useState(false);
 	const [viewMode, setViewMode] = useState<"detailed" | "icon">("detailed");
 	const [selectedTags, setSelectedTags] = useState<string[]>([]);
+	const [showBookmarksOnly, setShowBookmarksOnly] = useState(false);
 	const [customBaseUrl, setCustomBaseUrl] = useState<string | undefined>(() => {
 		// Try to get from props first, then localStorage
 		if (baseUrl) return baseUrl;
@@ -122,8 +124,45 @@ export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
 			enabled: open,
 		},
 	);
+
+	const { data: bookmarkIds = [], isLoading: isLoadingBookmarks } =
+		api.user.getBookmarkedTemplates.useQuery(undefined, {
+			enabled: open,
+		});
+
 	const utils = api.useUtils();
 
+	const { mutateAsync: toggleBookmark } =
+		api.user.toggleTemplateBookmark.useMutation({
+			onMutate: async ({ templateId }) => {
+				await utils.user.getBookmarkedTemplates.cancel();
+				const previousBookmarks = utils.user.getBookmarkedTemplates.getData();
+
+				utils.user.getBookmarkedTemplates.setData(undefined, (old = []) => {
+					if (old.includes(templateId)) {
+						return old.filter((id) => id !== templateId);
+					}
+					return [...old, templateId];
+				});
+
+				return { previousBookmarks };
+			},
+			onError: (err, variables, context) => {
+				if (context?.previousBookmarks) {
+					utils.user.getBookmarkedTemplates.setData(
+						undefined,
+						context.previousBookmarks,
+					);
+				}
+				toast.error("Failed to update bookmark");
+			},
+			onSuccess: (data) => {
+				toast.success(
+					data.isBookmarked ? "Added to bookmarks" : "Removed from bookmarks",
+				);
+			},
+		});
+
 	const [serverId, setServerId] = useState<string | undefined>(undefined);
 	const { mutateAsync, isPending, error, isError } =
 		api.compose.deployTemplate.useMutation();
@@ -137,7 +176,9 @@ export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
 				query === "" ||
 				template.name.toLowerCase().includes(query.toLowerCase()) ||
 				template.description.toLowerCase().includes(query.toLowerCase());
-			return matchesTags && matchesQuery;
+			const matchesBookmarks =
+				!showBookmarksOnly || bookmarkIds.includes(template.id);
+			return matchesTags && matchesQuery && matchesBookmarks;
 		}) || [];
 
 	const hasServers = servers && servers.length > 0;
@@ -146,6 +187,14 @@ export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
 	// Self-hosted: show only if there are remote servers (Dokploy is default, hide if no remote servers)
 	const shouldShowServerDropdown = hasServers;
 
+	const handleToggleBookmark = async (
+		e: React.MouseEvent,
+		templateId: string,
+	) => {
+		e.stopPropagation();
+		await toggleBookmark({ templateId });
+	};
+
 	return (
 		<Dialog open={open} onOpenChange={setOpen}>
 			<DialogTrigger className="w-full">
@@ -243,6 +292,20 @@ export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
 										</Command>
 									</PopoverContent>
 								</Popover>
+								<Button
+									variant={showBookmarksOnly ? "default" : "outline"}
+									size="icon"
+									onClick={() => setShowBookmarksOnly(!showBookmarksOnly)}
+									className="h-9 w-9 flex-shrink-0"
+									disabled={isLoadingBookmarks}
+								>
+									<Bookmark
+										className={cn(
+											"size-4",
+											showBookmarksOnly && "fill-current",
+										)}
+									/>
+								</Button>
 								<Button
 									size="icon"
 									onClick={() =>
@@ -299,11 +362,19 @@ export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
 								</div>
 							</div>
 						) : templates.length === 0 ? (
-							<div className="flex justify-center items-center w-full gap-2 min-h-[50vh]">
+							<div className="flex flex-col 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
+									{showBookmarksOnly
+										? "No bookmarked templates found"
+										: "No templates found"}
 								</div>
+								{showBookmarksOnly && (
+									<p className="text-sm text-muted-foreground">
+										Click the bookmark icon on templates to add them to
+										bookmarks
+									</p>
+								)}
 							</div>
 						) : (
 							<div
@@ -323,9 +394,25 @@ export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
 											viewMode === "detailed" && "h-[400px]",
 										)}
 									>
-										<Badge className="absolute top-2 right-2" variant="blue">
+										<div className="absolute top-2 left-2 z-10">
-											{template?.version}
+											<Button
-										</Badge>
+												variant="ghost"
+												size="icon"
+												className="h-8 w-8 bg-background/80 backdrop-blur-sm hover:bg-background"
+												onClick={(e) => handleToggleBookmark(e, template.id)}
+											>
+												<Bookmark
+													className={cn(
+														"size-4",
+														bookmarkIds.includes(template.id) &&
+															"fill-yellow-400 text-yellow-400",
+													)}
+												/>
+											</Button>
+										</div>
+										<div className="absolute top-2 right-2">
+											<Badge variant="blue">{template?.version}</Badge>
+										</div>
 										<div
 											className={cn(
 												"flex-none p-6 pb-3 flex flex-col items-center gap-4 bg-muted/30",

apps/dokploy/components/dashboard/project/ai/template-generator.tsx

@@ -298,7 +298,19 @@ export const TemplateGenerator = ({ environmentId }: Props) => {
 					<div className="flex items-center justify-between w-full">
 						<div className="flex items-center gap-2 w-full justify-end">
 							<Button
-								onClick={stepper.prev}
+								onClick={() => {
+									if (
+										stepper.current.id === "variant" &&
+										templateInfo.details
+									) {
+										setTemplateInfo((prev) => ({
+											...prev,
+											details: null,
+										}));
+										return;
+									}
+									stepper.prev();
+								}}
 								disabled={stepper.isFirst}
 								variant="secondary"
 							>

apps/dokploy/components/dashboard/project/environment-variables.tsx

@@ -88,7 +88,12 @@ export const EnvironmentVariables = ({ environmentId, children }: Props) => {
 	// Add keyboard shortcut for Ctrl+S/Cmd+S
 	useEffect(() => {
 		const handleKeyDown = (e: KeyboardEvent) => {
-			if ((e.ctrlKey || e.metaKey) && e.key === "s" && !isPending && isOpen) {
+			if (
+				(e.ctrlKey || e.metaKey) &&
+				e.code === "KeyS" &&
+				!isPending &&
+				isOpen
+			) {
 				e.preventDefault();
 				form.handleSubmit(onSubmit)();
 			}

apps/dokploy/components/dashboard/projects/project-environment.tsx

@@ -87,7 +87,12 @@ export const ProjectEnvironment = ({ projectId, children }: Props) => {
 	// Add keyboard shortcut for Ctrl+S/Cmd+S
 	useEffect(() => {
 		const handleKeyDown = (e: KeyboardEvent) => {
-			if ((e.ctrlKey || e.metaKey) && e.key === "s" && !isPending && isOpen) {
+			if (
+				(e.ctrlKey || e.metaKey) &&
+				e.code === "KeyS" &&
+				!isPending &&
+				isOpen
+			) {
 				e.preventDefault();
 				form.handleSubmit(onSubmit)();
 			}

apps/dokploy/components/dashboard/projects/show.tsx

@@ -166,6 +166,7 @@ export const ShowProjects = () => {
 						return (
 							total +
 							(env.applications?.length || 0) +
+							(env.libsql?.length || 0) +
 							(env.mariadb?.length || 0) +
 							(env.mongo?.length || 0) +
 							(env.mysql?.length || 0) +
@@ -178,6 +179,7 @@ export const ShowProjects = () => {
 						return (
 							total +
 							(env.applications?.length || 0) +
+							(env.libsql?.length || 0) +
 							(env.mariadb?.length || 0) +
 							(env.mongo?.length || 0) +
 							(env.mysql?.length || 0) +
@@ -342,7 +344,7 @@ export const ShowProjects = () => {
 															}
 														}}
 													>
-														<Card className="group relative w-full h-full bg-transparent transition-colors hover:bg-border">
+														<Card className="group relative w-full h-full bg-transparent transition-colors hover:bg-border flex flex-col">
 															<CardHeader>
 																<CardTitle className="flex items-center justify-between gap-2 overflow-clip">
 																	<span className="flex flex-col gap-1.5 ">
@@ -489,7 +491,7 @@ export const ShowProjects = () => {
 																	</div>
 																</CardTitle>
 															</CardHeader>
-															<CardFooter className="pt-4">
+															<CardFooter className="pt-4 mt-auto">
 																<div className="space-y-1 text-xs flex flex-row justify-between max-sm:flex-wrap w-full gap-2 sm:gap-4">
 																	<DateTooltip date={project.createdAt}>
 																		Created

apps/dokploy/components/dashboard/redis/general/show-internal-redis-credentials.tsx

@@ -1,4 +1,6 @@
+import { toast } from "sonner";
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
+import { UpdateDatabasePassword } from "@/components/shared/update-database-password";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -9,6 +11,9 @@ interface Props {
 }
 export const ShowInternalRedisCredentials = ({ redisId }: Props) => {
 	const { data } = api.redis.one.useQuery({ redisId });
+	const utils = api.useUtils();
+	const { mutateAsync: changePassword } =
+		api.redis.changePassword.useMutation();
 	return (
 		<>
 			<div className="flex w-full flex-col gap-5 ">
@@ -24,11 +29,21 @@ export const ShowInternalRedisCredentials = ({ redisId }: Props) => {
 							</div>
 							<div className="flex flex-col gap-2">
 								<Label>Password</Label>
-								<div className="flex flex-row gap-4">
+								<div className="flex flex-row gap-2 items-center">
 									<ToggleVisibilityInput
 										value={data?.databasePassword}
 										disabled
 									/>
+									<UpdateDatabasePassword
+										onUpdatePassword={async (newPassword) => {
+											await changePassword({
+												redisId,
+												password: newPassword,
+											});
+											toast.success("Password updated successfully");
+											utils.redis.one.invalidate({ redisId });
+										}}
+									/>
 								</div>
 							</div>
 							<div className="flex flex-col gap-2">

apps/dokploy/components/dashboard/requests/columns.tsx

@@ -79,8 +79,11 @@ export const columns: ColumnDef<LogEntry>[] = [
 							: log.RequestPath}
 					</div>
 					<div className="flex flex-row gap-3 w-full">
-						<Badge variant={getStatusColor(log.OriginStatus)}>
+						<Badge
-							Status: {formatStatusLabel(log.OriginStatus)}
+							variant={getStatusColor(log.OriginStatus || log.DownstreamStatus)}
+						>
+							Status:{" "}
+							{formatStatusLabel(log.OriginStatus || log.DownstreamStatus)}
 						</Badge>
 						<Badge variant={"secondary"}>
 							Exec Time: {formatDuration(log.Duration)}

apps/dokploy/components/dashboard/requests/requests-table.tsx

@@ -185,7 +185,7 @@ export const RequestsTable = ({ dateRange }: RequestsTableProps) => {
 					<div className="flex flex-col gap-4  w-full overflow-auto">
 						<div className="flex items-center gap-2 max-sm:flex-wrap">
 							<Input
-								placeholder="Filter by name..."
+								placeholder="Filter by hostname..."
 								value={search}
 								onChange={(event) => setSearch(event.target.value)}
 								className="md:max-w-sm"

apps/dokploy/components/dashboard/search-command.tsx

@@ -63,7 +63,7 @@ export const SearchCommand = () => {
 
 	React.useEffect(() => {
 		const down = (e: KeyboardEvent) => {
-			if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
+			if (e.code === "KeyJ" && (e.metaKey || e.ctrlKey)) {
 				e.preventDefault();
 				setOpen((open) => !open);
 			}
@@ -167,7 +167,7 @@ export const SearchCommand = () => {
 					<CommandGroup heading={"Application"} hidden={true}>
 						<CommandItem
 							onSelect={() => {
-								router.push("/dashboard/projects");
+								router.push("/dashboard/home");
 								setOpen(false);
 							}}
 						>

apps/dokploy/components/dashboard/settings/billing/show-billing.tsx

@@ -2,12 +2,14 @@ import { loadStripe } from "@stripe/stripe-js";
 import clsx from "clsx";
 import {
 	AlertTriangle,
+	Bell,
 	CheckIcon,
 	CreditCard,
 	FileText,
 	Loader2,
 	MinusIcon,
 	PlusIcon,
+	ShieldCheck,
 } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -23,8 +25,18 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
 import { NumberInput } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import { Progress } from "@/components/ui/progress";
+import { Switch } from "@/components/ui/switch";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
@@ -89,6 +101,8 @@ export const ShowBilling = () => {
 		api.stripe.createCustomerPortalSession.useMutation();
 	const { mutateAsync: upgradeSubscription, isPending: isUpgrading } =
 		api.stripe.upgradeSubscription.useMutation();
+	const { mutateAsync: updateInvoiceNotifications } =
+		api.stripe.updateInvoiceNotifications.useMutation();
 	const utils = api.useUtils();
 
 	const [hobbyServerQuantity, setHobbyServerQuantity] = useState(1);
@@ -141,6 +155,7 @@ export const ShowBilling = () => {
 		return isAnnual ? interval === "year" : interval === "month";
 	});
 
+	const isEnterpriseCloud = admin?.user.isEnterpriseCloud ?? false;
 	const maxServers = admin?.user.serversQuantity ?? 1;
 	const percentage = ((servers ?? 0) / maxServers) * 100;
 	const safePercentage = Math.min(percentage, 100);
@@ -149,14 +164,66 @@ export const ShowBilling = () => {
 		<div className="w-full">
 			<Card className="bg-sidebar p-2.5 rounded-xl max-w-6xl mx-auto">
 				<div className="rounded-xl bg-background shadow-md">
-					<CardHeader>
+					<CardHeader className="flex flex-row items-start justify-between">
-						<CardTitle className="text-xl flex flex-row gap-2">
+						<div>
-							<CreditCard className="size-6 text-muted-foreground self-center" />
+							<CardTitle className="text-xl flex flex-row gap-2">
-							Billing
+								<CreditCard className="size-6 text-muted-foreground self-center" />
-						</CardTitle>
+								Billing
-						<CardDescription>
+							</CardTitle>
-							Manage your subscription and invoices
+							<CardDescription>
-						</CardDescription>
+								Manage your subscription and invoices
+							</CardDescription>
+						</div>
+						{(admin?.user.stripeSubscriptionId || isEnterpriseCloud) && (
+							<Dialog>
+								<DialogTrigger asChild>
+									<Button variant="outline" size="icon">
+										<Bell className="size-4" />
+									</Button>
+								</DialogTrigger>
+								<DialogContent className="sm:max-w-md">
+									<DialogHeader>
+										<DialogTitle>Notification Settings</DialogTitle>
+										<DialogDescription>
+											Configure your billing email notifications.
+										</DialogDescription>
+									</DialogHeader>
+									<div className="flex items-center justify-between rounded-lg border p-4">
+										<div className="space-y-0.5">
+											<Label htmlFor="invoice-notifications">
+												Invoice Notifications
+											</Label>
+											<p className="text-sm text-muted-foreground">
+												Receive email notifications for payments and failed
+												charges.
+											</p>
+										</div>
+										<Switch
+											id="invoice-notifications"
+											checked={admin?.user.sendInvoiceNotifications ?? false}
+											onCheckedChange={async (checked) => {
+												await updateInvoiceNotifications({
+													enabled: checked,
+												})
+													.then(() => {
+														utils.user.get.invalidate();
+														toast.success(
+															checked
+																? "Invoice notifications enabled"
+																: "Invoice notifications disabled",
+														);
+													})
+													.catch(() => {
+														toast.error(
+															"Failed to update invoice notifications",
+														);
+													});
+											}}
+										/>
+									</div>
+								</DialogContent>
+							</Dialog>
+						)}
 					</CardHeader>
 					<CardContent className="space-y-4 py-4 border-t">
 						<nav className="flex space-x-2 border-b">
@@ -182,7 +249,7 @@ export const ShowBilling = () => {
 						</nav>
 
 						<div className="flex flex-col gap-4 w-full mt-6">
-							{admin?.user.stripeSubscriptionId && (
+							{(admin?.user.stripeSubscriptionId || isEnterpriseCloud) && (
 								<div className="space-y-2 flex flex-col">
 									<h3 className="text-lg font-medium">Servers Plan</h3>
 									<p className="text-sm text-muted-foreground">
@@ -203,8 +270,36 @@ export const ShowBilling = () => {
 									)}
 								</div>
 							)}
+							{isEnterpriseCloud && (
+								<div className="flex items-start gap-3 rounded-xl border border-primary/30 bg-primary/5 p-4 max-w-2xl">
+									<ShieldCheck className="h-6 w-6 text-primary shrink-0 mt-0.5" />
+									<div className="flex flex-col gap-1">
+										<h3 className="text-base font-semibold text-foreground">
+											Enterprise Cloud Plan
+										</h3>
+										<p className="text-sm text-muted-foreground">
+											Your organization is on a managed Enterprise plan. Billing
+											is handled separately — contact your account manager for
+											any changes.
+										</p>
+										{admin?.user.stripeCustomerId && (
+											<Button
+												variant="secondary"
+												className="w-fit mt-2"
+												onClick={async () => {
+													const session = await createCustomerPortalSession();
+													window.open(session.url);
+												}}
+											>
+												Manage Subscription
+											</Button>
+										)}
+									</div>
+								</div>
+							)}
 							{/* Upgrade: solo para usuarios en plan legacy con nuevos planes disponibles */}
-							{useNewPricing &&
+							{!isEnterpriseCloud &&
+								useNewPricing &&
 								data?.currentPlan === "legacy" &&
 								data?.subscriptions?.length > 0 && (
 									<div className="rounded-xl border border-border bg-primary/5 p-4 space-y-4 max-w-2xl">
@@ -394,7 +489,8 @@ export const ShowBilling = () => {
 									</div>
 								)}
 							{/* Cambiar plan o cantidad de servidores (usuarios en Hobby o Startup; el portal no permite esto) */}
-							{useNewPricing &&
+							{!isEnterpriseCloud &&
+								useNewPricing &&
 								(data?.currentPlan === "hobby" ||
 									data?.currentPlan === "startup") &&
 								data?.subscriptions?.length > 0 && (
@@ -779,17 +875,18 @@ export const ShowBilling = () => {
 															Manage Subscription
 														</Button>
 													)}
-													{(data?.subscriptions?.length ?? 0) === 0 && (
+													{!isEnterpriseCloud &&
-														<Button
+														(data?.subscriptions?.length ?? 0) === 0 && (
-															className="w-full"
+															<Button
-															onClick={() =>
+																className="w-full"
-																handleCheckout("hobby", data!.hobbyProductId!)
+																onClick={() =>
-															}
+																	handleCheckout("hobby", data!.hobbyProductId!)
-															disabled={hobbyServerQuantity < 1}
+																}
-														>
+																disabled={hobbyServerQuantity < 1}
-															Get Started
+															>
-														</Button>
+																Get Started
-													)}
+															</Button>
+														)}
 												</div>
 											</div>
 										</section>
@@ -923,22 +1020,24 @@ export const ShowBilling = () => {
 															Manage Subscription
 														</Button>
 													)}
-													{(data?.subscriptions?.length ?? 0) === 0 && (
+													{!isEnterpriseCloud &&
-														<Button
+														(data?.subscriptions?.length ?? 0) === 0 && (
-															className="w-full"
+															<Button
-															onClick={() =>
+																className="w-full"
-																handleCheckout(
+																onClick={() =>
-																	"startup",
+																	handleCheckout(
-																	data!.startupProductId!,
+																		"startup",
-																)
+																		data!.startupProductId!,
-															}
+																	)
-															disabled={
+																}
-																startupServerQuantity < STARTUP_SERVERS_INCLUDED
+																disabled={
-															}
+																	startupServerQuantity <
-														>
+																	STARTUP_SERVERS_INCLUDED
-															Get Started
+																}
-														</Button>
+															>
-													)}
+																Get Started
+															</Button>
+														)}
 												</div>
 											</div>
 										</section>
@@ -1143,17 +1242,18 @@ export const ShowBilling = () => {
 																	Manage Subscription
 																</Button>
 															)}
-															{(data?.subscriptions?.length ?? 0) === 0 && (
+															{!isEnterpriseCloud &&
-																<Button
+																(data?.subscriptions?.length ?? 0) === 0 && (
-																	className="w-full"
+																	<Button
-																	onClick={async () => {
+																		className="w-full"
-																		handleCheckout("legacy", product.id);
+																		onClick={async () => {
-																	}}
+																			handleCheckout("legacy", product.id);
-																	disabled={hobbyServerQuantity < 1}
+																		}}
-																>
+																		disabled={hobbyServerQuantity < 1}
-																	Subscribe
+																	>
-																</Button>
+																		Subscribe
-															)}
+																	</Button>
+																)}
 														</div>
 													</div>
 												</section>

apps/dokploy/components/dashboard/settings/certificates/handle-certificate.tsx

@@ -1,5 +1,5 @@
 import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
-import { HelpCircle, PlusIcon } from "lucide-react";
+import { HelpCircle, PlusIcon, SquarePen } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -47,108 +47,157 @@ const certificateDataHolder =
 const privateKeyDataHolder =
 	"-----BEGIN PRIVATE KEY-----\nMIIFRDCCAyygAwIBAgIUEPOR47ys6VDwMVB9tYoeEka83uQwDQYJKoZIhvcNAQELBQAwGTEXMBUGA1UEAwwObWktZG9taW5pby5jb20wHhcNMjQwMzExMDQyNzU3WhcN\n-----END PRIVATE KEY-----";
 
-const addCertificate = z.object({
+const handleCertificateSchema = z.object({
 	name: z.string().min(1, "Name is required"),
 	certificateData: z.string().min(1, "Certificate data is required"),
 	privateKey: z.string().min(1, "Private key is required"),
-	autoRenew: z.boolean().optional(),
 	serverId: z.string().optional(),
 });
 
-type AddCertificate = z.infer<typeof addCertificate>;
+type HandleCertificateForm = z.infer<typeof handleCertificateSchema>;
 
-export const AddCertificate = () => {
+interface Props {
+	certificateId?: string;
+}
+
+export const HandleCertificate = ({ certificateId }: Props) => {
 	const [open, setOpen] = useState(false);
 	const utils = api.useUtils();
 
 	const { data: isCloud } = api.settings.isCloud.useQuery();
-	const { mutateAsync, isError, error, isPending } =
-		api.certificates.create.useMutation();
 	const { data: servers } = api.server.withSSHKey.useQuery();
 	const hasServers = servers && servers.length > 0;
-	// Show dropdown logic based on cloud environment
+	const shouldShowServerDropdown = hasServers && !certificateId; // Hide on edit
-	// Cloud: show only if there are remote servers (no Dokploy option)
-	// Self-hosted: show only if there are remote servers (Dokploy is default, hide if no remote servers)
-	const shouldShowServerDropdown = hasServers;
 
-	const form = useForm<AddCertificate>({
+	const { data: existingCert, refetch } = api.certificates.one.useQuery(
+		{ certificateId: certificateId || "" },
+		{ enabled: !!certificateId },
+	);
+
+	const createMutation = api.certificates.create.useMutation();
+	const updateMutation = api.certificates.update.useMutation();
+	const mutation = certificateId ? updateMutation : createMutation;
+	const { mutateAsync, isError, error, isPending } = mutation;
+
+	const form = useForm<HandleCertificateForm>({
 		defaultValues: {
 			name: "",
 			certificateData: "",
 			privateKey: "",
-			autoRenew: false,
 		},
-		resolver: zodResolver(addCertificate),
+		resolver: zodResolver(handleCertificateSchema),
 	});
-	useEffect(() => {
-		form.reset();
-	}, [form, form.formState.isSubmitSuccessful, form.reset]);
 
-	const onSubmit = async (data: AddCertificate) => {
+	useEffect(() => {
-		await mutateAsync({
+		if (existingCert) {
+			form.reset({
+				name: existingCert.name,
+				certificateData: existingCert.certificateData,
+				privateKey: existingCert.privateKey,
+			});
+		} else {
+			form.reset({
+				name: "",
+				certificateData: "",
+				privateKey: "",
+			});
+		}
+	}, [existingCert, form, open]);
+
+	const onSubmit = async (data: HandleCertificateForm) => {
+		const basePayload = {
 			name: data.name,
 			certificateData: data.certificateData,
 			privateKey: data.privateKey,
-			autoRenew: data.autoRenew,
+		};
-			serverId: data.serverId === "dokploy" ? undefined : data.serverId,
+
-			organizationId: "",
+		const promise = certificateId
-		})
+			? updateMutation.mutateAsync({
+					certificateId,
+					...basePayload,
+				})
+			: createMutation.mutateAsync({
+					...basePayload,
+					serverId: data.serverId === "dokploy" ? undefined : data.serverId,
+					organizationId: "",
+				});
+
+		await promise
 			.then(async () => {
-				toast.success("Certificate Created");
+				toast.success(
+					certificateId ? "Certificate Updated" : "Certificate Created",
+				);
 				await utils.certificates.all.invalidate();
+				if (certificateId) {
+					refetch();
+				}
 				setOpen(false);
 			})
 			.catch(() => {
-				toast.error("Error creating the Certificate");
+				toast.error(
+					certificateId
+						? "Error updating the Certificate"
+						: "Error creating the Certificate",
+				);
 			});
 	};
+
 	return (
 		<Dialog open={open} onOpenChange={setOpen}>
-			<DialogTrigger className="" asChild>
+			<DialogTrigger asChild>
-				<Button>
+				{certificateId ? (
-					{" "}
+					<Button
-					<PlusIcon className="h-4 w-4" />
+						variant="ghost"
-					Add Certificate
+						size="icon"
-				</Button>
+						className="group hover:bg-blue-500/10"
+					>
+						<SquarePen className="size-3.5 text-primary group-hover:text-blue-500" />
+					</Button>
+				) : (
+					<Button>
+						<PlusIcon className="h-4 w-4" />
+						Add Certificate
+					</Button>
+				)}
 			</DialogTrigger>
 			<DialogContent className="sm:max-w-2xl">
 				<DialogHeader>
-					<DialogTitle>Add New Certificate</DialogTitle>
+					<DialogTitle>
+						{certificateId ? "Update" : "Add New"} Certificate
+					</DialogTitle>
 					<DialogDescription>
-						Upload or generate a certificate to secure your application
+						{certificateId
+							? "Modify the certificate details"
+							: "Upload or generate a certificate to secure your application"}
 					</DialogDescription>
 				</DialogHeader>
 				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 
 				<Form {...form}>
 					<form
-						id="hook-form-add-certificate"
+						id="hook-form-handle-certificate"
 						onSubmit={form.handleSubmit(onSubmit)}
-						className="grid w-full gap-4 "
+						className="grid w-full gap-4"
 					>
 						<FormField
 							control={form.control}
 							name="name"
-							render={({ field }) => {
+							render={({ field }) => (
-								return (
+								<FormItem>
-									<FormItem>
+									<FormLabel>Certificate Name</FormLabel>
-										<FormLabel>Certificate Name</FormLabel>
+									<FormControl>
-										<FormControl>
+										<Input placeholder="My Certificate" {...field} />
-											<Input placeholder={"My Certificate"} {...field} />
+									</FormControl>
-										</FormControl>
+									<FormMessage />
-										<FormMessage />
+								</FormItem>
-									</FormItem>
+							)}
-								);
-							}}
 						/>
 						<FormField
 							control={form.control}
 							name="certificateData"
 							render={({ field }) => (
 								<FormItem>
-									<div className="space-y-0.5">
+									<FormLabel>Certificate Data</FormLabel>
-										<FormLabel>Certificate Data</FormLabel>
-									</div>
 									<FormControl>
 										<Textarea
 											className="h-32"
@@ -165,9 +214,7 @@ export const AddCertificate = () => {
 							name="privateKey"
 							render={({ field }) => (
 								<FormItem>
-									<div className="space-y-0.5">
+									<FormLabel>Private Key</FormLabel>
-										<FormLabel>Private Key</FormLabel>
-									</div>
 									<FormControl>
 										<Textarea
 											className="h-32"
@@ -248,10 +295,10 @@ export const AddCertificate = () => {
 					<DialogFooter className="flex w-full flex-row !justify-end">
 						<Button
 							isLoading={isPending}
-							form="hook-form-add-certificate"
+							form="hook-form-handle-certificate"
 							type="submit"
 						>
-							Create
+							{certificateId ? "Update" : "Create"}
 						</Button>
 					</DialogFooter>
 				</Form>

apps/dokploy/components/dashboard/settings/certificates/show-certificates.tsx

@@ -4,6 +4,7 @@ import {
 	ChevronRight,
 	Link,
 	Loader2,
+	Server,
 	ShieldCheck,
 	Trash2,
 } from "lucide-react";
@@ -20,7 +21,7 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
-import { AddCertificate } from "./add-certificate";
+import { HandleCertificate } from "./handle-certificate";
 import {
 	extractLeafCommonName,
 	getCertificateChainExpirationDetails,
@@ -69,7 +70,7 @@ export const ShowCertificates = () => {
 										<span className="text-base text-muted-foreground text-center">
 											You don't have any certificates created
 										</span>
-										{permissions?.certificate.create && <AddCertificate />}
+										{permissions?.certificate.create && <HandleCertificate />}
 									</div>
 								) : (
 									<div className="flex flex-col gap-4  min-h-[25vh]">
@@ -121,6 +122,12 @@ export const ShowCertificates = () => {
 																			CN: {commonName}
 																		</span>
 																	)}
+																	<span className="text-xs text-muted-foreground flex items-center gap-1">
+																		<Server className="size-3" />
+																		{certificate.server
+																			? `${certificate.server.name} (${certificate.server.ipAddress})`
+																			: "Dokploy (Local)"}
+																	</span>
 																	{chainInfo.isChain && (
 																		<div className="flex flex-col gap-1.5 mt-1">
 																			<button
@@ -181,8 +188,14 @@ export const ShowCertificates = () => {
 																</div>
 															</div>
 
-															{permissions?.certificate.delete && (
+															<div className="flex flex-row gap-1">
-																<div className="flex flex-row gap-1">
+																{permissions?.certificate.update && (
+																	<HandleCertificate
+																		certificateId={certificate.certificateId}
+																	/>
+																)}
+
+																{permissions?.certificate.delete && (
 																	<DialogAction
 																		title="Delete Certificate"
 																		description="Are you sure you want to delete this certificate?"
@@ -208,14 +221,14 @@ export const ShowCertificates = () => {
 																		<Button
 																			variant="ghost"
 																			size="icon"
-																			className="group hover:bg-red-500/10 "
+																			className="group hover:bg-red-500/10"
 																			isLoading={isRemoving}
 																		>
 																			<Trash2 className="size-4 text-primary group-hover:text-red-500" />
 																		</Button>
 																	</DialogAction>
-																</div>
+																)}
-															)}
+															</div>
 														</div>
 													</div>
 												);
@@ -224,7 +237,7 @@ export const ShowCertificates = () => {
 
 										{permissions?.certificate.create && (
 											<div className="flex flex-row gap-2 flex-wrap w-full justify-end mr-4">
-												<AddCertificate />
+												<HandleCertificate />
 											</div>
 										)}
 									</div>

apps/dokploy/components/dashboard/settings/certificates/utils.ts

@@ -36,11 +36,11 @@ export const extractExpirationDate = (certData: string): Date | null => {
 		}
 
 		// Skip the outer certificate sequence
-		if (der[offset++] !== 0x30) throw new Error("Expected sequence");
+		if (der[offset++] !== 0x30) return null;
 		({ offset } = readLength(offset));
 
 		// Skip tbsCertificate sequence
-		if (der[offset++] !== 0x30) throw new Error("Expected tbsCertificate");
+		if (der[offset++] !== 0x30) return null;
 		({ offset } = readLength(offset));
 
 		// Check for optional version field (context-specific tag [0])
@@ -52,15 +52,14 @@ export const extractExpirationDate = (certData: string): Date | null => {
 
 		// Skip serialNumber, signature, issuer
 		for (let i = 0; i < 3; i++) {
-			if (der[offset] !== 0x30 && der[offset] !== 0x02)
+			if (der[offset] !== 0x30 && der[offset] !== 0x02) return null;
-				throw new Error("Unexpected structure");
 			offset++;
 			const fieldLen = readLength(offset);
 			offset = fieldLen.offset + fieldLen.length;
 		}
 
 		// Validity sequence (notBefore and notAfter)
-		if (der[offset++] !== 0x30) throw new Error("Expected validity sequence");
+		if (der[offset++] !== 0x30) return null;
 		const validityLen = readLength(offset);
 		offset = validityLen.offset;
 
@@ -138,11 +137,11 @@ export const extractCommonName = (certData: string): string | null => {
 		}
 
 		// Skip the outer certificate sequence
-		if (der[offset++] !== 0x30) throw new Error("Expected sequence");
+		if (der[offset++] !== 0x30) return null;
 		({ offset } = readLength(offset));
 
 		// Skip tbsCertificate sequence
-		if (der[offset++] !== 0x30) throw new Error("Expected tbsCertificate");
+		if (der[offset++] !== 0x30) return null;
 		({ offset } = readLength(offset));
 
 		// Check for optional version field (context-specific tag [0])
@@ -165,7 +164,7 @@ export const extractCommonName = (certData: string): string | null => {
 		offset = skipField(offset);
 
 		// Subject sequence - where we find the CN
-		if (der[offset++] !== 0x30) throw new Error("Expected subject sequence");
+		if (der[offset++] !== 0x30) return null;
 		const subjectLen = readLength(offset);
 		const subjectEnd = subjectLen.offset + subjectLen.length;
 		offset = subjectLen.offset;

apps/dokploy/components/dashboard/settings/handle-ai.tsx

@@ -1,6 +1,13 @@
 "use client";
 import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
-import { Check, ChevronDown, PenBoxIcon, PlusIcon } from "lucide-react";
+import {
+	Check,
+	ChevronDown,
+	Loader2,
+	PenBoxIcon,
+	Plug,
+	PlusIcon,
+} from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -37,10 +44,34 @@ import {
 	PopoverContent,
 	PopoverTrigger,
 } from "@/components/ui/popover";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
 
+const AI_PROVIDERS = [
+	{ name: "OpenAI", apiUrl: "https://api.openai.com/v1" },
+	{ name: "Anthropic", apiUrl: "https://api.anthropic.com/v1" },
+	{
+		name: "Google Gemini",
+		apiUrl: "https://generativelanguage.googleapis.com/v1beta",
+	},
+	{ name: "Mistral", apiUrl: "https://api.mistral.ai/v1" },
+	{ name: "Cohere", apiUrl: "https://api.cohere.ai/v2" },
+	{ name: "Perplexity", apiUrl: "https://api.perplexity.ai" },
+	{ name: "DeepInfra", apiUrl: "https://api.deepinfra.com/v1/openai" },
+	{ name: "Ollama", apiUrl: "http://localhost:11434" },
+	{ name: "OpenRouter", apiUrl: "https://openrouter.ai/api/v1" },
+	{ name: "Z.AI", apiUrl: "https://api.z.ai/api/paas/v4" },
+	{ name: "MiniMax", apiUrl: "https://api.minimax.io/v1" },
+] as const;
+
 const Schema = z.object({
 	name: z.string().min(1, { message: "Name is required" }),
 	apiUrl: z.string().url({ message: "Please enter a valid URL" }),
@@ -103,7 +134,7 @@ export const HandleAi = ({ aiId }: Props) => {
 	const isOllama = apiUrl.includes(":11434") || apiUrl.includes("ollama");
 	const {
 		data: models,
-		isPending: isLoadingServerModels,
+		isFetching: isLoadingServerModels,
 		error: modelsError,
 	} = api.ai.getModels.useQuery(
 		{
@@ -172,6 +203,34 @@ export const HandleAi = ({ aiId }: Props) => {
 						<AlertBlock type="error">{modelsError.message}</AlertBlock>
 					)}
 					<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2">
+						<div className="space-y-1">
+							<FormLabel>Provider</FormLabel>
+							<Select
+								onValueChange={(value) => {
+									const provider = AI_PROVIDERS.find((p) => p.apiUrl === value);
+									if (provider) {
+										form.setValue("name", provider.name);
+										form.setValue("apiUrl", provider.apiUrl);
+										form.setValue("model", "");
+									}
+								}}
+							>
+								<SelectTrigger>
+									<SelectValue placeholder="Select a provider preset..." />
+								</SelectTrigger>
+								<SelectContent>
+									{AI_PROVIDERS.map((provider) => (
+										<SelectItem key={provider.apiUrl} value={provider.apiUrl}>
+											{provider.name}
+										</SelectItem>
+									))}
+								</SelectContent>
+							</Select>
+							<p className="text-[0.8rem] text-muted-foreground">
+								Quick-fill provider name and URL, or configure manually below
+							</p>
+						</div>
+
 						<FormField
 							control={form.control}
 							name="name"
@@ -253,101 +312,129 @@ export const HandleAi = ({ aiId }: Props) => {
 							</span>
 						)}
 
-						{!isLoadingServerModels && !models?.length && (
+						<FormField
-							<span className="text-sm text-muted-foreground">
+							control={form.control}
-								No models available
+							name="model"
-							</span>
+							render={({ field }) => {
-						)}
+								const hasModels =
+									!isLoadingServerModels && models && models.length > 0;
+								const selectedModel = models?.find((m) => m.id === field.value);
+								const filteredModels = (models ?? []).filter((model) =>
+									model.id.toLowerCase().includes(modelSearch.toLowerCase()),
+								);
 
-						{!isLoadingServerModels && models && models.length > 0 && (
+								const displayModels =
-							<FormField
+									field.value &&
-								control={form.control}
+									!filteredModels.find((m) => m.id === field.value) &&
-								name="model"
+									selectedModel
-								render={({ field }) => {
+										? [selectedModel, ...filteredModels]
-									const selectedModel = models.find(
+										: filteredModels;
-										(m) => m.id === field.value,
-									);
-									const filteredModels = models.filter((model) =>
-										model.id.toLowerCase().includes(modelSearch.toLowerCase()),
-									);
 
-									// Ensure selected model is always in the filtered list
+								return (
-									const displayModels =
+									<FormItem>
-										field.value &&
+										<FormLabel>Model</FormLabel>
-										!filteredModels.find((m) => m.id === field.value) &&
+										<div className="flex gap-2">
-										selectedModel
+											<div className="flex-1">
-											? [selectedModel, ...filteredModels]
+												{hasModels ? (
-											: filteredModels;
+													<Popover
-
+														open={modelPopoverOpen}
-									return (
+														onOpenChange={setModelPopoverOpen}
-										<FormItem>
+													>
-											<FormLabel>Model</FormLabel>
+														<PopoverTrigger asChild>
-											<Popover
+															<FormControl>
-												open={modelPopoverOpen}
+																<Button
-												onOpenChange={setModelPopoverOpen}
+																	variant="outline"
-											>
+																	className={cn(
-												<PopoverTrigger asChild>
+																		"w-full justify-between",
-													<FormControl>
+																		!field.value && "text-muted-foreground",
-														<Button
+																	)}
-															variant="outline"
+																>
-															className={cn(
+																	{field.value
-																"w-full justify-between",
+																		? (selectedModel?.id ?? field.value)
-																!field.value && "text-muted-foreground",
+																		: "Select a model"}
-															)}
+																	<ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+																</Button>
+															</FormControl>
+														</PopoverTrigger>
+														<PopoverContent
+															className="w-[400px] p-0"
+															align="start"
 														>
-															{field.value
+															<Command>
-																? (selectedModel?.id ?? field.value)
+																<CommandInput
-																: "Select a model"}
+																	placeholder="Search or type a custom model..."
-															<ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+																	value={modelSearch}
-														</Button>
+																	onValueChange={setModelSearch}
-													</FormControl>
+																/>
-												</PopoverTrigger>
+																<CommandList>
-												<PopoverContent className="w-[400px] p-0" align="start">
+																	<CommandEmpty>
-													<Command>
+																		{modelSearch ? (
-														<CommandInput
+																			<button
-															placeholder="Search models..."
+																				type="button"
-															value={modelSearch}
+																				className="w-full cursor-pointer px-2 py-1.5 text-left text-sm hover:bg-accent"
-															onValueChange={setModelSearch}
+																				onClick={() => {
+																					field.onChange(modelSearch);
+																					setModelPopoverOpen(false);
+																					setModelSearch("");
+																				}}
+																			>
+																				Use custom model: "{modelSearch}"
+																			</button>
+																		) : (
+																			"No models found."
+																		)}
+																	</CommandEmpty>
+																	{displayModels.map((model) => {
+																		const isSelected = field.value === model.id;
+																		return (
+																			<CommandItem
+																				key={model.id}
+																				value={model.id}
+																				onSelect={() => {
+																					field.onChange(model.id);
+																					setModelPopoverOpen(false);
+																					setModelSearch("");
+																				}}
+																			>
+																				<Check
+																					className={cn(
+																						"mr-2 h-4 w-4",
+																						isSelected
+																							? "opacity-100"
+																							: "opacity-0",
+																					)}
+																				/>
+																				{model.id}
+																			</CommandItem>
+																		);
+																	})}
+																</CommandList>
+															</Command>
+														</PopoverContent>
+													</Popover>
+												) : (
+													<FormControl>
+														<Input
+															placeholder={
+																isLoadingServerModels
+																	? "Loading models..."
+																	: "Enter model name (e.g. gpt-4o)"
+															}
+															disabled={isLoadingServerModels}
+															{...field}
 														/>
-														<CommandList>
+													</FormControl>
-															<CommandEmpty>No models found.</CommandEmpty>
+												)}
-															{displayModels.map((model) => {
+											</div>
-																const isSelected = field.value === model.id;
+										</div>
-																return (
+										<FormDescription>
-																	<CommandItem
+											Select a model from the list or type a custom model name
-																		key={model.id}
+										</FormDescription>
-																		value={model.id}
+										<FormMessage />
-																		onSelect={() => {
+									</FormItem>
-																			field.onChange(model.id);
+								);
-																			setModelPopoverOpen(false);
+							}}
-																			setModelSearch("");
+						/>
-																		}}
-																	>
-																		<Check
-																			className={cn(
-																				"mr-2 h-4 w-4",
-																				isSelected
-																					? "opacity-100"
-																					: "opacity-0",
-																			)}
-																		/>
-																		{model.id}
-																	</CommandItem>
-																);
-															})}
-														</CommandList>
-													</Command>
-												</PopoverContent>
-											</Popover>
-											<FormDescription>
-												Select an AI model to use
-											</FormDescription>
-											<FormMessage />
-										</FormItem>
-									);
-								}}
-							/>
-						)}
 
 						<FormField
 							control={form.control}
@@ -372,7 +459,12 @@ export const HandleAi = ({ aiId }: Props) => {
 							)}
 						/>
 
-						<div className="flex justify-end  gap-2 pt-4">
+						<div className="flex justify-end gap-2 pt-4">
+							<TestConnectionButton
+								apiUrl={apiUrl}
+								apiKey={apiKey}
+								model={form.watch("model")}
+							/>
 							<Button type="submit" isLoading={isPending}>
 								{aiId ? "Update" : "Create"}
 							</Button>
@@ -383,3 +475,42 @@ export const HandleAi = ({ aiId }: Props) => {
 		</Dialog>
 	);
 };
+
+function TestConnectionButton({
+	apiUrl,
+	apiKey,
+	model,
+}: {
+	apiUrl: string;
+	apiKey: string;
+	model: string;
+}) {
+	const { mutate, isPending } = api.ai.testConnection.useMutation({
+		onSuccess: () => {
+			toast.success("Connection successful");
+		},
+		onError: (error) => {
+			toast.error("Connection failed", {
+				description: error.message,
+			});
+		},
+	});
+
+	const isDisabled = !apiUrl || !model;
+
+	return (
+		<Button
+			type="button"
+			variant="outline"
+			disabled={isDisabled || isPending}
+			onClick={() => mutate({ apiUrl, apiKey, model })}
+		>
+			{isPending ? (
+				<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+			) : (
+				<Plug className="mr-2 h-4 w-4" />
+			)}
+			Test Connection
+		</Button>
+	);
+}

apps/dokploy/components/dashboard/settings/profile/enable-2fa.tsx

@@ -25,11 +25,7 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import {
+import { InputOTP } from "@/components/ui/input-otp";
-	InputOTP,
-	InputOTPGroup,
-	InputOTPSlot,
-} from "@/components/ui/input-otp";
 import {
 	Tooltip,
 	TooltipContent,
@@ -423,23 +419,14 @@ export const Enable2FA = () => {
 								)}
 							</div>
 
-							<div className="flex flex-col justify-center items-center">
+							<div className="flex flex-col gap-2">
 								<FormLabel>Verification Code</FormLabel>
 								<InputOTP
 									maxLength={6}
 									value={otpValue}
 									onChange={setOtpValue}
-									autoComplete="off"
+									autoFocus
-								>
+								/>
-									<InputOTPGroup>
-										<InputOTPSlot index={0} />
-										<InputOTPSlot index={1} />
-										<InputOTPSlot index={2} />
-										<InputOTPSlot index={3} />
-										<InputOTPSlot index={4} />
-										<InputOTPSlot index={5} />
-									</InputOTPGroup>
-								</InputOTP>
 								<FormDescription>
 									Enter the 6-digit code from your authenticator app
 								</FormDescription>

apps/dokploy/components/dashboard/settings/servers/actions/toggle-docker-cleanup.tsx

@@ -1,6 +1,13 @@
+import { HelpCircle } from "lucide-react";
 import { toast } from "sonner";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
 
 interface Props {
@@ -52,7 +59,36 @@ export const ToggleDockerCleanup = ({ serverId }: Props) => {
 	return (
 		<div className="flex items-center gap-4">
 			<Switch checked={!!enabled} onCheckedChange={handleToggle} />
-			<Label className="text-primary">Daily Docker Cleanup</Label>
+			<TooltipProvider delayDuration={0}>
+				<Tooltip>
+					<TooltipTrigger asChild>
+						<Label className="text-primary flex items-center gap-1.5 cursor-pointer">
+							Daily Docker Cleanup
+							<HelpCircle className="size-4 text-muted-foreground" />
+						</Label>
+					</TooltipTrigger>
+					<TooltipContent side="top" className="max-w-sm">
+						<p>
+							Runs a full Docker cleanup daily, pruning stopped containers,
+							unused images, volumes, build cache, and system resources. This
+							may remove images built for Compose services that run on-demand
+							(backup runners, cron jobs, one-off tasks).
+						</p>
+						<p className="mt-1">
+							For custom cleanup strategies, use{" "}
+							<a
+								href="https://docs.dokploy.com/docs/core/schedule-jobs#example-1-automatic-docker-cleanup"
+								target="_blank"
+								rel="noopener noreferrer"
+								className="underline text-primary"
+							>
+								Schedule Jobs
+							</a>{" "}
+							on your web server or remote servers.
+						</p>
+					</TooltipContent>
+				</Tooltip>
+			</TooltipProvider>
 		</div>
 	);
 };

apps/dokploy/components/dashboard/settings/servers/show-swarm-overview-modal.tsx

@@ -1,6 +1,9 @@
 import { useState } from "react";
+import { Card } from "@/components/ui/card";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { ShowSwarmContainers } from "../../swarm/containers/show-swarm-containers";
 import SwarmMonitorCard from "../../swarm/monitoring-card";
 
 interface Props {
@@ -21,9 +24,24 @@ export const ShowSwarmOverviewModal = ({ serverId }: Props) => {
 				</DropdownMenuItem>
 			</DialogTrigger>
 			<DialogContent className="sm:max-w-7xl  ">
-				<div className="grid w-full gap-1">
+				<Tabs defaultValue="overview">
-					<SwarmMonitorCard serverId={serverId} />
+					<TabsList>
-				</div>
+						<TabsTrigger value="overview">Overview</TabsTrigger>
+						<TabsTrigger value="containers">Containers</TabsTrigger>
+					</TabsList>
+					<TabsContent value="overview">
+						<div className="grid w-full gap-1">
+							<SwarmMonitorCard serverId={serverId} />
+						</div>
+					</TabsContent>
+					<TabsContent value="containers">
+						<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">
+								<ShowSwarmContainers serverId={serverId} />
+							</div>
+						</Card>
+					</TabsContent>
+				</Tabs>
 			</DialogContent>
 		</Dialog>
 	);

apps/dokploy/components/dashboard/settings/servers/welcome-stripe/welcome-subscription.tsx

@@ -55,7 +55,8 @@ export const WelcomeSubscription = () => {
 	const [showConfetti, setShowConfetti] = useState(false);
 	const stepper = useStepper();
 	const [isOpen, setIsOpen] = useState(true);
-	const { push } = useRouter();
+	const router = useRouter();
+	const { push } = router;
 
 	useEffect(() => {
 		const confettiShown = localStorage.getItem("hasShownConfetti");
@@ -66,7 +67,22 @@ export const WelcomeSubscription = () => {
 	}, [showConfetti]);
 
 	return (
-		<Dialog open={isOpen}>
+		<Dialog
+			open={isOpen}
+			onOpenChange={(open) => {
+				setIsOpen(open);
+				if (!open) {
+					const { success, ...rest } = router.query;
+					router.replace(
+						{ pathname: router.pathname, query: rest },
+						undefined,
+						{
+							shallow: true,
+						},
+					);
+				}
+			}}
+		>
 			<DialogContent className="sm:max-w-7xl min-h-[75vh]">
 				{showConfetti ?? "Flaso"}
 				<div className="flex justify-center items-center w-full">
@@ -409,7 +425,7 @@ export const WelcomeSubscription = () => {
 								onClick={() => {
 									if (stepper.isLast) {
 										setIsOpen(false);
-										push("/dashboard/projects");
+										push("/dashboard/home");
 									} else {
 										stepper.next();
 									}

apps/dokploy/components/dashboard/settings/users/add-invitation.tsx

@@ -34,14 +34,63 @@ import {
 } from "@/components/ui/select";
 import { api } from "@/utils/api";
 
-const addInvitation = z.object({
+const addInvitation = z
-	email: z
+	.object({
-		.string()
+		mode: z.enum(["invitation", "credentials"]),
-		.min(1, "Email is required")
+		email: z
-		.email({ message: "Invalid email" }),
+			.string()
-	role: z.string().min(1, "Role is required"),
+			.min(1, "Email is required")
-	notificationId: z.string().optional(),
+			.email({ message: "Invalid email" }),
-});
+		role: z.string().min(1, "Role is required"),
+		notificationId: z.string().optional(),
+		password: z.string().optional(),
+		confirmPassword: z.string().optional(),
+	})
+	.superRefine((value, ctx) => {
+		if (value.mode !== "credentials") {
+			return;
+		}
+
+		if (!value.password) {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				message: "Password is required",
+				path: ["password"],
+			});
+		} else if (value.password.length < 8) {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				message: "Password must be at least 8 characters",
+				path: ["password"],
+			});
+		}
+
+		if (!value.confirmPassword) {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				message: "Confirm password is required",
+				path: ["confirmPassword"],
+			});
+		} else if (value.confirmPassword.length < 8) {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				message: "Password must be at least 8 characters",
+				path: ["confirmPassword"],
+			});
+		}
+
+		if (
+			value.password &&
+			value.confirmPassword &&
+			value.password !== value.confirmPassword
+		) {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				message: "Passwords do not match",
+				path: ["confirmPassword"],
+			});
+		}
+	});
 
 type AddInvitation = z.infer<typeof addInvitation>;
 
@@ -54,50 +103,83 @@ export const AddInvitation = () => {
 	const { mutateAsync: inviteMember, isPending: isInviting } =
 		api.organization.inviteMember.useMutation();
 	const { mutateAsync: sendInvitation } = api.user.sendInvitation.useMutation();
+	const { mutateAsync: createUserWithCredentials, isPending: isCreating } =
+		api.user.createUserWithCredentials.useMutation();
 	const { data: customRoles } = api.customRole.all.useQuery();
 	const [error, setError] = useState<string | null>(null);
 
 	const form = useForm<AddInvitation>({
 		defaultValues: {
+			mode: "invitation",
 			email: "",
 			role: "member",
 			notificationId: "",
+			password: "",
+			confirmPassword: "",
 		},
 		resolver: zodResolver(addInvitation),
 	});
+
+	const mode = form.watch("mode");
+
 	useEffect(() => {
 		form.reset();
 	}, [form, form.formState.isSubmitSuccessful, form.reset]);
 
-	const onSubmit = async (data: AddInvitation) => {
+	useEffect(() => {
-		try {
+		if (isCloud && form.getValues("mode") === "credentials") {
-			const result = await inviteMember({
+			form.setValue("mode", "invitation");
-				email: data.email.toLowerCase(),
-				role: data.role,
-			});
-
-			if (!isCloud && data.notificationId) {
-				await sendInvitation({
-					invitationId: result!.id,
-					notificationId: data.notificationId || "",
-				})
-					.then(() => {
-						toast.success("Invitation created and email sent");
-					})
-					.catch((error: any) => {
-						toast.error(error.message);
-					});
-			} else {
-				toast.success("Invitation created");
-			}
-			setError(null);
-			setOpen(false);
-		} catch (error: any) {
-			setError(error.message || "Failed to create invitation");
 		}
+	}, [form, isCloud]);
 
-		utils.organization.allInvitations.invalidate();
+	const onSubmit = async (data: AddInvitation) => {
+		setError(null);
+
+		try {
+			if (data.mode === "credentials") {
+				await createUserWithCredentials({
+					email: data.email.toLowerCase(),
+					password: data.password!,
+					role: data.role,
+				});
+				toast.success("User created with initial credentials");
+				setOpen(false);
+			} else {
+				const result = await inviteMember({
+					email: data.email.toLowerCase(),
+					role: data.role,
+				});
+
+				if (!isCloud && data.notificationId) {
+					await sendInvitation({
+						invitationId: result!.id,
+						notificationId: data.notificationId || "",
+					})
+						.then(() => {
+							toast.success("Invitation created and email sent");
+						})
+						.catch((error: any) => {
+							toast.error(error.message);
+						});
+				} else {
+					toast.success("Invitation created");
+				}
+
+				setOpen(false);
+			}
+		} catch (error) {
+			const message =
+				error instanceof Error ? error.message : "Failed to create user";
+			setError(message);
+			toast.error(message);
+		} finally {
+			await Promise.all([
+				utils.organization.allInvitations.invalidate(),
+				utils.user.all.invalidate(),
+			]);
+		}
 	};
+
 	return (
 		<Dialog open={open} onOpenChange={setOpen}>
 			<DialogTrigger className="" asChild>
@@ -108,7 +190,11 @@ export const AddInvitation = () => {
 			<DialogContent className="sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle>Add Invitation</DialogTitle>
-					<DialogDescription>Invite a new user</DialogDescription>
+					<DialogDescription>
+						{mode === "credentials"
+							? "Create a user with initial credentials"
+							: "Invite a new user"}
+					</DialogDescription>
 				</DialogHeader>
 				{error && <AlertBlock type="error">{error}</AlertBlock>}
 
@@ -118,6 +204,43 @@ export const AddInvitation = () => {
 						onSubmit={form.handleSubmit(onSubmit)}
 						className="grid w-full gap-4 "
 					>
+						{!isCloud && (
+							<FormField
+								control={form.control}
+								name="mode"
+								render={({ field }) => {
+									return (
+										<FormItem>
+											<FormLabel>Invite Method</FormLabel>
+											<Select
+												onValueChange={field.onChange}
+												defaultValue={field.value}
+											>
+												<FormControl>
+													<SelectTrigger>
+														<SelectValue placeholder="Select invite method" />
+													</SelectTrigger>
+												</FormControl>
+												<SelectContent>
+													<SelectItem value="invitation">
+														Invitation Link
+													</SelectItem>
+													<SelectItem value="credentials">
+														Initial Credentials
+													</SelectItem>
+												</SelectContent>
+											</Select>
+											<FormDescription>
+												Choose between invitation link flow or direct
+												credentials provisioning
+											</FormDescription>
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
+						)}
+
 						<FormField
 							control={form.control}
 							name="email"
@@ -172,7 +295,7 @@ export const AddInvitation = () => {
 							}}
 						/>
 
-						{!isCloud && (
+						{!isCloud && mode === "invitation" && (
 							<FormField
 								control={form.control}
 								name="notificationId"
@@ -212,9 +335,57 @@ export const AddInvitation = () => {
 								}}
 							/>
 						)}
+
+						{!isCloud && mode === "credentials" && (
+							<>
+								<FormField
+									control={form.control}
+									name="password"
+									render={({ field }) => {
+										return (
+											<FormItem>
+												<FormLabel>Password</FormLabel>
+												<FormControl>
+													<Input
+														type="password"
+														placeholder="Enter initial password"
+														{...field}
+													/>
+												</FormControl>
+												<FormDescription>
+													The user can sign in with this password immediately
+												</FormDescription>
+												<FormMessage />
+											</FormItem>
+										);
+									}}
+								/>
+
+								<FormField
+									control={form.control}
+									name="confirmPassword"
+									render={({ field }) => {
+										return (
+											<FormItem>
+												<FormLabel>Confirm Password</FormLabel>
+												<FormControl>
+													<Input
+														type="password"
+														placeholder="Confirm initial password"
+														{...field}
+													/>
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										);
+									}}
+								/>
+							</>
+						)}
+
 						<DialogFooter className="flex w-full flex-row">
 							<Button
-								isLoading={isInviting}
+								isLoading={isInviting || isCreating}
 								form="hook-form-add-invitation"
 								type="submit"
 							>

apps/dokploy/components/dashboard/settings/users/add-permissions.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { EnterpriseFeatureLocked } from "@/components/proprietary/enterprise-feature-gate";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -26,7 +27,6 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { Switch } from "@/components/ui/switch";
-import { EnterpriseFeatureLocked } from "@/components/proprietary/enterprise-feature-gate";
 import { api, type RouterOutputs } from "@/utils/api";
 
 /** Shape returned by project.allForPermissions (admin only). Used for the permissions UI. */
@@ -172,6 +172,7 @@ const addPermissions = z.object({
 	accessedEnvironments: z.array(z.string()).optional(),
 	accessedServices: z.array(z.string()).optional(),
 	accessedGitProviders: z.array(z.string()).optional(),
+	accessedServers: z.array(z.string()).optional(),
 	canCreateProjects: z.boolean().optional().default(false),
 	canCreateServices: z.boolean().optional().default(false),
 	canDeleteProjects: z.boolean().optional().default(false),
@@ -208,6 +209,10 @@ export const AddUserPermissions = ({ userId, role }: Props) => {
 		},
 	);
 
+	const { data: servers } = api.server.allForPermissions.useQuery(undefined, {
+		enabled: isOpen && !!haveValidLicense,
+	});
+
 	const { data, refetch } = api.user.one.useQuery(
 		{
 			userId,
@@ -226,6 +231,7 @@ export const AddUserPermissions = ({ userId, role }: Props) => {
 			accessedEnvironments: [],
 			accessedServices: [],
 			accessedGitProviders: [],
+			accessedServers: [],
 			canDeleteEnvironments: false,
 			canCreateProjects: false,
 			canCreateServices: false,
@@ -248,6 +254,7 @@ export const AddUserPermissions = ({ userId, role }: Props) => {
 				accessedEnvironments: data.accessedEnvironments || [],
 				accessedServices: data.accessedServices || [],
 				accessedGitProviders: data.accessedGitProviders || [],
+				accessedServers: data.accessedServers || [],
 				canCreateProjects: data.canCreateProjects,
 				canCreateServices: data.canCreateServices,
 				canDeleteProjects: data.canDeleteProjects,
@@ -276,6 +283,7 @@ export const AddUserPermissions = ({ userId, role }: Props) => {
 			accessedEnvironments: data.accessedEnvironments || [],
 			accessedServices: data.accessedServices || [],
 			accessedGitProviders: data.accessedGitProviders || [],
+			accessedServers: data.accessedServers || [],
 			canAccessToDocker: data.canAccessToDocker,
 			canAccessToAPI: data.canAccessToAPI,
 			canAccessToSSHKeys: data.canAccessToSSHKeys,
@@ -956,6 +964,79 @@ export const AddUserPermissions = ({ userId, role }: Props) => {
 								/>
 							</div>
 						)}
+						{haveValidLicense ? (
+							<FormField
+								control={form.control}
+								name="accessedServers"
+								render={() => (
+									<FormItem className="md:col-span-2">
+										<div className="mb-4">
+											<FormLabel className="text-base">Servers</FormLabel>
+											<FormDescription>
+												Select the Servers that the user can access
+											</FormDescription>
+										</div>
+										{servers?.length === 0 && (
+											<p className="text-sm text-muted-foreground">
+												No servers found
+											</p>
+										)}
+										<div className="grid md:grid-cols-1 gap-2">
+											{servers?.map((s) => (
+												<FormField
+													key={s.serverId}
+													control={form.control}
+													name="accessedServers"
+													render={({ field }) => (
+														<FormItem className="flex flex-row items-center space-x-3 space-y-0 rounded-lg border p-3">
+															<FormControl>
+																<Checkbox
+																	checked={field.value?.includes(s.serverId)}
+																	onCheckedChange={(checked) => {
+																		if (checked) {
+																			field.onChange([
+																				...(field.value || []),
+																				s.serverId,
+																			]);
+																		} else {
+																			field.onChange(
+																				field.value?.filter(
+																					(v) => v !== s.serverId,
+																				),
+																			);
+																		}
+																	}}
+																/>
+															</FormControl>
+															<div className="flex items-center gap-2">
+																<FormLabel className="text-sm cursor-pointer">
+																	{s.name}
+																</FormLabel>
+																<span className="text-xs text-muted-foreground">
+																	({s.ipAddress})
+																</span>
+																<span className="text-xs text-muted-foreground capitalize">
+																	{s.serverType}
+																</span>
+															</div>
+														</FormItem>
+													)}
+												/>
+											))}
+										</div>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						) : (
+							<div className="md:col-span-2">
+								<EnterpriseFeatureLocked
+									compact
+									title="Server Assignment"
+									description="Assign specific Servers to users with an Enterprise license."
+								/>
+							</div>
+						)}
 						<DialogFooter className="flex w-full flex-row justify-end md:col-span-2">
 							<Button
 								isLoading={isPending}

apps/dokploy/components/dashboard/settings/web-domain.tsx

@@ -141,14 +141,14 @@ export const WebDomain = () => {
 						<Form {...form}>
 							<form
 								onSubmit={form.handleSubmit(onSubmit)}
-								className="grid w-full gap-4 md:grid-cols-2"
+								className="grid w-full gap-4 grid-cols-2"
 							>
 								<FormField
 									control={form.control}
 									name="domain"
 									render={({ field }) => {
 										return (
-											<FormItem>
+											<FormItem className="col-span-2 md:col-span-1">
 												<FormLabel>Domain</FormLabel>
 												<FormControl>
 													<Input
@@ -168,7 +168,7 @@ export const WebDomain = () => {
 									name="letsEncryptEmail"
 									render={({ field }) => {
 										return (
-											<FormItem>
+											<FormItem className="col-span-2 md:col-span-1">
 												<FormLabel>Let's Encrypt Email</FormLabel>
 												<FormControl>
 													<Input
@@ -209,7 +209,7 @@ export const WebDomain = () => {
 										name="certificateType"
 										render={({ field }) => {
 											return (
-												<FormItem className="md:col-span-2">
+												<FormItem className="col-span-2">
 													<FormLabel>Certificate Provider</FormLabel>
 													<Select
 														onValueChange={field.onChange}

apps/dokploy/components/dashboard/settings/web-server.tsx

@@ -1,4 +1,4 @@
-import { ServerIcon } from "lucide-react";
+import { CopyIcon, ServerIcon } from "lucide-react";
 import {
 	Card,
 	CardContent,
@@ -7,6 +7,8 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
+import copy from "copy-to-clipboard";
+import { toast } from "sonner";
 import { ShowDokployActions } from "./servers/actions/show-dokploy-actions";
 import { ShowStorageActions } from "./servers/actions/show-storage-actions";
 import { ShowTraefikActions } from "./servers/actions/show-traefik-actions";
@@ -49,8 +51,17 @@ export const WebServer = () => {
 						</div>
 
 						<div className="flex items-center flex-wrap justify-between gap-4">
-							<span className="text-sm text-muted-foreground">
+							<span className="text-sm text-muted-foreground flex items-center gap-1.5">
 								Server IP: {webServerSettings?.serverIp}
+								{webServerSettings?.serverIp && (
+									<CopyIcon
+										className="size-3.5 cursor-pointer hover:text-foreground transition-colors"
+										onClick={() => {
+											copy(webServerSettings.serverIp ?? "");
+											toast.success("Copied to clipboard");
+										}}
+									/>
+								)}
 							</span>
 							<span className="text-sm text-muted-foreground">
 								Version: {dokployVersion}

apps/dokploy/components/dashboard/settings/web-server/edit-traefik-env.tsx

@@ -87,7 +87,12 @@ export const EditTraefikEnv = ({ children, serverId }: Props) => {
 	// Add keyboard shortcut for Ctrl+S/Cmd+S
 	useEffect(() => {
 		const handleKeyDown = (e: KeyboardEvent) => {
-			if ((e.ctrlKey || e.metaKey) && e.key === "s" && !isPending && !canEdit) {
+			if (
+				(e.ctrlKey || e.metaKey) &&
+				e.code === "KeyS" &&
+				!isPending &&
+				!canEdit
+			) {
 				e.preventDefault();
 				form.handleSubmit(onSubmit)();
 			}

apps/dokploy/components/dashboard/swarm/containers/container-row.tsx

@@ -0,0 +1,98 @@
+import { AlertCircle, HardDrive, Network } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { TableCell, TableRow } from "@/components/ui/table";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import type { ContainerInfo, ContainerStat } from "./types";
+import { formatCpu, formatIOValue, formatMemUsage } from "./utils";
+
+interface ContainerRowProps {
+	container: ContainerInfo;
+	stat: ContainerStat | undefined;
+}
+
+export const ContainerRow = ({ container, stat }: ContainerRowProps) => {
+	const isRunning = container.CurrentState.startsWith("Running");
+	const hasError = container.Error && container.Error.trim() !== "";
+
+	const stateBadge = (
+		<Badge
+			variant={hasError ? "destructive" : isRunning ? "default" : "destructive"}
+		>
+			{container.CurrentState}
+		</Badge>
+	);
+
+	return (
+		<TableRow>
+			<TableCell>
+				<div className="flex flex-col gap-1">
+					<span className="font-medium text-sm">{container.Name}</span>
+					<span className="text-xs text-muted-foreground truncate max-w-[230px]">
+						{container.Image}
+					</span>
+				</div>
+			</TableCell>
+			<TableCell>
+				{hasError ? (
+					<TooltipProvider>
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<span className="inline-flex items-center gap-1.5 cursor-help">
+									{stateBadge}
+									<AlertCircle className="h-3.5 w-3.5 text-destructive" />
+								</span>
+							</TooltipTrigger>
+							<TooltipContent side="top" className="max-w-xs">
+								<p className="text-xs font-medium">Error:</p>
+								<p className="text-xs">{container.Error}</p>
+							</TooltipContent>
+						</Tooltip>
+					</TooltipProvider>
+				) : (
+					stateBadge
+				)}
+			</TableCell>
+			<TableCell className="text-right">
+				{stat ? (
+					<span className="text-sm font-medium">{formatCpu(stat.CPUPerc)}</span>
+				) : (
+					<span className="text-xs text-muted-foreground">--</span>
+				)}
+			</TableCell>
+			<TableCell className="text-right">
+				{stat ? (
+					<span className="text-sm font-medium">
+						{formatMemUsage(stat.MemUsage)}
+					</span>
+				) : (
+					<span className="text-xs text-muted-foreground">--</span>
+				)}
+			</TableCell>
+			<TableCell className="text-right">
+				{stat ? (
+					<div className="flex items-center justify-end gap-1.5">
+						<HardDrive className="h-3 w-3 text-muted-foreground" />
+						<span className="text-sm">{formatIOValue(stat.BlockIO)}</span>
+					</div>
+				) : (
+					<span className="text-xs text-muted-foreground">--</span>
+				)}
+			</TableCell>
+			<TableCell className="text-right">
+				{stat ? (
+					<div className="flex items-center justify-end gap-1.5">
+						<Network className="h-3 w-3 text-muted-foreground" />
+						<span className="text-sm">{formatIOValue(stat.NetIO)}</span>
+					</div>
+				) : (
+					<span className="text-xs text-muted-foreground">--</span>
+				)}
+			</TableCell>
+		</TableRow>
+	);
+};

apps/dokploy/components/dashboard/swarm/containers/empty-states.tsx

@@ -0,0 +1,277 @@
+import {
+	AlertCircle,
+	AlertTriangle,
+	ExternalLink,
+	Info,
+	RefreshCw,
+} from "lucide-react";
+import Link from "next/link";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import type { ContainerInfo } from "./types";
+
+export const DocLinks = () => (
+	<div className="flex flex-col gap-1 pt-2 border-t mt-2">
+		<p className="text-xs font-medium text-muted-foreground">
+			Helpful resources:
+		</p>
+		<div className="flex flex-wrap gap-x-4 gap-y-1">
+			<a
+				href="https://docs.dokploy.com/docs/core"
+				target="_blank"
+				rel="noopener noreferrer"
+				className="text-xs text-primary underline underline-offset-4 inline-flex items-center gap-1"
+			>
+				Dokploy Documentation
+				<ExternalLink className="h-3 w-3" />
+			</a>
+			<a
+				href="https://docs.docker.com/engine/swarm/"
+				target="_blank"
+				rel="noopener noreferrer"
+				className="text-xs text-primary underline underline-offset-4 inline-flex items-center gap-1"
+			>
+				Docker Swarm Guide
+				<ExternalLink className="h-3 w-3" />
+			</a>
+			<Link
+				href="/dashboard/settings/cluster"
+				className="text-xs text-primary underline underline-offset-4 inline-flex items-center gap-1"
+			>
+				Cluster Settings
+			</Link>
+		</div>
+	</div>
+);
+
+interface SwarmNotAvailableProps {
+	errorMessage?: string;
+	onRetry: () => void;
+}
+
+export const SwarmNotAvailable = ({
+	errorMessage,
+	onRetry,
+}: SwarmNotAvailableProps) => (
+	<div className="flex flex-col gap-4 py-6 max-w-2xl mx-auto">
+		<Alert variant="destructive">
+			<AlertTriangle className="h-4 w-4" />
+			<AlertTitle>Swarm Not Available</AlertTitle>
+			<AlertDescription>
+				Could not reach Docker Swarm.{" "}
+				{errorMessage && (
+					<span className="block mt-1 text-xs opacity-80">{errorMessage}</span>
+				)}
+			</AlertDescription>
+		</Alert>
+		<div className="space-y-3 text-sm text-muted-foreground">
+			<p>
+				This feature requires Docker Swarm to be initialized and active. To get
+				started:
+			</p>
+			<ol className="list-decimal list-inside space-y-2 ml-1">
+				<li>
+					Initialize Swarm on your server:{" "}
+					<code className="bg-muted px-1.5 py-0.5 rounded text-xs">
+						docker swarm init
+					</code>
+				</li>
+				<li>
+					Verify it&apos;s active:{" "}
+					<code className="bg-muted px-1.5 py-0.5 rounded text-xs">
+						docker info | grep Swarm
+					</code>
+				</li>
+				<li>
+					Check the{" "}
+					<Link
+						href="/dashboard/settings/cluster"
+						className="text-primary underline underline-offset-4"
+					>
+						Cluster Settings
+					</Link>{" "}
+					page to manage your swarm nodes
+				</li>
+			</ol>
+			<DocLinks />
+		</div>
+		<Button variant="outline" size="sm" className="w-fit" onClick={onRetry}>
+			<RefreshCw className="h-4 w-4 mr-2" />
+			Retry
+		</Button>
+	</div>
+);
+
+interface ServicesErrorProps {
+	errorMessage?: string;
+	onRetry: () => void;
+}
+
+export const ServicesError = ({
+	errorMessage,
+	onRetry,
+}: ServicesErrorProps) => (
+	<div className="flex flex-col gap-4 py-6 max-w-2xl mx-auto">
+		<Alert variant="destructive">
+			<AlertTriangle className="h-4 w-4" />
+			<AlertTitle>Failed to Load Services</AlertTitle>
+			<AlertDescription>
+				Swarm is reachable but service listing failed.{" "}
+				{errorMessage && (
+					<span className="block mt-1 text-xs opacity-80">{errorMessage}</span>
+				)}
+			</AlertDescription>
+		</Alert>
+		<div className="space-y-3 text-sm text-muted-foreground">
+			<p>This could be caused by:</p>
+			<ul className="list-disc list-inside space-y-1 ml-1">
+				<li>Permission issues running Docker commands on the server</li>
+				<li>Docker daemon not responding</li>
+				<li>
+					Network connectivity issues to a remote server &mdash; check{" "}
+					<Link
+						href="/dashboard/settings/cluster"
+						className="text-primary underline underline-offset-4"
+					>
+						Cluster Settings
+					</Link>
+				</li>
+			</ul>
+		</div>
+		<Button variant="outline" size="sm" className="w-fit" onClick={onRetry}>
+			<RefreshCw className="h-4 w-4 mr-2" />
+			Retry
+		</Button>
+	</div>
+);
+
+interface NoServicesProps {
+	nodeCount: number;
+	onRefresh: () => void;
+}
+
+export const NoServices = ({ nodeCount, onRefresh }: NoServicesProps) => (
+	<div className="flex flex-col gap-4 py-6 max-w-2xl mx-auto">
+		<Alert>
+			<Info className="h-4 w-4" />
+			<AlertTitle>No Swarm Services Found</AlertTitle>
+			<AlertDescription>
+				Docker Swarm is active with <strong>{nodeCount} node(s)</strong>, but
+				there are no application services running in the swarm.
+			</AlertDescription>
+		</Alert>
+		<div className="space-y-3 text-sm text-muted-foreground">
+			<p>
+				This view shows containers deployed as <strong>Swarm services</strong>.
+				Standalone or Docker Compose containers won&apos;t appear here.
+			</p>
+			<p>To see containers in this view, make sure your applications are:</p>
+			<ol className="list-decimal list-inside space-y-2 ml-1">
+				<li>
+					<strong>Deployed as Swarm services</strong> &mdash; Applications in
+					Dokploy deploy to Swarm by default. Docker Compose projects need to
+					use{" "}
+					<code className="bg-muted px-1.5 py-0.5 rounded text-xs">Stack</code>{" "}
+					type (not{" "}
+					<code className="bg-muted px-1.5 py-0.5 rounded text-xs">
+						Docker Compose
+					</code>
+					) to run as Swarm services.
+				</li>
+				<li>
+					<strong>Using a registry</strong> (for multi-node setups) &mdash;
+					Worker nodes need to pull images from a shared registry. Configure one
+					in{" "}
+					<Link
+						href="/dashboard/settings/cluster"
+						className="text-primary underline underline-offset-4"
+					>
+						Cluster Settings
+					</Link>
+					.
+				</li>
+				<li>
+					<strong>Successfully built and deployed</strong> &mdash; Check your
+					project&apos;s deployment logs for errors.
+				</li>
+			</ol>
+			<DocLinks />
+		</div>
+		<Button variant="outline" size="sm" className="w-fit" onClick={onRefresh}>
+			<RefreshCw className="h-4 w-4 mr-2" />
+			Refresh
+		</Button>
+	</div>
+);
+
+interface NoRunningContainersProps {
+	serviceCount: number;
+	containers: ContainerInfo[];
+	onRefresh: () => void;
+}
+
+export const NoRunningContainers = ({
+	serviceCount,
+	containers,
+	onRefresh,
+}: NoRunningContainersProps) => {
+	const hasErrors = containers.some((c) => c.Error && c.Error.trim() !== "");
+	return (
+		<div className="flex flex-col gap-4 py-6 max-w-2xl mx-auto">
+			<Alert>
+				<AlertTriangle className="h-4 w-4" />
+				<AlertTitle>No Running Containers</AlertTitle>
+				<AlertDescription>
+					Found <strong>{serviceCount} service(s)</strong> in the swarm, but
+					none have running containers.
+				</AlertDescription>
+			</Alert>
+			{hasErrors && (
+				<Alert variant="destructive">
+					<AlertCircle className="h-4 w-4" />
+					<AlertTitle>Container Errors Detected</AlertTitle>
+					<AlertDescription>
+						<ul className="list-disc list-inside space-y-1 mt-1">
+							{containers
+								.filter((c) => c.Error && c.Error.trim() !== "")
+								.slice(0, 5)
+								.map((c) => (
+									<li key={c.ID} className="text-xs">
+										<strong>{c.Name}</strong>: {c.Error}
+									</li>
+								))}
+						</ul>
+					</AlertDescription>
+				</Alert>
+			)}
+			<div className="space-y-3 text-sm text-muted-foreground">
+				<p>This can happen when:</p>
+				<ul className="list-disc list-inside space-y-2 ml-1">
+					<li>Services are scaled to 0 replicas</li>
+					<li>
+						Containers are failing to start &mdash; check deployment logs for
+						errors
+					</li>
+					<li>
+						Images can&apos;t be pulled on worker nodes &mdash; verify your{" "}
+						<Link
+							href="/dashboard/settings/cluster"
+							className="text-primary underline underline-offset-4"
+						>
+							registry configuration
+						</Link>
+					</li>
+					<li>
+						Node constraints prevent scheduling &mdash; check placement rules in
+						your app&apos;s Cluster settings
+					</li>
+				</ul>
+				<DocLinks />
+			</div>
+			<Button variant="outline" size="sm" className="w-fit" onClick={onRefresh}>
+				<RefreshCw className="h-4 w-4 mr-2" />
+				Refresh
+			</Button>
+		</div>
+	);
+};

apps/dokploy/components/dashboard/swarm/containers/node-section.tsx

@@ -0,0 +1,128 @@
+import { ChevronDown, ChevronRight, Server } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+	Table,
+	TableBody,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import { ContainerRow } from "./container-row";
+import type { ContainerStat, NodeGroup } from "./types";
+
+interface NodeSectionProps {
+	group: NodeGroup;
+	isExpanded: boolean;
+	onToggleNode: (nodeName: string) => void;
+	findStatsForContainer: (taskName: string) => ContainerStat | undefined;
+}
+
+export const NodeSection = ({
+	group,
+	isExpanded,
+	onToggleNode,
+	findStatsForContainer,
+}: NodeSectionProps) => {
+	const runningCount = group.containers.filter((c) =>
+		c.CurrentState.startsWith("Running"),
+	).length;
+
+	const nodeDown =
+		group.nodeStatus &&
+		(group.nodeStatus.Status !== "Ready" ||
+			group.nodeStatus.Availability !== "Active");
+
+	return (
+		<Collapsible
+			open={isExpanded}
+			onOpenChange={() => onToggleNode(group.nodeName)}
+		>
+			<Card className="bg-background">
+				<CollapsibleTrigger asChild>
+					<CardHeader className="cursor-pointer hover:bg-muted/50 transition-colors rounded-t-lg">
+						<div className="flex items-center justify-between">
+							<div className="flex items-center gap-3">
+								{isExpanded ? (
+									<ChevronDown className="h-4 w-4 text-muted-foreground" />
+								) : (
+									<ChevronRight className="h-4 w-4 text-muted-foreground" />
+								)}
+								<div className="relative">
+									<Server className="h-5 w-5 text-muted-foreground" />
+									{nodeDown && (
+										<span className="absolute -top-1 -right-1 h-2.5 w-2.5 rounded-full bg-destructive" />
+									)}
+								</div>
+								<CardTitle className="text-base">{group.nodeName}</CardTitle>
+								{group.nodeStatus && (
+									<Badge
+										variant={
+											group.nodeStatus.ManagerStatus === "Leader"
+												? "default"
+												: group.nodeStatus.ManagerStatus === "Reachable"
+													? "secondary"
+													: "outline"
+										}
+										className="text-[10px]"
+									>
+										{group.nodeStatus.ManagerStatus || "Worker"}
+									</Badge>
+								)}
+								<Badge variant="secondary">
+									{group.containers.length} container
+									{group.containers.length !== 1 ? "s" : ""}
+								</Badge>
+								{nodeDown ? (
+									<Badge variant="destructive">
+										{group.nodeStatus?.Status} /{" "}
+										{group.nodeStatus?.Availability}
+									</Badge>
+								) : runningCount === group.containers.length ? (
+									<Badge variant="default">All Running</Badge>
+								) : (
+									<Badge variant="orange">
+										{runningCount}/{group.containers.length} Running
+									</Badge>
+								)}
+							</div>
+						</div>
+					</CardHeader>
+				</CollapsibleTrigger>
+				<CollapsibleContent>
+					<CardContent className="pt-0">
+						<Table>
+							<TableHeader>
+								<TableRow>
+									<TableHead className="w-[250px]">Container</TableHead>
+									<TableHead>State</TableHead>
+									<TableHead className="text-right">CPU</TableHead>
+									<TableHead className="text-right">Memory</TableHead>
+									<TableHead className="text-right">Block I/O</TableHead>
+									<TableHead className="text-right">Network I/O</TableHead>
+								</TableRow>
+							</TableHeader>
+							<TableBody>
+								{group.containers.map((container) => {
+									const stat = findStatsForContainer(container.Name);
+									return (
+										<ContainerRow
+											key={container.ID}
+											container={container}
+											stat={stat}
+										/>
+									);
+								})}
+							</TableBody>
+						</Table>
+					</CardContent>
+				</CollapsibleContent>
+			</Card>
+		</Collapsible>
+	);
+};

apps/dokploy/components/dashboard/swarm/containers/show-swarm-containers.tsx

@@ -0,0 +1,371 @@
+import {
+	AlertTriangle,
+	Container,
+	Info,
+	Loader2,
+	RefreshCw,
+} from "lucide-react";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { CardTitle } from "@/components/ui/card";
+import { api } from "@/utils/api";
+import {
+	NoRunningContainers,
+	NoServices,
+	ServicesError,
+	SwarmNotAvailable,
+} from "./empty-states";
+import { NodeSection } from "./node-section";
+import { SummaryCards } from "./summary-cards";
+import type { ContainerInfo, ContainerStat, SwarmNode } from "./types";
+
+interface Props {
+	serverId?: string;
+}
+
+export const ShowSwarmContainers = ({ serverId }: Props) => {
+	const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
+
+	const {
+		data: nodes,
+		isLoading: nodesLoading,
+		isError: nodesError,
+		error: nodesErrorDetail,
+		refetch: refetchNodes,
+	} = api.swarm.getNodes.useQuery({ serverId });
+
+	const {
+		data: nodeApps,
+		isLoading: appsLoading,
+		isError: appsError,
+		error: appsErrorDetail,
+		refetch: refetchApps,
+	} = api.swarm.getNodeApps.useQuery(
+		{ serverId },
+		{ enabled: !nodesError && nodes !== undefined },
+	);
+
+	const applicationList =
+		nodeApps && nodeApps.length > 0
+			? nodeApps.map((app: { Name: string }) => app.Name)
+			: [];
+
+	const {
+		data: appDetails,
+		isLoading: detailsLoading,
+		refetch: refetchDetails,
+	} = api.swarm.getAppInfos.useQuery(
+		{ appName: applicationList, serverId },
+		{ enabled: applicationList.length > 0 },
+	);
+
+	const { data: stats, isLoading: statsLoading } =
+		api.swarm.getContainerStats.useQuery(
+			{ serverId },
+			{
+				refetchInterval: 5000,
+				enabled: applicationList.length > 0 && !nodesError && !appsError,
+			},
+		);
+
+	const isLoading =
+		nodesLoading ||
+		appsLoading ||
+		(applicationList.length > 0 && detailsLoading);
+
+	// Build container list
+	const containers: ContainerInfo[] = [];
+	if (nodeApps && appDetails) {
+		for (const app of nodeApps) {
+			const details =
+				appDetails?.filter((detail: { Name: string }) =>
+					detail.Name.startsWith(`${app.Name}.`),
+				) || [];
+
+			if (details.length === 0) {
+				containers.push({
+					...app,
+					CurrentState: "N/A",
+					DesiredState: "N/A",
+					Error: "",
+					Node: "N/A",
+					ID: app.ID,
+				});
+			} else {
+				for (const detail of details) {
+					containers.push({
+						Name: detail.Name,
+						Image: detail.Image || app.Image,
+						CurrentState: detail.CurrentState,
+						DesiredState: detail.DesiredState,
+						Error: detail.Error,
+						Node: detail.Node,
+						Ports: detail.Ports || app.Ports,
+						ID: detail.ID,
+					});
+				}
+			}
+		}
+	}
+
+	const runningContainers = containers.filter(
+		(c) =>
+			c.Node !== "N/A" &&
+			(c.DesiredState === "Running" || c.CurrentState.startsWith("Running")),
+	);
+
+	const unscheduledServices = containers.filter((c) => c.Node === "N/A");
+
+	const downNodes = (nodes ?? []).filter(
+		(n: SwarmNode) => n.Status !== "Ready" || n.Availability !== "Active",
+	);
+
+	const isMultiNode = (nodes?.length ?? 0) > 1;
+
+	const nodeStatusMap = new Map<string, SwarmNode>();
+	if (nodes) {
+		for (const node of nodes) {
+			nodeStatusMap.set(node.Hostname, node);
+		}
+	}
+
+	const statsMap = new Map<string, ContainerStat>();
+	if (stats) {
+		for (const stat of stats) {
+			statsMap.set(stat.Name, stat);
+		}
+	}
+
+	const findStatsForContainer = (
+		taskName: string,
+	): ContainerStat | undefined => {
+		for (const [containerName, stat] of statsMap) {
+			if (containerName.startsWith(`${taskName}.`)) {
+				return stat;
+			}
+		}
+		return undefined;
+	};
+
+	useEffect(() => {
+		if (runningContainers.length > 0 && expandedNodes.size === 0) {
+			const nodeNames = new Set<string>();
+			for (const c of runningContainers) {
+				if (c.Node) {
+					nodeNames.add(c.Node);
+				}
+			}
+			setExpandedNodes(nodeNames);
+		}
+	}, [runningContainers.length]);
+
+	const toggleNode = (nodeName: string) => {
+		setExpandedNodes((prev: Set<string>) => {
+			const next = new Set(prev);
+			if (next.has(nodeName)) {
+				next.delete(nodeName);
+			} else {
+				next.add(nodeName);
+			}
+			return next;
+		});
+	};
+
+	const handleRefresh = () => {
+		refetchApps();
+		refetchDetails();
+	};
+
+	// Build node groups
+	const nodeMap = new Map<string, ContainerInfo[]>();
+	for (const c of runningContainers) {
+		const nodeName = c.Node || "Unknown";
+		if (!nodeMap.has(nodeName)) {
+			nodeMap.set(nodeName, []);
+		}
+		nodeMap.get(nodeName)!.push(c);
+	}
+
+	const nodeGroups = [];
+	for (const [nodeName, nodeContainers] of nodeMap) {
+		nodeGroups.push({
+			nodeName,
+			containers: nodeContainers,
+			nodeStatus: nodeStatusMap.get(nodeName),
+		});
+	}
+	nodeGroups.sort((a, b) => a.nodeName.localeCompare(b.nodeName));
+
+	if (isLoading) {
+		return (
+			<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[40vh]">
+				<span>Loading containers...</span>
+				<Loader2 className="animate-spin size-4" />
+			</div>
+		);
+	}
+
+	if (nodesError) {
+		return (
+			<SwarmNotAvailable
+				errorMessage={nodesErrorDetail?.message}
+				onRetry={() => refetchNodes()}
+			/>
+		);
+	}
+
+	if (!nodesError && nodes === undefined) {
+		return (
+			<SwarmNotAvailable
+				errorMessage="Docker Swarm may not be initialized — docker node ls returned no data."
+				onRetry={() => refetchNodes()}
+			/>
+		);
+	}
+
+	const isRealAppsError =
+		appsError && !appsErrorDetail?.message?.includes("data is undefined");
+	if (isRealAppsError) {
+		return (
+			<ServicesError
+				errorMessage={appsErrorDetail?.message}
+				onRetry={() => refetchApps()}
+			/>
+		);
+	}
+
+	if (!nodeApps || nodeApps.length === 0) {
+		return (
+			<NoServices
+				nodeCount={nodes?.length ?? 0}
+				onRefresh={() => refetchApps()}
+			/>
+		);
+	}
+
+	if (runningContainers.length === 0) {
+		return (
+			<NoRunningContainers
+				serviceCount={nodeApps.length}
+				containers={containers}
+				onRefresh={handleRefresh}
+			/>
+		);
+	}
+
+	return (
+		<div className="flex flex-col gap-4">
+			<header className="flex items-center flex-wrap gap-4 justify-between">
+				<div className="space-y-1">
+					<CardTitle className="text-xl flex flex-row gap-2">
+						<Container className="size-6 text-muted-foreground self-center" />
+						Container Breakdown by Node
+					</CardTitle>
+					<p className="text-sm text-muted-foreground">
+						Showing containers across {nodes?.length ?? 0} swarm node(s)
+						{statsLoading ? "" : " (metrics refresh every 5s)"}
+					</p>
+				</div>
+				<Button variant="outline" size="sm" onClick={handleRefresh}>
+					<RefreshCw className="h-4 w-4 mr-2" />
+					Refresh
+				</Button>
+			</header>
+
+			<SummaryCards
+				nodeCount={nodes?.length ?? 0}
+				downNodeCount={downNodes.length}
+				serviceCount={nodeApps?.length ?? 0}
+				unscheduledCount={unscheduledServices.length}
+				runningContainerCount={runningContainers.length}
+			/>
+
+			{downNodes.length > 0 && (
+				<Alert variant="destructive">
+					<AlertTriangle className="h-4 w-4" />
+					<AlertTitle>{downNodes.length} Node(s) Unavailable</AlertTitle>
+					<AlertDescription>
+						<p className="mb-2">
+							The following nodes are not ready or have been drained. Containers
+							scheduled on these nodes may not be running.
+						</p>
+						<ul className="list-disc list-inside space-y-1 text-xs">
+							{downNodes.map((node: SwarmNode) => (
+								<li key={node.ID}>
+									<strong>{node.Hostname}</strong> &mdash; Status: {node.Status}
+									, Availability: {node.Availability}
+									{node.ManagerStatus && ` (${node.ManagerStatus})`}
+								</li>
+							))}
+						</ul>
+						<p className="mt-2 text-xs">
+							Manage nodes in{" "}
+							<Link
+								href="/dashboard/settings/cluster"
+								className="underline underline-offset-4"
+							>
+								Cluster Settings
+							</Link>
+						</p>
+					</AlertDescription>
+				</Alert>
+			)}
+
+			{isMultiNode && (
+				<Alert>
+					<Info className="h-4 w-4" />
+					<AlertTitle>Multi-Node Metrics Note</AlertTitle>
+					<AlertDescription>
+						CPU, memory, and I/O metrics are collected from the manager node via{" "}
+						<code className="bg-muted px-1 py-0.5 rounded text-xs">
+							docker stats
+						</code>
+						. Containers running on worker nodes will show &ldquo;--&rdquo; for
+						metrics.
+					</AlertDescription>
+				</Alert>
+			)}
+
+			<div className="flex flex-col gap-4">
+				{nodeGroups.map((group) => (
+					<NodeSection
+						key={group.nodeName}
+						group={group}
+						isExpanded={expandedNodes.has(group.nodeName)}
+						onToggleNode={toggleNode}
+						findStatsForContainer={findStatsForContainer}
+					/>
+				))}
+			</div>
+
+			{unscheduledServices.length > 0 && (
+				<Alert>
+					<Info className="h-4 w-4" />
+					<AlertTitle>
+						{unscheduledServices.length} Service(s) With No Running Tasks
+					</AlertTitle>
+					<AlertDescription>
+						<p className="mb-2">
+							These services exist in the swarm but have no running containers.
+							They may be scaled to 0 replicas or failing to start.
+						</p>
+						<ul className="list-disc list-inside space-y-1 text-xs">
+							{unscheduledServices.map((svc) => (
+								<li key={svc.ID}>
+									<strong>{svc.Name}</strong>
+									{svc.Error && svc.Error.trim() !== "" && (
+										<span className="text-destructive ml-1">
+											&mdash; {svc.Error}
+										</span>
+									)}
+								</li>
+							))}
+						</ul>
+					</AlertDescription>
+				</Alert>
+			)}
+		</div>
+	);
+};

apps/dokploy/components/dashboard/swarm/containers/summary-cards.tsx

@@ -0,0 +1,68 @@
+import { Container, Cpu, Server } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+interface SummaryCardsProps {
+	nodeCount: number;
+	downNodeCount: number;
+	serviceCount: number;
+	unscheduledCount: number;
+	runningContainerCount: number;
+}
+
+export const SummaryCards = ({
+	nodeCount,
+	downNodeCount,
+	serviceCount,
+	unscheduledCount,
+	runningContainerCount,
+}: SummaryCardsProps) => (
+	<div className="grid gap-4 md:grid-cols-3">
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+				<CardTitle className="text-sm font-medium">Swarm Nodes</CardTitle>
+				<div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md">
+					<Server className="h-4 w-4 text-muted-foreground dark:text-emerald-600" />
+				</div>
+			</CardHeader>
+			<CardContent>
+				<div className="text-2xl font-bold">{nodeCount}</div>
+				{downNodeCount > 0 && (
+					<p className="text-xs text-destructive mt-1">
+						{downNodeCount} node(s) down or drained
+					</p>
+				)}
+			</CardContent>
+		</Card>
+
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+				<CardTitle className="text-sm font-medium">Services</CardTitle>
+				<div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md">
+					<Cpu className="h-4 w-4 text-muted-foreground dark:text-emerald-600" />
+				</div>
+			</CardHeader>
+			<CardContent>
+				<div className="text-2xl font-bold">{serviceCount}</div>
+				{unscheduledCount > 0 && (
+					<p className="text-xs text-muted-foreground mt-1">
+						{unscheduledCount} with no running tasks
+					</p>
+				)}
+			</CardContent>
+		</Card>
+
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+				<CardTitle className="text-sm font-medium">
+					Running Containers
+				</CardTitle>
+				<div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md">
+					<Container className="h-4 w-4 text-muted-foreground dark:text-emerald-600" />
+				</div>
+			</CardHeader>
+			<CardContent>
+				<div className="text-2xl font-bold">{runningContainerCount}</div>
+			</CardContent>
+		</Card>
+	</div>
+);

apps/dokploy/components/dashboard/swarm/containers/types.ts

@@ -0,0 +1,35 @@
+export interface ContainerStat {
+	BlockIO: string;
+	CPUPerc: string;
+	Container: string;
+	ID: string;
+	MemPerc: string;
+	MemUsage: string;
+	Name: string;
+	NetIO: string;
+}
+
+export interface ContainerInfo {
+	Name: string;
+	Image: string;
+	Node: string;
+	CurrentState: string;
+	DesiredState: string;
+	Ports: string;
+	Error: string;
+	ID: string;
+}
+
+export interface SwarmNode {
+	ID: string;
+	Hostname: string;
+	Status: string;
+	Availability: string;
+	ManagerStatus: string;
+}
+
+export interface NodeGroup {
+	nodeName: string;
+	containers: ContainerInfo[];
+	nodeStatus?: SwarmNode;
+}

apps/dokploy/components/dashboard/swarm/containers/utils.ts

@@ -0,0 +1,31 @@
+/** Round a value+unit string like "2.711MiB" → "2.7 MiB" */
+export const formatSizeValue = (raw: string): string => {
+	const match = raw.match(/^([\d.]+)\s*([A-Za-z]+)$/);
+	if (!match?.[1] || !match[2]) return raw;
+	const num = Number.parseFloat(match[1]);
+	const unit = match[2];
+	if (Number.isNaN(num)) return raw;
+	const rounded = num >= 1 ? num.toFixed(1) : num.toFixed(2);
+	return `${rounded} ${unit}`;
+};
+
+/** Format "2.711MiB / 7.609GiB" → "2.7 MiB / 7.6 GiB" */
+export const formatMemUsage = (raw: string): string => {
+	const [left, right] = raw.split("/").map((s) => s.trim());
+	if (!left || !right) return raw;
+	return `${formatSizeValue(left)} / ${formatSizeValue(right)}`;
+};
+
+/** Format "978B / 252B" → "978 B / 252 B" */
+export const formatIOValue = (raw: string): string => {
+	const [left, right] = raw.split("/").map((s) => s.trim());
+	if (!left || !right) return raw;
+	return `${formatSizeValue(left)} / ${formatSizeValue(right)}`;
+};
+
+/** Format "0.00%" → "0.0%", "12.345%" → "12.3%" */
+export const formatCpu = (raw: string): string => {
+	const num = Number.parseFloat(raw.replace("%", ""));
+	if (Number.isNaN(num)) return raw;
+	return `${num.toFixed(1)}%`;
+};

apps/dokploy/components/layouts/side.tsx

@@ -19,6 +19,7 @@ import {
 	Forward,
 	GalleryVerticalEnd,
 	GitBranch,
+	House,
 	Key,
 	KeyRound,
 	Loader2,
@@ -148,6 +149,12 @@ type Menu = {
 // The `isEnabled` function is called to determine if the item should be displayed
 const MENU: Menu = {
 	home: [
+		{
+			isSingle: true,
+			title: "Home",
+			url: "/dashboard/home",
+			icon: House,
+		},
 		{
 			isSingle: true,
 			title: "Projects",
@@ -861,6 +868,19 @@ function SidebarLogo() {
 	);
 }
 
+function MobileCloser() {
+	const pathname = usePathname();
+	const { setOpenMobile, isMobile } = useSidebar();
+
+	useEffect(() => {
+		if (isMobile) {
+			setOpenMobile(false);
+		}
+	}, [pathname, isMobile, setOpenMobile]);
+
+	return null;
+}
+
 export default function Page({ children }: Props) {
 	const [defaultOpen, setDefaultOpen] = useState<boolean | undefined>(
 		undefined,
@@ -926,6 +946,7 @@ export default function Page({ children }: Props) {
 				} as React.CSSProperties
 			}
 		>
+			<MobileCloser />
 			<Sidebar collapsible="icon" variant="floating">
 				<SidebarHeader>
 					{/* <SidebarMenuButton

apps/dokploy/components/layouts/user-nav.tsx

@@ -80,7 +80,7 @@ export const UserNav = () => {
 					<DropdownMenuItem
 						className="cursor-pointer"
 						onClick={() => {
-							router.push("/dashboard/projects");
+							router.push("/dashboard/home");
 						}}
 					>
 						Projects

apps/dokploy/components/proprietary/sso/sign-in-with-sso.tsx

@@ -44,7 +44,7 @@ export function SignInWithSSO({ children }: SignInWithSSOProps) {
 		try {
 			const { data, error } = await authClient.signIn.sso({
 				email: values.email,
-				callbackURL: "/dashboard/projects",
+				callbackURL: "/dashboard/home",
 			});
 			if (error) {
 				toast.error(error.message ?? "Failed to sign in with SSO");

apps/dokploy/components/shared/advance-breadcrumb.tsx

@@ -342,7 +342,7 @@ export const AdvanceBreadcrumb = () => {
 								className="h-auto px-2 py-1.5 hover:bg-accent gap-2"
 							>
 								<FolderInput className="size-4 text-muted-foreground" />
-								<span className="font-medium max-w-[150px] truncate">
+								<span className="font-medium max-w-[50px] md:max-w-[150px] truncate">
 									{currentProject?.name || "Select Project"}
 								</span>
 								<ChevronDown className="size-4 text-muted-foreground" />
@@ -478,7 +478,7 @@ export const AdvanceBreadcrumb = () => {
 									aria-expanded={environmentOpen}
 									className="h-auto px-2 py-1.5 hover:bg-accent gap-2"
 								>
-									<span className="font-medium max-w-[150px] truncate">
+									<span className="font-medium max-w-[50px] md:max-w-[150px] truncate">
 										{currentEnvironment?.name || "production"}
 									</span>
 									<ChevronDown className="size-4 text-muted-foreground" />
@@ -533,7 +533,7 @@ export const AdvanceBreadcrumb = () => {
 					)}
 
 					{projectEnvironments && projectEnvironments.length === 1 && (
-						<p className="text-sm font-normal ml-1">
+						<p className="text-sm font-normal ml-1 max-w-[50px] md:max-w-[150px] truncate">
 							{currentEnvironment?.name || "production"}
 						</p>
 					)}
@@ -551,7 +551,7 @@ export const AdvanceBreadcrumb = () => {
 										className="h-auto px-2 py-1.5 hover:bg-accent gap-2"
 									>
 										{getServiceIcon(currentService.type)}
-										<span className="font-medium max-w-[150px] truncate">
+										<span className="font-medium max-w-[50px] md:max-w-[150px] truncate">
 											{currentService.name}
 										</span>
 										<ChevronDown className="size-4 text-muted-foreground" />
@@ -617,7 +617,7 @@ export const AdvanceBreadcrumb = () => {
 							<Button
 								variant="ghost"
 								size="icon"
-								className="size-7 ml-1"
+								className="size-7 ml-1 hidden md:flex"
 								onClick={() => {
 									router.push(
 										`/dashboard/project/${projectId}/environment/${environmentId}`,