diff --git a/.gitignore b/.gitignore
index eddb26abd..ddc188f8c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,4 +13,5 @@ apps/api/db/*.db
 local-serve
 apps/api/db/migration.db-journal
 apps/api/core*
-logs
\ No newline at end of file
+logs
+others/certificates
\ No newline at end of file
diff --git a/apps/api/package.json b/apps/api/package.json
index f3635517b..8955c00f8 100644
--- a/apps/api/package.json
+++ b/apps/api/package.json
@@ -20,6 +20,7 @@
     "@fastify/cors": "8.1.0",
     "@fastify/env": "4.1.0",
     "@fastify/jwt": "6.3.2",
+    "@fastify/multipart": "7.2.0",
     "@fastify/static": "6.5.0",
     "@iarna/toml": "2.2.5",
     "@ladjs/graceful": "3.0.2",
@@ -49,6 +50,7 @@
     "p-all": "4.0.0",
     "p-throttle": "5.0.0",
     "public-ip": "6.0.1",
+    "pump": "^3.0.0",
     "ssh-config": "4.1.6",
     "strip-ansi": "7.0.1",
     "unique-names-generator": "4.7.1"
diff --git a/apps/api/prisma/migrations/20220922064605_custom_certificates/migration.sql b/apps/api/prisma/migrations/20220922064605_custom_certificates/migration.sql
new file mode 100644
index 000000000..804913038
--- /dev/null
+++ b/apps/api/prisma/migrations/20220922064605_custom_certificates/migration.sql
@@ -0,0 +1,10 @@
+-- CreateTable
+CREATE TABLE "Certificate" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "key" TEXT NOT NULL,
+    "cert" TEXT NOT NULL,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL,
+    "teamId" TEXT,
+    CONSTRAINT "Certificate_teamId_fkey" FOREIGN KEY ("teamId") REFERENCES "Team" ("id") ON DELETE SET NULL ON UPDATE CASCADE
+);
diff --git a/apps/api/prisma/migrations/20220923122227_custom_ssl_for_applications/migration.sql b/apps/api/prisma/migrations/20220923122227_custom_ssl_for_applications/migration.sql
new file mode 100644
index 000000000..b9261a955
--- /dev/null
+++ b/apps/api/prisma/migrations/20220923122227_custom_ssl_for_applications/migration.sql
@@ -0,0 +1,23 @@
+-- RedefineTables
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_ApplicationSettings" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "applicationId" TEXT NOT NULL,
+    "dualCerts" BOOLEAN NOT NULL DEFAULT false,
+    "debug" BOOLEAN NOT NULL DEFAULT false,
+    "previews" BOOLEAN NOT NULL DEFAULT false,
+    "autodeploy" BOOLEAN NOT NULL DEFAULT true,
+    "isBot" BOOLEAN NOT NULL DEFAULT false,
+    "isPublicRepository" BOOLEAN NOT NULL DEFAULT false,
+    "isDBBranching" BOOLEAN NOT NULL DEFAULT false,
+    "isCustomSSL" BOOLEAN NOT NULL DEFAULT false,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL,
+    CONSTRAINT "ApplicationSettings_applicationId_fkey" FOREIGN KEY ("applicationId") REFERENCES "Application" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
+);
+INSERT INTO "new_ApplicationSettings" ("applicationId", "autodeploy", "createdAt", "debug", "dualCerts", "id", "isBot", "isDBBranching", "isPublicRepository", "previews", "updatedAt") SELECT "applicationId", "autodeploy", "createdAt", "debug", "dualCerts", "id", "isBot", "isDBBranching", "isPublicRepository", "previews", "updatedAt" FROM "ApplicationSettings";
+DROP TABLE "ApplicationSettings";
+ALTER TABLE "new_ApplicationSettings" RENAME TO "ApplicationSettings";
+CREATE UNIQUE INDEX "ApplicationSettings_applicationId_key" ON "ApplicationSettings"("applicationId");
+PRAGMA foreign_key_check;
+PRAGMA foreign_keys=ON;
diff --git a/apps/api/prisma/schema.prisma b/apps/api/prisma/schema.prisma
index a7500539d..d064f707a 100644
--- a/apps/api/prisma/schema.prisma
+++ b/apps/api/prisma/schema.prisma
@@ -8,6 +8,16 @@ datasource db {
   url      = env("COOLIFY_DATABASE_URL")
 }
 
+model Certificate {
+  id        String   @id @default(cuid())
+  key       String
+  cert      String
+  team      Team?    @relation(fields: [teamId], references: [id])
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  teamId    String?
+}
+
 model Setting {
   id                    String   @id @default(cuid())
   fqdn                  String?  @unique
@@ -70,6 +80,7 @@ model Team {
   gitLabApps        GitlabApp[]
   service           Service[]
   users             User[]
+  certificate       Certificate[]
 }
 
 model TeamInvitation {
@@ -161,6 +172,7 @@ model ApplicationSettings {
   isBot              Boolean     @default(false)
   isPublicRepository Boolean     @default(false)
   isDBBranching      Boolean     @default(false)
+  isCustomSSL        Boolean     @default(false)
   createdAt          DateTime    @default(now())
   updatedAt          DateTime    @updatedAt
   application        Application @relation(fields: [applicationId], references: [id])
diff --git a/apps/api/src/index.ts b/apps/api/src/index.ts
index 902596459..acbae3d71 100644
--- a/apps/api/src/index.ts
+++ b/apps/api/src/index.ts
@@ -3,6 +3,7 @@ import cors from '@fastify/cors';
 import serve from '@fastify/static';
 import env from '@fastify/env';
 import cookie from '@fastify/cookie';
+import multipart from '@fastify/multipart';
 import path, { join } from 'path';
 import autoLoad from '@fastify/autoload';
 import { asyncExecShell, createRemoteEngineConfiguration, getDomain, isDev, listSettings, prisma, version } from './lib/common';
@@ -31,6 +32,7 @@ prisma.setting.findFirst().then(async (settings) => {
 		logger: settings?.isAPIDebuggingEnabled || false,
 		trustProxy: true
 	});
+
 	const schema = {
 		type: 'object',
 		required: ['COOLIFY_SECRET_KEY', 'COOLIFY_DATABASE_URL', 'COOLIFY_IS_ON'],
@@ -88,13 +90,13 @@ prisma.setting.findFirst().then(async (settings) => {
 			return reply.status(200).sendFile('index.html');
 		});
 	}
+	fastify.register(multipart, { limits: { fileSize: 100000 } });
 	fastify.register(autoLoad, {
 		dir: join(__dirname, 'plugins')
 	});
 	fastify.register(autoLoad, {
 		dir: join(__dirname, 'routes')
 	});
-
 	fastify.register(cookie)
 	fastify.register(cors);
 	fastify.addHook('onRequest', async (request, reply) => {
@@ -145,11 +147,16 @@ prisma.setting.findFirst().then(async (settings) => {
 			scheduler.workers.has('infrastructure') && scheduler.workers.get('infrastructure').postMessage("action:cleanupStorage")
 		}, isDev ? 6000 : 60000 * 10)
 
-		// checkProxies
+		// checkProxies and checkFluentBit
 		setInterval(async () => {
 			scheduler.workers.has('infrastructure') && scheduler.workers.get('infrastructure').postMessage("action:checkProxies")
+			scheduler.workers.has('infrastructure') && scheduler.workers.get('infrastructure').postMessage("action:checkFluentBit")
 		}, 10000)
 
+		setInterval(async () => {
+			scheduler.workers.has('infrastructure') && scheduler.workers.get('infrastructure').postMessage("action:copySSLCertificates")
+		}, 2000)
+		
 		// cleanupPrismaEngines
 		// setInterval(async () => {
 		// 	scheduler.workers.has('infrastructure') && scheduler.workers.get('infrastructure').postMessage("action:cleanupPrismaEngines")
diff --git a/apps/api/src/jobs/deployApplication.ts b/apps/api/src/jobs/deployApplication.ts
index 55a7ef461..89859620f 100644
--- a/apps/api/src/jobs/deployApplication.ts
+++ b/apps/api/src/jobs/deployApplication.ts
@@ -154,7 +154,7 @@ import * as buildpacks from '../lib/buildPacks';
 									startCommand = configuration.startCommand;
 									buildCommand = configuration.buildCommand;
 									publishDirectory = configuration.publishDirectory;
-									baseDirectory = configuration.baseDirectory;
+									baseDirectory = configuration.baseDirectory || '';
 									dockerFileLocation = configuration.dockerFileLocation;
 									denoMainFile = configuration.denoMainFile;
 									const commit = await importers[gitSource.type]({
diff --git a/apps/api/src/jobs/infrastructure.ts b/apps/api/src/jobs/infrastructure.ts
index 23e380610..e0b2d3a61 100644
--- a/apps/api/src/jobs/infrastructure.ts
+++ b/apps/api/src/jobs/infrastructure.ts
@@ -1,8 +1,9 @@
 import { parentPort } from 'node:worker_threads';
 import axios from 'axios';
 import { compareVersions } from 'compare-versions';
-import { asyncExecShell, cleanupDockerStorage, executeDockerCmd, isDev, prisma, startTraefikTCPProxy, generateDatabaseConfiguration, startTraefikProxy, listSettings, version, createRemoteEngineConfiguration } from '../lib/common';
-
+import { asyncExecShell, cleanupDockerStorage, executeDockerCmd, isDev, prisma, startTraefikTCPProxy, generateDatabaseConfiguration, startTraefikProxy, listSettings, version, createRemoteEngineConfiguration, decrypt, executeSSHCmd } from '../lib/common';
+import { checkContainer } from '../lib/docker';
+import fs from 'fs/promises'
 async function autoUpdater() {
     try {
         const currentVersion = version;
@@ -39,6 +40,68 @@ async function autoUpdater() {
         }
     } catch (error) { }
 }
+async function checkFluentBit() {
+    if (!isDev) {
+        const engine = '/var/run/docker.sock';
+        const { id } = await prisma.destinationDocker.findFirst({
+            where: { engine, network: 'coolify' }
+        });
+        const { found } = await checkContainer({ dockerId: id, container: 'coolify-fluentbit' });
+        if (!found) {
+            await asyncExecShell(`env | grep COOLIFY > .env`);
+            await asyncExecShell(`docker compose up -d fluent-bit`);
+        }
+    }
+}
+async function copyRemoteCertificates(id: string, dockerId: string, remoteIpAddress: string) {
+    try {
+        await asyncExecShell(`scp /tmp/${id}-cert.pem /tmp/${id}-key.pem ${remoteIpAddress}:/tmp/`)
+        await executeSSHCmd({ dockerId, command: `docker exec coolify-proxy sh -c 'test -d /etc/traefik/acme/custom/ || mkdir -p /etc/traefik/acme/custom/'` })
+        await executeSSHCmd({ dockerId, command: `docker cp /tmp/${id}-key.pem coolify-proxy:/etc/traefik/acme/custom/` })
+        await executeSSHCmd({ dockerId, command: `docker cp /tmp/${id}-cert.pem coolify-proxy:/etc/traefik/acme/custom/` })
+    } catch (error) {
+        console.log({ error })
+    }
+}
+async function copyLocalCertificates(id: string) {
+    try {
+        await asyncExecShell(`docker exec coolify-proxy sh -c 'test -d /etc/traefik/acme/custom/ || mkdir -p /etc/traefik/acme/custom/'`)
+        await asyncExecShell(`docker cp /tmp/${id}-key.pem coolify-proxy:/etc/traefik/acme/custom/`)
+        await asyncExecShell(`docker cp /tmp/${id}-cert.pem coolify-proxy:/etc/traefik/acme/custom/`)
+    } catch (error) {
+        console.log({ error })
+    }
+}
+async function copySSLCertificates() {
+    try {
+        const pAll = await import('p-all');
+        const actions = []
+        const certificates = await prisma.certificate.findMany({ include: { team: true } })
+        const teamIds = certificates.map(c => c.teamId)
+        const destinations = await prisma.destinationDocker.findMany({ where: { isCoolifyProxyUsed: true, teams: { some: { id: { in: [...teamIds] } } } } })
+        for (const certificate of certificates) {
+            const { id, key, cert } = certificate
+            const decryptedKey = decrypt(key)
+            await fs.writeFile(`/tmp/${id}-key.pem`, decryptedKey)
+            await fs.writeFile(`/tmp/${id}-cert.pem`, cert)
+            for (const destination of destinations) {
+                if (destination.remoteEngine) {
+                    if (destination.remoteVerified) {
+                        const { id: dockerId, remoteIpAddress } = destination
+                        actions.push(async () => copyRemoteCertificates(id, dockerId, remoteIpAddress))
+                    }
+                } else {
+                    actions.push(async () => copyLocalCertificates(id))
+                }
+            }
+        }
+        await pAll.default(actions, { concurrency: 1 })
+    } catch (error) {
+        console.log(error)
+    } finally {
+        await asyncExecShell(`find /tmp/ -maxdepth 1 -type f -name '*-*.pem' -delete`)
+    }
+}
 async function checkProxies() {
     try {
         const { default: isReachable } = await import('is-port-reachable');
@@ -189,7 +252,8 @@ async function cleanupStorage() {
 (async () => {
     let status = {
         cleanupStorage: false,
-        autoUpdater: false
+        autoUpdater: false,
+        copySSLCertificates: false,
     }
     if (parentPort) {
         parentPort.on('message', async (message) => {
@@ -215,6 +279,18 @@ async function cleanupStorage() {
                     await checkProxies();
                     return;
                 }
+                if (message === 'action:checkFluentBit') {
+                    await checkFluentBit();
+                    return;
+                }
+                if (message === 'action:copySSLCertificates') {
+                    if (!status.copySSLCertificates) {
+                        status.copySSLCertificates = true
+                        await copySSLCertificates();
+                        status.copySSLCertificates = false
+                    }
+                    return;
+                }
                 if (message === 'action:autoUpdater') {
                     if (!status.cleanupStorage) {
                         status.autoUpdater = true
diff --git a/apps/api/src/lib/buildPacks/common.ts b/apps/api/src/lib/buildPacks/common.ts
index 44812a76d..37a4b023c 100644
--- a/apps/api/src/lib/buildPacks/common.ts
+++ b/apps/api/src/lib/buildPacks/common.ts
@@ -342,13 +342,13 @@ export function setDefaultBaseImage(buildPack: string | null, deploymentType: st
 	}
 	if (buildPack === 'laravel') {
 		payload.baseImage = 'webdevops/php-apache:8.2-alpine';
+		payload.baseImages = phpVersions;
 		payload.baseBuildImage = 'node:18';
 		payload.baseBuildImages = nodeVersions;
 	}
 	if (buildPack === 'heroku') {
 		payload.baseImage = 'heroku/buildpacks:20';
 		payload.baseImages = herokuVersions;
-
 	}
 	return payload;
 }
@@ -384,7 +384,7 @@ export const setDefaultConfiguration = async (data: any) => {
 	if (!publishDirectory) publishDirectory = template?.publishDirectory || null;
 	if (baseDirectory) {
 		if (!baseDirectory.startsWith('/')) baseDirectory = `/${baseDirectory}`;
-		if (!baseDirectory.endsWith('/')) baseDirectory = `${baseDirectory}/`;
+		if (baseDirectory.endsWith('/') && baseDirectory !== '/') baseDirectory = baseDirectory.slice(0, -1);
 	}
 	if (dockerFileLocation) {
 		if (!dockerFileLocation.startsWith('/')) dockerFileLocation = `/${dockerFileLocation}`;
diff --git a/apps/api/src/lib/buildPacks/docker.ts b/apps/api/src/lib/buildPacks/docker.ts
index c017b4bed..e8cfd89bc 100644
--- a/apps/api/src/lib/buildPacks/docker.ts
+++ b/apps/api/src/lib/buildPacks/docker.ts
@@ -14,12 +14,8 @@ export default async function (data) {
 		dockerFileLocation
 	} = data
 	try {
-		const file = `${workdir}${dockerFileLocation}`;
-		let dockerFileOut = `${workdir}`;
-		if (baseDirectory) {
-			dockerFileOut = `${workdir}${baseDirectory}`;
-			workdir = `${workdir}${baseDirectory}`;
-		}
+		const file = `${workdir}${baseDirectory}${dockerFileLocation}`;
+		data.workdir = `${workdir}${baseDirectory}`;
 		const Dockerfile: Array<string> = (await fs.readFile(`${file}`, 'utf8'))
 			.toString()
 			.trim()
@@ -28,7 +24,6 @@ export default async function (data) {
 		if (secrets.length > 0) {
 			secrets.forEach((secret) => {
 				if (secret.isBuildSecret) {
-					// TODO: fix secrets
 					if (
 						(pullmergeRequestId && secret.isPRMRSecret) ||
 						(!pullmergeRequestId && !secret.isPRMRSecret)
@@ -45,7 +40,7 @@ export default async function (data) {
 			});
 		}
 
-		await fs.writeFile(`${dockerFileOut}${dockerFileLocation}`, Dockerfile.join('\n'));
+		await fs.writeFile(`${workdir}${dockerFileLocation}`, Dockerfile.join('\n'));
 		await buildImage(data);
 	} catch (error) {
 		throw error;
diff --git a/apps/api/src/lib/buildPacks/heroku.ts b/apps/api/src/lib/buildPacks/heroku.ts
index 3efdeaf6a..c9608aba2 100644
--- a/apps/api/src/lib/buildPacks/heroku.ts
+++ b/apps/api/src/lib/buildPacks/heroku.ts
@@ -2,38 +2,16 @@ import { executeDockerCmd, prisma } from "../common"
 import { saveBuildLog } from "./common";
 
 export default async function (data: any): Promise<void> {
-    const { buildId, applicationId, tag, dockerId, debug, workdir } = data
+    const { buildId, applicationId, tag, dockerId, debug, workdir, baseDirectory } = data
     try {
-
         await saveBuildLog({ line: `Building image started.`, buildId, applicationId });
-        const { stdout } = await executeDockerCmd({
+        await executeDockerCmd({
+            debug,
             dockerId,
-            command: `pack build -p ${workdir} ${applicationId}:${tag} --builder heroku/buildpacks:20`
+            command: `pack build -p ${workdir}${baseDirectory} ${applicationId}:${tag} --builder heroku/buildpacks:20`
         })
-        if (debug) {
-            const array = stdout.split('\n')
-            for (const line of array) {
-                if (line !== '\n') {
-                    await saveBuildLog({
-                        line: `${line.replace('\n', '')}`,
-                        buildId,
-                        applicationId
-                    });
-                }
-            }
-        }
         await saveBuildLog({ line: `Building image successful.`, buildId, applicationId });
     } catch (error) {
-        const array = error.stdout.split('\n')
-        for (const line of array) {
-            if (line !== '\n') {
-                await saveBuildLog({
-                    line: `${line.replace('\n', '')}`,
-                    buildId,
-                    applicationId
-                });
-            }
-        }
         throw error;
     }
 }
diff --git a/apps/api/src/lib/common.ts b/apps/api/src/lib/common.ts
index cb2b10e17..db283d5a7 100644
--- a/apps/api/src/lib/common.ts
+++ b/apps/api/src/lib/common.ts
@@ -1,4 +1,4 @@
-import { exec } from 'node:child_process'
+import { exec } from 'node:child_process';
 import util from 'util';
 import fs from 'fs/promises';
 import yaml from 'js-yaml';
@@ -11,17 +11,17 @@ import { promises as dns } from 'dns';
 import { PrismaClient } from '@prisma/client';
 import cuid from 'cuid';
 import os from 'os';
-import sshConfig from 'ssh-config'
+import sshConfig from 'ssh-config';
 
 import { checkContainer, removeContainer } from './docker';
 import { day } from './dayjs';
-import * as serviceFields from './services/serviceFields'
+import * as serviceFields from './services/serviceFields';
 import { saveBuildLog } from './buildPacks/common';
 import { scheduler } from './scheduler';
 import { supportedServiceTypesAndVersions } from './services/supportedVersions';
 import { includeServices } from './services/common';
 
-export const version = '3.10.4';
+export const version = '3.10.5';
 export const isDev = process.env.NODE_ENV === 'development';
 
 const algorithm = 'aes-256-ctr';
@@ -38,24 +38,24 @@ export const defaultProxyImageHttp = `coolify-haproxy-http-alpine:latest`;
 export const defaultTraefikImage = `traefik:v2.8`;
 export function getAPIUrl() {
 	if (process.env.GITPOD_WORKSPACE_URL) {
-		const { href } = new URL(process.env.GITPOD_WORKSPACE_URL)
-		const newURL = href.replace('https://', 'https://3001-').replace(/\/$/, '')
-		return newURL
+		const { href } = new URL(process.env.GITPOD_WORKSPACE_URL);
+		const newURL = href.replace('https://', 'https://3001-').replace(/\/$/, '');
+		return newURL;
 	}
 	if (process.env.CODESANDBOX_HOST) {
-		return `https://${process.env.CODESANDBOX_HOST.replace(/\$PORT/, '3001')}`
+		return `https://${process.env.CODESANDBOX_HOST.replace(/\$PORT/, '3001')}`;
 	}
 	return isDev ? 'http://host.docker.internal:3001' : 'http://localhost:3000';
 }
 
 export function getUIUrl() {
 	if (process.env.GITPOD_WORKSPACE_URL) {
-		const { href } = new URL(process.env.GITPOD_WORKSPACE_URL)
-		const newURL = href.replace('https://', 'https://3000-').replace(/\/$/, '')
-		return newURL
+		const { href } = new URL(process.env.GITPOD_WORKSPACE_URL);
+		const newURL = href.replace('https://', 'https://3000-').replace(/\/$/, '');
+		return newURL;
 	}
 	if (process.env.CODESANDBOX_HOST) {
-		return `https://${process.env.CODESANDBOX_HOST.replace(/\$PORT/, '3000')}`
+		return `https://${process.env.CODESANDBOX_HOST.replace(/\$PORT/, '3000')}`;
 	}
 	return 'http://localhost:3000';
 }
@@ -68,67 +68,81 @@ const otherTraefikEndpoint = isDev
 	? `${getAPIUrl()}/webhooks/traefik/other.json`
 	: 'http://coolify:3000/webhooks/traefik/other.json';
 
-
 export const uniqueName = (): string => uniqueNamesGenerator(customConfig);
 export const asyncExecShell = util.promisify(exec);
-export const asyncExecShellStream = async ({ debug, buildId, applicationId, command, engine }: { debug: boolean, buildId: string, applicationId: string, command: string, engine: string }) => {
+export const asyncExecShellStream = async ({
+	debug,
+	buildId,
+	applicationId,
+	command,
+	engine
+}: {
+	debug: boolean;
+	buildId: string;
+	applicationId: string;
+	command: string;
+	engine: string;
+}) => {
 	return await new Promise(async (resolve, reject) => {
-		const { execaCommand } = await import('execa')
-		const subprocess = execaCommand(command, { env: { DOCKER_BUILDKIT: "1", DOCKER_HOST: engine } })
-		const errorLogs = []
-		const logs = []
-			subprocess.stdout.on('data', async (data) => {
-				const stdout = data.toString();
-				const array = stdout.split('\n')
-				for (const line of array) {
-					if (line !== '\n' && line !== '') {
-						logs.push(line.replace('\n', ''))
-						debug && await saveBuildLog({
-							line: `${line.replace('\n', '')}`,
-							buildId,
-							applicationId
-						});
+		const { execaCommand } = await import('execa');
+		const subprocess = execaCommand(command, {
+			env: { DOCKER_BUILDKIT: '1', DOCKER_HOST: engine }
+		});
+		const logs = [];
+		subprocess.stdout.on('data', async (data) => {
+			const stdout = data.toString();
+			const array = stdout.split('\n');
+			for (const line of array) {
+				if (line !== '\n' && line !== '') {
+					const log = {
+						line: `${line.replace('\n', '')}`,
+						buildId,
+						applicationId
+					}
+					logs.push(log);
+					if (debug) {
+						await saveBuildLog(log);
 					}
 				}
-			})
-			subprocess.stderr.on('data', async (data) => {
-				const stderr = data.toString();
-				const array = stderr.split('\n')
-				for (const line of array) {
-					if (line !== '\n' && line !== '') {
-						errorLogs.push(line.replace('\n', ''))
-						debug && await saveBuildLog({
-							line: `${line.replace('\n', '')}`,
-							buildId,
-							applicationId
-						});	
+			}
+		});
+		subprocess.stderr.on('data', async (data) => {
+			const stderr = data.toString();
+			const array = stderr.split('\n');
+			for (const line of array) {
+				if (line !== '\n' && line !== '') {
+					const log = {
+						line: `${line.replace('\n', '')}`,
+						buildId,
+						applicationId
+					}
+					logs.push(log);
+					if (debug) {
+						await saveBuildLog(log);
 					}
 				}
-			})
+			}
+		});
 		subprocess.on('exit', async (code) => {
 			await asyncSleep(1000);
 			if (code === 0) {
-				resolve(code)
+				resolve(code);
 			} else {
 				if (!debug) {
-					for (const line of errorLogs) {
-						await saveBuildLog({
-							line: `${line.replace('\n', '')}`,
-							buildId,
-							applicationId
-						});
+					for (const log of logs) {
+						await saveBuildLog(log);
 					}
 				}
-				reject(code)
+				reject(code);
 			}
-		})
-	})
-}
+		});
+	});
+};
 
 export const asyncSleep = (delay: number): Promise<unknown> =>
 	new Promise((resolve) => setTimeout(resolve, delay));
 export const prisma = new PrismaClient({
-	errorFormat: 'minimal',
+	errorFormat: 'minimal'
 	// log: [
 	// 	{
 	// 	  emit: 'event',
@@ -176,10 +190,9 @@ export const decrypt = (hashString: string) => {
 			]);
 			return decrpyted.toString();
 		} catch (error) {
-			console.log({ decryptionError: error.message })
-			return hashString
+			console.log({ decryptionError: error.message });
+			return hashString;
 		}
-
 	}
 };
 export const encrypt = (text: string) => {
@@ -194,8 +207,6 @@ export const encrypt = (text: string) => {
 	}
 };
 
-
-
 export async function checkDoubleBranch(branch: string, projectId: number): Promise<boolean> {
 	const applications = await prisma.application.findMany({ where: { branch, projectId } });
 	return applications.length > 1;
@@ -214,7 +225,7 @@ export async function isDNSValid(hostname: any, domain: string): Promise<any> {
 			resolves = await dns.resolve4(hostname);
 		}
 	} catch (error) {
-		throw 'Invalid DNS.'
+		throw 'Invalid DNS.';
 	}
 
 	try {
@@ -229,11 +240,10 @@ export async function isDNSValid(hostname: any, domain: string): Promise<any> {
 		}
 		if (!ipDomainFound) throw false;
 	} catch (error) {
-		throw 'DNS not set'
+		throw 'DNS not set';
 	}
 }
 
-
 export function getDomain(domain: string): string {
 	return domain?.replace('https://', '').replace('http://', '');
 }
@@ -259,7 +269,7 @@ export async function isDomainConfigured({
 			],
 			id: { not: id },
 			destinationDocker: {
-				remoteIpAddress,
+				remoteIpAddress
 			}
 		},
 		select: { fqdn: true }
@@ -295,7 +305,10 @@ export async function isDomainConfigured({
 
 export async function getContainerUsage(dockerId: string, container: string): Promise<any> {
 	try {
-		const { stdout } = await executeDockerCmd({ dockerId, command: `docker container stats ${container} --no-stream --no-trunc --format "{{json .}}"` })
+		const { stdout } = await executeDockerCmd({
+			dockerId,
+			command: `docker container stats ${container} --no-stream --no-trunc --format "{{json .}}"`
+		});
 		return JSON.parse(stdout);
 	} catch (err) {
 		return {
@@ -324,7 +337,7 @@ export async function checkDomainsIsValidInDNS({ hostname, fqdn, dualCerts }): P
 			resolves = await dns.resolve4(hostname);
 		}
 	} catch (error) {
-		throw { status: 500, message: `Could not determine IP address for ${hostname}.` }
+		throw { status: 500, message: `Could not determine IP address for ${hostname}.` };
 	}
 
 	if (dualCerts) {
@@ -346,9 +359,15 @@ export async function checkDomainsIsValidInDNS({ hostname, fqdn, dualCerts }): P
 				}
 			}
 			if (ipDomainFound && ipDomainDualCertFound) return { status: 200 };
-			throw { status: 500, message: `DNS not set correctly or propogated.<br>Please check your DNS settings.` }
+			throw {
+				status: 500,
+				message: `DNS not set correctly or propogated.<br>Please check your DNS settings.`
+			};
 		} catch (error) {
-			throw { status: 500, message: `DNS not set correctly or propogated.<br>Please check your DNS settings.` }
+			throw {
+				status: 500,
+				message: `DNS not set correctly or propogated.<br>Please check your DNS settings.`
+			};
 		}
 	} else {
 		try {
@@ -360,9 +379,15 @@ export async function checkDomainsIsValidInDNS({ hostname, fqdn, dualCerts }): P
 				}
 			}
 			if (ipDomainFound) return { status: 200 };
-			throw { status: 500, message: `DNS not set correctly or propogated.<br>Please check your DNS settings.` }
+			throw {
+				status: 500,
+				message: `DNS not set correctly or propogated.<br>Please check your DNS settings.`
+			};
 		} catch (error) {
-			throw { status: 500, message: `DNS not set correctly or propogated.<br>Please check your DNS settings.` }
+			throw {
+				status: 500,
+				message: `DNS not set correctly or propogated.<br>Please check your DNS settings.`
+			};
 		}
 	}
 }
@@ -436,63 +461,95 @@ export const supportedDatabaseTypesAndVersions = [
 
 export async function getFreeSSHLocalPort(id: string): Promise<number | boolean> {
 	const { default: isReachable } = await import('is-port-reachable');
-	const { remoteIpAddress, sshLocalPort } = await prisma.destinationDocker.findUnique({ where: { id } })
+	const { remoteIpAddress, sshLocalPort } = await prisma.destinationDocker.findUnique({
+		where: { id }
+	});
 	if (sshLocalPort) {
-		return Number(sshLocalPort)
+		return Number(sshLocalPort);
 	}
 
 	const data = await prisma.setting.findFirst();
 	const { minPort, maxPort } = data;
 
-	const ports = await prisma.destinationDocker.findMany({ where: { sshLocalPort: { not: null }, remoteIpAddress: { not: remoteIpAddress } } })
+	const ports = await prisma.destinationDocker.findMany({
+		where: { sshLocalPort: { not: null }, remoteIpAddress: { not: remoteIpAddress } }
+	});
 
 	const alreadyConfigured = await prisma.destinationDocker.findFirst({
 		where: {
-			remoteIpAddress, id: { not: id }, sshLocalPort: { not: null }
+			remoteIpAddress,
+			id: { not: id },
+			sshLocalPort: { not: null }
 		}
-	})
+	});
 	if (alreadyConfigured?.sshLocalPort) {
-		await prisma.destinationDocker.update({ where: { id }, data: { sshLocalPort: alreadyConfigured.sshLocalPort } })
-		return Number(alreadyConfigured.sshLocalPort)
+		await prisma.destinationDocker.update({
+			where: { id },
+			data: { sshLocalPort: alreadyConfigured.sshLocalPort }
+		});
+		return Number(alreadyConfigured.sshLocalPort);
 	}
-	const range = generateRangeArray(minPort, maxPort)
-	const availablePorts = range.filter(port => !ports.map(p => p.sshLocalPort).includes(port))
+	const range = generateRangeArray(minPort, maxPort);
+	const availablePorts = range.filter((port) => !ports.map((p) => p.sshLocalPort).includes(port));
 	for (const port of availablePorts) {
-		const found = await isReachable(port, { host: 'localhost' })
+		const found = await isReachable(port, { host: 'localhost' });
 		if (!found) {
-			await prisma.destinationDocker.update({ where: { id }, data: { sshLocalPort: Number(port) } })
-			return Number(port)
+			await prisma.destinationDocker.update({
+				where: { id },
+				data: { sshLocalPort: Number(port) }
+			});
+			return Number(port);
 		}
 	}
-	return false
+	return false;
 }
 
 export async function createRemoteEngineConfiguration(id: string) {
 	const homedir = os.homedir();
-	const sshKeyFile = `/tmp/id_rsa-${id}`
+	const sshKeyFile = `/tmp/id_rsa-${id}`;
 	const localPort = await getFreeSSHLocalPort(id);
-	const { sshKey: { privateKey }, remoteIpAddress, remotePort, remoteUser } = await prisma.destinationDocker.findFirst({ where: { id }, include: { sshKey: true } })
-	await fs.writeFile(sshKeyFile, decrypt(privateKey) + '\n', { encoding: 'utf8', mode: 400 })
+	const {
+		sshKey: { privateKey },
+		remoteIpAddress,
+		remotePort,
+		remoteUser
+	} = await prisma.destinationDocker.findFirst({ where: { id }, include: { sshKey: true } });
+	await fs.writeFile(sshKeyFile, decrypt(privateKey) + '\n', { encoding: 'utf8', mode: 400 });
 	// Needed for remote docker compose
-	const { stdout: numberOfSSHAgentsRunning } = await asyncExecShell(`ps ax | grep [s]sh-agent | grep coolify-ssh-agent.pid | grep -v grep | wc -l`)
+	const { stdout: numberOfSSHAgentsRunning } = await asyncExecShell(
+		`ps ax | grep [s]sh-agent | grep coolify-ssh-agent.pid | grep -v grep | wc -l`
+	);
 	if (numberOfSSHAgentsRunning !== '' && Number(numberOfSSHAgentsRunning.trim()) == 0) {
 		try {
-			await fs.stat(`/tmp/coolify-ssh-agent.pid`)
-			await fs.rm(`/tmp/coolify-ssh-agent.pid`)
+			await fs.stat(`/tmp/coolify-ssh-agent.pid`);
+			await fs.rm(`/tmp/coolify-ssh-agent.pid`);
 		} catch (error) { }
-		await asyncExecShell(`eval $(ssh-agent -sa /tmp/coolify-ssh-agent.pid)`)
+		await asyncExecShell(`eval $(ssh-agent -sa /tmp/coolify-ssh-agent.pid)`);
 	}
-	await asyncExecShell(`SSH_AUTH_SOCK=/tmp/coolify-ssh-agent.pid ssh-add -q ${sshKeyFile}`)
+	await asyncExecShell(`SSH_AUTH_SOCK=/tmp/coolify-ssh-agent.pid ssh-add -q ${sshKeyFile}`);
 
-	const { stdout: numberOfSSHTunnelsRunning } = await asyncExecShell(`ps ax | grep 'ssh -F /dev/null -o StrictHostKeyChecking no -fNL ${localPort}:localhost:${remotePort}' | grep -v grep | wc -l`)
+	const { stdout: numberOfSSHTunnelsRunning } = await asyncExecShell(
+		`ps ax | grep 'ssh -F /dev/null -o StrictHostKeyChecking no -fNL ${localPort}:localhost:${remotePort}' | grep -v grep | wc -l`
+	);
 	if (numberOfSSHTunnelsRunning !== '' && Number(numberOfSSHTunnelsRunning.trim()) == 0) {
 		try {
-			await asyncExecShell(`SSH_AUTH_SOCK=/tmp/coolify-ssh-agent.pid ssh -F /dev/null -o "StrictHostKeyChecking no" -fNL ${localPort}:localhost:${remotePort} ${remoteUser}@${remoteIpAddress}`)
+			await asyncExecShell(
+				`SSH_AUTH_SOCK=/tmp/coolify-ssh-agent.pid ssh -F /dev/null -o "StrictHostKeyChecking no" -fNL ${localPort}:localhost:${remotePort} ${remoteUser}@${remoteIpAddress}`
+			);
 		} catch (error) { }
-
 	}
-	const config = sshConfig.parse('')
-	const found = config.find({ Host: remoteIpAddress })
+	const config = sshConfig.parse('');
+	const foundWildcard = config.find({ Host: '*' });
+	if (!foundWildcard) {
+		config.append({
+			Host: '*',
+			StrictHostKeyChecking: 'no',
+			ControlMaster: 'auto',
+			ControlPath: `${homedir}/.ssh/coolify-%r@%h:%p`,
+			ControlPersist: '10m'
+		})
+	}
+	const found = config.find({ Host: remoteIpAddress });
 	if (!found) {
 		config.append({
 			Host: remoteIpAddress,
@@ -501,14 +558,15 @@ export async function createRemoteEngineConfiguration(id: string) {
 			User: remoteUser,
 			IdentityFile: sshKeyFile,
 			StrictHostKeyChecking: 'no'
-		})
+		});
 	}
+
 	try {
-		await fs.stat(`${homedir}/.ssh/`)
+		await fs.stat(`${homedir}/.ssh/`);
 	} catch (error) {
-		await fs.mkdir(`${homedir}/.ssh/`)
+		await fs.mkdir(`${homedir}/.ssh/`);
 	}
-	return await fs.writeFile(`${homedir}/.ssh/config`, sshConfig.stringify(config))
+	return await fs.writeFile(`${homedir}/.ssh/config`, sshConfig.stringify(config));
 }
 export async function executeSSHCmd({ dockerId, command }) {
 	const { execaCommand } = await import('execa')
@@ -531,17 +589,17 @@ export async function executeDockerCmd({ debug, buildId, applicationId, dockerId
 	const { execaCommand } = await import('execa')
 	let { remoteEngine, remoteIpAddress, engine, remoteUser } = await prisma.destinationDocker.findUnique({ where: { id: dockerId } })
 	if (remoteEngine) {
-		await createRemoteEngineConfiguration(dockerId)
-		engine = `ssh://${remoteIpAddress}`
+		await createRemoteEngineConfiguration(dockerId);
+		engine = `ssh://${remoteIpAddress}`;
 	} else {
-		engine = 'unix:///var/run/docker.sock'
+		engine = 'unix:///var/run/docker.sock';
 	}
 	if (process.env.CODESANDBOX_HOST) {
 		if (command.startsWith('docker compose')) {
-			command = command.replace(/docker compose/gi, 'docker-compose')
+			command = command.replace(/docker compose/gi, 'docker-compose');
 		}
 	}
-	if (command.startsWith(`docker build --progress plain`)) {
+	if (command.startsWith(`docker build --progress plain`) || command.startsWith(`pack build`)) {
 		return await asyncExecShellStream({ debug, buildId, applicationId, command, engine });
 	}
 	return await execaCommand(command, { env: { DOCKER_BUILDKIT: "1", DOCKER_HOST: engine }, shell: true })
@@ -552,22 +610,31 @@ export async function startTraefikProxy(id: string): Promise<void> {
 	const { id: settingsId, ipv4, ipv6 } = await listSettings();
 
 	if (!found) {
-		const { stdout: coolifyNetwork } = await executeDockerCmd({ dockerId: id, command: `docker network ls --filter 'name=coolify-infra' --no-trunc --format "{{json .}}"` })
+		const { stdout: coolifyNetwork } = await executeDockerCmd({
+			dockerId: id,
+			command: `docker network ls --filter 'name=coolify-infra' --no-trunc --format "{{json .}}"`
+		});
 
 		if (!coolifyNetwork) {
-			await executeDockerCmd({ dockerId: id, command: `docker network create --attachable coolify-infra` })
+			await executeDockerCmd({
+				dockerId: id,
+				command: `docker network create --attachable coolify-infra`
+			});
 		}
-		const { stdout: Config } = await executeDockerCmd({ dockerId: id, command: `docker network inspect ${network} --format '{{json .IPAM.Config }}'` })
+		const { stdout: Config } = await executeDockerCmd({
+			dockerId: id,
+			command: `docker network inspect ${network} --format '{{json .IPAM.Config }}'`
+		});
 		const ip = JSON.parse(Config)[0].Gateway;
-		let traefikUrl = mainTraefikEndpoint
+		let traefikUrl = mainTraefikEndpoint;
 		if (remoteEngine) {
-			let ip = null
+			let ip = null;
 			if (isDev) {
-				ip = getAPIUrl()
+				ip = getAPIUrl();
 			} else {
-				ip = `http://${ipv4 || ipv6}:3000`
+				ip = `http://${ipv4 || ipv6}:3000`;
 			}
-			traefikUrl = `${ip}/webhooks/traefik/remote/${id}`
+			traefikUrl = `${ip}/webhooks/traefik/remote/${id}`;
 		}
 		await executeDockerCmd({
 			dockerId: id,
@@ -593,7 +660,7 @@ export async function startTraefikProxy(id: string): Promise<void> {
 			--certificatesresolvers.letsencrypt.acme.storage=/etc/traefik/acme/acme.json \
 			--certificatesresolvers.letsencrypt.acme.httpchallenge.entrypoint=web \
 			--log.level=error`
-		})
+		});
 		await prisma.setting.update({ where: { id: settingsId }, data: { proxyHash: null } });
 		await prisma.destinationDocker.update({
 			where: { id },
@@ -617,15 +684,17 @@ export async function startTraefikProxy(id: string): Promise<void> {
 }
 
 export async function configureNetworkTraefikProxy(destination: any): Promise<void> {
-	const { id } = destination
+	const { id } = destination;
 	const { stdout: networks } = await executeDockerCmd({
 		dockerId: id,
-		command:
-			`docker ps -a --filter name=coolify-proxy --format '{{json .Networks}}'`
+		command: `docker ps -a --filter name=coolify-proxy --format '{{json .Networks}}'`
 	});
 	const configuredNetworks = networks.replace(/"/g, '').replace('\n', '').split(',');
 	if (!configuredNetworks.includes(destination.network)) {
-		await executeDockerCmd({ dockerId: destination.id, command: `docker network connect ${destination.network} coolify-proxy` })
+		await executeDockerCmd({
+			dockerId: destination.id,
+			command: `docker network connect ${destination.network} coolify-proxy`
+		});
 	}
 }
 
@@ -643,10 +712,8 @@ export async function stopTraefikProxy(
 		if (found) {
 			await executeDockerCmd({
 				dockerId: id,
-				command:
-					`docker stop -t 0 coolify-proxy && docker rm coolify-proxy`
+				command: `docker stop -t 0 coolify-proxy && docker rm coolify-proxy`
 			});
-
 		}
 	} catch (error) {
 		return error;
@@ -659,10 +726,13 @@ export async function listSettings(): Promise<any> {
 	return settings;
 }
 
-
-export function generatePassword({ length = 24, symbols = false, isHex = false }: { length?: number, symbols?: boolean, isHex?: boolean } | null): string {
+export function generatePassword({
+	length = 24,
+	symbols = false,
+	isHex = false
+}: { length?: number; symbols?: boolean; isHex?: boolean } | null): string {
 	if (isHex) {
-		return crypto.randomBytes(length).toString("hex");
+		return crypto.randomBytes(length).toString('hex');
 	}
 	const password = generator.generate({
 		length,
@@ -791,11 +861,11 @@ export function generateDatabaseConfiguration(database: any, arch: string): Data
 			image: `${baseImage}:${version}`,
 			volume: `${id}-${type}-data:/bitnami/mysql/data`,
 			ulimits: {}
-		}
+		};
 		if (isARM(arch)) {
 			configuration.volume = `${id}-${type}-data:/var/lib/mysql`;
 		}
-		return configuration
+		return configuration;
 	} else if (type === 'mariadb') {
 		const configuration: DatabaseConfiguration = {
 			privatePort: 3306,
@@ -813,7 +883,7 @@ export function generateDatabaseConfiguration(database: any, arch: string): Data
 		if (isARM(arch)) {
 			configuration.volume = `${id}-${type}-data:/var/lib/mysql`;
 		}
-		return configuration
+		return configuration;
 	} else if (type === 'mongodb') {
 		const configuration: DatabaseConfiguration = {
 			privatePort: 27017,
@@ -829,10 +899,10 @@ export function generateDatabaseConfiguration(database: any, arch: string): Data
 			configuration.environmentVariables = {
 				MONGO_INITDB_ROOT_USERNAME: rootUser,
 				MONGO_INITDB_ROOT_PASSWORD: rootUserPassword
-			}
+			};
 			configuration.volume = `${id}-${type}-data:/data/db`;
 		}
-		return configuration
+		return configuration;
 	} else if (type === 'postgresql') {
 		const configuration: DatabaseConfiguration = {
 			privatePort: 5432,
@@ -845,16 +915,16 @@ export function generateDatabaseConfiguration(database: any, arch: string): Data
 			image: `${baseImage}:${version}`,
 			volume: `${id}-${type}-data:/bitnami/postgresql`,
 			ulimits: {}
-		}
+		};
 		if (isARM(arch)) {
 			configuration.volume = `${id}-${type}-data:/var/lib/postgresql`;
 			configuration.environmentVariables = {
 				POSTGRES_PASSWORD: dbUserPassword,
 				POSTGRES_USER: dbUser,
 				POSTGRES_DB: defaultDatabase
-			}
+			};
 		}
-		return configuration
+		return configuration;
 	} else if (type === 'redis') {
 		const { settings: { appendOnly } } = database;
 		const configuration: DatabaseConfiguration = {
@@ -870,9 +940,10 @@ export function generateDatabaseConfiguration(database: any, arch: string): Data
 		};
 		if (isARM(arch)) {
 			configuration.volume = `${id}-${type}-data:/data`;
-			configuration.command = `/usr/local/bin/redis-server --appendonly ${appendOnly ? 'yes' : 'no'} --requirepass ${dbUserPassword}`;
+			configuration.command = `/usr/local/bin/redis-server --appendonly ${appendOnly ? 'yes' : 'no'
+				} --requirepass ${dbUserPassword}`;
 		}
-		return configuration
+		return configuration;
 	} else if (type === 'couchdb') {
 		const configuration: DatabaseConfiguration = {
 			privatePort: 5984,
@@ -906,15 +977,15 @@ export function generateDatabaseConfiguration(database: any, arch: string): Data
 }
 export function isARM(arch: string) {
 	if (arch === 'arm' || arch === 'arm64') {
-		return true
+		return true;
 	}
-	return false
+	return false;
 }
 export function getDatabaseImage(type: string, arch: string): string {
 	const found = supportedDatabaseTypesAndVersions.find((t) => t.name === type);
 	if (found) {
 		if (isARM(arch)) {
-			return found.baseImageARM || found.baseImage
+			return found.baseImageARM || found.baseImage;
 		}
 		return found.baseImage;
 	}
@@ -925,14 +996,13 @@ export function getDatabaseVersions(type: string, arch: string): string[] {
 	const found = supportedDatabaseTypesAndVersions.find((t) => t.name === type);
 	if (found) {
 		if (isARM(arch)) {
-			return found.versionsARM || found.versions
+			return found.versionsARM || found.versions;
 		}
 		return found.versions;
 	}
 	return [];
 }
 
-
 export type ComposeFile = {
 	version: ComposerFileVersion;
 	services: Record<string, ComposeFileService>;
@@ -954,11 +1024,13 @@ export type ComposeFileService = {
 	depends_on?: string[];
 	command?: string;
 	ports?: string[];
-	build?: {
+	build?:
+	| {
 		context: string;
 		dockerfile: string;
 		args?: Record<string, unknown>;
-	} | string;
+	}
+	| string;
 	deploy?: {
 		restart_policy?: {
 			condition?: string;
@@ -1038,10 +1110,7 @@ export const createDirectories = async ({
 	};
 };
 
-
-export async function stopDatabaseContainer(
-	database: any
-): Promise<boolean> {
+export async function stopDatabaseContainer(database: any): Promise<boolean> {
 	let everStarted = false;
 	const {
 		id,
@@ -1050,7 +1119,10 @@ export async function stopDatabaseContainer(
 	} = database;
 	if (destinationDockerId) {
 		try {
-			const { stdout } = await executeDockerCmd({ dockerId, command: `docker inspect --format '{{json .State}}' ${id}` })
+			const { stdout } = await executeDockerCmd({
+				dockerId,
+				command: `docker inspect --format '{{json .State}}' ${id}`
+			});
 
 			if (stdout) {
 				everStarted = true;
@@ -1063,7 +1135,6 @@ export async function stopDatabaseContainer(
 	return everStarted;
 }
 
-
 export async function stopTcpHttpProxy(
 	id: string,
 	destinationDocker: any,
@@ -1078,17 +1149,14 @@ export async function stopTcpHttpProxy(
 		if (found) {
 			return await executeDockerCmd({
 				dockerId,
-				command:
-					`docker stop -t 0 ${container} && docker rm ${container}`
+				command: `docker stop -t 0 ${container} && docker rm ${container}`
 			});
-
 		}
 	} catch (error) {
 		return error;
 	}
 }
 
-
 export async function updatePasswordInDb(database, user, newPassword, isRoot) {
 	const {
 		id,
@@ -1106,55 +1174,52 @@ export async function updatePasswordInDb(database, user, newPassword, isRoot) {
 			await executeDockerCmd({
 				dockerId,
 				command: `docker exec ${id} mysql -u ${rootUser} -p${rootUserPassword} -e \"ALTER USER '${user}'@'%' IDENTIFIED WITH caching_sha2_password BY '${newPassword}';\"`
-			})
+			});
 		} else if (type === 'mariadb') {
 			await executeDockerCmd({
 				dockerId,
 				command: `docker exec ${id} mysql -u ${rootUser} -p${rootUserPassword} -e \"SET PASSWORD FOR '${user}'@'%' = PASSWORD('${newPassword}');\"`
-			})
-
+			});
 		} else if (type === 'postgresql') {
 			if (isRoot) {
 				await executeDockerCmd({
 					dockerId,
 					command: `docker exec ${id} psql postgresql://postgres:${rootUserPassword}@${id}:5432/${defaultDatabase} -c "ALTER role postgres WITH PASSWORD '${newPassword}'"`
-				})
+				});
 			} else {
 				await executeDockerCmd({
 					dockerId,
 					command: `docker exec ${id} psql postgresql://${dbUser}:${dbUserPassword}@${id}:5432/${defaultDatabase} -c "ALTER role ${user} WITH PASSWORD '${newPassword}'"`
-				})
+				});
 			}
 		} else if (type === 'mongodb') {
 			await executeDockerCmd({
 				dockerId,
 				command: `docker exec ${id} mongo 'mongodb://${rootUser}:${rootUserPassword}@${id}:27017/admin?readPreference=primary&ssl=false' --eval "db.changeUserPassword('${user}','${newPassword}')"`
-			})
-
+			});
 		} else if (type === 'redis') {
 			await executeDockerCmd({
 				dockerId,
 				command: `docker exec ${id} redis-cli -u redis://${dbUserPassword}@${id}:6379 --raw CONFIG SET requirepass ${newPassword}`
-			})
-
+			});
 		}
 	}
 }
 export async function checkExposedPort({ id, configuredPort, exposePort, engine, remoteEngine, remoteIpAddress }: { id: string, configuredPort?: number, exposePort: number, engine: string, remoteEngine: boolean, remoteIpAddress?: string }) {
 	if (exposePort < 1024 || exposePort > 65535) {
-		throw { status: 500, message: `Exposed Port needs to be between 1024 and 65535.` }
+		throw { status: 500, message: `Exposed Port needs to be between 1024 and 65535.` };
 	}
 	if (configuredPort) {
 		if (configuredPort !== exposePort) {
 			const availablePort = await getFreeExposedPort(id, exposePort, engine, remoteEngine, remoteIpAddress);
 			if (availablePort.toString() !== exposePort.toString()) {
-				throw { status: 500, message: `Port ${exposePort} is already in use.` }
+				throw { status: 500, message: `Port ${exposePort} is already in use.` };
 			}
 		}
 	} else {
 		const availablePort = await getFreeExposedPort(id, exposePort, engine, remoteEngine, remoteIpAddress);
 		if (availablePort.toString() !== exposePort.toString()) {
-			throw { status: 500, message: `Port ${exposePort} is already in use.` }
+			throw { status: 500, message: `Port ${exposePort} is already in use.` };
 		}
 	}
 }
@@ -1207,7 +1272,7 @@ export async function getFreeExposedPort(id, exposePort, engine, remoteEngine, r
 	}
 }
 export function generateRangeArray(start, end) {
-	return Array.from({ length: (end - start) }, (v, k) => k + start);
+	return Array.from({ length: end - start }, (v, k) => k + start);
 }
 export async function getFreePublicPort({ id, remoteEngine, engine, remoteIpAddress }) {
 	const { default: isReachable } = await import('is-port-reachable');
@@ -1300,24 +1365,28 @@ export async function startTraefikTCPProxy(
 
 	let dependentId = id;
 	if (type === 'wordpressftp') dependentId = `${id}-ftp`;
-	const foundDependentContainer = await checkContainer({ dockerId, container: dependentId, remove: true });
+	const foundDependentContainer = await checkContainer({
+		dockerId,
+		container: dependentId,
+		remove: true
+	});
 	try {
 		if (foundDependentContainer && !found) {
 			const { stdout: Config } = await executeDockerCmd({
 				dockerId,
 				command: `docker network inspect ${network} --format '{{json .IPAM.Config }}'`
-			})
+			});
 
 			const ip = JSON.parse(Config)[0].Gateway;
-			let traefikUrl = otherTraefikEndpoint
+			let traefikUrl = otherTraefikEndpoint;
 			if (remoteEngine) {
-				let ip = null
+				let ip = null;
 				if (isDev) {
-					ip = getAPIUrl()
+					ip = getAPIUrl();
 				} else {
-					ip = `http://${ipv4 || ipv6}:3000`
+					ip = `http://${ipv4 || ipv6}:3000`;
 				}
-				traefikUrl = `${ip}/webhooks/traefik/other.json`
+				traefikUrl = `${ip}/webhooks/traefik/other.json`;
 			}
 			const tcpProxy = {
 				version: '3.8',
@@ -1353,28 +1422,37 @@ export async function startTraefikTCPProxy(
 			await executeDockerCmd({
 				dockerId,
 				command: `docker compose -f /tmp/docker-compose-${id}.yaml up -d`
-			})
+			});
 			await fs.rm(`/tmp/docker-compose-${id}.yaml`);
 		}
 		if (!foundDependentContainer && found) {
 			await executeDockerCmd({
 				dockerId,
 				command: `docker stop -t 0 ${container} && docker rm ${container}`
-			})
+			});
 		}
 	} catch (error) {
 		return error;
 	}
 }
 
-export async function getServiceFromDB({ id, teamId }: { id: string; teamId: string }): Promise<any> {
+export async function getServiceFromDB({
+	id,
+	teamId
+}: {
+	id: string;
+	teamId: string;
+}): Promise<any> {
 	const settings = await prisma.setting.findFirst();
 	const body = await prisma.service.findFirst({
 		where: { id, teams: { some: { id: teamId === '0' ? undefined : teamId } } },
 		include: includeServices
 	});
-	let { type } = body
-	type = fixType(type)
+	if (!body) {
+		return null
+	}
+	let { type } = body;
+	type = fixType(type);
 
 	if (body?.serviceSecret.length > 0) {
 		body.serviceSecret = body.serviceSecret.map((s) => {
@@ -1383,7 +1461,7 @@ export async function getServiceFromDB({ id, teamId }: { id: string; teamId: str
 		});
 	}
 
-	body[type] = { ...body[type], ...getUpdateableFields(type, body[type]) }
+	body[type] = { ...body[type], ...getUpdateableFields(type, body[type]) };
 	return { ...body, settings };
 }
 
@@ -1407,52 +1485,52 @@ export function saveUpdateableFields(type: string, data: any) {
 	const update = {};
 	if (type && serviceFields[type]) {
 		serviceFields[type].map((k) => {
-			let temp = data[k.name]
+			let temp = data[k.name];
 			if (temp) {
 				if (k.isEncrypted) {
-					temp = encrypt(temp)
+					temp = encrypt(temp);
 				}
 				if (k.isLowerCase) {
-					temp = temp.toLowerCase()
+					temp = temp.toLowerCase();
 				}
 				if (k.isNumber) {
-					temp = Number(temp)
+					temp = Number(temp);
 				}
 				if (k.isBoolean) {
-					temp = Boolean(temp)
+					temp = Boolean(temp);
 				}
 			}
 			if (k.isNumber && temp === '') {
-				temp = null
+				temp = null;
 			}
-			update[k.name] = temp
+			update[k.name] = temp;
 		});
 	}
-	return update
+	return update;
 }
 
 export function getUpdateableFields(type: string, data: any) {
 	const update = {};
 	if (type && serviceFields[type]) {
 		serviceFields[type].map((k) => {
-			let temp = data[k.name]
+			let temp = data[k.name];
 			if (temp) {
 				if (k.isEncrypted) {
-					temp = decrypt(temp)
+					temp = decrypt(temp);
 				}
-				update[k.name] = temp
+				update[k.name] = temp;
 			}
-			update[k.name] = temp
+			update[k.name] = temp;
 		});
 	}
-	return update
+	return update;
 }
 
 export function fixType(type) {
 	// Hack to fix the type case sensitivity...
 	if (type === 'plausibleanalytics') type = 'plausibleAnalytics';
 	if (type === 'meilisearch') type = 'meiliSearch';
-	return type
+	return type;
 }
 
 export const getServiceMainPort = (service: string) => {
@@ -1463,7 +1541,6 @@ export const getServiceMainPort = (service: string) => {
 	return null;
 };
 
-
 export function makeLabelForServices(type) {
 	return [
 		'coolify.managed=true',
@@ -1472,8 +1549,14 @@ export function makeLabelForServices(type) {
 		`coolify.service.type=${type}`
 	];
 }
-export function errorHandler({ status = 500, message = 'Unknown error.' }: { status: number, message: string | any }) {
-	if (message.message) message = message.message
+export function errorHandler({
+	status = 500,
+	message = 'Unknown error.'
+}: {
+	status: number;
+	message: string | any;
+}) {
+	if (message.message) message = message.message;
 	throw { status, message };
 }
 export async function generateSshKeyPair(): Promise<{ publicKey: string; privateKey: string }> {
@@ -1494,8 +1577,12 @@ export async function generateSshKeyPair(): Promise<{ publicKey: string; private
 export async function stopBuild(buildId, applicationId) {
 	let count = 0;
 	await new Promise<void>(async (resolve, reject) => {
-		const { destinationDockerId, status } = await prisma.build.findFirst({ where: { id: buildId } });
-		const { id: dockerId } = await prisma.destinationDocker.findFirst({ where: { id: destinationDockerId } });
+		const { destinationDockerId, status } = await prisma.build.findFirst({
+			where: { id: buildId }
+		});
+		const { id: dockerId } = await prisma.destinationDocker.findFirst({
+			where: { id: destinationDockerId }
+		});
 		const interval = setInterval(async () => {
 			try {
 				if (status === 'failed' || status === 'canceled') {
@@ -1505,12 +1592,15 @@ export async function stopBuild(buildId, applicationId) {
 				if (count > 15) {
 					clearInterval(interval);
 					if (scheduler.workers.has('deployApplication')) {
-						scheduler.workers.get('deployApplication').postMessage('cancel')
+						scheduler.workers.get('deployApplication').postMessage('cancel');
 					}
 					await cleanupDB(buildId, applicationId);
 					return reject(new Error('Deployment canceled.'));
 				}
-				const { stdout: buildContainers } = await executeDockerCmd({ dockerId, command: `docker container ls --filter "label=coolify.buildId=${buildId}" --format '{{json .}}'` })
+				const { stdout: buildContainers } = await executeDockerCmd({
+					dockerId,
+					command: `docker container ls --filter "label=coolify.buildId=${buildId}" --format '{{json .}}'`
+				});
 				if (buildContainers) {
 					const containersArray = buildContainers.trim().split('\n');
 					for (const container of containersArray) {
@@ -1520,7 +1610,7 @@ export async function stopBuild(buildId, applicationId) {
 							await removeContainer({ id, dockerId });
 							clearInterval(interval);
 							if (scheduler.workers.has('deployApplication')) {
-								scheduler.workers.get('deployApplication').postMessage('cancel')
+								scheduler.workers.get('deployApplication').postMessage('cancel');
 							}
 							await cleanupDB(buildId, applicationId);
 							return resolve();
@@ -1543,37 +1633,43 @@ async function cleanupDB(buildId: string, applicationId: string) {
 
 export function convertTolOldVolumeNames(type) {
 	if (type === 'nocodb') {
-		return 'nc'
+		return 'nc';
 	}
 }
 
 export async function cleanupDockerStorage(dockerId, lowDiskSpace, force) {
 	// Cleanup old coolify images
 	try {
-		let { stdout: images } = await executeDockerCmd({ dockerId, command: `docker images coollabsio/coolify --filter before="coollabsio/coolify:${version}" -q | xargs -r` })
+		let { stdout: images } = await executeDockerCmd({
+			dockerId,
+			command: `docker images coollabsio/coolify --filter before="coollabsio/coolify:${version}" -q | xargs -r`
+		});
 
 		images = images.trim();
 		if (images) {
-			await executeDockerCmd({ dockerId, command: `docker rmi -f ${images}" -q | xargs -r` })
+			await executeDockerCmd({ dockerId, command: `docker rmi -f ${images}" -q | xargs -r` });
 		}
 	} catch (error) { }
 	if (lowDiskSpace || force) {
 		if (isDev) {
 			if (!force) console.log(`[DEV MODE] Low disk space: ${lowDiskSpace}`);
-			return
+			return;
 		}
 		try {
-			await executeDockerCmd({ dockerId, command: `docker container prune -f --filter "label=coolify.managed=true"` })
+			await executeDockerCmd({
+				dockerId,
+				command: `docker container prune -f --filter "label=coolify.managed=true"`
+			});
 		} catch (error) { }
 		try {
-			await executeDockerCmd({ dockerId, command: `docker image prune -f` })
+			await executeDockerCmd({ dockerId, command: `docker image prune -f` });
 		} catch (error) { }
 		try {
-			await executeDockerCmd({ dockerId, command: `docker image prune -a -f` })
+			await executeDockerCmd({ dockerId, command: `docker image prune -a -f` });
 		} catch (error) { }
 		// Cleanup build caches
 		try {
-			await executeDockerCmd({ dockerId, command: `docker builder prune -a -f` })
+			await executeDockerCmd({ dockerId, command: `docker builder prune -a -f` });
 		} catch (error) { }
 	}
 }
@@ -1587,7 +1683,6 @@ export function persistentVolumes(id, persistentStorage, config) {
 					volumeSet.add(volume);
 				}
 			}
-
 		}
 	}
 	const volumesArray = Array.from(volumeSet);
@@ -1596,21 +1691,21 @@ export function persistentVolumes(id, persistentStorage, config) {
 			return `${id}${storage.path.replace(/\//gi, '-')}:${storage.path}`;
 		}) || [];
 
-	let volumes = [...persistentVolume]
-	if (volumesArray) volumes = [...volumesArray, ...volumes]
-	const composeVolumes = volumes.length > 0 && volumes.map((volume) => {
-		return {
-			[`${volume.split(':')[0]}`]: {
-				name: volume.split(':')[0]
-			}
-		};
-	}) || []
+	let volumes = [...persistentVolume];
+	if (volumesArray) volumes = [...volumesArray, ...volumes];
+	const composeVolumes =
+		(volumes.length > 0 &&
+			volumes.map((volume) => {
+				return {
+					[`${volume.split(':')[0]}`]: {
+						name: volume.split(':')[0]
+					}
+				};
+			})) ||
+		[];
 
-	const volumeMounts = Object.assign(
-		{},
-		...composeVolumes
-	) || {}
-	return { volumeMounts }
+	const volumeMounts = Object.assign({}, ...composeVolumes) || {};
+	return { volumeMounts };
 }
 export function defaultComposeConfiguration(network: string): any {
 	return {
@@ -1624,25 +1719,29 @@ export function defaultComposeConfiguration(network: string): any {
 				window: '120s'
 			}
 		}
-	}
+	};
 }
 export function decryptApplication(application: any) {
 	if (application) {
 		if (application?.gitSource?.githubApp?.clientSecret) {
-			application.gitSource.githubApp.clientSecret = decrypt(application.gitSource.githubApp.clientSecret) || null;
+			application.gitSource.githubApp.clientSecret =
+				decrypt(application.gitSource.githubApp.clientSecret) || null;
 		}
 		if (application?.gitSource?.githubApp?.webhookSecret) {
-			application.gitSource.githubApp.webhookSecret = decrypt(application.gitSource.githubApp.webhookSecret) || null;
+			application.gitSource.githubApp.webhookSecret =
+				decrypt(application.gitSource.githubApp.webhookSecret) || null;
 		}
 		if (application?.gitSource?.githubApp?.privateKey) {
-			application.gitSource.githubApp.privateKey = decrypt(application.gitSource.githubApp.privateKey) || null;
+			application.gitSource.githubApp.privateKey =
+				decrypt(application.gitSource.githubApp.privateKey) || null;
 		}
 		if (application?.gitSource?.gitlabApp?.appSecret) {
-			application.gitSource.gitlabApp.appSecret = decrypt(application.gitSource.gitlabApp.appSecret) || null;
+			application.gitSource.gitlabApp.appSecret =
+				decrypt(application.gitSource.gitlabApp.appSecret) || null;
 		}
 		if (application?.secrets.length > 0) {
 			application.secrets = application.secrets.map((s: any) => {
-				s.value = decrypt(s.value) || null
+				s.value = decrypt(s.value) || null;
 				return s;
 			});
 		}
diff --git a/apps/api/src/lib/scheduler.ts b/apps/api/src/lib/scheduler.ts
index ebff53e12..743463757 100644
--- a/apps/api/src/lib/scheduler.ts
+++ b/apps/api/src/lib/scheduler.ts
@@ -9,8 +9,8 @@ Bree.extend(TSBree);
 
 const options: any = {
 	defaultExtension: 'js',
-	// logger: new Cabin(),
-	logger: false,
+	logger: new Cabin(),
+	// logger: false,
 	workerMessageHandler: async ({ name, message }) => {
 		if (name === 'deployApplication' && message?.deploying) {
 			if (scheduler.workers.has('autoUpdater') || scheduler.workers.has('cleanupStorage')) {
diff --git a/apps/api/src/lib/services/common.ts b/apps/api/src/lib/services/common.ts
index f6174ca69..716dc44c0 100644
--- a/apps/api/src/lib/services/common.ts
+++ b/apps/api/src/lib/services/common.ts
@@ -20,7 +20,7 @@ export const includeServices: any = {
 	glitchTip: true,
 	searxng: true,
 	weblate: true,
-	taiga: true
+	taiga: true,
 };
 export async function configureServiceType({
 	id,
@@ -378,6 +378,6 @@ export async function removeService({ id }: { id: string }): Promise<void> {
 	await prisma.searxng.deleteMany({ where: { serviceId: id } });
 	await prisma.weblate.deleteMany({ where: { serviceId: id } });
 	await prisma.taiga.deleteMany({ where: { serviceId: id } });
-	
+
 	await prisma.service.delete({ where: { id } });
 }
\ No newline at end of file
diff --git a/apps/api/src/lib/services/handlers.ts b/apps/api/src/lib/services/handlers.ts
index f6aaa6be5..227383f9a 100644
--- a/apps/api/src/lib/services/handlers.ts
+++ b/apps/api/src/lib/services/handlers.ts
@@ -5,6 +5,7 @@ import bcrypt from 'bcryptjs';
 import { ServiceStartStop } from '../../routes/api/v1/services/types';
 import { asyncSleep, ComposeFile, createDirectories, defaultComposeConfiguration, errorHandler, executeDockerCmd, getDomain, getFreePublicPort, getServiceFromDB, getServiceImage, getServiceMainPort, isARM, isDev, makeLabelForServices, persistentVolumes, prisma } from '../common';
 import { defaultServiceConfigurations } from '../services';
+import { OnlyId } from '../../types';
 
 export async function startService(request: FastifyRequest<ServiceStartStop>) {
     try {
@@ -69,6 +70,13 @@ export async function startService(request: FastifyRequest<ServiceStartStop>) {
         if (type === 'taiga') {
             return await startTaigaService(request)
         }
+        if (type === 'grafana') {
+            return await startGrafanaService(request)
+        }
+        if (type === 'trilium') {
+            return await startTriliumService(request)
+        }
+
         throw `Service type ${type} not supported.`
     } catch (error) {
         throw { status: 500, message: error?.message || error }
@@ -314,7 +322,7 @@ async function startMinioService(request: FastifyRequest<ServiceStartStop>) {
             destinationDocker,
             persistentStorage,
             exposePort,
-            minio: { rootUser, rootUserPassword },
+            minio: { rootUser, rootUserPassword, apiFqdn },
             serviceSecret
         } = service;
 
@@ -333,7 +341,7 @@ async function startMinioService(request: FastifyRequest<ServiceStartStop>) {
                 image: `${image}:${version}`,
                 volumes: [`${id}-minio-data:/data`],
                 environmentVariables: {
-                    MINIO_SERVER_URL: fqdn,
+                    MINIO_SERVER_URL: apiFqdn,
                     MINIO_DOMAIN: getDomain(fqdn),
                     MINIO_ROOT_USER: rootUser,
                     MINIO_ROOT_PASSWORD: rootUserPassword,
@@ -900,8 +908,8 @@ async function startMeilisearchService(request: FastifyRequest<ServiceStartStop>
         const {
             meiliSearch: { masterKey }
         } = service;
-        const { type, version, destinationDockerId, destinationDocker, serviceSecret, exposePort, persistentStorage } =
-            service;
+        const { type, version, destinationDockerId, destinationDocker,
+            serviceSecret, exposePort, persistentStorage } = service;
         const network = destinationDockerId && destinationDocker.network;
         const port = getServiceMainPort('meilisearch');
 
@@ -2640,3 +2648,132 @@ async function startTaigaService(request: FastifyRequest<ServiceStartStop>) {
     }
 }
 
+async function startGrafanaService(request: FastifyRequest<ServiceStartStop>) {
+    try {
+        const { id } = request.params;
+        const teamId = request.user.teamId;
+        const service = await getServiceFromDB({ id, teamId });
+        const { type, version, destinationDockerId, destinationDocker, serviceSecret, exposePort, persistentStorage } =
+            service;
+        const network = destinationDockerId && destinationDocker.network;
+        const port = getServiceMainPort('grafana');
+
+        const { workdir } = await createDirectories({ repository: type, buildId: id });
+        const image = getServiceImage(type);
+
+        const config = {
+            grafana: {
+                image: `${image}:${version}`,
+                volumes: [`${id}-grafana:/var/lib/grafana`],
+                environmentVariables: {}
+            }
+        };
+        if (serviceSecret.length > 0) {
+            serviceSecret.forEach((secret) => {
+                config.grafana.environmentVariables[secret.name] = secret.value;
+            });
+        }
+        const { volumeMounts } = persistentVolumes(id, persistentStorage, config)
+        const composeFile: ComposeFile = {
+            version: '3.8',
+            services: {
+                [id]: {
+                    container_name: id,
+                    image: config.grafana.image,
+                    volumes: config.grafana.volumes,
+                    environment: config.grafana.environmentVariables,
+                    ...(exposePort ? { ports: [`${exposePort}:${port}`] } : {}),
+                    labels: makeLabelForServices('grafana'),
+                    ...defaultComposeConfiguration(network),
+                }
+            },
+            networks: {
+                [network]: {
+                    external: true
+                }
+            },
+            volumes: volumeMounts
+        };
+        const composeFileDestination = `${workdir}/docker-compose.yaml`;
+        await fs.writeFile(composeFileDestination, yaml.dump(composeFile));
+        await startServiceContainers(destinationDocker.id, composeFileDestination)
+        return {}
+    } catch ({ status, message }) {
+        return errorHandler({ status, message })
+    }
+}
+async function startTriliumService(request: FastifyRequest<ServiceStartStop>) {
+    try {
+        const { id } = request.params;
+        const teamId = request.user.teamId;
+        const service = await getServiceFromDB({ id, teamId });
+        const { type, version, destinationDockerId, destinationDocker, serviceSecret, exposePort, persistentStorage } =
+            service;
+        const network = destinationDockerId && destinationDocker.network;
+        const port = getServiceMainPort('trilium');
+
+        const { workdir } = await createDirectories({ repository: type, buildId: id });
+        const image = getServiceImage(type);
+
+        const config = {
+            trilium: {
+                image: `${image}:${version}`,
+                volumes: [`${id}-trilium:/home/node/trilium-data`],
+                environmentVariables: {}
+            }
+        };
+        if (serviceSecret.length > 0) {
+            serviceSecret.forEach((secret) => {
+                config.trilium.environmentVariables[secret.name] = secret.value;
+            });
+        }
+        const { volumeMounts } = persistentVolumes(id, persistentStorage, config)
+        const composeFile: ComposeFile = {
+            version: '3.8',
+            services: {
+                [id]: {
+                    container_name: id,
+                    image: config.trilium.image,
+                    volumes: config.trilium.volumes,
+                    environment: config.trilium.environmentVariables,
+                    ...(exposePort ? { ports: [`${exposePort}:${port}`] } : {}),
+                    labels: makeLabelForServices('trilium'),
+                    ...defaultComposeConfiguration(network),
+                }
+            },
+            networks: {
+                [network]: {
+                    external: true
+                }
+            },
+            volumes: volumeMounts
+        };
+        const composeFileDestination = `${workdir}/docker-compose.yaml`;
+        await fs.writeFile(composeFileDestination, yaml.dump(composeFile));
+        await startServiceContainers(destinationDocker.id, composeFileDestination)
+        return {}
+    } catch ({ status, message }) {
+        return errorHandler({ status, message })
+    }
+}
+
+export async function migrateAppwriteDB(request: FastifyRequest<OnlyId>, reply: FastifyReply) {
+    try {
+        const { id } = request.params
+        const teamId = request.user.teamId;
+        const {
+            destinationDockerId,
+            destinationDocker,
+        } = await getServiceFromDB({ id, teamId });
+        if (destinationDockerId) {
+            await executeDockerCmd({
+                dockerId: destinationDocker.id,
+                command: `docker exec ${id} migrate`
+            })
+            return await reply.code(201).send()
+        }
+        throw { status: 500, message: 'Could cleanup logs.' }
+    } catch ({ status, message }) {
+        return errorHandler({ status, message })
+    }
+}
diff --git a/apps/api/src/lib/services/supportedVersions.ts b/apps/api/src/lib/services/supportedVersions.ts
index 643215105..526f49379 100644
--- a/apps/api/src/lib/services/supportedVersions.ts
+++ b/apps/api/src/lib/services/supportedVersions.ts
@@ -172,8 +172,8 @@ export const supportedServiceTypesAndVersions = [
 		fancyName: 'Appwrite',
 		baseImage: 'appwrite/appwrite',
 		images: ['mariadb:10.7', 'redis:6.2-alpine', 'appwrite/telegraf:1.4.0'],
-		versions: ['latest', '1.0','0.15.3'],
-		recommendedVersion: '0.15.3',
+		versions: ['latest', '1.0', '0.15.3'],
+		recommendedVersion: '1.0',
 		ports: {
 			main: 80
 		}
@@ -233,4 +233,26 @@ export const supportedServiceTypesAndVersions = [
 	// 		main: 80
 	// 	}
 	// },
+	{
+		name: 'grafana',
+		fancyName: 'Grafana Dashboard',
+		baseImage: 'grafana/grafana',
+		images: [],
+		versions: ['latest', '9.1.3', '9.1.2', '9.0.8', '8.3.11', '8.4.11', '8.5.11'],
+		recommendedVersion: 'latest',
+		ports: {
+			main: 3000
+		}
+	},
+	{
+		name: 'trilium',
+		fancyName: 'Trilium Notes',
+		baseImage: 'zadam/trilium',
+		images: [],
+		versions: ['latest'],
+		recommendedVersion: 'latest',
+		ports: {
+			main: 8080
+		}
+	},
 ];
\ No newline at end of file
diff --git a/apps/api/src/routes/api/v1/applications/handlers.ts b/apps/api/src/routes/api/v1/applications/handlers.ts
index ffb9e64d4..0a2414a12 100644
--- a/apps/api/src/routes/api/v1/applications/handlers.ts
+++ b/apps/api/src/routes/api/v1/applications/handlers.ts
@@ -321,17 +321,12 @@ export async function saveApplication(request: FastifyRequest<SaveApplication>,
 export async function saveApplicationSettings(request: FastifyRequest<SaveApplicationSettings>, reply: FastifyReply) {
     try {
         const { id } = request.params
-        const { debug, previews, dualCerts, autodeploy, branch, projectId, isBot, isDBBranching } = request.body
-        // const isDouble = await checkDoubleBranch(branch, projectId);
-        // if (isDouble && autodeploy) {
-        //     await prisma.applicationSettings.updateMany({ where: { application: { branch, projectId } }, data: { autodeploy: false } })
-        //     throw { status: 500, message: 'Cannot activate automatic deployments until only one application is defined for this repository / branch.' }
-        // }
+        const { debug, previews, dualCerts, autodeploy, branch, projectId, isBot, isDBBranching, isCustomSSL } = request.body
         await prisma.application.update({
             where: { id },
-            data: { fqdn: isBot ? null : undefined, settings: { update: { debug, previews, dualCerts, autodeploy, isBot, isDBBranching } } },
+            data: { fqdn: isBot ? null : undefined, settings: { update: { debug, previews, dualCerts, autodeploy, isBot, isDBBranching, isCustomSSL } } },
             include: { destinationDocker: true }
-        });
+        }); 
         return reply.code(201).send();
     } catch ({ status, message }) {
         return errorHandler({ status, message })
@@ -787,64 +782,74 @@ export async function saveConnectedDatabase(request, reply) {
 export async function getSecrets(request: FastifyRequest<OnlyId>) {
     try {
         const { id } = request.params
+
         let secrets = await prisma.secret.findMany({
-            where: { applicationId: id },
-            orderBy: { createdAt: 'desc' }
+            where: { applicationId: id, isPRMRSecret: false },
+            orderBy: { createdAt: 'asc' }
         });
+        let previewSecrets = await prisma.secret.findMany({
+            where: { applicationId: id, isPRMRSecret: true },
+            orderBy: { createdAt: 'asc' }
+        });
+
         secrets = secrets.map((secret) => {
             secret.value = decrypt(secret.value);
             return secret;
         });
-        secrets = secrets.filter((secret) => !secret.isPRMRSecret).sort((a, b) => {
-            return ('' + a.name).localeCompare(b.name);
-        })
+        previewSecrets = previewSecrets.map((secret) => {
+            secret.value = decrypt(secret.value);
+            return secret;
+        });
+
         return {
-            secrets
+            previewSecrets: previewSecrets.sort((a, b) => {
+                return ('' + a.name).localeCompare(b.name);
+            }),
+            secrets: secrets.sort((a, b) => {
+                return ('' + a.name).localeCompare(b.name);
+            })
         }
     } catch ({ status, message }) {
         return errorHandler({ status, message })
     }
 }
 
+export async function updatePreviewSecret(request: FastifyRequest<SaveSecret>, reply: FastifyReply) {
+    try {
+        const { id } = request.params
+        const { name, value } = request.body
+        await prisma.secret.updateMany({
+            where: { applicationId: id, name, isPRMRSecret: true },
+            data: { value: encrypt(value.trim()) }
+        });
+        return reply.code(201).send()
+    } catch ({ status, message }) {
+        return errorHandler({ status, message })
+    }
+}
+export async function updateSecret(request: FastifyRequest<SaveSecret>, reply: FastifyReply) {
+    try {
+        const { id } = request.params
+        const { name, value, isBuildSecret = undefined } = request.body
+        await prisma.secret.updateMany({
+            where: { applicationId: id, name },
+            data: { value: encrypt(value.trim()), isBuildSecret }
+        });
+        return reply.code(201).send()
+    } catch ({ status, message }) {
+        return errorHandler({ status, message })
+    }
+}
 export async function saveSecret(request: FastifyRequest<SaveSecret>, reply: FastifyReply) {
     try {
         const { id } = request.params
-        let { name, value, isBuildSecret, isPRMRSecret, isNew } = request.body
-        if (isNew) {
-            const found = await prisma.secret.findFirst({ where: { name, applicationId: id, isPRMRSecret } });
-            if (found) {
-                throw { status: 500, message: `Secret ${name} already exists.` }
-            } else {
-                value = encrypt(value.trim());
-                await prisma.secret.create({
-                    data: { name, value, isBuildSecret, isPRMRSecret, application: { connect: { id } } }
-                });
-            }
-        } else {
-            if (value) {
-                value = encrypt(value.trim());
-            }
-            const found = await prisma.secret.findFirst({ where: { applicationId: id, name, isPRMRSecret } });
-
-            if (found) {
-                if (!value && isPRMRSecret) {
-                    await prisma.secret.deleteMany({
-                        where: { applicationId: id, name, isPRMRSecret }
-                    });
-                } else {
-
-                    await prisma.secret.updateMany({
-                        where: { applicationId: id, name, isPRMRSecret },
-                        data: { value, isBuildSecret, isPRMRSecret }
-                    });
-                }
-
-            } else {
-                await prisma.secret.create({
-                    data: { name, value, isBuildSecret, isPRMRSecret, application: { connect: { id } } }
-                });
-            }
-        }
+        const { name, value, isBuildSecret = false } = request.body
+        await prisma.secret.create({
+            data: { name, value: encrypt(value.trim()), isBuildSecret, isPRMRSecret: false, application: { connect: { id } } }
+        });
+        await prisma.secret.create({
+            data: { name, value: encrypt(value.trim()), isBuildSecret, isPRMRSecret: true, application: { connect: { id } } }
+        });
         return reply.code(201).send()
     } catch ({ status, message }) {
         return errorHandler({ status, message })
diff --git a/apps/api/src/routes/api/v1/applications/index.ts b/apps/api/src/routes/api/v1/applications/index.ts
index 74370de4d..af39e63ce 100644
--- a/apps/api/src/routes/api/v1/applications/index.ts
+++ b/apps/api/src/routes/api/v1/applications/index.ts
@@ -1,6 +1,6 @@
 import { FastifyPluginAsync } from 'fastify';
 import { OnlyId } from '../../../../types';
-import { cancelDeployment, checkDNS, checkDomain, checkRepository, deleteApplication, deleteSecret, deleteStorage, deployApplication, getApplication, getApplicationLogs, getApplicationStatus, getBuildIdLogs, getBuildPack, getBuilds, getGitHubToken, getGitLabSSHKey, getImages, getPreviews, getPreviewStatus, getSecrets, getStorages, getUsage, listApplications, loadPreviews, newApplication, restartApplication, restartPreview, saveApplication, saveApplicationSettings, saveApplicationSource, saveBuildPack, saveConnectedDatabase, saveDeployKey, saveDestination, saveGitLabSSHKey, saveRepository, saveSecret, saveStorage, stopApplication, stopPreviewApplication } from './handlers';
+import { cancelDeployment, checkDNS, checkDomain, checkRepository, deleteApplication, deleteSecret, deleteStorage, deployApplication, getApplication, getApplicationLogs, getApplicationStatus, getBuildIdLogs, getBuildPack, getBuilds, getGitHubToken, getGitLabSSHKey, getImages, getPreviews, getPreviewStatus, getSecrets, getStorages, getUsage, listApplications, loadPreviews, newApplication, restartApplication, restartPreview, saveApplication, saveApplicationSettings, saveApplicationSource, saveBuildPack, saveConnectedDatabase, saveDeployKey, saveDestination, saveGitLabSSHKey,  saveRepository, saveSecret, saveStorage, stopApplication, stopPreviewApplication, updatePreviewSecret, updateSecret } from './handlers';
 
 import type { CancelDeployment, CheckDNS, CheckDomain, CheckRepository, DeleteApplication, DeleteSecret, DeleteStorage, DeployApplication, GetApplicationLogs, GetBuildIdLogs, GetBuilds, GetImages, RestartPreviewApplication, SaveApplication, SaveApplicationSettings, SaveApplicationSource, SaveDeployKey, SaveDestination, SaveSecret, SaveStorage, StopPreviewApplication } from './types';
 
@@ -30,6 +30,8 @@ const root: FastifyPluginAsync = async (fastify): Promise<void> => {
 
     fastify.get<OnlyId>('/:id/secrets', async (request) => await getSecrets(request));
     fastify.post<SaveSecret>('/:id/secrets', async (request, reply) => await saveSecret(request, reply));
+    fastify.put<SaveSecret>('/:id/secrets', async (request, reply) => await updateSecret(request, reply));
+    fastify.put<SaveSecret>('/:id/secrets/preview', async (request, reply) => await updatePreviewSecret(request, reply));
     fastify.delete<DeleteSecret>('/:id/secrets', async (request) => await deleteSecret(request));
 
     fastify.get<OnlyId>('/:id/storages', async (request) => await getStorages(request));
diff --git a/apps/api/src/routes/api/v1/applications/types.ts b/apps/api/src/routes/api/v1/applications/types.ts
index 0699518a5..443deb00f 100644
--- a/apps/api/src/routes/api/v1/applications/types.ts
+++ b/apps/api/src/routes/api/v1/applications/types.ts
@@ -26,7 +26,7 @@ export interface SaveApplication extends OnlyId {
 }
 export interface SaveApplicationSettings extends OnlyId {
     Querystring: { domain: string; };
-    Body: { debug: boolean; previews: boolean; dualCerts: boolean; autodeploy: boolean; branch: string; projectId: number; isBot: boolean; isDBBranching: boolean };
+    Body: { debug: boolean; previews: boolean; dualCerts: boolean; autodeploy: boolean; branch: string; projectId: number; isBot: boolean; isDBBranching: boolean, isCustomSSL: boolean };
 }
 export interface DeleteApplication extends OnlyId {
     Querystring: { domain: string; };
@@ -65,7 +65,7 @@ export interface SaveSecret extends OnlyId {
         name: string,
         value: string,
         isBuildSecret: boolean,
-        isPRMRSecret: boolean,
+        previewSecret: boolean,
         isNew: boolean
     }
 }
diff --git a/apps/api/src/routes/api/v1/index.ts b/apps/api/src/routes/api/v1/index.ts
index bab30236b..1f5ab0696 100644
--- a/apps/api/src/routes/api/v1/index.ts
+++ b/apps/api/src/routes/api/v1/index.ts
@@ -1,6 +1,9 @@
 import { FastifyPluginAsync } from 'fastify';
 import { checkUpdate, login, showDashboard, update, resetQueue, getCurrentUser, cleanupManually, restartCoolify } from './handlers';
 import { GetCurrentUser } from './types';
+import pump from 'pump'
+import fs from 'fs'
+import { asyncExecShell, encrypt, errorHandler, prisma } from '../../../lib/common';
 
 export interface Update {
 	Body: { latestVersion: string }
@@ -23,9 +26,7 @@ const root: FastifyPluginAsync = async (fastify): Promise<void> => {
 		onRequest: [fastify.authenticate]
 	}, async (request) => await getCurrentUser(request, fastify));
 
-	fastify.get('/undead', {
-		onRequest: [fastify.authenticate]
-	}, async function () {
+	fastify.get('/undead', async function () {
 		return { message: 'nope' };
 	});
 
@@ -47,7 +48,7 @@ const root: FastifyPluginAsync = async (fastify): Promise<void> => {
 		onRequest: [fastify.authenticate]
 	}, async (request) => await restartCoolify(request));
 
-    fastify.post('/internal/resetQueue', {
+	fastify.post('/internal/resetQueue', {
 		onRequest: [fastify.authenticate]
 	}, async (request) => await resetQueue(request));
 
diff --git a/apps/api/src/routes/api/v1/services/index.ts b/apps/api/src/routes/api/v1/services/index.ts
index 454f4c06e..17ac60fdd 100644
--- a/apps/api/src/routes/api/v1/services/index.ts
+++ b/apps/api/src/routes/api/v1/services/index.ts
@@ -30,7 +30,7 @@ import {
 
 import type { OnlyId } from '../../../../types';
 import type { ActivateWordpressFtp, CheckService, CheckServiceDomain, DeleteServiceSecret, DeleteServiceStorage, GetServiceLogs, SaveService, SaveServiceDestination, SaveServiceSecret, SaveServiceSettings, SaveServiceStorage, SaveServiceType, SaveServiceVersion, ServiceStartStop, SetGlitchTipSettings, SetWordpressSettings } from './types';
-import { startService, stopService } from '../../../../lib/services/handlers';
+import { migrateAppwriteDB, startService, stopService } from '../../../../lib/services/handlers';
 
 const root: FastifyPluginAsync = async (fastify): Promise<void> => {
     fastify.addHook('onRequest', async (request) => {
@@ -76,6 +76,8 @@ const root: FastifyPluginAsync = async (fastify): Promise<void> => {
     fastify.post<OnlyId>('/:id/plausibleanalytics/activate', async (request, reply) => await activatePlausibleUsers(request, reply));
     fastify.post<OnlyId>('/:id/plausibleanalytics/cleanup', async (request, reply) => await cleanupPlausibleLogs(request, reply));
     fastify.post<ActivateWordpressFtp>('/:id/wordpress/ftp', async (request, reply) => await activateWordpressFtp(request, reply));
+
+    fastify.post<OnlyId>('/:id/appwrite/migrate', async (request, reply) => await migrateAppwriteDB(request, reply));
 };
 
 export default root;
diff --git a/apps/api/src/routes/api/v1/settings/handlers.ts b/apps/api/src/routes/api/v1/settings/handlers.ts
index 831ce606e..f6364e91d 100644
--- a/apps/api/src/routes/api/v1/settings/handlers.ts
+++ b/apps/api/src/routes/api/v1/settings/handlers.ts
@@ -1,8 +1,9 @@
 import { promises as dns } from 'dns';
+import { X509Certificate } from 'node:crypto';
 
 import type { FastifyReply, FastifyRequest } from 'fastify';
-import { checkDomainsIsValidInDNS, decrypt, encrypt, errorHandler, getDomain, isDNSValid, isDomainConfigured, listSettings, prisma } from '../../../../lib/common';
-import { CheckDNS, CheckDomain, DeleteDomain, DeleteSSHKey, SaveSettings, SaveSSHKey } from './types';
+import { asyncExecShell, checkDomainsIsValidInDNS, decrypt, encrypt, errorHandler, isDNSValid, isDomainConfigured, listSettings, prisma } from '../../../../lib/common';
+import { CheckDNS, CheckDomain, DeleteDomain, OnlyIdInBody, SaveSettings, SaveSSHKey } from './types';
 
 
 export async function listAllSettings(request: FastifyRequest) {
@@ -16,8 +17,16 @@ export async function listAllSettings(request: FastifyRequest) {
                 unencryptedKeys.push({ id: key.id, name: key.name, privateKey: decrypt(key.privateKey), createdAt: key.createdAt })
             }
         }
+        const certificates = await prisma.certificate.findMany({ where: { team: { id: teamId } } })
+        let cns = [];
+        for (const certificate of certificates) {
+            const x509 = new X509Certificate(certificate.cert);
+            cns.push({ commonName: x509.subject.split('\n').find((s) => s.startsWith('CN=')).replace('CN=', ''), id: certificate.id, createdAt: certificate.createdAt })
+        }
+
         return {
             settings,
+            certificates: cns,
             sshKeys: unencryptedKeys
         }
     } catch ({ status, message }) {
@@ -118,7 +127,7 @@ export async function saveSSHKey(request: FastifyRequest<SaveSSHKey>, reply: Fas
         return errorHandler({ status, message })
     }
 }
-export async function deleteSSHKey(request: FastifyRequest<DeleteSSHKey>, reply: FastifyReply) {
+export async function deleteSSHKey(request: FastifyRequest<OnlyIdInBody>, reply: FastifyReply) {
     try {
         const { id } = request.body;
         await prisma.sshKey.delete({ where: { id } })
@@ -126,4 +135,15 @@ export async function deleteSSHKey(request: FastifyRequest<DeleteSSHKey>, reply:
     } catch ({ status, message }) {
         return errorHandler({ status, message })
     }
+}
+
+export async function deleteCertificates(request: FastifyRequest<OnlyIdInBody>, reply: FastifyReply) {
+    try {
+        const { id } = request.body;
+        await asyncExecShell(`docker exec coolify-proxy sh -c 'rm -f /etc/traefik/acme/custom/${id}-key.pem /etc/traefik/acme/custom/${id}-cert.pem'`)
+        await prisma.certificate.delete({ where: { id } })
+        return reply.code(201).send()
+    } catch ({ status, message }) {
+        return errorHandler({ status, message })
+    }
 }
\ No newline at end of file
diff --git a/apps/api/src/routes/api/v1/settings/index.ts b/apps/api/src/routes/api/v1/settings/index.ts
index 96da5948b..45e418b34 100644
--- a/apps/api/src/routes/api/v1/settings/index.ts
+++ b/apps/api/src/routes/api/v1/settings/index.ts
@@ -1,21 +1,59 @@
 import { FastifyPluginAsync } from 'fastify';
-import { checkDNS, checkDomain, deleteDomain, deleteSSHKey, listAllSettings, saveSettings, saveSSHKey } from './handlers';
-import { CheckDNS, CheckDomain, DeleteDomain, DeleteSSHKey, SaveSettings, SaveSSHKey } from './types';
+import { X509Certificate } from 'node:crypto';
+
+import { encrypt, errorHandler, prisma } from '../../../../lib/common';
+import { checkDNS, checkDomain, deleteCertificates, deleteDomain, deleteSSHKey, listAllSettings, saveSettings, saveSSHKey } from './handlers';
+import { CheckDNS, CheckDomain, DeleteDomain, OnlyIdInBody, SaveSettings, SaveSSHKey } from './types';
 
 
 const root: FastifyPluginAsync = async (fastify): Promise<void> => {
-    fastify.addHook('onRequest', async (request) => {
-        return await request.jwtVerify()
-    })
-    fastify.get('/', async (request) => await listAllSettings(request));
-    fastify.post<SaveSettings>('/', async (request, reply) => await saveSettings(request, reply));
-    fastify.delete<DeleteDomain>('/', async (request, reply) => await deleteDomain(request, reply));
+	fastify.addHook('onRequest', async (request) => {
+		return await request.jwtVerify()
+	})
+	fastify.get('/', async (request) => await listAllSettings(request));
+	fastify.post<SaveSettings>('/', async (request, reply) => await saveSettings(request, reply));
+	fastify.delete<DeleteDomain>('/', async (request, reply) => await deleteDomain(request, reply));
 
-    fastify.get<CheckDNS>('/check', async (request) => await checkDNS(request));
-    fastify.post<CheckDomain>('/check', async (request) => await checkDomain(request));
+	fastify.get<CheckDNS>('/check', async (request) => await checkDNS(request));
+	fastify.post<CheckDomain>('/check', async (request) => await checkDomain(request));
 
-    fastify.post<SaveSSHKey>('/sshKey', async (request, reply) => await saveSSHKey(request, reply));
-    fastify.delete<DeleteSSHKey>('/sshKey', async (request, reply) => await deleteSSHKey(request, reply));
+	fastify.post<SaveSSHKey>('/sshKey', async (request, reply) => await saveSSHKey(request, reply));
+	fastify.delete<OnlyIdInBody>('/sshKey', async (request, reply) => await deleteSSHKey(request, reply));
+
+	fastify.post('/upload', async (request) => {
+		try {
+			const teamId = request.user.teamId;
+			const certificates = await prisma.certificate.findMany({})
+			let cns = [];
+			for (const certificate of certificates) {
+				const x509 = new X509Certificate(certificate.cert);
+				cns.push(x509.subject.split('\n').find((s) => s.startsWith('CN=')).replace('CN=', ''))
+			}
+			const parts = await request.files()
+			let key = null
+			let cert = null
+			for await (const part of parts) {
+				const name = part.fieldname
+				if (name === 'key') key = (await part.toBuffer()).toString()
+				if (name === 'cert') cert = (await part.toBuffer()).toString()
+			}
+			const x509 = new X509Certificate(cert);
+			const cn = x509.subject.split('\n').find((s) => s.startsWith('CN=')).replace('CN=', '')
+			if (cns.includes(cn)) {
+				throw {
+					message: `A certificate with ${cn} common name already exists.`
+				}
+			}
+			await prisma.certificate.create({ data: { cert, key: encrypt(key), team: { connect: { id: teamId } } } })
+			await prisma.applicationSettings.updateMany({ where: { application: { AND: [{ fqdn: { endsWith: cn } }, { fqdn: { startsWith: 'https' } }] } }, data: { isCustomSSL: true } })
+			return { message: 'Certificated uploaded' }
+		} catch ({ status, message }) {
+			return errorHandler({ status, message });
+		}
+
+	});
+	fastify.delete<OnlyIdInBody>('/certificate', async (request, reply) => await deleteCertificates(request, reply))
+	// fastify.get('/certificates', async (request) => await getCertificates(request))
 };
 
 export default root;
diff --git a/apps/api/src/routes/api/v1/settings/types.ts b/apps/api/src/routes/api/v1/settings/types.ts
index 956c58b5c..618101bba 100644
--- a/apps/api/src/routes/api/v1/settings/types.ts
+++ b/apps/api/src/routes/api/v1/settings/types.ts
@@ -41,4 +41,9 @@ export interface DeleteSSHKey {
     Body: {
        id: string
     }
+}
+export interface OnlyIdInBody {
+    Body: {
+        id: string
+     }
 }
\ No newline at end of file
diff --git a/apps/api/src/routes/webhooks/traefik/handlers.ts b/apps/api/src/routes/webhooks/traefik/handlers.ts
index d79c2cb01..381869430 100644
--- a/apps/api/src/routes/webhooks/traefik/handlers.ts
+++ b/apps/api/src/routes/webhooks/traefik/handlers.ts
@@ -6,7 +6,7 @@ import { TraefikOtherConfiguration } from "./types";
 import { OnlyId } from "../../../types";
 
 function configureMiddleware(
-	{ id, container, port, domain, nakedDomain, isHttps, isWWW, isDualCerts, scriptName, type },
+	{ id, container, port, domain, nakedDomain, isHttps, isWWW, isDualCerts, scriptName, type, isCustomSSL },
 	traefik
 ) {
 	if (isHttps) {
@@ -55,7 +55,7 @@ function configureMiddleware(
 				entrypoints: ['websecure'],
 				rule: `(Host(\`${nakedDomain}\`) || Host(\`www.${nakedDomain}\`)) && PathPrefix(\`/\`)`,
 				service: `${id}`,
-				tls: {
+				tls: isCustomSSL ? true : {
 					certresolver: 'letsencrypt'
 				},
 				middlewares: []
@@ -66,7 +66,7 @@ function configureMiddleware(
 					entrypoints: ['websecure'],
 					rule: `Host(\`www.${nakedDomain}\`) && PathPrefix(\`/\`)`,
 					service: `${id}`,
-					tls: {
+					tls: isCustomSSL ? true : {
 						certresolver: 'letsencrypt'
 					},
 					middlewares: []
@@ -99,7 +99,7 @@ function configureMiddleware(
 					entrypoints: ['websecure'],
 					rule: `Host(\`${domain}\`) && PathPrefix(\`/\`)`,
 					service: `${id}`,
-					tls: {
+					tls: isCustomSSL ? true : {
 						certresolver: 'letsencrypt'
 					},
 					middlewares: []
@@ -178,7 +178,19 @@ function configureMiddleware(
 
 export async function traefikConfiguration(request, reply) {
 	try {
+		const sslpath = '/etc/traefik/acme/custom';
+		const certificates = await prisma.certificate.findMany({ where: { team: { applications: { some: { settings: { isCustomSSL: true } } }, destinationDocker: { some: { remoteEngine: false, isCoolifyProxyUsed: true } } } } })
+		let parsedCertificates = []
+		for (const certificate of certificates) {
+			parsedCertificates.push({
+				certFile: `${sslpath}/${certificate.id}-cert.pem`,
+				keyFile: `${sslpath}/${certificate.id}-key.pem`
+			})
+		}
 		const traefik = {
+			tls: {
+				certificates: parsedCertificates
+			},
 			http: {
 				routers: {},
 				services: {},
@@ -224,7 +236,7 @@ export async function traefikConfiguration(request, reply) {
 				port,
 				destinationDocker,
 				destinationDockerId,
-				settings: { previews, dualCerts }
+				settings: { previews, dualCerts, isCustomSSL }
 			} = application;
 			if (destinationDockerId) {
 				const { network, id: dockerId } = destinationDocker;
@@ -244,7 +256,8 @@ export async function traefikConfiguration(request, reply) {
 							isRunning,
 							isHttps,
 							isWWW,
-							isDualCerts: dualCerts
+							isDualCerts: dualCerts,
+							isCustomSSL
 						});
 					}
 					if (previews) {
@@ -267,7 +280,8 @@ export async function traefikConfiguration(request, reply) {
 									nakedDomain,
 									isHttps,
 									isWWW,
-									isDualCerts: dualCerts
+									isDualCerts: dualCerts,
+									isCustomSSL
 								});
 							}
 						}
@@ -534,7 +548,19 @@ export async function traefikOtherConfiguration(request: FastifyRequest<TraefikO
 export async function remoteTraefikConfiguration(request: FastifyRequest<OnlyId>) {
 	const { id } = request.params
 	try {
+		const sslpath = '/etc/traefik/acme/custom';
+		const certificates = await prisma.certificate.findMany({ where: { team: { applications: { some: { settings: { isCustomSSL: true } } }, destinationDocker: { some: { id, remoteEngine: true, isCoolifyProxyUsed: true, remoteVerified: true } } } } })
+		let parsedCertificates = []
+		for (const certificate of certificates) {
+			parsedCertificates.push({
+				certFile: `${sslpath}/${certificate.id}-cert.pem`,
+				keyFile: `${sslpath}/${certificate.id}-key.pem`
+			})
+		}
 		const traefik = {
+			tls: {
+				certificates: parsedCertificates
+			},
 			http: {
 				routers: {},
 				services: {},
diff --git a/apps/ui/package.json b/apps/ui/package.json
index 74e232854..805539a5d 100644
--- a/apps/ui/package.json
+++ b/apps/ui/package.json
@@ -42,13 +42,14 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"dayjs": "1.11.5",
 		"@sveltejs/adapter-static": "1.0.0-next.39",
 		"@tailwindcss/typography": "^0.5.7",
 		"cuid": "2.1.8",
 		"daisyui": "2.24.2",
+		"dayjs": "1.11.5",
 		"js-cookie": "3.0.1",
 		"p-limit": "4.0.0",
+		"svelte-file-dropzone": "^1.0.0",
 		"svelte-select": "4.4.7",
 		"sveltekit-i18n": "2.2.2"
 	}
diff --git a/apps/ui/src/lib/api.ts b/apps/ui/src/lib/api.ts
index 697a29338..ed781b8a7 100644
--- a/apps/ui/src/lib/api.ts
+++ b/apps/ui/src/lib/api.ts
@@ -3,33 +3,35 @@ import Cookies from 'js-cookie';
 
 export function getAPIUrl() {
 	if (GITPOD_WORKSPACE_URL) {
-		const { href } = new URL(GITPOD_WORKSPACE_URL)
-		const newURL = href.replace('https://', 'https://3001-').replace(/\/$/, '')
-		return newURL
+		const { href } = new URL(GITPOD_WORKSPACE_URL);
+		const newURL = href.replace('https://', 'https://3001-').replace(/\/$/, '');
+		return newURL;
 	}
 	if (CODESANDBOX_HOST) {
-		     return `https://${CODESANDBOX_HOST.replace(/\$PORT/,'3001')}`
+		return `https://${CODESANDBOX_HOST.replace(/\$PORT/, '3001')}`;
 	}
-	return dev ? 'http://localhost:3001' : 'http://localhost:3000';
+	return dev
+		? 'http://localhost:3001'
+		: 'http://localhost:3000';
 }
 export function getWebhookUrl(type: string) {
 	if (GITPOD_WORKSPACE_URL) {
-		const { href } = new URL(GITPOD_WORKSPACE_URL)
-		const newURL = href.replace('https://', 'https://3001-').replace(/\/$/, '')
+		const { href } = new URL(GITPOD_WORKSPACE_URL);
+		const newURL = href.replace('https://', 'https://3001-').replace(/\/$/, '');
 		if (type === 'github') {
-			return `${newURL}/webhooks/github/events`
+			return `${newURL}/webhooks/github/events`;
 		}
 		if (type === 'gitlab') {
-			return `${newURL}/webhooks/gitlab/events`
+			return `${newURL}/webhooks/gitlab/events`;
 		}
 	}
 	if (CODESANDBOX_HOST) {
-		const newURL = `https://${CODESANDBOX_HOST.replace(/\$PORT/,'3001')}`
+		const newURL = `https://${CODESANDBOX_HOST.replace(/\$PORT/, '3001')}`;
 		if (type === 'github') {
-			return `${newURL}/webhooks/github/events`
+			return `${newURL}/webhooks/github/events`;
 		}
 		if (type === 'gitlab') {
-			return `${newURL}/webhooks/gitlab/events`
+			return `${newURL}/webhooks/gitlab/events`;
 		}
 	}
 	return `https://webhook.site/0e5beb2c-4e9b-40e2-a89e-32295e570c21/events`;
@@ -37,7 +39,7 @@ export function getWebhookUrl(type: string) {
 async function send({
 	method,
 	path,
-	data = {},
+	data = null,
 	headers,
 	timeout = 120000
 }: {
@@ -51,7 +53,7 @@ async function send({
 	const controller = new AbortController();
 	const id = setTimeout(() => controller.abort(), timeout);
 	const opts: any = { method, headers: {}, body: null, signal: controller.signal };
-	if (Object.keys(data).length > 0) {
+	if (data && Object.keys(data).length > 0) {
 		const parsedData = data;
 		for (const [key, value] of Object.entries(data)) {
 			if (value === '') {
@@ -83,7 +85,9 @@ async function send({
 	if (dev && !path.startsWith('https://')) {
 		path = `${getAPIUrl()}${path}`;
 	}
-
+	if (method === 'POST' && data && !opts.body) {
+		opts.body = data;
+	}
 	const response = await fetch(`${path}`, opts);
 
 	clearTimeout(id);
@@ -103,7 +107,11 @@ async function send({
 		return {};
 	}
 	if (!response.ok) {
-		if (response.status === 401 && !path.startsWith('https://api.github') && !path.includes('/v4/user')) {
+		if (
+			response.status === 401 &&
+			!path.startsWith('https://api.github') &&
+			!path.includes('/v4/user')
+		) {
 			Cookies.remove('token');
 		}
 
@@ -126,7 +134,7 @@ export function del(
 
 export function post(
 	path: string,
-	data: Record<string, unknown>,
+	data: Record<string, unknown> | FormData,
 	headers?: Record<string, unknown>
 ): Promise<Record<string, any>> {
 	return send({ method: 'POST', path, data, headers });
diff --git a/apps/ui/src/lib/components/CopyPasswordField.svelte b/apps/ui/src/lib/components/CopyPasswordField.svelte
index 0a6fba471..9083fa47c 100644
--- a/apps/ui/src/lib/components/CopyPasswordField.svelte
+++ b/apps/ui/src/lib/components/CopyPasswordField.svelte
@@ -13,8 +13,9 @@
 	export let id: string;
 	export let name: string;
 	export let placeholder = '';
+	export let inputStyle = '';
 
-	let disabledClass = 'bg-coolback disabled:bg-coolblack';
+	let disabledClass = 'bg-coolback disabled:bg-coolblack  w-full';
 	let isHttps = browser && window.location.protocol === 'https:';
 
 	function copyToClipboard() {
@@ -32,6 +33,7 @@
 	{#if !isPasswordField || showPassword}
 		{#if textarea}
 			<textarea
+				style={inputStyle}
 				rows="5"
 				class={disabledClass}
 				class:pr-10={true}
@@ -47,6 +49,7 @@
 			>
 		{:else}
 			<input
+				style={inputStyle}
 				class={disabledClass}
 				type="text"
 				class:pr-10={true}
@@ -63,6 +66,7 @@
 		{/if}
 	{:else}
 		<input
+			style={inputStyle}
 			class={disabledClass}
 			class:pr-10={true}
 			class:pr-20={value && isHttps}
@@ -78,7 +82,7 @@
 		/>
 	{/if}
 
-	<div class="absolute top-0 right-0 m-3  cursor-pointer text-stone-600 hover:text-white">
+	<div class="absolute top-0 right-0 flex justify-center items-center h-full cursor-pointer text-stone-600 hover:text-white mr-3">
 		<div class="flex space-x-2">
 			{#if isPasswordField}
 				<div on:click={() => (showPassword = !showPassword)}>
diff --git a/apps/ui/src/lib/components/DocLink.svelte b/apps/ui/src/lib/components/DocLink.svelte
index 0646734be..d561566f0 100644
--- a/apps/ui/src/lib/components/DocLink.svelte
+++ b/apps/ui/src/lib/components/DocLink.svelte
@@ -10,23 +10,10 @@
 			.slice(-16);
 </script>
 
-<a {id} href={url} target="_blank" class="icons inline-block text-pink-500 cursor-pointer text-xs">
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		class="w-6 h-6"
-		viewBox="0 0 24 24"
-		stroke-width="1.5"
-		stroke="currentColor"
-		fill="none"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	>
-		<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-		<path
-			d="M6 4h11a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-11a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1m3 0v18"
-		/>
-		<line x1="13" y1="8" x2="15" y2="8" />
-		<line x1="13" y1="12" x2="15" y2="12" />
-	</svg>
+<a {id} href={url} target="_blank" class="icons inline-block cursor-pointer text-xs mx-2">
+	<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+		<path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
+	  </svg>
+	  
 </a>
 <Tooltip triggeredBy={`#${id}`}>See details in the documentation</Tooltip>
diff --git a/apps/ui/src/lib/components/Explainer.svelte b/apps/ui/src/lib/components/Explainer.svelte
index e51934a58..f504798e1 100644
--- a/apps/ui/src/lib/components/Explainer.svelte
+++ b/apps/ui/src/lib/components/Explainer.svelte
@@ -1,26 +1,38 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	// import { onMount } from 'svelte';
 
-	import Tooltip from './Tooltip.svelte';
+	// import Tooltip from './Tooltip.svelte';
 	export let explanation = '';
-	let id: any;
-	let self: any;
-	onMount(() => {
-		id = `info-${self.offsetLeft}-${self.offsetTop}`;
-	});
+	export let position = 'dropdown-right'
+	// let id: any;
+	// let self: any;
+	// onMount(() => {
+	// 	id = `info-${self.offsetLeft}-${self.offsetTop}`;
+	// });
 </script>
 
-<div {id} class="inline-block mx-2 text-pink-500 cursor-pointer" bind:this={self}>
+<div class={`dropdown dropdown-end ${position}`}>
+	<label tabindex="0" class="btn btn-circle btn-ghost btn-xs text-sky-500">
+	  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+	</label>
+	<div tabindex="0" class="card compact dropdown-content shadow bg-coolgray-400 rounded w-64">
+	  <div class="card-body">
+		<!-- <h2 class="card-title">You needed more info?</h2>  -->
+		<p class="text-xs font-normal">{@html explanation}</p>
+	  </div>
+	</div>
+  </div>
+<!-- <div {id} class="inline-block mx-2 cursor-pointer" bind:this={self}>
 	<svg
 		fill="none"
-		height="18"
+		height="14"
 		shape-rendering="geometricPrecision"
 		stroke="currentColor"
 		stroke-linecap="round"
 		stroke-linejoin="round"
-		stroke-width="1.5"
+		stroke-width="1.4"
 		viewBox="0 0 24 24"
-		width="18"
+		width="14"
 		><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" /><path
 			d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"
 		/><circle cx="12" cy="17" r=".5" />
@@ -28,4 +40,4 @@
 </div>
 {#if id}
 	<Tooltip triggeredBy={`#${id}`}>{@html explanation}</Tooltip>
-{/if}
+{/if} -->
diff --git a/apps/ui/src/lib/components/Setting.svelte b/apps/ui/src/lib/components/Setting.svelte
index b8aafbba8..d4db07e91 100644
--- a/apps/ui/src/lib/components/Setting.svelte
+++ b/apps/ui/src/lib/components/Setting.svelte
@@ -15,9 +15,13 @@
 
 <div class="flex items-center py-4 pr-8">
 	<div class="flex w-96 flex-col">
-		<div class="text-xs font-bold text-stone-100 md:text-base">
-			{title}<Explaner explanation={description} />
-		</div>
+		<!-- svelte-ignore a11y-label-has-associated-control -->
+		<label>
+			{title}
+			{#if description && description !== ''}
+				<Explaner explanation={description} />
+			{/if}
+		</label>
 	</div>
 </div>
 <div class:text-center={isCenter} class="flex justify-center">
diff --git a/apps/ui/src/lib/components/Toast.svelte b/apps/ui/src/lib/components/Toast.svelte
index b0586a51f..6e8913330 100644
--- a/apps/ui/src/lib/components/Toast.svelte
+++ b/apps/ui/src/lib/components/Toast.svelte
@@ -2,6 +2,11 @@
 	import { createEventDispatcher } from 'svelte';
 	const dispatch = createEventDispatcher();
 	export let type = 'info';
+	function success() {
+		if (type === 'success') {
+			return 'bg-coollabs';
+		}
+	}
 </script>
 
 <div
@@ -10,8 +15,7 @@
 	on:focus={() => dispatch('pause')}
 	on:mouseout={() => dispatch('resume')}
 	on:blur={() => dispatch('resume')}
-	class="alert shadow-lg text-white rounded hover:scale-105 transition-all duration-100 cursor-pointer"
-	class:bg-coollabs={type === 'success'}
+	class={`flex flex-row alert shadow-lg text-white hover:scale-105 transition-all duration-100 cursor-pointer rounded ${success()}`}
 	class:alert-error={type === 'error'}
 	class:alert-info={type === 'info'}
 >
diff --git a/apps/ui/src/lib/components/Toasts.svelte b/apps/ui/src/lib/components/Toasts.svelte
index 1c7c8cbc0..a7bd9165c 100644
--- a/apps/ui/src/lib/components/Toasts.svelte
+++ b/apps/ui/src/lib/components/Toasts.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { fade } from 'svelte/transition';
 	import Toast from './Toast.svelte';
 
 	import { dismissToast, pauseToast, resumeToast, toasts } from '$lib/store';
@@ -7,9 +6,9 @@
 
 {#if $toasts}
 	<section>
-		<article class="toast toast-top toast-end rounded-none" role="alert" transition:fade>
+		<article class="toast toast-top toast-end rounded-none px-10" role="alert" >
 			{#each $toasts as toast (toast.id)}
-				<Toast
+				<Toast	
 					type={toast.type}
 					on:resume={() => resumeToast(toast.id)}
 					on:pause={() => pauseToast(toast.id)}
diff --git a/apps/ui/src/lib/components/Tooltip.svelte b/apps/ui/src/lib/components/Tooltip.svelte
index c20e4836d..f2ccd96f4 100644
--- a/apps/ui/src/lib/components/Tooltip.svelte
+++ b/apps/ui/src/lib/components/Tooltip.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Tooltip } from 'flowbite-svelte';
 	export let placement = 'bottom';
-	export let color = 'bg-coollabs text-left';
+	export let color = 'bg-coollabs font-thin text-left';
 	export let triggeredBy = '#tooltip-default';
 </script>
 
diff --git a/apps/ui/src/lib/components/UpdateAvailable.svelte b/apps/ui/src/lib/components/UpdateAvailable.svelte
index 55f5bc8e3..a83c6cc90 100644
--- a/apps/ui/src/lib/components/UpdateAvailable.svelte
+++ b/apps/ui/src/lib/components/UpdateAvailable.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
 	import { dev } from '$app/env';
 	import { get, post } from '$lib/api';
-	import { addToast, appSession, features } from '$lib/store';
+	import { addToast, appSession, features, updateLoading, isUpdateAvailable } from '$lib/store';
 	import { asyncSleep, errorNotification } from '$lib/common';
 	import { onMount } from 'svelte';
 	import Tooltip from './Tooltip.svelte';
 
-	let isUpdateAvailable = false;
 	let updateStatus: any = {
 		found: false,
 		loading: false,
@@ -58,37 +57,41 @@
 		if ($appSession.userId) {
 			const overrideVersion = $features.latestVersion;
 			if ($appSession.teamId === '0') {
+				if ($updateLoading === true) return;
 				try {
+					$updateLoading = true;
 					const data = await get(`/update`);
 					if (overrideVersion || data?.isUpdateAvailable) {
 						latestVersion = overrideVersion || data.latestVersion;
 						if (overrideVersion) {
-							isUpdateAvailable = true;
+							$isUpdateAvailable = true;
 						} else {
-							isUpdateAvailable = data.isUpdateAvailable;
+							$isUpdateAvailable = data.isUpdateAvailable;
 						}
 					}
 				} catch (error) {
 					return errorNotification(error);
+				} finally {
+					$updateLoading = false;
 				}
 			}
 		}
 	});
 </script>
 
-<div class="py-2">
+<div class="py-0 lg:py-2">
 	{#if $appSession.teamId === '0'}
-		{#if isUpdateAvailable}
+		{#if $isUpdateAvailable}
 			<button
 				id="update"
 				disabled={updateStatus.success === false}
 				on:click={update}
-				class="icons bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white duration-75 hover:scale-105"
+				class="icons bg-coollabs-gradient text-white duration-75 hover:scale-105  w-full"
 			>
 				{#if updateStatus.loading}
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="lds-heart h-9 w-8"
+						class="lds-heart h-8 w-8"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
@@ -102,24 +105,27 @@
 						/>
 					</svg>
 				{:else if updateStatus.success === null}
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-9 w-8"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
-						fill="none"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					>
-						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-						<circle cx="12" cy="12" r="9" />
-						<line x1="12" y1="8" x2="8" y2="12" />
-						<line x1="12" y1="8" x2="12" y2="16" />
-						<line x1="16" y1="12" x2="12" y2="8" />
-					</svg>
+					<div class="flex items-center justify-center space-x-2">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-8 w-8"
+							viewBox="0 0 24 24"
+							stroke-width="1.5"
+							stroke="currentColor"
+							fill="none"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+							<circle cx="12" cy="12" r="9" />
+							<line x1="12" y1="8" x2="8" y2="12" />
+							<line x1="12" y1="8" x2="12" y2="16" />
+							<line x1="16" y1="12" x2="12" y2="8" />
+						</svg>
+						<span class="flex lg:hidden">Update available</span>
+					</div>
 				{:else if updateStatus.success}
-					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="h-9 w-8"
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="h-8 w-8"
 						><path
 							fill="#DD2E44"
 							d="M11.626 7.488c-.112.112-.197.247-.268.395l-.008-.008L.134 33.141l.011.011c-.208.403.14 1.223.853 1.937.713.713 1.533 1.061 1.936.853l.01.01L28.21 24.735l-.008-.009c.147-.07.282-.155.395-.269 1.562-1.562-.971-6.627-5.656-11.313-4.687-4.686-9.752-7.218-11.315-5.656z"
@@ -184,7 +190,9 @@
 					>
 				{/if}
 			</button>
-			<Tooltip triggeredBy="#update" placement="right" color="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500">New Version Available!</Tooltip>
+			<Tooltip triggeredBy="#update" placement="right" color="bg-coolgray-200 text-white"
+				>New Version Available!</Tooltip
+			>
 		{/if}
 	{/if}
 </div>
diff --git a/apps/ui/src/lib/components/Upload.svelte b/apps/ui/src/lib/components/Upload.svelte
new file mode 100644
index 000000000..992d91153
--- /dev/null
+++ b/apps/ui/src/lib/components/Upload.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { post } from '$lib/api';
+	let cert: any;
+	let key: any;
+	async function submitForm() {
+		const formData = new FormData();
+		formData.append('cert', cert[0]);
+        formData.append('key', key[0]);
+		await post('/upload', formData);
+	}
+</script>
+
+<form on:submit|preventDefault={submitForm}>
+    <label for="cert">Certificate</label>
+	<input id="cert" type="file" required name="cert" bind:files={cert} />
+    <label for="key">Private Key</label>
+    <input id="key" type="file" required name="key" bind:files={key} />
+	<br />
+	<input type="submit" />
+</form>
diff --git a/apps/ui/src/lib/components/Usage.svelte b/apps/ui/src/lib/components/Usage.svelte
index 891aa22be..3ed48ee10 100644
--- a/apps/ui/src/lib/components/Usage.svelte
+++ b/apps/ui/src/lib/components/Usage.svelte
@@ -72,19 +72,16 @@
 	{:else}
 		<span class="indicator-item badge bg-success badge-sm" />
 	{/if}
-	{#if server.remoteEngine}
-		<div
-			class="absolute top-0 right-0 text-xl font-bold uppercase bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 p-1 rounded m-2"
-		>
-			BETA
-		</div>
-	{/if}
-	<div class="w-full flex flex-row space-x-4">
+
+	<div class="w-full flex flex-col lg:flex-row space-y-4 lg:space-y-0 space-x-4">
 		<div class="flex flex-col">
 			<h1 class="font-bold text-lg lg:text-xl truncate">
 				{server.name}
+				{#if server.remoteEngine}
+					<span class="badge bg-coollabs-gradient rounded text-white"> BETA </span>
+				{/if}
 			</h1>
-			<div class="text-xs ">
+			<div class="text-xs">
 				{#if server?.remoteIpAddress}
 					<h2>{server?.remoteIpAddress}</h2>
 				{:else}
diff --git a/apps/ui/src/lib/components/svg/databases/MariaDB.svelte b/apps/ui/src/lib/components/svg/databases/MariaDB.svelte
index 1de83ef15..5bf504bcc 100644
--- a/apps/ui/src/lib/components/svg/databases/MariaDB.svelte
+++ b/apps/ui/src/lib/components/svg/databases/MariaDB.svelte
@@ -9,15 +9,8 @@
 	viewBox="0 0 309.88 252.72"
 	class={isAbsolute ? 'absolute top-0 left-0 -m-5 h-12 w-12 ' : 'mx-auto w-8 h-8'}
 >
-	<defs>
-		<style>
-			.cls-1 {
-				fill: #fff;
-			}
-		</style>
-	</defs>
 	<path
-		class="cls-1"
+		fill="#fff"
 		d="M316,10.05a4.2,4.2,0,0,0-2.84-1c-2.84,0-6.5,1.92-8.46,3l-.79.4a26.81,26.81,0,0,1-10.57,2.66c-3.76.12-7,.34-11.22.77-25,2.58-36.15,21.74-46.89,40.27-5.84,10.08-11.88,20.5-20.16,28.57a55.71,55.71,0,0,1-5.46,4.63c-8.57,6.39-19.33,10.9-27.74,14.12-8.07,3.08-16.86,5.85-25.37,8.53-7.78,2.45-15.14,4.76-21.9,7.28-3.05,1.13-5.64,2-7.93,2.76-6.15,2-10.6,3.53-17.08,8-2.53,1.73-5.07,3.6-6.8,5a71.26,71.26,0,0,0-13.54,14.27A84.81,84.81,0,0,1,77.88,163c-1.36,1.34-3.8,2-7.43,2-4.27,0-9.43-.88-14.91-1.81s-11.46-2-16.46-2c-4.07,0-7.17.66-9.5,2,0,0-3.9,2.28-5.56,5.23l1.62.73a33.56,33.56,0,0,1,6.93,5,33.68,33.68,0,0,0,7.19,5.12A6.37,6.37,0,0,1,42,180.72c-.69,1-1.69,2.29-2.74,3.67-5.77,7.55-9.13,12.32-7.2,14.92a6,6,0,0,0,3,.68c12.59,0,19.34-3.27,27.9-7.41,2.47-1.2,5-2.44,8-3.7,5-2.17,10.38-5.63,16.08-9.29,7.55-4.85,15.36-9.87,22.92-12.3a62.3,62.3,0,0,1,19.23-2.7c8,0,16.42,1.07,24.54,2.11,6.06.78,12.32,1.58,18.47,2,2.39.14,4.6.21,6.76.21a78.48,78.48,0,0,0,8.61-.45l.68-.24c4.32-2.65,6.34-8.34,8.29-13.84,1.26-3.54,2.32-6.72,4-8.74a2.06,2.06,0,0,1,.33-.27.4.4,0,0,1,.49.08.25.25,0,0,1,0,.16c-1,21.51-9.67,35.16-18.42,47.3L177,199.14s8.18,0,12.84-1.8c17-5.08,29.84-16.28,39.18-34.14a144.39,144.39,0,0,0,6.16-14.09c.16-.4,1.64-1.14,1.49.93,0,.61-.08,1.29-.13,2h0c0,.42-.06.85-.08,1.28-.25,3-1,9.34-1,9.34l5.25-2.81c12.66-8,22.42-24.14,29.82-49.25,3.09-10.46,5.34-20.85,7.33-30,2.38-11,4.43-20.43,6.78-24.09,3.69-5.74,9.32-9.62,14.77-13.39.75-.51,1.49-1,2.22-1.54,6.86-4.81,13.67-10.36,15.16-20.71l0-.23C317.93,12.92,317,11,316,10.05Z"
 		transform="translate(-7.45 -9.1)"
 	/>
diff --git a/apps/ui/src/lib/components/svg/services/Fider.svelte b/apps/ui/src/lib/components/svg/services/Fider.svelte
index e94c94591..98d62b9f7 100644
--- a/apps/ui/src/lib/components/svg/services/Fider.svelte
+++ b/apps/ui/src/lib/components/svg/services/Fider.svelte
@@ -5,7 +5,7 @@
 <svg
 	viewBox="0 0 700 240"
 	xmlns="http://www.w3.org/2000/svg"
-	class={isAbsolute ? 'w-36 absolute top-0 left-0 -m-3 -mt-5' : 'w-28 h-28 mx-auto'}
+	class={isAbsolute ? 'w-36 absolute top-0 left-0 -m-3 -mt-5' : 'w-full h-10 mx-auto'}
 	><path fill="#FDBC3D" d="m90.694 107.498-.981.39-20.608 8.23 6.332 6.547z" /><path
 		fill="#8EC63F"
 		d="M61.139 77.914 46.632 93 56.9 103.547c8.649-7.169 17.832-10.502 18.653-10.789L61.139 77.914z"
diff --git a/apps/ui/src/lib/components/svg/services/Grafana.svelte b/apps/ui/src/lib/components/svg/services/Grafana.svelte
new file mode 100644
index 000000000..8701f58e7
--- /dev/null
+++ b/apps/ui/src/lib/components/svg/services/Grafana.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	export let isAbsolute = false;
+</script>
+
+<img
+	alt="grafana logo"
+	class={isAbsolute ? 'w-12 h-12 absolute top-0 left-0 -m-3 -mt-5' : 'w-8 h-8 mx-auto'}
+	src="/grafana.png"
+/>
diff --git a/apps/ui/src/lib/components/svg/services/ServiceIcons.svelte b/apps/ui/src/lib/components/svg/services/ServiceIcons.svelte
index 4cc5426b2..a4a515689 100644
--- a/apps/ui/src/lib/components/svg/services/ServiceIcons.svelte
+++ b/apps/ui/src/lib/components/svg/services/ServiceIcons.svelte
@@ -42,4 +42,8 @@
 	<Icons.Searxng {isAbsolute} />
 {:else if type === 'weblate'}
 	<Icons.Weblate {isAbsolute} />
+{:else if type === 'grafana'}
+	<Icons.Grafana {isAbsolute} />
+{:else if type === 'trilium'}
+	<Icons.Trilium {isAbsolute} />
 {/if}
diff --git a/apps/ui/src/lib/components/svg/services/Trilium.svelte b/apps/ui/src/lib/components/svg/services/Trilium.svelte
new file mode 100644
index 000000000..2bd749f44
--- /dev/null
+++ b/apps/ui/src/lib/components/svg/services/Trilium.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	export let isAbsolute = false;
+</script>
+
+<img
+	alt="trilium logo"
+	class={isAbsolute ? 'w-9 h-9 absolute top-3 left-0 -m-3 -mt-5' : 'w-8 h-8 mx-auto'}
+	src="/trilium.png"
+/>
diff --git a/apps/ui/src/lib/components/svg/services/Weblate.svelte b/apps/ui/src/lib/components/svg/services/Weblate.svelte
index 25b5a837a..ac460fd33 100644
--- a/apps/ui/src/lib/components/svg/services/Weblate.svelte
+++ b/apps/ui/src/lib/components/svg/services/Weblate.svelte
@@ -4,7 +4,7 @@
 
 <svg
 	xmlns="http://www.w3.org/2000/svg"
-	class={isAbsolute ? 'w-16 h-16 absolute top-0 left-0 -m-7' : 'w-12 h-12 mx-auto'}
+	class={isAbsolute ? 'w-16 h-16 absolute top-0 left-0 -m-7' : 'w-10 h-10 mx-auto'}
 	version="1.1"
 	viewBox="0 0 300 300"
 	><linearGradient
diff --git a/apps/ui/src/lib/components/svg/services/index.ts b/apps/ui/src/lib/components/svg/services/index.ts
index 22f7702c9..5f3bf2b10 100644
--- a/apps/ui/src/lib/components/svg/services/index.ts
+++ b/apps/ui/src/lib/components/svg/services/index.ts
@@ -17,4 +17,6 @@ export { default as Appwrite } from './Appwrite.svelte';
 export { default as Moodle } from './Moodle.svelte';
 export { default as GlitchTip }  from './GlitchTip.svelte';
 export { default as Searxng }  from './Searxng.svelte';
-export { default as Weblate }  from './Weblate.svelte';
\ No newline at end of file
+export { default as Weblate }  from './Weblate.svelte';
+export { default as Grafana }  from './Grafana.svelte';
+export { default as Trilium } from './Trilium.svelte'
diff --git a/apps/ui/src/lib/locales/en.json b/apps/ui/src/lib/locales/en.json
index eaaf2f6dc..d98d5a88b 100644
--- a/apps/ui/src/lib/locales/en.json
+++ b/apps/ui/src/lib/locales/en.json
@@ -88,7 +88,7 @@
 		"removing": "Removing...",
 		"remove_domain": "Remove domain",
 		"public_port_range": "Public Port Range",
-		"public_port_range_explainer": "Ports used to expose databases/services/internal services.<br> Add them to your firewall (if applicable).<br><br>You can specify a range of ports, eg: <span class='text-settings font-bold'>9000-9100</span>",
+		"public_port_range_explainer": "Ports used to expose databases/services/internal services.<br> Add them to your firewall (if applicable).<br><br>You can specify a range of ports, eg: <span class='text-settings '>9000-9100</span>",
 		"no_actions_available": "No actions available",
 		"admin_api_key": "Admin API key"
 	},
@@ -144,8 +144,8 @@
 		},
 		"preview": {
 			"need_during_buildtime": "Need during buildtime?",
-			"setup_secret_app_first": "You can add secrets to PR/MR deployments. Please add secrets to the application first. <br>Useful for creating <span class='text-green-500 font-bold'>staging</span> environments.",
-			"values_overwriting_app_secrets": "These values overwrite application secrets in PR/MR deployments. Useful for creating <span class='text-green-500 font-bold'>staging</span> environments.",
+			"setup_secret_app_first": "You can add secrets to PR/MR deployments. Please add secrets to the application first. <br>Useful for creating <span class='text-settings '>staging</span> environments.",
+			"values_overwriting_app_secrets": "These values overwrite application secrets in PR/MR deployments. Useful for creating <span class='text-settings '>staging</span> environments.",
 			"redeploy": "Redeploy",
 			"no_previews_available": "No previews available"
 		},
@@ -159,7 +159,7 @@
 			"storage_saved": "Storage saved.",
 			"storage_updated": "Storage updated.",
 			"storage_deleted": "Storage deleted.",
-			"persistent_storage_explainer": "You can specify any folder that you want to be persistent across deployments.<br><span class='text-green-500 font-bold'>/example</span> means it will preserve <span class='text-green-500 font-bold'>/app/example</span> in the container as <span class='text-green-500 font-bold'>/app</span> is <span class='text-green-500 font-bold'>the root directory</span> for your application.<br><br>This is useful for storing data such as a <span class='text-green-500 font-bold'>database (SQLite)</span> or a <span class='text-green-500 font-bold'>cache</span>."
+			"persistent_storage_explainer": "You can specify any folder that you want to be persistent across deployments.<br><span class='text-settings '>/example</span> means it will preserve <span class='text-settings '>/app/example</span> in the container as <span class='text-settings '>/app</span> is <span class='text-settings '>the root directory</span> for your application.<br><br>This is useful for storing data such as a <span class='text-settings '>database (SQLite)</span> or a <span class='text-settings '>cache</span>."
 		},
 		"deployment_queued": "Deployment queued.",
 		"confirm_to_delete": "Are you sure you would like to delete '{{name}}'?",
@@ -194,14 +194,14 @@
 		"application": "Application",
 		"url_fqdn": "URL (FQDN)",
 		"domain_fqdn": "Domain (FQDN)",
-		"https_explainer": "If you specify <span class='text-green-500 font-bold'>https</span>, the application will be accessible only over https. SSL certificate will be generated for you.<br>If you specify <span class='text-green-500 font-bold'>www</span>, the application will be redirected (302) from non-www and vice versa.<br><br>To modify the domain, you must first stop the application.<br><br><span class='text-white font-bold'>You must set your DNS to point to the server IP in advance.</span>",
+		"https_explainer": "If you specify <span class='text-settings '>https</span>, the application will be accessible only over https. SSL certificate will be generated for you.<br>If you specify <span class='text-settings '>www</span>, the application will be redirected (302) from non-www and vice versa.<br><br>To modify the domain, you must first stop the application.<br><br><span class='text-white '>You must set your DNS to point to the server IP in advance.</span>",
 		"ssl_www_and_non_www": "Generate SSL for www and non-www?",
-		"ssl_explainer": "It will generate certificates for both www and non-www. <br>You need to have <span class='font-bold text-green-500'>both DNS entries</span> set in advance.<br><br>Useful if you expect to have visitors on both.",
+		"ssl_explainer": "It will generate certificates for both www and non-www. <br>You need to have <span class=' text-settings'>both DNS entries</span> set in advance.<br><br>Useful if you expect to have visitors on both.",
 		"install_command": "Install Command",
 		"build_command": "Build Command",
 		"start_command": "Start Command",
-		"directory_to_use_explainer": "Directory to use as the base for all commands.<br>Could be useful with <span class='text-green-500 font-bold'>monorepos</span>.",
-		"publish_directory_explainer": "Directory containing all the assets for deployment. <br> For example: <span class='text-green-500 font-bold'>dist</span>,<span class='text-green-500 font-bold'>_site</span> or <span class='text-green-500 font-bold'>public</span>.",
+		"directory_to_use_explainer": "Directory to use as the base for all commands.<br>Could be useful with <span class='text-settings '>monorepos</span>.",
+		"publish_directory_explainer": "Directory containing all the assets for deployment. <br> For example: <span class='text-settings '>dist</span>,<span class='text-settings '>_site</span> or <span class='text-settings '>public</span>.",
 		"features": "Features",
 		"enable_automatic_deployment": "Enable Automatic Deployment",
 		"enable_auto_deploy_webhooks": "Enable automatic deployment through webhooks.",
@@ -209,7 +209,7 @@
 		"expose_a_port": "Expose a port",
 		"enable_preview_deploy_mr_pr_requests": "Enable preview deployments from pull or merge requests.",
 		"debug_logs": "Debug Logs",
-		"enable_debug_log_during_build": "Enable debug logs during build phase.<br><span class='text-settings font-bold'>Sensitive information</span> could be visible and saved in logs.",
+		"enable_debug_log_during_build": "Enable debug logs during build phase.<br><span class='text-settings '>Sensitive information</span> could be visible and saved in logs.",
 		"cant_activate_auto_deploy_without_repo": "Cannot activate automatic deployments until only one application is defined for this repository / branch.",
 		"no_applications_found": "No applications found",
 		"secret__batch_dot_env": "Paste .env file",
@@ -223,7 +223,7 @@
 		"set_public": "Set it public",
 		"warning_database_public": "Your database will be reachable over the internet. <br>Take security seriously in this case!",
 		"change_append_only_mode": "Change append only mode",
-		"warning_append_only": "Useful if you would like to restore redis data from a backup.<br><span class='font-bold text-white'>Database restart is required.</span>",
+		"warning_append_only": "Useful if you would like to restore redis data from a backup.<br><span class=' text-white'>Database restart is required.</span>",
 		"select_database_type": "Select a Database type",
 		"select_database_version": "Select a Database version",
 		"confirm_stop": "Are you sure you would like to stop {{name}}?",
@@ -275,7 +275,7 @@
 		"application_id": "Application ID",
 		"group_name": "Group Name",
 		"oauth_id": "OAuth ID",
-		"oauth_id_explainer": "The OAuth ID is the unique identifier of the GitLab application. <br>You can find it <span class='font-bold text-settings' >in the URL</span> of your GitLab OAuth Application.",
+		"oauth_id_explainer": "The OAuth ID is the unique identifier of the GitLab application. <br>You can find it <span class=' text-settings' >in the URL</span> of your GitLab OAuth Application.",
 		"register_oauth_gitlab": "Register new OAuth application on GitLab",
 		"gitlab": {
 			"self_hosted": "Instance-wide application (self-hosted)",
@@ -290,7 +290,7 @@
 	},
 	"services": {
 		"all_email_verified": "All emails are verified. You can login now.",
-		"generate_www_non_www_ssl": "It will generate certificates for both www and non-www. <br>You need to have <span class='font-bold text-pink-600'>both DNS entries</span> set in advance.<br><br>Service needs to be restarted."
+		"generate_www_non_www_ssl": "It will generate certificates for both www and non-www. <br>You need to have <span class='text-settings'>both DNS entries</span> set in advance.<br><br>Service needs to be restarted."
 	},
 	"service": {
 		"stop_service": "Stop",
@@ -306,15 +306,15 @@
 		"change_language": "Change Language",
 		"permission_denied": "You do not have permission to do this. \\nAsk an admin to modify your permissions.",
 		"domain_removed": "Domain removed",
-		"ssl_explainer": "If you specify <span class='text-settings font-bold'>https</span>, Coolify will be accessible only over https. SSL certificate will be generated for you.<br>If you specify <span class='text-settings font-bold'>www</span>, Coolify will be redirected (302) from non-www and vice versa.<br><br><span class='text-settings font-bold'>WARNING:</span> If you change an already set domain, it will break webhooks and other integrations! You need to manually update them.",
+		"ssl_explainer": "If you specify <span class='text-settings'>https</span>, Coolify will be accessible only over https. SSL certificate will be generated for you.<br>If you specify <span class='text-settings '>www</span>, Coolify will be redirected (302) from non-www and vice versa.<br><br><span class='text-settings '>WARNING:</span> If you change an already set domain, it will break webhooks and other integrations! You need to manually update them.",
 		"must_remove_domain_before_changing": "Must remove the domain before you can change this setting.",
 		"registration_allowed": "Registration allowed?",
 		"registration_allowed_explainer": "Allow further registrations to the application. <br>It's turned off after the first registration.",
 		"coolify_proxy_settings": "Coolify Proxy Settings",
-		"credential_stat_explainer": "Credentials for <a class=\"text-white font-bold\" href=\"{{link}}\" target=\"_blank\">stats</a> page.",
+		"credential_stat_explainer": "Credentials for <a class=\"text-white \" href=\"{{link}}\" target=\"_blank\">stats</a> page.",
 		"auto_update_enabled": "Auto update enabled?",
 		"auto_update_enabled_explainer": "Enable automatic updates for Coolify. It will be done automatically behind the scenes, if there is no build process running.",
-		"generate_www_non_www_ssl": "It will generate certificates for both www and non-www. <br>You need to have <span class='font-bold text-settings'>both DNS entries</span> set in advance.",
+		"generate_www_non_www_ssl": "It will generate certificates for both www and non-www. <br>You need to have <span class=' text-settings'>both DNS entries</span> set in advance.",
 		"is_dns_check_enabled": "DNS check enabled?",
 		"is_dns_check_enabled_explainer": "You can disable DNS check before creating SSL certificates.<br><br>Turning it off is useful when Coolify is behind a reverse proxy or tunnel."
 	},
@@ -324,9 +324,9 @@
 		"delete": "Delete",
 		"member": "member(s)",
 		"root": "(root)",
-		"invited_with_permissions": "Invited to <span class=\"font-bold text-pink-600\">{{teamName}}</span> with <span class=\"font-bold text-rose-600\">{{permission}}</span> permission.",
+		"invited_with_permissions": "Invited to <span class=\" text-settings\">{{teamName}}</span> with <span class=\" text-rose-600\">{{permission}}</span> permission.",
 		"members": "Members",
-		"root_team_explainer": "This is the <span class='text-red-500 font-bold'>root</span> team. That means members of this group can manage instance wide settings and have all the priviliges in Coolify (imagine like root user on Linux).",
+		"root_team_explainer": "This is the <span class='text-red-500 '>root</span> team. That means members of this group can manage instance wide settings and have all the priviliges in Coolify (imagine like root user on Linux).",
 		"permission": "Permission",
 		"you": "(You)",
 		"promote_to": "Promote to {{grade}}",
diff --git a/apps/ui/src/lib/store.ts b/apps/ui/src/lib/store.ts
index 19ee6dfe9..4e8244e29 100644
--- a/apps/ui/src/lib/store.ts
+++ b/apps/ui/src/lib/store.ts
@@ -26,7 +26,8 @@ interface AddToast {
     message: string,
     timeout?: number | undefined
 }
-
+export const updateLoading: Writable<boolean> = writable(false);
+export const isUpdateAvailable: Writable<boolean> = writable(false);
 export const search: any = writable('')
 export const loginEmail: Writable<string | undefined> = writable()
 export const appSession: Writable<AppSession> = writable({
diff --git a/apps/ui/src/lib/templates.ts b/apps/ui/src/lib/templates.ts
index c4ec05ad6..671bf9d5a 100644
--- a/apps/ui/src/lib/templates.ts
+++ b/apps/ui/src/lib/templates.ts
@@ -195,6 +195,7 @@ export function findBuildPack(pack: string, packageManager = 'npm') {
 export const buildPacks = [
 	{
 		name: 'node',
+		type: 'base',
 		fancyName: 'Node.js',
 		hoverColor: 'hover:bg-green-700',
 		color: 'bg-green-700',
@@ -202,6 +203,7 @@ export const buildPacks = [
 	},
 	{
 		name: 'static',
+		type: 'base',
 		fancyName: 'Static',
 		hoverColor: 'hover:bg-orange-700',
 		color: 'bg-orange-700',
@@ -210,6 +212,7 @@ export const buildPacks = [
 
 	{
 		name: 'php',
+		type: 'base',
 		fancyName: 'PHP',
 		hoverColor: 'hover:bg-indigo-700',
 		color: 'bg-indigo-700',
@@ -217,6 +220,8 @@ export const buildPacks = [
 	},
 	{
 		name: 'laravel',
+		type: 'specific',
+		base: 'php',
 		fancyName: 'Laravel',
 		hoverColor: 'hover:bg-indigo-700',
 		color: 'bg-indigo-700',
@@ -224,6 +229,7 @@ export const buildPacks = [
 	},
 	{
 		name: 'docker',
+		type: 'base',
 		fancyName: 'Docker',
 		hoverColor: 'hover:bg-sky-700',
 		color: 'bg-sky-700',
@@ -231,6 +237,8 @@ export const buildPacks = [
 	},
 	{
 		name: 'svelte',
+		type: 'specific',
+		base: 'node',
 		fancyName: 'Svelte',
 		hoverColor: 'hover:bg-orange-700',
 		color: 'bg-orange-700',
@@ -238,6 +246,8 @@ export const buildPacks = [
 	},
 	{
 		name: 'vuejs',
+		type: 'specific',
+		base: 'node',
 		fancyName: 'VueJS',
 		hoverColor: 'hover:bg-green-700',
 		color: 'bg-green-700',
@@ -245,6 +255,8 @@ export const buildPacks = [
 	},
 	{
 		name: 'nuxtjs',
+		type: 'specific',
+		base: 'node',
 		fancyName: 'NuxtJS',
 		hoverColor: 'hover:bg-green-700',
 		color: 'bg-green-700',
@@ -252,6 +264,8 @@ export const buildPacks = [
 	},
 	{
 		name: 'gatsby',
+		type: 'specific',
+		base: 'node',
 		fancyName: 'Gatsby',
 		hoverColor: 'hover:bg-blue-700',
 		color: 'bg-blue-700',
@@ -259,6 +273,8 @@ export const buildPacks = [
 	},
 	{
 		name: 'astro',
+		type: 'specific',
+		base: 'node',
 		fancyName: 'Astro',
 		hoverColor: 'hover:bg-pink-700',
 		color: 'bg-pink-700',
@@ -266,14 +282,17 @@ export const buildPacks = [
 	},
 	{
 		name: 'eleventy',
+		type: 'specific',
+		base: 'node',
 		fancyName: 'Eleventy',
 		hoverColor: 'hover:bg-red-700',
 		color: 'bg-red-700',
 		isCoolifyBuildPack: true,
 	},
-
 	{
 		name: 'react',
+		type: 'specific',
+		base: 'node',
 		fancyName: 'React',
 		hoverColor: 'hover:bg-blue-700',
 		color: 'bg-blue-700',
@@ -281,6 +300,8 @@ export const buildPacks = [
 	},
 	{
 		name: 'preact',
+		type: 'specific',
+		base: 'node',
 		fancyName: 'Preact',
 		hoverColor: 'hover:bg-blue-700',
 		color: 'bg-blue-700',
@@ -288,6 +309,8 @@ export const buildPacks = [
 	},
 	{
 		name: 'nextjs',
+		type: 'specific',
+		base: 'node',
 		fancyName: 'NextJS',
 		hoverColor: 'hover:bg-blue-700',
 		color: 'bg-blue-700',
@@ -295,6 +318,8 @@ export const buildPacks = [
 	},
 	{
 		name: 'nestjs',
+		type: 'specific',
+		base: 'node',
 		fancyName: 'NestJS',
 		hoverColor: 'hover:bg-red-700',
 		color: 'bg-red-700',
@@ -302,6 +327,7 @@ export const buildPacks = [
 	},
 	{
 		name: 'rust',
+		type: 'base',
 		fancyName: 'Rust',
 		hoverColor: 'hover:bg-pink-700',
 		color: 'bg-pink-700',
@@ -309,6 +335,7 @@ export const buildPacks = [
 	},
 	{
 		name: 'python',
+		type: 'base',
 		fancyName: 'Python',
 		hoverColor: 'hover:bg-green-700',
 		color: 'bg-green-700',
@@ -316,6 +343,7 @@ export const buildPacks = [
 	},
 	{
 		name: 'deno',
+		type: 'base',
 		fancyName: 'Deno',
 		hoverColor: 'hover:bg-green-700',
 		color: 'bg-green-700',
@@ -323,6 +351,7 @@ export const buildPacks = [
 	},
     {
         name: 'heroku',
+		type: 'base',
 		fancyName: 'Heroku',
 		hoverColor: 'hover:bg-purple-700',
 		color: 'bg-purple-700',
diff --git a/apps/ui/src/routes/_NewResource.svelte b/apps/ui/src/routes/_NewResource.svelte
index 5729ae81c..3e73752bf 100644
--- a/apps/ui/src/routes/_NewResource.svelte
+++ b/apps/ui/src/routes/_NewResource.svelte
@@ -16,7 +16,7 @@
 	}
 </script>
 
-<div class="dropdown dropdown-hover">
+<div class="dropdown dropdown-bottom">
 	<slot>
 		<label for="new" tabindex="0" class="btn btn-square btn-sm bg-coollabs">
 			<svg
diff --git a/apps/ui/src/routes/__layout.svelte b/apps/ui/src/routes/__layout.svelte
index e1a1b5a4d..be3a49550 100644
--- a/apps/ui/src/routes/__layout.svelte
+++ b/apps/ui/src/routes/__layout.svelte
@@ -107,10 +107,11 @@
 </script>
 
 <svelte:head>
-	<title>Coolify</title>
 	{#if !$appSession.whiteLabeled}
+		<title>Coolify</title>
 		<link rel="icon" href="/favicon.png" />
 	{:else if $appSession.whiteLabeledDetails.icon}
+		<title>Coolify</title>
 		<link rel="icon" href={$appSession.whiteLabeledDetails.icon} />
 	{/if}
 </svelte:head>
@@ -120,31 +121,208 @@
 		<PageLoader />
 	</div>
 {/if}
-{#if $appSession.userId}
-	<nav class="nav-main">
-		<div class="flex h-screen w-full flex-col items-center transition-all duration-100">
-			{#if !$appSession.whiteLabeled}
-				<div class="mb-2 mt-4 h-10 w-10">
-					<img src="/favicon.png" alt="coolLabs logo" />
-				</div>
-			{:else if $appSession.whiteLabeledDetails.icon}
-				<div class="mb-2 mt-4 h-10 w-10">
-					<img src={$appSession.whiteLabeledDetails.icon} alt="White labeled logo" />
+<div class="drawer">
+	<input id="main-drawer" type="checkbox" class="drawer-toggle" />
+	<div class="drawer-content">
+		{#if $appSession.userId}
+			<nav class="nav-main hidden lg:block z-20">
+				<div class="flex h-screen w-full flex-col items-center transition-all duration-100">
+					{#if !$appSession.whiteLabeled}
+						<div class="mb-2 mt-4 h-10 w-10">
+							<img src="/favicon.png" alt="coolLabs logo" />
+						</div>
+					{:else if $appSession.whiteLabeledDetails.icon}
+						<div class="mb-2 mt-4 h-10 w-10">
+							<img src={$appSession.whiteLabeledDetails.icon} alt="White labeled logo" />
+						</div>
+					{/if}
+					<div class="flex flex-col space-y-2 py-2" class:mt-2={$appSession.whiteLabeled}>
+						<a
+							id="dashboard"
+							sveltekit:prefetch
+							href="/"
+							class="icons hover:text-pink-500"
+							class:text-pink-500={$page.url.pathname === '/'}
+							class:bg-coolgray-500={$page.url.pathname === '/'}
+							class:bg-coolgray-200={!($page.url.pathname === '/')}
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-9 w-9"
+								viewBox="0 0 24 24"
+								stroke-width="1.5"
+								stroke="currentColor"
+								fill="none"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							>
+								<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+								<path
+									d="M19 8.71l-5.333 -4.148a2.666 2.666 0 0 0 -3.274 0l-5.334 4.148a2.665 2.665 0 0 0 -1.029 2.105v7.2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-7.2c0 -.823 -.38 -1.6 -1.03 -2.105"
+								/>
+								<path d="M16 15c-2.21 1.333 -5.792 1.333 -8 0" />
+							</svg>
+						</a>
+						{#if $appSession.teamId === '0'}
+							<a
+								id="servers"
+								sveltekit:prefetch
+								href="/servers"
+								class="icons hover:text-sky-500"
+								class:text-sky-500={$page.url.pathname === '/servers'}
+								class:bg-coolgray-500={$page.url.pathname === '/servers'}
+								class:bg-coolgray-200={!($page.url.pathname === '/servers')}
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="w-8 h-8 mx-auto"
+									viewBox="0 0 24 24"
+									stroke-width="1.5"
+									stroke="currentColor"
+									fill="none"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								>
+									<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+									<rect x="3" y="4" width="18" height="8" rx="3" />
+									<rect x="3" y="12" width="18" height="8" rx="3" />
+									<line x1="7" y1="8" x2="7" y2="8.01" />
+									<line x1="7" y1="16" x2="7" y2="16.01" />
+								</svg>
+							</a>
+						{/if}
+					</div>
+					<Tooltip triggeredBy="#dashboard" placement="right">Dashboard</Tooltip>
+					<Tooltip triggeredBy="#servers" placement="right">Servers</Tooltip>
+					<div class="flex-1" />
+					<div class="lg:block hidden">
+						<UpdateAvailable />
+					</div>
+					<div class="flex flex-col space-y-2 py-2">
+						<a
+							id="iam"
+							sveltekit:prefetch
+							href="/iam"
+							class="icons hover:text-iam"
+							class:text-iam={$page.url.pathname.startsWith('/iam')}
+							class:bg-coolgray-500={$page.url.pathname.startsWith('/iam')}
+							><svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 24 24"
+								class="h-9 w-9"
+								stroke-width="1.5"
+								stroke="currentColor"
+								fill="none"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							>
+								<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+								<circle cx="9" cy="7" r="4" />
+								<path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
+								<path d="M16 3.13a4 4 0 0 1 0 7.75" />
+								<path d="M21 21v-2a4 4 0 0 0 -3 -3.85" />
+							</svg>
+						</a>
+						<a
+							id="settings"
+							sveltekit:prefetch
+							href={$appSession.teamId === '0' ? '/settings/coolify' : '/settings/ssh'}
+							class="icons hover:text-settings"
+							class:text-settings={$page.url.pathname.startsWith('/settings')}
+							class:bg-coolgray-500={$page.url.pathname.startsWith('/settings')}
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 24 24"
+								class="h-9 w-9"
+								stroke-width="1.5"
+								stroke="currentColor"
+								fill="none"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							>
+								<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+								<path
+									d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"
+								/>
+								<circle cx="12" cy="12" r="3" />
+							</svg>
+						</a>
+
+						<div
+							id="logout"
+							class="icons bg-coolgray-200 hover:text-error cursor-pointer"
+							on:click={logout}
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="ml-1 h-8 w-8"
+								viewBox="0 0 24 24"
+								stroke-width="1.5"
+								stroke="currentColor"
+								fill="none"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							>
+								<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+								<path
+									d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"
+								/>
+								<path d="M7 12h14l-3 -3m0 6l3 -3" />
+							</svg>
+						</div>
+						<div
+							class="w-full text-center font-bold text-stone-400 hover:bg-coolgray-200 hover:text-white"
+						>
+							<a
+								class="text-[10px] no-underline"
+								href={`https://github.com/coollabsio/coolify/releases/tag/v${$appSession.version}`}
+								target="_blank">v{$appSession.version}</a
+							>
+						</div>
+					</div>
 				</div>
+			</nav>
+			{#if $appSession.whiteLabeled}
+				<span class="fixed bottom-0 left-[50px] z-50 m-2 px-4 text-xs text-stone-700"
+					>Powered by <a href="https://coolify.io" target="_blank">Coolify</a></span
+				>
 			{/if}
-			<div class="flex flex-col space-y-2 py-2" class:mt-2={$appSession.whiteLabeled}>
+		{/if}
+		<div
+			class="navbar lg:hidden space-x-2 flex flex-row items-center bg-coollabs"
+			class:hidden={!$appSession.userId}
+		>
+			<label for="main-drawer" class="drawer-button btn btn-square btn-ghost flex-col">
+				<span class="burger bg-white" />
+				<span class="burger bg-white" />
+				<span class="burger bg-white" />
+			</label>
+			<div class="prose flex flex-row justify-between space-x-1 w-full items-center pr-3">
+				{#if !$appSession.whiteLabeled}
+					<h3 class="mb-0 text-white">Coolify</h3>
+				{/if}
+			</div>
+		</div>
+		<main>
+			<div class={$appSession.userId ? 'lg:pl-16' : null}>
+				<slot />
+			</div>
+		</main>
+	</div>
+	<div class="drawer-side">
+		<label for="main-drawer" class="drawer-overlay w-full" />
+		<ul class="menu bg-coolgray-200 w-60 p-2  space-y-3 pt-4 ">
+			<li>
 				<a
-					id="dashboard"
+					class="no-underline icons hover:text-white hover:bg-pink-500"
 					sveltekit:prefetch
 					href="/"
-					class="icons  hover:text-white"
-					class:text-pink-500={$page.url.pathname === '/'}
-					class:bg-coolgray-500={$page.url.pathname === '/'}
-					class:bg-coolgray-200={!($page.url.pathname === '/')}
+					class:bg-pink-500={$page.url.pathname === '/'}
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-9 w-9"
+						class="h-8 w-8"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
@@ -158,54 +336,45 @@
 						/>
 						<path d="M16 15c-2.21 1.333 -5.792 1.333 -8 0" />
 					</svg>
+					Dashboard
 				</a>
-				{#if $appSession.teamId === '0'}
-					<a
-						id="servers"
-						sveltekit:prefetch
-						href="/servers"
-						class="icons hover:text-white"
-						class:text-sky-500={$page.url.pathname === '/servers'}
-						class:bg-coolgray-500={$page.url.pathname === '/servers'}
-						class:bg-coolgray-200={!($page.url.pathname === '/servers')}
-					>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="w-8 h-8 mx-auto"
-							viewBox="0 0 24 24"
-							stroke-width="1.5"
-							stroke="currentColor"
-							fill="none"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						>
-							<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-							<rect x="3" y="4" width="18" height="8" rx="3" />
-							<rect x="3" y="12" width="18" height="8" rx="3" />
-							<line x1="7" y1="8" x2="7" y2="8.01" />
-							<line x1="7" y1="16" x2="7" y2="16.01" />
-						</svg>
-					</a>
-				{/if}
-			</div>
-			<Tooltip triggeredBy="#dashboard" placement="right">Dashboard</Tooltip>
-			<Tooltip triggeredBy="#servers" placement="right">Servers</Tooltip>
-			<div class="flex-1" />
+			</li>
 
-			<UpdateAvailable />
-			<div class="flex flex-col space-y-2 py-2">
+			<li>
 				<a
-					id="iam"
+					class="no-underline icons hover:text-white hover:bg-sky-500"
 					sveltekit:prefetch
+					href="/servers"
+					class:bg-sky-500={$page.url.pathname.startsWith('/servers')}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="w-8 h-8"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						fill="none"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+						<rect x="3" y="4" width="18" height="8" rx="3" />
+						<rect x="3" y="12" width="18" height="8" rx="3" />
+						<line x1="7" y1="8" x2="7" y2="8.01" />
+						<line x1="7" y1="16" x2="7" y2="16.01" />
+					</svg>
+					Servers
+				</a>
+			</li>
+			<li>
+				<a
+					class="no-underline icons hover:text-white hover:bg-iam"
 					href="/iam"
-					class="icons bg-coolgray-200"
-					class:text-iam={$page.url.pathname.startsWith('/iam')}
-					class:bg-coolgray-500={$page.url.pathname === '/iam'}
-					class:bg-coolgray-200={!($page.url.pathname === '/iam')}
+					class:bg-iam={$page.url.pathname.startsWith('/iam')}
 					><svg
 						xmlns="http://www.w3.org/2000/svg"
 						viewBox="0 0 24 24"
-						class="h-9 w-9"
+						class="h-8 w-8"
 						stroke-width="1.5"
 						stroke="currentColor"
 						fill="none"
@@ -218,22 +387,20 @@
 						<path d="M16 3.13a4 4 0 0 1 0 7.75" />
 						<path d="M21 21v-2a4 4 0 0 0 -3 -3.85" />
 					</svg>
+					IAM
 				</a>
-				<Tooltip triggeredBy="#iam" placement="right" color="bg-iam">IAM</Tooltip>
-
+			</li>
+			<li>
 				<a
-					id="settings"
-					sveltekit:prefetch
-					href={$appSession.teamId === '0' ? '/settings/global' : '/settings/ssh-keys'}
-					class="icons bg-coolgray-200"
-					class:text-settings={$page.url.pathname.startsWith('/settings')}
-					class:bg-coolgray-500={$page.url.pathname === '/settings'}
-					class:bg-coolgray-200={!($page.url.pathname === '/settings')}
+					class="no-underline icons hover:text-black hover:bg-settings"
+					href={$appSession.teamId === '0' ? '/settings/coolify' : '/settings/ssh'}
+					class:bg-settings={$page.url.pathname.startsWith('/settings')}
+					class:text-black={$page.url.pathname.startsWith('/settings')}
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						viewBox="0 0 24 24"
-						class="h-9 w-9"
+						class="h-8 w-8"
 						stroke-width="1.5"
 						stroke="currentColor"
 						fill="none"
@@ -246,12 +413,15 @@
 						/>
 						<circle cx="12" cy="12" r="3" />
 					</svg>
+					Settings
 				</a>
-				<Tooltip triggeredBy="#settings" placement="right" color="bg-settings  text-black"
-					>Settings</Tooltip
-				>
-
-				<div id="logout" class="icons bg-coolgray-200 hover:text-error" on:click={logout}>
+			</li>
+			<li class="flex-1 bg-transparent" />
+			<div class="block lg:hidden">
+				<UpdateAvailable />
+			</div>
+			<li>
+				<div class="no-underline icons hover:bg-error" on:click={logout}>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						class="ml-1 h-8 w-8"
@@ -268,29 +438,20 @@
 						/>
 						<path d="M7 12h14l-3 -3m0 6l3 -3" />
 					</svg>
+					<div class="-ml-1">Logout</div>
 				</div>
-				<Tooltip triggeredBy="#logout" placement="right" color="bg-red-600">Logout</Tooltip>
-
-				<div
-					class="w-full text-center font-bold text-stone-400 hover:bg-coolgray-200 hover:text-white"
+			</li>
+			<li class="w-full">
+				<a
+					class="text-xs hover:bg-coolgray-200 no-underline hover:text-white text-right"
+					href={`https://github.com/coollabsio/coolify/releases/tag/v${$appSession.version}`}
+					target="_blank">v{$appSession.version}</a
 				>
-					<a
-						class="text-[10px] no-underline"
-						href={`https://github.com/coollabsio/coolify/releases/tag/v${$appSession.version}`}
-						target="_blank">v{$appSession.version}</a
-					>
-				</div>
-			</div>
-		</div>
-	</nav>
-	{#if $appSession.whiteLabeled}
-		<span class="fixed bottom-0 left-[50px] z-50 m-2 px-4 text-xs text-stone-700"
-			>Powered by <a href="https://coolify.io" target="_blank">Coolify</a></span
-		>
-	{/if}
-{/if}
-<main>
-	<div class={$appSession.userId ? 'pl-14 lg:pl-20' : null}>
-		<slot />
+			</li>
+		</ul>
 	</div>
-</main>
+</div>
+
+<Tooltip triggeredBy="#iam" placement="right" color="bg-iam">IAM</Tooltip>
+<Tooltip triggeredBy="#settings" placement="right" color="bg-settings text-black">Settings</Tooltip>
+<Tooltip triggeredBy="#logout" placement="right" color="bg-red-600">Logout</Tooltip>
diff --git a/apps/ui/src/routes/applications/[id]/_Menu.svelte b/apps/ui/src/routes/applications/[id]/_Menu.svelte
new file mode 100644
index 000000000..9df3744c1
--- /dev/null
+++ b/apps/ui/src/routes/applications/[id]/_Menu.svelte
@@ -0,0 +1,289 @@
+<script lang="ts">
+	export let application: any;
+	import { status } from '$lib/store';
+	import { page } from '$app/stores';
+</script>
+
+<ul class="menu border bg-coolgray-100 border-coolgray-200 rounded p-2 space-y-2 sticky top-4">
+	<li class="menu-title">
+		<span>Configuration</span>
+	</li>
+	{#if application.gitSource?.htmlUrl && application.repository && application.branch}
+		<li>
+			<a
+				id="git"
+				href="{application.gitSource.htmlUrl}/{application.repository}/tree/{application.branch}"
+				target="_blank"
+				class="no-underline"
+			>
+				{#if application.gitSource?.type === 'gitlab'}
+					<svg viewBox="0 0 128 128" class="w-6 h-6">
+						<path
+							fill="#FC6D26"
+							d="M126.615 72.31l-7.034-21.647L105.64 7.76c-.716-2.206-3.84-2.206-4.556 0l-13.94 42.903H40.856L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664 1.385 72.31a4.792 4.792 0 001.74 5.358L64 121.894l60.874-44.227a4.793 4.793 0 001.74-5.357"
+						/><path fill="#E24329" d="M64 121.894l23.144-71.23H40.856L64 121.893z" /><path
+							fill="#FC6D26"
+							d="M64 121.894l-23.144-71.23H8.42L64 121.893z"
+						/><path
+							fill="#FCA326"
+							d="M8.42 50.663L1.384 72.31a4.79 4.79 0 001.74 5.357L64 121.894 8.42 50.664z"
+						/><path
+							fill="#E24329"
+							d="M8.42 50.663h32.436L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664z"
+						/><path fill="#FC6D26" d="M64 121.894l23.144-71.23h32.437L64 121.893z" /><path
+							fill="#FCA326"
+							d="M119.58 50.663l7.035 21.647a4.79 4.79 0 01-1.74 5.357L64 121.894l55.58-71.23z"
+						/><path
+							fill="#E24329"
+							d="M119.58 50.663H87.145l13.94-42.902c.717-2.206 3.84-2.206 4.557 0l13.94 42.903z"
+						/>
+					</svg>
+				{:else if application.gitSource?.type === 'github'}
+					<svg viewBox="0 0 128 128" class="w-6 h-6">
+						<g fill="#ffffff"
+							><path
+								fill-rule="evenodd"
+								clip-rule="evenodd"
+								d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"
+							/><path
+								d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm2.446 2.729c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zM31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm3.261 3.361c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm4.5 1.951c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm4.943.361c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm4.598-.782c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"
+							/></g
+						>
+					</svg>
+				{/if}
+				Open on Git
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					fill="currentColor"
+					viewBox="0 0 24 24"
+					stroke-width="3"
+					stroke="currentColor"
+					class="w-3 h-3  text-white"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25"
+					/>
+				</svg>
+			</a>
+		</li>
+	{/if}
+
+	<li class="rounded" class:bg-coollabs={$page.url.pathname === `/applications/${$page.params.id}`}>
+		<a href={`/applications/${$page.params.id}`} class="no-underline w-full"
+			><svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="w-6 h-6"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+				<path
+					d="M7 10h3v-3l-3.5 -3.5a6 6 0 0 1 8 8l6 6a2 2 0 0 1 -3 3l-6 -6a6 6 0 0 1 -8 -8l3.5 3.5"
+				/>
+			</svg>Build & Deploy</a
+		>
+	</li>
+	<li
+		class="rounded"
+		class:bg-coollabs={$page.url.pathname === `/applications/${$page.params.id}/secrets`}
+	>
+		<a href={`/applications/${$page.params.id}/secrets`} class="no-underline w-full"
+			><svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="w-6 h-6"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+				<path
+					d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3"
+				/>
+				<circle cx="12" cy="11" r="1" />
+				<line x1="12" y1="12" x2="12" y2="14.5" />
+			</svg>Secrets</a
+		>
+	</li>
+	<li
+		class="rounded"
+		class:bg-coollabs={$page.url.pathname === `/applications/${$page.params.id}/storages`}
+	>
+		<a href={`/applications/${$page.params.id}/storages`} class="no-underline w-full"
+			><svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="w-6 h-6"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+				<ellipse cx="12" cy="6" rx="8" ry="3" />
+				<path d="M4 6v6a8 3 0 0 0 16 0v-6" />
+				<path d="M4 12v6a8 3 0 0 0 16 0v-6" />
+			</svg>Persistent Volumes</a
+		>
+	</li>
+	<li
+		class="rounded"
+		class:bg-coollabs={$page.url.pathname === `/applications/${$page.params.id}/features`}
+	>
+		<a href={`/applications/${$page.params.id}/features`} class="no-underline w-full"
+			><svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="w-6 h-6"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+				<polyline points="13 3 13 10 19 10 11 21 11 14 5 14 13 3" />
+			</svg>Features</a
+		>
+	</li>
+
+	<li class="menu-title">
+		<span>Logs</span>
+	</li>
+	<li
+		class:text-stone-600={!$status.application.isRunning}
+		class="rounded"
+		class:bg-coollabs={$page.url.pathname === `/applications/${$page.params.id}/logs`}
+	>
+		<a
+			href={$status.application.isRunning ? `/applications/${$page.params.id}/logs` : ''}
+			class="no-underline w-full"
+			><svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+				<path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
+				<path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
+				<line x1="3" y1="6" x2="3" y2="19" />
+				<line x1="12" y1="6" x2="12" y2="19" />
+				<line x1="21" y1="6" x2="21" y2="19" />
+			</svg>Application</a
+		>
+	</li>
+	<li
+		class="rounded"
+		class:bg-coollabs={$page.url.pathname === `/applications/${$page.params.id}/logs/build`}
+	>
+		<a href={`/applications/${$page.params.id}/logs/build`} class="no-underline w-full"
+			><svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+				<circle cx="19" cy="13" r="2" />
+				<circle cx="4" cy="17" r="2" />
+				<circle cx="13" cy="17" r="2" />
+				<line x1="13" y1="19" x2="4" y2="19" />
+				<line x1="4" y1="15" x2="13" y2="15" />
+				<path d="M8 12v-5h2a3 3 0 0 1 3 3v5" />
+				<path d="M5 15v-2a1 1 0 0 1 1 -1h7" />
+				<path d="M19 11v-7l-6 7" />
+			</svg>Build</a
+		>
+	</li>
+	<li class="menu-title">
+		<span>Advanced</span>
+	</li>
+	<li
+		class="rounded"
+		class:text-stone-600={!$status.application.isRunning}
+		class:bg-coollabs={$page.url.pathname === `/applications/${$page.params.id}/usage`}
+	>
+		<a href={$status.application.isRunning ? `/applications/${$page.params.id}/usage` : ''} class="no-underline w-full"
+			><svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="w-6 h-6"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+				<path d="M3 12h4l3 8l4 -16l3 8h4" />
+			</svg>Monitoring</a
+		>
+	</li>
+	{#if !application.settings.isBot}
+		<li
+			class="rounded"
+			class:bg-coollabs={$page.url.pathname === `/applications/${$page.params.id}/previews`}
+		>
+			<a href={`/applications/${$page.params.id}/previews`} class="no-underline w-full"
+				><svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="w-6 h-6"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					fill="none"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+					<circle cx="7" cy="18" r="2" />
+					<circle cx="7" cy="6" r="2" />
+					<circle cx="17" cy="12" r="2" />
+					<line x1="7" y1="8" x2="7" y2="16" />
+					<path d="M7 8a4 4 0 0 0 4 4h4" />
+				</svg>Preview Deployments</a
+			>
+		</li>
+	{/if}
+	<li
+		class="rounded"
+		class:bg-coollabs={$page.url.pathname === `/applications/${$page.params.id}/danger`}
+	>
+		<a href={`/applications/${$page.params.id}/danger`} class="no-underline w-full"
+			><svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="w-6 h-6"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+				<path d="M12 9v2m0 4v.01" />
+				<path
+					d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75"
+				/>
+			</svg>Danger Zone</a
+		>
+	</li>
+</ul>
diff --git a/apps/ui/src/routes/applications/[id]/_PreviewSecret.svelte b/apps/ui/src/routes/applications/[id]/_PreviewSecret.svelte
new file mode 100644
index 000000000..1484ced24
--- /dev/null
+++ b/apps/ui/src/routes/applications/[id]/_PreviewSecret.svelte
@@ -0,0 +1,128 @@
+<script lang="ts">
+	export let length = 0;
+	export let index: number = 0;
+	export let name = '';
+	export let value = '';
+	export let isBuildSecret = false;
+
+	import { page } from '$app/stores';
+	import { del, post, put } from '$lib/api';
+	import { errorNotification } from '$lib/common';
+	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+	import { addToast } from '$lib/store';
+	import { t } from '$lib/translations';
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+	const { id } = $page.params;
+
+	async function updatePreviewSecret() {
+		try {
+			await put(`/applications/${id}/secrets/preview`, {
+				name,
+				value
+			});
+			addToast({
+				message: 'Secret updated.',
+				type: 'success'
+			});
+		} catch (error) {
+			return errorNotification(error);
+		}
+	}
+</script>
+
+<div class="w-full font-bold grid grid-cols-1 lg:grid-cols-4 gap-2 pb-2">
+	<div class="flex flex-col">
+		{#if index === 0 || length === 0}
+			<label for="name" class="pb-2 uppercase">name</label>
+		{/if}
+
+		<input
+			id="secretName"
+			readonly
+			disabled
+			value={name}
+			required
+			placeholder="EXAMPLE_VARIABLE"
+			class=" w-full"
+		/>
+	</div>
+	<div class="flex flex-col">
+		{#if index === 0 || length === 0}
+			<label for="value" class="pb-2 uppercase">value</label>
+		{/if}
+
+		<CopyPasswordField
+			id="secretValue"
+			name="secretValue"
+			isPasswordField={true}
+			bind:value
+			placeholder="J$#@UIO%HO#$U%H"
+		/>
+	</div>
+	<div class="flex lg:flex-col flex-row justify-start items-center pt-3 lg:pt-0">
+		{#if index === 0 || length === 0}
+			<label for="name" class="pb-2 uppercase lg:block hidden">Need during buildtime?</label>
+		{/if}
+		<label for="name" class="pb-2 uppercase lg:hidden block">Need during buildtime?</label>
+
+		<div class="flex justify-center h-full items-center pt-0 lg:pt-0 pl-4 lg:pl-0">
+			<button
+				aria-pressed="false"
+				class="opacity-50 cursor-pointer cursor-not-allowedrelative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out "
+				class:bg-green-600={isBuildSecret}
+				class:bg-stone-700={!isBuildSecret}
+			>
+				<span class="sr-only">{$t('application.secrets.use_isbuildsecret')}</span>
+				<span
+					class="pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow transition duration-200 ease-in-out"
+					class:translate-x-5={isBuildSecret}
+					class:translate-x-0={!isBuildSecret}
+				>
+					<span
+						class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity duration-200 ease-in"
+						class:opacity-0={isBuildSecret}
+						class:opacity-100={!isBuildSecret}
+						aria-hidden="true"
+					>
+						<svg class="h-3 w-3 bg-white text-red-600" fill="none" viewBox="0 0 12 12">
+							<path
+								d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+						</svg>
+					</span>
+					<span
+						class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity duration-100 ease-out"
+						aria-hidden="true"
+						class:opacity-100={isBuildSecret}
+						class:opacity-0={!isBuildSecret}
+					>
+						<svg class="h-3 w-3 bg-white text-green-600" fill="currentColor" viewBox="0 0 12 12">
+							<path
+								d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"
+							/>
+						</svg>
+					</span>
+				</span>
+			</button>
+		</div>
+	</div>
+	<div class="flex flex-row lg:flex-col lg:items-center items-start">
+		{#if index === 0 || length === 0}
+			<label for="name" class="pb-2 uppercase lg:block hidden">Actions</label>
+		{/if}
+
+		<div class="flex justify-center h-full items-center pt-3">
+			<div class="flex flex-row justify-center space-x-2">
+				<div class="flex items-center justify-center">
+					<button class="btn btn-sm btn-primary" on:click={updatePreviewSecret}>Update</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/apps/ui/src/routes/applications/[id]/_Secret.svelte b/apps/ui/src/routes/applications/[id]/_Secret.svelte
index a35b953a4..a16158587 100644
--- a/apps/ui/src/routes/applications/[id]/_Secret.svelte
+++ b/apps/ui/src/routes/applications/[id]/_Secret.svelte
@@ -1,192 +1,189 @@
 <script lang="ts">
+	export let length = 0;
+	export let index: number = 0;
 	export let name = '';
 	export let value = '';
 	export let isBuildSecret = false;
 	export let isNewSecret = false;
-	export let isPRMRSecret = false;
-	export let PRMRSecret: any = {};
-	if (isPRMRSecret) value = PRMRSecret.value;
 
 	import { page } from '$app/stores';
-	import { del } from '$lib/api';
+	import { del, post, put } from '$lib/api';
 	import { errorNotification } from '$lib/common';
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
 	import { addToast } from '$lib/store';
 	import { t } from '$lib/translations';
 	import { createEventDispatcher } from 'svelte';
-	import { saveSecret } from './utils';
 
 	const dispatch = createEventDispatcher();
 	const { id } = $page.params;
+	function cleanupState() {
+		if (isNewSecret) {
+			name = '';
+			value = '';
+			isBuildSecret = false;
+		}
+	}
 	async function removeSecret() {
 		try {
 			await del(`/applications/${id}/secrets`, { name });
-			dispatch('refresh');
-			if (isNewSecret) {
-				name = '';
-				value = '';
-				isBuildSecret = false;
-			}
+			cleanupState();
 			addToast({
 				message: 'Secret removed.',
 				type: 'success'
 			});
-		} catch (error) {
-			return errorNotification(error);
-		}
-	}
-
-	async function createSecret(isNew: any) {
-		try {
-			if (isNew) {
-				if (!name || !value) return;
-			}
-			if (value === undefined && isPRMRSecret) {
-				return
-			}
-			if (value === '' && !isPRMRSecret) {
-				throw new Error('Value is required.')
-			}
-			await saveSecret({
-				isNew,
-				name,
-				value,
-				isBuildSecret,
-				isPRMRSecret,
-				isNewSecret,
-				applicationId: id
-			});
-			if (isNewSecret) {
-				name = '';
-				value = '';
-				isBuildSecret = false;
-				addToast({
-					message: 'Secret added.',
-					type: 'success'
-				});
-			} else {
-				addToast({
-				message: 'Secret updated.',
-				type: 'success'
-			});
-			}
 			dispatch('refresh');
 		} catch (error) {
 			return errorNotification(error);
 		}
 	}
 
-	async function setSecretValue() {
-		if (!isPRMRSecret) {
-			isBuildSecret = !isBuildSecret;
-			if (!isNewSecret) {
-				await saveSecret({
-					isNew: isNewSecret,
-					name,
-					value,
-					isBuildSecret,
-					isPRMRSecret,
-					isNewSecret,
-					applicationId: id
-				});
-				addToast({
-					message: 'Secret updated.',
-					type: 'success'
-				});
-			}
+	async function addNewSecret() {
+		try {
+			if (!name) return errorNotification(`${t.get('forms.name')} ${t.get('forms.is_required')}`);
+			if (!value) return errorNotification(`${t.get('forms.value')} ${t.get('forms.is_required')}`);
+			await post(`/applications/${id}/secrets`, {
+				name,
+				value,
+				isBuildSecret
+			});
+			cleanupState();
+			addToast({
+				message: 'Secret added.',
+				type: 'success'
+			});
+			dispatch('refresh');
+		} catch (error) {
+			return errorNotification(error);
+		}
+	}
+
+	async function updateSecret({
+		changeIsBuildSecret = false
+	}: { changeIsBuildSecret?: boolean } = {}) {
+		if (changeIsBuildSecret) isBuildSecret = !isBuildSecret;
+		if (isNewSecret) return
+		try {
+			await put(`/applications/${id}/secrets`, {
+				name,
+				value,
+				isBuildSecret: changeIsBuildSecret ? isBuildSecret : undefined
+			});
+			addToast({
+				message: 'Secret updated.',
+				type: 'success'
+			});
+			dispatch('refresh');
+		} catch (error) {
+			return errorNotification(error);
 		}
 	}
 </script>
 
-<td>
-	<input
-		id={isNewSecret ? 'secretName' : 'secretNameNew'}
-		bind:value={name}
-		required
-		placeholder="EXAMPLE_VARIABLE"
-		readonly={!isNewSecret}
-		class:bg-transparent={!isNewSecret}
-		class:cursor-not-allowed={!isNewSecret}
-	/>
-</td>
-<td>
-	<CopyPasswordField
-		id={isNewSecret ? 'secretValue' : 'secretValueNew'}
-		name={isNewSecret ? 'secretValue' : 'secretValueNew'}
-		isPasswordField={true}
-		bind:value
-		placeholder="J$#@UIO%HO#$U%H"
-	/>
-</td>
-<td class="text-center">
-	<button
-		on:click={setSecretValue}
-		aria-pressed="false"
-		class="relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out"
-		class:bg-green-600={isBuildSecret}
-		class:bg-stone-700={!isBuildSecret}
-		class:opacity-50={isPRMRSecret}
-		class:cursor-not-allowed={isPRMRSecret}
-		class:cursor-pointer={!isPRMRSecret}
-	>
-		<span class="sr-only">{$t('application.secrets.use_isbuildsecret')}</span>
-		<span
-			class="pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow transition duration-200 ease-in-out"
-			class:translate-x-5={isBuildSecret}
-			class:translate-x-0={!isBuildSecret}
-		>
-			<span
-				class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity duration-200 ease-in"
-				class:opacity-0={isBuildSecret}
-				class:opacity-100={!isBuildSecret}
-				aria-hidden="true"
+<div class="w-full font-bold grid grid-cols-1 lg:grid-cols-4 gap-2 pb-2">
+	<div class="flex flex-col">
+		{#if (index === 0 && !isNewSecret) || length === 0}
+			<label for="name" class="pb-2 uppercase">name</label>
+		{/if}
+
+		<input
+			id={isNewSecret ? 'secretName' : 'secretNameNew'}
+			bind:value={name}
+			required
+			placeholder="EXAMPLE_VARIABLE"
+			readonly={!isNewSecret}
+			class=" w-full"
+			class:bg-coolblack={!isNewSecret}
+			class:border={!isNewSecret}
+			class:border-dashed={!isNewSecret}
+			class:border-coolgray-300={!isNewSecret}
+			class:cursor-not-allowed={!isNewSecret}
+		/>
+	</div>
+	<div class="flex flex-col">
+		{#if (index === 0 && !isNewSecret) || length === 0}
+			<label for="value" class="pb-2 uppercase">value</label>
+		{/if}
+
+		<CopyPasswordField
+			id={isNewSecret ? 'secretValue' : 'secretValueNew'}
+			name={isNewSecret ? 'secretValue' : 'secretValueNew'}
+			isPasswordField={true}
+			bind:value
+			placeholder="J$#@UIO%HO#$U%H"
+		/>
+	</div>
+	<div class="flex lg:flex-col flex-row justify-start items-center pt-3 lg:pt-0">
+		{#if (index === 0 && !isNewSecret) || length === 0}
+			<label for="name" class="pb-2 uppercase lg:block hidden">Need during buildtime?</label>
+		{/if}
+		<label for="name" class="pb-2 uppercase lg:hidden block">Need during buildtime?</label>
+
+		<div class="flex justify-center h-full items-center pt-0 lg:pt-0 pl-4 lg:pl-0">
+			<button
+				on:click={() => updateSecret({ changeIsBuildSecret: true })}
+				aria-pressed="false"
+				class="relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out "
+				class:bg-green-600={isBuildSecret}
+				class:bg-stone-700={!isBuildSecret}
 			>
-				<svg class="h-3 w-3 bg-white text-red-600" fill="none" viewBox="0 0 12 12">
-					<path
-						d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
-						stroke="currentColor"
-						stroke-width="2"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					/>
-				</svg>
-			</span>
-			<span
-				class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity duration-100 ease-out"
-				aria-hidden="true"
-				class:opacity-100={isBuildSecret}
-				class:opacity-0={!isBuildSecret}
-			>
-				<svg class="h-3 w-3 bg-white text-green-600" fill="currentColor" viewBox="0 0 12 12">
-					<path
-						d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"
-					/>
-				</svg>
-			</span>
-		</span>
-	</button>
-</td>
-<td>
-	{#if isNewSecret}
-		<div class="flex items-center justify-center">
-			<button class="btn bg-applications btn-sm" on:click={() => createSecret(true)}
-				>{$t('forms.add')}</button
-			>
-		</div>
-	{:else}
-		<div class="flex flex-row justify-center space-x-2">
-			<div class="flex items-center justify-center">
-				<button class="btn bg-application btn-sm" on:click={() => createSecret(false)}
-					>{$t('forms.set')}</button
+				<span class="sr-only">{$t('application.secrets.use_isbuildsecret')}</span>
+				<span
+					class="pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow transition duration-200 ease-in-out"
+					class:translate-x-5={isBuildSecret}
+					class:translate-x-0={!isBuildSecret}
 				>
-			</div>
-			{#if !isPRMRSecret}
-				<div class="flex justify-center items-end">
-					<button class="btn btn-sm bg-red-600 hover:bg-red-500" on:click={removeSecret}
-						>{$t('forms.remove')}</button
+					<span
+						class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity duration-200 ease-in"
+						class:opacity-0={isBuildSecret}
+						class:opacity-100={!isBuildSecret}
+						aria-hidden="true"
 					>
+						<svg class="h-3 w-3 bg-white text-red-600" fill="none" viewBox="0 0 12 12">
+							<path
+								d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+						</svg>
+					</span>
+					<span
+						class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity duration-100 ease-out"
+						aria-hidden="true"
+						class:opacity-100={isBuildSecret}
+						class:opacity-0={!isBuildSecret}
+					>
+						<svg class="h-3 w-3 bg-white text-green-600" fill="currentColor" viewBox="0 0 12 12">
+							<path
+								d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"
+							/>
+						</svg>
+					</span>
+				</span>
+			</button>
+		</div>
+	</div>
+	<div class="flex flex-row lg:flex-col lg:items-center items-start">
+		{#if (index === 0 && !isNewSecret) || length === 0}
+			<label for="name" class="pb-2 uppercase lg:block hidden">Actions</label>
+		{/if}
+
+		<div class="flex justify-center h-full items-center pt-3">
+			{#if isNewSecret}
+				<div class="flex items-center justify-center">
+					<button class="btn btn-sm btn-primary" on:click={addNewSecret}>Add</button>
+				</div>
+			{:else}
+				<div class="flex flex-row justify-center space-x-2">
+					<div class="flex items-center justify-center">
+						<button class="btn btn-sm btn-primary" on:click={() => updateSecret()}>Set</button>
+					</div>
+					<div class="flex justify-center items-end">
+						<button class="btn btn-sm btn-error" on:click={removeSecret}>Remove</button>
+					</div>
 				</div>
 			{/if}
 		</div>
-	{/if}
-</td>
+	</div>
+</div>
diff --git a/apps/ui/src/routes/applications/[id]/_Storage.svelte b/apps/ui/src/routes/applications/[id]/_Storage.svelte
index f67686eeb..dc7058036 100644
--- a/apps/ui/src/routes/applications/[id]/_Storage.svelte
+++ b/apps/ui/src/routes/applications/[id]/_Storage.svelte
@@ -59,32 +59,36 @@
 	}
 </script>
 
-<td>
-	<input
-		bind:value={storage.path}
-		required
-		placeholder="eg: /sqlite.db"
-	/>
-</td>
-<td>
-	{#if isNew}
-		<div class="flex items-center justify-center">
-			<button class="btn btn-sm bg-applications" on:click={() => saveStorage(true)}
-				>{$t('forms.add')}</button
-			>
+<div class="w-full font-bold grid gap-2">
+	<div class="flex flex-col pb-2">
+		
+		<div class="flex flex-col lg:flex-row lg:space-y-0 space-y-2">
+			<input
+				class="w-full lg:w-64"
+				bind:value={storage.path}
+				required
+				placeholder="eg: /sqlite.db"
+			/>
+			{#if isNew}
+				<div class="flex items-center justify-center w-full lg:w-64">
+					<button class="btn btn-sm btn-primary" on:click={() => saveStorage(true)}
+						>{$t('forms.add')}</button
+					>
+				</div>
+			{:else}
+				<div class="flex flex-row items-center justify-center space-x-2 w-full lg:w-64">
+					<div class="flex items-center justify-center">
+						<button class="btn btn-sm btn-primary" on:click={() => saveStorage(false)}
+							>{$t('forms.set')}</button
+						>
+					</div>
+					<div class="flex justify-center">
+						<button class="btn btn-sm btn-error" on:click={removeStorage}
+							>{$t('forms.remove')}</button
+						>
+					</div>
+				</div>
+			{/if}
 		</div>
-	{:else}
-		<div class="flex flex-row justify-center space-x-2">
-			<div class="flex items-center justify-center">
-				<button class="btn btn-sm bg-applications" on:click={() => saveStorage(false)}
-					>{$t('forms.set')}</button
-				>
-			</div>
-			<div class="flex justify-center items-end">
-				<button class="btn btn-sm bg-red-600 hover:bg-red-500" on:click={removeStorage}
-					>{$t('forms.remove')}</button
-				>
-			</div>
-		</div>
-	{/if}
-</td>
+	</div>
+</div>
diff --git a/apps/ui/src/routes/applications/[id]/__layout.svelte b/apps/ui/src/routes/applications/[id]/__layout.svelte
index c7d1f4cd1..4282c6a33 100644
--- a/apps/ui/src/routes/applications/[id]/__layout.svelte
+++ b/apps/ui/src/routes/applications/[id]/__layout.svelte
@@ -20,7 +20,7 @@
 			if (!application || Object.entries(application).length === 0) {
 				return {
 					status: 302,
-					redirect: '/applications'
+					redirect: '/'
 				};
 			}
 			const configurationPhase = checkConfiguration(application);
@@ -55,7 +55,6 @@
 	export let application: any;
 	export let settings: any;
 	import { page } from '$app/stores';
-	import DeleteIcon from '$lib/components/DeleteIcon.svelte';
 	import { del, get, post } from '$lib/api';
 	import { goto } from '$app/navigation';
 	import { onDestroy, onMount } from 'svelte';
@@ -72,6 +71,7 @@
 	} from '$lib/store';
 	import { errorNotification, handlerNotFoundLoad } from '$lib/common';
 	import Tooltip from '$lib/components/Tooltip.svelte';
+	import Menu from './_Menu.svelte';
 
 	let statusInterval: any;
 	let forceDelete = false;
@@ -99,23 +99,6 @@
 		}
 	}
 
-	async function deleteApplication(name: string, force: boolean) {
-		const sure = confirm($t('application.confirm_to_delete', { name }));
-		if (sure) {
-			$status.application.initialLoading = true;
-			try {
-				await del(`/applications/${id}`, { id, force });
-				return await window.location.assign(`/`);
-			} catch (error) {
-				if (error.message.startsWith(`Command failed: SSH_AUTH_SOCK=/tmp/coolify-ssh-agent.pid`)) {
-					forceDelete = true;
-				}
-				return errorNotification(error);
-			} finally {
-				$status.application.initialLoading = false;
-			}
-		}
-	}
 	async function restartApplication() {
 		try {
 			$status.application.initialLoading = true;
@@ -188,162 +171,136 @@
 	});
 </script>
 
-<nav class="nav-side">
-	{#if $location}
-		<a
-			id="open"
-			href={$location}
-			target="_blank"
-			class="icons flex items-center bg-transparent text-sm"
-			><svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="h-6 w-6"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentColor"
-				fill="none"
-				stroke-linecap="round"
-				stroke-linejoin="round"
+<div class="mx-auto max-w-screen-2xl px-6 grid grid-cols-1 lg:grid-cols-2">
+	<nav class="header flex flex-row order-2 lg:order-1 px-0 lg:px-4">
+		<div class="title lg:pb-10">
+			{#if $page.url.pathname === `/applications/${id}/configuration/source`}
+				Select a Source
+			{:else if $page.url.pathname === `/applications/${id}/configuration/destination`}
+				Select a Destination
+				{:else if $page.url.pathname === `/applications/${id}/configuration/repository`}
+				Select a Repository
+			{:else if $page.url.pathname === `/applications/${id}/configuration/buildpack`}
+				Select a Build Pack
+			{:else}
+				<div class="flex justify-center items-center space-x-2">
+					<div>Configurations</div>
+					<div
+						class="badge rounded uppercase"
+						class:text-green-500={$status.application.isRunning}
+						class:text-red-500={!$status.application.isRunning}
+					>
+						{$status.application.isRunning ? 'Running' : 'Stopped'}
+					</div>
+				</div>
+			{/if}
+		</div>
+	</nav>
+	<div
+		class="pt-4 flex flex-row items-start justify-center lg:justify-end space-x-2 order-1 lg:order-2"
+	>
+		{#if $status.application.isExited || $status.application.isRestarting}
+			<a
+				id="applicationerror"
+				href={$isDeploymentEnabled ? `/applications/${id}/logs` : null}
+				class="icons bg-transparent text-sm text-error"
+				sveltekit:prefetch
 			>
-				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-				<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
-				<line x1="10" y1="14" x2="20" y2="4" />
-				<polyline points="15 4 20 4 20 9" />
-			</svg></a
-		>
-		<Tooltip triggeredBy="#open">Open</Tooltip>
-
-		<div class="border border-coolgray-500 h-8" />
-	{/if}
-
-	{#if $status.application.isExited || $status.application.isRestarting}
-		<a
-			id="applicationerror"
-			href={$isDeploymentEnabled ? `/applications/${id}/logs` : null}
-			class="icons bg-transparent text-sm flex items-center text-error"
-			sveltekit:prefetch
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="w-6 h-6"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentcolor"
-				fill="none"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			>
-				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-				<path
-					d="M8.7 3h6.6c.3 0 .5 .1 .7 .3l4.7 4.7c.2 .2 .3 .4 .3 .7v6.6c0 .3 -.1 .5 -.3 .7l-4.7 4.7c-.2 .2 -.4 .3 -.7 .3h-6.6c-.3 0 -.5 -.1 -.7 -.3l-4.7 -4.7c-.2 -.2 -.3 -.4 -.3 -.7v-6.6c0 -.3 .1 -.5 .3 -.7l4.7 -4.7c.2 -.2 .4 -.3 .7 -.3z"
-				/>
-				<line x1="12" y1="8" x2="12" y2="12" />
-				<line x1="12" y1="16" x2="12.01" y2="16" />
-			</svg>
-		</a>
-		<Tooltip triggeredBy="#applicationerror">Application exited or restarting!</Tooltip>
-		<button
-			id="stop"
-			on:click={stopApplication}
-			type="submit"
-			disabled={!$isDeploymentEnabled}
-			class="icons bg-transparent text-sm flex items-center space-x-2 text-error"
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="w-6 h-6"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentColor"
-				fill="none"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			>
-				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-				<rect x="6" y="5" width="4" height="14" rx="1" />
-				<rect x="14" y="5" width="4" height="14" rx="1" />
-			</svg>
-		</button>
-		<Tooltip triggeredBy="#stop">Stop</Tooltip>
-	{/if}
-	{#if $status.application.initialLoading}
-		<button
-			class="icons flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out hover:bg-transparent"
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="h-6 w-6"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentColor"
-				fill="none"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			>
-				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-				<path d="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5" />
-				<line x1="5.63" y1="7.16" x2="5.63" y2="7.17" />
-				<line x1="4.06" y1="11" x2="4.06" y2="11.01" />
-				<line x1="4.63" y1="15.1" x2="4.63" y2="15.11" />
-				<line x1="7.16" y1="18.37" x2="7.16" y2="18.38" />
-				<line x1="11" y1="19.94" x2="11" y2="19.95" />
-			</svg>
-		</button>
-	{:else if $status.application.isRunning}
-		<button
-			id="stop"
-			on:click={stopApplication}
-			type="submit"
-			disabled={!$isDeploymentEnabled}
-			class="icons bg-transparent text-sm flex items-center space-x-2 text-error"
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="w-6 h-6"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentColor"
-				fill="none"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			>
-				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-				<rect x="6" y="5" width="4" height="14" rx="1" />
-				<rect x="14" y="5" width="4" height="14" rx="1" />
-			</svg>
-		</button>
-		<Tooltip triggeredBy="#stop">Stop</Tooltip>
-
-		<button
-			id="restart"
-			on:click={restartApplication}
-			type="submit"
-			disabled={!$isDeploymentEnabled}
-			class="icons bg-transparent text-sm flex items-center space-x-2"
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="w-6 h-6"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentColor"
-				fill="none"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			>
-				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-				<path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" />
-				<path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" />
-			</svg>
-		</button>
-		<Tooltip triggeredBy="#restart">Restart (useful to change secrets)</Tooltip>
-
-		<form on:submit|preventDefault={() => handleDeploySubmit(true)}>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="w-6 h-6"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentcolor"
+					fill="none"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+					<path
+						d="M8.7 3h6.6c.3 0 .5 .1 .7 .3l4.7 4.7c.2 .2 .3 .4 .3 .7v6.6c0 .3 -.1 .5 -.3 .7l-4.7 4.7c-.2 .2 -.4 .3 -.7 .3h-6.6c-.3 0 -.5 -.1 -.7 -.3l-4.7 -4.7c-.2 -.2 -.3 -.4 -.3 -.7v-6.6c0 -.3 .1 -.5 .3 -.7l4.7 -4.7c.2 -.2 .4 -.3 .7 -.3z"
+					/>
+					<line x1="12" y1="8" x2="12" y2="12" />
+					<line x1="12" y1="16" x2="12.01" y2="16" />
+				</svg>
+			</a>
+			<Tooltip triggeredBy="#applicationerror">Application exited with an error!</Tooltip>
+		{/if}
+		{#if $status.application.initialLoading}
+			<button class="icons animate-spin bg-transparent duration-500 ease-in-out">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-6 w-6"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					fill="none"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+					<path d="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5" />
+					<line x1="5.63" y1="7.16" x2="5.63" y2="7.17" />
+					<line x1="4.06" y1="11" x2="4.06" y2="11.01" />
+					<line x1="4.63" y1="15.1" x2="4.63" y2="15.11" />
+					<line x1="7.16" y1="18.37" x2="7.16" y2="18.38" />
+					<line x1="11" y1="19.94" x2="11" y2="19.95" />
+				</svg>
+			</button>
+		{:else if $status.application.isRunning}
 			<button
-				id="forceredeploy"
+				id="stop"
+				on:click={stopApplication}
 				type="submit"
 				disabled={!$isDeploymentEnabled}
-				class="icons bg-transparent text-sm flex items-center space-x-2"
+				class="icons bg-transparent text-error"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="w-6 h-6"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					fill="none"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+					<rect x="6" y="5" width="4" height="14" rx="1" />
+					<rect x="14" y="5" width="4" height="14" rx="1" />
+				</svg>
+			</button>
+			<Tooltip triggeredBy="#stop">Stop</Tooltip>
+
+			<button
+				id="restart"
+				on:click={restartApplication}
+				type="submit"
+				disabled={!$isDeploymentEnabled}
+				class="icons bg-transparent"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="w-6 h-6"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					fill="none"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+					<path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" />
+					<path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" />
+				</svg>
+			</button>
+			<Tooltip triggeredBy="#restart">Restart (useful to change secrets)</Tooltip>
+
+			<button
+				id="forceredeploy"
+				disabled={!$isDeploymentEnabled}
+				class="icons bg-transparent "
+				on:click={() => handleDeploySubmit(true)}
 			>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
@@ -362,19 +319,17 @@
 					/>
 				</svg>
 			</button>
-			<Tooltip triggeredBy="#forceredeploy">Force redeploy (without cache)</Tooltip>
-		</form>
-	{:else}
-		<form on:submit|preventDefault={() => handleDeploySubmit(false)}>
+			<Tooltip triggeredBy="#forceredeploy">Force Redeploy (without cache)</Tooltip>
+		{:else}
+		{#if $isDeploymentEnabled}
 			<button
-				id="deploy"
-				type="submit"
+				class="icons flex items-center font-bold"
 				disabled={!$isDeploymentEnabled}
-				class="icons bg-transparent text-sm flex items-center space-x-2 text-success"
+				on:click={() => handleDeploySubmit(false)}
 			>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
-					class="w-6 h-6"
+					class="w-6 h-6 mr-2 text-green-500"
 					viewBox="0 0 24 24"
 					stroke-width="1.5"
 					stroke="currentColor"
@@ -385,119 +340,16 @@
 					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
 					<path d="M7 4v16l13 -8z" />
 				</svg>
+				Deploy
 			</button>
-			<Tooltip triggeredBy="#deploy">Deploy</Tooltip>
-		</form>
-	{/if}
+			{/if}
+		{/if}
 
-	<div class="border border-coolgray-500 h-8" />
-	<a
-		href={$isDeploymentEnabled ? `/applications/${id}` : null}
-		sveltekit:prefetch
-		class="hover:text-yellow-500 rounded"
-		class:text-yellow-500={$page.url.pathname === `/applications/${id}`}
-		class:bg-coolgray-500={$page.url.pathname === `/applications/${id}`}
-	>
-		<button
-			disabled={!$isDeploymentEnabled}
-			id="configurations"
-			class="icons bg-transparent text-sm"
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="h-6 w-6"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentColor"
-				fill="none"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			>
-				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-				<rect x="4" y="8" width="4" height="4" />
-				<line x1="6" y1="4" x2="6" y2="8" />
-				<line x1="6" y1="12" x2="6" y2="20" />
-				<rect x="10" y="14" width="4" height="4" />
-				<line x1="12" y1="4" x2="12" y2="14" />
-				<line x1="12" y1="18" x2="12" y2="20" />
-				<rect x="16" y="5" width="4" height="4" />
-				<line x1="18" y1="4" x2="18" y2="5" />
-				<line x1="18" y1="9" x2="18" y2="20" />
-			</svg></button
-		></a
-	>
-
-	<Tooltip triggeredBy="#configurations">Configurations</Tooltip>
-	<a
-		href={$isDeploymentEnabled ? `/applications/${id}/secrets` : null}
-		sveltekit:prefetch
-		class="hover:text-pink-500 rounded"
-		class:text-pink-500={$page.url.pathname === `/applications/${id}/secrets`}
-		class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/secrets`}
-	>
-		<button id="secrets" disabled={!$isDeploymentEnabled} class="icons bg-transparent text-sm">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="w-6 h-6"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentColor"
-				fill="none"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			>
-				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-				<path
-					d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3"
-				/>
-				<circle cx="12" cy="11" r="1" />
-				<line x1="12" y1="12" x2="12" y2="14.5" />
-			</svg></button
-		></a
-	>
-	<Tooltip triggeredBy="#secrets">Secrets</Tooltip>
-	<a
-		href={$isDeploymentEnabled ? `/applications/${id}/storages` : null}
-		sveltekit:prefetch
-		class="hover:text-pink-500 rounded"
-		class:text-pink-500={$page.url.pathname === `/applications/${id}/storages`}
-		class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/storages`}
-	>
-		<button
-			id="persistentstorages"
-			disabled={!$isDeploymentEnabled}
-			class="icons bg-transparent text-sm"
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="w-6 h-6"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentColor"
-				fill="none"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			>
-				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-				<ellipse cx="12" cy="6" rx="8" ry="3" />
-				<path d="M4 6v6a8 3 0 0 0 16 0v-6" />
-				<path d="M4 12v6a8 3 0 0 0 16 0v-6" />
-			</svg>
-		</button></a
-	>
-	<Tooltip triggeredBy="#persistentstorages">Persistent Storages</Tooltip>
-	{#if !application.settings.isBot}
-		<a
-			href={$isDeploymentEnabled ? `/applications/${id}/previews` : null}
-			sveltekit:prefetch
-			class="hover:text-orange-500 rounded"
-			class:text-orange-500={$page.url.pathname === `/applications/${id}/previews`}
-			class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/previews`}
-		>
-			<button id="previews" disabled={!$isDeploymentEnabled} class="icons bg-transparent text-sm">
-				<svg
+		{#if $location && $status.application.isRunning}
+			<a id="openApplication" href={$location} target="_blank" class="icons bg-transparent "
+				><svg
 					xmlns="http://www.w3.org/2000/svg"
-					class="w-6 h-6"
+					class="h-6 w-6"
 					viewBox="0 0 24 24"
 					stroke-width="1.5"
 					stroke="currentColor"
@@ -506,107 +358,25 @@
 					stroke-linejoin="round"
 				>
 					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-					<circle cx="7" cy="18" r="2" />
-					<circle cx="7" cy="6" r="2" />
-					<circle cx="17" cy="12" r="2" />
-					<line x1="7" y1="8" x2="7" y2="16" />
-					<path d="M7 8a4 4 0 0 0 4 4h4" />
-				</svg></button
-			></a
-		>
-		<Tooltip triggeredBy="#previews">Previews</Tooltip>
-	{/if}
-	<div class="border border-coolgray-500 h-8" />
-	<a
-		href={$isDeploymentEnabled && $status.application.isRunning ? `/applications/${id}/logs` : null}
-		sveltekit:prefetch
-		class="hover:text-sky-500 rounded"
-		class:text-sky-500={$page.url.pathname === `/applications/${id}/logs`}
-		class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/logs`}
-	>
-		<button
-			id="applicationlogs"
-			disabled={!$isDeploymentEnabled || !$status.application.isRunning}
-			class="icons bg-transparent text-sm"
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="h-6 w-6"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentColor"
-				fill="none"
-				stroke-linecap="round"
-				stroke-linejoin="round"
+					<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+					<line x1="10" y1="14" x2="20" y2="4" />
+					<polyline points="15 4 20 4 20 9" />
+				</svg></a
 			>
-				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-				<path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
-				<path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
-				<line x1="3" y1="6" x2="3" y2="19" />
-				<line x1="12" y1="6" x2="12" y2="19" />
-				<line x1="21" y1="6" x2="21" y2="19" />
-			</svg>
-		</button></a
-	>
-	<Tooltip triggeredBy="#applicationlogs">Application Logs</Tooltip>
-	<a
-		href={$isDeploymentEnabled ? `/applications/${id}/logs/build` : null}
-		sveltekit:prefetch
-		class="hover:text-red-500 rounded"
-		class:text-red-500={$page.url.pathname === `/applications/${id}/logs/build`}
-		class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/logs/build`}
-	>
-		<button id="buildlogs" disabled={!$isDeploymentEnabled} class="icons bg-transparent text-sm">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="h-6 w-6"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentColor"
-				fill="none"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			>
-				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-				<circle cx="19" cy="13" r="2" />
-				<circle cx="4" cy="17" r="2" />
-				<circle cx="13" cy="17" r="2" />
-				<line x1="13" y1="19" x2="4" y2="19" />
-				<line x1="4" y1="15" x2="13" y2="15" />
-				<path d="M8 12v-5h2a3 3 0 0 1 3 3v5" />
-				<path d="M5 15v-2a1 1 0 0 1 1 -1h7" />
-				<path d="M19 11v-7l-6 7" />
-			</svg>
-		</button></a
-	>
-	<Tooltip triggeredBy="#buildlogs">Build Logs</Tooltip>
-	<div class="border border-coolgray-500 h-8" />
-
-	{#if forceDelete}
-		<button
-			id="forcedelete"
-			on:click={() => deleteApplication(application.name, true)}
-			type="submit"
-			disabled={!$appSession.isAdmin}
-			class:bg-red-600={$appSession.isAdmin}
-			class:hover:bg-red-500={$appSession.isAdmin}
-			class="icons bg-transparent text-sm"
-		>
-			Force Delete
-		</button>
-		<Tooltip triggeredBy="#forcedelete">Force Delete</Tooltip>
-	{:else}
-		<button
-			id="delete"
-			on:click={() => deleteApplication(application.name, false)}
-			type="submit"
-			disabled={!$appSession.isAdmin}
-			class:hover:text-red-500={$appSession.isAdmin}
-			class="icons bg-transparent text-sm"
-		>
-			<DeleteIcon />
-		</button>
-		<Tooltip triggeredBy="#delete">Delete</Tooltip>
+			<Tooltip triggeredBy="#openApplication">Open Application</Tooltip>
+		{/if}
+	</div>
+</div>
+<div
+	class="mx-auto max-w-screen-2xl px-0 lg:px-2 grid grid-cols-1"
+	class:lg:grid-cols-4={!$page.url.pathname.startsWith(`/applications/${id}/configuration/`)}
+>
+	{#if !$page.url.pathname.startsWith(`/applications/${id}/configuration/`)}
+		<nav class="header flex flex-col lg:pt-0 ">
+			<Menu {application} />
+		</nav>
 	{/if}
-</nav>
-<slot />
+	<div class="pt-0 col-span-0 lg:col-span-3 pb-24">
+		<slot />
+	</div>
+</div>
diff --git a/apps/ui/src/routes/applications/[id]/configuration/_BuildPack.svelte b/apps/ui/src/routes/applications/[id]/configuration/_BuildPack.svelte
index 89625336b..13db5a24a 100644
--- a/apps/ui/src/routes/applications/[id]/configuration/_BuildPack.svelte
+++ b/apps/ui/src/routes/applications/[id]/configuration/_BuildPack.svelte
@@ -40,9 +40,13 @@
 <form on:submit|preventDefault={() => handleSubmit(buildPack.name)}>
 	<button
 		type="submit"
-		class="box-selection relative flex text-xl font-bold {buildPack.hoverColor} {foundConfig?.name ===
+		class="box-selection relative flex flex-col items-center text-xl font-bold {buildPack.hoverColor} {foundConfig?.name ===
 			buildPack.name && buildPack.color}"
-		><span>{buildPack.fancyName}</span>
+	>
+		<div>{buildPack.fancyName}</div>
+		{#if buildPack.base}
+			<div class="text-xs font-mono">{buildPack.base}</div>
+		{/if}
 		{#if !scanning && foundConfig?.name === buildPack.name}
 			<span class="absolute bottom-0 pb-2 text-xs"
 				>{$t('application.configuration.buildpack.choose_this_one')}</span
diff --git a/apps/ui/src/routes/applications/[id]/configuration/_GithubRepositories.svelte b/apps/ui/src/routes/applications/[id]/configuration/_GithubRepositories.svelte
index 922c2b174..98a984087 100644
--- a/apps/ui/src/routes/applications/[id]/configuration/_GithubRepositories.svelte
+++ b/apps/ui/src/routes/applications/[id]/configuration/_GithubRepositories.svelte
@@ -143,7 +143,6 @@
 		}
 	}
 </script>
-
 {#if repositories.length === 0 && loading.repositories === false}
 	<div class="flex-col text-center">
 		<div class="pb-4">{$t('application.configuration.no_repositories_configured')}</div>
@@ -152,10 +151,9 @@
 		>
 	</div>
 {:else}
-	<form on:submit|preventDefault={handleSubmit} class="flex flex-col justify-center text-center">
-		<div class="flex-col space-y-3 md:space-y-0 space-x-1">
-			<div class="flex-row md:flex gap-4">
-				<div class="custom-select-wrapper">
+	<form on:submit|preventDefault={handleSubmit} class="px-10">
+		<div class="flex lg:flex-row flex-col lg:space-y-0 space-y-2 space-x-0 lg:space-x-2 items-center">
+				<div class="custom-select-wrapper w-1/2"><label for="repository" class="pb-1">Repository</label>
 					<Select
 						placeholder={loading.repositories
 							? $t('application.configuration.loading_repositories')
@@ -170,7 +168,7 @@
 					/>
 				</div>
 				<input class="hidden" bind:value={selected.projectId} name="projectId" />
-				<div class="custom-select-wrapper">
+				<div class="custom-select-wrapper w-1/2"><label for="repository" class="pb-1">Branch</label>
 					<Select
 						placeholder={loading.branches
 							? $t('application.configuration.loading_branches')
@@ -185,9 +183,7 @@
 						isDisabled={loading.branches || !selected.repository}
 						isClearable={false}
 					/>
-				</div>
-			</div>
-		</div>
+				</div></div>
 		<div class="pt-5 flex-col flex justify-center items-center space-y-4">
 			<button
 				class="btn btn-wide"
diff --git a/apps/ui/src/routes/applications/[id]/configuration/_GitlabRepositories.svelte b/apps/ui/src/routes/applications/[id]/configuration/_GitlabRepositories.svelte
index 3da8c6415..93a7616a9 100644
--- a/apps/ui/src/routes/applications/[id]/configuration/_GitlabRepositories.svelte
+++ b/apps/ui/src/routes/applications/[id]/configuration/_GitlabRepositories.svelte
@@ -413,7 +413,7 @@
 			>{loading.save ? $t('forms.saving') : $t('forms.save')}</button
 		>
 		{#if tryAgain}
-			<div>
+			<div class="p-5">
 				An error occured during authenticating with GitLab. Please check your GitLab Source
 				configuration <a href={`/sources/${application.gitSource.id}`}>here.</a>
 			</div>
diff --git a/apps/ui/src/routes/applications/[id]/configuration/_PublicRepository.svelte b/apps/ui/src/routes/applications/[id]/configuration/_PublicRepository.svelte
index 7146a66ee..f35970727 100644
--- a/apps/ui/src/routes/applications/[id]/configuration/_PublicRepository.svelte
+++ b/apps/ui/src/routes/applications/[id]/configuration/_PublicRepository.svelte
@@ -21,6 +21,7 @@
 	};
 	async function loadBranches() {
 		try {
+			if (!publicRepositoryLink) return
 			loading.branches = true;
 			publicRepositoryLink = publicRepositoryLink.trim();
 			const protocol = publicRepositoryLink.split(':')[0];
@@ -156,40 +157,36 @@
 	}
 </script>
 
-<div class="mx-auto max-w-5xl">
-	<div class="grid grid-flow-row gap-2 px-10">
-		<div class="flex">
-			<form class="flex" on:submit|preventDefault={loadBranches}>
-				<div class="space-y-4">
-					<input
-						placeholder="eg: https://github.com/coollabsio/nodejs-example/tree/main"
-						bind:value={publicRepositoryLink}
-					/>
-					{#if branchSelectOptions.length > 0}
-						<div class="custom-select-wrapper">
-							<Select
-								placeholder={loading.branches
-									? $t('application.configuration.loading_branches')
-									: !publicRepositoryLink
-									? $t('application.configuration.select_a_repository_first')
-									: $t('application.configuration.select_a_branch')}
-								isWaiting={loading.branches}
-								showIndicator={!!publicRepositoryLink && !loading.branches}
-								id="branches"
-								on:select={saveRepository}
-								items={branchSelectOptions}
-								isDisabled={loading.branches || !!!publicRepositoryLink}
-								isClearable={false}
-							/>
-						</div>
-					{/if}
-				</div>
-
-				<button class="btn mx-4 bg-orange-600" class:loading={loading.branches} type="submit"
-					>Load Repository</button
-				>
-			</form>
+<div class="mx-auto max-w-screen-2xl">
+	<form class="flex flex-col" on:submit|preventDefault={loadBranches}>
+		<div class="flex flex-col space-y-2 w-full">
+			<div class="flex flex-row space-x-2"><input
+				class="w-full"
+				placeholder="eg: https://github.com/coollabsio/nodejs-example/tree/main"
+				bind:value={publicRepositoryLink}
+			/>
+				<button class="btn bg-orange-600" class:loading={loading.branches} type="submit">
+					Load Repository
+				</button>
+			</div>
+			
+			<div class="custom-select-wrapper">
+				<Select
+					class="w-full"
+					placeholder={loading.branches
+						? $t('application.configuration.loading_branches')
+						: branchSelectOptions.length ===0
+						? 'Please type a repository link first.'
+						: $t('application.configuration.select_a_branch')}
+					isWaiting={loading.branches}
+					showIndicator={!!publicRepositoryLink && !loading.branches}
+					id="branches"
+					on:select={saveRepository}
+					items={branchSelectOptions}
+					isDisabled={loading.branches || !ownerName}
+					isClearable={false}
+				/>
+			</div>
 		</div>
-	</div>
-	
+	</form>
 </div>
diff --git a/apps/ui/src/routes/applications/[id]/configuration/buildpack.svelte b/apps/ui/src/routes/applications/[id]/configuration/buildpack.svelte
index fc83fe6a6..3a4c41115 100644
--- a/apps/ui/src/routes/applications/[id]/configuration/buildpack.svelte
+++ b/apps/ui/src/routes/applications/[id]/configuration/buildpack.svelte
@@ -254,12 +254,6 @@
 	});
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">
-		{$t('application.configuration.configure_build_pack')}
-	</div>
-</div>
-
 {#if scanning}
 	<div class="flex justify-center space-x-1 p-6 font-bold">
 		<div class="text-xl tracking-tight">
@@ -267,18 +261,7 @@
 		</div>
 	</div>
 {:else}
-	<div class="max-w-5xl mx-auto ">
-		<div class="title pb-2">Coolify</div>
-		<div class="flex flex-wrap justify-center">
-			{#each buildPacks.filter((bp) => bp.isCoolifyBuildPack === true) as buildPack}
-				<div class="p-2">
-					<BuildPack {packageManager} {buildPack} {scanning} bind:foundConfig />
-				</div>
-			{/each}
-		</div>
-	</div>
-
-	<div class="max-w-5xl mx-auto ">
+	<div class="max-w-screen-2xl mx-auto px-10">
 		<div class="title pb-2">Other</div>
 		<div class="flex flex-wrap justify-center">
 			{#each buildPacks.filter((bp) => bp.isHerokuBuildPack === true) as buildPack}
@@ -288,4 +271,24 @@
 			{/each}
 		</div>
 	</div>
+	<div class="max-w-screen-2xl mx-auto px-10">
+		<div class="title pb-2">Coolify Base</div>
+		<div class="flex flex-wrap justify-center">
+			{#each buildPacks.filter((bp) => bp.isCoolifyBuildPack === true && bp.type ==='base') as buildPack}
+				<div class="p-2">
+					<BuildPack {packageManager} {buildPack} {scanning} bind:foundConfig />
+				</div>
+			{/each}
+		</div>
+	</div>
+	<div class="max-w-screen-2xl mx-auto px-10">
+		<div class="title pb-2">Coolify Specific</div>
+		<div class="flex flex-wrap justify-center">
+			{#each buildPacks.filter((bp) => bp.isCoolifyBuildPack === true && bp.type ==='specific') as buildPack}
+				<div class="p-2">
+					<BuildPack {packageManager} {buildPack} {scanning} bind:foundConfig />
+				</div>
+			{/each}
+		</div>
+	</div>
 {/if}
diff --git a/apps/ui/src/routes/applications/[id]/configuration/database.svelte b/apps/ui/src/routes/applications/[id]/configuration/database.svelte
index 919682b00..1d7401ecb 100644
--- a/apps/ui/src/routes/applications/[id]/configuration/database.svelte
+++ b/apps/ui/src/routes/applications/[id]/configuration/database.svelte
@@ -126,7 +126,7 @@
 		</div>
 	{/if}
 
-	<div class="mx-auto max-w-4xl p-6">
+	<div class="mx-auto max-w-6xl p-6">
 		<div class="grid grid-flow-row gap-2 px-10">
 			<div class="font-bold text-xl tracking-tight">Connect a Hosted / Remote Database</div>
 			<div class="mt-2 grid grid-cols-2 items-center px-4">
diff --git a/apps/ui/src/routes/applications/[id]/configuration/destination.svelte b/apps/ui/src/routes/applications/[id]/configuration/destination.svelte
index 2f0efe2d3..6209e851a 100644
--- a/apps/ui/src/routes/applications/[id]/configuration/destination.svelte
+++ b/apps/ui/src/routes/applications/[id]/configuration/destination.svelte
@@ -63,19 +63,14 @@
 	});
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">
-		{$t('application.configuration.configure_destination')}
-	</div>
-</div>
-<div class="flex flex-col justify-center">
+<div class="flex flex-col justify-center w-full">
 	{#if !destinations || ownDestinations.length === 0}
 		<div class="flex-col">
 			<div class="pb-2 text-center font-bold">
 				{$t('application.configuration.no_configurable_destination')}
 			</div>
 			<div class="flex justify-center">
-				<a href="/new/destination" sveltekit:prefetch class="add-icon bg-sky-600 hover:bg-sky-500">
+				<a href="/destinations/new" sveltekit:prefetch class="add-icon bg-sky-600 hover:bg-sky-500">
 					<svg
 						class="w-6"
 						xmlns="http://www.w3.org/2000/svg"
@@ -93,7 +88,7 @@
 			</div>
 		</div>
 	{:else}
-		<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
+		<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row mx-auto">
 			{#each ownDestinations as destination}
 				<div class="p-2">
 					<form on:submit|preventDefault={() => handleSubmit(destination.id)}>
@@ -106,9 +101,9 @@
 			{/each}
 		</div>
 		{#if otherDestinations.length > 0 && $appSession.teamId === '0'}
-			<div class="px-6 pb-5 pt-10 text-xl font-bold">Other Destinations</div>
+			<div class="px-6 pb-5 pt-10 title">Other Destinations</div>
 		{/if}
-		<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
+		<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row mx-auto">
 			{#each otherDestinations as destination}
 				<div class="p-2">
 					<form on:submit|preventDefault={() => handleSubmit(destination.id)}>
diff --git a/apps/ui/src/routes/applications/[id]/configuration/repository.svelte b/apps/ui/src/routes/applications/[id]/configuration/repository.svelte
index 002e1f74c..4924afcce 100644
--- a/apps/ui/src/routes/applications/[id]/configuration/repository.svelte
+++ b/apps/ui/src/routes/applications/[id]/configuration/repository.svelte
@@ -36,16 +36,8 @@
 	import GitlabRepositories from './_GitlabRepositories.svelte';
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">
-		{$t('application.configuration.select_a_repository_project')}
-	</div>
-</div>
-<div class="flex flex-wrap justify-center">
-	{#if application.gitSource.type === 'github'}
-		<GithubRepositories {application} />
-	{:else if application.gitSource.type === 'gitlab'}
-		<GitlabRepositories {application} {appId} {settings} />
-	{/if}
-</div>
-
+{#if application.gitSource.type === 'github'}
+	<GithubRepositories {application} />
+{:else if application.gitSource.type === 'gitlab'}
+	<GitlabRepositories {application} {appId} {settings} />
+{/if}
diff --git a/apps/ui/src/routes/applications/[id]/configuration/source.svelte b/apps/ui/src/routes/applications/[id]/configuration/source.svelte
index d1252c74f..5d3e9ce69 100644
--- a/apps/ui/src/routes/applications/[id]/configuration/source.svelte
+++ b/apps/ui/src/routes/applications/[id]/configuration/source.svelte
@@ -68,12 +68,7 @@
 	}
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">
-		{$t('application.configuration.select_a_git_source')}
-	</div>
-</div>
-<div class="max-w-5xl mx-auto ">
+<div class="max-w-screen-2xl mx-auto px-9">
 	<div class="title pb-8">Git App</div>
 	<div class="flex flex-wrap justify-center">
 		{#if !filteredSources || ownSources.length === 0}
@@ -103,7 +98,7 @@
 				</div>
 			</div>
 		{:else}
-			<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row ">
+			<div class="flex flex-col lg:flex-row lg:flex-wrap justify-center">
 				{#each ownSources as source}
 					<div class="p-2 relative">
 						<div class="absolute -m-4">
@@ -147,7 +142,7 @@
 							<button
 								disabled={source.gitlabApp && !source.gitlabAppId}
 								type="submit"
-								class="disabled:opacity-95 bg-coolgray-200 disabled:text-white box-selection hover:bg-orange-700 group"
+								class="disabled:opacity-95 bg-coolgray-200 disabled:text-white box-selection hover:bg-orange-700 group w-full lg:w-96"
 								class:border-red-500={source.gitlabApp && !source.gitlabAppId}
 								class:border-0={source.gitlabApp && !source.gitlabAppId}
 								class:border-l-4={source.gitlabApp && !source.gitlabAppId}
@@ -192,7 +187,7 @@
 			</div>
 		{/if}
 	</div>
-	<div class="flex items-center">
+	<div class="flex flex-row items-center">
 		<div class="title py-4">Public Repository</div>
 		<DocLink url="https://docs.coollabs.io/coolify/applications/#public-repository" />
 	</div>
diff --git a/apps/ui/src/routes/applications/[id]/danger.svelte b/apps/ui/src/routes/applications/[id]/danger.svelte
new file mode 100644
index 000000000..e88bd0414
--- /dev/null
+++ b/apps/ui/src/routes/applications/[id]/danger.svelte
@@ -0,0 +1,79 @@
+<script context="module" lang="ts">
+	import type { Load } from '@sveltejs/kit';
+	export const load: Load = async ({ fetch, params, stuff, url }) => {
+		try {
+			const response = await get(`/applications/${params.id}/secrets`);
+			return {
+				props: {
+					application: stuff.application,
+					...response
+				}
+			};
+		} catch (error) {
+			return {
+				status: 500,
+				error: new Error(`Could not load ${url}`)
+			};
+		}
+	};
+</script>
+
+<script lang="ts">
+	export let application: any;
+	import { page } from '$app/stores';
+	import { del, get } from '$lib/api';
+	import { t } from '$lib/translations';
+	import { appSession, status } from '$lib/store';
+	import { errorNotification } from '$lib/common';
+	import { goto } from '$app/navigation';
+	const { id } = $page.params;
+
+	let forceDelete = false;
+	async function deleteApplication(name: string, force: boolean) {
+		const sure = confirm($t('application.confirm_to_delete', { name }));
+		if (sure) {
+			$status.application.initialLoading = true;
+			try {
+				await del(`/applications/${id}`, { id, force });
+				return await goto('/')
+			} catch (error) {
+				if (error.message.startsWith(`Command failed: SSH_AUTH_SOCK=/tmp/coolify-ssh-agent.pid`)) {
+					forceDelete = true;
+				}
+				return errorNotification(error);
+			} finally {
+				$status.application.initialLoading = false;
+			}
+		}
+	}
+</script>
+
+<div class="mx-auto w-full">
+	<div class="flex flex-row border-b border-coolgray-500 mb-6 space-x-2">
+		<div class="title font-bold pb-3">Danger Zone</div>
+	</div>
+
+	{#if forceDelete}
+		<button
+			id="forcedelete"
+			on:click={() => deleteApplication(application.name, true)}
+			type="submit"
+			disabled={!$appSession.isAdmin}
+			class:bg-red-600={$appSession.isAdmin}
+			class:hover:bg-red-500={$appSession.isAdmin}
+			class="btn btn-sm btn-error text-sm"
+		>
+			Force Delete Application
+		</button>
+	{:else}
+		<button
+			id="delete"
+			on:click={() => deleteApplication(application.name, false)}
+			type="submit"
+			disabled={!$appSession.isAdmin}
+			class="btn btn-lg btn-error hover:bg-red-700 text-sm"
+		>
+			Delete Application
+		</button>
+	{/if}
+</div>
diff --git a/apps/ui/src/routes/applications/[id]/features.svelte b/apps/ui/src/routes/applications/[id]/features.svelte
new file mode 100644
index 000000000..ed1d529c4
--- /dev/null
+++ b/apps/ui/src/routes/applications/[id]/features.svelte
@@ -0,0 +1,160 @@
+<script context="module" lang="ts">
+	import type { Load } from '@sveltejs/kit';
+	export const load: Load = async ({ fetch, params, stuff, url }) => {
+		try {
+			if (stuff?.application?.id) {
+				return {
+					props: {
+						application: stuff.application,
+						settings: stuff.settings
+					}
+				};
+			}
+			const response = await get(`/applications/${params.id}`);
+			return {
+				props: {
+					...response
+				}
+			};
+		} catch (error) {
+			return {
+				status: 500,
+				error: new Error(`Could not load ${url}`)
+			};
+		}
+	};
+</script>
+
+<script lang="ts">
+	export let application: any;
+	export let settings: any;
+	import { page } from '$app/stores';
+	import { get, post } from '$lib/api';
+	import {
+		addToast,
+		appSession,
+		checkIfDeploymentEnabledApplications,
+		setLocation,
+		status,
+		isDeploymentEnabled
+	} from '$lib/store';
+	import { t } from '$lib/translations';
+	import { errorNotification, getDomain, notNodeDeployments, staticDeployments } from '$lib/common';
+	import Setting from '$lib/components/Setting.svelte';
+
+	const { id } = $page.params;
+
+	let debug = application.settings.debug;
+	let previews = application.settings.previews;
+	let dualCerts = application.settings.dualCerts;
+	let autodeploy = application.settings.autodeploy;
+	let isBot = application.settings.isBot;
+	let isDBBranching = application.settings.isDBBranching;
+
+	async function changeSettings(name: any) {
+		if (name === 'debug') {
+			debug = !debug;
+		}
+		if (name === 'previews') {
+			previews = !previews;
+		}
+		if (name === 'dualCerts') {
+			dualCerts = !dualCerts;
+		}
+		if (name === 'autodeploy') {
+			autodeploy = !autodeploy;
+		}
+		if (name === 'isBot') {
+			if ($status.application.isRunning) return;
+			isBot = !isBot;
+			application.settings.isBot = isBot;
+			application.fqdn = null;
+			setLocation(application, settings);
+		}
+		if (name === 'isDBBranching') {
+			isDBBranching = !isDBBranching;
+		}
+		try {
+			await post(`/applications/${id}/settings`, {
+				previews,
+				debug,
+				dualCerts,
+				isBot,
+				autodeploy,
+				isDBBranching,
+				branch: application.branch,
+				projectId: application.projectId
+			});
+			return addToast({
+				message: $t('application.settings_saved'),
+				type: 'success'
+			});
+		} catch (error) {
+			if (name === 'debug') {
+				debug = !debug;
+			}
+			if (name === 'previews') {
+				previews = !previews;
+			}
+			if (name === 'dualCerts') {
+				dualCerts = !dualCerts;
+			}
+			if (name === 'autodeploy') {
+				autodeploy = !autodeploy;
+			}
+			if (name === 'isBot') {
+				isBot = !isBot;
+			}
+			if (name === 'isDBBranching') {
+				isDBBranching = !isDBBranching;
+			}
+			return errorNotification(error);
+		} finally {
+			$isDeploymentEnabled = checkIfDeploymentEnabledApplications($appSession.isAdmin, application);
+		}
+	}
+</script>
+
+<div class="w-full">
+	<div class="mx-auto w-full">
+		<div class="flex flex-row border-b border-coolgray-500 mb-6  space-x-2">
+			<div class="title font-bold pb-3">Features</div>
+		</div>
+		<div class="px-4 lg:pb-10 pb-6">
+			{#if !application.settings.isPublicRepository}
+				<div class="grid grid-cols-2 items-center">
+					<Setting
+						id="autodeploy"
+						isCenter={false}
+						bind:setting={autodeploy}
+						on:click={() => changeSettings('autodeploy')}
+						title={$t('application.enable_automatic_deployment')}
+						description={$t('application.enable_auto_deploy_webhooks')}
+					/>
+				</div>
+			{/if}
+			{#if !application.settings.isBot && !application.settings.isPublicRepository}
+				<div class="grid grid-cols-2 items-center">
+					<Setting
+						id="previews"
+						isCenter={false}
+						bind:setting={previews}
+						on:click={() => changeSettings('previews')}
+						title={$t('application.enable_mr_pr_previews')}
+						description={$t('application.enable_preview_deploy_mr_pr_requests')}
+					/>
+				</div>
+			{/if}
+			<div class="grid grid-cols-2 items-center w-full">
+				<Setting
+					id="debug"
+					isCenter={false}
+					bind:setting={debug}
+					on:click={() => changeSettings('debug')}
+					title={$t('application.debug_logs')}
+					description={$t('application.enable_debug_log_during_build')}
+				/>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/apps/ui/src/routes/applications/[id]/index.svelte b/apps/ui/src/routes/applications/[id]/index.svelte
index ed5a70f4d..bc2a4e26a 100644
--- a/apps/ui/src/routes/applications/[id]/index.svelte
+++ b/apps/ui/src/routes/applications/[id]/index.svelte
@@ -48,34 +48,27 @@
 	import Tooltip from '$lib/components/Tooltip.svelte';
 	import Explainer from '$lib/components/Explainer.svelte';
 	import { goto } from '$app/navigation';
+	import { fade } from 'svelte/transition';
 
 	const { id } = $page.params;
 
 	$: isDisabled =
 		!$appSession.isAdmin || $status.application.isRunning || $status.application.initialLoading;
 
-	let domainEl: HTMLInputElement;
-
 	let loading = false;
-
-	let usageLoading = false;
-	let usage = {
-		MemUsage: 0,
-		CPUPerc: 0,
-		NetIO: 0
-	};
-	let usageInterval: any;
-
+	let fqdnEl: any = null;
 	let forceSave = false;
 	let debug = application.settings.debug;
 	let previews = application.settings.previews;
 	let dualCerts = application.settings.dualCerts;
+	let isCustomSSL = application.settings.isCustomSSL;
 	let autodeploy = application.settings.autodeploy;
 	let isBot = application.settings.isBot;
 	let isDBBranching = application.settings.isDBBranching;
 
 	let baseDatabaseBranch: any = application?.connectedDatabase?.hostedDatabaseDBName || null;
 	let nonWWWDomain = application.fqdn && getDomain(application.fqdn).replace(/^www\./, '');
+	let isHttps = application.fqdn && application.fqdn.startsWith('https://');
 	let isNonWWWDomainOK = false;
 	let isWWWDomainOK = false;
 
@@ -94,31 +87,16 @@
 		}
 	];
 	function containerClass() {
-		return 'text-white bg-transparent font-thin px-0';
+		return 'text-white bg-transparent font-thin px-0 w-full border border-dashed border-coolgray-200';
 	}
 
-	async function getUsage() {
-		if (usageLoading) return;
-		if (!$status.application.isRunning) return;
-		usageLoading = true;
-		const data = await get(`/applications/${id}/usage`);
-		usage = data.usage;
-		usageLoading = false;
-	}
-	onDestroy(() => {
-		clearInterval(usageInterval);
-	});
 	onMount(async () => {
 		if (window.location.hostname === 'demo.coolify.io' && !application.fqdn) {
 			application.fqdn = `http://${cuid()}.demo.coolify.io`;
 			await handleSubmit();
 		}
-		// !isBot && domainEl.focus();
-		await getUsage();
-		usageInterval = setInterval(async () => {
-			await getUsage();
-		}, 1000);
 		await getBaseBuildImages();
+		if (!application.fqdn && fqdnEl) fqdnEl.focus();
 	});
 	async function getBaseBuildImages() {
 		const data = await post(`/applications/images`, {
@@ -166,6 +144,9 @@
 		if (name === 'autodeploy') {
 			autodeploy = !autodeploy;
 		}
+		if (name === 'isCustomSSL') {
+			isCustomSSL = !isCustomSSL;
+		}
 		if (name === 'isBot') {
 			if ($status.application.isRunning) return;
 			isBot = !isBot;
@@ -184,6 +165,7 @@
 				isBot,
 				autodeploy,
 				isDBBranching,
+				isCustomSSL,
 				branch: application.branch,
 				projectId: application.projectId
 			});
@@ -210,6 +192,9 @@
 			if (name === 'isDBBranching') {
 				isDBBranching = !isDBBranching;
 			}
+			if (name === 'isCustomSSL') {
+				isCustomSSL = !isCustomSSL;
+			}
 			return errorNotification(error);
 		} finally {
 			$isDeploymentEnabled = checkIfDeploymentEnabledApplications($appSession.isAdmin, application);
@@ -239,6 +224,11 @@
 				message: 'Configuration saved.',
 				type: 'success'
 			});
+			if (application.fqdn && application.fqdn.startsWith('https')) {
+				isHttps = true;
+			} else {
+				isHttps = false;
+			}
 		} catch (error) {
 			//@ts-ignore
 			if (error?.message.startsWith($t('application.dns_not_set_partial_error'))) {
@@ -294,612 +284,522 @@
 	}
 </script>
 
-<div class="flex items-center space-x-2 p-5 px-6 font-bold">
-	<div class="-mb-5 flex-col">
-		<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
-			Configuration
-		</div>
-		<span class="text-xs">{application.name}</span>
-	</div>
-	{#if application.gitSource?.htmlUrl && application.repository && application.branch}
-		<a
-			id="git"
-			href="{application.gitSource.htmlUrl}/{application.repository}/tree/{application.branch}"
-			target="_blank"
-			class="w-10"
-		>
-			{#if application.gitSource?.type === 'gitlab'}
-				<svg viewBox="0 0 128 128" class="icons">
-					<path
-						fill="#FC6D26"
-						d="M126.615 72.31l-7.034-21.647L105.64 7.76c-.716-2.206-3.84-2.206-4.556 0l-13.94 42.903H40.856L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664 1.385 72.31a4.792 4.792 0 001.74 5.358L64 121.894l60.874-44.227a4.793 4.793 0 001.74-5.357"
-					/><path fill="#E24329" d="M64 121.894l23.144-71.23H40.856L64 121.893z" /><path
-						fill="#FC6D26"
-						d="M64 121.894l-23.144-71.23H8.42L64 121.893z"
-					/><path
-						fill="#FCA326"
-						d="M8.42 50.663L1.384 72.31a4.79 4.79 0 001.74 5.357L64 121.894 8.42 50.664z"
-					/><path
-						fill="#E24329"
-						d="M8.42 50.663h32.436L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664z"
-					/><path fill="#FC6D26" d="M64 121.894l23.144-71.23h32.437L64 121.893z" /><path
-						fill="#FCA326"
-						d="M119.58 50.663l7.035 21.647a4.79 4.79 0 01-1.74 5.357L64 121.894l55.58-71.23z"
-					/><path
-						fill="#E24329"
-						d="M119.58 50.663H87.145l13.94-42.902c.717-2.206 3.84-2.206 4.557 0l13.94 42.903z"
-					/>
-				</svg>
-			{:else if application.gitSource?.type === 'github'}
-				<svg viewBox="0 0 128 128" class="icons">
-					<g fill="#ffffff"
-						><path
-							fill-rule="evenodd"
-							clip-rule="evenodd"
-							d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"
-						/><path
-							d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm2.446 2.729c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zM31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm3.261 3.361c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm4.5 1.951c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm4.943.361c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm4.598-.782c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"
-						/></g
+<div class="w-full">
+	<form on:submit|preventDefault={handleSubmit}>
+		<div class="mx-auto w-full">
+			<div class="flex flex-row border-b border-coolgray-500 mb-6 space-x-2">
+				<div class="title font-bold pb-3 ">General</div>
+				{#if $appSession.isAdmin}
+					<button
+						class="btn btn-sm  btn-primary"
+						type="submit"
+						class:loading
+						class:bg-orange-600={forceSave}
+						class:hover:bg-orange-400={forceSave}
+						disabled={loading}>{$t('forms.save')}</button
 					>
-				</svg>
-			{/if}
-		</a>
-		<Tooltip triggeredBy="#git">Open on Git</Tooltip>
-	{/if}
-</div>
-
-<div class="mx-auto max-w-4xl px-6 py-4">
-	<div class="text-2xl font-bold">Application Usage</div>
-	<div class="text-center">
-		<div class="stat w-64">
-			<div class="stat-title">Used Memory / Memory Limit</div>
-			<div class="stat-value text-xl">{usage?.MemUsage}</div>
-		</div>
-
-		<div class="stat w-64">
-			<div class="stat-title">Used CPU</div>
-			<div class="stat-value text-xl">{usage?.CPUPerc}</div>
-		</div>
-
-		<div class="stat w-64">
-			<div class="stat-title">Network IO</div>
-			<div class="stat-value text-xl">{usage?.NetIO}</div>
-		</div>
-	</div>
-</div>
-<div class="mx-auto max-w-4xl px-6">
-	<!-- svelte-ignore missing-declaration -->
-	<form on:submit|preventDefault={handleSubmit} class="py-4">
-		<div class="flex space-x-1 pb-5">
-			<div class="title">{$t('general')}</div>
-			{#if $appSession.isAdmin}
-				<button
-					class="btn btn-sm"
-					type="submit"
-					class:bg-applications={!loading}
-					class:loading
-					class:bg-orange-600={forceSave}
-					class:hover:bg-orange-400={forceSave}
-					disabled={loading}>{$t('forms.save')}</button
-				>
-			{/if}
-		</div>
-		<div class="grid grid-flow-row gap-2 px-10">
-			<div class="mt-2 grid grid-cols-2 items-center">
-				<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
-				<input name="name" id="name" bind:value={application.name} required />
+				{/if}
 			</div>
-			<div class="grid grid-cols-2 items-center">
-				<label for="gitSource" class="text-base font-bold text-stone-100"
-					>{$t('application.git_source')}</label
-				>
-				{#if isDisabled || application.settings.isPublicRepository}
-					<input
-						disabled={isDisabled || application.settings.isPublicRepository}
-						value={application.gitSource.name}
-					/>
-				{:else}
-					<a
-						href={`/applications/${id}/configuration/source?from=/applications/${id}`}
-						class="no-underline"
-						><input
+			<div class="grid grid-flow-row gap-2 px-4">
+				<div class="mt-2 grid grid-cols-2 items-center">
+					<label for="name">{$t('forms.name')}</label>
+					<input name="name" id="name" class="w-full" bind:value={application.name} required />
+				</div>
+				<div class="grid grid-cols-2 items-center">
+					<label for="gitSource">{$t('application.git_source')}</label>
+					{#if isDisabled || application.settings.isPublicRepository}
+						<input
+							disabled={isDisabled || application.settings.isPublicRepository}
+							class="w-full"
 							value={application.gitSource.name}
-							id="gitSource"
-							class="cursor-pointer hover:bg-coolgray-500"
-						/></a
-					>
-				{/if}
-			</div>
-			<div class="grid grid-cols-2 items-center">
-				<label for="repository" class="text-base font-bold text-stone-100"
-					>{$t('application.git_repository')}</label
-				>
-				{#if isDisabled || application.settings.isPublicRepository}
-					<input
-						disabled={isDisabled || application.settings.isPublicRepository}
-						value="{application.repository}/{application.branch}"
-					/>
-				{:else}
-					<a
-						href={`/applications/${id}/configuration/repository?from=/applications/${id}&to=/applications/${id}/configuration/buildpack`}
-						class="no-underline"
-						><input
-							value="{application.repository}/{application.branch}"
-							id="repository"
-							class="cursor-pointer hover:bg-coolgray-500"
-						/></a
-					>
-				{/if}
-			</div>
-			<div class="grid grid-cols-2 items-center">
-				<label for="buildPack" class="text-base font-bold text-stone-100"
-					>{$t('application.build_pack')}</label
-				>
-				{#if isDisabled}
-					<input class="capitalize" disabled={isDisabled} value={application.buildPack} />
-				{:else}
-					<a
-						href={`/applications/${id}/configuration/buildpack?from=/applications/${id}`}
-						class="no-underline "
-					>
-						<input
-							value={application.buildPack}
-							id="buildPack"
-							class="cursor-pointer hover:bg-coolgray-500 capitalize"
-						/></a
-					>
-				{/if}
-			</div>
-			<div class="grid grid-cols-2 items-center">
-				<label for="destination" class="text-base font-bold text-stone-100"
-					>{$t('application.destination')}</label
-				>
-				<div class="no-underline">
-					<input
-						value={application.destinationDocker.name}
-						id="destination"
-						disabled
-						class="bg-transparent"
-					/>
-				</div>
-			</div>
-			{#if application.buildCommand || application.buildPack === 'rust' || application.buildPack === 'laravel'}
-				<div class="grid grid-cols-2 items-center">
-					<label for="baseBuildImage" class="text-base font-bold text-stone-100"
-						>{$t('application.base_build_image')}
-						<Explainer
-							explanation={application.buildPack === 'laravel'
-								? 'For building frontend assets with webpack.'
-								: 'Image that will be used during the build process.'}
 						/>
-					</label>
-
-					<div class="custom-select-wrapper">
-						<Select
-							{isDisabled}
-							containerClasses={isDisabled && containerClass()}
-							id="baseBuildImages"
-							showIndicator={!$status.application.isRunning}
-							items={application.baseBuildImages}
-							on:select={selectBaseBuildImage}
-							value={application.baseBuildImage}
-							isClearable={false}
-						/>
-					</div>
-				</div>
-			{/if}
-			{#if application.buildPack !== 'docker'}
-				<div class="grid grid-cols-2 items-center">
-					<label for="baseImage" class="text-base font-bold text-stone-100"
-						>{$t('application.base_image')}
-						<Explainer explanation={'Image that will be used for the deployment.'} /></label
-					>
-					<div class="custom-select-wrapper">
-						<Select
-							{isDisabled}
-							containerClasses={isDisabled && containerClass()}
-							id="baseImages"
-							showIndicator={!$status.application.isRunning}
-							items={application.baseImages}
-							on:select={selectBaseImage}
-							value={application.baseImage}
-							isClearable={false}
-						/>
-					</div>
-				</div>
-			{/if}
-			{#if application.buildPack !== 'docker' && (application.buildPack === 'nextjs' || application.buildPack === 'nuxtjs')}
-				<div class="grid grid-cols-2 items-center pb-8">
-					<label for="deploymentType" class="text-base font-bold text-stone-100"
-						>Deployment Type
-						<Explainer
-							explanation={"Defines how to deploy your application. <br><br><span class='text-green-500 font-bold'>Static</span> is for static websites, <span class='text-green-500 font-bold'>node</span> is for server-side applications."}
-						/></label
-					>
-					<div class="custom-select-wrapper">
-						<Select
-							{isDisabled}
-							containerClasses={isDisabled && containerClass()}
-							id="deploymentTypes"
-							showIndicator={!$status.application.isRunning}
-							items={['static', 'node']}
-							on:select={selectDeploymentType}
-							value={application.deploymentType}
-							isClearable={false}
-						/>
-					</div>
-				</div>
-			{/if}
-			{#if $features.beta}
-				{#if !application.settings.isBot && !application.settings.isPublicRepository}
-					<div class="grid grid-cols-2 items-center">
-						<Setting
-							id="isDBBranching"
-							isCenter={false}
-							bind:setting={isDBBranching}
-							on:click={() => changeSettings('isDBBranching')}
-							title="Enable DB Branching"
-							description="Enable DB Branching"
-						/>
-					</div>
-					{#if isDBBranching}
-						<button
-							on:click|stopPropagation|preventDefault={() =>
-								goto(`/applications/${id}/configuration/database`)}
-							class="btn btn-sm">Configure Connected Database</button
+					{:else}
+						<a
+							href={`/applications/${id}/configuration/source?from=/applications/${id}`}
+							class="no-underline"
+							><input
+								value={application.gitSource.name}
+								id="gitSource"
+								class="cursor-pointer hover:bg-coolgray-500 w-full"
+							/></a
 						>
-						{#if application.connectedDatabase}
-							<div class="grid grid-cols-2 items-center">
-								<label for="baseImage" class="text-base font-bold text-stone-100"
-									>Base Database
-									<Explainer
-										explanation={'The name of the database that will be used as base when branching.'}
-									/></label
-								>
-								<input
-									name="baseDatabaseBranch"
-									required
-									id="baseDatabaseBranch"
-									bind:value={baseDatabaseBranch}
-								/>
-							</div>
-							<div class="text-center bg-green-600 rounded">
-								Connected to {application.connectedDatabase.databaseId}
-							</div>
-						{/if}
 					{/if}
-				{/if}
-			{/if}
-		</div>
-		<div class="flex space-x-1 py-5 font-bold">
-			<div class="title">{$t('application.application')}</div>
-		</div>
-		<div class="grid grid-flow-row gap-2 px-10">
-			<div class="grid grid-cols-2 items-center">
-				<Setting
-					id="isBot"
-					isCenter={false}
-					bind:setting={isBot}
-					on:click={() => changeSettings('isBot')}
-					title="Is your application a bot?"
-					description="You can deploy applications without domains or make them to listen on the <span class='text-settings font-bold'>Exposed Port</span>.<br></Setting><br>Useful to host <span class='text-settings font-bold'>Twitch bots, regular jobs, or anything that does not require an incoming HTTP connection.</span>"
-					disabled={$status.application.isRunning}
-				/>
-			</div>
-			<div class="grid grid-cols-2 items-center">
-				<Setting
-					id="dualCerts"
-					dataTooltip={$t('forms.must_be_stopped_to_modify')}
-					disabled={$status.application.isRunning}
-					isCenter={false}
-					bind:setting={dualCerts}
-					title={$t('application.ssl_www_and_non_www')}
-					description="It will generate certificates for both www and non-www. <br>You need to have <span class='font-bold text-settings'>both DNS entries</span> set in advance.<br><br>Useful if you expect to have visitors on both."
-					on:click={() => !$status.application.isRunning && changeSettings('dualCerts')}
-				/>
-			</div>
-			{#if !isBot}
-				<div class="grid grid-cols-2 items-center pb-8">
-					<label for="fqdn" class="text-base font-bold text-stone-100"
-						>{$t('application.url_fqdn')}
-						<Explainer
-							explanation={"If you specify <span class='text-settings font-bold'>https</span>, the application will be accessible only over https.<br>SSL certificate will be generated automatically.<br><br>If you specify <span class='text-settings font-bold'>www</span>, the application will be redirected (302) from non-www and vice versa.<br><br>To modify the domain, you must first stop the application.<br><br><span class='text-settings font-bold'>You must set your DNS to point to the server IP in advance.</span>"}
-						/>
-					</label>
-					<div>
+				</div>
+				<div class="grid grid-cols-2 items-center">
+					<label for="repository">{$t('application.git_repository')}</label>
+					{#if isDisabled || application.settings.isPublicRepository}
 						<input
-							readonly={isDisabled}
-							disabled={isDisabled}
-							name="fqdn"
-							id="fqdn"
-							bind:value={application.fqdn}
-							pattern="^https?://([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{'{'}2,{'}'}$"
-							placeholder="eg: https://coollabs.io"
+							class="w-full"
+							disabled={isDisabled || application.settings.isPublicRepository}
+							value="{application.repository}/{application.branch}"
 						/>
-						{#if forceSave}
-							<div class="flex-col space-y-2 pt-4 text-center">
-								{#if isNonWWWDomainOK}
-									<button
-										class="btn btn-sm bg-green-600 hover:bg-green-500"
-										on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
-										>DNS settings for {nonWWWDomain} is OK, click to recheck.</button
-									>
-								{:else}
-									<button
-										class="btn btn-sm bg-red-600 hover:bg-red-500"
-										on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
-										>DNS settings for {nonWWWDomain} is invalid, click to recheck.</button
-									>
-								{/if}
-								{#if dualCerts}
-									{#if isWWWDomainOK}
+					{:else}
+						<a
+							href={`/applications/${id}/configuration/repository?from=/applications/${id}&to=/applications/${id}/configuration/buildpack`}
+							class="no-underline"
+							><input
+								value="{application.repository}/{application.branch}"
+								id="repository"
+								class="cursor-pointer hover:bg-coolgray-500 w-full"
+							/></a
+						>
+					{/if}
+				</div>
+				<div class="grid grid-cols-2 items-center">
+					<label for="buildPack">{$t('application.build_pack')}</label>
+					{#if isDisabled}
+						<input class="uppercase w-full" disabled={isDisabled} value={application.buildPack} />
+					{:else}
+						<a
+							href={`/applications/${id}/configuration/buildpack?from=/applications/${id}`}
+							class="no-underline"
+						>
+							<input
+								value={application.buildPack}
+								id="buildPack"
+								class="cursor-pointer hover:bg-coolgray-500 capitalize w-full"
+							/></a
+						>
+					{/if}
+				</div>
+				<div class="grid grid-cols-2 items-center">
+					<label for="destination">{$t('application.destination')}</label>
+					<div class="no-underline">
+						<input
+							value={application.destinationDocker.name}
+							id="destination"
+							disabled
+							class="bg-transparent w-full"
+						/>
+					</div>
+				</div>
+				<div class="grid grid-cols-2 items-center">
+					<Setting
+						id="isBot"
+						isCenter={false}
+						bind:setting={isBot}
+						on:click={() => changeSettings('isBot')}
+						title="Is your application a bot?"
+						description="You can deploy applications without domains or make them to listen on the <span class='text-settings font-bold'>Exposed Port</span>.<br></Setting><br>Useful to host <span class='text-settings font-bold'>Twitch bots, regular jobs, or anything that does not require an incoming HTTP connection.</span>"
+						disabled={$status.application.isRunning}
+					/>
+				</div>
+				{#if !isBot}
+					<div class="grid grid-cols-2 items-center">
+						<label for="fqdn"
+							>{$t('application.url_fqdn')}
+							<Explainer
+								explanation={"If you specify <span class='text-settings font-bold'>https</span>, the application will be accessible only over https.<br>SSL certificate will be generated automatically.<br><br>If you specify <span class='text-settings font-bold'>www</span>, the application will be redirected (302) from non-www and vice versa.<br><br>To modify the domain, you must first stop the application.<br><br><span class='text-settings font-bold'>You must set your DNS to point to the server IP in advance.</span>"}
+							/>
+						</label>
+						<div>
+							<input
+								bind:this={fqdnEl}
+								class="w-full"
+								required={!application.settings.isBot}
+								readonly={isDisabled}
+								disabled={isDisabled}
+								name="fqdn"
+								id="fqdn"
+								class:border={!application.settings.isBot && !application.fqdn}
+								class:border-red-500={!application.settings.isBot && !application.fqdn}
+								bind:value={application.fqdn}
+								pattern="^https?://([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{'{'}2,{'}'}$"
+								placeholder="eg: https://coollabs.io"
+							/>
+							{#if forceSave}
+								<div class="flex-col space-y-2 pt-4 text-center">
+									{#if isNonWWWDomainOK}
 										<button
 											class="btn btn-sm bg-green-600 hover:bg-green-500"
-											on:click|preventDefault={() =>
-												isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
-											>DNS settings for www.{nonWWWDomain} is OK, click to recheck.</button
+											on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
+											>DNS settings for {nonWWWDomain} is OK, click to recheck.</button
 										>
 									{:else}
 										<button
 											class="btn btn-sm bg-red-600 hover:bg-red-500"
-											on:click|preventDefault={() =>
-												isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
-											>DNS settings for www.{nonWWWDomain} is invalid, click to recheck.</button
+											on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
+											>DNS settings for {nonWWWDomain} is invalid, click to recheck.</button
 										>
 									{/if}
-								{/if}
-							</div>
-						{/if}
+									{#if dualCerts}
+										{#if isWWWDomainOK}
+											<button
+												class="btn btn-sm bg-green-600 hover:bg-green-500"
+												on:click|preventDefault={() =>
+													isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
+												>DNS settings for www.{nonWWWDomain} is OK, click to recheck.</button
+											>
+										{:else}
+											<button
+												class="btn btn-sm bg-red-600 hover:bg-red-500"
+												on:click|preventDefault={() =>
+													isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
+												>DNS settings for www.{nonWWWDomain} is invalid, click to recheck.</button
+											>
+										{/if}
+									{/if}
+								</div>
+							{/if}
+						</div>
 					</div>
-				</div>
-			{/if}
-			{#if application.buildPack === 'python'}
-				<div class="grid grid-cols-2 items-center">
-					<label for="pythonModule" class="text-base font-bold text-stone-100">WSGI / ASGI</label>
-					<div class="custom-select-wrapper">
-						<Select id="wsgi" items={wsgis} on:select={selectWSGI} value={application.pythonWSGI} />
-					</div>
-				</div>
-
-				<div class="grid grid-cols-2 items-center">
-					<label for="pythonModule" class="text-base font-bold text-stone-100">Module</label>
-					<input
-						disabled={isDisabled}
-						readonly={!$appSession.isAdmin}
-						name="pythonModule"
-						id="pythonModule"
-						required
-						bind:value={application.pythonModule}
-						placeholder={application.pythonWSGI?.toLowerCase() !== 'none' ? 'main' : 'main.py'}
-					/>
-				</div>
-				{#if application.pythonWSGI?.toLowerCase() === 'gunicorn'}
-					<div class="grid grid-cols-2 items-center">
-						<label for="pythonVariable" class="text-base font-bold text-stone-100">Variable</label>
-						<input
-							disabled={isDisabled}
-							readonly={!$appSession.isAdmin}
-							name="pythonVariable"
-							id="pythonVariable"
-							required
-							bind:value={application.pythonVariable}
-							placeholder="default: app"
+					<div class="grid grid-cols-2 items-center pb-4">
+						<Setting
+							id="dualCerts"
+							dataTooltip={$t('forms.must_be_stopped_to_modify')}
+							disabled={$status.application.isRunning}
+							isCenter={false}
+							bind:setting={dualCerts}
+							title={$t('application.ssl_www_and_non_www')}
+							description="Generate certificates for both www and non-www. <br>You need to have <span class='font-bold text-settings'>both DNS entries</span> set in advance.<br><br>Useful if you expect to have visitors on both."
+							on:click={() => !$status.application.isRunning && changeSettings('dualCerts')}
 						/>
 					</div>
+					{#if isHttps}
+						<div class="grid grid-cols-2 items-center pb-4">
+							<Setting
+								id="isCustomSSL"
+								isCenter={false}
+								bind:setting={isCustomSSL}
+								title="Use Custom SSL Certificate"
+								description="Use Custom SSL Certificated added in the Settings/SSL Certificates section. <br><br>By default, the SSL certificate is generated automatically through Let's Encrypt"
+								on:click={() => changeSettings('isCustomSSL')}
+							/>
+						</div>
+					{/if}
 				{/if}
-				{#if application.pythonWSGI?.toLowerCase() === 'uvicorn'}
-					<div class="grid grid-cols-2 items-center">
-						<label for="pythonVariable" class="text-base font-bold text-stone-100">Variable</label>
-						<input
-							disabled={isDisabled}
-							readonly={!$appSession.isAdmin}
-							name="pythonVariable"
-							id="pythonVariable"
-							required
-							bind:value={application.pythonVariable}
-							placeholder="default: app"
-						/>
-					</div>
-				{/if}
-			{/if}
-			{#if !staticDeployments.includes(application.buildPack)}
-				<div class="grid grid-cols-2 items-center">
-					<label for="port" class="text-base font-bold text-stone-100"
-						>{$t('forms.port')}
-						<Explainer explanation={'The port your application listens on.'} /></label
-					>
-					<input
-						disabled={isDisabled}
-						readonly={!$appSession.isAdmin}
-						name="port"
-						id="port"
-						bind:value={application.port}
-						placeholder="{$t('forms.default')}: 'python' ? '8000' : '3000'"
-					/>
-				</div>
-			{/if}
-			<div class="grid grid-cols-2 items-center pb-8">
-				<label for="exposePort" class="text-base font-bold text-stone-100"
-					>Exposed Port <Explainer
-						explanation={'You can expose your application to a port on the host system.<br><br>Useful if you would like to use your own reverse proxy or tunnel and also in development mode. Otherwise leave empty.'}
-					/></label
-				>
-				<input
-					readonly={!$appSession.isAdmin && !$status.application.isRunning}
-					disabled={isDisabled}
-					name="exposePort"
-					id="exposePort"
-					bind:value={application.exposePort}
-					placeholder="12345"
-				/>
 			</div>
-			{#if !notNodeDeployments.includes(application.buildPack)}
-				<div class="grid grid-cols-2 items-center">
-					<label for="installCommand" class="text-base font-bold text-stone-100"
-						>{$t('application.install_command')}</label
-					>
-					<input
-						disabled={isDisabled}
-						readonly={!$appSession.isAdmin}
-						name="installCommand"
-						id="installCommand"
-						bind:value={application.installCommand}
-						placeholder="{$t('forms.default')}: yarn install"
-					/>
-				</div>
-				<div class="grid grid-cols-2 items-center">
-					<label for="buildCommand" class="text-base font-bold text-stone-100"
-						>{$t('application.build_command')}</label
-					>
-					<input
-						disabled={isDisabled}
-						readonly={!$appSession.isAdmin}
-						name="buildCommand"
-						id="buildCommand"
-						bind:value={application.buildCommand}
-						placeholder="{$t('forms.default')}: yarn build"
-					/>
-				</div>
-				<div class="grid grid-cols-2 items-center pb-8">
-					<label for="startCommand" class="text-base font-bold text-stone-100"
-						>{$t('application.start_command')}</label
-					>
-					<input
-						disabled={isDisabled}
-						readonly={!$appSession.isAdmin}
-						name="startCommand"
-						id="startCommand"
-						bind:value={application.startCommand}
-						placeholder="{$t('forms.default')}: yarn start"
-					/>
-				</div>
-			{/if}
-			{#if application.buildPack === 'docker'}
-				<div class="grid grid-cols-2 items-center pt-4">
-					<label for="dockerFileLocation" class="text-base font-bold text-stone-100"
-						>Dockerfile Location <Explainer
-							explanation={"Should be absolute path, like <span class='text-settings font-bold'>/data/Dockerfile</span> or <span class='text-settings font-bold'>/Dockerfile.</span>"}
-						/></label
-					>
-					<input
-						disabled={isDisabled}
-						readonly={!$appSession.isAdmin}
-						name="dockerFileLocation"
-						id="dockerFileLocation"
-						bind:value={application.dockerFileLocation}
-						placeholder="default: /Dockerfile"
-					/>
-				</div>
-			{/if}
-			{#if application.buildPack === 'deno'}
-				<div class="grid grid-cols-2 items-center">
-					<label for="denoMainFile" class="text-base font-bold text-stone-100">Main File</label>
-					<input
-						disabled={isDisabled}
-						readonly={!$appSession.isAdmin}
-						name="denoMainFile"
-						id="denoMainFile"
-						bind:value={application.denoMainFile}
-						placeholder="default: main.ts"
-					/>
-				</div>
-				<div class="grid grid-cols-2 items-center">
-					<label for="denoOptions" class="text-base font-bold text-stone-100"
-						>Arguments <Explainer
-							explanation={"List of arguments to pass to <span class='text-settings font-bold'>deno run</span> command. Could include permissions, configurations files, etc."}
-						/></label
-					>
-					<input
-						disabled={isDisabled}
-						readonly={!$appSession.isAdmin}
-						name="denoOptions"
-						id="denoOptions"
-						bind:value={application.denoOptions}
-						placeholder="eg: --allow-net --allow-hrtime --config path/to/file.json"
-					/>
-				</div>
-			{/if}
-			{#if application.buildPack !== 'laravel' && application.buildPack !== 'heroku'}
-				<div class="grid grid-cols-2 items-center">
-					<div class="flex-col">
-						<label for="baseDirectory" class="pt-2 text-base font-bold text-stone-100"
-							>{$t('forms.base_directory')}
+
+			<div class="title font-bold pb-3 pt-10 border-b border-coolgray-500 mb-6">Build & Deploy</div>
+			<div class="grid grid-flow-row gap-2 px-4 pr-5">
+				{#if application.buildCommand || application.buildPack === 'rust' || application.buildPack === 'laravel'}
+					<div class="grid grid-cols-2 items-center">
+						<label for="baseBuildImage"
+							>{$t('application.base_build_image')}
 							<Explainer
-								explanation={"Directory to use as the base for all commands.<br>Could be useful with <span class='text-settings font-bold'>monorepos</span>."}
-							/></label
-						>
+								explanation={application.buildPack === 'laravel'
+									? 'For building frontend assets with webpack.'
+									: 'Image that will be used during the build process.'}
+							/>
+						</label>
+						<div class="custom-select-wrapper">
+							<Select
+								{isDisabled}
+								containerClasses={isDisabled && containerClass()}
+								id="baseBuildImages"
+								showIndicator={!$status.application.isRunning}
+								items={application.baseBuildImages}
+								on:select={selectBaseBuildImage}
+								value={application.baseBuildImage}
+								isClearable={false}
+							/>
+						</div>
 					</div>
-					<input
-						disabled={isDisabled}
-						readonly={!$appSession.isAdmin}
-						name="baseDirectory"
-						id="baseDirectory"
-						bind:value={application.baseDirectory}
-						placeholder="{$t('forms.default')}: /"
-					/>
-				</div>
-			{/if}
-			{#if !notNodeDeployments.includes(application.buildPack)}
-				<div class="grid grid-cols-2 items-center">
-					<div class="flex-col">
-						<label for="publishDirectory" class="pt-2 text-base font-bold text-stone-100"
-							>{$t('forms.publish_directory')}
+				{/if}
+				{#if application.buildPack !== 'docker'}
+					<div class="grid grid-cols-2 items-center">
+						<label for="baseImage"
+							>{$t('application.base_image')}
+							<Explainer explanation={'Image that will be used for the deployment.'} /></label
+						>
+						<div class="custom-select-wrapper">
+							<Select
+								{isDisabled}
+								containerClasses={isDisabled && containerClass()}
+								id="baseImages"
+								showIndicator={!$status.application.isRunning}
+								items={application.baseImages}
+								on:select={selectBaseImage}
+								value={application.baseImage}
+								isClearable={false}
+							/>
+						</div>
+					</div>
+				{/if}
+				{#if application.buildPack !== 'docker' && (application.buildPack === 'nextjs' || application.buildPack === 'nuxtjs')}
+					<div class="grid grid-cols-2 items-center pb-8">
+						<label for="deploymentType"
+							>Deployment Type
 							<Explainer
-								explanation={"Directory containing all the assets for deployment. <br> For example: <span class='text-settings font-bold'>dist</span>,<span class='text-settings font-bold'>_site</span> or <span class='text-settings font-bold'>public</span>."}
+								explanation={"Defines how to deploy your application. <br><br><span class='text-green-500 font-bold'>Static</span> is for static websites, <span class='text-green-500 font-bold'>node</span> is for server-side applications."}
 							/></label
 						>
+						<div class="custom-select-wrapper">
+							<Select
+								{isDisabled}
+								containerClasses={isDisabled && containerClass()}
+								id="deploymentTypes"
+								showIndicator={!$status.application.isRunning}
+								items={['static', 'node']}
+								on:select={selectDeploymentType}
+								value={application.deploymentType}
+								isClearable={false}
+							/>
+						</div>
+					</div>
+				{/if}
+				{#if $features.beta}
+					{#if !application.settings.isBot && !application.settings.isPublicRepository}
+						<div class="grid grid-cols-2 items-center">
+							<Setting
+								id="isDBBranching"
+								isCenter={false}
+								bind:setting={isDBBranching}
+								on:click={() => changeSettings('isDBBranching')}
+								title="Enable DB Branching"
+								description="Enable DB Branching"
+							/>
+						</div>
+						{#if isDBBranching}
+							<button
+								on:click|stopPropagation|preventDefault={() =>
+									goto(`/applications/${id}/configuration/database`)}
+								class="btn btn-sm">Configure Connected Database</button
+							>
+							{#if application.connectedDatabase}
+								<div class="grid grid-cols-2 items-center">
+									<label for="baseImage"
+										>Base Database
+										<Explainer
+											explanation={'The name of the database that will be used as base when branching.'}
+										/></label
+									>
+									<input
+										name="baseDatabaseBranch"
+										required
+										id="baseDatabaseBranch"
+										bind:value={baseDatabaseBranch}
+									/>
+								</div>
+								<div class="text-center bg-green-600 rounded">
+									Connected to {application.connectedDatabase.databaseId}
+								</div>
+							{/if}
+						{/if}
+					{/if}
+				{/if}
+
+				{#if application.buildPack === 'python'}
+					<div class="grid grid-cols-2 items-center">
+						<label for="pythonModule">WSGI / ASGI</label>
+						<div class="custom-select-wrapper">
+							<Select
+								id="wsgi"
+								items={wsgis}
+								on:select={selectWSGI}
+								value={application.pythonWSGI}
+							/>
+						</div>
 					</div>
 
+					<div class="grid grid-cols-2 items-center">
+						<label for="pythonModule">Module</label>
+						<input
+							disabled={isDisabled}
+							readonly={!$appSession.isAdmin}
+							name="pythonModule"
+							id="pythonModule"
+							required
+							class="w-full"
+							bind:value={application.pythonModule}
+							placeholder={application.pythonWSGI?.toLowerCase() !== 'none' ? 'main' : 'main.py'}
+						/>
+					</div>
+					{#if application.pythonWSGI?.toLowerCase() === 'gunicorn'}
+						<div class="grid grid-cols-2 items-center">
+							<label for="pythonVariable">Variable</label>
+							<input
+								disabled={isDisabled}
+								readonly={!$appSession.isAdmin}
+								name="pythonVariable"
+								id="pythonVariable"
+								required
+								class="w-full"
+								bind:value={application.pythonVariable}
+								placeholder="default: app"
+							/>
+						</div>
+					{/if}
+					{#if application.pythonWSGI?.toLowerCase() === 'uvicorn'}
+						<div class="grid grid-cols-2 items-center">
+							<label for="pythonVariable">Variable</label>
+							<input
+								disabled={isDisabled}
+								readonly={!$appSession.isAdmin}
+								name="pythonVariable"
+								id="pythonVariable"
+								required
+								class="w-full"
+								bind:value={application.pythonVariable}
+								placeholder="default: app"
+							/>
+						</div>
+					{/if}
+				{/if}
+				{#if !staticDeployments.includes(application.buildPack)}
+					<div class="grid grid-cols-2 items-center pt-4">
+						<label for="port"
+							>{$t('forms.port')}
+							<Explainer explanation={'The port your application listens on.'} /></label
+						>
+						<input
+							class="w-full"
+							disabled={isDisabled}
+							readonly={!$appSession.isAdmin}
+							name="port"
+							id="port"
+							bind:value={application.port}
+							placeholder="{$t('forms.default')}: 'python' ? '8000' : '3000'"
+						/>
+					</div>
+				{/if}
+				<div class="grid grid-cols-2 items-center pb-4">
+					<label for="exposePort"
+						>Exposed Port <Explainer
+							explanation={'You can expose your application to a port on the host system.<br><br>Useful if you would like to use your own reverse proxy or tunnel and also in development mode. Otherwise leave empty.'}
+						/></label
+					>
 					<input
+						class="w-full"
+						readonly={!$appSession.isAdmin && !$status.application.isRunning}
 						disabled={isDisabled}
-						readonly={!$appSession.isAdmin}
-						name="publishDirectory"
-						id="publishDirectory"
-						required={application.deploymentType === 'static'}
-						bind:value={application.publishDirectory}
-						placeholder=" {$t('forms.default')}: /"
+						name="exposePort"
+						id="exposePort"
+						bind:value={application.exposePort}
+						placeholder="12345"
 					/>
 				</div>
-			{/if}
+				{#if !notNodeDeployments.includes(application.buildPack)}
+					<div class="grid grid-cols-2 items-center">
+						<label for="installCommand">{$t('application.install_command')}</label>
+						<input
+							class="w-full"
+							disabled={isDisabled}
+							readonly={!$appSession.isAdmin}
+							name="installCommand"
+							id="installCommand"
+							bind:value={application.installCommand}
+							placeholder="{$t('forms.default')}: yarn install"
+						/>
+					</div>
+					<div class="grid grid-cols-2 items-center">
+						<label for="buildCommand">{$t('application.build_command')}</label>
+						<input
+							class="w-full"
+							disabled={isDisabled}
+							readonly={!$appSession.isAdmin}
+							name="buildCommand"
+							id="buildCommand"
+							bind:value={application.buildCommand}
+							placeholder="{$t('forms.default')}: yarn build"
+						/>
+					</div>
+					<div class="grid grid-cols-2 items-center pb-8">
+						<label for="startCommand">{$t('application.start_command')}</label>
+						<input
+							class="w-full"
+							disabled={isDisabled}
+							readonly={!$appSession.isAdmin}
+							name="startCommand"
+							id="startCommand"
+							bind:value={application.startCommand}
+							placeholder="{$t('forms.default')}: yarn start"
+						/>
+					</div>
+				{/if}
+				{#if application.buildPack === 'docker'}
+					<div class="grid grid-cols-2 items-center pt-4">
+						<label for="dockerFileLocation"
+							>Dockerfile Location <Explainer
+								explanation={"Should be absolute path, like <span class='text-settings font-bold'>/data/Dockerfile</span> or <span class='text-settings font-bold'>/Dockerfile.</span>"}
+							/></label
+						>
+						<input
+							class="w-full"
+							disabled={isDisabled}
+							readonly={!$appSession.isAdmin}
+							name="dockerFileLocation"
+							id="dockerFileLocation"
+							bind:value={application.dockerFileLocation}
+							placeholder="default: /Dockerfile"
+						/>
+					</div>
+				{/if}
+				{#if application.buildPack === 'deno'}
+					<div class="grid grid-cols-2 items-center">
+						<label for="denoMainFile">Main File</label>
+						<input
+							class="w-full"
+							disabled={isDisabled}
+							readonly={!$appSession.isAdmin}
+							name="denoMainFile"
+							id="denoMainFile"
+							bind:value={application.denoMainFile}
+							placeholder="default: main.ts"
+						/>
+					</div>
+					<div class="grid grid-cols-2 items-center">
+						<label for="denoOptions"
+							>Arguments <Explainer
+								explanation={"List of arguments to pass to <span class='text-settings font-bold'>deno run</span> command. Could include permissions, configurations files, etc."}
+							/></label
+						>
+						<input
+							class="w-full"
+							disabled={isDisabled}
+							readonly={!$appSession.isAdmin}
+							name="denoOptions"
+							id="denoOptions"
+							bind:value={application.denoOptions}
+							placeholder="eg: --allow-net --allow-hrtime --config path/to/file.json"
+						/>
+					</div>
+				{/if}
+				{#if application.buildPack !== 'laravel'}
+					<div class="grid grid-cols-2 items-center">
+						<div class="flex-col">
+							<label for="baseDirectory"
+								>{$t('forms.base_directory')}
+								<Explainer
+									explanation={"Directory to use as the base for all commands.<br>Could be useful with <span class='text-settings font-bold'>monorepos</span>."}
+								/></label
+							>
+						</div>
+						<input
+							class="w-full"
+							disabled={isDisabled}
+							readonly={!$appSession.isAdmin}
+							name="baseDirectory"
+							id="baseDirectory"
+							bind:value={application.baseDirectory}
+							placeholder="{$t('forms.default')}: /"
+						/>
+					</div>
+				{/if}
+				{#if !notNodeDeployments.includes(application.buildPack)}
+					<div class="grid grid-cols-2 items-center">
+						<div class="flex-col">
+							<label for="publishDirectory"
+								>{$t('forms.publish_directory')}
+								<Explainer
+									explanation={"Directory containing all the assets for deployment. <br> For example: <span class='text-settings font-bold'>dist</span>,<span class='text-settings font-bold'>_site</span> or <span class='text-settings font-bold'>public</span>."}
+								/></label
+							>
+						</div>
+
+						<input
+							class="w-full"
+							disabled={isDisabled}
+							readonly={!$appSession.isAdmin}
+							name="publishDirectory"
+							id="publishDirectory"
+							required={application.deploymentType === 'static'}
+							bind:value={application.publishDirectory}
+							placeholder=" {$t('forms.default')}: /"
+						/>
+					</div>
+				{/if}
+			</div>
 		</div>
 	</form>
-	<div class="flex space-x-1 pb-5 font-bold">
-		<div class="title">{$t('application.features')}</div>
-	</div>
-	<div class="px-10 pb-10">
-		{#if !application.settings.isPublicRepository}
-			<div class="grid grid-cols-2 items-center">
-				<Setting
-					id="autodeploy"
-					isCenter={false}
-					bind:setting={autodeploy}
-					on:click={() => changeSettings('autodeploy')}
-					title={$t('application.enable_automatic_deployment')}
-					description={$t('application.enable_auto_deploy_webhooks')}
-				/>
-			</div>
-		{/if}
-		{#if !application.settings.isBot && !application.settings.isPublicRepository}
-			<div class="grid grid-cols-2 items-center">
-				<Setting
-					id="previews"
-					isCenter={false}
-					bind:setting={previews}
-					on:click={() => changeSettings('previews')}
-					title={$t('application.enable_mr_pr_previews')}
-					description={$t('application.enable_preview_deploy_mr_pr_requests')}
-				/>
-			</div>
-		{/if}
-		<div class="grid grid-cols-2 items-center">
-			<Setting
-				id="debug"
-				isCenter={false}
-				bind:setting={debug}
-				on:click={() => changeSettings('debug')}
-				title={$t('application.debug_logs')}
-				description={$t('application.enable_debug_log_during_build')}
-			/>
-		</div>
-	</div>
 </div>
diff --git a/apps/ui/src/routes/applications/[id]/logs/_BuildLog.svelte b/apps/ui/src/routes/applications/[id]/logs/_BuildLog.svelte
index 5cee0a49a..eeccd7988 100644
--- a/apps/ui/src/routes/applications/[id]/logs/_BuildLog.svelte
+++ b/apps/ui/src/routes/applications/[id]/logs/_BuildLog.svelte
@@ -1,12 +1,8 @@
 <script lang="ts">
-	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
-	const dispatch = createEventDispatcher();
-
+	import { onDestroy, onMount } from 'svelte';
 	import { page } from '$app/stores';
-
 	import { get, post } from '$lib/api';
 	import { t } from '$lib/translations';
-	import LoadingLogs from '$lib/components/LoadingLogs.svelte';
 	import { errorNotification } from '$lib/common';
 	import Tooltip from '$lib/components/Tooltip.svelte';
 	import { day } from '$lib/dayjs';
@@ -15,19 +11,30 @@
 	let logs: any = [];
 	let currentStatus: any;
 	let streamInterval: any;
-	let followingBuild: any;
+	let followingLogs: any;
 	let followingInterval: any;
 	let logsEl: any;
 	let fromDb = false;
 	let cancelInprogress = false;
-
+	let position = 0;
 	const { id } = $page.params;
 
 	const cleanAnsiCodes = (str: string) => str.replace(/\x1B\[(\d+)m/g, '');
 
+	function detect() {
+		if (position < logsEl.scrollTop) {
+			position = logsEl.scrollTop;
+		} else {
+			if (followingLogs) {
+				clearInterval(followingInterval);
+				followingLogs = false;
+			}
+			position = logsEl.scrollTop;
+		}
+	}
 	function followBuild() {
-		followingBuild = !followingBuild;
-		if (followingBuild) {
+		followingLogs = !followingLogs;
+		if (followingLogs) {
 			followingInterval = setInterval(() => {
 				logsEl.scrollTop = logsEl.scrollHeight;
 				window.scrollTo(0, document.body.scrollHeight);
@@ -63,11 +70,10 @@
 					status = data.status;
 					currentStatus = status;
 					fromDb = data.fromDb;
-					
+
 					logs = logs.concat(
 						data.logs.map((log: any) => ({ ...log, line: cleanAnsiCodes(log.line) }))
 					);
-					dispatch('updateBuildStatus', { status, took: data.took });
 				} catch (error) {
 					return errorNotification(error);
 				}
@@ -98,86 +104,86 @@
 	});
 </script>
 
-<div class="relative ">
-	{#if currentStatus === 'running'}
-		<LoadingLogs />
-	{/if}
-	{#if currentStatus === 'queued'}
-		<div class="text-center font-bold text-xl">{$t('application.build.queued_waiting_exec')}</div>
-	{:else}
-		<div class="flex justify-end sticky top-0 p-2 mx-1">
-			<button
-				id="follow"
-				on:click={followBuild}
-				class="bg-transparent btn btn-sm btn-link hover:text-green-500 hover:bg-coolgray-500"
-				class:text-green-500={followingBuild}
+	<div class="flex justify-start top-0 pb-2 space-x-2">
+		<button
+			on:click={followBuild}
+			class="btn btn-sm bg-coollabs"
+			disabled={currentStatus !== 'running'}
+			class:bg-coolgray-300={followingLogs || currentStatus !== 'running'}
+			class:text-applications={followingLogs}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="w-6 h-6 mr-2"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
 			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="w-6 h-6"
-					viewBox="0 0 24 24"
-					stroke-width="1.5"
-					stroke="currentColor"
-					fill="none"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				>
-					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-					<circle cx="12" cy="12" r="9" />
-					<line x1="8" y1="12" x2="12" y2="16" />
-					<line x1="12" y1="8" x2="12" y2="16" />
-					<line x1="16" y1="12" x2="12" y2="16" />
-				</svg>
-			</button>
-			<Tooltip triggeredBy="#follow">Follow Logs</Tooltip>
-			{#if currentStatus === 'running'}
-				<button
-					id="cancel"
-					on:click={cancelBuild}
-					class:animation-spin={cancelInprogress}
-					class="bg-transparent btn btn-sm btn-link hover:text-red-500 hover:bg-coolgray-500"
-				>
-					{#if cancelInprogress}
-						Cancelling...
-					{:else}
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="w-6 h-6"
-							viewBox="0 0 24 24"
-							stroke-width="1.5"
-							stroke="currentColor"
-							fill="none"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						>
-							<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-							<circle cx="12" cy="12" r="9" />
-							<path d="M10 10l4 4m0 -4l-4 4" />
-						</svg>
-					{/if}
-				</button>
-				<Tooltip triggeredBy="#cancel">Cancel build</Tooltip>
-			{/if}
-		</div>
-		{#if logs.length > 0}
-			<div
-				class="font-mono leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 py-5 px-6 whitespace-pre-wrap break-words overflow-auto max-h-[80vh] -mt-12 overflow-y-scroll scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200"
-				bind:this={logsEl}
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+				<circle cx="12" cy="12" r="9" />
+				<line x1="8" y1="12" x2="12" y2="16" />
+				<line x1="12" y1="8" x2="12" y2="16" />
+				<line x1="16" y1="12" x2="12" y2="16" />
+			</svg>
+
+			{followingLogs ? 'Following Logs...' : 'Follow Logs'}
+		</button>
+
+		<button
+			on:click={cancelBuild}
+			class:animation-spin={cancelInprogress}
+			class="btn btn-sm"
+			disabled={currentStatus !== 'running'}
+			class:bg-coolgray-300={cancelInprogress || currentStatus !== 'running'}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="w-6 h-6 mr-2"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
 			>
-				{#each logs as log}
-					{#if fromDb}
-						<div>{log.line + '\n'}</div>
-					{:else}
-						<div>[{day.unix(log.time).format('HH:mm:ss.SSS')}] {log.line + '\n'}</div>
-					{/if}
-				{/each}
-			</div>
-		{:else}
-			<div
-				class="font-mono leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 py-5 px-6 whitespace-pre-wrap break-words overflow-auto max-h-[80vh] -mt-12 overflow-y-scroll scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200"
-			>
-				No logs found.
-			</div>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+				<circle cx="12" cy="12" r="9" />
+				<path d="M10 10l4 4m0 -4l-4 4" />
+			</svg>
+			{cancelInprogress ? 'Cancelling...' : 'Cancel Build'}
+		</button>
+		{#if currentStatus === 'running'}
+		<button id="streaming" class="btn btn-sm bg-transparent border-none loading" />
+		<Tooltip triggeredBy="#streaming">Streaming logs</Tooltip>
 		{/if}
+	</div>
+	{#if currentStatus === 'queued'}
+		<div
+			class="font-mono w-full bg-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded mb-20 flex flex-col whitespace-nowrap scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1"
+		>
+			{$t('application.build.queued_waiting_exec')}
+		</div>
+	{:else if logs.length > 0}
+		<div
+			bind:this={logsEl}
+			on:scroll={detect}
+			class="font-mono w-full bg-coolgray-100 border border-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded mb-20 flex flex-col scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1"
+		>
+			{#each logs as log}
+				{#if fromDb}
+					<div>{log.line + '\n'}</div>
+				{:else}
+					<div>[{day.unix(log.time).format('HH:mm:ss.SSS')}] {log.line + '\n'}</div>
+				{/if}
+			{/each}
+		</div>
+	{:else}
+		<div
+			class="font-mono w-full bg-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded mb-20 flex flex-col whitespace-nowrap scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1"
+		>
+			No logs found yet.
+		</div>
 	{/if}
-</div>
diff --git a/apps/ui/src/routes/applications/[id]/logs/build.svelte b/apps/ui/src/routes/applications/[id]/logs/build.svelte
index 10112edc7..79697713f 100644
--- a/apps/ui/src/routes/applications/[id]/logs/build.svelte
+++ b/apps/ui/src/routes/applications/[id]/logs/build.svelte
@@ -45,7 +45,6 @@
 		loadBuildLogsInterval = setInterval(() => {
 			getBuildLogs();
 		}, 2000);
-		
 	});
 	onDestroy(() => {
 		clearInterval(loadBuildLogsInterval);
@@ -54,14 +53,14 @@
 		const response = await get(`/applications/${$page.params.id}/logs/build?skip=${skip}`);
 		builds = response.builds;
 	}
-	
+
 	async function loadMoreBuilds() {
 		if (buildCount >= skip) {
 			skip = skip + 5;
 			noMoreBuilds = buildCount <= skip;
 			try {
 				const data = await get(`/applications/${id}/logs/build?skip=${skip}`);
-				builds = data.builds
+				builds = data.builds;
 				return;
 			} catch (error) {
 				return errorNotification(error);
@@ -107,74 +106,50 @@
 	}
 </script>
 
-<div class="flex items-center space-x-2 p-5 px-6 font-bold">
-	<div class="-mb-5 flex-col">
-		<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
-			{$t('application.build_logs')}
+<div class="mx-auto w-full">
+	<div class="flex flex-row border-b border-coolgray-500 mb-6 space-x-2">
+		<div class="flex flex-row">
+			<div class="title font-bold pb-3 pr-3">Build Logs</div>
+			<button class="btn btn-sm bg-error" on:click={resetQueue}>Reset Build Queue</button>
 		</div>
-		<span class="text-xs">{application.name} </span>
 	</div>
-	{#if application.gitSource?.htmlUrl && application.repository && application.branch}
-		<a
-			href="{application.gitSource.htmlUrl}/{application.repository}/tree/{application.branch}"
-			target="_blank"
-			class="w-10"
-		>
-			{#if application.gitSource?.type === 'gitlab'}
-				<svg viewBox="0 0 128 128" class="icons">
-					<path
-						fill="#FC6D26"
-						d="M126.615 72.31l-7.034-21.647L105.64 7.76c-.716-2.206-3.84-2.206-4.556 0l-13.94 42.903H40.856L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664 1.385 72.31a4.792 4.792 0 001.74 5.358L64 121.894l60.874-44.227a4.793 4.793 0 001.74-5.357"
-					/><path fill="#E24329" d="M64 121.894l23.144-71.23H40.856L64 121.893z" /><path
-						fill="#FC6D26"
-						d="M64 121.894l-23.144-71.23H8.42L64 121.893z"
-					/><path
-						fill="#FCA326"
-						d="M8.42 50.663L1.384 72.31a4.79 4.79 0 001.74 5.357L64 121.894 8.42 50.664z"
-					/><path
-						fill="#E24329"
-						d="M8.42 50.663h32.436L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664z"
-					/><path fill="#FC6D26" d="M64 121.894l23.144-71.23h32.437L64 121.893z" /><path
-						fill="#FCA326"
-						d="M119.58 50.663l7.035 21.647a4.79 4.79 0 01-1.74 5.357L64 121.894l55.58-71.23z"
-					/><path
-						fill="#E24329"
-						d="M119.58 50.663H87.145l13.94-42.902c.717-2.206 3.84-2.206 4.557 0l13.94 42.903z"
-					/>
-				</svg>
-			{:else if application.gitSource?.type === 'github'}
-				<svg viewBox="0 0 128 128" class="icons">
-					<g fill="#ffffff"
-						><path
-							fill-rule="evenodd"
-							clip-rule="evenodd"
-							d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"
-						/><path
-							d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm2.446 2.729c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zM31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm3.261 3.361c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm4.5 1.951c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm4.943.361c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm4.598-.782c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"
-						/></g
-					>
-				</svg>
-			{/if}
-		</a>
-	{/if}
 </div>
-<div class="block flex-row justify-start space-x-2 px-5 pt-6 sm:px-10 md:flex">
+<div class="block flex-col justify-start space-x-5 flex flex-col-reverse lg:flex-row">
+	<div class="flex-1 md:w-96">
+		{#if $selectedBuildId}
+			{#key $selectedBuildId}
+				<svelte:component this={BuildLog} />
+			{/key}
+		{:else}
+		{#if buildCount === 0}
+		 Not build logs found.
+			{:else}
+			Select a build to see the logs.
+
+			{/if}
+		{/if}
+	</div>
 	<div class="mb-4 min-w-[16rem] space-y-2 md:mb-0 ">
-		<button class="btn btn-sm text-xs w-full bg-error" on:click={resetQueue}
-			>Reset Build Queue</button
-		>
 		<div class="top-4 md:sticky">
+					<div class="flex space-x-2 pb-2">
+						<button
+							disabled={noMoreBuilds}
+							class:btn-primary={!noMoreBuilds}
+							class=" btn btn-sm w-full"
+							on:click={loadMoreBuilds}>{$t('application.build.load_more')}</button
+						>
+					</div>
 			{#each builds as build, index (build.id)}
 				<div
 					id={`building-${build.id}`}
 					on:click={() => loadBuild(build.id)}
 					class:rounded-tr={index === 0}
 					class:rounded-br={index === builds.length - 1}
-					class="flex cursor-pointer items-center justify-center py-4 no-underline transition-all duration-100 hover:bg-coolgray-300 hover:shadow-xl"
+					class="flex cursor-pointer items-center justify-center py-4 no-underline transition-all duration-150 hover:bg-coolgray-300 hover:shadow-xl"
 					class:bg-coolgray-200={$selectedBuildId === build.id}
 				>
 					<div class="flex-col px-2 text-center min-w-[10rem]">
-						<div class="text-sm font-bold">
+						<div class="text-sm font-bold truncate">
 							{build.branch || application.branch}
 						</div>
 						<div class="text-xs">
@@ -189,12 +164,10 @@
 						</div>
 					</div>
 
-					<div class="w-48 text-center text-xs">
+					<div class="w-32 text-center text-xs">
 						{#if build.status === 'running'}
 							<div>
-								<span class="font-bold text-xl"
-									>{build.elapsed}s</span
-								>
+								<span class="font-bold text-xl">{build.elapsed}s</span>
 							</div>
 						{:else if build.status !== 'queued'}
 							<div>{day(build.updatedAt).utc().fromNow()}</div>
@@ -213,26 +186,5 @@
 				>
 			{/each}
 		</div>
-		{#if !noMoreBuilds}
-			{#if buildCount > 5}
-				<div class="flex space-x-2 pb-10">
-					<button
-						disabled={noMoreBuilds}
-						class=" btn btn-sm w-full text-xs"
-						on:click={loadMoreBuilds}>{$t('application.build.load_more')}</button
-					>
-				</div>
-			{/if}
-		{/if}
 	</div>
-	<div class="flex-1 md:w-96">
-		{#if $selectedBuildId}
-			{#key $selectedBuildId}
-				<svelte:component this={BuildLog} />
-			{/key}
-		{/if}
-	</div>
-</div>
-{#if buildCount === 0}
-	<div class="text-center text-xl font-bold">{$t('application.build.no_logs')}</div>
-{/if}
+</div>
\ No newline at end of file
diff --git a/apps/ui/src/routes/applications/[id]/logs/index.svelte b/apps/ui/src/routes/applications/[id]/logs/index.svelte
index 5db212df4..4ec6ab28d 100644
--- a/apps/ui/src/routes/applications/[id]/logs/index.svelte
+++ b/apps/ui/src/routes/applications/[id]/logs/index.svelte
@@ -91,76 +91,26 @@
 	}
 </script>
 
-<div class="flex h-20 items-center space-x-2 p-5 px-6 font-bold">
-	<div class="-mb-5 flex-col">
-		<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
-			Application Logs
-		</div>
-		<span class="text-xs">{application.name}</span>
+<div class="mx-auto w-full">
+	<div class="flex flex-row border-b border-coolgray-500 mb-6 space-x-2">
+		<div class="title font-bold pb-3">Application Logs</div>
 	</div>
-	{#if application.gitSource?.htmlUrl && application.repository && application.branch}
-		<a
-			href="{application.gitSource.htmlUrl}/{application.repository}/tree/{application.branch}"
-			target="_blank"
-			class="w-10"
-		>
-			{#if application.gitSource?.type === 'gitlab'}
-				<svg viewBox="0 0 128 128" class="icons">
-					<path
-						fill="#FC6D26"
-						d="M126.615 72.31l-7.034-21.647L105.64 7.76c-.716-2.206-3.84-2.206-4.556 0l-13.94 42.903H40.856L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664 1.385 72.31a4.792 4.792 0 001.74 5.358L64 121.894l60.874-44.227a4.793 4.793 0 001.74-5.357"
-					/><path fill="#E24329" d="M64 121.894l23.144-71.23H40.856L64 121.893z" /><path
-						fill="#FC6D26"
-						d="M64 121.894l-23.144-71.23H8.42L64 121.893z"
-					/><path
-						fill="#FCA326"
-						d="M8.42 50.663L1.384 72.31a4.79 4.79 0 001.74 5.357L64 121.894 8.42 50.664z"
-					/><path
-						fill="#E24329"
-						d="M8.42 50.663h32.436L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664z"
-					/><path fill="#FC6D26" d="M64 121.894l23.144-71.23h32.437L64 121.893z" /><path
-						fill="#FCA326"
-						d="M119.58 50.663l7.035 21.647a4.79 4.79 0 01-1.74 5.357L64 121.894l55.58-71.23z"
-					/><path
-						fill="#E24329"
-						d="M119.58 50.663H87.145l13.94-42.902c.717-2.206 3.84-2.206 4.557 0l13.94 42.903z"
-					/>
-				</svg>
-			{:else if application.gitSource?.type === 'github'}
-				<svg viewBox="0 0 128 128" class="icons">
-					<g fill="#ffffff"
-						><path
-							fill-rule="evenodd"
-							clip-rule="evenodd"
-							d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"
-						/><path
-							d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm2.446 2.729c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zM31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm3.261 3.361c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm4.5 1.951c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm4.943.361c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm4.598-.782c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"
-						/></g
-					>
-				</svg>
-			{/if}
-		</a>
-	{/if}
 </div>
-<div class="flex flex-row justify-center space-x-2 px-10 pt-6">
+<div class="flex flex-row justify-center space-x-2">
 	{#if logs.length === 0}
 		<div class="text-xl font-bold tracking-tighter">{$t('application.build.waiting_logs')}</div>
 	{:else}
 		<div class="relative w-full">
-			<div class="text-right " />
-			{#if loadLogsInterval}
-				<LoadingLogs />
-			{/if}
-			<div class="flex justify-end sticky top-0 p-1 mx-1">
+			<div class="flex justify-start sticky space-x-2 pb-2">
 				<button
-					id="follow"
 					on:click={followBuild}
-					class="bg-transparent btn btn-sm btn-link"
-					class:text-green-500={followingLogs}
+					class="btn btn-sm bg-coollabs"
+					class:bg-coolgray-300={followingLogs}
+					class:text-applications={followingLogs}
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="w-6 h-6"
+						class="w-6 h-6 mr-2"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
@@ -174,19 +124,21 @@
 						<line x1="12" y1="8" x2="12" y2="16" />
 						<line x1="16" y1="12" x2="12" y2="16" />
 					</svg>
+					{followingLogs ? 'Following Logs...' : 'Follow Logs'}
 				</button>
-				<Tooltip triggeredBy="#follow">Follow Logs</Tooltip>
+				{#if loadLogsInterval}
+					<button id="streaming" class="btn btn-sm bg-transparent border-none loading" />
+					<Tooltip triggeredBy="#streaming">Streaming logs</Tooltip>
+				{/if}
 			</div>
 			<div
-				class="font-mono w-full leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 py-5 px-6 whitespace-pre-wrap break-words overflow-auto max-h-[80vh] -mt-12 overflow-y-scroll scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200"
 				bind:this={logsEl}
 				on:scroll={detect}
+				class="font-mono w-full bg-coolgray-100 border border-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded mb-20 flex flex-col scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1"
 			>
-				<div class="px-2 pr-14">
-					{#each logs as log}
-						{log + '\n'}
-					{/each}
-				</div>
+				{#each logs as log}
+					<p>{log + '\n'}</p>
+				{/each}
 			</div>
 		</div>
 	{/if}
diff --git a/apps/ui/src/routes/applications/[id]/previews/index.svelte b/apps/ui/src/routes/applications/[id]/previews/index.svelte
index a46daf99a..2debec2e8 100644
--- a/apps/ui/src/routes/applications/[id]/previews/index.svelte
+++ b/apps/ui/src/routes/applications/[id]/previews/index.svelte
@@ -18,22 +18,17 @@
 
 <script lang="ts">
 	export let application: any;
-	import Secret from '../_Secret.svelte';
 	import { get, post } from '$lib/api';
 	import { page } from '$app/stores';
-	import { t } from '$lib/translations';
 	import { goto } from '$app/navigation';
-	import { asyncSleep, errorNotification, getDomain, getRndInteger } from '$lib/common';
+	import { asyncSleep, errorNotification, getRndInteger } from '$lib/common';
 	import { onDestroy, onMount } from 'svelte';
 	import { addToast } from '$lib/store';
-	import SimpleExplainer from '$lib/components/SimpleExplainer.svelte';
 	import Tooltip from '$lib/components/Tooltip.svelte';
 	import DeleteIcon from '$lib/components/DeleteIcon.svelte';
 
 	const { id } = $page.params;
 	let loadBuildingStatusInterval: any = null;
-	let PRMRSecrets: any;
-	let applicationSecrets: any;
 	let loading = {
 		init: true,
 		restart: false,
@@ -41,10 +36,7 @@
 	};
 	let numberOfGetStatus = 0;
 	let status: any = {};
-	async function refreshSecrets() {
-		const data = await get(`/applications/${id}/secrets`);
-		PRMRSecrets = [...data.secrets];
-	}
+
 	async function removeApplication(preview: any) {
 		try {
 			loading.removing = true;
@@ -119,7 +111,7 @@
 			return 'error';
 		} finally {
 			numberOfGetStatus--;
-			status = status
+			status = status;
 		}
 	}
 	async function restartPreview(preview: any) {
@@ -164,9 +156,6 @@
 		try {
 			loading.init = true;
 			loading.restart = true;
-			const response = await get(`/applications/${id}/previews`);
-			PRMRSecrets = response.PRMRSecrets;
-			applicationSecrets = response.applicationSecrets;
 		} catch (error) {
 			return errorNotification(error);
 		} finally {
@@ -176,261 +165,160 @@
 	});
 </script>
 
-<div class="flex items-center space-x-2 p-5 px-6 font-bold">
-	<div class="-mb-5 flex-col">
-		<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
-			Preview Deployments
+<div class="w-full">
+	<div class="mx-auto w-full">
+		<div class="flex flex-row border-b border-coolgray-500 mb-6  space-x-2">
+			<div class="title font-bold pb-3">Preview Deployments</div>
+			<div class="text-center">
+				<button class="btn btn-sm bg-coollabs" on:click={loadPreviewsFromDocker}
+					>Load Previews</button
+				>
+			</div>
 		</div>
-		<span class="text-xs">{application?.name}</span>
 	</div>
-	{#if application.gitSource?.htmlUrl && application.repository && application.branch}
-		<a
-			href="{application.gitSource.htmlUrl}/{application.repository}/tree/{application.branch}"
-			target="_blank"
-			class="w-10"
-		>
-			{#if application.gitSource?.type === 'gitlab'}
-				<svg viewBox="0 0 128 128" class="icons">
-					<path
-						fill="#FC6D26"
-						d="M126.615 72.31l-7.034-21.647L105.64 7.76c-.716-2.206-3.84-2.206-4.556 0l-13.94 42.903H40.856L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664 1.385 72.31a4.792 4.792 0 001.74 5.358L64 121.894l60.874-44.227a4.793 4.793 0 001.74-5.357"
-					/><path fill="#E24329" d="M64 121.894l23.144-71.23H40.856L64 121.893z" /><path
-						fill="#FC6D26"
-						d="M64 121.894l-23.144-71.23H8.42L64 121.893z"
-					/><path
-						fill="#FCA326"
-						d="M8.42 50.663L1.384 72.31a4.79 4.79 0 001.74 5.357L64 121.894 8.42 50.664z"
-					/><path
-						fill="#E24329"
-						d="M8.42 50.663h32.436L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664z"
-					/><path fill="#FC6D26" d="M64 121.894l23.144-71.23h32.437L64 121.893z" /><path
-						fill="#FCA326"
-						d="M119.58 50.663l7.035 21.647a4.79 4.79 0 01-1.74 5.357L64 121.894l55.58-71.23z"
-					/><path
-						fill="#E24329"
-						d="M119.58 50.663H87.145l13.94-42.902c.717-2.206 3.84-2.206 4.557 0l13.94 42.903z"
-					/>
-				</svg>
-			{:else if application.gitSource?.type === 'github'}
-				<svg viewBox="0 0 128 128" class="icons">
-					<g fill="#ffffff"
-						><path
-							fill-rule="evenodd"
-							clip-rule="evenodd"
-							d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"
-						/><path
-							d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm2.446 2.729c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zM31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm3.261 3.361c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm4.5 1.951c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm4.943.361c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm4.598-.782c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"
-						/></g
-					>
-				</svg>
-			{/if}
-		</a>
-	{/if}
 </div>
+
 {#if loading.init}
-	<div class="mx-auto max-w-6xl px-6 pt-4">
+	<div class="px-6 pt-4">
 		<div class="flex justify-center py-4 text-center text-xl font-bold">Loading...</div>
 	</div>
-{:else}
-	<div class="mx-auto max-w-6xl px-6 pt-4">
-		<div class="flex justify-center py-4 text-center">
-			<SimpleExplainer
-				customClass="w-full"
-				text={applicationSecrets.length === 0
-					? "You can add secrets to PR/MR deployments. Please add secrets to the application first. <br>Useful for creating <span class='text-green-500 font-bold'>staging</span> environments."
-					: "These values overwrite application secrets in PR/MR deployments. <br>Useful for creating <span class='text-green-500 font-bold'>staging</span> environments."}
-			/>
-		</div>
-		<div class="text-center">
-			<SimpleExplainer
-				customClass="w-full"
-				text={'If your preview is not shown, try load them directly from Docker Engine.<br>(Changed previews process flow in <span class="font-bold text-white">v3.10.4</span>)'}
-			/>
-			<button class="btn btn-sm bg-coollabs" on:click={loadPreviewsFromDocker}
-				>Fetch Previews</button
-			>
-		</div>
-		{#if applicationSecrets.length !== 0}
-			<table class="mx-auto border-separate text-left">
-				<thead>
-					<tr class="h-12">
-						<th scope="col">{$t('forms.name')}</th>
-						<th scope="col">{$t('forms.value')}</th>
-						<th scope="col" class="w-64 text-center"
-							>{$t('application.preview.need_during_buildtime')}</th
-						>
-						<th scope="col" class="w-96 text-center">{$t('forms.action')}</th>
-					</tr>
-				</thead>
-				<tbody>
-					{#each applicationSecrets as secret}
-						{#key secret.id}
-							<tr>
-								<Secret
-									PRMRSecret={PRMRSecrets.find((s) => s.name === secret.name)}
-									isPRMRSecret
-									name={secret.name}
-									value={secret.value}
-									isBuildSecret={secret.isBuildSecret}
-									on:refresh={refreshSecrets}
-								/>
-							</tr>
-						{/key}
-					{/each}
-				</tbody>
-			</table>
-		{/if}
-	</div>
-
-	<div class="container lg:mx-auto lg:p-0 px-8 p-5 lg:pt-10">
-		{#if application.previewApplication.length > 0}
-			<div
-				class="grid grid-col gap-8 auto-cols-max grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 p-4"
-			>
-				{#each application.previewApplication as preview}
-					<div class="no-underline mb-5">
-						<div class="w-full rounded p-5 bg-coolgray-200 indicator">
-							{#await getStatus(preview)}
-								<span class="indicator-item badge bg-yellow-500 badge-sm" />
-							{:then}
-								{#if status[preview.id] === 'running'}
-									<span class="indicator-item badge bg-success badge-sm" />
-								{:else}
-									<span class="indicator-item badge bg-error badge-sm" />
+{:else if application.previewApplication.length > 0}
+	<div
+		class="grid grid-col gap-4 auto-cols-max grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+	>
+		{#each application.previewApplication as preview}
+			<div class="no-underline mb-5 w-full lg:w-96">
+				<div class="w-full rounded p-5 bg-coolgray-200 indicator">
+					{#await getStatus(preview)}
+						<span class="indicator-item badge bg-yellow-500 badge-sm" />
+					{:then}
+						{#if status[preview.id] === 'running'}
+							<span class="indicator-item badge bg-success badge-sm" />
+						{:else}
+							<span class="indicator-item badge bg-error badge-sm" />
+						{/if}
+					{/await}
+					<div class="w-full flex flex-row">
+						<div class="w-full flex flex-col">
+							<h1 class="font-bold text-lg lg:text-xl truncate">
+								PR #{preview.pullmergeRequestId}
+								{#if status[preview.id] === 'building'}
+									<span
+										class="badge badge-sm text-xs uppercase rounded bg-coolgray-300 text-green-500 border-none font-bold"
+									>
+										BUILDING
+									</span>
 								{/if}
-							{/await}
-							<div class="w-full flex flex-row">
-								<div class="w-full flex flex-col">
-									<h1 class="font-bold text-lg lg:text-xl truncate">
-										PR #{preview.pullmergeRequestId}
-										{#if status[preview.id] === 'building'}
-											<span
-												class="badge badge-sm text-xs uppercase rounded bg-coolgray-300 text-green-500 border-none font-bold"
-											>
-												BUILDING
-											</span>
-										{/if}
-									</h1>
-									<div class="h-10 text-xs">
-										<h2>{preview.customDomain.replace('https://', '').replace('http://', '')}</h2>
-									</div>
+							</h1>
+							<div class="h-10 text-xs">
+								<h2>{preview.customDomain.replace('https://', '').replace('http://', '')}</h2>
+							</div>
 
-									<div class="flex justify-end items-end space-x-2 h-10">
-										{#if preview.customDomain}
-											<a id="openpreview" href={preview.customDomain} target="_blank" class="icons">
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													class="h-6 w-6"
-													viewBox="0 0 24 24"
-													stroke-width="1.5"
-													stroke="currentColor"
-													fill="none"
-													stroke-linecap="round"
-													stroke-linejoin="round"
-												>
-													<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-													<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
-													<line x1="10" y1="14" x2="20" y2="4" />
-													<polyline points="15 4 20 4 20 9" />
-												</svg>
-											</a>
-										{/if}
-										<Tooltip triggeredBy="#openpreview">Open Preview</Tooltip>
-										<div class="border border-coolgray-500 h-8" />
-										{#if loading.restart}
-											<button
-												class="icons flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out hover:bg-transparent"
-											>
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													class="h-6 w-6"
-													viewBox="0 0 24 24"
-													stroke-width="1.5"
-													stroke="currentColor"
-													fill="none"
-													stroke-linecap="round"
-													stroke-linejoin="round"
-												>
-													<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-													<path d="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5" />
-													<line x1="5.63" y1="7.16" x2="5.63" y2="7.17" />
-													<line x1="4.06" y1="11" x2="4.06" y2="11.01" />
-													<line x1="4.63" y1="15.1" x2="4.63" y2="15.11" />
-													<line x1="7.16" y1="18.37" x2="7.16" y2="18.38" />
-													<line x1="11" y1="19.94" x2="11" y2="19.95" />
-												</svg>
-											</button>
-										{:else}
-											<button
-												id="restart"
-												on:click={() => restartPreview(preview)}
-												type="submit"
-												class="icons bg-transparent text-sm flex items-center space-x-2"
-											>
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													class="w-6 h-6"
-													viewBox="0 0 24 24"
-													stroke-width="1.5"
-													stroke="currentColor"
-													fill="none"
-													stroke-linecap="round"
-													stroke-linejoin="round"
-												>
-													<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-													<path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" />
-													<path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" />
-												</svg>
-											</button>
-										{/if}
+							<div class="flex justify-end items-end space-x-2 h-10">
+								{#if preview.customDomain}
+									<a id="openpreview" href={preview.customDomain} target="_blank" class="icons">
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											class="h-6 w-6"
+											viewBox="0 0 24 24"
+											stroke-width="1.5"
+											stroke="currentColor"
+											fill="none"
+											stroke-linecap="round"
+											stroke-linejoin="round"
+										>
+											<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+											<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+											<line x1="10" y1="14" x2="20" y2="4" />
+											<polyline points="15 4 20 4 20 9" />
+										</svg>
+									</a>
+								{/if}
+								<Tooltip triggeredBy="#openpreview">Open Preview</Tooltip>
+								{#if loading.restart}
+									<button
+										class="icons flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out hover:bg-transparent"
+									>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											class="h-6 w-6"
+											viewBox="0 0 24 24"
+											stroke-width="1.5"
+											stroke="currentColor"
+											fill="none"
+											stroke-linecap="round"
+											stroke-linejoin="round"
+										>
+											<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+											<path d="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5" />
+											<line x1="5.63" y1="7.16" x2="5.63" y2="7.17" />
+											<line x1="4.06" y1="11" x2="4.06" y2="11.01" />
+											<line x1="4.63" y1="15.1" x2="4.63" y2="15.11" />
+											<line x1="7.16" y1="18.37" x2="7.16" y2="18.38" />
+											<line x1="11" y1="19.94" x2="11" y2="19.95" />
+										</svg>
+									</button>
+								{:else}
+									<button
+										id="restart"
+										on:click={() => restartPreview(preview)}
+										type="submit"
+										class="icons bg-transparent text-sm flex items-center space-x-2"
+									>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											class="w-6 h-6"
+											viewBox="0 0 24 24"
+											stroke-width="1.5"
+											stroke="currentColor"
+											fill="none"
+											stroke-linecap="round"
+											stroke-linejoin="round"
+										>
+											<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+											<path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" />
+											<path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" />
+										</svg>
+									</button>
+								{/if}
 
-										<Tooltip triggeredBy="#restart">Restart (useful to change secrets)</Tooltip>
-										<button
-											id="forceredeploypreview"
-											class="icons"
-											on:click={() => redeploy(preview)}
-										>
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												class="w-6 h-6"
-												viewBox="0 0 24 24"
-												stroke-width="1.5"
-												stroke="currentColor"
-												fill="none"
-												stroke-linecap="round"
-												stroke-linejoin="round"
-											>
-												<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-												<path
-													d="M16.3 5h.7a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h5l-2.82 -2.82m0 5.64l2.82 -2.82"
-													transform="rotate(-45 12 12)"
-												/>
-											</svg></button
-										>
-										<Tooltip triggeredBy="#forceredeploypreview"
-											>Force redeploy (without cache)</Tooltip
-										>
-										<div class="border border-coolgray-500 h-8" />
-										<button
-											id="deletepreview"
-											class="icons"
-											class:hover:text-error={!loading.removing}
-											disabled={loading.removing}
-											on:click={() => removeApplication(preview)}
-											><DeleteIcon />
-										</button>
-										<Tooltip triggeredBy="#deletepreview">Delete Preview</Tooltip>
-									</div>
-								</div>
+								<Tooltip triggeredBy="#restart">Restart (useful to change secrets)</Tooltip>
+								<button id="forceredeploypreview" class="icons" on:click={() => redeploy(preview)}>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="w-6 h-6"
+										viewBox="0 0 24 24"
+										stroke-width="1.5"
+										stroke="currentColor"
+										fill="none"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									>
+										<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+										<path
+											d="M16.3 5h.7a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h5l-2.82 -2.82m0 5.64l2.82 -2.82"
+											transform="rotate(-45 12 12)"
+										/>
+									</svg></button
+								>
+								<Tooltip triggeredBy="#forceredeploypreview">Force redeploy (without cache)</Tooltip
+								>
+								<button
+									id="deletepreview"
+									class="icons"
+									class:hover:text-error={!loading.removing}
+									disabled={loading.removing}
+									on:click={() => removeApplication(preview)}
+									><DeleteIcon />
+								</button>
+								<Tooltip triggeredBy="#deletepreview">Delete Preview</Tooltip>
 							</div>
 						</div>
 					</div>
-				{/each}
+				</div>
 			</div>
-		{:else}
-			<div class="flex-col">
-				<div class="text-center font-bold text-xl pb-10">Previews will shown here.</div>
-			</div>
-		{/if}
+		{/each}
 	</div>
+{:else}
+	No previews found.
 {/if}
diff --git a/apps/ui/src/routes/applications/[id]/secrets.svelte b/apps/ui/src/routes/applications/[id]/secrets.svelte
index 8570d0546..ba647d340 100644
--- a/apps/ui/src/routes/applications/[id]/secrets.svelte
+++ b/apps/ui/src/routes/applications/[id]/secrets.svelte
@@ -20,14 +20,16 @@
 
 <script lang="ts">
 	export let secrets: any;
-	export let application: any;
+	export let previewSecrets: any;
 	import pLimit from 'p-limit';
-	import Secret from './_Secret.svelte';
 	import { page } from '$app/stores';
-	import { t } from '$lib/translations';
-	import { get } from '$lib/api';
-	import { saveSecret } from './utils';
+	import { get, post, put } from '$lib/api';
 	import { addToast } from '$lib/store';
+	import Secret from './_Secret.svelte';
+	import PreviewSecret from './_PreviewSecret.svelte';
+	import { errorNotification } from '$lib/common';
+	import { t } from '$lib/translations';
+	import Explainer from '$lib/components/Explainer.svelte';
 
 	const limit = pLimit(1);
 	const { id } = $page.params;
@@ -35,10 +37,11 @@
 	let batchSecrets = '';
 	async function refreshSecrets() {
 		const data = await get(`/applications/${id}/secrets`);
+		previewSecrets = [...data.previewSecrets];
 		secrets = [...data.secrets];
 	}
-	async function getValues(e: any) {
-		e.preventDefault();
+	async function getValues() {
+		if (!batchSecrets) return;
 		const eachValuePair = batchSecrets.split('\n');
 		const batchSecretsPairs = eachValuePair
 			.filter((secret) => !secret.startsWith('#') && secret)
@@ -49,13 +52,37 @@
 				return {
 					name,
 					value: cleanValue,
-					isNew: !secrets.find((secret: any) => name === secret.name)
+					createSecret: !secrets.find((secret: any) => name === secret.name)
 				};
 			});
 
 		await Promise.all(
-			batchSecretsPairs.map(({ name, value, isNew }) =>
-				limit(() => saveSecret({ name, value, applicationId: id, isNew }))
+			batchSecretsPairs.map(({ name, value, createSecret }) =>
+				limit(async () => {
+					try {
+						if (createSecret) {
+							await post(`/applications/${id}/secrets`, {
+								name,
+								value
+							});
+							addToast({
+								message: 'Secret created.',
+								type: 'success'
+							});
+						} else {
+							await put(`/applications/${id}/secrets`, {
+								name,
+								value
+							});
+							addToast({
+								message: 'Secret updated.',
+								type: 'success'
+							});
+						}
+					} catch (error) {
+						return errorNotification(error);
+					}
+				})
 			)
 		);
 		batchSecrets = '';
@@ -67,90 +94,60 @@
 	}
 </script>
 
-<div class="flex items-center space-x-2 p-5 px-6 font-bold">
-	<div class="-mb-5 flex-col">
-		<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
-			{$t('application.secret')}
-		</div>
-		<span class="text-xs">{application.name} </span>
+<div class="mx-auto w-full">
+	<div class="flex flex-row border-b border-coolgray-500 mb-6 space-x-2">
+		<div class="title font-bold pb-3">Secrets</div>
 	</div>
-	{#if application.gitSource?.htmlUrl && application.repository && application.branch}
-		<a
-			href="{application.gitSource.htmlUrl}/{application.repository}/tree/{application.branch}"
-			target="_blank"
-			class="w-10"
-		>
-			{#if application.gitSource?.type === 'gitlab'}
-				<svg viewBox="0 0 128 128" class="icons">
-					<path
-						fill="#FC6D26"
-						d="M126.615 72.31l-7.034-21.647L105.64 7.76c-.716-2.206-3.84-2.206-4.556 0l-13.94 42.903H40.856L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664 1.385 72.31a4.792 4.792 0 001.74 5.358L64 121.894l60.874-44.227a4.793 4.793 0 001.74-5.357"
-					/><path fill="#E24329" d="M64 121.894l23.144-71.23H40.856L64 121.893z" /><path
-						fill="#FC6D26"
-						d="M64 121.894l-23.144-71.23H8.42L64 121.893z"
-					/><path
-						fill="#FCA326"
-						d="M8.42 50.663L1.384 72.31a4.79 4.79 0 001.74 5.357L64 121.894 8.42 50.664z"
-					/><path
-						fill="#E24329"
-						d="M8.42 50.663h32.436L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664z"
-					/><path fill="#FC6D26" d="M64 121.894l23.144-71.23h32.437L64 121.893z" /><path
-						fill="#FCA326"
-						d="M119.58 50.663l7.035 21.647a4.79 4.79 0 01-1.74 5.357L64 121.894l55.58-71.23z"
-					/><path
-						fill="#E24329"
-						d="M119.58 50.663H87.145l13.94-42.902c.717-2.206 3.84-2.206 4.557 0l13.94 42.903z"
-					/>
-				</svg>
-			{:else if application.gitSource?.type === 'github'}
-				<svg viewBox="0 0 128 128" class="icons">
-					<g fill="#ffffff"
-						><path
-							fill-rule="evenodd"
-							clip-rule="evenodd"
-							d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"
-						/><path
-							d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm2.446 2.729c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zM31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm3.261 3.361c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm4.5 1.951c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm4.943.361c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm4.598-.782c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"
-						/></g
-					>
-				</svg>
-			{/if}
-		</a>
+	{#each secrets as secret, index}
+		{#key secret.id}
+			<Secret
+				{index}
+				length={secrets.length}
+				name={secret.name}
+				value={secret.value}
+				isBuildSecret={secret.isBuildSecret}
+				on:refresh={refreshSecrets}
+			/>
+		{/key}
+	{/each}
+	<div class="lg:pt-0 pt-10">
+		<Secret on:refresh={refreshSecrets} length={secrets.length} isNewSecret />
+	</div>
+	<div class="flex flex-row border-b border-coolgray-500 mb-6 space-x-2">
+		<div class="title font-bold pb-3 pt-8">
+			Preview Secrets <Explainer
+				explanation="These values overwrite application secrets in PR/MR deployments. <br>Useful for creating <span class='text-green-500 font-bold'>staging</span> environments."
+			/>
+		</div>
+	</div>
+	{#if previewSecrets.length !== 0}
+		{#each previewSecrets as secret, index}
+			{#key index}
+				<PreviewSecret
+					{index}
+					length={secrets.length}
+					name={secret.name}
+					value={secret.value}
+					isBuildSecret={secret.isBuildSecret}
+					on:refresh={refreshSecrets}
+				/>
+			{/key}
+		{/each}
+	{:else}
+		Add secrets first to see Preview Secrets.
 	{/if}
 </div>
-<div class="mx-auto max-w-6xl px-6 pt-4">
-	<table class="mx-auto border-separate text-left">
-		<thead>
-			<tr class="h-12">
-				<th scope="col">{$t('forms.name')}</th>
-				<th scope="col">{$t('forms.value')}</th>
-				<th scope="col" class="w-64 text-center"
-					>{$t('application.preview.need_during_buildtime')}</th
-				>
-				<th scope="col" class="w-96 text-center">{$t('forms.action')}</th>
-			</tr>
-		</thead>
-		<tbody>
-			{#each secrets as secret}
-				{#key secret.id}
-					<tr>
-						<Secret
-							name={secret.name}
-							value={secret.value}
-							isBuildSecret={secret.isBuildSecret}
-							on:refresh={refreshSecrets}
-						/>
-					</tr>
-				{/key}
-			{/each}
-			<tr>
-				<Secret isNewSecret on:refresh={refreshSecrets} />
-			</tr>
-		</tbody>
-	</table>
-	<h2 class="title my-6 font-bold">Paste .env file</h2>
-	<form on:submit|preventDefault={getValues} class="mb-12 w-full">
-		<textarea bind:value={batchSecrets} class="mb-2 min-h-[200px] w-full" />
-		<button class="btn btn-sm bg-applications" type="submit">Batch add secrets</button>
-	</form>
-</div>
+<form on:submit|preventDefault={getValues} class="mb-12 w-full">
+	<div class="flex flex-row border-b border-coolgray-500 mb-6 space-x-2 pt-10">
+		<div class="flex flex-row space-x-2">
+			<div class="title font-bold pb-3 ">Paste <code>.env</code> file</div>
+			<button type="submit" class="btn btn-sm bg-primary">Add Secrets in Batch</button>
+		</div>
+	</div>
+
+	<textarea
+		placeholder={`PORT=1337\nPASSWORD=supersecret`}
+		bind:value={batchSecrets}
+		class="mb-2 min-h-[200px] w-full"
+	/>
+</form>
diff --git a/apps/ui/src/routes/applications/[id]/storages.svelte b/apps/ui/src/routes/applications/[id]/storages.svelte
index c8847582d..6338deed3 100644
--- a/apps/ui/src/routes/applications/[id]/storages.svelte
+++ b/apps/ui/src/routes/applications/[id]/storages.svelte
@@ -5,7 +5,6 @@
 			const response = await get(`/applications/${params.id}/storages`);
 			return {
 				props: {
-					application: stuff.application,
 					...response
 				}
 			};
@@ -19,13 +18,12 @@
 </script>
 
 <script lang="ts">
-	export let application: any;
 	export let persistentStorages: any;
 	import { page } from '$app/stores';
 	import Storage from './_Storage.svelte';
 	import { get } from '$lib/api';
-	import SimpleExplainer from '$lib/components/SimpleExplainer.svelte';
 	import { t } from '$lib/translations';
+	import Explainer from '$lib/components/Explainer.svelte';
 
 	const { id } = $page.params;
 	async function refreshStorage() {
@@ -34,79 +32,22 @@
 	}
 </script>
 
-<div class="flex items-center space-x-2 p-5 px-6 font-bold">
-	<div class="-mb-5 flex-col">
-		<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
-			Persistent Storage
+<div class="w-full">
+	<div class="mx-auto w-full">
+		<div class="flex flex-row border-b border-coolgray-500 mb-6  space-x-2">
+			<div class="title font-bold pb-3">
+				Persistent Volumes <Explainer
+					position="dropdown-bottom"
+					explanation={$t('application.storage.persistent_storage_explainer')}
+				/>
+			</div>
 		</div>
-		<span class="text-xs">{application.name} </span>
+		<label for="name" class="pb-2 uppercase font-bold">name</label>
+		{#each persistentStorages as storage}
+			{#key storage.id}
+				<Storage on:refresh={refreshStorage} {storage} />
+			{/key}
+		{/each}
+		<Storage on:refresh={refreshStorage} isNew />
 	</div>
-	{#if application.gitSource?.htmlUrl && application.repository && application.branch}
-		<a
-			href="{application.gitSource.htmlUrl}/{application.repository}/tree/{application.branch}"
-			target="_blank"
-			class="w-10"
-		>
-			{#if application.gitSource?.type === 'gitlab'}
-				<svg viewBox="0 0 128 128" class="icons">
-					<path
-						fill="#FC6D26"
-						d="M126.615 72.31l-7.034-21.647L105.64 7.76c-.716-2.206-3.84-2.206-4.556 0l-13.94 42.903H40.856L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664 1.385 72.31a4.792 4.792 0 001.74 5.358L64 121.894l60.874-44.227a4.793 4.793 0 001.74-5.357"
-					/><path fill="#E24329" d="M64 121.894l23.144-71.23H40.856L64 121.893z" /><path
-						fill="#FC6D26"
-						d="M64 121.894l-23.144-71.23H8.42L64 121.893z"
-					/><path
-						fill="#FCA326"
-						d="M8.42 50.663L1.384 72.31a4.79 4.79 0 001.74 5.357L64 121.894 8.42 50.664z"
-					/><path
-						fill="#E24329"
-						d="M8.42 50.663h32.436L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664z"
-					/><path fill="#FC6D26" d="M64 121.894l23.144-71.23h32.437L64 121.893z" /><path
-						fill="#FCA326"
-						d="M119.58 50.663l7.035 21.647a4.79 4.79 0 01-1.74 5.357L64 121.894l55.58-71.23z"
-					/><path
-						fill="#E24329"
-						d="M119.58 50.663H87.145l13.94-42.902c.717-2.206 3.84-2.206 4.557 0l13.94 42.903z"
-					/>
-				</svg>
-			{:else if application.gitSource?.type === 'github'}
-				<svg viewBox="0 0 128 128" class="icons">
-					<g fill="#ffffff"
-						><path
-							fill-rule="evenodd"
-							clip-rule="evenodd"
-							d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"
-						/><path
-							d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm2.446 2.729c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zM31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm3.261 3.361c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm4.5 1.951c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm4.943.361c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm4.598-.782c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"
-						/></g
-					>
-				</svg>
-			{/if}
-		</a>
-	{/if}
-</div>
-
-<div class="mx-auto max-w-6xl rounded-xl px-6 pt-4">
-	<div class="flex justify-center py-4 text-center">
-		<SimpleExplainer customClass="w-full" text={$t('application.storage.persistent_storage_explainer')} />
-	</div>
-	<table class="mx-auto border-separate text-left">
-		<thead>
-			<tr class="h-12">
-				<th scope="col">{$t('forms.path')}</th>
-			</tr>
-		</thead>
-		<tbody>
-			{#each persistentStorages as storage}
-				{#key storage.id}
-					<tr>
-						<Storage on:refresh={refreshStorage} {storage} />
-					</tr>
-				{/key}
-			{/each}
-			<tr>
-				<Storage on:refresh={refreshStorage} isNew />
-			</tr>
-		</tbody>
-	</table>
 </div>
diff --git a/apps/ui/src/routes/applications/[id]/usage.svelte b/apps/ui/src/routes/applications/[id]/usage.svelte
new file mode 100644
index 000000000..f9919ecee
--- /dev/null
+++ b/apps/ui/src/routes/applications/[id]/usage.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { onDestroy, onMount } from 'svelte';
+	import { get } from '$lib/api';
+	import { status } from '$lib/store';
+
+	const { id } = $page.params;
+
+	let usageLoading = false;
+	let usage = {
+		MemUsage: 0,
+		CPUPerc: 0,
+		NetIO: 0
+	};
+	let usageInterval: any;
+
+	async function getUsage() {
+		if (usageLoading) return;
+		if (!$status.application.isRunning) return;
+		usageLoading = true;
+		const data = await get(`/applications/${id}/usage`);
+		usage = data.usage;
+		usageLoading = false;
+	}
+	onDestroy(() => {
+		clearInterval(usageInterval);
+	});
+	onMount(async () => {
+		await getUsage();
+		usageInterval = setInterval(async () => {
+			await getUsage();
+		}, 1000);
+	});
+</script>
+
+<div class="mx-auto w-full">
+	<div class="flex flex-row border-b border-coolgray-500 mb-6 space-x-2">
+		<div class="title font-bold pb-3">Monitoring</div>
+	</div>
+</div>
+<div class="mx-auto max-w-4xl px-6 py-4">
+	<div class="text-center">
+		<div class="stat w-64">
+			<div class="stat-title">Used Memory / Memory Limit</div>
+			<div class="stat-value text-xl">{usage?.MemUsage}</div>
+		</div>
+
+		<div class="stat w-64">
+			<div class="stat-title">Used CPU</div>
+			<div class="stat-value text-xl">{usage?.CPUPerc}</div>
+		</div>
+
+		<div class="stat w-64">
+			<div class="stat-title">Network IO</div>
+			<div class="stat-value text-xl">{usage?.NetIO}</div>
+		</div>
+	</div>
+</div>
diff --git a/apps/ui/src/routes/applications/[id]/utils.ts b/apps/ui/src/routes/applications/[id]/utils.ts
deleted file mode 100644
index 7805024e1..000000000
--- a/apps/ui/src/routes/applications/[id]/utils.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { post } from '$lib/api';
-import { t } from '$lib/translations';
-import { errorNotification } from '$lib/common';
-
-type Props = {
-	isNew: boolean;
-	name: string;
-	value: string;
-	isBuildSecret?: boolean;
-	isPRMRSecret?: boolean;
-	isNewSecret?: boolean;
-	applicationId: string;
-};
-
-export async function saveSecret({
-	isNew,
-	name,
-	value,
-	isBuildSecret,
-	isPRMRSecret,
-	isNewSecret,
-	applicationId
-}: Props): Promise<void> {
-	if (!name) return errorNotification(`${t.get('forms.name')} ${t.get('forms.is_required')}`);
-	if (!value && isNew) return errorNotification(`${t.get('forms.value')} ${t.get('forms.is_required')}`);
-	try {
-		await post(`/applications/${applicationId}/secrets`, {
-			name,
-			value,
-			isBuildSecret,
-			isPRMRSecret,
-			isNew: isNew || false
-		});
-		if (isNewSecret) {
-			name = '';
-			value = '';
-			isBuildSecret = false;
-		}
-	} catch (error) {
-		throw error
-	}
-}
diff --git a/apps/ui/src/routes/applications/_index.svelte b/apps/ui/src/routes/applications/_index.svelte
index 60644e16d..4d30ed835 100644
--- a/apps/ui/src/routes/applications/_index.svelte
+++ b/apps/ui/src/routes/applications/_index.svelte
@@ -44,8 +44,8 @@
 	}
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl">{$t('index.applications')}</div>
+<nav class="header">
+	<h1 class="mr-4 text-2xl font-bold">{$t('index.applications')}</h1>
 	{#if $appSession.isAdmin}
 		<button on:click={newApplication} class="btn btn-square btn-sm bg-applications">
 			<svg
@@ -63,8 +63,9 @@
 			>
 		</button>
 	{/if}
-</div>
-<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
+</nav>
+<br />
+<div class="flex flex-col justify-center mt-10 pb-12 lg:pt-16 sm:pb-16">
 	{#if !applications || ownApplications.length === 0}
 		<div class="flex-col">
 			<div class="text-center text-xl font-bold">{$t('application.no_applications_found')}</div>
diff --git a/apps/ui/src/routes/databases/[id]/_Databases/_CouchDb.svelte b/apps/ui/src/routes/databases/[id]/_Databases/_CouchDb.svelte
index ee4c433fe..b6abcf736 100644
--- a/apps/ui/src/routes/databases/[id]/_Databases/_CouchDb.svelte
+++ b/apps/ui/src/routes/databases/[id]/_Databases/_CouchDb.svelte
@@ -5,13 +5,11 @@
 </script>
 
 <div class="flex space-x-1 py-5 font-bold">
-	<div class="title">CouchDB</div>
+	<h1 class="title">CouchDB</h1>
 </div>
-<div class="space-y-2 px-10">
+<div class="space-y-2 lg:px-10 px-2">
 	<div class="grid grid-cols-2 items-center">
-		<label for="defaultDatabase" class="text-base font-bold text-stone-100"
-			>{$t('database.default_database')}</label
-		>
+		<label for="defaultDatabase">{$t('database.default_database')}</label>
 		<CopyPasswordField
 			required
 			readonly={database.defaultDatabase}
@@ -23,7 +21,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="dbUser" class="text-base font-bold text-stone-100">{$t('forms.user')}</label>
+		<label for="dbUser">{$t('forms.user')}</label>
 		<CopyPasswordField
 			readonly
 			disabled
@@ -34,9 +32,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="dbUserPassword" class="text-base font-bold text-stone-100"
-			>{$t('forms.password')}</label
-		>
+		<label for="dbUserPassword">{$t('forms.password')}</label>
 		<CopyPasswordField
 			readonly
 			disabled
@@ -48,7 +44,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="rootUser" class="text-base font-bold text-stone-100">{$t('forms.root_user')}</label>
+		<label for="rootUser">{$t('forms.root_user')}</label>
 		<CopyPasswordField
 			readonly
 			disabled
@@ -59,9 +55,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="rootUserPassword" class="text-base font-bold text-stone-100"
-			>{$t('forms.roots_password')}</label
-		>
+		<label for="rootUserPassword">{$t('forms.roots_password')}</label>
 		<CopyPasswordField
 			readonly
 			disabled
diff --git a/apps/ui/src/routes/databases/[id]/_Databases/_Databases.svelte b/apps/ui/src/routes/databases/[id]/_Databases/_Databases.svelte
index 14a88b00b..b3601a9e9 100644
--- a/apps/ui/src/routes/databases/[id]/_Databases/_Databases.svelte
+++ b/apps/ui/src/routes/databases/[id]/_Databases/_Databases.svelte
@@ -107,10 +107,10 @@
 	}
 </script>
 
-<div class="mx-auto max-w-4xl px-6">
+<div class="mx-auto max-w-6xl p-4">
 	<form on:submit|preventDefault={handleSubmit} class="py-4">
-		<div class="flex space-x-1 pb-5">
-			<div class="title">{$t('general')}</div>
+		<div class="flex space-x-1 pb-5 items-center">
+			<h1 class="title">{$t('general')}</h1>
 			{#if $appSession.isAdmin}
 				<button
 					type="submit"
@@ -121,106 +121,94 @@
 				>
 			{/if}
 		</div>
-
-		<div class="grid grid-flow-row gap-2 px-10">
-			<div class="grid grid-cols-2 items-center">
-				<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
-				<input
-					readonly={!$appSession.isAdmin}
-					name="name"
-					id="name"
-					bind:value={database.name}
-					required
-				/>
-			</div>
-			<div class="grid grid-cols-2 items-center">
-				<label for="destination" class="text-base font-bold text-stone-100"
-					>{$t('application.destination')}</label
-				>
-				{#if database.destinationDockerId}
-					<div class="no-underline">
-						<input
-							value={database.destinationDocker.name}
-							id="destination"
-							disabled
-							readonly
-							class="bg-transparent "
-						/>
-					</div>
-				{/if}
-			</div>
-
-			<div class="grid grid-cols-2 items-center">
-				<label for="version" class="text-base font-bold text-stone-100">Version / Tag</label>
-				<a
-					href={$appSession.isAdmin && !$status.database.isRunning
-						? `/databases/${id}/configuration/version?from=/databases/${id}`
-						: ''}
-					class="no-underline"
-				>
+		<div class="grid gap-2 grid-cols-2 auto-rows-max lg:px-10 px-2">
+			<label for="name">{$t('forms.name')}</label>
+			<input
+				class="w-full"
+				readonly={!$appSession.isAdmin}
+				name="name"
+				id="name"
+				bind:value={database.name}
+				required
+			/>
+			<label for="destination">{$t('application.destination')}</label>
+			{#if database.destinationDockerId}
+				<div class="no-underline">
 					<input
-						value={database.version}
+						value={database.destinationDocker.name}
+						id="destination"
+						disabled
 						readonly
-						disabled={$status.database.isRunning || $status.database.initialLoading}
-						class:cursor-pointer={!$status.database.isRunning}
-					/></a
-				>
-			</div>
-		</div>
-
-		<div class="grid grid-flow-row gap-2 px-10 pt-2">
-			<div class="grid grid-cols-2 items-center">
-				<label for="host" class="text-base font-bold text-stone-100">{$t('forms.host')}</label>
-				<CopyPasswordField
-					placeholder={$t('forms.generated_automatically_after_start')}
-					isPasswordField={false}
-					readonly
-					disabled
-					id="host"
-					name="host"
-					value={database.id}
-				/>
-			</div>
-			<div class="grid grid-cols-2 items-center">
-				<label for="publicPort" class="text-base font-bold text-stone-100">{$t('forms.port')}</label
-				>
-				<CopyPasswordField
-					placeholder={$t('database.generated_automatically_after_set_to_public')}
-					id="publicPort"
-					readonly
-					disabled
-					name="publicPort"
-					value={publicLoading ? 'Loading...' : $status.database.isPublic ? database.publicPort : privatePort}
-				/>
-			</div>
-		</div>
-		<div class="grid grid-flow-row gap-2">
-			{#if database.type === 'mysql'}
-				<MySql bind:database />
-			{:else if database.type === 'postgresql'}
-				<PostgreSql bind:database />
-			{:else if database.type === 'mongodb'}
-				<MongoDb bind:database />
-			{:else if database.type === 'mariadb'}
-				<MariaDb bind:database />
-			{:else if database.type === 'redis'}
-				<Redis bind:database />
-			{:else if database.type === 'couchdb'}
-				<CouchDb {database} />
-			{:else if database.type === 'edgedb'}
-				<EdgeDB {database} />
-			{/if}
-			<div class="grid grid-cols-2 items-center px-10 pb-8">
-				<div>
-					<label for="url" class="text-base font-bold text-stone-100"
-						>{$t('database.connection_string')}
-						{#if !$status.database.isPublic && database.destinationDocker.remoteEngine}
-							<Explainer
-								explanation="You can only access the database with this URL if your application is deployed to the same Destination."
-							/>
-						{/if}</label
-					>
+						class="bg-transparent w-full"
+					/>
 				</div>
+			{/if}
+			<label for="version">Version / Tag</label>
+			<a
+				href={$appSession.isAdmin && !$status.database.isRunning
+					? `/databases/${id}/configuration/version?from=/databases/${id}`
+					: ''}
+				class="no-underline"
+			>
+				<input
+					class="w-full"
+					value={database.version}
+					readonly
+					disabled={$status.database.isRunning || $status.database.initialLoading}
+					class:cursor-pointer={!$status.database.isRunning}
+				/></a
+			>
+			<label for="host">{$t('forms.host')}</label>
+			<CopyPasswordField
+				placeholder={$t('forms.generated_automatically_after_start')}
+				isPasswordField={false}
+				readonly
+				disabled
+				id="host"
+				name="host"
+				value={database.id}
+			/>
+			<label for="publicPort">{$t('forms.port')}</label>
+			<CopyPasswordField
+				placeholder={$t('database.generated_automatically_after_set_to_public')}
+				id="publicPort"
+				readonly
+				disabled
+				name="publicPort"
+				value={publicLoading
+					? 'Loading...'
+					: $status.database.isPublic
+					? database.publicPort
+					: privatePort}
+			/>
+		</div>
+		{#if database.type === 'mysql'}
+			<MySql bind:database />
+		{:else if database.type === 'postgresql'}
+			<PostgreSql bind:database />
+		{:else if database.type === 'mongodb'}
+			<MongoDb bind:database />
+		{:else if database.type === 'mariadb'}
+			<MariaDb bind:database />
+		{:else if database.type === 'redis'}
+			<Redis bind:database />
+		{:else if database.type === 'couchdb'}
+			<CouchDb {database} />
+		{:else if database.type === 'edgedb'}
+			<EdgeDB {database} />
+		{/if}
+		<div class="flex flex-col space-y-2 mt-5">
+			<div>
+				<label class="px-2" for="url"
+					>{$t('database.connection_string')}
+					{#if !$status.database.isPublic && database.destinationDocker.remoteEngine}
+						<Explainer
+							explanation="You can only access the database with this URL if your application is deployed to the same Destination."
+						/>
+					{/if}</label
+				>
+			</div>
+			<div class="lg:px-10 px-2">
 				<CopyPasswordField
 					textarea={true}
 					placeholder={$t('forms.generated_automatically_after_start')}
@@ -235,31 +223,27 @@
 		</div>
 	</form>
 	<div class="flex space-x-1 pb-5 font-bold">
-		<div class="title">{$t('application.features')}</div>
+		<h1 class="title">{$t('application.features')}</h1>
 	</div>
-	<div class="px-10 pb-10">
-		<div class="grid grid-cols-2 items-center">
-			<Setting
-				id="isPublic"
-				loading={publicLoading}
-				bind:setting={$status.database.isPublic}
-				on:click={() => changeSettings('isPublic')}
-				title={$t('database.set_public')}
-				description={$t('database.warning_database_public')}
-				disabled={!$status.database.isRunning}
-			/>
-		</div>
+	<div class="grid gap-2 grid-cols-2 auto-rows-max lg:px-10 px-2">
+		<Setting
+			id="isPublic"
+			loading={publicLoading}
+			bind:setting={$status.database.isPublic}
+			on:click={() => changeSettings('isPublic')}
+			title={$t('database.set_public')}
+			description={$t('database.warning_database_public')}
+			disabled={!$status.database.isRunning}
+		/>
 		{#if database.type === 'redis'}
-			<div class="grid grid-cols-2 items-center">
-				<Setting
-					id="appendOnly"
-					loading={publicLoading}
-					bind:setting={appendOnly}
-					on:click={() => changeSettings('appendOnly')}
-					title={$t('database.change_append_only_mode')}
-					description={$t('database.warning_append_only')}
-				/>
-			</div>
+			<Setting
+				id="appendOnly"
+				loading={publicLoading}
+				bind:setting={appendOnly}
+				on:click={() => changeSettings('appendOnly')}
+				title={$t('database.change_append_only_mode')}
+				description={$t('database.warning_append_only')}
+			/>
 		{/if}
 	</div>
 </div>
diff --git a/apps/ui/src/routes/databases/[id]/_Databases/_EdgeDB.svelte b/apps/ui/src/routes/databases/[id]/_Databases/_EdgeDB.svelte
index 23110c1f1..9c08e18fc 100644
--- a/apps/ui/src/routes/databases/[id]/_Databases/_EdgeDB.svelte
+++ b/apps/ui/src/routes/databases/[id]/_Databases/_EdgeDB.svelte
@@ -9,11 +9,9 @@
 <div class="flex space-x-1 py-5 font-bold">
 	<div class="title">EdgeDB</div>
 </div>
-<div class="space-y-2 px-10">
+<div class="space-y-2 lg:px-10 px-2">
 	<div class="grid grid-cols-2 items-center">
-		<label for="defaultDatabase" class="text-base font-bold text-stone-100"
-			>{$t('database.default_database')}</label
-		>
+		<label for="defaultDatabase">{$t('database.default_database')}</label>
 		<CopyPasswordField
 			required
 			readonly={database.defaultDatabase}
@@ -25,7 +23,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="rootUser" class="text-base font-bold text-stone-100">{$t('forms.root_user')}</label>
+		<label for="rootUser">{$t('forms.root_user')}</label>
 		<CopyPasswordField
 			readonly
 			disabled
@@ -36,7 +34,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="rootUser" class="text-base font-bold text-stone-100"
+		<label for="rootUser"
 			>Root Password <Explainer
 				explanation="Could be changed while the database is running."
 			/></label
diff --git a/apps/ui/src/routes/databases/[id]/_Databases/_MariaDB.svelte b/apps/ui/src/routes/databases/[id]/_Databases/_MariaDB.svelte
index 516e887e6..95389a6aa 100644
--- a/apps/ui/src/routes/databases/[id]/_Databases/_MariaDB.svelte
+++ b/apps/ui/src/routes/databases/[id]/_Databases/_MariaDB.svelte
@@ -7,11 +7,11 @@
 </script>
 
 <div class="flex space-x-1 py-5 font-bold">
-	<div class="title">MariaDB</div>
+	<h1 class="title">MariaDB</h1>
 </div>
-<div class="space-y-2 px-10">
+<div class="space-y-2 lg:px-10 px-2">
 	<div class="grid grid-cols-2 items-center">
-		<label for="defaultDatabase" class="text-base font-bold text-stone-100"
+		<label for="defaultDatabase" 
 			>{$t('database.default_database')}</label
 		>
 		<CopyPasswordField
@@ -25,7 +25,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="dbUser" class="text-base font-bold text-stone-100">{$t('forms.user')}</label>
+		<label for="dbUser" >{$t('forms.user')}</label>
 		<CopyPasswordField
 			readonly
 			disabled
@@ -36,7 +36,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="dbUserPassword" class="text-base font-bold text-stone-100"
+		<label for="dbUserPassword" 
 			>{$t('forms.password')}
 			<Explainer explanation="Could be changed while the database is running." /></label
 		>
@@ -51,7 +51,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="rootUser" class="text-base font-bold text-stone-100">{$t('forms.root_user')}</label>
+		<label for="rootUser" >{$t('forms.root_user')}</label>
 		<CopyPasswordField
 			readonly
 			disabled
@@ -62,8 +62,9 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="rootUserPassword" class="text-base font-bold text-stone-100"
-			>{$t('forms.roots_password')} <Explainer explanation="Could be changed while the database is running." /></label
+		<label for="rootUserPassword" 
+			>{$t('forms.roots_password')}
+			<Explainer explanation="Could be changed while the database is running." /></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}
diff --git a/apps/ui/src/routes/databases/[id]/_Databases/_MongoDB.svelte b/apps/ui/src/routes/databases/[id]/_Databases/_MongoDB.svelte
index b93c10bf5..be9f2aee2 100644
--- a/apps/ui/src/routes/databases/[id]/_Databases/_MongoDB.svelte
+++ b/apps/ui/src/routes/databases/[id]/_Databases/_MongoDB.svelte
@@ -7,11 +7,11 @@
 </script>
 
 <div class="flex space-x-1 py-5 font-bold">
-	<div class="title">MongoDB</div>
+	<h1 class="title">MongoDB</h1>
 </div>
-<div class="space-y-2 px-10">
+<div class="space-y-2 lg:px-10 px-2">
 	<div class="grid grid-cols-2 items-center">
-		<label for="rootUser" class="text-base font-bold text-stone-100">{$t('forms.root_user')}</label>
+		<label for="rootUser">{$t('forms.root_user')}</label>
 		<CopyPasswordField
 			placeholder={$t('forms.generated_automatically_after_start')}
 			id="rootUser"
@@ -22,7 +22,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="rootUserPassword" class="text-base font-bold text-stone-100"
+		<label for="rootUserPassword"
 			>{$t('forms.roots_password')}
 			<Explainer explanation="Could be changed while the database is running." /></label
 		>
diff --git a/apps/ui/src/routes/databases/[id]/_Databases/_MySQL.svelte b/apps/ui/src/routes/databases/[id]/_Databases/_MySQL.svelte
index 3405bd125..886f1cbd2 100644
--- a/apps/ui/src/routes/databases/[id]/_Databases/_MySQL.svelte
+++ b/apps/ui/src/routes/databases/[id]/_Databases/_MySQL.svelte
@@ -7,13 +7,11 @@
 </script>
 
 <div class="flex space-x-1 py-5 font-bold">
-	<div class="title">MySQL</div>
+	<h1 class="title">MySQL</h1>
 </div>
-<div class="space-y-2 px-10">
+<div class="space-y-2 lg:px-10 px-2">
 	<div class="grid grid-cols-2 items-center">
-		<label for="defaultDatabase" class="text-base font-bold text-stone-100"
-			>{$t('database.default_database')}</label
-		>
+		<label for="defaultDatabase">{$t('database.default_database')}</label>
 		<CopyPasswordField
 			required
 			readonly={database.defaultDatabase}
@@ -25,7 +23,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="dbUser" class="text-base font-bold text-stone-100">{$t('forms.user')}</label>
+		<label for="dbUser">{$t('forms.user')}</label>
 		<CopyPasswordField
 			readonly
 			disabled
@@ -36,7 +34,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="dbUserPassword" class="text-base font-bold text-stone-100"
+		<label for="dbUserPassword"
 			>{$t('forms.password')}
 			<Explainer explanation="Could be changed while the database is running." /></label
 		>
@@ -51,7 +49,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="rootUser" class="text-base font-bold text-stone-100">{$t('forms.root_user')}</label>
+		<label for="rootUser">{$t('forms.root_user')}</label>
 		<CopyPasswordField
 			readonly
 			disabled
@@ -62,7 +60,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="rootUserPassword" class="text-base font-bold text-stone-100"
+		<label for="rootUserPassword"
 			>{$t('forms.roots_password')}
 			<Explainer explanation="Could be changed while the database is running." /></label
 		>
diff --git a/apps/ui/src/routes/databases/[id]/_Databases/_PostgreSQL.svelte b/apps/ui/src/routes/databases/[id]/_Databases/_PostgreSQL.svelte
index 715ca3e1a..c1112a54c 100644
--- a/apps/ui/src/routes/databases/[id]/_Databases/_PostgreSQL.svelte
+++ b/apps/ui/src/routes/databases/[id]/_Databases/_PostgreSQL.svelte
@@ -7,13 +7,11 @@
 </script>
 
 <div class="flex space-x-1 py-5 font-bold">
-	<div class="title">PostgreSQL</div>
+	<h1 class="title">PostgreSQL</h1>
 </div>
-<div class="space-y-2 px-10">
+<div class="space-y-2 lg:px-10 px-2">
 	<div class="grid grid-cols-2 items-center">
-		<label for="defaultDatabase" class="text-base font-bold text-stone-100"
-			>{$t('database.default_database')}</label
-		>
+		<label for="defaultDatabase">{$t('database.default_database')}</label>
 		<CopyPasswordField
 			required
 			readonly={database.defaultDatabase}
@@ -25,7 +23,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="rootUser" class="text-base font-bold text-stone-100"
+		<label for="rootUser"
 			>Postgres User Password <Explainer
 				explanation="Could be changed while the database is running."
 			/></label
@@ -41,7 +39,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="dbUser" class="text-base font-bold text-stone-100">{$t('forms.user')}</label>
+		<label for="dbUser">{$t('forms.user')}</label>
 		<CopyPasswordField
 			readonly
 			disabled
@@ -52,7 +50,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center">
-		<label for="dbUserPassword" class="text-base font-bold text-stone-100"
+		<label for="dbUserPassword"
 			>{$t('forms.password')}
 			<Explainer explanation="Could be changed while the database is running." /></label
 		>
diff --git a/apps/ui/src/routes/databases/[id]/_Databases/_Redis.svelte b/apps/ui/src/routes/databases/[id]/_Databases/_Redis.svelte
index 5e47684d0..a3fef3d72 100644
--- a/apps/ui/src/routes/databases/[id]/_Databases/_Redis.svelte
+++ b/apps/ui/src/routes/databases/[id]/_Databases/_Redis.svelte
@@ -7,11 +7,11 @@
 </script>
 
 <div class="flex space-x-1 py-5 font-bold">
-	<div class="title">Redis</div>
+	<h1 class="title">Redis</h1>
 </div>
-<div class="space-y-2 px-10">
+<div class="space-y-2 lg:px-10 px-2">
 	<div class="grid grid-cols-2 items-center">
-		<label for="dbUserPassword" class="text-base font-bold text-stone-100"
+		<label for="dbUserPassword" 
 			>{$t('forms.password')}
 			<Explainer explanation="Could be changed while the database is running." /></label
 		>
diff --git a/apps/ui/src/routes/databases/[id]/__layout.svelte b/apps/ui/src/routes/databases/[id]/__layout.svelte
index 322ad590d..9c8604d25 100644
--- a/apps/ui/src/routes/databases/[id]/__layout.svelte
+++ b/apps/ui/src/routes/databases/[id]/__layout.svelte
@@ -19,7 +19,7 @@
 			if (id !== 'new' && (!database || Object.entries(database).length === 0)) {
 				return {
 					status: 302,
-					redirect: '/databases'
+					redirect: '/'
 				};
 			}
 			const configurationPhase = checkConfiguration(database);
@@ -62,6 +62,7 @@
 	import DeleteIcon from '$lib/components/DeleteIcon.svelte';
 	import { onDestroy, onMount } from 'svelte';
 	import Tooltip from '$lib/components/Tooltip.svelte';
+	import DatabaseLinks from './_DatabaseLinks.svelte';
 	const { id } = $page.params;
 
 	$status.database.isPublic = database.settings.isPublic || false;
@@ -149,104 +150,123 @@
 </script>
 
 {#if id !== 'new'}
-	<nav class="nav-side">
-		{#if database.type && database.destinationDockerId && database.version}
-			{#if $status.database.isExited}
-				<a
-					id="exited"
-					href={!$status.database.isRunning ? `/databases/${id}/logs` : null}
-					class="icons bg-transparent text-sm flex items-center text-red-500 tooltip-error"
-					sveltekit:prefetch
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="w-6 h-6"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentcolor"
-						fill="none"
-						stroke-linecap="round"
-						stroke-linejoin="round"
+	<nav class="header lg:flex-row flex-col-reverse">
+		<div class="flex flex-row space-x-2 font-bold pt-10 lg:pt-0">
+			<div class="flex flex-col items-center justify-center">
+				<div class="title">
+					{#if $page.url.pathname === `/databases/${id}`}
+						Configurations
+					{:else if $page.url.pathname === `/databases/${id}/logs`}
+						Database Logs
+					{:else if $page.url.pathname === `/databases/${id}/configuration/type`}
+						Select a Database Type
+					{:else if $page.url.pathname === `/databases/${id}/configuration/version`}
+						Select a Database Version
+					{:else if $page.url.pathname === `/databases/${id}/configuration/destination`}
+						Select a Destination
+					{/if}
+				</div>
+			</div>
+			<DatabaseLinks {database} />
+		</div>
+		<div class="lg:block hidden flex-1" />
+		<div class="flex flex-row flex-wrap space-x-3 justify-center lg:justify-start lg:py-0">
+			{#if database.type && database.destinationDockerId && database.version}
+				{#if $status.database.isExited}
+					<a
+						id="exited"
+						href={!$status.database.isRunning ? `/databases/${id}/logs` : null}
+						class="icons bg-transparent text-red-500 tooltip-error"
+						sveltekit:prefetch
 					>
-						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-						<path
-							d="M8.7 3h6.6c.3 0 .5 .1 .7 .3l4.7 4.7c.2 .2 .3 .4 .3 .7v6.6c0 .3 -.1 .5 -.3 .7l-4.7 4.7c-.2 .2 -.4 .3 -.7 .3h-6.6c-.3 0 -.5 -.1 -.7 -.3l-4.7 -4.7c-.2 -.2 -.3 -.4 -.3 -.7v-6.6c0 -.3 .1 -.5 .3 -.7l4.7 -4.7c.2 -.2 .4 -.3 .7 -.3z"
-						/>
-						<line x1="12" y1="8" x2="12" y2="12" />
-						<line x1="12" y1="16" x2="12.01" y2="16" />
-					</svg>
-				</a>
-				<Tooltip triggeredBy="#exited">{'Service exited with an error!'}</Tooltip>
-			{/if}
-			{#if $status.database.initialLoading}
-				<button
-					class="icons flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out hover:bg-transparent"
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-6 w-6"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
-						fill="none"
-						stroke-linecap="round"
-						stroke-linejoin="round"
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="w-6 h-6"
+							viewBox="0 0 24 24"
+							stroke-width="1.5"
+							stroke="currentcolor"
+							fill="none"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+							<path
+								d="M8.7 3h6.6c.3 0 .5 .1 .7 .3l4.7 4.7c.2 .2 .3 .4 .3 .7v6.6c0 .3 -.1 .5 -.3 .7l-4.7 4.7c-.2 .2 -.4 .3 -.7 .3h-6.6c-.3 0 -.5 -.1 -.7 -.3l-4.7 -4.7c-.2 -.2 -.3 -.4 -.3 -.7v-6.6c0 -.3 .1 -.5 .3 -.7l4.7 -4.7c.2 -.2 .4 -.3 .7 -.3z"
+							/>
+							<line x1="12" y1="8" x2="12" y2="12" />
+							<line x1="12" y1="16" x2="12.01" y2="16" />
+						</svg>
+					</a>
+					<Tooltip triggeredBy="#exited">{'Service exited with an error!'}</Tooltip>
+				{/if}
+				{#if $status.database.initialLoading}
+					<button class="icons flex animate-spin  duration-500 ease-in-out">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-6 w-6"
+							viewBox="0 0 24 24"
+							stroke-width="1.5"
+							stroke="currentColor"
+							fill="none"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+							<path d="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5" />
+							<line x1="5.63" y1="7.16" x2="5.63" y2="7.17" />
+							<line x1="4.06" y1="11" x2="4.06" y2="11.01" />
+							<line x1="4.63" y1="15.1" x2="4.63" y2="15.11" />
+							<line x1="7.16" y1="18.37" x2="7.16" y2="18.38" />
+							<line x1="11" y1="19.94" x2="11" y2="19.95" />
+						</svg>
+					</button>
+				{:else if $status.database.isRunning}
+					<button
+						id="stop"
+						on:click={stopDatabase}
+						type="submit"
+						disabled={!$appSession.isAdmin}
+						class="icons bg-transparent text-red-500"
 					>
-						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-						<path d="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5" />
-						<line x1="5.63" y1="7.16" x2="5.63" y2="7.17" />
-						<line x1="4.06" y1="11" x2="4.06" y2="11.01" />
-						<line x1="4.63" y1="15.1" x2="4.63" y2="15.11" />
-						<line x1="7.16" y1="18.37" x2="7.16" y2="18.38" />
-						<line x1="11" y1="19.94" x2="11" y2="19.95" />
-					</svg>
-				</button>
-			{:else if $status.database.isRunning}
-				<button
-					id="stop"
-					on:click={stopDatabase}
-					type="submit"
-					disabled={!$appSession.isAdmin}
-					class="icons bg-transparent text-sm flex items-center space-x-2 text-red-500"
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="w-6 h-6"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
-						fill="none"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					>
-						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-						<rect x="6" y="5" width="4" height="14" rx="1" />
-						<rect x="14" y="5" width="4" height="14" rx="1" />
-					</svg>
-				</button>
-				<Tooltip triggeredBy="#stop">{'Stop'}</Tooltip>
-			{:else}
-				<button
-					id="start"
-					on:click={startDatabase}
-					type="submit"
-					disabled={!$appSession.isAdmin}
-					class="icons bg-transparent text-sm flex items-center space-x-2 text-green-500"
-					><svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="w-6 h-6"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
-						fill="none"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					>
-						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-						<path d="M7 4v16l13 -8z" />
-					</svg>
-				</button>
-				<Tooltip triggeredBy="#start">{'Start'}</Tooltip>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="w-6 h-6"
+							viewBox="0 0 24 24"
+							stroke-width="1.5"
+							stroke="currentColor"
+							fill="none"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+							<rect x="6" y="5" width="4" height="14" rx="1" />
+							<rect x="14" y="5" width="4" height="14" rx="1" />
+						</svg>
+					</button>
+					<Tooltip triggeredBy="#stop">{'Stop'}</Tooltip>
+				{:else}
+					<button
+						id="start"
+						on:click={startDatabase}
+						type="submit"
+						disabled={!$appSession.isAdmin}
+						class="icons bg-transparent text-sm flex items-center space-x-2 text-green-500"
+						><svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="w-6 h-6"
+							viewBox="0 0 24 24"
+							stroke-width="1.5"
+							stroke="currentColor"
+							fill="none"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+							<path d="M7 4v16l13 -8z" />
+						</svg>
+					</button>
+					<Tooltip triggeredBy="#start">{'Start'}</Tooltip>
+				{/if}
 			{/if}
 			<div class="border border-stone-700 h-8" />
 			<a
@@ -282,34 +302,6 @@
 				></a
 			>
 			<Tooltip triggeredBy="#configuration">{'Configuration'}</Tooltip>
-			<a
-				href="/databases/{id}/secrets"
-				sveltekit:prefetch
-				class="hover:text-pink-500 rounded"
-				class:text-pink-500={$page.url.pathname === `/databases/${id}/secrets`}
-				class:bg-coolgray-500={$page.url.pathname === `/databases/${id}/secrets`}
-			>
-				<button id="secrets" disabled={$isDeploymentEnabled} class="icons bg-transparent text-sm ">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="w-6 h-6"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
-						fill="none"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					>
-						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-						<path
-							d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3"
-						/>
-						<circle cx="12" cy="11" r="1" />
-						<line x1="12" y1="12" x2="12" y2="14.5" />
-					</svg></button
-				></a
-			>
-			<Tooltip triggeredBy="#secrets">Secrets</Tooltip>
 			<div class="border border-stone-700 h-8" />
 			<a
 				id="databaselogs"
@@ -340,29 +332,28 @@
 				></a
 			>
 			<Tooltip triggeredBy="#databaselogs">{'Logs'}</Tooltip>
-		{/if}
+			{#if forceDelete}
+				<button
+					on:click={() => deleteDatabase(true)}
+					type="submit"
+					disabled={!$appSession.isAdmin}
+					class:hover:text-red-500={$appSession.isAdmin}
+					class="icons bg-transparent text-sm"
+				>
+					Force Delete</button
+				>{:else}
+				<button
+					id="delete"
+					on:click={() => deleteDatabase(false)}
+					type="submit"
+					disabled={!$appSession.isAdmin}
+					class:hover:text-red-500={$appSession.isAdmin}
+					class="icons bg-transparent text-sm"><DeleteIcon /></button
+				>
+			{/if}
 
-		{#if forceDelete}
-			<button
-				on:click={() => deleteDatabase(true)}
-				type="submit"
-				disabled={!$appSession.isAdmin}
-				class:hover:text-red-500={$appSession.isAdmin}
-				class="icons bg-transparent text-sm"
-			>
-				Force Delete</button
-			>{:else}
-			<button
-				id="delete"
-				on:click={() => deleteDatabase(false)}
-				type="submit"
-				disabled={!$appSession.isAdmin}
-				class:hover:text-red-500={$appSession.isAdmin}
-				class="icons bg-transparent text-sm"><DeleteIcon /></button
-			>
-		{/if}
-
-		<Tooltip triggeredBy="#delete">{'Delete'}</Tooltip>
+			<Tooltip triggeredBy="#delete" placement="left">Delete</Tooltip>
+		</div>
 	</nav>
 {/if}
 <slot />
diff --git a/apps/ui/src/routes/databases/[id]/configuration/destination.svelte b/apps/ui/src/routes/databases/[id]/configuration/destination.svelte
index 2e5ae3a1c..517673c6c 100644
--- a/apps/ui/src/routes/databases/[id]/configuration/destination.svelte
+++ b/apps/ui/src/routes/databases/[id]/configuration/destination.svelte
@@ -53,11 +53,6 @@
 	});
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">
-		{$t('application.configuration.configure_destination')}
-	</div>
-</div>
 <div class="flex justify-center">
 	{#if !destinations || destinations.length === 0}
 		<div class="flex-col">
diff --git a/apps/ui/src/routes/databases/[id]/configuration/type.svelte b/apps/ui/src/routes/databases/[id]/configuration/type.svelte
index 148b5a3f7..256493102 100644
--- a/apps/ui/src/routes/databases/[id]/configuration/type.svelte
+++ b/apps/ui/src/routes/databases/[id]/configuration/type.svelte
@@ -47,10 +47,6 @@
 	}
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">{$t('database.select_database_type')}</div>
-</div>
-
 <div class="flex flex-wrap justify-center">
 	{#each types as type}
 		<div class="p-2">
diff --git a/apps/ui/src/routes/databases/[id]/configuration/version.svelte b/apps/ui/src/routes/databases/[id]/configuration/version.svelte
index b052903bb..202f625bb 100644
--- a/apps/ui/src/routes/databases/[id]/configuration/version.svelte
+++ b/apps/ui/src/routes/databases/[id]/configuration/version.svelte
@@ -46,9 +46,6 @@
 	}
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">{$t('database.select_database_version')}</div>
-</div>
 {#if from}
 	<div class="pb-10 text-center">
 		Warning: you are about to change the version of this database.<br />This could cause problem
diff --git a/apps/ui/src/routes/databases/[id]/index.svelte b/apps/ui/src/routes/databases/[id]/index.svelte
index cb70d1eb9..65bf736cd 100644
--- a/apps/ui/src/routes/databases/[id]/index.svelte
+++ b/apps/ui/src/routes/databases/[id]/index.svelte
@@ -48,18 +48,7 @@
 	});
 </script>
 
-<div class="flex h-20 items-center space-x-2 p-5 px-6 font-bold">
-	<div class="-mb-5 flex-col">
-		<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
-			Configuration
-		</div>
-		<span class="text-xs">{database.name}</span>
-	</div>
-	<DatabaseLinks {database} />
-</div>
-
-<div class="mx-auto max-w-4xl px-6 py-4">
-	<div class="text-2xl font-bold">Database Usage</div>
+<div class="mx-auto max-w-6xl p-5">
 	<div class="text-center">
 		<div class="stat w-64">
 			<div class="stat-title">Used Memory / Memory Limit</div>
diff --git a/apps/ui/src/routes/databases/[id]/logs/index.svelte b/apps/ui/src/routes/databases/[id]/logs/index.svelte
index 0a296487f..662afae36 100644
--- a/apps/ui/src/routes/databases/[id]/logs/index.svelte
+++ b/apps/ui/src/routes/databases/[id]/logs/index.svelte
@@ -91,14 +91,6 @@
 	}
 </script>
 
-<div class="flex h-20 items-center space-x-2 p-5 px-6 font-bold">
-	<div class="-mb-5 flex-col">
-		<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
-			Database Logs
-		</div>
-		<span class="text-xs">{database.name}</span>
-	</div>
-</div>
 <div class="flex flex-row justify-center space-x-2 px-10 pt-6">
 	{#if logs.length === 0}
 		<div class="text-xl font-bold tracking-tighter">{$t('application.build.waiting_logs')}</div>
@@ -134,16 +126,10 @@
 				</button>
 				<Tooltip triggeredBy="#follow">Follow Logs</Tooltip>
 			</div>
-			<div
-				class="font-mono w-full leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 py-5 px-6 whitespace-pre-wrap break-words overflow-auto max-h-[80vh] -mt-12 overflow-y-scroll scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200"
-				bind:this={logsEl}
-				on:scroll={detect}
-			>
-				<div class="px-2 pr-14">
-					{#each logs as log}
-						{log + '\n'}
-					{/each}
-				</div>
+			<div class="font-mono w-full rounder bg-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded-md mb-20 flex flex-col whitespace-nowrap -mt-12 scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1 lg:text-base text-[10px]">
+				{#each logs as log}
+					<p>{log + '\n'}</p>
+				{/each}
 			</div>
 		</div>
 	{/if}
diff --git a/apps/ui/src/routes/databases/_index.svelte b/apps/ui/src/routes/databases/_index.svelte
index e59f59384..44d9d8b30 100644
--- a/apps/ui/src/routes/databases/_index.svelte
+++ b/apps/ui/src/routes/databases/_index.svelte
@@ -42,8 +42,8 @@
 	});
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">{$t('index.databases')}</div>
+<nav class="header">
+	<h1 class="mr-4 text-2xl font-bold">{$t('index.databases')}</h1>
 	{#if $appSession.isAdmin}
 		<button on:click={newDatabase} class="btn btn-square btn-sm bg-databases">
 			<svg
@@ -61,9 +61,9 @@
 			>
 		</button>
 	{/if}
-</div>
-
-<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
+</nav>
+<br />
+<div class="flex-col justify-center mt-10 pb-12 sm:pb-16 lg:pt-16">
 	{#if !databases || ownDatabases.length === 0}
 		<div class="flex-col">
 			<div class="text-center text-xl font-bold">{$t('database.no_databases_found')}</div>
diff --git a/apps/ui/src/routes/destinations/[id]/_Destination.svelte b/apps/ui/src/routes/destinations/[id]/_Destination.svelte
index 19d1e662a..b2e4e229f 100644
--- a/apps/ui/src/routes/destinations/[id]/_Destination.svelte
+++ b/apps/ui/src/routes/destinations/[id]/_Destination.svelte
@@ -1,25 +1,14 @@
-
 <script lang="ts">
 	export let destination: any;
 	export let settings: any;
-	export let state: any;
 	import LocalDocker from './_LocalDocker.svelte';
 	import RemoteDocker from './_RemoteDocker.svelte';
 </script>
 
-<div class="flex h-20 items-center space-x-2 p-5 px-6 font-bold">
-	<div class="-mb-5 flex-col">
-		<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
-			Configuration
-		</div>
-		<span class="text-xs">{destination.name}</span>
-	</div>
-</div>
-
-<div class="mx-auto max-w-4xl px-6">
+<div class="mx-auto max-w-6xl px-6">
 	{#if destination.remoteEngine}
-		<RemoteDocker bind:destination {settings} {state} />
+		<RemoteDocker bind:destination {settings} />
 	{:else}
-		<LocalDocker bind:destination {settings} {state} />
+		<LocalDocker bind:destination {settings} />
 	{/if}
-</div>
\ No newline at end of file
+</div>
diff --git a/apps/ui/src/routes/destinations/[id]/_LocalDocker.svelte b/apps/ui/src/routes/destinations/[id]/_LocalDocker.svelte
index 609d3a85d..208593bab 100644
--- a/apps/ui/src/routes/destinations/[id]/_LocalDocker.svelte
+++ b/apps/ui/src/routes/destinations/[id]/_LocalDocker.svelte
@@ -141,40 +141,35 @@
 	}
 </script>
 
-<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
-	<div class="flex md:flex-row space-y-2 md:space-y-0 space-x-0 md:space-x-2 flex-col pb-5">
-		<div class="title">{$t('forms.configuration')}</div>
-		{#if $appSession.isAdmin}
-			<button
-				type="submit"
-				class="btn btn-sm"
-				class:bg-destinations={!loading.save}
-				class:loading={loading.save}
-				disabled={loading.save}
-				>{$t('forms.save')}
-			</button>
-			<button
-				class="btn btn-sm"
-				class:loading={loading.restart}
-				class:bg-error={!loading.restart}
-				disabled={loading.restart}
-				on:click|preventDefault={forceRestartProxy}>{$t('destination.force_restart_proxy')}</button
-			>
-		{/if}
+<form on:submit|preventDefault={handleSubmit} class="py-4">
+	<div class="flex space-x-2">
+		<button
+			type="submit"
+			class="btn btn-sm"
+			class:bg-destinations={!loading.save}
+			class:loading={loading.save}
+			disabled={loading.save}
+			>{$t('forms.save')}
+		</button>
+		<button
+			class="btn btn-sm"
+			class:loading={loading.restart}
+			class:bg-error={!loading.restart}
+			disabled={loading.restart}
+			on:click|preventDefault={forceRestartProxy}>{$t('destination.force_restart_proxy')}</button
+		>
 	</div>
-	<div class="grid lg:grid-cols-2 items-center px-10 ">
-		<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
+	<div class="grid gap-2 grid-cols-2 auto-rows-max mt-10 items-center">
+		<label for="name">{$t('forms.name')}</label>
 		<input
+			class="w-full"
 			name="name"
 			placeholder={$t('forms.name')}
 			disabled={!$appSession.isAdmin}
 			readonly={!$appSession.isAdmin}
 			bind:value={destination.name}
 		/>
-	</div>
-
-	<div class="grid lg:grid-cols-2 items-center px-10">
-		<label for="engine" class="text-base font-bold text-stone-100">{$t('forms.engine')}</label>
+		<label for="engine">{$t('forms.engine')}</label>
 		<CopyPasswordField
 			id="engine"
 			readonly
@@ -183,9 +178,7 @@
 			placeholder="{$t('forms.eg')}: /var/run/docker.sock"
 			value={destination.engine}
 		/>
-	</div>
-	<div class="grid lg:grid-cols-2 items-center px-10">
-		<label for="network" class="text-base font-bold text-stone-100">{$t('forms.network')}</label>
+		<label for="network">{$t('forms.network')}</label>
 		<CopyPasswordField
 			id="network"
 			readonly
@@ -194,9 +187,7 @@
 			placeholder="{$t('forms.default')}: coolify"
 			value={destination.network}
 		/>
-	</div>
-	{#if $appSession.teamId === '0'}
-		<div class="grid lg:grid-cols-2 items-center px-10">
+		{#if $appSession.teamId === '0'}
 			<Setting
 				id="changeProxySetting"
 				loading={loading.proxy}
@@ -210,6 +201,6 @@
 						: ''
 				}`}
 			/>
-		</div>
-	{/if}
+		{/if}
+	</div>
 </form>
diff --git a/apps/ui/src/routes/destinations/[id]/_NewLocalDocker.svelte b/apps/ui/src/routes/destinations/[id]/_NewLocalDocker.svelte
index fc6ee4fec..7de5dafa4 100644
--- a/apps/ui/src/routes/destinations/[id]/_NewLocalDocker.svelte
+++ b/apps/ui/src/routes/destinations/[id]/_NewLocalDocker.svelte
@@ -31,9 +31,9 @@
 
 <div class="flex justify-center px-6 pb-8">
 	<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
-		<div class="flex items-center space-x-2 pb-5">
+		<div class="flex items-start lg:items-center space-x-0 lg:space-x-4 pb-5 flex-col space-y-4 lg:space-y-0">
 			<div class="title font-bold">{$t('forms.configuration')}</div>
-			<button type="submit" class="btn btn-sm bg-destinations" class:loading disabled={loading}
+			<button type="submit" class="btn btn-sm bg-destinations w-full lg:w-fit" class:loading disabled={loading}
 				>{loading
 					? payload.isCoolifyProxyUsed
 						? $t('destination.new.saving_and_configuring_proxy')
@@ -41,12 +41,12 @@
 					: $t('forms.save')}</button
 			>
 		</div>
-		<div class="mt-2 grid grid-cols-2 items-center px-10">
+		<div class="mt-2 grid grid-cols-2 items-center lg:pl-10">
 			<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
 			<input required name="name" placeholder={$t('forms.name')} bind:value={payload.name} />
 		</div>
 
-		<div class="grid grid-cols-2 items-center px-10">
+		<div class="grid grid-cols-2 items-center lg:pl-10">
 			<label for="engine" class="text-base font-bold text-stone-100">{$t('forms.engine')}</label>
 			<input
 				required
@@ -55,7 +55,7 @@
 				bind:value={payload.engine}
 			/>
 		</div>
-		<div class="grid grid-cols-2 items-center px-10">
+		<div class="grid grid-cols-2 items-center lg:pl-10">
 			<label for="network" class="text-base font-bold text-stone-100">{$t('forms.network')}</label>
 			<input
 				required
@@ -65,7 +65,7 @@
 			/>
 		</div>
 		{#if $appSession.teamId === '0'}
-			<div class="grid grid-cols-2 items-center px-10">
+			<div class="grid grid-cols-2 items-center lg:pl-10">
 				<Setting
 					id="changeProxySetting"
 					bind:setting={payload.isCoolifyProxyUsed}
diff --git a/apps/ui/src/routes/destinations/[id]/_NewRemoteDocker.svelte b/apps/ui/src/routes/destinations/[id]/_NewRemoteDocker.svelte
index 89ad07f3a..83829ff19 100644
--- a/apps/ui/src/routes/destinations/[id]/_NewRemoteDocker.svelte
+++ b/apps/ui/src/routes/destinations/[id]/_NewRemoteDocker.svelte
@@ -38,9 +38,9 @@
 </div>
 <div class="flex justify-center px-6 pb-8">
 	<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
-		<div class="flex items-center space-x-2 pb-5">
+		<div class="flex items-start lg:items-center space-x-0 lg:space-x-4 pb-5 flex-col lg:flex-row space-y-4 lg:space-y-0">
 			<div class="title font-bold">{$t('forms.configuration')}</div>
-			<button type="submit" class="btn btn-sm bg-destinations" class:loading disabled={loading}
+			<button type="submit" class="btn btn-sm bg-destinations w-full lg:w-fit" class:loading disabled={loading}
 				>{loading
 					? payload.isCoolifyProxyUsed
 						? $t('destination.new.saving_and_configuring_proxy')
@@ -48,12 +48,12 @@
 					: $t('forms.save')}</button
 			>
 		</div>
-		<div class="mt-2 grid grid-cols-2 items-center px-10">
+		<div class="mt-2 grid grid-cols-2 items-center lg:pl-10">
 			<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
 			<input required name="name" placeholder={$t('forms.name')} bind:value={payload.name} />
 		</div>
 
-		<div class="grid grid-cols-2 items-center px-10">
+		<div class="grid grid-cols-2 items-center lg:pl-10">
 			<label for="remoteIpAddress" class="text-base font-bold text-stone-100"
 				>{$t('forms.ip_address')}</label
 			>
@@ -65,7 +65,7 @@
 			/>
 		</div>
 
-		<div class="grid grid-cols-2 items-center px-10">
+		<div class="grid grid-cols-2 items-center lg:pl-10">
 			<label for="remoteUser" class="text-base font-bold text-stone-100">{$t('forms.user')}</label>
 			<input
 				required
@@ -75,7 +75,7 @@
 			/>
 		</div>
 
-		<div class="grid grid-cols-2 items-center px-10">
+		<div class="grid grid-cols-2 items-center lg:pl-10">
 			<label for="remotePort" class="text-base font-bold text-stone-100">{$t('forms.port')}</label>
 			<input
 				required
@@ -84,7 +84,7 @@
 				bind:value={payload.remotePort}
 			/>
 		</div>
-		<div class="grid grid-cols-2 items-center px-10">
+		<div class="grid grid-cols-2 items-center lg:pl-10">
 			<label for="network" class="text-base font-bold text-stone-100">{$t('forms.network')}</label>
 			<input
 				required
@@ -93,7 +93,7 @@
 				bind:value={payload.network}
 			/>
 		</div>
-		<div class="grid grid-cols-2 items-center px-10">
+		<div class="grid grid-cols-2 items-center lg:pl-10">
 			<Setting
 				id="isCoolifyProxyUsed"
 				bind:setting={payload.isCoolifyProxyUsed}
diff --git a/apps/ui/src/routes/destinations/[id]/_RemoteDocker.svelte b/apps/ui/src/routes/destinations/[id]/_RemoteDocker.svelte
index c72433ad7..e9c444e3d 100644
--- a/apps/ui/src/routes/destinations/[id]/_RemoteDocker.svelte
+++ b/apps/ui/src/routes/destinations/[id]/_RemoteDocker.svelte
@@ -69,7 +69,7 @@
 		loading.proxy = false;
 	});
 	async function changeProxySetting() {
-		if (!destination.remoteVerified) return
+		if (!destination.remoteVerified) return;
 		loading.proxy = true;
 		if (!cannotDisable) {
 			const isProxyActivated = destination.isCoolifyProxyUsed;
@@ -166,7 +166,6 @@
 
 <form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
 	<div class="flex space-x-1 pb-5">
-		<div class="title font-bold">{$t('forms.configuration')}</div>
 		{#if $appSession.isAdmin}
 			<button
 				type="submit"
@@ -197,9 +196,10 @@
 		{/if}
 	</div>
 	<div class="grid grid-cols-2 items-center px-10 ">
-		<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
+		<label for="name">{$t('forms.name')}</label>
 		<input
 			name="name"
+			class="w-full"
 			placeholder={$t('forms.name')}
 			disabled={!$appSession.isAdmin}
 			readonly={!$appSession.isAdmin}
@@ -207,7 +207,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center px-10">
-		<label for="network" class="text-base font-bold text-stone-100">{$t('forms.network')}</label>
+		<label for="network">{$t('forms.network')}</label>
 		<CopyPasswordField
 			id="network"
 			readonly
@@ -218,7 +218,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center px-10">
-		<label for="remoteIpAddress" class="text-base font-bold text-stone-100">IP Address</label>
+		<label for="remoteIpAddress">IP Address</label>
 		<CopyPasswordField
 			id="remoteIpAddress"
 			readonly
@@ -228,7 +228,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center px-10">
-		<label for="remoteUser" class="text-base font-bold text-stone-100">User</label>
+		<label for="remoteUser">User</label>
 		<CopyPasswordField
 			id="remoteUser"
 			readonly
@@ -238,7 +238,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center px-10">
-		<label for="remotePort" class="text-base font-bold text-stone-100">Port</label>
+		<label for="remotePort">Port</label>
 		<CopyPasswordField
 			id="remotePort"
 			readonly
@@ -248,7 +248,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center px-10">
-		<label for="sshKey" class="text-base font-bold text-stone-100">SSH Key</label>
+		<label for="sshKey">SSH Key</label>
 		<a
 			href={!isDisabled ? `/destinations/${id}/configuration/sshkey?from=/destinations/${id}` : ''}
 			class="no-underline"
@@ -256,7 +256,7 @@
 				value={destination.sshKey.name}
 				readonly
 				id="sshKey"
-				class="cursor-pointer hover:bg-coolgray-500"
+				class="cursor-pointer w-full"
 			/></a
 		>
 	</div>
@@ -268,7 +268,7 @@
 			bind:setting={destination.isCoolifyProxyUsed}
 			on:click={changeProxySetting}
 			title={$t('destination.use_coolify_proxy')}
-			description={`This will install a proxy on the destination to allow you to access your applications and services without any manual configuration.${
+			description={`Install & configure a proxy (based on Traefik) on the destination to allow you to access your applications and services without any manual configuration.${
 				cannotDisable
 					? '<span class="font-bold text-white">You cannot disable this proxy as FQDN is configured for Coolify.</span>'
 					: ''
diff --git a/apps/ui/src/routes/destinations/[id]/__layout.svelte b/apps/ui/src/routes/destinations/[id]/__layout.svelte
index 1b82265e2..475dbc342 100644
--- a/apps/ui/src/routes/destinations/[id]/__layout.svelte
+++ b/apps/ui/src/routes/destinations/[id]/__layout.svelte
@@ -16,7 +16,7 @@
 			if (id !== 'new' && (!destination || Object.entries(destination).length === 0)) {
 				return {
 					status: 302,
-					redirect: '/destinations'
+					redirect: '/'
 				};
 			}
 			const configurationPhase = checkConfiguration(destination);
@@ -88,17 +88,29 @@
 </script>
 
 {#if $page.params.id !== 'new'}
-	<nav class="nav-side">
-		<button
-			id="delete"
-			on:click={() => deleteDestination(destination)}
-			type="submit"
-			disabled={!$appSession.isAdmin && isDestinationDeletable}
-			class:hover:text-red-500={$appSession.isAdmin && isDestinationDeletable}
-			class="icons bg-transparent text-sm"
-			class:text-stone-600={!isDestinationDeletable}><DeleteIcon /></button
-		>
+	<nav class="header lg:flex-row flex-col-reverse">
+		<div class="flex flex-row space-x-2 font-bold pt-10 lg:pt-0">
+			<div class="flex flex-col items-center justify-center title">
+				{#if $page.url.pathname === `/destinations/${$page.params.id}`}
+					Configurations
+				{:else if $page.url.pathname.startsWith(`/destinations/${$page.params.id}/configuration/sshkey`)}
+					Select a SSH Key
+				{/if}
+			</div>
+		</div>
+		<div class="lg:block hidden flex-1" />
+		<div class="flex flex-row flex-wrap space-x-3 justify-center lg:justify-start lg:py-0">
+			<button
+				id="delete"
+				on:click={() => deleteDestination(destination)}
+				type="submit"
+				disabled={!$appSession.isAdmin && isDestinationDeletable}
+				class:hover:text-red-500={$appSession.isAdmin && isDestinationDeletable}
+				class="icons bg-transparent text-sm"
+				class:text-stone-600={!isDestinationDeletable}><DeleteIcon /></button
+			>
+			<Tooltip triggeredBy="#delete">{deletable()}</Tooltip>
+		</div>
 	</nav>
-	<Tooltip triggeredBy="#delete">{deletable()}</Tooltip>
 {/if}
 <slot />
diff --git a/apps/ui/src/routes/destinations/[id]/configuration/sshkey.svelte b/apps/ui/src/routes/destinations/[id]/configuration/sshkey.svelte
index 6a1daae40..1f9e5bbce 100644
--- a/apps/ui/src/routes/destinations/[id]/configuration/sshkey.svelte
+++ b/apps/ui/src/routes/destinations/[id]/configuration/sshkey.svelte
@@ -38,9 +38,6 @@
 	}
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">Select a SSH Keys</div>
-</div>
 <div class="flex flex-col justify-center">
 	<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row ">
 		{#if sshKeys.length > 0}
@@ -61,7 +58,7 @@
 				<div class="pb-2 text-center font-bold">No SSH key found</div>
 				<div class="flex justify-center">
 					<a
-						href="/settings/ssh-keys"
+						href="/settings/ssh"
 						sveltekit:prefetch
 						class="add-icon bg-sky-600 hover:bg-sky-500"
 					>
diff --git a/apps/ui/src/routes/destinations/_index.svelte b/apps/ui/src/routes/destinations/_index.svelte
index 27656cdb7..8885787c8 100644
--- a/apps/ui/src/routes/destinations/_index.svelte
+++ b/apps/ui/src/routes/destinations/_index.svelte
@@ -36,8 +36,8 @@
 	});
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">{$t('index.destinations')}</div>
+<nav class="header">
+	<h1 class="mr-4 text-2xl font-bold">{$t('index.destinations')}</h1>
 	{#if $appSession.isAdmin}
 		<a href="/destinations/new" class="btn btn-square btn-sm bg-destinations">
 			<svg
@@ -55,8 +55,9 @@
 			>
 		</a>
 	{/if}
-</div>
-<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
+</nav>
+<br />
+<div class="flex-col justify-center mt-10 pb-12 sm:pb-16 lg:pt-16">
 	{#if !destinations || ownDestinations.length === 0}
 		<div class="flex-col">
 			<div class="text-center text-xl font-bold">{$t('destination.no_destination_found')}</div>
diff --git a/apps/ui/src/routes/iam/index.svelte b/apps/ui/src/routes/iam/index.svelte
index 9b61ec9cc..9b140b130 100644
--- a/apps/ui/src/routes/iam/index.svelte
+++ b/apps/ui/src/routes/iam/index.svelte
@@ -106,8 +106,8 @@
 	}
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">Identity and Access Management</div>
+<nav class="header">
+	<h1 class="mr-4 text-2xl tracking-tight font-bold">Identity and Access Management</h1>
 	<button on:click={newTeam} class="btn btn-square btn-sm bg-iam">
 		<svg
 			class="h-6 w-6"
@@ -123,10 +123,11 @@
 			/></svg
 		>
 	</button>
-</div>
+</nav>
+<br />
 
 {#if invitations.length > 0}
-	<div class="mx-auto max-w-4xl px-6 py-4">
+	<div class="mx-auto max-w-6xl px-6 py-4">
 		<div class="title font-bold">Pending invitations</div>
 		<div class="pt-10 text-center">
 			{#each invitations as invitation}
@@ -148,7 +149,7 @@
 		</div>
 	</div>
 {/if}
-<div class="mx-auto max-w-4xl px-6 py-4">
+<div class="mx-auto max-w-6xl px-6 py-4">
 	{#if $appSession.teamId === '0' && accounts.length > 0}
 		<div class="title font-bold">Accounts</div>
 	{:else}
@@ -188,7 +189,7 @@
 	</div>
 </div>
 
-<div class="mx-auto max-w-4xl px-6">
+<div class="mx-auto max-w-6xl px-6">
 	<div class="title font-bold">Teams</div>
 	<div class="flex-col items-center justify-center pt-10">
 		<div class="flex flex-row flex-wrap justify-center px-2 pb-10 md:flex-row">
diff --git a/apps/ui/src/routes/iam/team/[id]/index.svelte b/apps/ui/src/routes/iam/team/[id]/index.svelte
index 37fe1b798..5da43f74b 100644
--- a/apps/ui/src/routes/iam/team/[id]/index.svelte
+++ b/apps/ui/src/routes/iam/team/[id]/index.svelte
@@ -87,7 +87,7 @@
 	<span class="arrow-right-applications px-1 text-fuchsia-500">></span>
 	<span class="pr-2">{team.name}</span>
 </div>
-<div class="mx-auto max-w-4xl px-6">
+<div class="mx-auto max-w-6xl px-6">
 	<form on:submit|preventDefault={handleSubmit} class=" py-4">
 		<div class="flex space-x-1 pb-5">
 			<div class="title font-bold">{$t('index.settings')}</div>
diff --git a/apps/ui/src/routes/index.svelte b/apps/ui/src/routes/index.svelte
index 731e4ce91..15ba421ad 100644
--- a/apps/ui/src/routes/index.svelte
+++ b/apps/ui/src/routes/index.svelte
@@ -28,11 +28,10 @@
 	export let destinations: any;
 
 	let filtered: any = setInitials();
-	import { get, post } from '$lib/api';
-	import Usage from '$lib/components/Usage.svelte';
+	import { get } from '$lib/api';
 	import { t } from '$lib/translations';
 	import { asyncSleep, getRndInteger } from '$lib/common';
-	import { appSession, search, addToast} from '$lib/store';
+	import { appSession, search } from '$lib/store';
 
 	import ApplicationsIcons from '$lib/components/svg/applications/ApplicationIcons.svelte';
 	import DatabaseIcons from '$lib/components/svg/databases/DatabaseIcons.svelte';
@@ -43,6 +42,25 @@
 	let numberOfGetStatus = 0;
 	let status: any = {};
 	doSearch();
+
+	async function refreshStatusApplications() {
+		numberOfGetStatus = 0;
+		for (const application of applications) {
+			getStatus(application, true);
+		}
+	}
+	async function refreshStatusServices() {
+		numberOfGetStatus = 0;
+		for (const service of services) {
+			getStatus(service, true);
+		}
+	}
+	async function refreshStatusDatabases() {
+		numberOfGetStatus = 0;
+		for (const database of databases) {
+			getStatus(database, true);
+		}
+	}
 	function setInitials(onlyOthers: boolean = false) {
 		return {
 			applications:
@@ -88,12 +106,17 @@
 		filtered.otherDestinations = [];
 	}
 
-
-	async function getStatus(resources: any) {
-		const { id, buildPack, dualCerts } = resources;
-		if (status[id]) return status[id];
+	async function getStatus(resources: any, force: boolean = false) {
+		const { id, buildPack, dualCerts, type } = resources;
+		if (buildPack && applications.length > 10 && !force) {
+			return;
+		}
+		if (type && services.length > 10 && !force) {
+			return;
+		}
+		if (status[id] && !force) return status[id];
 		while (numberOfGetStatus > 1) {
-			await asyncSleep(getRndInteger(100, 200));
+			await asyncSleep(getRndInteger(100, 500));
 		}
 		try {
 			numberOfGetStatus++;
@@ -119,6 +142,7 @@
 			status[id] = 'error';
 			return 'error';
 		} finally {
+			status = { ...status };
 			numberOfGetStatus--;
 		}
 	}
@@ -161,6 +185,7 @@
 	}
 	function applicationFilters(application: any) {
 		return (
+			(application.id && application.id.toLowerCase().includes($search.toLowerCase())) ||
 			(application.name && application.name.toLowerCase().includes($search.toLowerCase())) ||
 			(application.fqdn && application.fqdn.toLowerCase().includes($search.toLowerCase())) ||
 			(application.repository &&
@@ -175,6 +200,7 @@
 	}
 	function databaseFilters(database: any) {
 		return (
+			(database.id && database.id.toLowerCase().includes($search.toLowerCase())) ||
 			(database.name && database.name.toLowerCase().includes($search.toLowerCase())) ||
 			(database.type && database.type.toLowerCase().includes($search.toLowerCase())) ||
 			(database.version && database.version.toLowerCase().includes($search.toLowerCase())) ||
@@ -184,6 +210,7 @@
 	}
 	function serviceFilters(service: any) {
 		return (
+			(service.id && service.id.toLowerCase().includes($search.toLowerCase())) ||
 			(service.name && service.name.toLowerCase().includes($search.toLowerCase())) ||
 			(service.type && service.type.toLowerCase().includes($search.toLowerCase())) ||
 			(service.fqdn && service.fqdn.toLowerCase().includes($search.toLowerCase())) ||
@@ -194,6 +221,7 @@
 	}
 	function gitSourceFilters(source: any) {
 		return (
+			(source.id && source.id.toLowerCase().includes($search.toLowerCase())) ||
 			(source.name && source.name.toLowerCase().includes($search.toLowerCase())) ||
 			(source.type && source.type.toLowerCase().includes($search.toLowerCase())) ||
 			(source.htmlUrl && source.htmlUrl.toLowerCase().includes($search.toLowerCase())) ||
@@ -202,6 +230,7 @@
 	}
 	function destinationFilters(destination: any) {
 		return (
+			(destination.id && destination.id.toLowerCase().includes($search.toLowerCase())) ||
 			(destination.name && destination.name.toLowerCase().includes($search.toLowerCase())) ||
 			(destination.type && destination.type.toLowerCase().includes($search.toLowerCase()))
 		);
@@ -271,20 +300,15 @@
 			filtered = setInitials();
 		}
 	}
-   
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">{$t('index.dashboard')}</div>
+<nav class="header">
+	<h1 class="mr-4 text-2xl font-bold">{$t('index.dashboard')}</h1>
 	{#if $appSession.isAdmin && (applications.length !== 0 || destinations.length !== 0 || databases.length !== 0 || services.length !== 0 || gitSources.length !== 0 || destinations.length !== 0)}
 		<NewResource />
 	{/if}
-    
-</div>
-<div class="container lg:mx-auto lg:p-0 px-8 p-5">
-	<!-- {#if $appSession.teamId === '0'}
-		<Usage />
-	{/if} -->
+</nav>
+<div class="container lg:mx-auto lg:p-0 px-8 pt-5">
 	{#if applications.length !== 0 || destinations.length !== 0 || databases.length !== 0 || services.length !== 0 || gitSources.length !== 0 || destinations.length !== 0}
 		<div class="form-control">
 			<div class="input-group flex w-full">
@@ -317,8 +341,8 @@
 					on:input={() => doSearch()}
 				/>
 			</div>
-			<label for="search" class="label w-full">
-				<span class="label-text text-xs flex flex-wrap gap-2  items-center">
+			<label for="search" class="label w-full mt-3">
+				<span class="label-text text-xs flex flex-wrap gap-2 items-center">
 					<button
 						class:bg-coollabs={$search === '!notmine'}
 						class="badge badge-lg text-white text-xs rounded"
@@ -375,7 +399,10 @@
 	{/if}
 	{#if (filtered.applications.length > 0 && applications.length > 0) || filtered.otherApplications.length > 0}
 		<div class="flex items-center mt-10">
-			<h1 class="title lg:text-3xl">Applications</h1>
+			<h1 class="title lg:text-3xl pr-4">Applications</h1>
+			<button class="btn btn-sm btn-primary" on:click={refreshStatusApplications}
+				>Refresh Status</button
+			>
 		</div>
 	{/if}
 	{#if filtered.applications.length > 0 && applications.length > 0}
@@ -386,11 +413,13 @@
 			{#if filtered.applications.length > 0}
 				{#each filtered.applications as application}
 					<a class="no-underline mb-5" href={`/applications/${application.id}`}>
-						<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-green-600 indicator">
+						<div
+							class="w-full rounded p-5 bg-coolgray-200 hover:bg-green-600 indicator duration-150"
+						>
 							{#await getStatus(application)}
 								<span class="indicator-item badge bg-yellow-500 badge-sm" />
-							{:then status}
-								{#if status === 'running'}
+							{:then}
+								{#if status[application.id] === 'running'}
 									<span class="indicator-item badge bg-success badge-sm" />
 								{:else}
 									<span class="indicator-item badge bg-error badge-sm" />
@@ -492,11 +521,11 @@
 		>
 			{#each filtered.otherApplications as application}
 				<a class="no-underline mb-5" href={`/applications/${application.id}`}>
-					<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-green-600 indicator">
+					<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-green-600 indicator duration-150">
 						{#await getStatus(application)}
 							<span class="indicator-item badge bg-yellow-500 badge-sm" />
-						{:then status}
-							{#if status === 'running'}
+						{:then}
+							{#if status[application.id] === 'running'}
 								<span class="indicator-item badge bg-success badge-sm" />
 							{:else}
 								<span class="indicator-item badge bg-error badge-sm" />
@@ -580,7 +609,9 @@
 	{/if}
 	{#if (filtered.services.length > 0 && services.length > 0) || filtered.otherServices.length > 0}
 		<div class="flex items-center mt-10">
-			<h1 class="title lg:text-3xl">Services</h1>
+			<h1 class="title lg:text-3xl pr-4">Services</h1>
+			<button class="btn btn-sm btn-primary" on:click={refreshStatusServices}>Refresh Status</button
+			>
 		</div>
 	{/if}
 	{#if filtered.services.length > 0 && services.length > 0}
@@ -591,11 +622,13 @@
 			{#if filtered.services.length > 0}
 				{#each filtered.services as service}
 					<a class="no-underline mb-5" href={`/services/${service.id}`}>
-						<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-pink-600 indicator">
+						<div
+							class="w-full rounded p-5 bg-coolgray-200 hover:bg-pink-600 indicator duration-150"
+						>
 							{#await getStatus(service)}
 								<span class="indicator-item badge bg-yellow-500 badge-sm" />
-							{:then status}
-								{#if status === 'running'}
+							{:then}
+								{#if status[service.id] === 'running'}
 									<span class="indicator-item badge bg-success badge-sm" />
 								{:else}
 									<span class="indicator-item badge bg-error badge-sm" />
@@ -663,11 +696,11 @@
 		>
 			{#each filtered.otherServices as service}
 				<a class="no-underline mb-5" href={`/services/${service.id}`}>
-					<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-pink-600 indicator">
+					<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-pink-600 indicator duration-150">
 						{#await getStatus(service)}
 							<span class="indicator-item badge bg-yellow-500 badge-sm" />
-						{:then status}
-							{#if status === 'running'}
+						{:then}
+							{#if status[service.id] === 'running'}
 								<span class="indicator-item badge bg-success badge-sm" />
 							{:else}
 								<span class="indicator-item badge bg-error badge-sm" />
@@ -720,7 +753,10 @@
 	{/if}
 	{#if (filtered.databases.length > 0 && databases.length > 0) || filtered.otherDatabases.length > 0}
 		<div class="flex items-center mt-10">
-			<h1 class="title lg:text-3xl">Databases</h1>
+			<h1 class="title lg:text-3xl pr-4">Databases</h1>
+			<button class="btn btn-sm btn-primary" on:click={refreshStatusDatabases}
+				>Refresh Status</button
+			>
 		</div>
 	{/if}
 	{#if filtered.databases.length > 0 && databases.length > 0}
@@ -731,11 +767,13 @@
 			{#if filtered.databases.length > 0}
 				{#each filtered.databases as database}
 					<a class="no-underline mb-5" href={`/databases/${database.id}`}>
-						<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-databases indicator">
+						<div
+							class="w-full rounded p-5 bg-coolgray-200 hover:bg-databases indicator duration-150"
+						>
 							{#await getStatus(database)}
 								<span class="indicator-item badge bg-yellow-500 badge-sm" />
-							{:then status}
-								{#if status === 'running'}
+							{:then}
+								{#if status[database.id] === 'running'}
 									<span class="indicator-item badge bg-success badge-sm" />
 								{:else}
 									<span class="indicator-item badge bg-error badge-sm" />
@@ -807,11 +845,11 @@
 		>
 			{#each filtered.otherDatabases as database}
 				<a class="no-underline mb-5" href={`/databases/${database.id}`}>
-					<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-databases indicator">
+					<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-databases indicator duration-150">
 						{#await getStatus(database)}
 							<span class="indicator-item badge bg-yellow-500 badge-sm" />
-						{:then status}
-							{#if status === 'running'}
+						{:then}
+							{#if status[database.id] === 'running'}
 								<span class="indicator-item badge bg-success badge-sm" />
 							{:else}
 								<span class="indicator-item badge bg-error badge-sm" />
@@ -879,7 +917,7 @@
 			{#if filtered.gitSources.length > 0}
 				{#each filtered.gitSources as source}
 					<a class="no-underline mb-5" href={`/sources/${source.id}`}>
-						<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-sources indicator">
+						<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-sources indicator duration-150">
 							<div class="w-full flex flex-row">
 								<div class="absolute top-0 left-0 -m-5 h-10 w-10">
 									{#if source?.type === 'gitlab'}
@@ -951,7 +989,7 @@
 		>
 			{#each filtered.otherGitSources as source}
 				<a class="no-underline mb-5" href={`/sources/${source.id}`}>
-					<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-sources indicator">
+					<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-sources indicator duration-150">
 						<div class="w-full flex flex-row">
 							<div class="absolute top-0 left-0 -m-5 h-10 w-10">
 								{#if source?.type === 'gitlab'}
@@ -1018,7 +1056,9 @@
 			{#if filtered.destinations.length > 0}
 				{#each filtered.destinations as destination}
 					<a class="no-underline mb-5" href={`/destinations/${destination.id}`}>
-						<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-destinations indicator">
+						<div
+							class="w-full rounded p-5 bg-coolgray-200 hover:bg-destinations indicator duration-150"
+						>
 							<div class="w-full flex flex-row">
 								<div class="absolute top-0 left-0 -m-5 h-10 w-10">
 									<svg
@@ -1100,7 +1140,9 @@
 		>
 			{#each filtered.otherDestinations as destination}
 				<a class="no-underline mb-5" href={`/destinations/${destination.id}`}>
-					<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-destinations indicator">
+					<div
+						class="w-full rounded p-5 bg-coolgray-200 hover:bg-destinations indicator duration-150"
+					>
 						<div class="w-full flex flex-row">
 							<div class="absolute top-0 left-0 -m-5 h-10 w-10">
 								<svg
diff --git a/apps/ui/src/routes/servers/index.svelte b/apps/ui/src/routes/servers/index.svelte
index 3be53ef55..dc8844ff0 100644
--- a/apps/ui/src/routes/servers/index.svelte
+++ b/apps/ui/src/routes/servers/index.svelte
@@ -29,8 +29,8 @@
 	}
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">Servers</div>
+<div class="header">
+	<h1 class="text-2xl font-bold">Servers</h1>
 </div>
 <div class="container lg:mx-auto lg:p-0 px-8 p-5">
 	{#if servers.length > 0}
diff --git a/apps/ui/src/routes/services/[id]/_Secret.svelte b/apps/ui/src/routes/services/[id]/_Secret.svelte
index 8c92d9143..be9d41ce0 100644
--- a/apps/ui/src/routes/services/[id]/_Secret.svelte
+++ b/apps/ui/src/routes/services/[id]/_Secret.svelte
@@ -50,6 +50,8 @@
 
 <td>
 	<input
+		
+	style="min-width: 350px !important;"
 		id={isNewSecret ? 'secretName' : 'secretNameNew'}
 		bind:value={name}
 		required
@@ -67,6 +69,7 @@
 		bind:value
 		required
 		placeholder="J$#@UIO%HO#$U%H"
+		inputStyle="min-width: 350px; !important"
 	/>
 </td>
 
diff --git a/apps/ui/src/routes/services/[id]/_ServiceLinks.svelte b/apps/ui/src/routes/services/[id]/_ServiceLinks.svelte
index d68a3eae0..32f45f27f 100644
--- a/apps/ui/src/routes/services/[id]/_ServiceLinks.svelte
+++ b/apps/ui/src/routes/services/[id]/_ServiceLinks.svelte
@@ -75,4 +75,12 @@
 	<a href="https://weblate.org" target="_blank">
 		<Icons.Weblate />
 	</a>
+{:else if service.type === 'grafana'}
+	<a href="https://github.com/grafana/grafana" target="_blank">
+		<Icons.Grafana />
+	</a>
+{:else if service.type === 'trilium'}
+	<a href="https://github.com/zadam/trilium" target="_blank">
+		<Icons.Trilium />
+	</a>
 {/if}
diff --git a/apps/ui/src/routes/services/[id]/_Services/_Appwrite.svelte b/apps/ui/src/routes/services/[id]/_Services/_Appwrite.svelte
index f27e49fd4..5af58ae7f 100644
--- a/apps/ui/src/routes/services/[id]/_Services/_Appwrite.svelte
+++ b/apps/ui/src/routes/services/[id]/_Services/_Appwrite.svelte
@@ -10,117 +10,84 @@
 	<div class="title">Appwrite</div>
 </div>
 
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="opensslKeyV1">Encryption Key</label>
-	<CopyPasswordField
-		name="opensslKeyV1"
-		id="opensslKeyV1"
-		isPasswordField
-		value={service.appwrite.opensslKeyV1}
-		readonly
-		disabled
-	/>
+<div class="space-y-2">
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="opensslKeyV1">Encryption Key</label>
+		<CopyPasswordField
+			name="opensslKeyV1"
+			id="opensslKeyV1"
+			isPasswordField
+			value={service.appwrite.opensslKeyV1}
+			readonly
+			disabled
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="executorSecret">Executor Secret</label>
+		<CopyPasswordField
+			name="executorSecret"
+			id="executorSecret"
+			isPasswordField
+			value={service.appwrite.executorSecret}
+			readonly
+			disabled
+		/>
+	</div>
 </div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="executorSecret">Executor Secret</label>
-	<CopyPasswordField
-		name="executorSecret"
-		id="executorSecret"
-		isPasswordField
-		value={service.appwrite.executorSecret}
-		readonly
-		disabled
-	/>
-</div>
-
-<!-- <div class="flex space-x-1 py-5 font-bold">
-	<div class="title">Redis</div>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="redisPassword">Password</label>
-	<CopyPasswordField
-		name="redisPassword"
-		id="redisPassword"
-		isPasswordField
-		value={service.appwrite.redisPassword}
-		readonly
-		disabled
-	/>
-</div> -->
-
 <div class="flex space-x-1 py-5 font-bold">
 	<div class="title">MariaDB</div>
 </div>
-
-<!-- <div class="grid grid-cols-2 items-center px-10">
-	<label for="mariadbHost">MariaDB Host</label>
-	<CopyPasswordField
-		name="mariadbHost"
-		id="mariadbHost"
-		value={service.appwrite.mariadbHost}
-		readonly
-		disabled
-	/>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="mariadbPort">MariaDB Port</label>
-	<CopyPasswordField
-		name="mariadbPort"
-		id="mariadbPort"
-		value={service.appwrite.mariadbPort}
-		readonly
-		disabled
-	/>
-</div> -->
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="mariadbUser">{$t('forms.username')}</label>
-	<CopyPasswordField
-		name="mariadbUser"
-		id="mariadbUser"
-		value={service.appwrite.mariadbUser}
-		readonly
-		disabled
-	/>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="mariadbPassword">{$t('forms.password')}</label>
-	<CopyPasswordField
-		id="mariadbPassword"
-		isPasswordField
-		readonly
-		disabled
-		name="mariadbPassword"
-		value={service.appwrite.mariadbPassword}
-	/>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="mariadbRootUser">Root User</label>
-	<CopyPasswordField
-		name="mariadbRootUser"
-		id="mariadbRootUser"
-		value={service.appwrite.mariadbRootUser}
-		readonly
-		disabled
-	/>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="mariadbRootUserPassword">Root Password</label>
-	<CopyPasswordField
-		id="mariadbRootUserPassword"
-		isPasswordField
-		readonly
-		disabled
-		name="mariadbRootUserPassword"
-		value={service.appwrite.mariadbRootUserPassword}
-	/>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="mariadbDatabase">{$t('index.database')}</label>
-	<CopyPasswordField
-		name="mariadbDatabase"
-		id="mariadbDatabase"
-		value={service.appwrite.mariadbDatabase}
-		readonly
-		disabled
-	/>
+<div class="space-y-2">	
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="mariadbUser">{$t('forms.username')}</label>
+		<CopyPasswordField
+			name="mariadbUser"
+			id="mariadbUser"
+			value={service.appwrite.mariadbUser}
+			readonly
+			disabled
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2 ">
+		<label for="mariadbPassword">{$t('forms.password')}</label>
+		<CopyPasswordField
+			id="mariadbPassword"
+			isPasswordField
+			readonly
+			disabled
+			name="mariadbPassword"
+			value={service.appwrite.mariadbPassword}
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="mariadbRootUser">Root User</label>
+		<CopyPasswordField
+			name="mariadbRootUser"
+			id="mariadbRootUser"
+			value={service.appwrite.mariadbRootUser}
+			readonly
+			disabled
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2 ">
+		<label for="mariadbRootUserPassword">Root Password</label>
+		<CopyPasswordField
+			id="mariadbRootUserPassword"
+			isPasswordField
+			readonly
+			disabled
+			name="mariadbRootUserPassword"
+			value={service.appwrite.mariadbRootUserPassword}
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="mariadbDatabase">{$t('index.database')}</label>
+		<CopyPasswordField
+			name="mariadbDatabase"
+			id="mariadbDatabase"
+			value={service.appwrite.mariadbDatabase}
+			readonly
+			disabled
+		/>
+	</div>
 </div>
diff --git a/apps/ui/src/routes/services/[id]/_Services/_Fider.svelte b/apps/ui/src/routes/services/[id]/_Services/_Fider.svelte
index f2d316fe5..868b8ebd0 100644
--- a/apps/ui/src/routes/services/[id]/_Services/_Fider.svelte
+++ b/apps/ui/src/routes/services/[id]/_Services/_Fider.svelte
@@ -21,163 +21,174 @@
 	<div class="title">Fider</div>
 </div>
 
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="jwtSecret">JWT Secret</label>
-	<CopyPasswordField
-		name="jwtSecret"
-		id="jwtSecret"
-		isPasswordField
-		value={service.fider.jwtSecret}
-		readonly
-		disabled
-	/>
-</div>
+<div class="space-y-2">
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="jwtSecret">JWT Secret</label>
+		<CopyPasswordField
+			name="jwtSecret"
+			id="jwtSecret"
+			isPasswordField
+			value={service.fider.jwtSecret}
+			readonly
+			disabled
+		/>
+	</div>
 
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="emailNoreply">Noreply Email</label>
-	<input
-		name="emailNoreply"
-		id="emailNoreply"
-		type="email"
-		required
-		readonly={readOnly}
-		disabled={readOnly}
-		bind:value={service.fider.emailNoreply}
-		placeholder="{$t('forms.eg')}: noreply@yourdomain.com"
-	/>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="emailNoreply">Noreply Email</label>
+		<input
+			class="w-full"
+			name="emailNoreply"
+			id="emailNoreply"
+			type="email"
+			required
+			readonly={readOnly}
+			disabled={readOnly}
+			bind:value={service.fider.emailNoreply}
+			placeholder="{$t('forms.eg')}: noreply@yourdomain.com"
+		/>
+	</div>
 </div>
 <div class="flex space-x-1 py-5 font-bold">
 	<div class="title">Email</div>
 </div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="emailMailgunApiKey">Mailgun API Key</label>
-	<CopyPasswordField
-		name="emailMailgunApiKey"
-		id="emailMailgunApiKey"
-		isPasswordField
-		bind:value={service.fider.emailMailgunApiKey}
-		readonly={readOnly}
-		disabled={readOnly}
-		placeholder="{$t('forms.eg')}: key-yourkeygoeshere"
-	/>
-</div>
-
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="emailMailgunDomain">Mailgun Domain</label>
-	<input
-		name="emailMailgunDomain"
-		id="emailMailgunDomain"
-		readonly={readOnly}
-		disabled={readOnly}
-		bind:value={service.fider.emailMailgunDomain}
-		placeholder="{$t('forms.eg')}: yourdomain.com"
-	/>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="emailMailgunRegion">Mailgun Region</label>
-	<div class="custom-select-wrapper">
-		<Select
-			id="baseBuildImages"
-			items={mailgunRegions}
-			showIndicator
-			on:select={(event) => (service.fider.emailMailgunRegion = event.detail.value)}
-			value={service.fider.emailMailgunRegion || 'EU'}
-			isClearable={false}
+<div class="space-y-2">
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="emailMailgunApiKey">Mailgun API Key</label>
+		<CopyPasswordField
+			name="emailMailgunApiKey"
+			id="emailMailgunApiKey"
+			isPasswordField
+			bind:value={service.fider.emailMailgunApiKey}
+			readonly={readOnly}
+			disabled={readOnly}
+			placeholder="{$t('forms.eg')}: key-yourkeygoeshere"
 		/>
 	</div>
-</div>
 
-<div class="flex space-x-1 py-5 px-10 font-bold">
-	<div class="text-lg">Or</div>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="emailSmtpHost">SMTP Host</label>
-	<input
-		name="emailSmtpHost"
-		id="emailSmtpHost"
-		readonly={readOnly}
-		disabled={readOnly}
-		bind:value={service.fider.emailSmtpHost}
-		placeholder="{$t('forms.eg')}: smtp.yourdomain.com"
-	/>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="emailSmtpPort">SMTP Port</label>
-	<input
-		name="emailSmtpPort"
-		id="emailSmtpPort"
-		readonly={readOnly}
-		disabled={readOnly}
-		bind:value={service.fider.emailSmtpPort}
-		placeholder="{$t('forms.eg')}: 587"
-	/>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="emailSmtpUser">SMTP User</label>
-	<input
-		name="emailSmtpUser"
-		id="emailSmtpUser"
-		readonly={readOnly}
-		disabled={readOnly}
-		bind:value={service.fider.emailSmtpUser}
-		placeholder="{$t('forms.eg')}: user@yourdomain.com"
-	/>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="emailSmtpPassword">SMTP Password</label>
-	<CopyPasswordField
-		name="emailSmtpPassword"
-		id="emailSmtpPassword"
-		isPasswordField
-		bind:value={service.fider.emailSmtpPassword}
-		readonly={readOnly}
-		disabled={readOnly}
-		placeholder="{$t('forms.eg')}: s0m3p4ssw0rd"
-	/>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="emailSmtpEnableStartTls">SMTP Start TLS</label>
-	<input
-		name="emailSmtpEnableStartTls"
-		id="emailSmtpEnableStartTls"
-		readonly={readOnly}
-		disabled={readOnly}
-		bind:value={service.fider.emailSmtpEnableStartTls}
-		placeholder="{$t('forms.eg')}: true"
-	/>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="emailMailgunDomain">Mailgun Domain</label>
+		<input
+			class="w-full"
+			name="emailMailgunDomain"
+			id="emailMailgunDomain"
+			readonly={readOnly}
+			disabled={readOnly}
+			bind:value={service.fider.emailMailgunDomain}
+			placeholder="{$t('forms.eg')}: yourdomain.com"
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="emailMailgunRegion">Mailgun Region</label>
+		<div class="custom-select-wrapper">
+			<Select
+				id="baseBuildImages"
+				items={mailgunRegions}
+				showIndicator
+				on:select={(event) => (service.fider.emailMailgunRegion = event.detail.value)}
+				value={service.fider.emailMailgunRegion || 'EU'}
+				isClearable={false}
+			/>
+		</div>
+	</div>
+
+	<div class="flex space-x-1 py-5 lg:px-10 px-2 font-bold">
+		<div class="text-lg">Or</div>
+	</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="emailSmtpHost">SMTP Host</label>
+		<input
+			class="w-full"
+			name="emailSmtpHost"
+			id="emailSmtpHost"
+			readonly={readOnly}
+			disabled={readOnly}
+			bind:value={service.fider.emailSmtpHost}
+			placeholder="{$t('forms.eg')}: smtp.yourdomain.com"
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="emailSmtpPort">SMTP Port</label>
+		<input
+			class="w-full"
+			name="emailSmtpPort"
+			id="emailSmtpPort"
+			readonly={readOnly}
+			disabled={readOnly}
+			bind:value={service.fider.emailSmtpPort}
+			placeholder="{$t('forms.eg')}: 587"
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="emailSmtpUser">SMTP User</label>
+		<input
+			class="w-full"
+			name="emailSmtpUser"
+			id="emailSmtpUser"
+			readonly={readOnly}
+			disabled={readOnly}
+			bind:value={service.fider.emailSmtpUser}
+			placeholder="{$t('forms.eg')}: user@yourdomain.com"
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="emailSmtpPassword">SMTP Password</label>
+		<CopyPasswordField
+			name="emailSmtpPassword"
+			id="emailSmtpPassword"
+			isPasswordField
+			bind:value={service.fider.emailSmtpPassword}
+			readonly={readOnly}
+			disabled={readOnly}
+			placeholder="{$t('forms.eg')}: s0m3p4ssw0rd"
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="emailSmtpEnableStartTls">SMTP Start TLS</label>
+		<input
+			class="w-full"
+			name="emailSmtpEnableStartTls"
+			id="emailSmtpEnableStartTls"
+			readonly={readOnly}
+			disabled={readOnly}
+			bind:value={service.fider.emailSmtpEnableStartTls}
+			placeholder="{$t('forms.eg')}: true"
+		/>
+	</div>
 </div>
 <div class="flex space-x-1 py-5 font-bold">
 	<div class="title">PostgreSQL</div>
 </div>
-
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="postgresqlUser">{$t('forms.username')}</label>
-	<CopyPasswordField
-		name="postgresqlUser"
-		id="postgresqlUser"
-		value={service.fider.postgresqlUser}
-		readonly
-		disabled
-	/>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="postgresqlPassword">{$t('forms.password')}</label>
-	<CopyPasswordField
-		id="postgresqlPassword"
-		isPasswordField
-		readonly
-		disabled
-		name="postgresqlPassword"
-		value={service.fider.postgresqlPassword}
-	/>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="postgresqlDatabase">{$t('index.database')}</label>
-	<CopyPasswordField
-		name="postgresqlDatabase"
-		id="postgresqlDatabase"
-		value={service.fider.postgresqlDatabase}
-		readonly
-		disabled
-	/>
+<div class="space-y-2">
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="postgresqlUser">{$t('forms.username')}</label>
+		<CopyPasswordField
+			name="postgresqlUser"
+			id="postgresqlUser"
+			value={service.fider.postgresqlUser}
+			readonly
+			disabled
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="postgresqlPassword">{$t('forms.password')}</label>
+		<CopyPasswordField
+			id="postgresqlPassword"
+			isPasswordField
+			readonly
+			disabled
+			name="postgresqlPassword"
+			value={service.fider.postgresqlPassword}
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="postgresqlDatabase">{$t('index.database')}</label>
+		<CopyPasswordField
+			name="postgresqlDatabase"
+			id="postgresqlDatabase"
+			value={service.fider.postgresqlDatabase}
+			readonly
+			disabled
+		/>
+	</div>
 </div>
diff --git a/apps/ui/src/routes/services/[id]/_Services/_Ghost.svelte b/apps/ui/src/routes/services/[id]/_Services/_Ghost.svelte
index 7af0c8e1d..2f9f9b6bd 100644
--- a/apps/ui/src/routes/services/[id]/_Services/_Ghost.svelte
+++ b/apps/ui/src/routes/services/[id]/_Services/_Ghost.svelte
@@ -8,12 +8,14 @@
 
 <div class="flex space-x-1 py-5">
 	<div class="title">
-		Ghost <Explainer explanation="You can change these values in the Ghost admin panel." />
+		Ghost <Explainer explanation="You can change these values in the <span class='text-settings'>Ghost admin panel<span>." />
 	</div>
 </div>
-<div class="grid grid-cols-2 items-center px-10">
+<div class="space-y-2">
+<div class="grid grid-cols-2 items-center lg:px-10 px-2">
 	<label for="email">{$t('forms.default_email_address')}</label>
 	<input
+		class="w-full"
 		name="email"
 		id="email"
 		disabled
@@ -23,7 +25,7 @@
 		required
 	/>
 </div>
-<div class="grid grid-cols-2 items-center px-10">
+<div class="grid grid-cols-2 items-center lg:px-10 px-2">
 	<label for="defaultPassword">{$t('forms.default_password')}</label>
 	<CopyPasswordField
 		id="defaultPassword"
@@ -34,10 +36,12 @@
 		value={service.ghost.defaultPassword}
 	/>
 </div>
+</div>
 <div class="flex space-x-1 py-5 font-bold">
 	<div class="title">MariaDB</div>
 </div>
-<div class="grid grid-cols-2 items-center px-10">
+<div class="space-y-2">
+<div class="grid grid-cols-2 items-center lg:px-10 px-2">
 	<label for="mariadbUser">{$t('forms.username')}</label>
 	<CopyPasswordField
 		name="mariadbUser"
@@ -47,7 +51,7 @@
 		disabled
 	/>
 </div>
-<div class="grid grid-cols-2 items-center px-10">
+<div class="grid grid-cols-2 items-center lg:px-10 px-2">
 	<label for="mariadbPassword">{$t('forms.password')}</label>
 	<CopyPasswordField
 		id="mariadbPassword"
@@ -58,9 +62,10 @@
 		value={service.ghost.mariadbPassword}
 	/>
 </div>
-<div class="grid grid-cols-2 items-center px-10">
+<div class="grid grid-cols-2 items-center lg:px-10 px-2">
 	<label for="mariadbDatabase">{$t('index.database')}</label>
 	<input
+		class="w-full"
 		name="mariadbDatabase"
 		id="mariadbDatabase"
 		required
@@ -70,7 +75,7 @@
 		placeholder="{$t('forms.eg')}: ghost_db"
 	/>
 </div>
-<div class="grid grid-cols-2 items-center px-10">
+<div class="grid grid-cols-2 items-center lg:px-10 px-2">
 	<label for="mariadbRootUser">{$t('forms.root_db_user')}</label>
 	<CopyPasswordField
 		id="mariadbRootUser"
@@ -80,7 +85,7 @@
 		value={service.ghost.mariadbRootUser}
 	/>
 </div>
-<div class="grid grid-cols-2 items-center px-10">
+<div class="grid grid-cols-2 items-center lg:px-10 px-2">
 	<label for="mariadbRootUserPassword">{$t('forms.root_db_password')}</label>
 	<CopyPasswordField
 		id="mariadbRootUserPassword"
@@ -91,3 +96,4 @@
 		value={service.ghost.mariadbRootUserPassword}
 	/>
 </div>
+</div>
\ No newline at end of file
diff --git a/apps/ui/src/routes/services/[id]/_Services/_GlitchTip.svelte b/apps/ui/src/routes/services/[id]/_Services/_GlitchTip.svelte
index c4b4dc5e6..2d824b484 100644
--- a/apps/ui/src/routes/services/[id]/_Services/_GlitchTip.svelte
+++ b/apps/ui/src/routes/services/[id]/_Services/_GlitchTip.svelte
@@ -53,7 +53,7 @@
 	<div class="title">GlitchTip</div>
 </div>
 
-<div class="grid grid-cols-2 items-center px-10">
+<div class="grid grid-cols-2 items-center lg:px-10 px-2">
 	<Setting
 		id="enableOpenUserRegistration"
 		bind:setting={service.glitchTip.enableOpenUserRegistration}
@@ -74,171 +74,173 @@
 <div class="flex space-x-1 py-2 font-bold">
 	<div class="subtitle">Email settings</div>
 </div>
-<div class="grid grid-cols-2 items-center px-10">
-	<Setting
-		id="emailSmtpUseTls"
-		bind:setting={service.glitchTip.emailSmtpUseTls}
-		{loading}
-		disabled={$status.service.isRunning}
-		on:click={() => changeSettings('emailSmtpUseTls')}
-		title="Use TLS for SMTP"
-		description={''}
-	/>
-</div>
+<div class="space-y-2">
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<Setting
+			id="emailSmtpUseTls"
+			bind:setting={service.glitchTip.emailSmtpUseTls}
+			{loading}
+			disabled={$status.service.isRunning}
+			on:click={() => changeSettings('emailSmtpUseTls')}
+			title="Use TLS for SMTP"
+			description={''}
+		/>
+	</div>
 
-<div class="grid grid-cols-2 items-center px-10">
-	<Setting
-		id="emailSmtpUseSsl"
-		bind:setting={service.glitchTip.emailSmtpUseSsl}
-		{loading}
-		disabled={$status.service.isRunning}
-		on:click={() => changeSettings('emailSmtpUseSsl')}
-		title="Use SSL for SMTP"
-		description={''}
-	/>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="defaultEmailFrom">Default Email From</label>
-	<CopyPasswordField
-		required
-		name="defaultEmailFrom"
-		id="defaultEmailFrom"
-		bind:value={service.glitchTip.defaultEmailFrom}
-	/>
-</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<Setting
+			id="emailSmtpUseSsl"
+			bind:setting={service.glitchTip.emailSmtpUseSsl}
+			{loading}
+			disabled={$status.service.isRunning}
+			on:click={() => changeSettings('emailSmtpUseSsl')}
+			title="Use SSL for SMTP"
+			description={''}
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="defaultEmailFrom">Default Email From</label>
+		<CopyPasswordField
+			required
+			name="defaultEmailFrom"
+			id="defaultEmailFrom"
+			bind:value={service.glitchTip.defaultEmailFrom}
+		/>
+	</div>
 
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="emailSmtpHost">SMTP Host</label>
-	<CopyPasswordField
-		name="emailSmtpHost"
-		id="emailSmtpHost"
-		bind:value={service.glitchTip.emailSmtpHost}
-	/>
-</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="emailSmtpHost">SMTP Host</label>
+		<CopyPasswordField
+			name="emailSmtpHost"
+			id="emailSmtpHost"
+			bind:value={service.glitchTip.emailSmtpHost}
+		/>
+	</div>
 
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="emailSmtpPort">SMTP Port</label>
-	<CopyPasswordField
-		name="emailSmtpPort"
-		id="emailSmtpPort"
-		bind:value={service.glitchTip.emailSmtpPort}
-	/>
-</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="emailSmtpPort">SMTP Port</label>
+		<CopyPasswordField
+			name="emailSmtpPort"
+			id="emailSmtpPort"
+			bind:value={service.glitchTip.emailSmtpPort}
+		/>
+	</div>
 
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="emailSmtpUser">SMTP User</label>
-	<CopyPasswordField
-		name="emailSmtpUser"
-		id="emailSmtpUser"
-		bind:value={service.glitchTip.emailSmtpUser}
-	/>
-</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="emailSmtpUser">SMTP User</label>
+		<CopyPasswordField
+			name="emailSmtpUser"
+			id="emailSmtpUser"
+			bind:value={service.glitchTip.emailSmtpUser}
+		/>
+	</div>
 
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="emailSmtpPassword">SMTP Password</label>
-	<CopyPasswordField
-		name="emailSmtpPassword"
-		id="emailSmtpPassword"
-		bind:value={service.glitchTip.emailSmtpPassword}
-		isPasswordField
-	/>
-</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="emailSmtpPassword">SMTP Password</label>
+		<CopyPasswordField
+			name="emailSmtpPassword"
+			id="emailSmtpPassword"
+			bind:value={service.glitchTip.emailSmtpPassword}
+			isPasswordField
+		/>
+	</div>
 
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="emailBackend">Email Backend</label>
-	<CopyPasswordField
-		name="emailBackend"
-		id="emailBackend"
-		bind:value={service.glitchTip.emailBackend}
-	/>
-</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="emailBackend">Email Backend</label>
+		<CopyPasswordField
+			name="emailBackend"
+			id="emailBackend"
+			bind:value={service.glitchTip.emailBackend}
+		/>
+	</div>
 
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="mailgunApiKey">Mailgun API Key</label>
-	<CopyPasswordField
-		name="mailgunApiKey"
-		id="mailgunApiKey"
-		bind:value={service.glitchTip.mailgunApiKey}
-	/>
-</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="mailgunApiKey">Mailgun API Key</label>
+		<CopyPasswordField
+			name="mailgunApiKey"
+			id="mailgunApiKey"
+			bind:value={service.glitchTip.mailgunApiKey}
+		/>
+	</div>
 
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="sendgridApiKey">SendGrid API Key</label>
-	<CopyPasswordField
-		name="sendgridApiKey"
-		id="sendgridApiKey"
-		bind:value={service.glitchTip.sendgridApiKey}
-	/>
-</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="sendgridApiKey">SendGrid API Key</label>
+		<CopyPasswordField
+			name="sendgridApiKey"
+			id="sendgridApiKey"
+			bind:value={service.glitchTip.sendgridApiKey}
+		/>
+	</div>
 
-<div class="flex space-x-1 py-2 font-bold">
-	<div class="subtitle">Default User & Superuser</div>
-</div>
+	<div class="flex space-x-1 py-2 font-bold">
+		<div class="subtitle">Default User & Superuser</div>
+	</div>
 
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="defaultEmail">{$t('forms.email')}</label>
-	<CopyPasswordField
-		name="defaultEmail"
-		id="defaultEmail"
-		bind:value={service.glitchTip.defaultEmail}
-		readonly
-		disabled
-	/>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="defaultEmail">{$t('forms.email')}</label>
+		<CopyPasswordField
+			name="defaultEmail"
+			id="defaultEmail"
+			bind:value={service.glitchTip.defaultEmail}
+			readonly
+			disabled
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="defaultUsername">{$t('forms.username')}</label>
+		<CopyPasswordField
+			name="defaultUsername"
+			id="defaultUsername"
+			bind:value={service.glitchTip.defaultUsername}
+			readonly
+			disabled
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="defaultPassword">{$t('forms.password')}</label>
+		<CopyPasswordField
+			name="defaultPassword"
+			id="defaultPassword"
+			bind:value={service.glitchTip.defaultPassword}
+			readonly
+			disabled
+			isPasswordField
+		/>
+	</div>
 </div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="defaultUsername">{$t('forms.username')}</label>
-	<CopyPasswordField
-		name="defaultUsername"
-		id="defaultUsername"
-		bind:value={service.glitchTip.defaultUsername}
-		readonly
-		disabled
-	/>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="defaultPassword">{$t('forms.password')}</label>
-	<CopyPasswordField
-		name="defaultPassword"
-		id="defaultPassword"
-		bind:value={service.glitchTip.defaultPassword}
-		readonly
-		disabled
-		isPasswordField
-	/>
-</div>
-
 <div class="flex space-x-1 py-5 font-bold">
 	<div class="title">PostgreSQL</div>
 </div>
-
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="postgresqlUser">{$t('forms.username')}</label>
-	<CopyPasswordField
-		name="postgresqlUser"
-		id="postgresqlUser"
-		bind:value={service.glitchTip.postgresqlUser}
-		readonly
-		disabled
-	/>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="postgresqlPassword">{$t('forms.password')}</label>
-	<CopyPasswordField
-		id="postgresqlPassword"
-		isPasswordField
-		readonly
-		disabled
-		name="postgresqlPassword"
-		bind:value={service.glitchTip.postgresqlPassword}
-	/>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="postgresqlDatabase">{$t('index.database')}</label>
-	<CopyPasswordField
-		name="postgresqlDatabase"
-		id="postgresqlDatabase"
-		bind:value={service.glitchTip.postgresqlDatabase}
-		readonly
-		disabled
-	/>
+<div class="space-y-2">
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="postgresqlUser">{$t('forms.username')}</label>
+		<CopyPasswordField
+			name="postgresqlUser"
+			id="postgresqlUser"
+			bind:value={service.glitchTip.postgresqlUser}
+			readonly
+			disabled
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="postgresqlPassword">{$t('forms.password')}</label>
+		<CopyPasswordField
+			id="postgresqlPassword"
+			isPasswordField
+			readonly
+			disabled
+			name="postgresqlPassword"
+			bind:value={service.glitchTip.postgresqlPassword}
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="postgresqlDatabase">{$t('index.database')}</label>
+		<CopyPasswordField
+			name="postgresqlDatabase"
+			id="postgresqlDatabase"
+			bind:value={service.glitchTip.postgresqlDatabase}
+			readonly
+			disabled
+		/>
+	</div>
 </div>
diff --git a/apps/ui/src/routes/services/[id]/_Services/_Hasura.svelte b/apps/ui/src/routes/services/[id]/_Services/_Hasura.svelte
index cb26d5767..0c5403c7b 100644
--- a/apps/ui/src/routes/services/[id]/_Services/_Hasura.svelte
+++ b/apps/ui/src/routes/services/[id]/_Services/_Hasura.svelte
@@ -8,7 +8,7 @@
 	<div class="title">Hasura</div>
 </div>
 
-<div class="grid grid-cols-2 items-center px-10">
+<div class="grid grid-cols-2 items-center lg:px-10 px-2">
 	<label for="graphQLAdminPassword">GraphQL Admin Password</label>
 	<CopyPasswordField
 		name="graphQLAdminPassword"
@@ -24,34 +24,36 @@
 	<div class="title">PostgreSQL</div>
 </div>
 
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="postgresqlUser">{$t('forms.username')}</label>
-	<CopyPasswordField
-		name="postgresqlUser"
-		id="postgresqlUser"
-		value={service.hasura.postgresqlUser}
-		readonly
-		disabled
-	/>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="postgresqlPassword">{$t('forms.password')}</label>
-	<CopyPasswordField
-		id="postgresqlPassword"
-		isPasswordField
-		readonly
-		disabled
-		name="postgresqlPassword"
-		value={service.hasura.postgresqlPassword}
-	/>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="postgresqlDatabase">{$t('index.database')}</label>
-	<CopyPasswordField
-		name="postgresqlDatabase"
-		id="postgresqlDatabase"
-		value={service.hasura.postgresqlDatabase}
-		readonly
-		disabled
-	/>
+<div class="space-y-2">
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="postgresqlUser">{$t('forms.username')}</label>
+		<CopyPasswordField
+			name="postgresqlUser"
+			id="postgresqlUser"
+			value={service.hasura.postgresqlUser}
+			readonly
+			disabled
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="postgresqlPassword">{$t('forms.password')}</label>
+		<CopyPasswordField
+			id="postgresqlPassword"
+			isPasswordField
+			readonly
+			disabled
+			name="postgresqlPassword"
+			value={service.hasura.postgresqlPassword}
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="postgresqlDatabase">{$t('index.database')}</label>
+		<CopyPasswordField
+			name="postgresqlDatabase"
+			id="postgresqlDatabase"
+			value={service.hasura.postgresqlDatabase}
+			readonly
+			disabled
+		/>
+	</div>
 </div>
diff --git a/apps/ui/src/routes/services/[id]/_Services/_MeiliSearch.svelte b/apps/ui/src/routes/services/[id]/_Services/_MeiliSearch.svelte
index f34f9822c..fe8714938 100644
--- a/apps/ui/src/routes/services/[id]/_Services/_MeiliSearch.svelte
+++ b/apps/ui/src/routes/services/[id]/_Services/_MeiliSearch.svelte
@@ -7,7 +7,7 @@
 <div class="flex space-x-1 py-5 font-bold">
 	<div class="title">MeiliSearch</div>
 </div>
-<div class="grid grid-cols-2 items-center px-10">
+<div class="grid grid-cols-2 items-center lg:px-10 px-2">
 	<label for="masterKey">{$t('forms.admin_api_key')}</label>
 	<CopyPasswordField
 		id="masterKey"
diff --git a/apps/ui/src/routes/services/[id]/_Services/_MinIO.svelte b/apps/ui/src/routes/services/[id]/_Services/_MinIO.svelte
index 002486d68..6aa1cef91 100644
--- a/apps/ui/src/routes/services/[id]/_Services/_MinIO.svelte
+++ b/apps/ui/src/routes/services/[id]/_Services/_MinIO.svelte
@@ -8,38 +8,42 @@
 <div class="flex space-x-1 py-5 font-bold">
 	<div class="title">MinIO</div>
 </div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="rootUser">{$t('forms.root_user')}</label>
-	<input
-		name="rootUser"
-		id="rootUser"
-		placeholder={$t('forms.username')}
-		value={service.minio.rootUser}
-		disabled
-		readonly
-	/>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="rootUserPassword">{$t('forms.roots_password')}</label>
-	<CopyPasswordField
-		id="rootUserPassword"
-		isPasswordField
-		readonly
-		disabled
-		name="rootUserPassword"
-		value={service.minio.rootUserPassword}
-	/>
-</div>
-{#if !service.minio.apiFqdn}
-	<div class="grid grid-cols-2 items-center px-10">
-		<label for="publicPort">{$t('forms.api_port')}</label>
+<div class="space-y-2">
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="rootUser">{$t('forms.root_user')}</label>
 		<input
-			name="publicPort"
-			id="publicPort"
-			value={service.minio.publicPort}
+			class="w-full"
+			name="rootUser"
+			id="rootUser"
+			placeholder={$t('forms.username')}
+			value={service.minio.rootUser}
 			disabled
 			readonly
-			placeholder={$t('forms.generated_automatically_after_start')}
 		/>
 	</div>
-{/if}
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="rootUserPassword">{$t('forms.roots_password')}</label>
+		<CopyPasswordField
+			id="rootUserPassword"
+			isPasswordField
+			readonly
+			disabled
+			name="rootUserPassword"
+			value={service.minio.rootUserPassword}
+		/>
+	</div>
+	{#if !service.minio.apiFqdn}
+		<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+			<label for="publicPort">{$t('forms.api_port')}</label>
+			<input
+				class="w-full"
+				name="publicPort"
+				id="publicPort"
+				value={service.minio.publicPort}
+				disabled
+				readonly
+				placeholder={$t('forms.generated_automatically_after_start')}
+			/>
+		</div>
+	{/if}
+</div>
diff --git a/apps/ui/src/routes/services/[id]/_Services/_Moodle.svelte b/apps/ui/src/routes/services/[id]/_Services/_Moodle.svelte
index 6cc8cc1fd..dc333ae66 100644
--- a/apps/ui/src/routes/services/[id]/_Services/_Moodle.svelte
+++ b/apps/ui/src/routes/services/[id]/_Services/_Moodle.svelte
@@ -8,9 +8,10 @@
 <div class="flex space-x-1 py-5 font-bold">
 	<div class="title">Moodle</div>
 </div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="email">{$t('forms.default_email_address')}</label>
-	<input
+<div class="grid grid-cols-2 items-center lg:px-10">
+	<label class="text-base font-bold text-stone-100" for="email">{$t('forms.default_email_address')}</label>
+	<input 
+		class="w-full"
 		name="email"
 		id="email"
 		required
@@ -20,8 +21,8 @@
 		value={service.moodle.defaultEmail}
 	/>
 </div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="defaultUsername">Default Username</label>
+<div class="grid grid-cols-2 items-center lg:px-10">
+	<label class="text-base font-bold text-stone-100" for="defaultUsername">Default Username</label>
 	<CopyPasswordField
 		id="defaultUsername"
 		required
@@ -31,8 +32,8 @@
 		value={service.moodle.defaultUsername}
 	/>
 </div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="defaultPassword">{$t('forms.default_password')}</label>
+<div class="grid grid-cols-2 items-center lg:px-10">
+	<label class="text-base font-bold text-stone-100" for="defaultPassword">{$t('forms.default_password')}</label>
 	<CopyPasswordField
 		id="defaultPassword"
 		isPasswordField
@@ -46,8 +47,8 @@
 <div class="flex space-x-1 py-5 font-bold">
 	<div class="title">MariaDB</div>
 </div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="mariadbUser">{$t('forms.username')}</label>
+<div class="grid grid-cols-2 items-center lg:px-10">
+	<label class="text-base font-bold text-stone-100" for="mariadbUser">{$t('forms.username')}</label>
 	<CopyPasswordField
 		name="mariadbUser"
 		id="mariadbUser"
@@ -56,8 +57,8 @@
 		disabled
 	/>
 </div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="mariadbPassword">{$t('forms.password')}</label>
+<div class="grid grid-cols-2 items-center lg:px-10">
+	<label class="text-base font-bold text-stone-100" for="mariadbPassword">{$t('forms.password')}</label>
 	<CopyPasswordField
 		id="mariadbPassword"
 		isPasswordField
@@ -67,9 +68,10 @@
 		value={service.moodle.mariadbPassword}
 	/>
 </div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="mariadbDatabase">{$t('index.database')}</label>
-	<input
+<div class="grid grid-cols-2 items-center lg:px-10">
+	<label class="text-base font-bold text-stone-100" for="mariadbDatabase">{$t('index.database')}</label>
+	<input 
+		class="w-full"
 		name="mariadbDatabase"
 		id="mariadbDatabase"
 		required
@@ -79,8 +81,8 @@
 		placeholder="{$t('forms.eg')}: moodle_db"
 	/>
 </div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="mariadbRootUser">{$t('forms.root_db_user')}</label>
+<div class="grid grid-cols-2 items-center lg:px-10">
+	<label class="text-base font-bold text-stone-100" for="mariadbRootUser">{$t('forms.root_db_user')}</label>
 	<CopyPasswordField
 		id="mariadbRootUser"
 		readonly
@@ -89,8 +91,8 @@
 		value={service.moodle.mariadbRootUser}
 	/>
 </div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="mariadbRootUserPassword">{$t('forms.root_db_password')}</label>
+<div class="grid grid-cols-2 items-center lg:px-10">
+	<label class="text-base font-bold text-stone-100" for="mariadbRootUserPassword">{$t('forms.root_db_password')}</label>
 	<CopyPasswordField
 		id="mariadbRootUserPassword"
 		isPasswordField
diff --git a/apps/ui/src/routes/services/[id]/_Services/_PlausibleAnalytics.svelte b/apps/ui/src/routes/services/[id]/_Services/_PlausibleAnalytics.svelte
index fee1d8062..84a78f4c1 100644
--- a/apps/ui/src/routes/services/[id]/_Services/_PlausibleAnalytics.svelte
+++ b/apps/ui/src/routes/services/[id]/_Services/_PlausibleAnalytics.svelte
@@ -10,94 +10,94 @@
 <div class="flex space-x-1 py-5 font-bold">
 	<div class="title">Plausible Analytics</div>
 </div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="scriptName"
-		>Script Name <Explainer
-			explanation="Useful if you would like to rename the collector script to prevent it blocked by AdBlockers."
-		/></label
-	>
-	<input
-		name="scriptName"
-		id="scriptName"
-		readonly={!$appSession.isAdmin && !$status.service.isRunning}
-		disabled={!$appSession.isAdmin ||
-			$status.service.isRunning ||
-			$status.service.initialLoading}
-		placeholder="plausible.js"
-		bind:value={service.plausibleAnalytics.scriptName}
-		required
-	/>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="email">{$t('forms.email')}</label>
-	<input
-		name="email"
-		id="email"
-		disabled={!$appSession.isAdmin ||
-			$status.service.isRunning ||
-			$status.service.initialLoading}
-		readonly={readOnly}
-		placeholder={$t('forms.email')}
-		bind:value={service.plausibleAnalytics.email}
-		required
-	/>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="username">{$t('forms.username')}</label>
-	<CopyPasswordField
-		name="username"
-		id="username"
-		disabled={!$appSession.isAdmin ||
-			$status.service.isRunning ||
-			$status.service.initialLoading}
-		readonly={readOnly}
-		placeholder={$t('forms.username')}
-		bind:value={service.plausibleAnalytics.username}
-		required
-	/>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="password">{$t('forms.password')}</label>
-	<CopyPasswordField
-		id="password"
-		isPasswordField
-		readonly
-		disabled
-		name="password"
-		value={service.plausibleAnalytics.password}
-	/>
+<div class="space-y-2">
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="scriptName"
+			>Script Name <Explainer
+				explanation="Useful if you would like to rename the collector script to prevent it blocked by AdBlockers."
+			/></label
+		>
+		<input
+			class="w-full"
+			name="scriptName"
+			id="scriptName"
+			readonly={!$appSession.isAdmin && !$status.service.isRunning}
+			disabled={!$appSession.isAdmin || $status.service.isRunning || $status.service.initialLoading}
+			placeholder="plausible.js"
+			bind:value={service.plausibleAnalytics.scriptName}
+			required
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="email">{$t('forms.email')}</label>
+		<input
+			class="w-full"
+			name="email"
+			id="email"
+			disabled={!$appSession.isAdmin || $status.service.isRunning || $status.service.initialLoading}
+			readonly={readOnly}
+			placeholder={$t('forms.email')}
+			bind:value={service.plausibleAnalytics.email}
+			required
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="username">{$t('forms.username')}</label>
+		<CopyPasswordField
+			name="username"
+			id="username"
+			disabled={!$appSession.isAdmin || $status.service.isRunning || $status.service.initialLoading}
+			readonly={readOnly}
+			placeholder={$t('forms.username')}
+			bind:value={service.plausibleAnalytics.username}
+			required
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="password">{$t('forms.password')}</label>
+		<CopyPasswordField
+			id="password"
+			isPasswordField
+			readonly
+			disabled
+			name="password"
+			value={service.plausibleAnalytics.password}
+		/>
+	</div>
 </div>
 <div class="flex space-x-1 py-5 font-bold">
 	<div class="title">PostgreSQL</div>
 </div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="postgresqlUser">{$t('forms.username')}</label>
-	<CopyPasswordField
-		name="postgresqlUser"
-		id="postgresqlUser"
-		value={service.plausibleAnalytics.postgresqlUser}
-		readonly
-		disabled
-	/>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="postgresqlPassword">{$t('forms.password')}</label>
-	<CopyPasswordField
-		id="postgresqlPassword"
-		isPasswordField
-		readonly
-		disabled
-		name="postgresqlPassword"
-		value={service.plausibleAnalytics.postgresqlPassword}
-	/>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="postgresqlDatabase">{$t('index.database')}</label>
-	<CopyPasswordField
-		name="postgresqlDatabase"
-		id="postgresqlDatabase"
-		value={service.plausibleAnalytics.postgresqlDatabase}
-		readonly
-		disabled
-	/>
+<div class="space-y-2">
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="postgresqlUser">{$t('forms.username')}</label>
+		<CopyPasswordField
+			name="postgresqlUser"
+			id="postgresqlUser"
+			value={service.plausibleAnalytics.postgresqlUser}
+			readonly
+			disabled
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="postgresqlPassword">{$t('forms.password')}</label>
+		<CopyPasswordField
+			id="postgresqlPassword"
+			isPasswordField
+			readonly
+			disabled
+			name="postgresqlPassword"
+			value={service.plausibleAnalytics.postgresqlPassword}
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="postgresqlDatabase">{$t('index.database')}</label>
+		<CopyPasswordField
+			name="postgresqlDatabase"
+			id="postgresqlDatabase"
+			value={service.plausibleAnalytics.postgresqlDatabase}
+			readonly
+			disabled
+		/>
+	</div>
 </div>
diff --git a/apps/ui/src/routes/services/[id]/_Services/_Searxng.svelte b/apps/ui/src/routes/services/[id]/_Services/_Searxng.svelte
index a4d547d58..d726deb82 100644
--- a/apps/ui/src/routes/services/[id]/_Services/_Searxng.svelte
+++ b/apps/ui/src/routes/services/[id]/_Services/_Searxng.svelte
@@ -8,7 +8,7 @@
 	<div class="title">SearXNG</div>
 </div>
 
-<div class="grid grid-cols-2 items-center px-10">
+<div class="grid grid-cols-2 items-center lg:px-10 px-2">
 	<label for="secretKey">Secret Key</label>
 	<CopyPasswordField
 		name="secretKey"
@@ -23,7 +23,7 @@
 	<div class="title">Redis</div>
 </div>
 
-<div class="grid grid-cols-2 items-center px-10">
+<div class="grid grid-cols-2 items-center lg:px-10 px-2">
 	<label for="redisPassword">{$t('forms.password')}</label>
 	<CopyPasswordField
 		name="redisPassword"
diff --git a/apps/ui/src/routes/services/[id]/_Services/_Services.svelte b/apps/ui/src/routes/services/[id]/_Services/_Services.svelte
index c84f7efa2..030dea368 100644
--- a/apps/ui/src/routes/services/[id]/_Services/_Services.svelte
+++ b/apps/ui/src/routes/services/[id]/_Services/_Services.svelte
@@ -39,6 +39,7 @@
 	import Weblate from './_Weblate.svelte';
 	import Explainer from '$lib/components/Explainer.svelte';
 	import Taiga from './_Taiga.svelte';
+	import DocLink from '$lib/components/DocLink.svelte';
 
 	const { id } = $page.params;
 	$: isDisabled =
@@ -126,6 +127,20 @@
 			loading.verification = false;
 		}
 	}
+	async function migrateAppwriteDB() {
+		loading.verification = true;
+		try {
+			await post(`/services/${id}/${service.type}/migrate`, { id: service.id });
+			return addToast({
+				message: "Appwrite's database has been migrated.",
+				type: 'success'
+			});
+		} catch (error) {
+			return errorNotification(error);
+		} finally {
+			loading.verification = false;
+		}
+	}
 	async function changeSettings(name: any) {
 		try {
 			if (name === 'dualCerts') {
@@ -154,6 +169,9 @@
 			loading.cleanup = false;
 		}
 	}
+	function doNothing() {
+		return;
+	}
 	onMount(async () => {
 		if (browser && window.location.hostname === 'demo.coolify.io' && !service.fqdn) {
 			service.fqdn = `http://${cuid()}.demo.coolify.io`;
@@ -178,68 +196,77 @@
 	});
 </script>
 
-<div class="mx-auto max-w-4xl px-6 pb-12">
+<div class="mx-auto max-w-6xl px-6 pb-12">
 	<form on:submit|preventDefault={handleSubmit} class="py-4">
-		<div class="flex space-x-1 pb-5">
-			<div class="title">{$t('general')}</div>
-			{#if $appSession.isAdmin}
-				<button
-					type="submit"
-					class="btn btn-sm"
-					class:bg-orange-600={forceSave}
-					class:hover:bg-orange-400={forceSave}
-					class:loading={loading.save}
-					class:bg-services={!loading.save}
-					disabled={loading.save}
-					>{loading.save
-						? $t('forms.save')
-						: forceSave
-						? $t('forms.confirm_continue')
-						: $t('forms.save')}</button
-				>
-			{/if}
-			{#if service.type === 'plausibleanalytics' && $status.service.isRunning}
-				<button
-					class="btn btn-sm"
-					on:click|preventDefault={setEmailsToVerified}
-					disabled={loading.verification}
-					class:loading={loading.verification}
-					>{loading.verification
-						? $t('forms.verifying')
-						: $t('forms.verify_emails_without_smtp')}</button
-				>
-				<button
-					class="btn btn-sm"
-					on:click|preventDefault={cleanupLogs}
-					disabled={loading.cleanup}
-					class:loading={loading.cleanup}>Cleanup Unnecessary Database Logs</button
-				>
-			{/if}
+		<div class="flex space-x-1 pb-5 items-center">
+			<h1 class="title">{$t('general')}</h1>
+			<div class="flex flex-row space-x-2 items-center">
+				{#if $appSession.isAdmin}
+					<button
+						type="submit"
+						class="btn btn-sm"
+						class:bg-orange-600={forceSave}
+						class:hover:bg-orange-400={forceSave}
+						class:loading={loading.save}
+						class:bg-services={!loading.save}
+						disabled={loading.save}
+						>{loading.save
+							? $t('forms.save')
+							: forceSave
+							? $t('forms.confirm_continue')
+							: $t('forms.save')}</button
+					>
+				{/if}
+				{#if service.type === 'plausibleanalytics' && $status.service.isRunning}
+					<div class="btn-group">
+						<button
+							class="btn btn-sm"
+							on:click|preventDefault={setEmailsToVerified}
+							disabled={loading.verification}
+							class:loading={loading.verification}
+							>{loading.verification
+								? $t('forms.verifying')
+								: $t('forms.verify_emails_without_smtp')}</button
+						>
+						<button
+							class="btn btn-sm"
+							on:click|preventDefault={cleanupLogs}
+							disabled={loading.cleanup}
+							class:loading={loading.cleanup}>Cleanup Unnecessary Database Logs</button
+						>
+					</div>
+				{/if}
+				{#if service.type === 'appwrite' && $status.service.isRunning}
+					<button
+						class="btn btn-sm"
+						on:click|preventDefault={migrateAppwriteDB}
+						disabled={loading.verification}
+						class:loading={loading.verification}
+						>{loading.verification
+							? 'Migrating... it may take a while...'
+							: "Migrate Appwrite's Database"}</button
+					>
+					<DocLink url="https://appwrite.io/docs/upgrade#run-the-migration" />
+				{/if}
+			</div>
 		</div>
 
-		<div class="grid grid-flow-row gap-2">
-			{#if service.type === 'minio' && !service.minio.apiFqdn && $status.service.isRunning}
-				<div class="text-center">
-					<span class="font-bold text-red-500">IMPORTANT!</span> There was a small modification with
-					Minio in the latest version of Coolify. Now you can separate the Console URL from the API URL,
-					so you could use both through SSL. But this proccess cannot be done automatically, so you have
-					to stop your Minio instance, configure the new domain and start it back. Sorry for any inconvenience.
-				</div>
-			{/if}
-			<div class="mt-2 grid grid-cols-2 items-center px-10">
-				<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
-				<div>
-					<input
-						readonly={!$appSession.isAdmin}
-						name="name"
-						id="name"
-						bind:value={service.name}
-						required
-					/>
-				</div>
+		{#if service.type === 'minio' && !service.minio.apiFqdn && $status.service.isRunning}
+			<div class="py-5">
+				<span class="font-bold text-red-500">IMPORTANT!</span> There was a small modification with Minio
+				in the latest version of Coolify. Now you can separate the Console URL from the API URL, so you
+				could use both through SSL. But this proccess cannot be done automatically, so you have to stop
+				your Minio instance, configure the new domain and start it back. Sorry for any inconvenience.
 			</div>
-			<div class="grid grid-cols-2 items-center px-10">
-				<label for="version" class="text-base font-bold text-stone-100">Version / Tag</label>
+		{/if}
+
+		<div class="grid gap-2 grid-cols-1 grid-rows-1 lg:px-10 px-2">
+			<div class="mt-2 grid grid-cols-2 items-center">
+				<label for="name">{$t('forms.name')}</label>
+				<input name="name" id="name" class="w-full" bind:value={service.name} required />
+			</div>
+			<div class="grid grid-cols-2 items-center">
+				<label for="version">Version / Tag</label>
 				<a
 					href={$appSession.isAdmin && !$status.service.isRunning && !$status.service.initialLoading
 						? `/services/${id}/configuration/version?from=/services/${id}`
@@ -247,6 +274,7 @@
 					class="no-underline"
 				>
 					<input
+						class="w-full"
 						value={service.version}
 						id="service"
 						readonly
@@ -255,10 +283,8 @@
 					/></a
 				>
 			</div>
-			<div class="grid grid-cols-2 items-center px-10">
-				<label for="destination" class="text-base font-bold text-stone-100"
-					>{$t('application.destination')}</label
-				>
+			<div class="grid grid-cols-2 items-center">
+				<label for="destination">{$t('application.destination')}</label>
 				<div>
 					{#if service.destinationDockerId}
 						<div class="no-underline">
@@ -266,17 +292,16 @@
 								value={service.destinationDocker.name}
 								id="destination"
 								disabled
-								class="bg-transparent "
+								class="bg-transparent w-full"
 							/>
 						</div>
 					{/if}
 				</div>
 			</div>
+
 			{#if service.type === 'minio'}
-				<div class="grid grid-cols-2 px-10">
-					<div class="flex-col ">
-						<label for="fqdn" class="pt-2 text-base font-bold text-stone-100">Console URL</label>
-					</div>
+				<div class="grid grid-cols-2 items-center">
+					<label for="fqdn">Console URL</label>
 
 					<CopyPasswordField
 						placeholder="eg: https://console.min.io"
@@ -289,13 +314,10 @@
 						required
 					/>
 				</div>
-				<div class="grid grid-cols-2 px-10">
-					<div class="flex-col ">
-						<label for="apiFqdn" class="pt-2 text-base font-bold text-stone-100"
-							>API URL <Explainer explanation={$t('application.https_explainer')} /></label
-						>
-					</div>
-
+				<div class="grid grid-cols-2 items-center">
+					<label for="apiFqdn"
+						>API URL <Explainer explanation={$t('application.https_explainer')} /></label
+					>
 					<CopyPasswordField
 						placeholder="eg: https://min.io"
 						readonly={!$appSession.isAdmin && !$status.service.isRunning}
@@ -308,14 +330,11 @@
 					/>
 				</div>
 			{:else}
-				<div class="grid grid-cols-2 px-10">
-					<div class="flex-col ">
-						<label for="fqdn" class="pt-2 text-base font-bold text-stone-100"
-							>{$t('application.url_fqdn')}
-							<Explainer explanation={$t('application.https_explainer')} />
-						</label>
-					</div>
-
+				<div class="grid grid-cols-2 items-center">
+					<label for="fqdn"
+						>{$t('application.url_fqdn')}
+						<Explainer explanation={$t('application.https_explainer')} />
+					</label>
 					<CopyPasswordField
 						placeholder="eg: https://analytics.coollabs.io"
 						readonly={!$appSession.isAdmin && !$status.service.isRunning}
@@ -330,39 +349,42 @@
 					/>
 				</div>
 			{/if}
-			{#if forceSave}
-				<div class="flex-col space-y-2 pt-4 text-center">
-					{#if isNonWWWDomainOK}
+		</div>
+		{#if forceSave}
+			<div class="flex-col space-y-2 pt-4 text-center">
+				{#if isNonWWWDomainOK}
+					<button
+						class="btn btn-sm bg-green-600 hover:bg-green-500"
+						on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
+						>DNS settings for {nonWWWDomain} is OK, click to recheck.</button
+					>
+				{:else}
+					<button
+						class="btn btn-sm bg-red-600 hover:bg-red-500"
+						on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
+						>DNS settings for {nonWWWDomain} is invalid, click to recheck.</button
+					>
+				{/if}
+				{#if dualCerts}
+					{#if isWWWDomainOK}
 						<button
 							class="btn btn-sm bg-green-600 hover:bg-green-500"
-							on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
-							>DNS settings for {nonWWWDomain} is OK, click to recheck.</button
+							on:click|preventDefault={() => isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
+							>DNS settings for www.{nonWWWDomain} is OK, click to recheck.</button
 						>
 					{:else}
 						<button
 							class="btn btn-sm bg-red-600 hover:bg-red-500"
-							on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
-							>DNS settings for {nonWWWDomain} is invalid, click to recheck.</button
+							on:click|preventDefault={() => isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
+							>DNS settings for www.{nonWWWDomain} is invalid, click to recheck.</button
 						>
 					{/if}
-					{#if dualCerts}
-						{#if isWWWDomainOK}
-							<button
-								class="btn btn-sm bg-green-600 hover:bg-green-500"
-								on:click|preventDefault={() => isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
-								>DNS settings for www.{nonWWWDomain} is OK, click to recheck.</button
-							>
-						{:else}
-							<button
-								class="btn btn-sm bg-red-600 hover:bg-red-500"
-								on:click|preventDefault={() => isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
-								>DNS settings for www.{nonWWWDomain} is invalid, click to recheck.</button
-							>
-						{/if}
-					{/if}
-				</div>
-			{/if}
-			<div class="grid grid-cols-2 items-center px-10">
+				{/if}
+			</div>
+		{/if}
+
+		<div class="grid grid-flow-row gap-2 lg:px-10 px-2 pt-2">
+			<div class="grid grid-cols-2 items-center">
 				<Setting
 					id="dualCerts"
 					disabled={$status.service.isRunning}
@@ -373,13 +395,14 @@
 					on:click={() => !$status.service.isRunning && changeSettings('dualCerts')}
 				/>
 			</div>
-			<div class="grid grid-cols-2 items-center px-10">
-				<label for="exposePort" class="text-base font-bold text-stone-100"
+			<div class="grid grid-cols-2 items-center">
+				<label for="exposePort"
 					>Exposed Port <Explainer
 						explanation={'You can expose your application to a port on the host system.<br><br>Useful if you would like to use your own reverse proxy or tunnel and also in development mode. Otherwise leave empty.'}
 					/></label
 				>
 				<input
+					class="w-full"
 					readonly={!$appSession.isAdmin && !$status.service.isRunning}
 					disabled={!$appSession.isAdmin ||
 						$status.service.isRunning ||
@@ -390,38 +413,38 @@
 					placeholder="12345"
 				/>
 			</div>
-
-			{#if service.type === 'plausibleanalytics'}
-				<PlausibleAnalytics bind:service {readOnly} />
-			{:else if service.type === 'minio'}
-				<MinIo {service} />
-			{:else if service.type === 'vscodeserver'}
-				<VsCodeServer {service} />
-			{:else if service.type === 'wordpress'}
-				<Wordpress bind:service {readOnly} {settings} />
-			{:else if service.type === 'ghost'}
-				<Ghost bind:service {readOnly} />
-			{:else if service.type === 'meilisearch'}
-				<MeiliSearch bind:service />
-			{:else if service.type === 'umami'}
-				<Umami bind:service />
-			{:else if service.type === 'hasura'}
-				<Hasura bind:service />
-			{:else if service.type === 'fider'}
-				<Fider bind:service {readOnly} />
-			{:else if service.type === 'appwrite'}
-				<Appwrite bind:service {readOnly} />
-			{:else if service.type === 'moodle'}
-				<Moodle bind:service {readOnly} />
-			{:else if service.type === 'glitchTip'}
-				<GlitchTip bind:service />
-			{:else if service.type === 'searxng'}
-				<Searxng bind:service />
-			{:else if service.type === 'weblate'}
-				<Weblate bind:service />
-			{:else if service.type === 'taiga'}
-				<Taiga bind:service />
-			{/if}
+		
 		</div>
+		{#if service.type === 'plausibleanalytics'}
+			<PlausibleAnalytics bind:service {readOnly} />
+		{:else if service.type === 'minio'}
+			<MinIo {service} />
+		{:else if service.type === 'vscodeserver'}
+			<VsCodeServer {service} />
+		{:else if service.type === 'wordpress'}
+			<Wordpress bind:service {readOnly} {settings} />
+		{:else if service.type === 'ghost'}
+			<Ghost bind:service {readOnly} />
+		{:else if service.type === 'meilisearch'}
+			<MeiliSearch bind:service />
+		{:else if service.type === 'umami'}
+			<Umami bind:service />
+		{:else if service.type === 'hasura'}
+			<Hasura bind:service />
+		{:else if service.type === 'fider'}
+			<Fider bind:service {readOnly} />
+		{:else if service.type === 'appwrite'}
+			<Appwrite bind:service {readOnly} />
+		{:else if service.type === 'moodle'}
+			<Moodle bind:service {readOnly} />
+		{:else if service.type === 'glitchTip'}
+			<GlitchTip bind:service />
+		{:else if service.type === 'searxng'}
+			<Searxng bind:service />
+		{:else if service.type === 'weblate'}
+			<Weblate bind:service />
+		{:else if service.type === 'taiga'}
+			<Taiga bind:service />
+		{/if}
 	</form>
 </div>
diff --git a/apps/ui/src/routes/services/[id]/_Services/_Taiga.svelte b/apps/ui/src/routes/services/[id]/_Services/_Taiga.svelte
index 1a29943e9..ca064ef3d 100644
--- a/apps/ui/src/routes/services/[id]/_Services/_Taiga.svelte
+++ b/apps/ui/src/routes/services/[id]/_Services/_Taiga.svelte
@@ -8,8 +8,8 @@
 	<div class="title">Taiga</div>
 </div>
 
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="secretKey">Secret Key</label>
+<div class="grid grid-cols-2 items-center lg:px-10">
+	<label class="text-base font-bold text-stone-100" for="secretKey">Secret Key</label>
 	<CopyPasswordField
 		name="secretKey"
 		id="secretKey"
@@ -24,8 +24,8 @@
 	<div class="title">Django</div>
 </div>
 
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="djangoAdminUser">Admin User</label>
+<div class="grid grid-cols-2 items-center lg:px-10">
+	<label class="text-base font-bold text-stone-100" for="djangoAdminUser">Admin User</label>
 	<CopyPasswordField
 		name="djangoAdminUser"
 		id="djangoAdminUser"
@@ -34,8 +34,8 @@
 		disabled
 	/>
 </div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="djangoAdminPassword">Admin Password</label>
+<div class="grid grid-cols-2 items-center lg:px-10">
+	<label class="text-base font-bold text-stone-100" for="djangoAdminPassword">Admin Password</label>
 	<CopyPasswordField
 		name="djangoAdminPassword"
 		id="djangoAdminPassword"
@@ -49,8 +49,8 @@
 	<div class="title">RabbitMQ</div>
 </div>
 
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="rabbitMQUser">User</label>
+<div class="grid grid-cols-2 items-center lg:px-10">
+	<label class="text-base font-bold text-stone-100" for="rabbitMQUser">User</label>
 	<CopyPasswordField
 		name="rabbitMQUser"
 		id="rabbitMQUser"
@@ -59,8 +59,8 @@
 		disabled
 	/>
 </div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="rabbitMQPassword">Password</label>
+<div class="grid grid-cols-2 items-center lg:px-10">
+	<label class="text-base font-bold text-stone-100" for="rabbitMQPassword">Password</label>
 	<CopyPasswordField
 		name="rabbitMQPassword"
 		id="rabbitMQPassword"
@@ -75,8 +75,8 @@
 	<div class="title">PostgreSQL</div>
 </div>
 
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="postgresqlHost">PostgreSQL Host</label>
+<div class="grid grid-cols-2 items-center lg:px-10">
+	<label class="text-base font-bold text-stone-100" for="postgresqlHost">PostgreSQL Host</label>
 	<CopyPasswordField
 		name="postgresqlHost"
 		id="postgresqlHost"
@@ -85,8 +85,8 @@
 		disabled
 	/>
 </div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="postgresqlPort">PostgreSQL Port</label>
+<div class="grid grid-cols-2 items-center lg:px-10">
+	<label class="text-base font-bold text-stone-100" for="postgresqlPort">PostgreSQL Port</label>
 	<CopyPasswordField
 		name="postgresqlPort"
 		id="postgresqlPort"
@@ -95,8 +95,8 @@
 		disabled
 	/>
 </div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="postgresqlUser">PostgreSQL User</label>
+<div class="grid grid-cols-2 items-center lg:px-10">
+	<label class="text-base font-bold text-stone-100" for="postgresqlUser">PostgreSQL User</label>
 	<CopyPasswordField
 		name="postgresqlUser"
 		id="postgresqlUser"
@@ -105,8 +105,8 @@
 		disabled
 	/>
 </div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="postgresqlPassword">PostgreSQL Password</label>
+<div class="grid grid-cols-2 items-center lg:px-10">
+	<label class="text-base font-bold text-stone-100" for="postgresqlPassword">PostgreSQL Password</label>
 	<CopyPasswordField
 		name="postgresqlPassword"
 		id="postgresqlPassword"
diff --git a/apps/ui/src/routes/services/[id]/_Services/_Umami.svelte b/apps/ui/src/routes/services/[id]/_Services/_Umami.svelte
index 9e6d065a1..181f06a68 100644
--- a/apps/ui/src/routes/services/[id]/_Services/_Umami.svelte
+++ b/apps/ui/src/routes/services/[id]/_Services/_Umami.svelte
@@ -7,23 +7,33 @@
 <div class="flex space-x-1 py-5 font-bold">
 	<div class="title">Umami</div>
 </div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="adminUser">Admin User</label>
-	<input name="adminUser" id="adminUser" placeholder="admin" value="admin" disabled readonly />
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="umamiAdminPassword"
-		>Initial Admin Password <Explainer
-			explanation="It could be changed in Umami. <br>This is just the password set initially after the first start."
-		/></label
-	>
-	<CopyPasswordField
-		isPasswordField
-		name="umamiAdminPassword"
-		id="umamiAdminPassword"
-		placeholder="admin"
-		value={service.umami.umamiAdminPassword}
-		disabled
-		readonly
-	/>
+<div class="space-y-2">
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="adminUser">Admin User</label>
+		<input
+			class="w-full"
+			name="adminUser"
+			id="adminUser"
+			placeholder="admin"
+			value="admin"
+			disabled
+			readonly
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="umamiAdminPassword"
+			>Initial Admin Password <Explainer
+				explanation="It could be changed in Umami. <br>This is just the password set initially after the first start."
+			/></label
+		>
+		<CopyPasswordField
+			isPasswordField
+			name="umamiAdminPassword"
+			id="umamiAdminPassword"
+			placeholder="admin"
+			value={service.umami.umamiAdminPassword}
+			disabled
+			readonly
+		/>
+	</div>
 </div>
diff --git a/apps/ui/src/routes/services/[id]/_Services/_VSCodeServer.svelte b/apps/ui/src/routes/services/[id]/_Services/_VSCodeServer.svelte
index c4418fbf9..9e8eb3a22 100644
--- a/apps/ui/src/routes/services/[id]/_Services/_VSCodeServer.svelte
+++ b/apps/ui/src/routes/services/[id]/_Services/_VSCodeServer.svelte
@@ -8,7 +8,7 @@
 <div class="flex space-x-1 py-5 font-bold">
 	<div class="title">VSCode Server</div>
 </div>
-<div class="grid grid-cols-2 items-center px-10">
+<div class="grid grid-cols-2 items-center lg:px-10 px-2">
 	<label for="password">{$t('forms.password')}</label>
 	<CopyPasswordField
 		id="password"
diff --git a/apps/ui/src/routes/services/[id]/_Services/_Weblate.svelte b/apps/ui/src/routes/services/[id]/_Services/_Weblate.svelte
index fdbd055c1..0f525317a 100644
--- a/apps/ui/src/routes/services/[id]/_Services/_Weblate.svelte
+++ b/apps/ui/src/routes/services/[id]/_Services/_Weblate.svelte
@@ -7,7 +7,7 @@
 	<div class="title">Weblate</div>
 </div>
 
-<div class="grid grid-cols-2 items-center px-10">
+<div class="grid grid-cols-2 items-center lg:px-10 px-2">
 	<label for="adminPassword">Admin password</label>
 	<CopyPasswordField
 		name="adminPassword"
@@ -22,45 +22,46 @@
 <div class="flex space-x-1 py-5 font-bold">
 	<div class="title">PostgreSQL</div>
 </div>
-
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="postgresqlHost">PostgreSQL Host</label>
-	<CopyPasswordField
-		name="postgresqlHost"
-		id="postgresqlHost"
-		value={service.weblate.postgresqlHost}
-		readonly
-		disabled
-	/>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="postgresqlPort">PostgreSQL Port</label>
-	<CopyPasswordField
-		name="postgresqlPort"
-		id="postgresqlPort"
-		value={service.weblate.postgresqlPort}
-		readonly
-		disabled
-	/>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="postgresqlUser">PostgreSQL User</label>
-	<CopyPasswordField
-		name="postgresqlUser"
-		id="postgresqlUser"
-		value={service.weblate.postgresqlUser}
-		readonly
-		disabled
-	/>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="postgresqlPassword">PostgreSQL Password</label>
-	<CopyPasswordField
-		name="postgresqlPassword"
-		id="postgresqlPassword"
-		isPasswordField
-		value={service.weblate.postgresqlPassword}
-		readonly
-		disabled
-	/>
+<div class="space-y-2">
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="postgresqlHost">PostgreSQL Host</label>
+		<CopyPasswordField
+			name="postgresqlHost"
+			id="postgresqlHost"
+			value={service.weblate.postgresqlHost}
+			readonly
+			disabled
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="postgresqlPort">PostgreSQL Port</label>
+		<CopyPasswordField
+			name="postgresqlPort"
+			id="postgresqlPort"
+			value={service.weblate.postgresqlPort}
+			readonly
+			disabled
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="postgresqlUser">PostgreSQL User</label>
+		<CopyPasswordField
+			name="postgresqlUser"
+			id="postgresqlUser"
+			value={service.weblate.postgresqlUser}
+			readonly
+			disabled
+		/>
+	</div>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="postgresqlPassword">PostgreSQL Password</label>
+		<CopyPasswordField
+			name="postgresqlPassword"
+			id="postgresqlPassword"
+			isPasswordField
+			value={service.weblate.postgresqlPassword}
+			readonly
+			disabled
+		/>
+	</div>
 </div>
diff --git a/apps/ui/src/routes/services/[id]/_Services/_Wordpress.svelte b/apps/ui/src/routes/services/[id]/_Services/_Wordpress.svelte
index 29f9a1ca3..093100e20 100644
--- a/apps/ui/src/routes/services/[id]/_Services/_Wordpress.svelte
+++ b/apps/ui/src/routes/services/[id]/_Services/_Wordpress.svelte
@@ -21,9 +21,7 @@
 
 	function generateUrl(publicPort: any) {
 		return browser
-			? `sftp://${
-					settings?.fqdn ? getDomain(settings.fqdn) : ipv4 || ipv6
-			  }:${publicPort}`
+			? `sftp://${settings?.fqdn ? getDomain(settings.fqdn) : ipv4 || ipv6}:${publicPort}`
 			: 'Loading...';
 	}
 	async function changeSettings(name: any) {
@@ -72,9 +70,10 @@
 	<div class="title">Wordpress</div>
 </div>
 
-<div class="grid grid-cols-2 items-center px-10">
+<div class="grid grid-cols-2 items-center lg:px-10 px-2">
 	<label for="extraConfig">{$t('forms.extra_config')}</label>
 	<textarea
+		class="w-full"
 		bind:value={service.wordpress.extraConfig}
 		disabled={$status.service.isRunning || $status.service.initialLoading}
 		readonly={$status.service.isRunning}
@@ -91,7 +90,7 @@ define('SUBDOMAIN_INSTALL', false);`
 			: 'N/A'}
 	/>
 </div>
-<div class="grid grid-cols-2 items-center px-10">
+<div class="grid grid-cols-2 items-center lg:px-10 px-2">
 	<Setting
 		id="ftpEnabled"
 		bind:setting={service.wordpress.ftpEnabled}
@@ -103,15 +102,15 @@ define('SUBDOMAIN_INSTALL', false);`
 	/>
 </div>
 {#if service.wordpress.ftpEnabled}
-	<div class="grid grid-cols-2 items-center px-10">
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
 		<label for="ftpUrl">sFTP Connection URI</label>
 		<CopyPasswordField id="ftpUrl" readonly disabled name="ftpUrl" value={ftpUrl} />
 	</div>
-	<div class="grid grid-cols-2 items-center px-10">
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
 		<label for="ftpUser">User</label>
 		<CopyPasswordField id="ftpUser" readonly disabled name="ftpUser" value={ftpUser} />
 	</div>
-	<div class="grid grid-cols-2 items-center px-10">
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
 		<label for="ftpPassword">Password</label>
 		<CopyPasswordField
 			id="ftpPassword"
@@ -126,97 +125,104 @@ define('SUBDOMAIN_INSTALL', false);`
 <div class="flex space-x-1 py-5 font-bold">
 	<div class="title">MySQL</div>
 </div>
-<div class="grid grid-cols-2 items-center px-10">
-	<Setting
-		id="ownMysql"
-		dataTooltip={$t('forms.must_be_stopped_to_modify')}
-		bind:setting={service.wordpress.ownMysql}
-		disabled={$status.service.isRunning}
-		on:click={() => !$status.service.isRunning && changeSettings('ownMysql')}
-		title="Use your own MySQL server"
-		description="Enables the use of your own MySQL server. If you don't have one, you can use the one provided by Coolify."
-	/>
-</div>
-{#if service.wordpress.ownMysql}
-	<div class="grid grid-cols-2 items-center px-10">
-		<label for="mysqlHost">Host</label>
-		<input
-			name="mysqlHost"
-			id="mysqlHost"
-			required
-			readonly={$status.service.isRunning}
+<div class="space-y-2">
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<Setting
+			id="ownMysql"
+			dataTooltip={$t('forms.must_be_stopped_to_modify')}
+			bind:setting={service.wordpress.ownMysql}
 			disabled={$status.service.isRunning}
-			bind:value={service.wordpress.mysqlHost}
-			placeholder="{$t('forms.eg')}: db.coolify.io"
+			on:click={() => !$status.service.isRunning && changeSettings('ownMysql')}
+			title="Use your own MySQL server"
+			description="Enables the use of your own MySQL server. If you don't have one, you can use the one provided by Coolify."
 		/>
 	</div>
-	<div class="grid grid-cols-2 items-center px-10">
-		<label for="mysqlPort">Port</label>
+	{#if service.wordpress.ownMysql}
+		<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+			<label for="mysqlHost">Host</label>
+			<input
+				class="w-full"
+				name="mysqlHost"
+				id="mysqlHost"
+				required
+				readonly={$status.service.isRunning}
+				disabled={$status.service.isRunning}
+				bind:value={service.wordpress.mysqlHost}
+				placeholder="{$t('forms.eg')}: db.coolify.io"
+			/>
+		</div>
+		<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+			<label for="mysqlPort">Port</label>
+			<input
+				class="w-full"
+				name="mysqlPort"
+				id="mysqlPort"
+				required
+				readonly={$status.service.isRunning}
+				disabled={$status.service.isRunning}
+				bind:value={service.wordpress.mysqlPort}
+				placeholder="{$t('forms.eg')}: 3306"
+			/>
+		</div>
+	{/if}
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="mysqlDatabase">{$t('index.database')}</label>
 		<input
-			name="mysqlPort"
-			id="mysqlPort"
+			class="w-full"
+			name="mysqlDatabase"
+			id="mysqlDatabase"
 			required
-			readonly={$status.service.isRunning}
-			disabled={$status.service.isRunning}
-			bind:value={service.wordpress.mysqlPort}
-			placeholder="{$t('forms.eg')}: 3306"
+			readonly={readOnly && !service.wordpress.ownMysql}
+			disabled={readOnly && !service.wordpress.ownMysql}
+			bind:value={service.wordpress.mysqlDatabase}
+			placeholder="{$t('forms.eg')}: wordpress_db"
 		/>
 	</div>
-{/if}
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="mysqlDatabase">{$t('index.database')}</label>
-	<input
-		name="mysqlDatabase"
-		id="mysqlDatabase"
-		required
-		readonly={readOnly && !service.wordpress.ownMysql}
-		disabled={readOnly && !service.wordpress.ownMysql}
-		bind:value={service.wordpress.mysqlDatabase}
-		placeholder="{$t('forms.eg')}: wordpress_db"
-	/>
-</div>
-{#if !service.wordpress.ownMysql}
-	<div class="grid grid-cols-2 items-center px-10">
-		<label for="mysqlRootUser">{$t('forms.root_user')}</label>
+	{#if !service.wordpress.ownMysql}
+		<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+			<label for="mysqlRootUser">{$t('forms.root_user')}</label>
+			<input
+				class="w-full"
+				name="mysqlRootUser"
+				id="mysqlRootUser"
+				placeholder="MySQL {$t('forms.root_user')}"
+				value={service.wordpress.mysqlRootUser}
+				readonly={$status.service.isRunning || !service.wordpress.ownMysql}
+				disabled={$status.service.isRunning || !service.wordpress.ownMysql}
+			/>
+		</div>
+		<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+			<label for="mysqlRootUserPassword">{$t('forms.roots_password')}</label>
+			<CopyPasswordField
+				id="mysqlRootUserPassword"
+				isPasswordField
+				readonly={$status.service.isRunning || !service.wordpress.ownMysql}
+				disabled={$status.service.isRunning || !service.wordpress.ownMysql}
+				name="mysqlRootUserPassword"
+				value={service.wordpress.mysqlRootUserPassword}
+			/>
+		</div>
+	{/if}
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="mysqlUser">{$t('forms.user')}</label>
 		<input
-			name="mysqlRootUser"
-			id="mysqlRootUser"
-			placeholder="MySQL {$t('forms.root_user')}"
-			value={service.wordpress.mysqlRootUser}
+			class="w-full"
+			name="mysqlUser"
+			id="mysqlUser"
+			bind:value={service.wordpress.mysqlUser}
 			readonly={$status.service.isRunning || !service.wordpress.ownMysql}
 			disabled={$status.service.isRunning || !service.wordpress.ownMysql}
 		/>
 	</div>
-	<div class="grid grid-cols-2 items-center px-10">
-		<label for="mysqlRootUserPassword">{$t('forms.roots_password')}</label>
+	<div class="grid grid-cols-2 items-center lg:px-10 px-2">
+		<label for="mysqlPassword">{$t('forms.password')}</label>
 		<CopyPasswordField
-			id="mysqlRootUserPassword"
+			id="mysqlPassword"
 			isPasswordField
 			readonly={$status.service.isRunning || !service.wordpress.ownMysql}
 			disabled={$status.service.isRunning || !service.wordpress.ownMysql}
-			name="mysqlRootUserPassword"
-			value={service.wordpress.mysqlRootUserPassword}
+			name="mysqlPassword"
+			bind:value={service.wordpress.mysqlPassword}
 		/>
 	</div>
-{/if}
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="mysqlUser">{$t('forms.user')}</label>
-	<input
-		name="mysqlUser"
-		id="mysqlUser"
-		bind:value={service.wordpress.mysqlUser}
-		readonly={$status.service.isRunning || !service.wordpress.ownMysql}
-		disabled={$status.service.isRunning || !service.wordpress.ownMysql}
-	/>
-</div>
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="mysqlPassword">{$t('forms.password')}</label>
-	<CopyPasswordField
-		id="mysqlPassword"
-		isPasswordField
-		readonly={$status.service.isRunning || !service.wordpress.ownMysql}
-		disabled={$status.service.isRunning || !service.wordpress.ownMysql}
-		name="mysqlPassword"
-		bind:value={service.wordpress.mysqlPassword}
-	/>
 </div>
diff --git a/apps/ui/src/routes/services/[id]/__layout.svelte b/apps/ui/src/routes/services/[id]/__layout.svelte
index b4c56ff6b..bfaac583f 100644
--- a/apps/ui/src/routes/services/[id]/__layout.svelte
+++ b/apps/ui/src/routes/services/[id]/__layout.svelte
@@ -19,7 +19,7 @@
 			if (!service || Object.entries(service).length === 0) {
 				return {
 					status: 302,
-					redirect: '/databases'
+					redirect: '/'
 				};
 			}
 			const configurationPhase = checkConfiguration(service);
@@ -56,7 +56,6 @@
 	import { page } from '$app/stores';
 	import DeleteIcon from '$lib/components/DeleteIcon.svelte';
 	import { del, get, post } from '$lib/api';
-	import { goto } from '$app/navigation';
 	import { t } from '$lib/translations';
 	import { errorNotification, handlerNotFoundLoad } from '$lib/common';
 	import {
@@ -69,6 +68,8 @@
 	} from '$lib/store';
 	import { onDestroy, onMount } from 'svelte';
 	import Tooltip from '$lib/components/Tooltip.svelte';
+	import ServiceLinks from './_ServiceLinks.svelte';
+	import { goto } from '$app/navigation';
 	const { id } = $page.params;
 
 	export let service: any;
@@ -85,7 +86,7 @@
 				if (service.type && $status.service.isRunning)
 					await post(`/services/${service.id}/${service.type}/stop`, {});
 				await del(`/services/${service.id}`, { id: service.id });
-				return await window.location.assign(`/`);
+				return await goto('/');
 			} catch (error) {
 				return errorNotification(error);
 			} finally {
@@ -155,144 +156,38 @@
 	});
 </script>
 
-<nav class="nav-side">
-	{#if $location}
-		<a
-			id="open"
-			href={$location}
-			target="_blank"
-			class="icons  flex items-center bg-transparent text-sm"
-			><svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="h-6 w-6"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentColor"
-				fill="none"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			>
-				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-				<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
-				<line x1="10" y1="14" x2="20" y2="4" />
-				<polyline points="15 4 20 4 20 9" />
-			</svg></a
-		>
-		<Tooltip triggeredBy="#open">Open</Tooltip>
-		<div class="border border-stone-700 h-8" />
-	{/if}
-	{#if $status.service.isExited}
-		<a
-			id="error"
-			href={$isDeploymentEnabled ? `/services/${id}/logs` : null}
-			class="icons bg-transparent text-sm flex items-center text-red-500 tooltip-error"
-			sveltekit:prefetch
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="w-6 h-6"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentcolor"
-				fill="none"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			>
-				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-				<path
-					d="M8.7 3h6.6c.3 0 .5 .1 .7 .3l4.7 4.7c.2 .2 .3 .4 .3 .7v6.6c0 .3 -.1 .5 -.3 .7l-4.7 4.7c-.2 .2 -.4 .3 -.7 .3h-6.6c-.3 0 -.5 -.1 -.7 -.3l-4.7 -4.7c-.2 -.2 -.3 -.4 -.3 -.7v-6.6c0 -.3 .1 -.5 .3 -.7l4.7 -4.7c.2 -.2 .4 -.3 .7 -.3z"
-				/>
-				<line x1="12" y1="8" x2="12" y2="12" />
-				<line x1="12" y1="16" x2="12.01" y2="16" />
-			</svg>
-		</a>
-		<Tooltip triggeredBy="#error">Service exited with an error!</Tooltip>
-	{/if}
-	{#if $status.service.initialLoading}
-		<button
-			class="icons flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out"
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="h-6 w-6"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentColor"
-				fill="none"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			>
-				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-				<path d="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5" />
-				<line x1="5.63" y1="7.16" x2="5.63" y2="7.17" />
-				<line x1="4.06" y1="11" x2="4.06" y2="11.01" />
-				<line x1="4.63" y1="15.1" x2="4.63" y2="15.11" />
-				<line x1="7.16" y1="18.37" x2="7.16" y2="18.38" />
-				<line x1="11" y1="19.94" x2="11" y2="19.95" />
-			</svg>
-		</button>
-	{:else if $status.service.isRunning}
-		<button
-			id="stop"
-			on:click={stopService}
-			type="submit"
-			disabled={!$isDeploymentEnabled}
-			class="icons bg-transparent text-sm flex items-center space-x-2 text-red-500"
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="w-6 h-6"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentColor"
-				fill="none"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			>
-				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-				<rect x="6" y="5" width="4" height="14" rx="1" />
-				<rect x="14" y="5" width="4" height="14" rx="1" />
-			</svg>
-		</button>
-		<Tooltip triggeredBy="#stop">Stop</Tooltip>
-	{:else}
-		<button
-			id="start"
-			on:click={startService}
-			type="submit"
-			disabled={!$isDeploymentEnabled}
-			class="icons bg-transparent text-sm flex items-center space-x-2 text-green-500"
-			><svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="w-6 h-6"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentColor"
-				fill="none"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			>
-				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-				<path d="M7 4v16l13 -8z" />
-			</svg>
-		</button>
-		<Tooltip triggeredBy="#start">Start</Tooltip>
-	{/if}
-	<div class="border border-stone-700 h-8" />
-	{#if service.type && service.destinationDockerId && service.version}
-		<a
-			href="/services/{id}"
-			sveltekit:prefetch
-			class="hover:text-yellow-500 rounded"
-			class:text-yellow-500={$page.url.pathname === `/services/${id}`}
-			class:bg-coolgray-500={$page.url.pathname === `/services/${id}`}
-		>
-			<button
-				id="configuration"
-				disabled={!$isDeploymentEnabled}
-				class="icons bg-transparent text-sm"
-			>
-				<svg
+<nav class="header lg:flex-row flex-col-reverse">
+	<div class="flex flex-row space-x-2 font-bold pt-10 lg:pt-0">
+		<div class="flex flex-col items-center justify-center">
+			<div class="title">
+				{#if $page.url.pathname === `/services/${id}`}
+					Configurations
+				{:else if $page.url.pathname === `/services/${id}/secrets`}
+					Secrets
+				{:else if $page.url.pathname === `/services/${id}/storages`}
+					Persistent Storages
+				{:else if $page.url.pathname === `/services/${id}/logs`}
+					Service Logs
+				{:else if $page.url.pathname === `/services/${id}/configuration/type`}
+					Select a Service Type
+				{:else if $page.url.pathname === `/services/${id}/configuration/version`}
+					Select a Service Version
+				{:else if $page.url.pathname === `/services/${id}/configuration/destination`}
+					Select a Destination
+				{/if}
+			</div>
+		</div>
+		<ServiceLinks {service} />
+	</div>
+	<div class="lg:block hidden flex-1" />
+	<div class="flex flex-row flex-wrap space-x-3 justify-center lg:justify-start lg:py-0">
+		{#if $location}
+			<a
+				id="open"
+				href={$location}
+				target="_blank"
+				class="icons  flex items-center bg-transparent text-sm"
+				><svg
 					xmlns="http://www.w3.org/2000/svg"
 					class="h-6 w-6"
 					viewBox="0 0 24 24"
@@ -303,62 +198,71 @@
 					stroke-linejoin="round"
 				>
 					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-					<rect x="4" y="8" width="4" height="4" />
-					<line x1="6" y1="4" x2="6" y2="8" />
-					<line x1="6" y1="12" x2="6" y2="20" />
-					<rect x="10" y="14" width="4" height="4" />
-					<line x1="12" y1="4" x2="12" y2="14" />
-					<line x1="12" y1="18" x2="12" y2="20" />
-					<rect x="16" y="5" width="4" height="4" />
-					<line x1="18" y1="4" x2="18" y2="5" />
-					<line x1="18" y1="9" x2="18" y2="20" />
-				</svg></button
-			></a
-		>
-		<Tooltip triggeredBy="#configuration">Configuration</Tooltip>
-		<a
-			href="/services/{id}/secrets"
-			sveltekit:prefetch
-			class="hover:text-pink-500 rounded"
-			class:text-pink-500={$page.url.pathname === `/services/${id}/secrets`}
-			class:bg-coolgray-500={$page.url.pathname === `/services/${id}/secrets`}
-		>
-			<button
-				id="secrets"
-				disabled={!$isDeploymentEnabled}
-				class="icons bg-transparent text-sm "
+					<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+					<line x1="10" y1="14" x2="20" y2="4" />
+					<polyline points="15 4 20 4 20 9" />
+				</svg></a
+			>
+			<Tooltip triggeredBy="#open">Open</Tooltip>
+			<div class="hidden lg:block border border-coolgray-500 h-8" />
+		{/if}
+		{#if $status.service.isExited}
+			<a
+				id="error"
+				href={$isDeploymentEnabled ? `/services/${id}/logs` : null}
+				class="icons bg-transparent text-sm flex items-center text-red-500 tooltip-error"
+				sveltekit:prefetch
 			>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
 					class="w-6 h-6"
 					viewBox="0 0 24 24"
 					stroke-width="1.5"
-					stroke="currentColor"
+					stroke="currentcolor"
 					fill="none"
 					stroke-linecap="round"
 					stroke-linejoin="round"
 				>
 					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
 					<path
-						d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3"
+						d="M8.7 3h6.6c.3 0 .5 .1 .7 .3l4.7 4.7c.2 .2 .3 .4 .3 .7v6.6c0 .3 -.1 .5 -.3 .7l-4.7 4.7c-.2 .2 -.4 .3 -.7 .3h-6.6c-.3 0 -.5 -.1 -.7 -.3l-4.7 -4.7c-.2 -.2 -.3 -.4 -.3 -.7v-6.6c0 -.3 .1 -.5 .3 -.7l4.7 -4.7c.2 -.2 .4 -.3 .7 -.3z"
 					/>
-					<circle cx="12" cy="11" r="1" />
-					<line x1="12" y1="12" x2="12" y2="14.5" />
-				</svg></button
-			></a
-		>
-		<Tooltip triggeredBy="#secrets">Secrets</Tooltip>
-		<a
-			href="/services/{id}/storages"
-			sveltekit:prefetch
-			class="hover:text-pink-500 rounded"
-			class:text-pink-500={$page.url.pathname === `/services/${id}/storages`}
-			class:bg-coolgray-500={$page.url.pathname === `/services/${id}/storages`}
-		>
+					<line x1="12" y1="8" x2="12" y2="12" />
+					<line x1="12" y1="16" x2="12.01" y2="16" />
+				</svg>
+			</a>
+			<Tooltip triggeredBy="#error">Service exited with an error!</Tooltip>
+		{/if}
+		{#if $status.service.initialLoading}
 			<button
-				id="persistentstorage"
+				class="icons flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-6 w-6"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					fill="none"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+					<path d="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5" />
+					<line x1="5.63" y1="7.16" x2="5.63" y2="7.17" />
+					<line x1="4.06" y1="11" x2="4.06" y2="11.01" />
+					<line x1="4.63" y1="15.1" x2="4.63" y2="15.11" />
+					<line x1="7.16" y1="18.37" x2="7.16" y2="18.38" />
+					<line x1="11" y1="19.94" x2="11" y2="19.95" />
+				</svg>
+			</button>
+		{:else if $status.service.isRunning}
+			<button
+				id="stop"
+				on:click={stopService}
+				type="submit"
 				disabled={!$isDeploymentEnabled}
-				class="icons bg-transparent text-sm"
+				class="icons bg-transparent text-sm flex items-center space-x-2 text-red-500"
 			>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
@@ -371,25 +275,21 @@
 					stroke-linejoin="round"
 				>
 					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-					<ellipse cx="12" cy="6" rx="8" ry="3" />
-					<path d="M4 6v6a8 3 0 0 0 16 0v-6" />
-					<path d="M4 12v6a8 3 0 0 0 16 0v-6" />
+					<rect x="6" y="5" width="4" height="14" rx="1" />
+					<rect x="14" y="5" width="4" height="14" rx="1" />
 				</svg>
-			</button></a
-		>
-		<Tooltip triggeredBy="#persistentstorage">Persistent Storage</Tooltip>
-		<div class="border border-stone-700 h-8" />
-		<a
-			href={$isDeploymentEnabled && $status.service.isRunning ? `/services/${id}/logs` : null}
-			sveltekit:prefetch
-			class="hover:text-pink-500 rounded"
-			class:text-pink-500={$page.url.pathname === `/services/${id}/logs`}
-			class:bg-coolgray-500={$page.url.pathname === `/services/${id}/logs`}
-		>
-			<button id="logs" disabled={!$status.service.isRunning} class="icons bg-transparent text-sm">
-				<svg
+			</button>
+			<Tooltip triggeredBy="#stop">Stop</Tooltip>
+		{:else}
+			<button
+				id="start"
+				on:click={startService}
+				type="submit"
+				disabled={!$isDeploymentEnabled}
+				class="icons bg-transparent text-sm flex items-center space-x-2 text-green-500"
+				><svg
 					xmlns="http://www.w3.org/2000/svg"
-					class="h-6 w-6"
+					class="w-6 h-6"
 					viewBox="0 0 24 24"
 					stroke-width="1.5"
 					stroke="currentColor"
@@ -398,24 +298,152 @@
 					stroke-linejoin="round"
 				>
 					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-					<path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
-					<path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
-					<line x1="3" y1="6" x2="3" y2="19" />
-					<line x1="12" y1="6" x2="12" y2="19" />
-					<line x1="21" y1="6" x2="21" y2="19" />
-				</svg></button
-			></a
+					<path d="M7 4v16l13 -8z" />
+				</svg>
+			</button>
+			<Tooltip triggeredBy="#start">Start</Tooltip>
+		{/if}
+
+		{#if service.type && service.destinationDockerId && service.version}
+			<div class="hidden lg:block border border-coolgray-500 h-8" />
+			<a
+				href="/services/{id}"
+				sveltekit:prefetch
+				class="hover:text-yellow-500 rounded"
+				class:text-yellow-500={$page.url.pathname === `/services/${id}`}
+				class:bg-coolgray-500={$page.url.pathname === `/services/${id}`}
+			>
+				<button
+					id="configuration"
+					disabled={!$isDeploymentEnabled}
+					class="icons bg-transparent text-sm"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-6 w-6"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						fill="none"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+						<rect x="4" y="8" width="4" height="4" />
+						<line x1="6" y1="4" x2="6" y2="8" />
+						<line x1="6" y1="12" x2="6" y2="20" />
+						<rect x="10" y="14" width="4" height="4" />
+						<line x1="12" y1="4" x2="12" y2="14" />
+						<line x1="12" y1="18" x2="12" y2="20" />
+						<rect x="16" y="5" width="4" height="4" />
+						<line x1="18" y1="4" x2="18" y2="5" />
+						<line x1="18" y1="9" x2="18" y2="20" />
+					</svg></button
+				></a
+			>
+			<Tooltip triggeredBy="#configuration">Configuration</Tooltip>
+			<a
+				href="/services/{id}/secrets"
+				sveltekit:prefetch
+				class="hover:text-pink-500 rounded"
+				class:text-pink-500={$page.url.pathname === `/services/${id}/secrets`}
+				class:bg-coolgray-500={$page.url.pathname === `/services/${id}/secrets`}
+			>
+				<button id="secrets" disabled={!$isDeploymentEnabled} class="icons bg-transparent text-sm ">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="w-6 h-6"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						fill="none"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+						<path
+							d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3"
+						/>
+						<circle cx="12" cy="11" r="1" />
+						<line x1="12" y1="12" x2="12" y2="14.5" />
+					</svg></button
+				></a
+			>
+			<Tooltip triggeredBy="#secrets">Secrets</Tooltip>
+			<a
+				href="/services/{id}/storages"
+				sveltekit:prefetch
+				class="hover:text-pink-500 rounded"
+				class:text-pink-500={$page.url.pathname === `/services/${id}/storages`}
+				class:bg-coolgray-500={$page.url.pathname === `/services/${id}/storages`}
+			>
+				<button
+					id="persistentstorage"
+					disabled={!$isDeploymentEnabled}
+					class="icons bg-transparent text-sm"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="w-6 h-6"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						fill="none"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+						<ellipse cx="12" cy="6" rx="8" ry="3" />
+						<path d="M4 6v6a8 3 0 0 0 16 0v-6" />
+						<path d="M4 12v6a8 3 0 0 0 16 0v-6" />
+					</svg>
+				</button></a
+			>
+			<Tooltip triggeredBy="#persistentstorage">Persistent Storages</Tooltip>
+			<div class="hidden lg:block border border-coolgray-500 h-8" />
+			<a
+				href={$isDeploymentEnabled && $status.service.isRunning ? `/services/${id}/logs` : null}
+				sveltekit:prefetch
+				class="hover:text-pink-500 rounded"
+				class:text-pink-500={$page.url.pathname === `/services/${id}/logs`}
+				class:bg-coolgray-500={$page.url.pathname === `/services/${id}/logs`}
+			>
+				<button
+					id="logs"
+					disabled={!$status.service.isRunning}
+					class="icons bg-transparent text-sm"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-6 w-6"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						fill="none"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+						<path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
+						<path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
+						<line x1="3" y1="6" x2="3" y2="19" />
+						<line x1="12" y1="6" x2="12" y2="19" />
+						<line x1="21" y1="6" x2="21" y2="19" />
+					</svg></button
+				></a
+			>
+			<Tooltip triggeredBy="#logs">Logs</Tooltip>
+		{/if}
+		<div class="hidden lg:block border border-coolgray-500 h-8" />
+		<button
+			id="delete"
+			on:click={deleteService}
+			type="submit"
+			disabled={!$appSession.isAdmin}
+			class:hover:text-red-500={$appSession.isAdmin}
+			class="icons bg-transparent  text-sm"><DeleteIcon /></button
 		>
-		<Tooltip triggeredBy="#logs">Logs</Tooltip>
-	{/if}
-	<button
-		id="delete"
-		on:click={deleteService}
-		type="submit"
-		disabled={!$appSession.isAdmin}
-		class:hover:text-red-500={$appSession.isAdmin}
-		class="icons bg-transparent  text-sm"><DeleteIcon /></button
-	>
-	<Tooltip triggeredBy="#delete">Delete</Tooltip>
+		<Tooltip triggeredBy="#delete" placement="left">Delete</Tooltip>
+	</div>
 </nav>
 <slot />
diff --git a/apps/ui/src/routes/services/[id]/configuration/destination.svelte b/apps/ui/src/routes/services/[id]/configuration/destination.svelte
index 19d96809b..d2b63a092 100644
--- a/apps/ui/src/routes/services/[id]/configuration/destination.svelte
+++ b/apps/ui/src/routes/services/[id]/configuration/destination.svelte
@@ -52,11 +52,6 @@
 	}
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">
-		{$t('application.configuration.configure_destination')}
-	</div>
-</div>
 <div class="flex justify-center">
 	{#if !destinations || destinations.length === 0}
 		<div class="flex-col">
diff --git a/apps/ui/src/routes/services/[id]/configuration/type.svelte b/apps/ui/src/routes/services/[id]/configuration/type.svelte
index ef3d0fad3..bd4bbd74e 100644
--- a/apps/ui/src/routes/services/[id]/configuration/type.svelte
+++ b/apps/ui/src/routes/services/[id]/configuration/type.svelte
@@ -47,10 +47,6 @@
 	}
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">{$t('forms.select_a_service')}</div>
-</div>
-
 <div class="flex flex-wrap justify-center">
 	{#each types as type}
 		<div class="p-2">
diff --git a/apps/ui/src/routes/services/[id]/configuration/version.svelte b/apps/ui/src/routes/services/[id]/configuration/version.svelte
index 6e5df50bd..d55453251 100644
--- a/apps/ui/src/routes/services/[id]/configuration/version.svelte
+++ b/apps/ui/src/routes/services/[id]/configuration/version.svelte
@@ -57,9 +57,6 @@
 	}
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">{$t('forms.select_a_service_version')}</div>
-</div>
 {#if from}
 	<div class="pb-10 text-center">
 		Warning: you are about to change the version of this service.<br />This could cause problem
diff --git a/apps/ui/src/routes/services/[id]/index.svelte b/apps/ui/src/routes/services/[id]/index.svelte
index f2ed2852f..73d25a483 100644
--- a/apps/ui/src/routes/services/[id]/index.svelte
+++ b/apps/ui/src/routes/services/[id]/index.svelte
@@ -50,17 +50,7 @@
 	});
 </script>
 
-<div class="flex h-20 items-center space-x-2 p-5 px-6 font-bold">
-	<div class="-mb-5 flex-col">
-		<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
-			Configuration
-		</div>
-		<span class="text-xs">{service.name}</span>
-	</div>
-	<ServiceLinks {service} />
-</div>
-<div class="mx-auto max-w-4xl px-6 py-4">
-	<div class="text-2xl font-bold">Service Usage</div>
+<div class="mx-auto max-w-6xl px-6 lg:my-0 my-4 lg:pt-0 pt-4 rounded">
 	<div class="text-center">
 		<div class="stat w-64">
 			<div class="stat-title">Used Memory / Memory Limit</div>
diff --git a/apps/ui/src/routes/services/[id]/logs/index.svelte b/apps/ui/src/routes/services/[id]/logs/index.svelte
index dc875852e..38fd6d254 100644
--- a/apps/ui/src/routes/services/[id]/logs/index.svelte
+++ b/apps/ui/src/routes/services/[id]/logs/index.svelte
@@ -150,16 +150,10 @@
 				</button>
 				<Tooltip triggeredBy="#follow">Follow Logs</Tooltip>
 			</div>
-			<div
-				class="font-mono w-full leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 py-5 px-6 whitespace-pre-wrap break-words overflow-auto max-h-[80vh] -mt-12 overflow-y-scroll scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200"
-				bind:this={logsEl}
-				on:scroll={detect}
-			>
-				<div class="px-2 pr-14">
-					{#each logs as log}
-						{log + '\n'}
-					{/each}
-				</div>
+			<div class="font-mono w-full rounder bg-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded-md mb-20 flex flex-col whitespace-nowrap -mt-12 scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1">
+				{#each logs as log}
+					<p>{log.line + '\n'}</p>
+				{/each}
 			</div>
 		</div>
 	{/if}
diff --git a/apps/ui/src/routes/services/[id]/secrets.svelte b/apps/ui/src/routes/services/[id]/secrets.svelte
index 924b33946..3211804cc 100644
--- a/apps/ui/src/routes/services/[id]/secrets.svelte
+++ b/apps/ui/src/routes/services/[id]/secrets.svelte
@@ -68,64 +68,33 @@
 	}
 </script>
 
-<div
-	class="flex items-center space-x-2 p-5 px-6 font-bold"
-	class:p-5={service.fqdn}
-	class:p-6={!service.fqdn}
->
-	<div class="-mb-5 flex-col">
-		<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
-			{$t('application.secret')}
-		</div>
-		<span class="text-xs">{service.name}</span>
-	</div>
-	{#if service.fqdn}
-		<a
-			href={service.fqdn}
-			target="_blank"
-			class="icons tooltip-bottom flex items-center bg-transparent text-sm"
-			><svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="h-6 w-6"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentColor"
-				fill="none"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			>
-				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-				<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
-				<line x1="10" y1="14" x2="20" y2="4" />
-				<polyline points="15 4 20 4 20 9" />
-			</svg></a
-		>
-	{/if}
-
-	<ServiceLinks {service} />
-</div>
 <div class="mx-auto max-w-6xl rounded-xl px-6 pt-4">
-	<table class="mx-auto border-separate text-left">
-		<thead>
-			<tr class="h-12">
-				<th scope="col">{$t('forms.name')}</th>
-				<th scope="col">{$t('forms.value')}</th>
-				<th scope="col" class="w-96 text-center">{$t('forms.action')}</th>
-			</tr>
-		</thead>
-		<tbody>
-			{#each secrets as secret}
-				{#key secret.id}
-					<tr>
-						<Secret name={secret.name} value={secret.value} on:refresh={refreshSecrets} />
-					</tr>
-				{/key}
-			{/each}
-			<tr>
-				<Secret isNewSecret on:refresh={refreshSecrets} />
-			</tr>
-		</tbody>
-	</table>
+	<h1 class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block font-bold mb-4">
+		Secrets
+	</h1>
+	<div class="overflow-x-auto">
+		<table class="w-full border-separate text-left">
+			<thead>
+				<tr class="h-12">
+					<th scope="col">{$t('forms.name')}</th>
+					<th scope="col">{$t('forms.value')}</th>
+					<th scope="col" class="w-96 text-center">{$t('forms.action')}</th>
+				</tr>
+			</thead>
+			<tbody>
+				{#each secrets as secret}
+					{#key secret.id}
+						<tr>
+							<Secret name={secret.name} value={secret.value} on:refresh={refreshSecrets} />
+						</tr>
+					{/key}
+				{/each}
+				<tr>
+					<Secret isNewSecret on:refresh={refreshSecrets} />
+				</tr>
+			</tbody>
+		</table>
+	</div>
 	<h2 class="title my-6 font-bold">Paste .env file</h2>
 	<form on:submit|preventDefault={getValues} class="mb-12 w-full">
 		<textarea bind:value={batchSecrets} class="mb-2 min-h-[200px] w-full" />
diff --git a/apps/ui/src/routes/services/_index.svelte b/apps/ui/src/routes/services/_index.svelte
index fd297e1cb..a788fde9a 100644
--- a/apps/ui/src/routes/services/_index.svelte
+++ b/apps/ui/src/routes/services/_index.svelte
@@ -43,28 +43,26 @@
 	});
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">{$t('index.services')}</div>
-	{#if $appSession.isAdmin}
-		<button on:click={newService} class="btn btn-square btn-sm bg-services">
-			<svg
-				class="h-6 w-6"
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke="currentColor"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-				/></svg
-			>
-		</button>
-	{/if}
-</div>
-
-<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
+<nav class="header">
+	<h1 class="mr-4 text-2xl font-bold">{$t('index.services')}</h1>
+	<button on:click={newService} class="btn btn-square btn-sm bg-services">
+		<svg
+			class="h-6 w-6"
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke="currentColor"
+			><path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+			/></svg
+		>
+	</button>
+</nav>
+<br />
+<div class="flex-col justify-center mt-10 pb-12 sm:pb-16 lg:pt-16">
 	{#if !services || ownServices.length === 0}
 		<div class="flex-col">
 			<div class="text-center text-xl font-bold">{$t('service.no_service')}</div>
diff --git a/apps/ui/src/routes/settings/_Menu.svelte b/apps/ui/src/routes/settings/_Menu.svelte
index 4b33bbb96..b48bb1403 100644
--- a/apps/ui/src/routes/settings/_Menu.svelte
+++ b/apps/ui/src/routes/settings/_Menu.svelte
@@ -3,19 +3,22 @@
 	import { appSession } from '$lib/store';
 </script>
 
-<div class="flex flex-col pt-4 space-y-6 px-10">
+<ul class="menu border bg-coolgray-100 border-coolgray-200 rounded-box p-2 space-y-2">
+	<li class="menu-title">
+		<span>General</span>
+	</li>
 	{#if $appSession.teamId === '0'}
-		<a
-			href="/settings/global"
-			class="sub-menu no-underline"
-			class:sub-menu-active={$page.routeId === 'settings/global'}
-		>
-			Global Settings
-		</a>
+		<li class="rounded" class:bg-coollabs={$page.url.pathname === `/settings/coolify`}>
+			<a href={`/settings/coolify`} class="no-underline w-full">Coolify Settings</a>
+		</li>
 	{/if}
-	<a
-		href="/settings/ssh-keys"
-		class="sub-menu no-underline"
-		class:sub-menu-active={$page.routeId === 'settings/ssh-keys'}>SSH Keys</a
-	>
-</div>
+	<li class="menu-title">
+		<span>Keys & Certificates</span>
+	</li>
+	<li class="rounded" class:bg-coollabs={$page.url.pathname === `/settings/ssh`}>
+		<a href={`/settings/ssh`} class="no-underline w-full">SSH Keys</a>
+	</li>
+	<li class="rounded" class:bg-coollabs={$page.url.pathname === `/settings/certificates`}>
+		<a href={`/settings/certificates`} class="no-underline w-full">SSL Certificates</a>
+	</li>
+</ul>
diff --git a/apps/ui/src/routes/settings/__layout.svelte b/apps/ui/src/routes/settings/__layout.svelte
index 0fc272517..4215c6cea 100644
--- a/apps/ui/src/routes/settings/__layout.svelte
+++ b/apps/ui/src/routes/settings/__layout.svelte
@@ -1,7 +1,8 @@
 <script context="module" lang="ts">
 	import { get } from '$lib/api';
-
+	import { page } from '$app/stores';
 	import type { Load } from '@sveltejs/kit';
+	import Menu from './_Menu.svelte';
 	export const load: Load = async () => {
 		try {
 			const response = await get(`/settings`);
@@ -19,5 +20,14 @@
 	};
 </script>
 
-
-<slot />
+<div class="mx-auto max-w-screen-2xl px-6 grid grid-cols-1 lg:grid-cols-4">
+	<nav class="header flex flex-col px-0">
+		<div class="title pb-[3.7rem]">Settings</div>
+		<div class="px-4">
+			<Menu />
+		</div>
+	</nav>
+	<div class="pt-0 lg:pt-[7rem] px-4 lg:px-7 col-span-0 lg:col-span-3">
+		<slot />
+	</div>
+</div>
diff --git a/apps/ui/src/routes/settings/certificates.svelte b/apps/ui/src/routes/settings/certificates.svelte
new file mode 100644
index 000000000..739a8b01a
--- /dev/null
+++ b/apps/ui/src/routes/settings/certificates.svelte
@@ -0,0 +1,138 @@
+<script context="module" lang="ts">
+	import type { Load } from '@sveltejs/kit';
+	export const load: Load = async ({ stuff }) => {
+		try {
+			return {
+				props: {
+					...stuff
+				}
+			};
+		} catch (error: any) {
+			return {
+				status: 500,
+				error: new Error(error)
+			};
+		}
+	};
+</script>
+
+<script lang="ts">
+	export let certificates: any;
+	import { del, post } from '$lib/api';
+	import { errorNotification } from '$lib/common';
+
+	let loading = {
+		save: false
+	};
+	let isModalActive = false;
+	let cert: any = null;
+	let key: any = null;
+
+	async function handleSubmit() {
+		try {
+			const formData = new FormData();
+			formData.append('cert', cert[0]);
+			formData.append('key', key[0]);
+			await post('/settings/upload', formData);
+			return window.location.reload();
+		} catch (error) {
+			errorNotification(error);
+			return false;
+		}
+	}
+	async function deleteCertificate(id: string) {
+		const sure = confirm('Are you sure you would like to delete this SSL Certificate?');
+		if (sure) {
+			try {
+				if (!id) return;
+				await del(`/settings/certificate`, { id });
+				return window.location.reload();
+			} catch (error) {
+				errorNotification(error);
+				return false;
+			}
+		}
+	}
+</script>
+
+	<div class="mx-auto w-full">
+		<div class="flex border-b border-coolgray-500 mb-6">
+			<div class="title font-bold pb-3 pr-4">SSL Certificates <span class="badge rounded bg-coollabs-gradient text-white">BETA</span></div>
+			<label for="my-modal" class="btn btn-sm btn-primary" on:click={() => (isModalActive = true)}
+				>Add SSL Certificate</label
+			>
+		</div>
+		{#if certificates.length > 0}
+			<table class="table w-full">
+				<thead>
+					<tr>
+						<th>Common Name</th>
+						<th>CreatedAt</th>
+						<th>Actions</th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each certificates as cert}
+						<tr>
+							<td>{cert.commonName}</td>
+							<td>{cert.createdAt}</td>
+							<td
+								><button on:click={() => deleteCertificate(cert.id)} class="btn btn-sm btn-error"
+									>Delete</button
+								></td
+							>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		{:else}
+			<div class="text-sm">No SSL Certificate found</div>
+		{/if}
+	</div>
+
+{#if isModalActive}
+	<input type="checkbox" id="my-modal" class="modal-toggle" />
+	<div class="modal modal-bottom sm:modal-middle ">
+		<div class="modal-box rounded bg-coolgray-300 max-w-2xl">
+			<h3 class="font-bold text-lg">Add a new SSL Certificate</h3>
+			<p class="py-4">
+				SSL Certificates are used to secure your domain and allow you to use HTTPS. <br /><br />Once
+				you uploaded your certificate, Coolify will automatically configure it for you in the
+				background.
+			</p>
+			<div class="modal-action">
+				<form on:submit|preventDefault={handleSubmit} class="w-full">
+					<div class="flex flex-col justify-center">
+						<label for="cert">Certificate</label>
+						<div class="flex-1" />
+						<input
+							class="w-full bg-coolgray-100"
+							id="cert"
+							type="file"
+							required
+							name="cert"
+							bind:files={cert}
+						/>
+						<label for="key" class="pt-10">Private Key</label>
+						<input
+							class="w-full bg-coolgray-100"
+							id="key"
+							type="file"
+							required
+							name="key"
+							bind:files={key}
+						/>
+					</div>
+					<label for="my-modal">
+						<button type="submit" class="btn btn-sm btn-primary mt-4">Upload</button></label
+					>
+					<button
+						on:click={() => (isModalActive = false)}
+						type="button"
+						class="btn btn-sm btn-error">Cancel</button
+					>
+				</form>
+			</div>
+		</div>
+	</div>
+{/if}
diff --git a/apps/ui/src/routes/settings/coolify.svelte b/apps/ui/src/routes/settings/coolify.svelte
new file mode 100644
index 000000000..88666c744
--- /dev/null
+++ b/apps/ui/src/routes/settings/coolify.svelte
@@ -0,0 +1,368 @@
+<script context="module" lang="ts">
+	import type { Load } from '@sveltejs/kit';
+	export const load: Load = async ({ stuff }) => {
+		try {
+			return {
+				props: {
+					...stuff
+				}
+			};
+		} catch (error: any) {
+			return {
+				status: 500,
+				error: new Error(error)
+			};
+		}
+	};
+</script>
+
+<script lang="ts">
+	export let settings: any;
+	export let certificates: any;
+	import Setting from '$lib/components/Setting.svelte';
+	import { del, get, post } from '$lib/api';
+	import { browser } from '$app/env';
+	import { t } from '$lib/translations';
+	import { addToast, appSession, features } from '$lib/store';
+	import { asyncSleep, errorNotification, getDomain } from '$lib/common';
+	import Menu from './_Menu.svelte';
+	import Explainer from '$lib/components/Explainer.svelte';
+	import Upload from '$lib/components/Upload.svelte';
+
+	let isAPIDebuggingEnabled = settings.isAPIDebuggingEnabled;
+	let isRegistrationEnabled = settings.isRegistrationEnabled;
+	let dualCerts = settings.dualCerts;
+	let isAutoUpdateEnabled = settings.isAutoUpdateEnabled;
+	let isDNSCheckEnabled = settings.isDNSCheckEnabled;
+	let DNSServers = settings.DNSServers;
+	let minPort = settings.minPort;
+	let maxPort = settings.maxPort;
+
+	let forceSave = false;
+	let fqdn = settings.fqdn;
+	let nonWWWDomain = fqdn && getDomain(fqdn).replace(/^www\./, '');
+	let isNonWWWDomainOK = false;
+	let isWWWDomainOK = false;
+	let isFqdnSet = !!settings.fqdn;
+	let loading = {
+		save: false,
+		remove: false,
+		proxyMigration: false,
+		restart: false
+	};
+
+	async function removeFqdn() {
+		if (fqdn) {
+			loading.remove = true;
+			try {
+				const { redirect } = await del(`/settings`, { fqdn });
+				return redirect ? window.location.replace(redirect) : window.location.reload();
+			} catch (error) {
+				return errorNotification(error);
+			} finally {
+				loading.remove = false;
+			}
+		}
+	}
+	async function changeSettings(name: any) {
+		try {
+			resetView();
+			if (name === 'isRegistrationEnabled') {
+				isRegistrationEnabled = !isRegistrationEnabled;
+			}
+			if (name === 'dualCerts') {
+				dualCerts = !dualCerts;
+			}
+			if (name === 'isAutoUpdateEnabled') {
+				isAutoUpdateEnabled = !isAutoUpdateEnabled;
+			}
+			if (name === 'isDNSCheckEnabled') {
+				isDNSCheckEnabled = !isDNSCheckEnabled;
+			}
+			if (name === 'isAPIDebuggingEnabled') {
+				isAPIDebuggingEnabled = !isAPIDebuggingEnabled;
+			}
+			await post(`/settings`, {
+				isAPIDebuggingEnabled,
+				isRegistrationEnabled,
+				dualCerts,
+				isAutoUpdateEnabled,
+				isDNSCheckEnabled
+			});
+			return addToast({
+				message: t.get('application.settings_saved'),
+				type: 'success'
+			});
+		} catch (error) {
+			return errorNotification(error);
+		}
+	}
+	async function handleSubmit() {
+		try {
+			loading.save = true;
+			nonWWWDomain = fqdn && getDomain(fqdn).replace(/^www\./, '');
+
+			if (fqdn !== settings.fqdn) {
+				await post(`/settings/check`, { fqdn, forceSave, dualCerts, isDNSCheckEnabled });
+				await post(`/settings`, { fqdn });
+				return window.location.reload();
+			}
+			if (minPort !== settings.minPort || maxPort !== settings.maxPort) {
+				await post(`/settings`, { minPort, maxPort });
+				settings.minPort = minPort;
+				settings.maxPort = maxPort;
+			}
+			if (DNSServers !== settings.DNSServers) {
+				await post(`/settings`, { DNSServers });
+				settings.DNSServers = DNSServers;
+			}
+			forceSave = false;
+			return addToast({
+				message: 'Configuration saved.',
+				type: 'success'
+			});
+		} catch (error: any) {
+			if (error.message?.startsWith($t('application.dns_not_set_partial_error'))) {
+				forceSave = true;
+				if (dualCerts) {
+					isNonWWWDomainOK = await isDNSValid(getDomain(nonWWWDomain), false);
+					isWWWDomainOK = await isDNSValid(getDomain(`www.${nonWWWDomain}`), true);
+				} else {
+					const isWWW = getDomain(settings.fqdn).includes('www.');
+					if (isWWW) {
+						isWWWDomainOK = await isDNSValid(getDomain(`www.${nonWWWDomain}`), true);
+					} else {
+						isNonWWWDomainOK = await isDNSValid(getDomain(nonWWWDomain), false);
+					}
+				}
+			}
+			return errorNotification(error);
+		} finally {
+			loading.save = false;
+		}
+	}
+	async function isDNSValid(domain: any, isWWW: any) {
+		try {
+			await get(`/settings/check?domain=${domain}`);
+			addToast({
+				message: 'DNS configuration is valid.',
+				type: 'success'
+			});
+			isWWW ? (isWWWDomainOK = true) : (isNonWWWDomainOK = true);
+			return true;
+		} catch (error) {
+			errorNotification(error);
+			isWWW ? (isWWWDomainOK = false) : (isNonWWWDomainOK = false);
+			return false;
+		}
+	}
+	function resetView() {
+		forceSave = false;
+	}
+	async function restartCoolify() {
+		const sure = confirm(
+			'Are you sure you would like to restart Coolify? Currently running deployments will be stopped and restarted.'
+		);
+		if (sure) {
+			loading.restart = true;
+			try {
+				await post(`/internal/restart`, {});
+				await asyncSleep(10000);
+				let reachable = false;
+				let tries = 0;
+				do {
+					await asyncSleep(4000);
+					try {
+						await get(`/undead`);
+						reachable = true;
+					} catch (error) {
+						reachable = false;
+					}
+					if (reachable) break;
+					tries++;
+				} while (!reachable || tries < 120);
+				addToast({
+					message: 'New version reachable. Reloading...',
+					type: 'success'
+				});
+				await asyncSleep(3000);
+				return window.location.reload();
+			} catch (error) {
+				return errorNotification(error);
+			} finally {
+				loading.restart = false;
+			}
+		}
+	}
+</script>
+
+<div class="mx-auto w-full">
+	<form on:submit|preventDefault={handleSubmit}>
+		<div class="flex flex-row border-b border-coolgray-500 mb-6">
+			<div class="title font-bold pb-3 pr-4">Coolify Settings</div>
+			<div class="flex flex-row space-x-2">
+				<button
+					class="btn btn-sm btn-primary"
+					type="submit"
+					class:bg-orange-600={forceSave}
+					class:hover:bg-orange-400={forceSave}
+					class:loading={loading.save}
+					disabled={loading.save}
+					>{loading.save
+						? $t('forms.saving')
+						: forceSave
+						? $t('forms.confirm_continue')
+						: $t('forms.save')}</button
+				>
+
+				{#if isFqdnSet}
+					<button on:click|preventDefault={removeFqdn} disabled={loading.remove} class="btn"
+						>{loading.remove ? $t('forms.removing') : $t('forms.remove_domain')}</button
+					>
+				{/if}
+				<button
+					on:click={restartCoolify}
+					class:loading={loading.restart}
+					class="btn btn-sm btn-error">Restart Coolify</button
+				>
+			</div>
+		</div>
+		<div class="flex lg:flex-row flex-col">
+			<div class="grid grid-flow-row gap-2  px-4 pr-5">
+				<div class="grid grid-cols-2 items-center">
+					<div>
+						{$t('application.url_fqdn')}
+						<Explainer position="dropdown-bottom" explanation={$t('setting.ssl_explainer')} />
+					</div>
+					<input
+						class="w-full"
+						bind:value={fqdn}
+						readonly={!$appSession.isAdmin || isFqdnSet}
+						disabled={!$appSession.isAdmin || isFqdnSet}
+						on:input={resetView}
+						name="fqdn"
+						id="fqdn"
+						pattern="^https?://([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{'{'}2,{'}'}$"
+						placeholder="{$t('forms.eg')}: https://coolify.io"
+					/>
+
+					{#if forceSave}
+						<div class="flex-col space-y-2 pt-4 text-center">
+							{#if isNonWWWDomainOK}
+								<button
+									class="btn bg-success"
+									on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
+									>DNS settings for {nonWWWDomain} is OK, click to recheck.</button
+								>
+							{:else}
+								<button
+									class="btn btn-error"
+									on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
+									>DNS settings for {nonWWWDomain} is invalid, click to recheck.</button
+								>
+							{/if}
+							{#if dualCerts}
+								{#if isWWWDomainOK}
+									<button
+										class="btn bg-success"
+										on:click|preventDefault={() =>
+											isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
+										>DNS settings for www.{nonWWWDomain} is OK, click to recheck.</button
+									>
+								{:else}
+									<button
+										class="btn btn-error"
+										on:click|preventDefault={() =>
+											isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
+										>DNS settings for www.{nonWWWDomain} is invalid, click to recheck.</button
+									>
+								{/if}
+							{/if}
+						</div>
+					{/if}
+				</div>
+				<div class="grid grid-cols-2 items-center">
+					<Setting
+						id="dualCerts"
+						dataTooltip={$t('setting.must_remove_domain_before_changing')}
+						disabled={isFqdnSet}
+						bind:setting={dualCerts}
+						title={$t('application.ssl_www_and_non_www')}
+						description={$t('setting.generate_www_non_www_ssl')}
+						on:click={() => !isFqdnSet && changeSettings('dualCerts')}
+					/>
+				</div>
+				<div class="grid grid-cols-2 items-center">
+					<div>
+						{$t('forms.public_port_range')}
+						<Explainer explanation={$t('forms.public_port_range_explainer')} />
+					</div>
+
+					<div class="flex flex-row items-center space-x-2">
+						<input
+							class="w-full px-2 "
+							type="number"
+							bind:value={minPort}
+							min="1024"
+							max={maxPort}
+						/>
+						<p>-</p>
+						<input
+							class="w-full px-2 "
+							type="number"
+							bind:value={maxPort}
+							min={minPort}
+							max="65543"
+						/>
+					</div>
+				</div>
+				<div class="grid grid-cols-2 items-center">
+					<Setting
+						id="isDNSCheckEnabled"
+						bind:setting={isDNSCheckEnabled}
+						title={$t('setting.is_dns_check_enabled')}
+						description={$t('setting.is_dns_check_enabled_explainer')}
+						on:click={() => changeSettings('isDNSCheckEnabled')}
+					/>
+				</div>
+				<div class="grid grid-cols-2 items-center">
+					<div>
+						Custom DNS servers <Explainer
+							explanation="You can specify a custom DNS server to verify your domains all over Coolify.<br><br>By default, the OS defined DNS servers are used."
+						/>
+					</div>
+
+					<input class="w-full " placeholder="1.1.1.1,8.8.8.8" bind:value={DNSServers} />
+				</div>
+
+				<div class="grid grid-cols-2 items-center">
+					<Setting
+						id="isRegistrationEnabled"
+						bind:setting={isRegistrationEnabled}
+						title={$t('setting.registration_allowed')}
+						description={$t('setting.registration_allowed_explainer')}
+						on:click={() => changeSettings('isRegistrationEnabled')}
+					/>
+				</div>
+				<div class="grid grid-cols-2 items-center">
+					<Setting
+						id="isAPIDebuggingEnabled"
+						bind:setting={isAPIDebuggingEnabled}
+						title="API Debugging"
+						description="Enable API debugging. This will log all API requests and responses.<br><br>You need to restart the Coolify for this to take effect."
+						on:click={() => changeSettings('isAPIDebuggingEnabled')}
+					/>
+				</div>
+				<div class="grid grid-cols-2 items-center">
+					<Setting
+						id="isAutoUpdateEnabled"
+						bind:setting={isAutoUpdateEnabled}
+						title={$t('setting.auto_update_enabled')}
+						description={$t('setting.auto_update_enabled_explainer')}
+						on:click={() => changeSettings('isAutoUpdateEnabled')}
+					/>
+				</div>
+			</div>
+		</div>
+	</form>
+</div>
diff --git a/apps/ui/src/routes/settings/global.svelte b/apps/ui/src/routes/settings/global.svelte
deleted file mode 100644
index 287274e24..000000000
--- a/apps/ui/src/routes/settings/global.svelte
+++ /dev/null
@@ -1,378 +0,0 @@
-<script context="module" lang="ts">
-	import type { Load } from '@sveltejs/kit';
-	export const load: Load = async ({ stuff }) => {
-		try {
-			return {
-				props: {
-					...stuff
-				}
-			};
-		} catch (error: any) {
-			return {
-				status: 500,
-				error: new Error(error)
-			};
-		}
-	};
-</script>
-
-<script lang="ts">
-	export let settings: any;
-	import Setting from '$lib/components/Setting.svelte';
-	import { del, get, post } from '$lib/api';
-	import { browser } from '$app/env';
-	import { t } from '$lib/translations';
-	import { addToast, appSession, features } from '$lib/store';
-	import { asyncSleep, errorNotification, getDomain } from '$lib/common';
-	import Menu from './_Menu.svelte';
-	import Explainer from '$lib/components/Explainer.svelte';
-
-	let isAPIDebuggingEnabled = settings.isAPIDebuggingEnabled;
-	let isRegistrationEnabled = settings.isRegistrationEnabled;
-	let dualCerts = settings.dualCerts;
-	let isAutoUpdateEnabled = settings.isAutoUpdateEnabled;
-	let isDNSCheckEnabled = settings.isDNSCheckEnabled;
-	let DNSServers = settings.DNSServers;
-	let minPort = settings.minPort;
-	let maxPort = settings.maxPort;
-
-	let forceSave = false;
-	let fqdn = settings.fqdn;
-	let nonWWWDomain = fqdn && getDomain(fqdn).replace(/^www\./, '');
-	let isNonWWWDomainOK = false;
-	let isWWWDomainOK = false;
-	let isFqdnSet = !!settings.fqdn;
-	let loading = {
-		save: false,
-		remove: false,
-		proxyMigration: false,
-		restart: false
-	};
-
-	async function removeFqdn() {
-		if (fqdn) {
-			loading.remove = true;
-			try {
-				const { redirect } = await del(`/settings`, { fqdn });
-				return redirect ? window.location.replace(redirect) : window.location.reload();
-			} catch (error) {
-				return errorNotification(error);
-			} finally {
-				loading.remove = false;
-			}
-		}
-	}
-	async function changeSettings(name: any) {
-		try {
-			resetView();
-			if (name === 'isRegistrationEnabled') {
-				isRegistrationEnabled = !isRegistrationEnabled;
-			}
-			if (name === 'dualCerts') {
-				dualCerts = !dualCerts;
-			}
-			if (name === 'isAutoUpdateEnabled') {
-				isAutoUpdateEnabled = !isAutoUpdateEnabled;
-			}
-			if (name === 'isDNSCheckEnabled') {
-				isDNSCheckEnabled = !isDNSCheckEnabled;
-			}
-			if (name === 'isAPIDebuggingEnabled') {
-				isAPIDebuggingEnabled = !isAPIDebuggingEnabled;
-			}
-			await post(`/settings`, {
-				isAPIDebuggingEnabled,
-				isRegistrationEnabled,
-				dualCerts,
-				isAutoUpdateEnabled,
-				isDNSCheckEnabled
-			});
-			return addToast({
-				message: t.get('application.settings_saved'),
-				type: 'success'
-			});
-		} catch (error) {
-			return errorNotification(error);
-		}
-	}
-	async function handleSubmit() {
-		try {
-			loading.save = true;
-			nonWWWDomain = fqdn && getDomain(fqdn).replace(/^www\./, '');
-
-			if (fqdn !== settings.fqdn) {
-				await post(`/settings/check`, { fqdn, forceSave, dualCerts, isDNSCheckEnabled });
-				await post(`/settings`, { fqdn });
-				return window.location.reload();
-			}
-			if (minPort !== settings.minPort || maxPort !== settings.maxPort) {
-				await post(`/settings`, { minPort, maxPort });
-				settings.minPort = minPort;
-				settings.maxPort = maxPort;
-			}
-			if (DNSServers !== settings.DNSServers) {
-				await post(`/settings`, { DNSServers });
-				settings.DNSServers = DNSServers;
-			}
-			forceSave = false;
-			return addToast({
-				message: 'Configuration saved.',
-				type: 'success'
-			});
-		} catch (error: any) {
-			if (error.message?.startsWith($t('application.dns_not_set_partial_error'))) {
-				forceSave = true;
-				if (dualCerts) {
-					isNonWWWDomainOK = await isDNSValid(getDomain(nonWWWDomain), false);
-					isWWWDomainOK = await isDNSValid(getDomain(`www.${nonWWWDomain}`), true);
-				} else {
-					const isWWW = getDomain(settings.fqdn).includes('www.');
-					if (isWWW) {
-						isWWWDomainOK = await isDNSValid(getDomain(`www.${nonWWWDomain}`), true);
-					} else {
-						isNonWWWDomainOK = await isDNSValid(getDomain(nonWWWDomain), false);
-					}
-				}
-			}
-			return errorNotification(error);
-		} finally {
-			loading.save = false;
-		}
-	}
-	async function isDNSValid(domain: any, isWWW: any) {
-		try {
-			await get(`/settings/check?domain=${domain}`);
-			addToast({
-				message: 'DNS configuration is valid.',
-				type: 'success'
-			});
-			isWWW ? (isWWWDomainOK = true) : (isNonWWWDomainOK = true);
-			return true;
-		} catch (error) {
-			errorNotification(error);
-			isWWW ? (isWWWDomainOK = false) : (isNonWWWDomainOK = false);
-			return false;
-		}
-	}
-	function resetView() {
-		forceSave = false;
-	}
-	async function restartCoolify() {
-		const sure = confirm(
-			'Are you sure you would like to restart Coolify? Currently running deployments will be stopped and restarted.'
-		);
-		if (sure) {
-			loading.restart = true;
-			try {
-				await post(`/internal/restart`, {});
-				await asyncSleep(10000);
-				let reachable = false;
-				let tries = 0;
-				do {
-					await asyncSleep(4000);
-					try {
-						await get(`/undead`);
-						reachable = true;
-					} catch (error) {
-						reachable = false;
-					}
-					if (reachable) break;
-					tries++;
-				} while (!reachable || tries < 120);
-				addToast({
-					message: 'New version reachable. Reloading...',
-					type: 'success'
-				});
-				await asyncSleep(3000);
-				return window.location.reload();
-			} catch (error) {
-				return errorNotification(error);
-			} finally {
-				loading.restart = false;
-			}
-		}
-	}
-</script>
-
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">{$t('index.settings')}</div>
-</div>
-<div class="mx-auto w-full">
-	<div class="flex flex-row">
-		<Menu />
-		<div>
-			<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
-				<div class="flex space-x-1 pb-6">
-					<div class="title font-bold">{$t('index.global_settings')}</div>
-					<button
-						class="btn btn-sm bg-settings text-black"
-						type="submit"
-						class:bg-orange-600={forceSave}
-						class:hover:bg-orange-400={forceSave}
-						disabled={loading.save}
-						>{loading.save
-							? $t('forms.saving')
-							: forceSave
-							? $t('forms.confirm_continue')
-							: $t('forms.save')}</button
-					>
-
-					{#if isFqdnSet}
-						<button
-							on:click|preventDefault={removeFqdn}
-							disabled={loading.remove}
-							class="btn btn-sm"
-							>{loading.remove ? $t('forms.removing') : $t('forms.remove_domain')}</button
-						>
-					{/if}
-					<button
-						on:click={restartCoolify}
-						class:loading={loading.restart}
-						class="btn btn-sm bg-red-600 hover:bg-red-500">Restart Coolify</button
-					>
-				</div>
-				<div class="grid grid-flow-row gap-2 px-10">
-					<!-- <Language /> -->
-					<div class="grid grid-cols-2 items-start">
-						<div class="flex-col">
-							<div class="pt-2 text-base font-bold text-stone-100">
-								{$t('application.url_fqdn')}
-								<Explainer explanation={$t('setting.ssl_explainer')} />
-							</div>
-						</div>
-						<div class="justify-start text-left">
-							<input
-								bind:value={fqdn}
-								readonly={!$appSession.isAdmin || isFqdnSet}
-								disabled={!$appSession.isAdmin || isFqdnSet}
-								on:input={resetView}
-								name="fqdn"
-								id="fqdn"
-								pattern="^https?://([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{'{'}2,{'}'}$"
-								placeholder="{$t('forms.eg')}: https://coolify.io"
-							/>
-
-							{#if forceSave}
-								<div class="flex-col space-y-2 pt-4 text-center">
-									{#if isNonWWWDomainOK}
-										<button
-											class="btn btn-sm bg-success"
-											on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
-											>DNS settings for {nonWWWDomain} is OK, click to recheck.</button
-										>
-									{:else}
-										<button
-											class="btn btn-sm bg-error"
-											on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
-											>DNS settings for {nonWWWDomain} is invalid, click to recheck.</button
-										>
-									{/if}
-									{#if dualCerts}
-										{#if isWWWDomainOK}
-											<button
-												class="btn btn-sm bg-success"
-												on:click|preventDefault={() =>
-													isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
-												>DNS settings for www.{nonWWWDomain} is OK, click to recheck.</button
-											>
-										{:else}
-											<button
-												class="btn btn-sm bg-error"
-												on:click|preventDefault={() =>
-													isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
-												>DNS settings for www.{nonWWWDomain} is invalid, click to recheck.</button
-											>
-										{/if}
-									{/if}
-								</div>
-							{/if}
-						</div>
-					</div>
-					<div class="grid grid-cols-2 items-start py-6">
-						<div class="flex-col">
-							<div class="pt-2 text-base font-bold text-stone-100">
-								{$t('forms.public_port_range')}
-								<Explainer explanation={$t('forms.public_port_range_explainer')} />
-							</div>
-						</div>
-						<div class="mx-auto flex-row items-center justify-center space-y-2">
-							<input
-								class="h-8 w-20 px-2"
-								type="number"
-								bind:value={minPort}
-								min="1024"
-								max={maxPort}
-							/>
-							-
-							<input
-								class="h-8 w-20 px-2"
-								type="number"
-								bind:value={maxPort}
-								min={minPort}
-								max="65543"
-							/>
-						</div>
-					</div>
-					<div class="grid grid-cols-2 items-center">
-						<Setting
-							id="isDNSCheckEnabled"
-							bind:setting={isDNSCheckEnabled}
-							title={$t('setting.is_dns_check_enabled')}
-							description={$t('setting.is_dns_check_enabled_explainer')}
-							on:click={() => changeSettings('isDNSCheckEnabled')}
-						/>
-					</div>
-					<div class="grid grid-cols-2 items-center">
-						<div class="text-base font-bold text-stone-100">
-							Custom DNS servers <Explainer
-								explanation="You can specify a custom DNS server to verify your domains all over Coolify.<br><br>By default, the OS defined DNS servers are used."
-							/>
-						</div>
-
-						<div class="flex-row items-center justify-center">
-							<input placeholder="1.1.1.1,8.8.8.8" bind:value={DNSServers} />
-						</div>
-					</div>
-					<div class="grid grid-cols-2 items-center">
-						<Setting
-							id="dualCerts"
-							dataTooltip={$t('setting.must_remove_domain_before_changing')}
-							disabled={isFqdnSet}
-							bind:setting={dualCerts}
-							title={$t('application.ssl_www_and_non_www')}
-							description={$t('setting.generate_www_non_www_ssl')}
-							on:click={() => !isFqdnSet && changeSettings('dualCerts')}
-						/>
-					</div>
-					<div class="grid grid-cols-2 items-center">
-						<Setting
-							id="isRegistrationEnabled"
-							bind:setting={isRegistrationEnabled}
-							title={$t('setting.registration_allowed')}
-							description={$t('setting.registration_allowed_explainer')}
-							on:click={() => changeSettings('isRegistrationEnabled')}
-						/>
-					</div>
-					<div class="grid grid-cols-2 items-center">
-						<Setting
-							id="isAPIDebuggingEnabled"
-							bind:setting={isAPIDebuggingEnabled}
-							title="API Debugging"
-							description="Enable API debugging. This will log all API requests and responses.<br><br>You need to restart the Coolify for this to take effect."
-							on:click={() => changeSettings('isAPIDebuggingEnabled')}
-						/>
-					</div>
-					<div class="grid grid-cols-2 items-center">
-						<Setting
-							id="isAutoUpdateEnabled"
-							bind:setting={isAutoUpdateEnabled}
-							title={$t('setting.auto_update_enabled')}
-							description={$t('setting.auto_update_enabled_explainer')}
-							on:click={() => changeSettings('isAutoUpdateEnabled')}
-						/>
-					</div>
-				</div>
-			</form>
-		</div>
-	</div>
-</div>
diff --git a/apps/ui/src/routes/settings/index.svelte b/apps/ui/src/routes/settings/index.svelte
index e63251299..7ba1b9950 100644
--- a/apps/ui/src/routes/settings/index.svelte
+++ b/apps/ui/src/routes/settings/index.svelte
@@ -2,7 +2,7 @@
 	import { goto } from '$app/navigation';
 	import { appSession } from '$lib/store';
 	if ($appSession.teamId !== '0') {
-		goto('/settings/ssh-keys');
+		goto('/settings/ssh');
 	}
-	goto('/settings/global');
+	goto('/settings/coolify');
 </script>
diff --git a/apps/ui/src/routes/settings/ssh-keys.svelte b/apps/ui/src/routes/settings/ssh-keys.svelte
deleted file mode 100644
index 7d77e4014..000000000
--- a/apps/ui/src/routes/settings/ssh-keys.svelte
+++ /dev/null
@@ -1,152 +0,0 @@
-<script context="module" lang="ts">
-	import type { Load } from '@sveltejs/kit';
-	export const load: Load = async ({ stuff }) => {
-		try {
-			return {
-				props: {
-					...stuff
-				}
-			};
-		} catch (error: any) {
-			return {
-				status: 500,
-				error: new Error(error)
-			};
-		}
-	};
-</script>
-
-<script lang="ts">
-	export let sshKeys: any;
-	import { del, post } from '$lib/api';
-	import { t } from '$lib/translations';
-	import { errorNotification } from '$lib/common';
-	import Menu from './_Menu.svelte';
-
-	let loading = {
-		save: false
-	};
-	let isModalActive = false;
-
-	let newSSHKey = {
-		name: null,
-		privateKey: null
-	};
-
-	async function handleSubmit() {
-		try {
-			await post(`/settings/sshKey`, { ...newSSHKey });
-			return window.location.reload();
-		} catch (error) {
-			errorNotification(error);
-			return false;
-		}
-	}
-	async function deleteSSHKey(id: string) {
-		const sure = confirm('Are you sure you would like to delete this SSH key?');
-		if (sure) {
-			try {
-				if (!id) return;
-				await del(`/settings/sshKey`, { id });
-				return window.location.reload();
-			} catch (error) {
-				errorNotification(error);
-				return false;
-			}
-		}
-	}
-</script>
-
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">{$t('index.settings')}</div>
-</div>
-<div class="mx-auto w-full">
-	<div class="flex flex-row">
-		<Menu />
-		<div class="grid grid-flow-row gap-2 py-4">
-			<div class="flex space-x-1 pb-6">
-				<div class="title font-bold">SSH Keys</div>
-				<button
-					on:click={() => (isModalActive = true)}
-					class="btn btn-sm bg-settings text-black"
-					disabled={loading.save}>New SSH Key</button
-				>
-			</div>
-			<div class="grid grid-flow-col gap-2 px-10">
-				{#if sshKeys.length === 0}
-					<div class="text-sm ">No SSH keys found</div>
-				{:else}
-					{#each sshKeys as key}
-						<div class="box-selection group relative">
-							<div class="text-xl font-bold">{key.name}</div>
-							<div class="py-3 text-stone-600">Added on {key.createdAt}</div>
-							<button on:click={() => deleteSSHKey(key.id)} class="btn btn-sm bg-error"
-								>Delete</button
-							>
-						</div>
-					{/each}
-				{/if}
-			</div>
-		</div>
-	</div>
-</div>
-{#if isModalActive}
-	<div class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true">
-		<div class="fixed inset-0 bg-coolgray-500 bg-opacity-75 transition-opacity" />
-		<div class="fixed z-10 inset-0 overflow-y-auto text-white">
-			<div class="flex items-end sm:items-center justify-center min-h-full p-4 text-center sm:p-0">
-				<form
-					on:submit|preventDefault={handleSubmit}
-					class="relative bg-coolblack rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg sm:w-full sm:p-6  border border-coolgray-500"
-				>
-					<div class="hidden sm:block absolute top-0 right-0 pt-4 pr-4">
-						<button
-							on:click={() => (isModalActive = false)}
-							type="button"
-							class=" rounded-md text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-						>
-							<span class="sr-only">Close</span>
-							<svg
-								class="h-6 w-6"
-								xmlns="http://www.w3.org/2000/svg"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke-width="2"
-								stroke="currentColor"
-								aria-hidden="true"
-							>
-								<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-							</svg>
-						</button>
-					</div>
-					<div class="sm:flex sm:items-start">
-						<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-							<h3 class="text-lg leading-6 font-medium pb-4" id="modal-title">New SSH Key</h3>
-							<div class="text-xs text-stone-400">Add an SSH key to your Coolify instance.</div>
-							<div class="mt-2">
-								<label for="privateKey" class="pb-2">Key</label>
-								<textarea
-									id="privateKey"
-									required
-									bind:value={newSSHKey.privateKey}
-									class="w-full"
-									rows={15}
-								/>
-							</div>
-							<div class="mt-2">
-								<label for="name" class="pb-2">Name</label>
-								<input id="name" required bind:value={newSSHKey.name} class="w-full" />
-							</div>
-						</div>
-					</div>
-					<div class="mt-5 flex space-x-4 justify-end">
-						<button type="submit" class="btn btn-sm bg-success">Save</button>
-						<button on:click={() => (isModalActive = false)} type="button" class="btn btn-sm"
-							>Cancel</button
-						>
-					</div>
-				</form>
-			</div>
-		</div>
-	</div>
-{/if}
diff --git a/apps/ui/src/routes/settings/ssh.svelte b/apps/ui/src/routes/settings/ssh.svelte
new file mode 100644
index 000000000..5fe932d9b
--- /dev/null
+++ b/apps/ui/src/routes/settings/ssh.svelte
@@ -0,0 +1,137 @@
+<script context="module" lang="ts">
+	import type { Load } from '@sveltejs/kit';
+	export const load: Load = async ({ stuff }) => {
+		try {
+			return {
+				props: {
+					...stuff
+				}
+			};
+		} catch (error: any) {
+			return {
+				status: 500,
+				error: new Error(error)
+			};
+		}
+	};
+</script>
+
+<script lang="ts">
+	export let sshKeys: any;
+	import { del, post } from '$lib/api';
+	import { t } from '$lib/translations';
+	import { errorNotification } from '$lib/common';
+	import Menu from './_Menu.svelte';
+
+	let loading = {
+		save: false
+	};
+	let isModalActive = false;
+
+	let newSSHKey = {
+		name: null,
+		privateKey: null
+	};
+
+	async function handleSubmit() {
+		try {
+			await post(`/settings/sshKey`, { ...newSSHKey });
+			return window.location.reload();
+		} catch (error) {
+			errorNotification(error);
+			return false;
+		}
+	}
+	async function deleteSSHKey(id: string) {
+		const sure = confirm('Are you sure you would like to delete this SSH key?');
+		if (sure) {
+			try {
+				if (!id) return;
+				await del(`/settings/sshKey`, { id });
+				return window.location.reload();
+			} catch (error) {
+				errorNotification(error);
+				return false;
+			}
+		}
+	}
+</script>
+
+<div class="w-full">
+	{#if sshKeys.length === 0}
+		<div class="text-sm">No SSH keys found</div>
+		<label for="my-modal" class="btn btn-primary mt-6" on:click={() => (isModalActive = true)}
+			>Add SSH Key</label
+		>
+	{:else}
+		<div class="mx-auto w-full">
+			<div class="flex border-b border-coolgray-500 mb-6">
+				<div class="title font-bold pb-3 pr-4">SSH Keys</div>
+				<label for="my-modal" class="btn btn-sm btn-primary" on:click={() => (isModalActive = true)}
+					>Add SSH Key</label
+				>
+			</div>
+			<table class="table w-full">
+				<thead>
+					<tr>
+						<th>Name</th>
+						<th>CreatedAt</th>
+						<th>Actions</th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each sshKeys as key}
+						<tr>
+							<td>{key.name}</td>
+							<td>{key.createdAt}</td>
+							<td
+								><button on:click={() => deleteSSHKey(key.id)} class="btn btn-sm btn-error"
+									>Delete</button
+								></td
+							>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	{/if}
+</div>
+
+{#if isModalActive}
+	<input type="checkbox" id="my-modal" class="modal-toggle" />
+	<div class="modal modal-bottom sm:modal-middle">
+		<div class="modal-box rounded bg-coolgray-300">
+			<h3 class="font-bold text-lg">Add a new SSH Key to Coolify</h3>
+			<p class="py-4">
+				SSH Keys can be used to authenticate & execute commands on remote servers.
+				<br /><br />You can generate a new public/private key using the following command:
+				<br />
+				<br />
+				<code class="bg-coolgray-100 p-2 rounded">ssh-keygen -t rsa -b 4096</code>
+			</p>
+			<div class="modal-action">
+				<form on:submit|preventDefault={handleSubmit}>
+					<label for="name" class="">Name</label>
+					<input id="name" required bind:value={newSSHKey.name} class="w-full bg-coolgray-100" />
+					<label for="privateKey" class="pt-4">Private Key</label>
+					<textarea
+						id="privateKey"
+						placeholder="-----BEGIN OPENSSH PRIVATE KEY-----"
+						required
+						bind:value={newSSHKey.privateKey}
+						class="w-full bg-coolgray-100"
+						rows={15}
+					/>
+					<label for="my-modal">
+						<button type="submit" class="btn btn-sm btn-primary mt-4">Save</button></label
+					>
+					<button
+						on:click={() => (isModalActive = false)}
+						type="button"
+						class="btn btn-sm btn-error">Cancel</button
+					>
+				</form>
+			</div>
+		</div>
+	</div>
+{/if}
diff --git a/apps/ui/src/routes/sources/[id]/_Github.svelte b/apps/ui/src/routes/sources/[id]/_Github.svelte
index c98ee4f4f..c104b5b84 100644
--- a/apps/ui/src/routes/sources/[id]/_Github.svelte
+++ b/apps/ui/src/routes/sources/[id]/_Github.svelte
@@ -90,142 +90,123 @@
 	}
 </script>
 
-<div class="mx-auto max-w-4xl px-6">
+<div class="mx-auto max-w-6xl lg:px-6 px-3">
 	{#if !source.githubAppId}
 		<form on:submit|preventDefault={newGithubApp} class="py-4">
 			<div class="grid gap-1 lg:grid-flow-col pb-7">
-				<div class="title">General</div>
+				<h1 class="title">General</h1>
 				{#if !source.githubAppId}
-					<button class="btn btn-sm bg-sources" type="submit">Save & Redirect to GitHub</button>
-				{/if}
-			</div>
-			<div class="grid grid-flow-row gap-2 px-10">
-				<div class="grid grid-flow-row gap-2">
-					<div class="mt-2 grid lg:grid-cols-2 items-center">
-						<label for="name" class="text-base font-bold text-stone-100">Name</label>
-						<input name="name" id="name" required bind:value={source.name} />
-					</div>
-				</div>
-				<div class="grid lg:grid-cols-2 items-center">
-					<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
-					<input name="htmlUrl" id="htmlUrl" required bind:value={source.htmlUrl} />
-				</div>
-				<div class="grid lg:grid-cols-2 items-center">
-					<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
-					<input name="apiUrl" id="apiUrl" required bind:value={source.apiUrl} />
-				</div>
-				<div class="grid lg:grid-cols-2 items-center">
-					<label for="customPort" class="text-base font-bold text-stone-100"
-						>Custom SSH Port <Explainer
-							explanation={'If you use a self-hosted version of Git, you can provide custom port for all the Git related actions.'}
-						/></label
-					>
-					<input
-						name="customPort"
-						id="customPort"
-						disabled={!selfHosted || source.githubAppId}
-						readonly={!selfHosted || source.githubAppId}
-						required
-						value={source.customPort}
-					/>
-				</div>
-				<div class="grid lg:grid-cols-2">
-					<div class="flex flex-col">
-						<label for="organization" class="pt-2 text-base font-bold text-stone-100"
-							>Organization
-							<Explainer
-								explanation={"Fill it if you would like to use an organization's as your Git Source. Otherwise your user will be used."}
-							/></label
+					<div class="w-full flex flex-rpw justify-end">
+						<button class="btn btn-sm bg-sources mt-5 w-full lg:w-fit" type="submit"
+							>Save & Redirect to GitHub</button
 						>
 					</div>
-					<input
-						name="organization"
-						id="organization"
-						placeholder="eg: coollabsio"
-						bind:value={source.organization}
-					/>
-				</div>
+				{/if}
+			</div>
+			<div class="grid gap-2 grid-cols-2 auto-rows-max">
+				<label for="name" class="text-base font-bold text-stone-100">Name</label>
+				<input class="w-full" name="name" id="name" required bind:value={source.name} />
+				<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
+				<input class="w-full" name="htmlUrl" id="htmlUrl" required bind:value={source.htmlUrl} />
+				<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
+				<input class="w-full" name="apiUrl" id="apiUrl" required bind:value={source.apiUrl} />
+				<label for="customPort" class="text-base font-bold text-stone-100"
+					>Custom SSH Port <Explainer
+						explanation={'If you use a self-hosted version of Git, you can provide custom port for all the Git related actions.'}
+					/></label
+				>
+				<input
+					class="w-full"
+					name="customPort"
+					id="customPort"
+					disabled={!selfHosted || source.githubAppId}
+					readonly={!selfHosted || source.githubAppId}
+					required
+					value={source.customPort}
+				/>
+				<label for="organization" class="pt-2 text-base font-bold text-stone-100"
+					>Organization
+					<Explainer
+						explanation={"Fill it if you would like to use an organization's as your Git Source. Otherwise your user will be used."}
+					/></label
+				>
+				<input
+					class="w-full"
+					name="organization"
+					id="organization"
+					placeholder="eg: coollabsio"
+					bind:value={source.organization}
+				/>
 			</div>
 		</form>
 	{:else if source.githubApp?.installationId}
 		<form on:submit|preventDefault={handleSubmit} class="py-4">
-			<div class="flex md:flex-row space-y-2 md:space-y-0 space-x-0 md:space-x-2 flex-col pb-5">
-				<div class="title">{$t('general')}</div>
-
+			<div class="flex lg:flex-row lg:justify-between flex-col space-y-3 w-full lg:items-center">
+				<h1 class="title">{$t('general')}</h1>
 				{#if $appSession.isAdmin}
-					<button class="btn btn-sm bg-sources" type="submit" disabled={loading}
-						>{loading ? 'Saving...' : 'Save'}</button
-					>
-					<a
-						class="btn btn-sm"
-						href={`${source.htmlUrl}/${
-							source.htmlUrl === 'https://github.com' ? 'apps' : 'github-apps'
-						}/${source.githubApp.name}/installations/new`}
-						>{$t('source.change_app_settings', { name: 'GitHub' })}</a
-					>
+					<div class="flex flex-col lg:flex-row lg:space-x-4 lg:w-fit space-y-2 lg:space-y-0 w-full">
+						<button class="btn btn-sm bg-sources" type="submit" disabled={loading}
+							>{loading ? 'Saving...' : 'Save'}</button
+						>
+						<a
+							class="btn btn-sm"
+							href={`${source.htmlUrl}/${
+								source.htmlUrl === 'https://github.com' ? 'apps' : 'github-apps'
+							}/${source.githubApp.name}/installations/new`}
+							>{$t('source.change_app_settings', { name: 'GitHub' })}</a
+						>
+					</div>
 				{/if}
 			</div>
-			<div class="grid grid-flow-row gap-2 px-10">
-				<div class="grid grid-flow-row gap-2">
-					<div class="mt-2 grid lg:grid-cols-2 items-center">
-						<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
-						<input name="name" id="name" required bind:value={source.name} />
-					</div>
-				</div>
-				<div class="grid lg:grid-cols-2 items-center">
-					<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
-					<input
-						name="htmlUrl"
-						id="htmlUrl"
-						disabled={source.githubAppId}
-						readonly={source.githubAppId}
-						required
-						bind:value={source.htmlUrl}
-					/>
-				</div>
-				<div class="grid lg:grid-cols-2 items-center">
-					<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
-					<input
-						name="apiUrl"
-						id="apiUrl"
-						required
-						disabled={source.githubAppId}
-						readonly={source.githubAppId}
-						bind:value={source.apiUrl}
-					/>
-				</div>
-				{#if selfHosted}
-					<div class="grid lg:grid-cols-2 items-center">
-						<label for="customPort" class="text-base font-bold text-stone-100"
-							>Custom SSH Port <Explainer
-								explanation="If you use a self-hosted version of Git, you can provide custom port for all the Git related actions."
-							/></label
-						>
-						<input
-							name="customPort"
-							id="customPort"
-							disabled={!selfHosted}
-							readonly={!selfHosted}
-							required
-							value={source.customPort}
-						/>
-					</div>
-				{/if}
-				<div class="grid lg:grid-cols-2">
-					<div class="flex flex-col">
-						<label for="organization" class="pt-2 text-base font-bold text-stone-100"
-							>Organization</label
-						>
-					</div>
-					<input
-						readonly
-						disabled
-						name="organization"
-						id="organization"
-						placeholder="eg: coollabsio"
-						bind:value={source.organization}
-					/>
-				</div>
+			<div class="grid gap-2 grid-cols-2 auto-rows-max mt-4">
+				<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
+				<input class="w-full" name="name" id="name" required bind:value={source.name} />
+				<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
+				<input
+					class="w-full"
+					name="htmlUrl"
+					id="htmlUrl"
+					disabled={source.githubAppId}
+					readonly={source.githubAppId}
+					required
+					bind:value={source.htmlUrl}
+				/>
+				<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
+				<input
+					class="w-full"
+					name="apiUrl"
+					id="apiUrl"
+					required
+					disabled={source.githubAppId}
+					readonly={source.githubAppId}
+					bind:value={source.apiUrl}
+				/>
+				<label for="customPort" class="text-base font-bold text-stone-100"
+					>Custom SSH Port <Explainer
+						explanation="If you use a self-hosted version of Git, you can provide custom port for all the Git related actions."
+					/></label
+				>
+				<input
+					class="w-full"
+					name="customPort"
+					id="customPort"
+					disabled={!selfHosted}
+					readonly={!selfHosted}
+					required
+					value={source.customPort}
+				/>
+				<label for="organization" class="pt-2 text-base font-bold text-stone-100"
+					>Organization</label
+				>
+				<input
+					class="w-full"
+					readonly
+					disabled
+					name="organization"
+					id="organization"
+					placeholder="eg: coollabsio"
+					bind:value={source.organization}
+				/>
 			</div>
 		</form>
 	{:else}
diff --git a/apps/ui/src/routes/sources/[id]/_Gitlab.svelte b/apps/ui/src/routes/sources/[id]/_Gitlab.svelte
index 0651d62ed..cf645ce4d 100644
--- a/apps/ui/src/routes/sources/[id]/_Gitlab.svelte
+++ b/apps/ui/src/routes/sources/[id]/_Gitlab.svelte
@@ -143,26 +143,28 @@
 	}
 </script>
 
-<div class="mx-auto max-w-4xl px-6">
+<div class="mx-auto max-w-6xl px-6">
 	<form on:submit|preventDefault={handleSubmit} class="py-4">
-		<div class="flex space-x-1 pb-7">
-			<div class="title">General</div>
-			{#if $appSession.isAdmin}
-				<button type="submit" class="btn btn-sm bg-sources" disabled={loading}
-					>{loading ? $t('forms.saving') : $t('forms.save')}</button
-				>
-				{#if source.gitlabAppId}
-					<button class="btn btn-sm" on:click|preventDefault={changeSettings}
-						>{$t('source.change_app_settings', { name: 'GitLab' })}</button
-					>
-				{:else}
-					<button class="btn btn-sm" on:click|preventDefault|stopPropagation={newApp}
-						>Create new GitLab App manually</button
+		<div class="flex lg:flex-row lg:justify-between flex-col space-y-3 w-full lg:items-center">
+			<h1 class="title">General</h1>
+			<div class="flex flex-col lg:flex-row lg:space-x-4 lg:w-fit space-y-2 lg:space-y-0 w-full">
+				{#if $appSession.isAdmin}
+					<button type="submit" class="btn btn-sm bg-sources" disabled={loading}
+						>{loading ? $t('forms.saving') : $t('forms.save')}</button
 					>
+					{#if source.gitlabAppId}
+						<button class="btn btn-sm" on:click|preventDefault={changeSettings}
+							>{$t('source.change_app_settings', { name: 'GitLab' })}</button
+						>
+					{:else}
+						<button class="btn btn-sm" on:click|preventDefault|stopPropagation={newApp}
+							>Create new GitLab App manually</button
+						>
+					{/if}
 				{/if}
-			{/if}
+			</div>
 		</div>
-		<div class="grid grid-flow-row gap-2 px-10">
+		<div class="grid grid-flow-row gap-2 lg:px-10">
 			{#if !source.gitlabAppId}
 				<a
 					href="https://docs.coollabs.io/coolify/sources#how-to-integrate-with-gitlab"
@@ -172,7 +174,7 @@
 				>
 				<div class="grid grid-cols-2 items-center">
 					<label for="type" class="text-base font-bold text-stone-100">Application Type</label>
-					<select name="type" id="type" class="w-96" bind:value={applicationType}>
+					<select name="type" id="type" class="lg:w-96 w-full" bind:value={applicationType}>
 						<option value="user">{$t('source.gitlab.user_owned')}</option>
 						<option value="group">{$t('source.gitlab.group_owned')}</option>
 						{#if source.htmlUrl !== 'https://gitlab.com'}
@@ -185,6 +187,7 @@
 					<div class="grid grid-cols-2 items-center">
 						<label for="groupName" class="text-base font-bold text-stone-100">Group Name</label>
 						<input
+							class="w-full"
 							name="groupName"
 							id="groupName"
 							required
@@ -197,12 +200,29 @@
 			<div class="grid grid-flow-row gap-2">
 				<div class="mt-2 grid grid-cols-2 items-center">
 					<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
-					<input name="name" id="name" required bind:value={source.name} />
+					<input class="w-full" name="name" id="name" required bind:value={source.name} />
 				</div>
 			</div>
+			{#if source.gitlabApp.groupName}
+				<div class="grid grid-cols-2 items-center">
+					<label for="groupName" class="text-base font-bold text-stone-100"
+						>{$t('source.group_name')}</label
+					>
+					<input
+						class="w-full"
+						name="groupName"
+						id="groupName"
+						disabled={source.gitlabAppId}
+						readonly={source.gitlabAppId}
+						required
+						bind:value={source.gitlabApp.groupName}
+					/>
+				</div>
+			{/if}
 			<div class="grid grid-cols-2 items-center">
 				<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
 				<input
+					class="w-full"
 					name="htmlUrl"
 					id="htmlUrl"
 					required
@@ -214,6 +234,7 @@
 			<div class="grid grid-cols-2 items-center">
 				<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
 				<input
+					class="w-full"
 					name="apiUrl"
 					id="apiUrl"
 					disabled={source.gitlabAppId}
@@ -230,6 +251,7 @@
 						/></label
 					>
 					<input
+						class="w-full"
 						name="customPort"
 						id="customPort"
 						disabled={!selfHosted}
@@ -249,6 +271,7 @@
 					>
 				</div>
 				<input
+					class="w-full"
 					disabled={source.gitlabAppId}
 					readonly={source.gitlabAppId}
 					on:change={checkOauthId}
@@ -266,6 +289,7 @@
 					>{$t('source.application_id')}</label
 				>
 				<input
+					class="w-full"
 					name="appId"
 					id="appId"
 					disabled={source.gitlabAppId}
diff --git a/apps/ui/src/routes/sources/[id]/__layout.svelte b/apps/ui/src/routes/sources/[id]/__layout.svelte
index 0cd0c27b4..47cc8df1f 100644
--- a/apps/ui/src/routes/sources/[id]/__layout.svelte
+++ b/apps/ui/src/routes/sources/[id]/__layout.svelte
@@ -9,7 +9,7 @@
 			if (id !== 'new' && (!source || Object.entries(source).length === 0)) {
 				return {
 					status: 302,
-					redirect: '/sources'
+					redirect: '/'
 				};
 			}
 			return {
diff --git a/apps/ui/src/routes/sources/_index.svelte b/apps/ui/src/routes/sources/_index.svelte
index a5a5f98ff..5a5897d60 100644
--- a/apps/ui/src/routes/sources/_index.svelte
+++ b/apps/ui/src/routes/sources/_index.svelte
@@ -36,8 +36,8 @@
 	});
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">{$t('index.git_sources')}</div>
+<nav class="header">
+	<h1 class="mr-4 text-2xl font-bold">{$t('index.git_sources')}</h1>
 	{#if $appSession.isAdmin}
 		<a href="/sources/new" class="btn btn-square btn-sm bg-sources">
 			<svg
@@ -55,8 +55,9 @@
 			>
 		</a>
 	{/if}
-</div>
-<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
+</nav>
+<br />
+<div class="flex-col justify-center mt-10 pb-12 sm:pb-16 lg:pt-16">
 	{#if !sources || ownSources.length === 0}
 		<div class="flex-col">
 			<div class="text-center text-xl font-bold">{$t('source.no_git_sources_found')}</div>
diff --git a/apps/ui/src/tailwind.css b/apps/ui/src/tailwind.css
index 71323105a..b60cef99c 100644
--- a/apps/ui/src/tailwind.css
+++ b/apps/ui/src/tailwind.css
@@ -17,6 +17,9 @@ @font-face {
 		url('/poppins-v19-latin-ext_latin_devanagari-500.woff') format('woff');
 }
 
+button {
+	@apply text-sm !important;
+}
 html {
 	@apply h-full min-h-full overflow-y-scroll;
 }
@@ -25,10 +28,10 @@ body {
 }
 
 input, .input {
-	@apply h-12 w-96 rounded border border-transparent bg-transparent bg-coolgray-200 p-2 text-xs tracking-tight text-white placeholder-stone-600 outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 disabled:border disabled:border-dashed disabled:border-coolgray-300 disabled:bg-transparent md:text-sm;
+	@apply h-12 w-96 rounded border border-transparent bg-coolgray-200 p-2 text-xs tracking-tight text-white placeholder-stone-600 outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 disabled:border disabled:border-dashed disabled:border-coolgray-200 disabled:bg-transparent disabled:bg-coolblack md:text-sm;
 }
 textarea {
-	@apply min-w-[24rem] rounded border border-transparent bg-transparent bg-coolgray-200 p-2 text-xs tracking-tight text-white placeholder-stone-600 outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 disabled:border disabled:border-dashed disabled:border-coolgray-300 disabled:bg-transparent md:text-sm;
+	@apply min-w-[14rem] rounded border border-transparent bg-coolgray-200 p-2 text-xs tracking-tight text-white placeholder-stone-600 outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 disabled:border disabled:border-dashed disabled:border-coolgray-200 disabled:bg-transparent md:text-sm;
 }
 
 #svelte .custom-select-wrapper .selectContainer.disabled input {
@@ -40,7 +43,7 @@ #svelte .custom-select-wrapper .selectContainer input {
 }
 
 #svelte .custom-select-wrapper .selectContainer {
-	@apply h-12 w-96 rounded border border-coolgray-300 border-dashed  bg-coolgray-200 p-2 px-0 text-xs tracking-tight outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 md:text-sm;
+	@apply h-12 w-96 rounded bg-coolgray-200 p-2 px-0 text-xs tracking-tight outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 md:text-sm w-full ;
 }
 
 #svelte .listContainer {
@@ -82,7 +85,7 @@ .custom-select-wrapper{
 }
 
 label {
-	@apply inline-block w-64 text-xs tracking-tight md:text-sm;
+	@apply inline-block;
 }
 .btn {
 	@apply text-white text-base min-w-fit;
@@ -97,7 +100,7 @@ .content {
 }
 
 .title {
-	@apply mr-4 text-base tracking-tight md:text-2xl font-bold;
+	@apply text-lg lg:text-2xl font-bold;
 }
 .nav-main {
 	@apply fixed top-0 left-0 min-h-screen w-16 min-w-[4rem] overflow-hidden border-r border-stone-800 bg-coolgray-200 scrollbar-w-1  scrollbar-thumb-coollabs scrollbar-track-coolgray-200 xl:overflow-visible;
@@ -197,6 +200,14 @@ .table *{
   border: none;
 }
 
-input {
-	@apply w-48 lg:w-96;
+
+.header {
+	@apply flex flex-row  z-10 w-full py-5 px-5;
+}
+.burger {
+	@apply block m-[2px] h-[3px] w-5 rounded
+}
+
+.bg-coollabs-gradient {
+	@apply bg-gradient-to-r from-purple-500 via-pink-500 to-red-500;
 }
\ No newline at end of file
diff --git a/apps/ui/static/grafana.png b/apps/ui/static/grafana.png
new file mode 100644
index 000000000..af2a31715
Binary files /dev/null and b/apps/ui/static/grafana.png differ
diff --git a/apps/ui/static/trilium.png b/apps/ui/static/trilium.png
new file mode 100644
index 000000000..249aceef3
Binary files /dev/null and b/apps/ui/static/trilium.png differ
diff --git a/apps/ui/tailwind.config.cjs b/apps/ui/tailwind.config.cjs
index f276a039c..082e6192e 100644
--- a/apps/ui/tailwind.config.cjs
+++ b/apps/ui/tailwind.config.cjs
@@ -49,7 +49,7 @@ module.exports = {
 				"iam": "#C026D3",
 				coollabs: '#6B16ED',
 				'coollabs-100': '#7317FF',
-				coolblack: '#161616',
+				coolblack: '#141414',
 				'coolgray-100': '#181818',
 				'coolgray-200': '#202020',
 				'coolgray-300': '#242424',
diff --git a/package.json b/package.json
index 8e235b6cf..d88a30bc7 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "coolify",
   "description": "An open-source & self-hostable Heroku / Netlify alternative.",
-  "version": "3.10.4",
+  "version": "3.10.5",
   "license": "Apache-2.0",
   "repository": "github:coollabsio/coolify",
   "scripts": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 98d3a1183..b02fd948e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,7 @@ importers:
       '@fastify/cors': 8.1.0
       '@fastify/env': 4.1.0
       '@fastify/jwt': 6.3.2
+      '@fastify/multipart': 7.2.0
       '@fastify/static': 6.5.0
       '@iarna/toml': 2.2.5
       '@ladjs/graceful': 3.0.2
@@ -60,6 +61,7 @@ importers:
       prettier: 2.7.1
       prisma: 4.3.1
       public-ip: 6.0.1
+      pump: ^3.0.0
       rimraf: 3.0.2
       ssh-config: 4.1.6
       strip-ansi: 7.0.1
@@ -73,6 +75,7 @@ importers:
       '@fastify/cors': 8.1.0
       '@fastify/env': 4.1.0
       '@fastify/jwt': 6.3.2
+      '@fastify/multipart': 7.2.0
       '@fastify/static': 6.5.0
       '@iarna/toml': 2.2.5
       '@ladjs/graceful': 3.0.2
@@ -102,6 +105,7 @@ importers:
       p-all: 4.0.0
       p-throttle: 5.0.0
       public-ip: 6.0.1
+      pump: 3.0.0
       ssh-config: 4.1.6
       strip-ansi: 7.0.1
       unique-names-generator: 4.7.1
@@ -161,6 +165,7 @@ importers:
       prettier-plugin-svelte: 2.7.0
       svelte: 3.50.0
       svelte-check: 2.9.0
+      svelte-file-dropzone: ^1.0.0
       svelte-preprocess: 4.10.7
       svelte-select: 4.4.7
       sveltekit-i18n: 2.2.2
@@ -177,6 +182,7 @@ importers:
       dayjs: 1.11.5
       js-cookie: 3.0.1
       p-limit: 4.0.0
+      svelte-file-dropzone: 1.0.0
       svelte-select: 4.4.7
       sveltekit-i18n: 2.2.2_svelte@3.50.0
     devDependencies:
@@ -200,7 +206,7 @@ importers:
       svelte: 3.50.0
       svelte-check: 2.9.0_shxyscafa2tdzd4z2tgnnrhyyu
       svelte-preprocess: 4.10.7_gzukngxpmlbzkiu3cz7vpamp3y
-      tailwindcss: 3.1.8
+      tailwindcss: 3.1.8_postcss@8.4.16
       tailwindcss-scrollbar: 0.1.0_tailwindcss@3.1.8
       tslib: 2.4.0
       typescript: 4.8.2
@@ -314,6 +320,13 @@ packages:
       pkg-up: 3.1.0
     dev: false
 
+  /@fastify/busboy/1.1.0:
+    resolution: {integrity: sha512-Fv854f94v0CzIDllbY3i/0NJPNBRNLDawf3BTYVGCe9VrIIs3Wi7AFx24F9NzCxdf0wyx/x0Q9kEVnvDOPnlxA==}
+    engines: {node: '>=10.17.0'}
+    dependencies:
+      text-decoding: 1.0.0
+    dev: false
+
   /@fastify/cookie/8.1.0:
     resolution: {integrity: sha512-+BxpyK4KLAjDpXdWxOjl8yaKtAoqYZR+CE9+cNtdMDoACb8hcpGx9npkrdINl62EpCu06oIPluq8A4NUsi78ZA==}
     dependencies:
@@ -328,6 +341,10 @@ packages:
       mnemonist: 0.39.2
     dev: false
 
+  /@fastify/deepmerge/1.1.0:
+    resolution: {integrity: sha512-E8Hfdvs1bG6u0N4vN5Nty6JONUfTdOciyD5rn8KnEsLKIenvOVcr210BQR9t34PRkNyjqnMLGk3e0BsaxRdL+g==}
+    dev: false
+
   /@fastify/env/4.1.0:
     resolution: {integrity: sha512-9l+JTUiFWSwb9dGSeR46aDWBjrAg8lJeqMjbotG5/8Ho90+qzRbt8kdSnVhLm5k6HcqXcBaBAT/6cImRhRq0VQ==}
     dependencies:
@@ -355,6 +372,19 @@ packages:
       steed: 1.1.3
     dev: false
 
+  /@fastify/multipart/7.2.0:
+    resolution: {integrity: sha512-LwfwbCLy30Be1pa5q7F8xCTygxJdEWkfkQhD4OWZ13+vMH4tP/6Bu3OkSTlFatxLAmbEl2UpHLf7CU7w7csRIw==}
+    dependencies:
+      '@fastify/busboy': 1.1.0
+      '@fastify/deepmerge': 1.1.0
+      '@fastify/error': 3.0.0
+      end-of-stream: 1.4.4
+      fastify-plugin: 4.2.1
+      hexoid: 1.0.0
+      secure-json-parse: 2.4.0
+      stream-wormhole: 1.1.0
+    dev: false
+
   /@fastify/static/6.5.0:
     resolution: {integrity: sha512-WEk6iqgejA6ivjkvbJ47A+uMci225z5lZwLXCXZS3ZYR/kYje1gzzarkKKGL6TWpBw6smkOzxA7dfEoY0347Nw==}
     dependencies:
@@ -584,7 +614,7 @@ packages:
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       postcss-selector-parser: 6.0.10
-      tailwindcss: 3.1.8
+      tailwindcss: 3.1.8_postcss@8.4.16
     dev: false
 
   /@tsconfig/node10/1.0.8:
@@ -2334,7 +2364,7 @@ packages:
       css-selector-tokenizer: 0.8.0
       postcss: 8.4.16
       postcss-js: 4.0.0_postcss@8.4.16
-      tailwindcss: 3.1.8
+      tailwindcss: 3.1.8_postcss@8.4.16
     transitivePeerDependencies:
       - ts-node
     dev: false
@@ -3213,6 +3243,13 @@ packages:
       flat-cache: 3.0.4
     dev: true
 
+  /file-selector/0.2.4:
+    resolution: {integrity: sha512-ZDsQNbrv6qRi1YTDOEWzf5J2KjZ9KMI1Q2SGeTkCJmNNW25Jg4TW4UMcmoqcg4WrAyKRcpBXdbWRxkfrOzVRbA==}
+    engines: {node: '>= 10'}
+    dependencies:
+      tslib: 2.4.0
+    dev: false
+
   /fill-range/7.0.1:
     resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
     engines: {node: '>=8'}
@@ -5554,6 +5591,11 @@ packages:
       reusify: 1.0.4
     dev: false
 
+  /stream-wormhole/1.1.0:
+    resolution: {integrity: sha512-gHFfL3px0Kctd6Po0M8TzEvt3De/xu6cnRrjlfYNhwbhLPLwigI2t1nc6jrzNuaYg5C4YF78PPFuQPzRiqn9ew==}
+    engines: {node: '>=4.0.0'}
+    dev: false
+
   /string-width/4.2.3:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
@@ -5728,6 +5770,12 @@ packages:
       - sugarss
     dev: true
 
+  /svelte-file-dropzone/1.0.0:
+    resolution: {integrity: sha512-F2DN+wN2w7bKuUJFYQOFsdtTgaohQ/rNKau5m5n2l3LHJRRIccYS4wpq8f6dz/h5aSxYse3oRclmYdW6FWAfjw==}
+    dependencies:
+      file-selector: 0.2.4
+    dev: false
+
   /svelte-heros/2.3.5:
     resolution: {integrity: sha512-08PdccaeRPP1pVa90AGieTwGzrNtXpC1Fry+i95OTvcR3xbGRU/hxK4rnaFYvGgk1Pxj9YT6GKGTEX8uXE9XJQ==}
     dev: true
@@ -5816,13 +5864,15 @@ packages:
     peerDependencies:
       tailwindcss: '>= 2.x.x'
     dependencies:
-      tailwindcss: 3.1.8
+      tailwindcss: 3.1.8_postcss@8.4.16
     dev: true
 
-  /tailwindcss/3.1.8:
+  /tailwindcss/3.1.8_postcss@8.4.16:
     resolution: {integrity: sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==}
     engines: {node: '>=12.13.0'}
     hasBin: true
+    peerDependencies:
+      postcss: ^8.0.9
     dependencies:
       arg: 5.0.2
       chokidar: 3.5.3
@@ -5869,6 +5919,10 @@ packages:
       readable-stream: 3.6.0
     dev: false
 
+  /text-decoding/1.0.0:
+    resolution: {integrity: sha512-/0TJD42KDnVwKmDK6jj3xP7E2MG7SHAOG4tyTgyUCRPdHwvkquYNLEQltmdMa3owq3TkddCVcTsoctJI8VQNKA==}
+    dev: false
+
   /text-table/0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
     dev: true
@@ -5986,7 +6040,6 @@ packages:
 
   /tslib/2.4.0:
     resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
-    dev: true
 
   /tsutils/3.21.0_typescript@4.8.2:
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}