Merge branch 'next' into edge-db

2022-09-07 10:20:40 +02:00
parent 7ed1ced521 0078574ee6
commit 3d70162a8d
231 changed files with 12691 additions and 8734 deletions
--- a/apps/ui/src/app.d.ts
+++ b/apps/ui/src/app.d.ts
@@ -21,4 +21,5 @@ declare namespace App {
 }

 declare const GITPOD_WORKSPACE_URL: string
+
  
--- a/apps/ui/src/app.html
+++ b/apps/ui/src/app.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html data-theme="coollabs" lang="en">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
--- a/apps/ui/src/lib/api.ts
+++ b/apps/ui/src/lib/api.ts
@@ -7,10 +7,12 @@ export function getAPIUrl() {
 		const newURL = href.replace('https://', 'https://3001-').replace(/\/$/, '')
 		return newURL
 	}
+	if (CODESANDBOX_HOST) {
+		     return `https://${CODESANDBOX_HOST.replace(/\$PORT/,'3001')}`
+	}
 	return dev ? 'http://localhost:3001' : 'http://localhost:3000';
 }
 export function getWebhookUrl(type: string) {
-	console.log(GITPOD_WORKSPACE_URL)
 	if (GITPOD_WORKSPACE_URL) {
 		const { href } = new URL(GITPOD_WORKSPACE_URL)
 		const newURL = href.replace('https://', 'https://3001-').replace(/\/$/, '')
@@ -21,6 +23,15 @@ export function getWebhookUrl(type: string) {
 			return `${newURL}/webhooks/gitlab/events`
 		}
 	}
+	if (CODESANDBOX_HOST) {
+		const newURL = `https://${CODESANDBOX_HOST.replace(/\$PORT/,'3001')}`
+		if (type === 'github') {
+			return `${newURL}/webhooks/github/events`
+		}
+		if (type === 'gitlab') {
+			return `${newURL}/webhooks/gitlab/events`
+		}
+	}
 	return `https://webhook.site/0e5beb2c-4e9b-40e2-a89e-32295e570c21/events`;
 }
 async function send({
--- a/apps/ui/src/lib/common.ts
+++ b/apps/ui/src/lib/common.ts
@@ -1,165 +1,4 @@
-import { toast } from '@zerodevx/svelte-toast';
-
-export const supportedServiceTypesAndVersions = [
-	{
-		name: 'plausibleanalytics',
-		fancyName: 'Plausible Analytics',
-		baseImage: 'plausible/analytics',
-		images: ['bitnami/postgresql:13.2.0', 'yandex/clickhouse-server:21.3.2.5'],
-		versions: ['latest', 'stable'],
-		recommendedVersion: 'stable',
-		ports: {
-			main: 8000
-		}
-	},
-	{
-		name: 'nocodb',
-		fancyName: 'NocoDB',
-		baseImage: 'nocodb/nocodb',
-		versions: ['latest'],
-		recommendedVersion: 'latest',
-		ports: {
-			main: 8080
-		}
-	},
-	{
-		name: 'minio',
-		fancyName: 'MinIO',
-		baseImage: 'minio/minio',
-		versions: ['latest'],
-		recommendedVersion: 'latest',
-		ports: {
-			main: 9001
-		}
-	},
-	{
-		name: 'vscodeserver',
-		fancyName: 'VSCode Server',
-		baseImage: 'codercom/code-server',
-		versions: ['latest'],
-		recommendedVersion: 'latest',
-		ports: {
-			main: 8080
-		}
-	},
-	{
-		name: 'wordpress',
-		fancyName: 'Wordpress',
-		baseImage: 'wordpress',
-		images: ['bitnami/mysql:5.7'],
-		versions: ['latest', 'php8.1', 'php8.0', 'php7.4', 'php7.3'],
-		recommendedVersion: 'latest',
-		ports: {
-			main: 80
-		}
-	},
-	{
-		name: 'vaultwarden',
-		fancyName: 'Vaultwarden',
-		baseImage: 'vaultwarden/server',
-		versions: ['latest'],
-		recommendedVersion: 'latest',
-		ports: {
-			main: 80
-		}
-	},
-	{
-		name: 'languagetool',
-		fancyName: 'LanguageTool',
-		baseImage: 'silviof/docker-languagetool',
-		versions: ['latest'],
-		recommendedVersion: 'latest',
-		ports: {
-			main: 8010
-		}
-	},
-	{
-		name: 'n8n',
-		fancyName: 'n8n',
-		baseImage: 'n8nio/n8n',
-		versions: ['latest'],
-		recommendedVersion: 'latest',
-		ports: {
-			main: 5678
-		}
-	},
-	{
-		name: 'uptimekuma',
-		fancyName: 'Uptime Kuma',
-		baseImage: 'louislam/uptime-kuma',
-		versions: ['latest'],
-		recommendedVersion: 'latest',
-		ports: {
-			main: 3001
-		}
-	},
-	{
-		name: 'ghost',
-		fancyName: 'Ghost',
-		baseImage: 'bitnami/ghost',
-		images: ['bitnami/mariadb'],
-		versions: ['latest'],
-		recommendedVersion: 'latest',
-		ports: {
-			main: 2368
-		}
-	},
-	{
-		name: 'meilisearch',
-		fancyName: 'Meilisearch',
-		baseImage: 'getmeili/meilisearch',
-		images: [],
-		versions: ['latest'],
-		recommendedVersion: 'latest',
-		ports: {
-			main: 7700
-		}
-	},
-	{
-		name: 'umami',
-		fancyName: 'Umami',
-		baseImage: 'ghcr.io/mikecao/umami',
-		images: ['postgres:12-alpine'],
-		versions: ['postgresql-latest'],
-		recommendedVersion: 'postgresql-latest',
-		ports: {
-			main: 3000
-		}
-	},
-	{
-		name: 'hasura',
-		fancyName: 'Hasura',
-		baseImage: 'hasura/graphql-engine',
-		images: ['postgres:12-alpine'],
-		versions: ['latest', 'v2.5.1'],
-		recommendedVersion: 'v2.5.1',
-		ports: {
-			main: 8080
-		}
-	},
-	{
-		name: 'fider',
-		fancyName: 'Fider',
-		baseImage: 'getfider/fider',
-		images: ['postgres:12-alpine'],
-		versions: ['stable'],
-		recommendedVersion: 'stable',
-		ports: {
-			main: 3000
-		}
-	},
-	// {
-	//     name: 'moodle',
-	//     fancyName: 'Moodle',
-	//     baseImage: 'bitnami/moodle',
-	//     images: [],
-	//     versions: ['latest', 'v4.0.2'],
-	//     recommendedVersion: 'latest',
-	//     ports: {
-	//         main: 8080
-	//     }
-	// }
-];
+import { addToast } from '$lib/store';

 export const asyncSleep = (delay: number) =>
 	new Promise((resolve) => setTimeout(resolve, delay));
@@ -167,12 +6,20 @@ export const asyncSleep = (delay: number) =>
 export function errorNotification(error: any): void {
 	if (error.message) {
 		if (error.message === 'Cannot read properties of undefined (reading \'postMessage\')') {
-			toast.push('Currently there is background process in progress. Please try again later.');
-			return;
+			return addToast({
+				message: 'Currently there is background process in progress. Please try again later.',
+				type: 'error',
+			});
 		}
-		toast.push(error.message);
+		addToast({
+			message: error.message,
+			type: 'error',
+		});
 	} else {
-		toast.push('Ooops, something is not okay, are you okay?');
+		addToast({
+			message: 'Ooops, something is not okay, are you okay?',
+			type: 'error',
+		});
 	}
 	console.error(JSON.stringify(error));
 }
@@ -210,7 +57,7 @@ export const staticDeployments = [
 	'astro',
 	'eleventy'
 ];
-export const notNodeDeployments = ['php', 'docker', 'rust', 'python', 'deno', 'laravel'];
+export const notNodeDeployments = ['php', 'docker', 'rust', 'python', 'deno', 'laravel', 'heroku'];


 export function generateRemoteEngine(destination: any) {
@@ -224,44 +71,6 @@ export function changeQueryParams(buildId: string) {
 	return history.pushState(null, null, '?' + queryParams.toString());
 }

-export const supportedDatabaseTypesAndVersions = [
-	{
-		name: 'mongodb',
-		fancyName: 'MongoDB',
-		baseImage: 'bitnami/mongodb',
-		versions: ['5.0', '4.4', '4.2']
-	},
-	{ name: 'mysql', fancyName: 'MySQL', baseImage: 'bitnami/mysql', versions: ['8.0', '5.7'] },
-	{
-		name: 'mariadb',
-		fancyName: 'MariaDB',
-		baseImage: 'bitnami/mariadb',
-		versions: ['10.7', '10.6', '10.5', '10.4', '10.3', '10.2']
-	},
-	{
-		name: 'postgresql',
-		fancyName: 'PostgreSQL',
-		baseImage: 'bitnami/postgresql',
-		versions: ['14.2.0', '13.6.0', '12.10.0	', '11.15.0', '10.20.0']
-	},
-	{
-		name: 'redis',
-		fancyName: 'Redis',
-		baseImage: 'bitnami/redis',
-		versions: ['6.2', '6.0', '5.0']
-	},
-	{ name: 'couchdb', fancyName: 'CouchDB', baseImage: 'bitnami/couchdb', versions: ['3.2.1'] }
-];
-
-export const getServiceMainPort = (service: string) => {
-	const serviceType = supportedServiceTypesAndVersions.find((s) => s.name === service);
-	if (serviceType) {
-		return serviceType.ports.main;
-	}
-	return null;
-};
-
-

 export function handlerNotFoundLoad(error: any, url: URL) {
 	if (error?.status === 404) {
--- a/apps/ui/src/lib/components/CopyPasswordField.svelte
+++ b/apps/ui/src/lib/components/CopyPasswordField.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { browser } from '$app/env';
-	import { toast } from '@zerodevx/svelte-toast';
+	import { addToast } from '$lib/store';
 	let showPassword = false;

 	export let value: string;
@@ -9,7 +9,7 @@
 	export let readonly = false;
 	export let textarea = false;
 	export let required = false;
-	export let pattern: string|null|undefined = null;
+	export let pattern: string | null | undefined = null;
 	export let id: string;
 	export let name: string;
 	export let placeholder = '';
@@ -20,7 +20,10 @@
 	function copyToClipboard() {
 		if (isHttps && navigator.clipboard) {
 			navigator.clipboard.writeText(value);
-			toast.push('Copied to clipboard.');
+			addToast({
+				message: 'Copied to clipboard.',
+				type: 'success'
+			});
 		}
 	}
 </script>
--- a/apps/ui/src/lib/components/DocLink.svelte
+++ b/apps/ui/src/lib/components/DocLink.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import Tooltip from './Tooltip.svelte';
+	export let url = 'https://docs.coollabs.io';
+	let id =
+		'cool-' +
+		url
+			.split('')
+			.map((c) => c.charCodeAt(0).toString(16).padStart(2, '0'))
+			.join('')
+			.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>
+<Tooltip triggeredBy={`#${id}`}>See details in the documentation</Tooltip>
--- a/apps/ui/src/lib/components/Explainer.svelte
+++ b/apps/ui/src/lib/components/Explainer.svelte
@@ -1,6 +1,31 @@
 <script lang="ts">
-	export let text: string;
-	export let customClass = 'max-w-[24rem]';
+	import { onMount } from 'svelte';
+
+	import Tooltip from './Tooltip.svelte';
+	export let explanation = '';
+	let id: any;
+	let self: any;
+	onMount(() => {
+		id = `info-${self.offsetLeft}-${self.offsetTop}`;
+	});
 </script>

-<div class="p-2 text-xs text-stone-400 {customClass}">{@html text}</div>
+<div {id} class="inline-block mx-2 text-pink-500 cursor-pointer" bind:this={self}>
+	<svg
+		fill="none"
+		height="18"
+		shape-rendering="geometricPrecision"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="1.5"
+		viewBox="0 0 24 24"
+		width="18"
+		><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" />
+	</svg>
+</div>
+{#if id}
+	<Tooltip triggeredBy={`#${id}`}>{@html explanation}</Tooltip>
+{/if}
--- a/apps/ui/src/lib/components/Setting.svelte
+++ b/apps/ui/src/lib/components/Setting.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
-	import Explainer from '$lib/components/Explainer.svelte';
+	import Explaner from './Explainer.svelte';
+	import Tooltip from './Tooltip.svelte';

+	export let id: any;
 	export let setting: any;
 	export let title: any;
 	export let description: any;
@@ -8,22 +10,18 @@
 	export let disabled = false;
 	export let dataTooltip: any = null;
 	export let loading = false;
+	let triggeredBy = `#${id}`;
 </script>

 <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}</div>
-		<Explainer text={description} />
+		<div class="text-xs font-bold text-stone-100 md:text-base">
+			{title}<Explaner explanation={description} />
+		</div>
 	</div>
 </div>
-<div
-	class:tooltip={dataTooltip}
-	class:text-center={isCenter}
-	data-tooltip={dataTooltip}
-	class="flex justify-center"
->
+<div class:text-center={isCenter} class="flex justify-center">
 	<div
-		type="button"
 		on:click
 		aria-pressed="false"
 		class="relative mx-20 inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out"
@@ -31,6 +29,7 @@
 		class:bg-green-600={!loading && setting}
 		class:bg-stone-700={!loading && !setting}
 		class:bg-yellow-500={loading}
+		{id}
 	>
 		<span class="sr-only">Use setting</span>
 		<span
@@ -71,3 +70,7 @@
 		</span>
 	</div>
 </div>
+
+{#if dataTooltip}
+	<Tooltip {triggeredBy} placement="top">{dataTooltip}</Tooltip>
+{/if}
--- a/apps/ui/src/lib/components/SimpleExplainer.svelte
+++ b/apps/ui/src/lib/components/SimpleExplainer.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+	export let text: string;
+	export let customClass = 'max-w-[24rem]';
+</script>
+
+<div class="p-2 text-xs text-stone-400 {customClass}">{@html text}</div>
--- a/apps/ui/src/lib/components/Toast.svelte
+++ b/apps/ui/src/lib/components/Toast.svelte
@@ -0,0 +1,59 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+	export let type = 'info';
+</script>
+
+<div
+	on:click={() => dispatch('click')}
+	on:mouseover={() => dispatch('pause')}
+	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:alert-error={type === 'error'}
+	class:alert-info={type === 'info'}
+>
+	{#if type === 'success'}
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			class="stroke-current flex-shrink-0 h-6 w-6"
+			fill="none"
+			viewBox="0 0 24 24"
+			><path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+			/></svg
+		>
+	{:else if type === 'error'}
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			class="stroke-current flex-shrink-0 h-6 w-6"
+			fill="none"
+			viewBox="0 0 24 24"
+			><path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+			/></svg
+		>
+	{:else if type === 'info'}
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			class="stroke-current flex-shrink-0 w-6 h-6"
+			><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"
+			/></svg
+		>
+	{/if}
+	<slot />
+</div>
--- a/apps/ui/src/lib/components/Toasts.svelte
+++ b/apps/ui/src/lib/components/Toasts.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import Toast from './Toast.svelte';
+
+	import { dismissToast, pauseToast, resumeToast, toasts } from '$lib/store';
+</script>
+
+{#if $toasts}
+	<section>
+		<article class="toast toast-top toast-end rounded-none" role="alert" transition:fade>
+			{#each $toasts as toast (toast.id)}
+				<Toast
+					type={toast.type}
+					on:resume={() => resumeToast(toast.id)}
+					on:pause={() => pauseToast(toast.id)}
+					on:click={() => dismissToast(toast.id)}>{@html toast.message}</Toast
+				>
+			{/each}
+		</article>
+	</section>
+{/if}
+
+<style lang="postcss">
+	section {
+		@apply fixed top-0 left-0 right-0 w-full flex flex-col mt-4 justify-center z-[1000];
+	}
+</style>
--- a/apps/ui/src/lib/components/Tooltip.svelte
+++ b/apps/ui/src/lib/components/Tooltip.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { Tooltip } from 'flowbite-svelte';
+	export let placement = 'bottom';
+	export let color = 'bg-coollabs text-left';
+	export let triggeredBy = '#tooltip-default';
+</script>
+
+<Tooltip {triggeredBy} {placement} arrow={false} {color} style="custom"><slot /></Tooltip>
--- a/apps/ui/src/lib/components/UpdateAvailable.svelte
+++ b/apps/ui/src/lib/components/UpdateAvailable.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
 	import { dev } from '$app/env';
 	import { get, post } from '$lib/api';
-	import { appSession, features } from '$lib/store';
-	import { toast } from '@zerodevx/svelte-toast';
+	import { addToast, appSession, features } from '$lib/store';
 	import { asyncSleep, errorNotification } from '$lib/common';
 	import { onMount } from 'svelte';

@@ -17,12 +16,15 @@
 		updateStatus.loading = true;
 		try {
 			if (dev) {
-				console.log(`updating to ${latestVersion}`);
 				await asyncSleep(4000);
 				return window.location.reload();
 			} else {
 				await post(`/update`, { type: 'update', latestVersion });
-				toast.push('Update completed.<br><br>Waiting for the new version to start...');
+				addToast({
+					message: 'Update completed.<br><br>Waiting for the new version to start...',
+					type: 'success'
+				});
+
 				let reachable = false;
 				let tries = 0;
 				do {
@@ -36,7 +38,10 @@
 					if (reachable) break;
 					tries++;
 				} while (!reachable || tries < 120);
-				toast.push('New version reachable. Reloading...');
+				addToast({
+					message: 'New version reachable. Reloading...',
+					type: 'success'
+				});
 				updateStatus.loading = false;
 				updateStatus.success = true;
 				await asyncSleep(3000);
@@ -75,9 +80,9 @@
 		{#if isUpdateAvailable}
 			<button
 				disabled={updateStatus.success === false}
-				title="Update available"
 				on:click={update}
-				class="icons tooltip-right bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white duration-75 hover:scale-105"
+				class="icons tooltip tooltip-right tooltip-primary bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white duration-75 hover:scale-105"
+				data-tip="Update Available!"
 			>
 				{#if updateStatus.loading}
 					<svg
--- a/apps/ui/src/lib/components/Usage.svelte
+++ b/apps/ui/src/lib/components/Usage.svelte
@@ -19,13 +19,13 @@
 	};
 	let usageInterval: any;
 	let loading = {
-		usage: false
+		usage: false,
+		cleanup: false
 	};
-	import { appSession } from '$lib/store';
+	import { addToast, appSession } from '$lib/store';
 	import { onDestroy, onMount } from 'svelte';
 	import { get, post } from '$lib/api';
 	import { errorNotification } from '$lib/common';
-	import Trend from './Trend.svelte';
 	async function getStatus() {
 		if (loading.usage) return;
 		loading.usage = true;
@@ -33,6 +33,7 @@
 		usage = data.usage;
 		loading.usage = false;
 	}
+
 	onDestroy(() => {
 		clearInterval(usageInterval);
 	});
@@ -48,107 +49,99 @@
 			return errorNotification(error);
 		}
 	});
-
-	let warning = {
-		memory: false,
-		cpu: false,
-		disk: false
-	};
-	let trends = {
-		memory: 'stable',
-		cpu: 'stable',
-		disk: 'stable'
-	};
 	async function manuallyCleanupStorage() {
-		return await post('/internal/cleanup', {});
+		try {
+			loading.cleanup = true;
+			await post('/internal/cleanup', {});
+			return addToast({
+				message: 'Cleanup done.',
+				type: 'success'
+			});
+		} catch (error) {
+			return errorNotification(error);
+		} finally {
+			loading.cleanup = false;
+		}
 	}
 </script>

-{#if $appSession.teamId === '0'}
-	<div class="px-6 text-2xl font-bold">Server Usage</div>
-	<dl class="relative mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
-		<div class="overflow-hidden rounded px-4 py-5 text-center sm:p-6 sm:text-left">
-			<dt class="truncate text-sm font-medium text-white">Total Memory</dt>
-			<dd class="mt-1 text-3xl font-semibold text-white">
-				{(usage?.memory.totalMemMb).toFixed(0)}<span class="text-sm">MB</span>
-			</dd>
+<div class="w-full">
+	<div class="flex lg:flex-row flex-col gap-4">
+		<h1 class="title lg:text-3xl">Hardware Details</h1>
+		<div class="flex lg:flex-row flex-col space-x-0 lg:space-x-2 space-y-2 lg:space-y-0">
+			{#if $appSession.teamId === '0'}
+				<button on:click={manuallyCleanupStorage} class:loading={loading.cleanup} class="btn btn-sm"
+					>Cleanup Storage</button
+				>
+			{/if}
+		</div>
+	</div>
+	<div class="divider" />
+	<div class="grid grid-flow-col gap-4 grid-rows-3 justify-start lg:justify-center lg:grid-rows-1">
+		<div class="stats stats-vertical min-w-[16rem] mb-5 rounded bg-transparent">
+			<div class="stat">
+				<div class="stat-title">Total Memory</div>
+				<div class="stat-value text-2xl">
+					{(usage?.memory.totalMemMb).toFixed(0)}<span class="text-sm">MB</span>
+				</div>
+			</div>
+
+			<div class="stat">
+				<div class="stat-title">Used Memory</div>
+				<div class="stat-value text-2xl">
+					{(usage?.memory.usedMemMb).toFixed(0)}<span class="text-sm">MB</span>
+				</div>
+			</div>
+
+			<div class="stat">
+				<div class="stat-title">Free Memory</div>
+				<div class="stat-value text-2xl">
+					{usage?.memory.freeMemPercentage}<span class="text-sm">%</span>
+				</div>
+			</div>
 		</div>

-		<div class="overflow-hidden rounded px-4 py-5 text-center sm:p-6 sm:text-left">
-			<dt class="truncate text-sm font-medium text-white">Used Memory</dt>
-			<dd class="mt-1 text-3xl font-semibold text-white ">
-				{(usage?.memory.usedMemMb).toFixed(0)}<span class="text-sm">MB</span>
-			</dd>
-		</div>
+		<div class="stats stats-vertical min-w-[20rem] mb-5 bg-transparent rounded">
+			<div class="stat">
+				<div class="stat-title">Total CPU</div>
+				<div class="stat-value text-2xl">
+					{usage?.cpu.count}
+				</div>
+			</div>

-		<div
-			class="overflow-hidden rounded px-4 py-5 text-center sm:p-6 sm:text-left"
-			class:bg-red-500={warning.memory}
-		>
-			<dt class="truncate text-sm font-medium text-white">Free Memory</dt>
-			<dd class="mt-1 text-3xl font-semibold text-white">
-				{usage?.memory.freeMemPercentage}<span class="text-sm">%</span>
-				{#if !warning.memory}
-					<Trend trend={trends.memory} />
-				{/if}
-			</dd>
-		</div>
-	</dl>
-	<dl class="relative mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
-		<div class="overflow-hidden rounded px-4 py-5 text-center sm:p-6 sm:text-left">
-			<dt class="truncate text-sm font-medium text-white">Total CPUs</dt>
-			<dd class="mt-1 text-3xl font-semibold text-white">
-				{usage?.cpu.count}
-			</dd>
-		</div>
-		<div
-			class="overflow-hidden rounded px-4 py-5 text-center sm:p-6 sm:text-left"
-			class:bg-red-500={warning.cpu}
-		>
-			<dt class="truncate text-sm font-medium text-white">CPU Usage</dt>
-			<dd class="mt-1 text-3xl font-semibold text-white">
-				{usage?.cpu.usage}<span class="text-sm">%</span>
-				{#if !warning.cpu}
-					<Trend trend={trends.cpu} />
-				{/if}
-			</dd>
-		</div>
-		<div class="overflow-hidden rounded px-4 py-5 text-center sm:p-6 sm:text-left">
-			<dt class="truncate text-sm font-medium text-white">Load Average (5/10/30mins)</dt>
-			<dd class="mt-1 text-3xl font-semibold text-white">
-				{usage?.cpu.load.join('/')}
-			</dd>
-		</div>
-	</dl>
-	<dl class="relative mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
-		<div class="overflow-hidden rounded px-4 py-5 text-center sm:p-6 sm:text-left">
-			<dt class="truncate text-sm font-medium text-white">Total Disk</dt>
-			<dd class="mt-1 text-3xl font-semibold text-white">
-				{usage?.disk.totalGb}<span class="text-sm">GB</span>
-			</dd>
-		</div>
-		<div class="overflow-hidden rounded px-4 py-5 text-center sm:p-6 sm:text-left">
-			<dt class="truncate text-sm font-medium text-white">Used Disk</dt>
-			<dd class="mt-1 text-3xl font-semibold text-white">
-				{usage?.disk.usedGb}<span class="text-sm">GB</span>
-			</dd>
-			<button on:click={manuallyCleanupStorage} class="bg-coollabs hover:bg-coollabs-100"
-				>Cleanup Storage</button
-			>
-		</div>
-		<div
-			class="overflow-hidden rounded px-4 py-5 text-center sm:p-6 sm:text-left"
-			class:bg-red-500={warning.disk}
-		>
-			<dt class="truncate text-sm font-medium text-white">Free Disk</dt>
-			<dd class="mt-1 text-3xl font-semibold text-white">
-				{usage?.disk.freePercentage}<span class="text-sm">%</span>
-				{#if !warning.disk}
-					<Trend trend={trends.disk} />
-				{/if}
-			</dd>
-		</div>
-	</dl>
+			<div class="stat">
+				<div class="stat-title">CPU Usage</div>
+				<div class="stat-value text-2xl">
+					{usage?.cpu.usage}<span class="text-sm">%</span>
+				</div>
+			</div>

-	<div class="px-6 pt-20 text-2xl font-bold">Resources</div>
-{/if}
+			<div class="stat">
+				<div class="stat-title">Load Average (5,10,30mins)</div>
+				<div class="stat-value text-2xl">{usage?.cpu.load}</div>
+			</div>
+		</div>
+		<div class="stats stats-vertical min-w-[16rem] mb-5 bg-transparent rounded">
+			<div class="stat">
+				<div class="stat-title">Total Disk</div>
+				<div class="stat-value text-2xl">
+					{usage?.disk.totalGb}<span class="text-sm">GB</span>
+				</div>
+			</div>
+
+			<div class="stat">
+				<div class="stat-title">Used Disk</div>
+				<div class="stat-value text-2xl">
+					{usage?.disk.usedGb}<span class="text-sm">GB</span>
+				</div>
+			</div>
+
+			<div class="stat">
+				<div class="stat-title">Free Disk</div>
+				<div class="stat-value text-2xl">
+					{usage?.disk.freePercentage}<span class="text-sm">%</span>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
--- a/apps/ui/src/lib/components/svg/applications/ApplicationIcons.svelte
+++ b/apps/ui/src/lib/components/svg/applications/ApplicationIcons.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import * as Icons from '$lib/components/svg/applications';
+	export let application: any;
+	export let isAbsolute = true;
+</script>
+
+{#if application.buildPack?.toLowerCase() === 'rust'}
+	<Icons.Rust {isAbsolute} />
+{:else if application.buildPack?.toLowerCase() === 'node'}
+	<Icons.Nodejs {isAbsolute} />
+{:else if application.buildPack?.toLowerCase() === 'react'}
+	<Icons.React {isAbsolute} />
+{:else if application.buildPack?.toLowerCase() === 'svelte'}
+	<Icons.Svelte {isAbsolute} />
+{:else if application.buildPack?.toLowerCase() === 'vuejs'}
+	<Icons.Vuejs {isAbsolute} />
+{:else if application.buildPack?.toLowerCase() === 'php'}
+	<Icons.Php {isAbsolute} />
+{:else if application.buildPack?.toLowerCase() === 'python'}
+	<Icons.Python {isAbsolute} />
+{:else if application.buildPack?.toLowerCase() === 'static'}
+	<Icons.Static {isAbsolute} />
+{:else if application.buildPack?.toLowerCase() === 'nestjs'}
+	<Icons.Nestjs {isAbsolute} />
+{:else if application.buildPack?.toLowerCase() === 'nuxtjs'}
+	<Icons.Nuxtjs {isAbsolute} />
+{:else if application.buildPack?.toLowerCase() === 'nextjs'}
+	<Icons.Nextjs {isAbsolute} />
+{:else if application.buildPack?.toLowerCase() === 'gatsby'}
+	<Icons.Gatsby {isAbsolute} />
+{:else if application.buildPack?.toLowerCase() === 'docker'}
+	<Icons.Docker {isAbsolute} />
+{:else if application.buildPack?.toLowerCase() === 'astro'}
+	<Icons.Astro {isAbsolute} />
+{:else if application.buildPack?.toLowerCase() === 'eleventy'}
+	<Icons.Eleventy {isAbsolute} />
+{:else if application.buildPack?.toLowerCase() === 'deno'}
+	<Icons.Deno {isAbsolute} />
+{:else if application.buildPack?.toLowerCase() === 'laravel'}
+	<Icons.Laravel {isAbsolute} />
+{:else if application.buildPack?.toLowerCase() === 'heroku'}
+	<Icons.Heroku {isAbsolute} />
+{/if}
--- a/apps/ui/src/lib/components/svg/applications/Astro.svelte
+++ b/apps/ui/src/lib/components/svg/applications/Astro.svelte
@@ -1,5 +1,9 @@
+<script lang="ts">
+	export let isAbsolute = true;
+</script>
+
 <svg
-	class="absolute top-0 left-0 -m-6 h-14 w-14"
+	class={isAbsolute ? 'absolute top-0 left-0 -m-6 h-14 w-14' : 'mx-auto w-8 h-8'}
 	viewBox="0 0 256 256"
 	fill="none"
 	xmlns="http://www.w3.org/2000/svg"
--- a/apps/ui/src/lib/components/svg/applications/Deno.svelte
+++ b/apps/ui/src/lib/components/svg/applications/Deno.svelte
@@ -1,5 +1,11 @@
+<script lang="ts">
+	export let isAbsolute = true;
+</script>
+
 <svg
-	class="text-white-500 absolute top-0 left-0 -m-4 h-10 w-10"
+	class={isAbsolute
+		? 'absolute top-0 left-0 -m-4 h-10 w-10 text-white-500'
+		: 'mx-auto w-8 h-8 text-white-500'}
 	xmlns="http://www.w3.org/2000/svg"
 	aria-hidden="true"
 	focusable="false"
--- a/apps/ui/src/lib/components/svg/applications/Docker.svelte
+++ b/apps/ui/src/lib/components/svg/applications/Docker.svelte
@@ -1,73 +1,9 @@
-<svg viewBox="0 0 128 128" class="absolute top-0 left-0 -m-8 h-16 w-16">
-	<g
-		><path
-			fill-rule="evenodd"
-			clip-rule="evenodd"
-			fill="#3A4D54"
-			d="M73.8 50.8h11.3v11.5h5.7c2.6 0 5.3-.5 7.8-1.3 1.2-.4 2.6-1 3.8-1.7-1.6-2.1-2.4-4.7-2.6-7.3-.3-3.5.4-8.1 2.8-10.8l1.2-1.4 1.4 1.1c3.6 2.9 6.5 6.8 7.1 11.4 4.3-1.3 9.3-1 13.1 1.2l1.5.9-.8 1.6c-3.2 6.2-9.9 8.2-16.4 7.8-9.8 24.3-31 35.8-56.8 35.8-13.3 0-25.5-5-32.5-16.8l-.1-.2-1-2.1c-2.4-5.2-3.1-10.9-2.6-16.6l.2-1.7h9.6v-11.4h11.3v-11.2h22.5v-11.3h13.5v22.5z"
-		/><path
-			fill="#00AADA"
-			d="M110.4 55.1c.8-5.9-3.6-10.5-6.4-12.7-3.1 3.6-3.6 13.2 1.3 17.2-2.8 2.4-8.5 4.7-14.5 4.7h-72.2c-.6 6.2.5 11.9 3 16.8l.8 1.5c.5.9 1.1 1.7 1.7 2.6 3 .2 5.7.3 8.2.2 4.9-.1 8.9-.7 12-1.7.5-.2.9.1 1.1.5.2.5-.1.9-.5 1.1-.4.1-.8.3-1.3.4-2.4.7-5 1.1-8.3 1.3h-.6000000000000001c-1.3.1-2.7.1-4.2.1-1.6 0-3.1 0-4.9-.1 6 6.8 15.4 10.8 27.2 10.8 25 0 46.2-11.1 55.5-35.9 6.7.7 13.1-1 16-6.7-4.5-2.7-10.5-1.8-13.9-.1z"
-		/><path
-			fill="#28B8EB"
-			d="M110.4 55.1c.8-5.9-3.6-10.5-6.4-12.7-3.1 3.6-3.6 13.2 1.3 17.2-2.8 2.4-8.5 4.7-14.5 4.7h-68c-.3 9.5 3.2 16.7 9.5 21 4.9-.1 8.9-.7 12-1.7.5-.2.9.1 1.1.5.2.5-.1.9-.5 1.1-.4.1-.8.3-1.3.4-2.4.7-5.2 1.2-8.5 1.4l-.1-.1c8.5 4.4 20.8 4.3 35-1.1 15.8-6.1 30.6-17.7 40.9-30.9-.2.1-.4.1-.5.2z"
-		/><path
-			fill="#028BB8"
-			d="M18.7 71.8c.4 3.3 1.4 6.4 2.9 9.3l.8 1.5c.5.9 1.1 1.7 1.7 2.6 3 .2 5.7.3 8.2.2 4.9-.1 8.9-.7 12-1.7.5-.2.9.1 1.1.5.2.5-.1.9-.5 1.1-.4.1-.8.3-1.3.4-2.4.7-5.2 1.2-8.5 1.4h-.4c-1.3.1-2.7.1-4.1.1-1.6 0-3.2 0-4.9-.1 6 6.8 15.5 10.8 27.3 10.8 21.4 0 40-8.1 50.8-26h-85.1v-.1z"
-		/><path
-			fill="#019BC6"
-			d="M23.5 71.8c1.3 5.8 4.3 10.4 8.8 13.5 4.9-.1 8.9-.7 12-1.7.5-.2.9.1 1.1.5.2.5-.1.9-.5 1.1-.4.1-.8.3-1.3.4-2.4.7-5.2 1.2-8.6 1.4 8.5 4.4 20.8 4.3 34.9-1.1 8.5-3.3 16.8-8.2 24.2-14.1h-70.6z"
-		/><path
-			fill-rule="evenodd"
-			clip-rule="evenodd"
-			fill="#00ACD3"
-			d="M28.4 52.7h9.8v9.8h-9.8v-9.8zm.8.8h.8v8.1h-.8v-8.1zm1.4 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zM39.6 41.5h9.8v9.8h-9.8v-9.8zm.9.8h.8v8.1h-.8v-8.1zm1.4 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.4 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1z"
-		/><path
-			fill-rule="evenodd"
-			clip-rule="evenodd"
-			fill="#23C2EE"
-			d="M39.6 52.7h9.8v9.8h-9.8v-9.8zm.9.8h.8v8.1h-.8v-8.1zm1.4 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.4 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1z"
-		/><path
-			fill-rule="evenodd"
-			clip-rule="evenodd"
-			fill="#00ACD3"
-			d="M50.9 52.7h9.8v9.8h-9.8v-9.8zm.8.8h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.4 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1z"
-		/><path
-			fill-rule="evenodd"
-			clip-rule="evenodd"
-			fill="#23C2EE"
-			d="M50.9 41.5h9.8v9.8h-9.8v-9.8zm.8.8h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.4 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zM62.2 52.7h9.8v9.8h-9.8v-9.8zm.8.8h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.4 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1z"
-		/><path
-			fill-rule="evenodd"
-			clip-rule="evenodd"
-			fill="#00ACD3"
-			d="M62.2 41.5h9.8v9.8h-9.8v-9.8zm.8.8h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.4 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1z"
-		/><path
-			fill-rule="evenodd"
-			clip-rule="evenodd"
-			fill="#23C2EE"
-			d="M62.2 30.2h9.8v9.8h-9.8v-9.8zm.8.8h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.4 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1z"
-		/><path
-			fill-rule="evenodd"
-			clip-rule="evenodd"
-			fill="#00ACD3"
-			d="M73.5 52.7h9.8v9.8h-9.8v-9.8zm.8.8h.8v8.1h-.8v-8.1zm1.4 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1z"
-		/><path
-			fill-rule="evenodd"
-			clip-rule="evenodd"
-			fill="#D4EEF1"
-			d="M48.8 78.3c1.5 0 2.7 1.2 2.7 2.7 0 1.5-1.2 2.7-2.7 2.7-1.5 0-2.7-1.2-2.7-2.7 0-1.5 1.2-2.7 2.7-2.7"
-		/><path
-			fill-rule="evenodd"
-			clip-rule="evenodd"
-			fill="#3A4D54"
-			d="M48.8 79.1c.2 0 .5 0 .7.1-.2.1-.4.4-.4.7 0 .4.4.8.8.8.3 0 .6-.2.7-.4.1.2.1.5.1.7 0 1.1-.9 1.9-1.9 1.9-1.1 0-1.9-.9-1.9-1.9 0-1 .8-1.9 1.9-1.9M1.1 72.8h125.4c-2.7-.7-8.6-1.6-7.7-5.2-5 5.7-16.9 4-20 1.2-3.4 4.9-23 3-24.3-.8-4.2 5-17.3 5-21.5 0-1.4 3.8-21 5.7-24.3.8-3 2.8-15 4.5-20-1.2 1.1 3.5-4.9 4.5-7.6 5.2"
-		/><path
-			fill="#BFDBE0"
-			d="M56 97.8c-6.7-3.2-10.3-7.5-12.4-12.2-2.5.7-5.5 1.2-8.9 1.4-1.3.1-2.7.1-4.1.1-1.7 0-3.4 0-5.2-.1 6 6 13.6 10.7 27.5 10.8h3.1z"
-		/><path
-			fill="#D4EEF1"
-			d="M46.1 89.9c-.9-1.3-1.8-2.8-2.5-4.3-2.5.7-5.5 1.2-8.9 1.4 2.3 1.2 5.7 2.4 11.4 2.9z"
-		/></g
-	>
-</svg>
+<script lang="ts">
+	export let isAbsolute = true;
+</script>
+
+
+<svg viewBox="0 0 128 128" class={isAbsolute ? 'absolute top-0 left-0 -m-5 h-12 w-12' : 'mx-auto w-10 h-10'}>
+	<path d="M124.8 52.1c-4.3-2.5-10-2.8-14.8-1.4-.6-5.2-4-9.7-8-12.9l-1.6-1.3-1.4 1.6c-2.7 3.1-3.5 8.3-3.1 12.3.3 2.9 1.2 5.9 3 8.3-1.4.8-2.9 1.9-4.3 2.4-2.8 1-5.9 2-8.9 2H79V49H66V24H51v12H26v13H13v14H1.8l-.2 1.5c-.5 6.4.3 12.6 3 18.5l1.1 2.2.1.2c7.9 13.4 21.7 19 36.8 19 29.2 0 53.3-13.1 64.3-40.6 7.4.4 15-1.8 18.6-8.9l.9-1.8-1.6-1zM28 39h10v11H28V39zm13.1 44.2c0 1.7-1.4 3.1-3.1 3.1-1.7 0-3.1-1.4-3.1-3.1 0-1.7 1.4-3.1 3.1-3.1 1.7.1 3.1 1.4 3.1 3.1zM28 52h10v11H28V52zm-13 0h11v11H15V52zm27.7 50.2c-15.8-.1-24.3-5.4-31.3-12.4 2.1.1 4.1.2 5.9.2 1.6 0 3.2 0 4.7-.1 3.9-.2 7.3-.7 10.1-1.5 2.3 5.3 6.5 10.2 14 13.8h-3.4zM51 63H40V52h11v11zm0-13H40V39h11v11zm13 13H53V52h11v11zm0-13H53V39h11v11zm0-13H53V26h11v11zm13 26H66V52h11v11zM38.8 81.2c-.2-.1-.5-.2-.8-.2-1.2 0-2.2 1-2.2 2.2 0 1.2 1 2.2 2.2 2.2s2.2-1 2.2-2.2c0-.3-.1-.6-.2-.8-.2.3-.4.5-.8.5-.5 0-.9-.4-.9-.9.1-.4.3-.7.5-.8z" fill="#019BC6"></path>
+	</svg>
+  
--- a/apps/ui/src/lib/components/svg/applications/Eleventy.svelte
+++ b/apps/ui/src/lib/components/svg/applications/Eleventy.svelte
@@ -1,4 +1,11 @@
-<svg viewBox="0 0 128 128" class="absolute top-0 left-0 -m-8 h-16 w-16">
+<script lang="ts">
+	export let isAbsolute = true;
+</script>
+
+<svg
+	viewBox="0 0 128 128"
+	class={isAbsolute ? 'absolute top-0 left-0 -m-8 h-16 w-16' : 'mx-auto w-8 h-8'}
+>
 	<path fill="transparent" d="M18 0h92v128H18z" /><path
 		d="M55.3 36.3h.4c1.1 0 1.5.9 1.5 2.3v41.8c0 1.8-.4 3-1.6 3l-4.8-.1c-1.2 0-1.6-1-1.6-3V45.5l-2.1.5c-1 0-1.5-.8-1.5-2.2v-3c0-1.2.4-2 1.4-2.2l8.3-2.2zm16 36.1l.1 3 .6 1.3.6.6.8.1h2.2c1 0 1.7.8 1.7 2v1.9c0 1.2-.6 2-1.8 2h-3.2l-2.3-.1c-.7-.2-1.4-.5-2.2-1a5.7 5.7 0 01-2-1.9c-.4-.8-.8-1.9-1-3.2-.4-1.4-.5-3-.5-4.8v-16h-1.5c-1.1 0-1.6-1-1.6-2.4v-1.7c0-1.4.5-2.3 1.6-2.3h1.5v-.1l.6-12.3c0-1.5.5-2.5 1.6-2.5h3.1c1.2 0 1.6 1 1.6 2.5v12.3h3.6c1.1 0 1.6 1 1.6 2.4V54c0 1.4-.5 2.3-1.6 2.3h-3.6v16.2zm9.4 15.7c0-2 .3-3.2 1.5-3.2.2 0 .4 0 1.4.4l1.1.3.2-.1.4-.7c.3-.6.4-1.6.4-3l-.6-3.3L79 52.7v-.9c0-1.2.3-2 1.2-2H84c.5 0 1 .3 1.3.6.3.4.5.9.6 1.6l3.4 18 2.6-17.8c.1-.8.3-1.3.6-1.7.3-.4.8-.6 1.3-.6h2.6c1 0 1.4.8 1.4 2l-.1.8L92 82.2c-.5 2.5-1 4.4-1.5 5.7a6.6 6.6 0 01-2 3c-.9.6-1.9.9-3.1.9h-.3c-2 0-3.3-.6-4.1-1.7-.3-.4-.4-1-.4-2zM31.3 38.8l8.2-2.1h.5c1 0 1.4.8 1.4 2.2v41.9c0 1.8-.4 2.9-1.6 2.9h-4.7c-1.2 0-1.6-1.1-1.6-3v-35l-2 .6c-1.2 0-1.6-.9-1.6-2.2v-3c0-1.2.4-2 1.4-2.3z"
 		fill="#FFF"
--- a/apps/ui/src/lib/components/svg/applications/Gatsby.svelte
+++ b/apps/ui/src/lib/components/svg/applications/Gatsby.svelte
@@ -1,4 +1,11 @@
-<svg class="absolute top-0 left-0 -m-4 h-10 w-10" viewBox="0 0 128 128">
+<script lang="ts">
+	export let isAbsolute = true;
+</script>
+
+<svg
+	class={isAbsolute ? 'absolute top-0 left-0 -m-4 h-10 w-10' : 'mx-auto w-8 h-8'}
+	viewBox="0 0 128 128"
+>
 	<path
 		fill="#64328B"
 		d="M64,0C28.7,0,0,28.7,0,64v0c0,35.3,28.7,64,64,64s64-28.7,64-64v0C128,28.7,99.3,0,64,0z M13.2,64L64,114.8 C35.9,114.8,13.2,92.1,13.2,64z M75.4,113.5l-60.9-61C19.7,30,39.9,13.2,64,13.2c16.6,0,31.3,7.9,40.5,20.2l-7.5,7.2 C89.7,30.2,77.7,23.5,64,23.5c-17.6,0-32.5,11.2-38.1,26.8C33.1,57,75.4,98.8,78.1,102c12.7-4.7,22.3-15.5,25.4-28.9H81.9v-9.4 l33,0.2C114.8,88.2,98,108.4,75.4,113.5z"
--- a/apps/ui/src/lib/components/svg/applications/Heroku.svelte
+++ b/apps/ui/src/lib/components/svg/applications/Heroku.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	export let isAbsolute = true;
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	class={isAbsolute ? 'absolute top-0 left-0 -m-4 h-10 w-10' : 'mx-auto w-8 h-8 '}
+	viewBox="0 0 72 80"
+>
+	<path
+		xmlns="http://www.w3.org/2000/svg"
+		fill="#430098"
+		d="M64.8,0 L7.2,0 C3.224,0 0,3.224 0,7.2 L0,72.8 C0,76.776 3.224,80 7.2,80 L64.8,80 C68.776,80 72,76.776 72,72.8 L72,7.2 C72,3.224 68.776,0 64.8,0 Z M18,68 L18,52 L27,60 L18,68 Z M46,68 L46,44.11 C45.961,42.243 45.062,40 41,40 C32.866,40 23.742,44.091 23.651,44.132 L18,46.692 L18,12 L26,12 L26,34.711 C29.994,33.411 35.577,32 41,32 C45.945,32 48.905,33.944 50.517,35.575 C53.958,39.055 54.005,43.488 54.0002258,44 L54.0002258,68 L46,68 Z M48,25 L40,25 C43.144,20.875 45.118,16.534 46,12 L54,12 C53.46,16.544 51.618,20.9 48,25 Z"
+	/>
+</svg>
--- a/apps/ui/src/lib/components/svg/applications/Laravel.svelte
+++ b/apps/ui/src/lib/components/svg/applications/Laravel.svelte
@@ -1,5 +1,9 @@
+<script lang="ts">
+	export let isAbsolute = true;
+</script>
+
 <svg
-	class="absolute top-0 left-0 -m-4 h-10 w-10"
+	class={isAbsolute ? 'absolute top-0 left-0 -m-4 h-10 w-10' : 'mx-auto w-8 h-8'}
 	viewBox="0 0 50 52"
 	xmlns="http://www.w3.org/2000/svg"
 	><title>Logomark</title><path
--- a/apps/ui/src/lib/components/svg/applications/Nestjs.svelte
+++ b/apps/ui/src/lib/components/svg/applications/Nestjs.svelte
--- a/apps/ui/src/lib/components/svg/applications/Nextjs.svelte
+++ b/apps/ui/src/lib/components/svg/applications/Nextjs.svelte
@@ -1,4 +1,13 @@
-<svg class="absolute top-0 left-0 -m-4 h-10 w-10 fill-current text-blue-500" viewBox="0 0 128 128">
+<script lang="ts">
+	export let isAbsolute = true;
+</script>
+
+<svg
+	class={isAbsolute
+		? 'absolute top-0 left-0 -m-4 h-10 w-10 fill-current text-blue-500'
+		: 'mx-auto w-8 h-8 fill-current text-blue-500'}
+	viewBox="0 0 128 128"
+>
 	<path
 		d="M64 0C28.7 0 0 28.7 0 64s28.7 64 64 64c11.2 0 21.7-2.9 30.8-7.9L48.4 55.3v36.6h-6.8V41.8h6.8l50.5 75.8C116.4 106.2 128 86.5 128 64c0-35.3-28.7-64-64-64zm22.1 84.6l-7.5-11.3V41.8h7.5v42.8z"
 	/>
--- a/apps/ui/src/lib/components/svg/applications/Nodejs.svelte
+++ b/apps/ui/src/lib/components/svg/applications/Nodejs.svelte
@@ -1,5 +1,9 @@
+<script lang="ts">
+	export let isAbsolute = true;
+</script>
+
 <svg
-	class="absolute top-0 left-0 -m-4 h-10 w-10 text-green-500"
+	class={isAbsolute ? 'absolute top-0 left-0 -m-4 h-10 w-10 text-green-500' : 'mx-auto w-8 h-8 text-green-500'}
 	xmlns="http://www.w3.org/2000/svg"
 	aria-hidden="true"
 	focusable="false"
--- a/apps/ui/src/lib/components/svg/applications/Nuxtjs.svelte
+++ b/apps/ui/src/lib/components/svg/applications/Nuxtjs.svelte
@@ -1,5 +1,9 @@
+<script lang="ts">
+	export let isAbsolute = true;
+</script>
+
 <svg
-	class="absolute top-0 left-0 -m-4 h-10 w-10"
+	class={isAbsolute ? 'absolute top-0 left-0 -m-4 h-10 w-10' : 'mx-auto w-8 h-8'}
 	xmlns="http://www.w3.org/2000/svg"
 	viewBox="0 0 400 400"
 >
--- a/apps/ui/src/lib/components/svg/applications/PHP.svelte
+++ b/apps/ui/src/lib/components/svg/applications/PHP.svelte
@@ -1,4 +1,13 @@
-<svg viewBox="0 0 128 128" class="absolute top-0 left-0 -m-6 h-14 w-14 text-white">
+<script lang="ts">
+	export let isAbsolute = true;
+</script>
+
+<svg
+	viewBox="0 0 128 128"
+	class={isAbsolute
+		? 'absolute top-0 left-0 -m-6 h-14 w-14 text-white'
+		: 'mx-auto w-8 h-8 text-white'}
+>
 	<path
 		fill="#6181B6"
 		d="M64 33.039c-33.74 0-61.094 13.862-61.094 30.961s27.354 30.961 61.094 30.961 61.094-13.862 61.094-30.961-27.354-30.961-61.094-30.961zm-15.897 36.993c-1.458 1.364-3.077 1.927-4.86 2.507-1.783.581-4.052.461-6.811.461h-6.253l-1.733 10h-7.301l6.515-34h14.04c4.224 0 7.305 1.215 9.242 3.432 1.937 2.217 2.519 5.364 1.747 9.337-.319 1.637-.856 3.159-1.614 4.515-.759 1.357-1.75 2.624-2.972 3.748zm21.311 2.968l2.881-14.42c.328-1.688.208-2.942-.361-3.555-.57-.614-1.782-1.025-3.635-1.025h-5.79l-3.731 19h-7.244l6.515-33h7.244l-1.732 9h6.453c4.061 0 6.861.815 8.402 2.231s2.003 3.356 1.387 6.528l-3.031 15.241h-7.358zm40.259-11.178c-.318 1.637-.856 3.133-1.613 4.488-.758 1.357-1.748 2.598-2.971 3.722-1.458 1.364-3.078 1.927-4.86 2.507-1.782.581-4.053.461-6.812.461h-6.253l-1.732 10h-7.301l6.514-34h14.041c4.224 0 7.305 1.215 9.241 3.432 1.935 2.217 2.518 5.418 1.746 9.39zM95.919 54h-5.001l-2.727 14h4.442c2.942 0 5.136-.29 6.576-1.4 1.442-1.108 2.413-2.828 2.918-5.421.484-2.491.264-4.434-.66-5.458-.925-1.024-2.774-1.721-5.548-1.721zM38.934 54h-5.002l-2.727 14h4.441c2.943 0 5.136-.29 6.577-1.4 1.441-1.108 2.413-2.828 2.917-5.421.484-2.491.264-4.434-.66-5.458s-2.772-1.721-5.546-1.721z"
--- a/apps/ui/src/lib/components/svg/applications/Python.svelte
+++ b/apps/ui/src/lib/components/svg/applications/Python.svelte
@@ -1,4 +1,11 @@
-<svg class="absolute top-0 left-0 -m-6 h-14 w-14" viewBox="0 0 128 128">
+<script lang="ts">
+	export let isAbsolute = true;
+</script>
+
+<svg
+	class={isAbsolute ? 'absolute top-0 left-0 -m-6 h-14 w-14' : 'mx-auto w-8 h-8'}
+	viewBox="0 0 128 128"
+>
 	<linearGradient
 		id="a"
 		gradientUnits="userSpaceOnUse"
--- a/apps/ui/src/lib/components/svg/applications/React.svelte
+++ b/apps/ui/src/lib/components/svg/applications/React.svelte
@@ -1,4 +1,13 @@
-<svg class="absolute top-0 left-0 -m-4 h-10 w-10 text-blue-500" viewBox="0 0 128 128">
+<script lang="ts">
+	export let isAbsolute = true;
+</script>
+
+<svg
+	class={isAbsolute
+		? 'absolute top-0 left-0 -m-4 h-10 w-10 text-blue-500'
+		: 'mx-auto w-8 h-8 text-blue-500'}
+	viewBox="0 0 128 128"
+>
 	<g fill="#61DAFB"
 		><circle cx="64" cy="64" r="11.4" /><path
 			d="M107.3 45.2c-2.2-.8-4.5-1.6-6.9-2.3.6-2.4 1.1-4.8 1.5-7.1 2.1-13.2-.2-22.5-6.6-26.1-1.9-1.1-4-1.6-6.4-1.6-7 0-15.9 5.2-24.9 13.9-9-8.7-17.9-13.9-24.9-13.9-2.4 0-4.5.5-6.4 1.6-6.4 3.7-8.7 13-6.6 26.1.4 2.3.9 4.7 1.5 7.1-2.4.7-4.7 1.4-6.9 2.3-12.5 4.8-19.3 11.4-19.3 18.8s6.9 14 19.3 18.8c2.2.8 4.5 1.6 6.9 2.3-.6 2.4-1.1 4.8-1.5 7.1-2.1 13.2.2 22.5 6.6 26.1 1.9 1.1 4 1.6 6.4 1.6 7.1 0 16-5.2 24.9-13.9 9 8.7 17.9 13.9 24.9 13.9 2.4 0 4.5-.5 6.4-1.6 6.4-3.7 8.7-13 6.6-26.1-.4-2.3-.9-4.7-1.5-7.1 2.4-.7 4.7-1.4 6.9-2.3 12.5-4.8 19.3-11.4 19.3-18.8s-6.8-14-19.3-18.8zm-14.8-30.5c4.1 2.4 5.5 9.8 3.8 20.3-.3 2.1-.8 4.3-1.4 6.6-5.2-1.2-10.7-2-16.5-2.5-3.4-4.8-6.9-9.1-10.4-13 7.4-7.3 14.9-12.3 21-12.3 1.3 0 2.5.3 3.5.9zm-11.2 59.3c-1.8 3.2-3.9 6.4-6.1 9.6-3.7.3-7.4.4-11.2.4-3.9 0-7.6-.1-11.2-.4-2.2-3.2-4.2-6.4-6-9.6-1.9-3.3-3.7-6.7-5.3-10 1.6-3.3 3.4-6.7 5.3-10 1.8-3.2 3.9-6.4 6.1-9.6 3.7-.3 7.4-.4 11.2-.4 3.9 0 7.6.1 11.2.4 2.2 3.2 4.2 6.4 6 9.6 1.9 3.3 3.7 6.7 5.3 10-1.7 3.3-3.4 6.6-5.3 10zm8.3-3.3c1.5 3.5 2.7 6.9 3.8 10.3-3.4.8-7 1.4-10.8 1.9 1.2-1.9 2.5-3.9 3.6-6 1.2-2.1 2.3-4.2 3.4-6.2zm-25.6 27.1c-2.4-2.6-4.7-5.4-6.9-8.3 2.3.1 4.6.2 6.9.2 2.3 0 4.6-.1 6.9-.2-2.2 2.9-4.5 5.7-6.9 8.3zm-18.6-15c-3.8-.5-7.4-1.1-10.8-1.9 1.1-3.3 2.3-6.8 3.8-10.3 1.1 2 2.2 4.1 3.4 6.1 1.2 2.2 2.4 4.1 3.6 6.1zm-7-25.5c-1.5-3.5-2.7-6.9-3.8-10.3 3.4-.8 7-1.4 10.8-1.9-1.2 1.9-2.5 3.9-3.6 6-1.2 2.1-2.3 4.2-3.4 6.2zm25.6-27.1c2.4 2.6 4.7 5.4 6.9 8.3-2.3-.1-4.6-.2-6.9-.2-2.3 0-4.6.1-6.9.2 2.2-2.9 4.5-5.7 6.9-8.3zm22.2 21l-3.6-6c3.8.5 7.4 1.1 10.8 1.9-1.1 3.3-2.3 6.8-3.8 10.3-1.1-2.1-2.2-4.2-3.4-6.2zm-54.5-16.2c-1.7-10.5-.3-17.9 3.8-20.3 1-.6 2.2-.9 3.5-.9 6 0 13.5 4.9 21 12.3-3.5 3.8-7 8.2-10.4 13-5.8.5-11.3 1.4-16.5 2.5-.6-2.3-1-4.5-1.4-6.6zm-24.7 29c0-4.7 5.7-9.7 15.7-13.4 2-.8 4.2-1.5 6.4-2.1 1.6 5 3.6 10.3 6 15.6-2.4 5.3-4.5 10.5-6 15.5-13.8-4-22.1-10-22.1-15.6zm28.5 49.3c-4.1-2.4-5.5-9.8-3.8-20.3.3-2.1.8-4.3 1.4-6.6 5.2 1.2 10.7 2 16.5 2.5 3.4 4.8 6.9 9.1 10.4 13-7.4 7.3-14.9 12.3-21 12.3-1.3 0-2.5-.3-3.5-.9zm60.8-20.3c1.7 10.5.3 17.9-3.8 20.3-1 .6-2.2.9-3.5.9-6 0-13.5-4.9-21-12.3 3.5-3.8 7-8.2 10.4-13 5.8-.5 11.3-1.4 16.5-2.5.6 2.3 1 4.5 1.4 6.6zm9-15.6c-2 .8-4.2 1.5-6.4 2.1-1.6-5-3.6-10.3-6-15.6 2.4-5.3 4.5-10.5 6-15.5 13.8 4 22.1 10 22.1 15.6 0 4.7-5.8 9.7-15.7 13.4z"
--- a/apps/ui/src/lib/components/svg/applications/Rust.svelte
+++ b/apps/ui/src/lib/components/svg/applications/Rust.svelte
--- a/apps/ui/src/lib/components/svg/applications/Static.svelte
+++ b/apps/ui/src/lib/components/svg/applications/Static.svelte
@@ -1,5 +1,11 @@
+<script lang="ts">
+	export let isAbsolute = true;
+</script>
+
 <svg
-	class="absolute top-0 left-0 -m-4 h-10 w-10 text-white"
+	class={isAbsolute
+		? 'absolute top-0 left-0 -m-4 h-10 w-10 text-white'
+		: 'mx-auto w-8 h-8 text-white'}
 	viewBox="0 0 32 32"
 	fill="none"
 	xmlns="http://www.w3.org/2000/svg"
--- a/apps/ui/src/lib/components/svg/applications/Svelte.svelte
+++ b/apps/ui/src/lib/components/svg/applications/Svelte.svelte
@@ -1,5 +1,9 @@
+<script lang="ts">
+	export let isAbsolute = true;
+</script>
+
 <svg
-	class="absolute top-0 left-0 -m-4 h-10 w-10"
+	class={isAbsolute ? 'absolute top-0 left-0 -m-4 h-10 w-10' : 'mx-auto w-8 h-8'}
 	version="1.1"
 	id="Layer_1"
 	xmlns="http://www.w3.org/2000/svg"
--- a/apps/ui/src/lib/components/svg/applications/Vuejs.svelte
+++ b/apps/ui/src/lib/components/svg/applications/Vuejs.svelte
@@ -1,4 +1,13 @@
-<svg class="absolute top-0 left-0 -m-4 h-10 w-10 text-green-500" viewBox="0 0 128 128">
+<script lang="ts">
+	export let isAbsolute = true;
+</script>
+
+<svg
+	class={isAbsolute
+		? 'absolute top-0 left-0 -m-4 h-10 w-10 text-green-500'
+		: 'mx-auto w-8 h-8 text-green-500'}
+	viewBox="0 0 128 128"
+>
 	<path
 		d="m-2.3125e-8 8.9337 49.854 0.1586 14.167 24.47 14.432-24.47 49.547-0.1577-63.834 110.14zm126.98 0.6374-24.36 0.0207-38.476 66.052-38.453-66.052-24.749-0.0194 63.211 107.89zm-25.149-0.008-22.745 0.16758l-15.053 24.647-14.817-24.647-22.794-0.1679 37.731 64.476zM25.997 9.3929l23.002 0.0087M25.997 9.3929l23.002 0.0087"
 		fill="none"
--- a/apps/ui/src/lib/components/svg/applications/index.ts
+++ b/apps/ui/src/lib/components/svg/applications/index.ts
@@ -0,0 +1,19 @@
+//@ts-nocheck
+export { default as Rust } from './Rust.svelte';
+export { default as Nodejs } from './Nodejs.svelte';
+export { default as React } from './React.svelte';
+export { default as Svelte } from './Svelte.svelte';
+export { default as Vuejs } from './Vuejs.svelte';
+export { default as Php } from './PHP.svelte';
+export { default as Python } from './Python.svelte';
+export { default as Static } from './Static.svelte';
+export { default as Nestjs } from './Nestjs.svelte';
+export { default as Nuxtjs } from './Nuxtjs.svelte';
+export { default as Nextjs } from './Nextjs.svelte';
+export { default as Gatsby } from './Gatsby.svelte';
+export { default as Docker } from './Docker.svelte';
+export { default as Astro } from './Astro.svelte';
+export { default as Eleventy } from './Eleventy.svelte';
+export { default as Deno } from './Deno.svelte';
+export { default as Laravel } from './Laravel.svelte';
+export { default as Heroku } from './Heroku.svelte';
--- a/apps/ui/src/lib/components/svg/databases/DatabaseIcons.svelte
+++ b/apps/ui/src/lib/components/svg/databases/DatabaseIcons.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import * as Icons from '$lib/components/svg/databases';
+	export let type: any;
+	export let isAbsolute = false;
+</script>
+
+{#if type === 'mysql'}
+	<Icons.MySQL {isAbsolute} />
+{:else if type === 'postgresql'}
+	<Icons.PostgreSQL {isAbsolute} />
+{:else if type === 'mongodb'}
+	<Icons.MongoDB {isAbsolute} />
+{:else if type === 'mariadb'}
+	<Icons.MariaDB {isAbsolute} />
+{:else if type === 'redis'}
+	<Icons.Redis {isAbsolute} />
+{:else if type === 'couchdb'}
+	<Icons.CouchDB {isAbsolute} />
+{/if}
--- a/apps/ui/src/lib/components/svg/databases/index.ts
+++ b/apps/ui/src/lib/components/svg/databases/index.ts
@@ -0,0 +1,10 @@
+//@ts-nocheck
+export { default as Clickhouse } from './Clickhouse.svelte';
+export { default as CouchDB } from './CouchDB.svelte';
+export { default as MariaDB } from './MariaDB.svelte';
+export { default as MongoDB } from './MongoDB.svelte';
+export { default as MySQL } from './MySQL.svelte';
+export { default as PostgreSQL } from './PostgreSQL.svelte';
+export { default as Redis } from './Redis.svelte';
+
+
--- a/apps/ui/src/lib/components/svg/services/Appwrite.svelte
+++ b/apps/ui/src/lib/components/svg/services/Appwrite.svelte
--- 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 mx-auto'}
+	class={isAbsolute ? 'w-36 absolute top-0 left-0 -m-3 -mt-5' : 'w-28 h-28 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"
--- a/apps/ui/src/lib/components/svg/services/Ghost.svelte
+++ b/apps/ui/src/lib/components/svg/services/Ghost.svelte
@@ -4,6 +4,6 @@

 <img
 	alt="ghost logo"
-	class={isAbsolute ? 'w-12 absolute top-0 left-0 -m-3 -mt-5' : 'w-8 mx-auto'}
+	class={isAbsolute ? 'w-12 h-12 absolute top-0 left-0 -m-3 -mt-5' : 'w-8 h-8 mx-auto'}
 	src="/ghost.png"
 />
--- a/apps/ui/src/lib/components/svg/services/GlitchTip.svelte
+++ b/apps/ui/src/lib/components/svg/services/GlitchTip.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	export let isAbsolute = false;
+</script>
+
+<svg
+  class={isAbsolute ? 'w-10 h-10 absolute top-0 left-0 -m-5' : 'w-8 h-8 mx-auto'}
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  style="isolation:isolate"
+  viewBox="0 0 400 400"
+>
+  <defs>
+    <clipPath id="_clipPath_5kOQy2sGcuF9aeG3NHWmCAGgMEPQrnNW">
+      <rect width="400" height="400" />
+    </clipPath>
+  </defs>
+  <g clip-path="url(#_clipPath_5kOQy2sGcuF9aeG3NHWmCAGgMEPQrnNW)">
+    <g>
+      <g>
+        <path
+          d=" M 276.155 367.684 L 337.655 367.684 L 337.655 180.781 L 205.525 180.781 L 205.525 241.801 L 267.987 241.801 L 267.987 258.617 C 267.987 291.29 238.678 308.586 202.162 308.586 C 156.998 308.586 127.689 282.641 127.689 226.906 L 127.689 173.094 C 127.689 117.359 156.998 91.414 202.162 91.414 C 241.08 91.414 261.74 112.554 271.83 138.5 L 331.409 104.386 C 306.424 52.976 261.74 26.55 202.162 26.55 C 111.353 26.55 50.333 88.531 50.333 201.441 C 50.333 313.872 110.873 373.45 187.748 373.45 C 238.197 373.45 268.947 347.985 273.752 314.352 L 276.155 314.352 L 276.155 367.684 Z "
+          fill="rgb(132,24,128)"
+        />
+      </g>
+      <g opacity="0.5">
+        <path
+          d=" M 139.701 175.78 L 139.701 173.094 C 139.701 117.359 169.01 91.414 214.174 91.414 C 253.092 91.414 273.752 112.554 283.842 138.5 L 343.421 104.386 C 318.436 52.976 273.752 26.55 214.174 26.55 C 128.962 26.55 69.981 81.125 63.033 181.145 L 139.701 175.78 Z "
+          fill-rule="evenodd"
+          fill="rgb(233,64,86)"
+        />
+      </g>
+      <g opacity="0.5">
+        <path
+          d=" M 349.667 305.194 L 349.667 247.137 L 279.998 252.019 L 279.998 258.617 C 279.998 291.29 250.69 308.586 214.174 308.586 C 179.697 308.586 154.459 293.467 144.446 261.518 L 70.341 266.711 C 76.285 288.796 85.348 307.563 96.86 322.909 L 349.667 305.194 Z "
+          fill-rule="evenodd"
+          fill="rgb(233,64,86)"
+        />
+      </g>
+      <path
+        d=" M 337.655 247.03 L 337.655 180.781 L 205.525 180.781 L 205.525 241.801 L 267.987 241.801 L 267.987 251.912 L 337.655 247.03 Z  M 132.401 261.413 C 129.319 251.534 127.689 240.048 127.689 226.906 L 127.689 175.099 L 51.069 180.468 C 50.581 187.25 50.333 194.242 50.333 201.441 C 50.333 225.632 53.136 247.376 58.301 266.606 L 132.401 261.413 Z "
+        fill-rule="evenodd"
+        fill="rgb(233,64,86)"
+      />
+      <path
+        d=" M 337.655 305.862 L 337.655 367.684 L 276.155 367.684 L 276.155 314.352 L 273.752 314.352 C 268.947 347.985 238.197 373.45 187.748 373.45 C 146.712 373.45 110.33 356.473 85.327 323.543 L 337.655 305.862 Z "
+        fill-rule="evenodd"
+        fill="rgb(255,63,42)"
+      />
+    </g>
+  </g>
+</svg>
--- a/apps/ui/src/lib/components/svg/services/Hasura.svelte
+++ b/apps/ui/src/lib/components/svg/services/Hasura.svelte
@@ -3,7 +3,7 @@
 </script>

 <svg
-	class={isAbsolute ? 'w-10 h-10 absolute top-0 left-0 -m-5' : 'w-8 mx-auto'}
+	class={isAbsolute ? 'w-10 h-10 absolute top-0 left-0 -m-5' : 'w-8 h-8 mx-auto'}
 	viewBox="0 0 81 84"
 	fill="none"
 	xmlns="http://www.w3.org/2000/svg"
--- a/apps/ui/src/lib/components/svg/services/LanguageTool.svelte
+++ b/apps/ui/src/lib/components/svg/services/LanguageTool.svelte
@@ -4,7 +4,7 @@

 <svg
 	xmlns="http://www.w3.org/2000/svg"
-	class={isAbsolute ? 'w-10 h-10 absolute top-0 left-0 -m-5' : 'w-8 mx-auto'}
+	class={isAbsolute ? 'w-10 h-10 absolute top-0 left-0 -m-5' : 'w-8 h-8 mx-auto'}
 	fill="none"
 	viewBox="0 0 140 140"
 	data-lt-extension-installed="true"
--- a/apps/ui/src/lib/components/svg/services/MeiliSearch.svelte
+++ b/apps/ui/src/lib/components/svg/services/MeiliSearch.svelte
@@ -4,7 +4,7 @@

 <svg
 	viewBox="0 0 127 74"
-	class={isAbsolute ? 'w-10 h-10 absolute top-0 left-0 -m-5' : 'w-8 mx-auto'}
+	class={isAbsolute ? 'w-10 h-10 absolute top-0 left-0 -m-5' : 'w-8 h-8 mx-auto'}
 	xmlns="http://www.w3.org/2000/svg"
 	><path
 		d="M.825 73.993l23.244-59.47A21.85 21.85 0 0144.42.625h14.014L35.19 60.096a21.85 21.85 0 01-20.352 13.897H.825z"
--- a/apps/ui/src/lib/components/svg/services/MinIO.svelte
+++ b/apps/ui/src/lib/components/svg/services/MinIO.svelte
@@ -4,6 +4,6 @@

 <img
 	alt="minio logo"
-	class={isAbsolute ? 'w-7 absolute top-0 left-0 -m-3 -mt-5' : 'w-4  mx-auto'}
+	class={isAbsolute ? 'w-7 h-12 absolute top-0 left-0 -m-3 -mt-5' : 'w-4 h-8 mx-auto'}
 	src="/minio.png"
 />
--- a/apps/ui/src/lib/components/svg/services/Moodle.svelte
+++ b/apps/ui/src/lib/components/svg/services/Moodle.svelte
@@ -3,6 +3,6 @@
 </script>
 <img
 	alt="moodle logo"
-	class={isAbsolute ? 'w-9 absolute top-0 left-0 -m-3 -mt-5' : 'w-8 mx-auto'}
+	class={isAbsolute ? 'w-9 h-9 absolute top-0 left-0 -m-3 -mt-5' : 'w-8 h-8 mx-auto'}
 	src="/moodle.png"
 />
--- a/apps/ui/src/lib/components/svg/services/N8n.svelte
+++ b/apps/ui/src/lib/components/svg/services/N8n.svelte
@@ -3,7 +3,7 @@
 </script>

 <svg
-	class={isAbsolute ? 'w-12 h-12 absolute top-0 left-0 -m-5' : 'w-8 mx-auto'}
+	class={isAbsolute ? 'w-12 h-12 absolute top-0 left-0 -m-5' : 'w-8 h-8 mx-auto'}
 	viewBox="0 0 220 105"
 >
 	<g>
--- a/apps/ui/src/lib/components/svg/services/NocoDB.svelte
+++ b/apps/ui/src/lib/components/svg/services/NocoDB.svelte
@@ -4,6 +4,6 @@

 <img
 	alt="nocodb logo"
-	class={isAbsolute ? 'w-10 absolute top-0 left-0 -m-5' : 'w-8 mx-auto'}
+	class={isAbsolute ? 'w-10 h-10 absolute top-0 left-0 -m-5' : 'w-8 h-8 mx-auto'}
 	src="/nocodb.png"
 />
--- a/apps/ui/src/lib/components/svg/services/PlausibleAnalytics.svelte
+++ b/apps/ui/src/lib/components/svg/services/PlausibleAnalytics.svelte
@@ -4,6 +4,6 @@

 <img
 	alt="plausible logo"
-	class={isAbsolute ? 'w-9 absolute top-0 left-0 -m-4' : 'w-6 mx-auto'}
+	class={isAbsolute ? 'w-9 h-12 absolute top-0 left-0 -m-4' : 'w-6 h-8 mx-auto'}
 	src="/plausible.png"
 />
--- a/apps/ui/src/lib/components/svg/services/Searxng.svelte
+++ b/apps/ui/src/lib/components/svg/services/Searxng.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+	export let isAbsolute = false;
+</script>
+
+<svg
+	xmlns:cc="http://creativecommons.org/ns#"
+	xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+	xmlns:svg="http://www.w3.org/2000/svg"
+	xmlns="http://www.w3.org/2000/svg"
+	id="svg8"
+	version="1.1"
+	viewBox="0 0 92 92"
+	class={isAbsolute ? 'w-12 h-12 absolute top-0 left-0 -m-3 -mt-5' : 'w-8 h-8 mx-auto'}
+>
+	<defs id="defs2" />
+	<metadata id="metadata5">
+		<rdf:RDF>
+			<cc:Work rdf:about="">
+				<dc:format>image/svg+xml</dc:format>
+				<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+				<dc:title />
+			</cc:Work>
+		</rdf:RDF>
+	</metadata>
+	<g transform="translate(-40.921303,-17.416526)" id="layer1">
+		<circle
+			r="0"
+			style="fill:none;stroke:#000000;stroke-width:12;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+			cy="92"
+			cx="75"
+			id="path3713"
+		/>
+		<circle
+			r="30"
+			cy="53.902557"
+			cx="75.921303"
+			id="path834"
+			style="fill:none;fill-opacity:1;stroke:#3050ff;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+		/>
+		<path
+			d="m 67.514849,37.91524 a 18,18 0 0 1 21.051475,3.312407 18,18 0 0 1 3.137312,21.078282"
+			id="path852"
+			style="fill:none;fill-opacity:1;stroke:#3050ff;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+		/>
+		<rect
+			transform="rotate(-46.234709)"
+			ry="1.8669105e-13"
+			y="122.08995"
+			x="3.7063529"
+			height="39.963303"
+			width="18.846331"
+			id="rect912"
+			style="opacity:1;fill:#3050ff;fill-opacity:1;stroke:none;stroke-width:8;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+		/>
+	</g>
+</svg>
--- a/apps/ui/src/lib/components/svg/services/ServiceIcons.svelte
+++ b/apps/ui/src/lib/components/svg/services/ServiceIcons.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	export let type: string;
+	export let isAbsolute = true;
+	import * as Icons from '$lib/components/svg/services';
+</script>
+
+{#if type === 'plausibleanalytics'}
+	<Icons.PlausibleAnalytics {isAbsolute} />
+{:else if type === 'nocodb'}
+	<Icons.NocoDb {isAbsolute} />
+{:else if type === 'minio'}
+	<Icons.MinIo {isAbsolute} />
+{:else if type === 'vscodeserver'}
+	<Icons.VsCodeServer {isAbsolute} />
+{:else if type === 'wordpress'}
+	<Icons.Wordpress {isAbsolute} />
+{:else if type === 'vaultwarden'}
+	<Icons.VaultWarden {isAbsolute} />
+{:else if type === 'languagetool'}
+	<Icons.LanguageTool {isAbsolute} />
+{:else if type === 'n8n'}
+	<Icons.N8n {isAbsolute} />
+{:else if type === 'uptimekuma'}
+	<Icons.UptimeKuma {isAbsolute} />
+{:else if type === 'ghost'}
+	<Icons.Ghost {isAbsolute} />
+{:else if type === 'meilisearch'}
+	<Icons.MeiliSearch {isAbsolute} />
+{:else if type === 'umami'}
+	<Icons.Umami {isAbsolute} />
+{:else if type === 'hasura'}
+	<Icons.Hasura {isAbsolute} />
+{:else if type === 'fider'}
+	<Icons.Fider {isAbsolute} />
+{:else if type === 'appwrite'}
+	<Icons.Appwrite {isAbsolute} />
+{:else if type === 'moodle'}
+	<Icons.Moodle {isAbsolute} />
+{:else if type === 'glitchTip'}
+	<Icons.GlitchTip {isAbsolute} />
+{:else if type === 'searxng'}
+	<Icons.Searxng {isAbsolute} />
+{:else if type === 'weblate'}
+	<Icons.Weblate {isAbsolute} />
+{/if}
--- a/apps/ui/src/lib/components/svg/services/Umami.svelte
+++ b/apps/ui/src/lib/components/svg/services/Umami.svelte
@@ -7,7 +7,7 @@
 	xmlns="http://www.w3.org/2000/svg"
 	viewBox="0 0 856.000000 856.000000"
 	preserveAspectRatio="xMidYMid meet"
-	class={isAbsolute ? 'w-10 h-10 absolute top-0 left-0 -m-5' : 'w-8 mx-auto'}
+	class={isAbsolute ? 'w-10 h-10 absolute top-0 left-0 -m-5' : 'w-8 h-8 mx-auto'}
 >
 	<metadata> Created by potrace 1.11, written by Peter Selinger 2001-2013 </metadata>
 	<g
--- a/apps/ui/src/lib/components/svg/services/VSCodeServer.svelte
+++ b/apps/ui/src/lib/components/svg/services/VSCodeServer.svelte
@@ -3,7 +3,7 @@
 </script>

 <svg
-	class={isAbsolute ? 'w-10 h-10 absolute top-0 left-0 -m-5' : 'w-8 mx-auto'}
+	class={isAbsolute ? 'w-10 h-10 absolute top-0 left-0 -m-5' : 'w-8 h-8mx-auto'}
 	viewBox="0 0 128 128"
 >
 	<path
--- a/apps/ui/src/lib/components/svg/services/VaultWarden.svelte
+++ b/apps/ui/src/lib/components/svg/services/VaultWarden.svelte
@@ -3,7 +3,7 @@
 </script>

 <svg
-	class={isAbsolute ? 'w-10 absolute top-0 left-0 -m-5' : 'w-8 mx-auto'}
+	class={isAbsolute ? 'w-10 h-10 absolute top-0 left-0 -m-5' : 'w-8 h-8mx-auto'}
 	xmlns="http://www.w3.org/2000/svg"
 	xmlns:xlink="http://www.w3.org/1999/xlink"
 	version="1.1"
--- a/apps/ui/src/lib/components/svg/services/Weblate.svelte
+++ b/apps/ui/src/lib/components/svg/services/Weblate.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+	export let isAbsolute = false;
+</script>
+
+<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'}
+	version="1.1"
+	viewBox="0 0 300 300"
+	><linearGradient
+		id="a"
+		x1=".3965"
+		x2="98.808"
+		y1="55.253"
+		y2="55.253"
+		gradientTransform="scale(.98308 1.0172)"
+		gradientUnits="userSpaceOnUse"
+		><stop stop-color="#00d2e6" offset="0" /><stop
+			stop-color="#2eccaa"
+			offset="1"
+		/></linearGradient
+	><linearGradient
+		id="b"
+		x1="49.017"
+		x2="99.793"
+		y1="137.89"
+		y2="113.96"
+		gradientTransform="scale(1.1631 .8598)"
+		gradientUnits="userSpaceOnUse"
+		><stop stop-opacity="0" offset="0" /><stop offset=".51413" /><stop
+			stop-opacity="0"
+			offset="1"
+		/></linearGradient
+	><linearGradient
+		id="c"
+		x1="201.82"
+		x2="103.58"
+		y1="57.649"
+		y2="57.649"
+		gradientTransform="scale(.98308 1.0172)"
+		gradientUnits="userSpaceOnUse"
+		><stop stop-color="#1fa385" offset="0" /><stop
+			stop-color="#2eccaa"
+			offset="1"
+		/></linearGradient
+	><g transform="translate(50,76)" fill-rule="evenodd"
+		><path
+			d="m127.25 111.61c-2.8884-0.0145-5.7666-0.6024-8.4797-1.7847-6.1117-2.6626-11.493-7.6912-15.872-14.495 1.2486-2.2193 2.3738-4.5173 3.3784-6.8535 4.4051-10.243 6.5-21.46 6.6607-32.593-0.0233-0.22082-0.0416-0.44244-0.0552-0.66483l-0.0121-0.57132c-0.01-4.3654-0.67459-8.7898-2.1767-12.909-1.7304-4.7458-4.4887-9.4955-8.865-11.348-0.79519-0.33595-1.6316-0.47701-2.4642-0.45737-5.5049-10.289-5.6799-20.149 0-29.537 0.10115 0 0.20619 3.9293e-4 0.30734 0.001179 6.7012 0.07387 13.34 2.1418 19.021 5.7536 15.469 9.835 23.182 29.001 23.352 47.818 2e-3 0.22083-3.9e-4 0.44126-7e-3 0.66169h0.0868c-0.0226 19.887-4.8049 40.054-14.875 56.979zm-34.3 31.216c-14.448 5.9425-31.228 5.6236-45.549-1.025-16.476-7.6476-29.065-22.512-36.818-39.479-13.262-29.022-13.566-63.715-0.98815-93.182 9.4458 3.7788 17.845-2.2397 17.845-2.2397s-0.01945 9.2605 8.9478 13.905c-9.2007 21.556-8.979 47.167 0.2412 68.173 4.4389 10.107 11.22 19.519 20.619 24.842 3.3547 1.8996 7.041 3.126 10.833 3.5862 0.01404 0.0219 0.02808 0.0439 0.04214 0.0658 6.6965 10.449 15.132 19.157 24.828 25.354z"
+			fill="url(#a)"
+			fill-rule="nonzero"
+		/><path
+			d="m127.24 111.61c-2.8869-0.0151-5.7636-0.60296-8.4755-1.7846-6.1127-2.663-11.495-7.6928-15.874-14.498 1.2494-2.2205 2.3754-4.5198 3.3806-6.8572 1.3282-3.0884 2.4463-6.2648 3.3644-9.501 2.128-7.4978 30.382 2.0181 26.072 14.371-2.2239 6.373-5.0394 12.509-8.4675 18.27zm-34.302 31.212c-14.446 5.9396-31.224 5.6198-45.543-1.0278-16.476-7.6476 0.44739-33.303 9.8465-27.981 3.3533 1.8988 7.0378 3.125 10.828 3.5856 0.01567 0.0245 0.03135 0.049 0.04704 0.0735 6.695 10.447 15.128 19.153 24.821 25.349z"
+			fill="url(#b)"
+			opacity=".3"
+		/><path
+			d="m56.762 54.628c-0.0066-0.22043-0.0093-0.44086-7e-3 -0.66169 0.17001-18.817 7.8827-37.983 23.352-47.818 5.6811-3.6118 12.32-5.6798 19.021-5.7536 0.10115-7.8585e-4 0.20619-0.001179 0.30734-0.001179v29.537c-0.83254-0.01965-1.669 0.12141-2.4642 0.45737-4.3763 1.8523-7.1345 6.602-8.865 11.348-1.5021 4.1191-2.1669 8.5434-2.1767 12.909l-0.01206 0.57132c-0.01362 0.2224-0.0319 0.44401-0.05524 0.66483 0.16067 11.134 2.2556 22.35 6.6607 32.593 4.9334 11.472 12.775 22.025 23.847 26.849 8.3526 3.6397 17.612 2.7811 25.182-1.5057 9.3991-5.3226 16.18-14.734 20.619-24.842 9.2202-21.006 9.4419-46.617 0.24121-68.173 8.9673-4.6444 8.9478-13.905 8.9478-13.905s8.3993 6.0185 17.845 2.2397c12.578 29.466 12.274 64.16-0.98815 93.182-7.7535 16.967-20.343 31.831-36.818 39.479-14.667 6.809-31.913 6.9792-46.591 0.58389-13.19-5.7489-23.918-16.106-31.637-28.15-11.179-17.443-16.472-38.678-16.496-59.604z"
+			fill="url(#c)"
+			fill-rule="nonzero"
+		/></g
+	></svg
+>
--- a/apps/ui/src/lib/components/svg/services/Wordpress.svelte
+++ b/apps/ui/src/lib/components/svg/services/Wordpress.svelte
@@ -2,7 +2,7 @@
 	export let isAbsolute = false;
 </script>

-<svg class={isAbsolute ? 'w-10  absolute top-0 left-0 -m-5' : 'w-8 mx-auto'} viewBox="0 0 128 128">
+<svg class={isAbsolute ? 'w-10 h-10 absolute top-0 left-0 -m-5' : 'w-8 h-8mx-auto'} viewBox="0 0 128 128">
 	<path
 		fill-rule="evenodd"
 		clip-rule="evenodd"
--- a/apps/ui/src/lib/components/svg/services/index.ts
+++ b/apps/ui/src/lib/components/svg/services/index.ts
@@ -1,17 +1,20 @@
 //@ts-nocheck
 export { default as PlausibleAnalytics } from './PlausibleAnalytics.svelte';
-export { default as NocoDb }  from './NocoDB.svelte';
-export { default as MinIo }  from './MinIO.svelte';
-export { default as VsCodeServer }  from './VSCodeServer.svelte';
-export { default as Wordpress }  from './Wordpress.svelte';
-export { default as VaultWarden }  from './VaultWarden.svelte';
-export { default as LanguageTool }  from './LanguageTool.svelte';
-export { default as N8n }  from './N8n.svelte';
-export { default as UptimeKuma }  from './UptimeKuma.svelte';
-export { default as Ghost }  from './Ghost.svelte';
-export { default as MeiliSearch }  from './MeiliSearch.svelte';
-export { default as Umami }  from './Umami.svelte';
-export { default as Hasura }  from './Hasura.svelte';
-export { default as Fider }  from './Fider.svelte';
-export { default as Moodle }  from './Moodle.svelte';
-
+export { default as NocoDb } from './NocoDB.svelte';
+export { default as MinIo } from './MinIO.svelte';
+export { default as VsCodeServer } from './VSCodeServer.svelte';
+export { default as Wordpress } from './Wordpress.svelte';
+export { default as VaultWarden } from './VaultWarden.svelte';
+export { default as LanguageTool } from './LanguageTool.svelte';
+export { default as N8n } from './N8n.svelte';
+export { default as UptimeKuma } from './UptimeKuma.svelte';
+export { default as Ghost } from './Ghost.svelte';
+export { default as MeiliSearch } from './MeiliSearch.svelte';
+export { default as Umami } from './Umami.svelte';
+export { default as Hasura } from './Hasura.svelte';
+export { default as Fider } from './Fider.svelte';
+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';
--- a/apps/ui/src/lib/locales/en.json
+++ b/apps/ui/src/lib/locales/en.json
@@ -4,7 +4,7 @@
 		"wait_new_version_startup": "Waiting for the new version to start...",
 		"new_version": "New version reachable. Reloading...",
 		"switch_to_a_different_team": "Switch to a different team...",
-		"update_available": "Update available"
+		"update_available": "Update Available"
 	},
 	"error": {
 		"you_can_find_your_way_back": "You can find your way back",
@@ -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-yellow-500 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 font-bold'>9000-9100</span>",
 		"no_actions_available": "No actions available",
 		"admin_api_key": "Admin API key"
 	},
@@ -159,23 +159,23 @@
 			"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>This is useful for storing data such as a database (SQLite) or a cache."
+			"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>."
 		},
 		"deployment_queued": "Deployment queued.",
 		"confirm_to_delete": "Are you sure you would like to delete '{{name}}'?",
-		"stop_application": "Stop application",
+		"stop_application": "Stop Application",
 		"permission_denied_stop_application": "You do not have permission to stop the application.",
-		"rebuild_application": "Rebuild application",
+		"rebuild_application": "Rebuild Application",
 		"permission_denied_rebuild_application": "You do not have permission to rebuild application.",
-		"build_and_start_application": "Build and start application",
-		"permission_denied_build_and_start_application": "You do not have permission to Build and start application.",
+		"build_and_start_application": "Deploy",
+		"permission_denied_build_and_start_application": "You do not have permission to deploy application.",
 		"configurations": "Configurations",
 		"secret": "Secrets",
 		"persistent_storage": "Persistent Storage",
 		"previews": "Previews",
 		"logs": "Application Logs",
 		"build_logs": "Build Logs",
-		"delete_application": "Delete application",
+		"delete_application": "Delete",
 		"permission_denied_delete_application": "You do not have permission to delete this application",
 		"domain_already_in_use": "Domain {{domain}} is already used.",
 		"dns_not_set_error": "DNS not set correctly or propogated for {{domain}}.<br><br>Please check your DNS settings.",
@@ -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-red-500 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 font-bold'>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",
@@ -227,17 +227,17 @@
 		"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}}?",
-		"stop_database": "Stop database",
+		"stop_database": "Stop",
 		"permission_denied_stop_database": "You do not have permission to stop the database.",
-		"start_database": "Start database",
+		"start_database": "Start",
 		"permission_denied_start_database": "You do not have permission to start the database.",
-		"delete_database": "Delete Database",
+		"delete_database": "Delete",
 		"permission_denied_delete_database": "You do not have permission to delete a Database",
 		"no_databases_found": "No databases found",
-		"logs": "Database Logs"
+		"logs": "Logs"
 	},
 	"destination": {
-		"delete_destination": "Delete Destination",
+		"delete_destination": "Delete",
 		"permission_denied_delete_destination": "You do not have permission to delete this destination",
 		"add_to_coolify": "Add to Coolify",
 		"coolify_proxy_stopped": "Coolify Proxy stopped!",
@@ -267,7 +267,7 @@
 			"official_providers": "Official providers"
 		},
 		"no_git_sources_found": "No git sources found",
-		"delete_git_source": "Delete Git Source",
+		"delete_git_source": "Delete",
 		"permission_denied": "You do not have permission to delete a Git Source",
 		"create_new_app": "Create new {{name}} App",
 		"change_app_settings": "Change {{name}} App Settings",
@@ -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-orange-600' >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='font-bold 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)",
@@ -293,20 +293,20 @@
 		"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."
 	},
 	"service": {
-		"stop_service": "Stop Service",
+		"stop_service": "Stop",
 		"permission_denied_stop_service": "You do not have permission to stop the service.",
-		"start_service": "Start Service",
+		"start_service": "Start",
 		"permission_denied_start_service": "You do not have permission to start the service.",
-		"delete_service": "Delete Service",
+		"delete_service": "Delete",
 		"permission_denied_delete_service": "You do not have permission to delete a service.",
 		"no_service": "No services found",
-		"logs": "Service Logs"
+		"logs": "Logs"
 	},
 	"setting": {
 		"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-yellow-500 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-yellow-500 font-bold'>www</span>, Coolify will be redirected (302) from non-www and vice versa.<br><br><span class='text-yellow-500 font-bold'>WARNING:</span> If you change an already set domain, it will brake webhooks and other integrations! You need to manually update them.",
+		"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.",
 		"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.",
@@ -314,7 +314,7 @@
 		"credential_stat_explainer": "Credentials for <a class=\"text-white font-bold\" 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-yellow-500'>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='font-bold 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."
 	},
--- a/apps/ui/src/lib/locales/fr.json
+++ b/apps/ui/src/lib/locales/fr.json
@@ -50,7 +50,7 @@
 		"delete_application": "Supprimer l'application",
 		"deployment_queued": "Déploiement en file d'attente.",
 		"destination": "Destination",
-		"directory_to_use_explainer": "Répertoire à utiliser comme base pour toutes les commandes.<br>Pourrait être utile avec <span class='text-green-500 font-bold'>monorepos</span>.",
+		"directory_to_use_explainer": "Répertoire à utiliser comme base pour toutes les commandes.<br>Pourrait être utile avec <span class='text-applications font-bold'>monorepos</span>.",
 		"dns_not_set_error": "DNS non défini ou propagé pour {{domain}}.<br><br>Veuillez vérifier vos paramètres DNS.",
 		"dns_not_set_partial_error": "DNS non défini",
 		"domain_already_in_use": "Le domaine {{domain}} est déjà utilisé.",
@@ -181,7 +181,7 @@
 		"path": "Chemin",
 		"port": "Port",
 		"public_port_range": "Gamme de ports publics",
-		"public_port_range_explainer": "Ports utilisés pour exposer les bases de données/services/services internes.<br> Ajoutez-les à votre pare-feu (le cas échéant).<br><br>Vous pouvez spécifier une plage de ports, par exemple : <span class='text-yellow-500 \nfont-bold'>9000-9100</span>",
+		"public_port_range_explainer": "Ports utilisés pour exposer les bases de données/services/services internes.<br> Ajoutez-les à votre pare-feu (le cas échéant).<br><br>Vous pouvez spécifier une plage de ports, par exemple : <span class='text-settings \nfont-bold'>9000-9100</span>",
 		"publish_directory": "Publier le répertoire",
 		"remove": "Retirer",
 		"remove_domain": "Supprimer le domaine",
@@ -266,7 +266,7 @@
 		"permission_denied": "Vous n'avez pas la permission de faire cela. \n\\nDemandez à un administrateur de modifier vos autorisations.",
 		"registration_allowed": "Inscription autorisée ?",
 		"registration_allowed_explainer": "Autoriser d'autres inscriptions à l'application. \n<br>Il est désactivé après la première inscription.",
-		"ssl_explainer": "Si vous spécifiez <span class='text-yellow-500 font-bold'>https</span>, Coolify sera accessible uniquement via https. \nUn certificat SSL sera généré pour vous.<br>Si vous spécifiez <span class='text-yellow-500 font-bold'>www</span>, Coolify sera redirigé (302) à partir de non-www et vice versa."
+		"ssl_explainer": "Si vous spécifiez <span class='text-settings font-bold'>https</span>, Coolify sera accessible uniquement via https. \nUn certificat SSL sera généré pour vous.<br>Si vous spécifiez <span class='text-settings font-bold'>www</span>, Coolify sera redirigé (302) à partir de non-www et vice versa."
 	},
 	"source": {
 		"application_id": "ID d'application",
--- a/apps/ui/src/lib/store.ts
+++ b/apps/ui/src/lib/store.ts
@@ -1,6 +1,9 @@
-import { writable, readable, type Writable, type Readable } from 'svelte/store';
+import { dev } from '$app/env';
+import cuid from 'cuid';
+import { writable, readable, type Writable } from 'svelte/store';

 interface AppSession {
+    registrationEnabled: boolean;
    ipv4: string | null,
    ipv6: string | null,
    version: string | null,
@@ -15,7 +18,13 @@ interface AppSession {
    tokens: {
        github: string | null,
        gitlab: string | null,
-    }
+    },
+    supportedServiceTypesAndVersions: Array<any>
+}
+interface AddToast {
+    type?: "info" | "success" | "error",
+    message: string,
+    timeout?: number | undefined
 }
 export const loginEmail: Writable<string | undefined> = writable()
 export const appSession: Writable<AppSession> = writable({
@@ -33,9 +42,30 @@ export const appSession: Writable<AppSession> = writable({
    tokens: {
        github: null,
        gitlab: null
-    }
+    },
+    supportedServiceTypesAndVersions: []
 });
 export const disabledButton: Writable<boolean> = writable(false);
+export const isDeploymentEnabled: Writable<boolean> = writable(false);
+export function checkIfDeploymentEnabledApplications(isAdmin: boolean, application: any) {
+    return (
+        isAdmin &&
+        (application.fqdn || application.settings.isBot) &&
+        application.gitSource &&
+        application.repository &&
+        application.destinationDocker &&
+        application.buildPack
+    );
+}
+export function checkIfDeploymentEnabledServices(isAdmin: boolean, service: any) {
+    return (
+        isAdmin &&
+        service.fqdn &&
+        service.destinationDocker &&
+        service.version &&
+        service.type
+    );
+}
 export const status: Writable<any> = writable({
    application: {
        isRunning: false,
@@ -64,14 +94,61 @@ export const features = readable({
 });

 export const location: Writable<null | string> = writable(null)
-export const setLocation = (resource: any) => {
+export const setLocation = (resource: any, settings?: any) => {
+    if (resource.settings.isBot && resource.exposePort) {
+        disabledButton.set(false);
+        return location.set(`http://${dev ? 'localhost' : settings.ipv4}:${resource.exposePort}`)
+    }
    if (GITPOD_WORKSPACE_URL && resource.exposePort) {
        const { href } = new URL(GITPOD_WORKSPACE_URL);
        const newURL = href
            .replace('https://', `https://${resource.exposePort}-`)
            .replace(/\/$/, '');
-        location.set(newURL)
-    } else {
-        location.set(resource.fqdn)
+        return location.set(newURL)
+    } else if (CODESANDBOX_HOST) {
+        const newURL = `https://${CODESANDBOX_HOST.replace(/\$PORT/, resource.exposePort)}`
+        return location.set(newURL)
    }
+    if (resource.fqdn) {
+        return location.set(resource.fqdn)
+    } else {
+        location.set(null);
+        disabledButton.set(false);
+    }
+}
+
+export const toasts: any = writable([])
+
+export const dismissToast = (id: string) => {
+    toasts.update((all: any) => all.filter((t: any) => t.id !== id))
+}
+export const pauseToast = (id: string) => {
+    toasts.update((all: any) => {
+        const index = all.findIndex((t: any) => t.id === id);
+        if (index > -1) clearTimeout(all[index].timeoutInterval);
+        return all;
+    })
+}
+export const resumeToast = (id: string) => {
+    toasts.update((all: any) => {
+        const index = all.findIndex((t: any) => t.id === id);
+        if (index > -1) {
+            all[index].timeoutInterval = setTimeout(() => {
+                dismissToast(id)
+            }, all[index].timeout)
+        }
+        return all;
+    })
+}
+
+export const addToast = (toast: AddToast) => {
+    const id = cuid();
+    const defaults = {
+        id,
+        type: 'info',
+        timeout: 2000,
+    }
+    let t: any = { ...defaults, ...toast }
+    if (t.timeout) t.timeoutInterval = setTimeout(() => dismissToast(id), t.timeout)
+    toasts.update((all: any) => [t, ...all])
 }
--- a/apps/ui/src/lib/templates.ts
+++ b/apps/ui/src/lib/templates.ts
@@ -170,6 +170,16 @@ export function findBuildPack(pack: string, packageManager = 'npm') {
 			port: 80
 		};
 	}
+	if (pack === 'heroku') {
+		return {
+			...metaData,
+			installCommand: null,
+			buildCommand: null,
+			startCommand: null,
+			publishDirectory: null,
+			port: 5000
+		};
+	}
 	return {
 		name: 'node',
 		fancyName: 'Node.js',
@@ -187,112 +197,137 @@ export const buildPacks = [
 		name: 'node',
 		fancyName: 'Node.js',
 		hoverColor: 'hover:bg-green-700',
-		color: 'bg-green-700'
+		color: 'bg-green-700',
+		isCoolifyBuildPack: true,
 	},
 	{
 		name: 'static',
 		fancyName: 'Static',
 		hoverColor: 'hover:bg-orange-700',
-		color: 'bg-orange-700'
+		color: 'bg-orange-700',
+		isCoolifyBuildPack: true,
 	},

 	{
 		name: 'php',
 		fancyName: 'PHP',
 		hoverColor: 'hover:bg-indigo-700',
-		color: 'bg-indigo-700'
+		color: 'bg-indigo-700',
+		isCoolifyBuildPack: true,
 	},
 	{
 		name: 'laravel',
 		fancyName: 'Laravel',
 		hoverColor: 'hover:bg-indigo-700',
-		color: 'bg-indigo-700'
+		color: 'bg-indigo-700',
+		isCoolifyBuildPack: true,
 	},
 	{
 		name: 'docker',
 		fancyName: 'Docker',
 		hoverColor: 'hover:bg-sky-700',
-		color: 'bg-sky-700'
+		color: 'bg-sky-700',
+		isCoolifyBuildPack: true,
 	},
 	{
 		name: 'svelte',
 		fancyName: 'Svelte',
 		hoverColor: 'hover:bg-orange-700',
-		color: 'bg-orange-700'
+		color: 'bg-orange-700',
+		isCoolifyBuildPack: true,
 	},
 	{
 		name: 'vuejs',
 		fancyName: 'VueJS',
 		hoverColor: 'hover:bg-green-700',
-		color: 'bg-green-700'
+		color: 'bg-green-700',
+		isCoolifyBuildPack: true,
 	},
 	{
 		name: 'nuxtjs',
 		fancyName: 'NuxtJS',
 		hoverColor: 'hover:bg-green-700',
-		color: 'bg-green-700'
+		color: 'bg-green-700',
+		isCoolifyBuildPack: true,
 	},
 	{
 		name: 'gatsby',
 		fancyName: 'Gatsby',
 		hoverColor: 'hover:bg-blue-700',
-		color: 'bg-blue-700'
+		color: 'bg-blue-700',
+		isCoolifyBuildPack: true,
 	},
 	{
 		name: 'astro',
 		fancyName: 'Astro',
 		hoverColor: 'hover:bg-pink-700',
-		color: 'bg-pink-700'
+		color: 'bg-pink-700',
+		isCoolifyBuildPack: true,
 	},
 	{
 		name: 'eleventy',
 		fancyName: 'Eleventy',
 		hoverColor: 'hover:bg-red-700',
-		color: 'bg-red-700'
+		color: 'bg-red-700',
+		isCoolifyBuildPack: true,
 	},

 	{
 		name: 'react',
 		fancyName: 'React',
 		hoverColor: 'hover:bg-blue-700',
-		color: 'bg-blue-700'
+		color: 'bg-blue-700',
+		isCoolifyBuildPack: true,
 	},
 	{
 		name: 'preact',
 		fancyName: 'Preact',
 		hoverColor: 'hover:bg-blue-700',
-		color: 'bg-blue-700'
+		color: 'bg-blue-700',
+		isCoolifyBuildPack: true,
 	},
 	{
 		name: 'nextjs',
 		fancyName: 'NextJS',
 		hoverColor: 'hover:bg-blue-700',
-		color: 'bg-blue-700'
+		color: 'bg-blue-700',
+		isCoolifyBuildPack: true,
 	},
 	{
 		name: 'nestjs',
 		fancyName: 'NestJS',
 		hoverColor: 'hover:bg-red-700',
-		color: 'bg-red-700'
+		color: 'bg-red-700',
+		isCoolifyBuildPack: true,
 	},
 	{
 		name: 'rust',
 		fancyName: 'Rust',
 		hoverColor: 'hover:bg-pink-700',
-		color: 'bg-pink-700'
+		color: 'bg-pink-700',
+		isCoolifyBuildPack: true,
 	},
 	{
 		name: 'python',
 		fancyName: 'Python',
 		hoverColor: 'hover:bg-green-700',
-		color: 'bg-green-700'
+		color: 'bg-green-700',
+		isCoolifyBuildPack: true,
 	},
 	{
 		name: 'deno',
 		fancyName: 'Deno',
 		hoverColor: 'hover:bg-green-700',
-		color: 'bg-green-700'
-	}
+		color: 'bg-green-700',
+		isCoolifyBuildPack: true,
+	},
+    {
+        name: 'heroku',
+		fancyName: 'Heroku',
+		hoverColor: 'hover:bg-purple-700',
+		color: 'bg-purple-700',
+		isHerokuBuildPack: true,
+    }
 ];
 export const scanningTemplates = {
 	'@sveltejs/kit': {
--- a/apps/ui/src/routes/__layout.svelte
+++ b/apps/ui/src/routes/__layout.svelte
@@ -65,11 +65,14 @@

 <script lang="ts">
 	export let baseSettings: any;
+	export let supportedServiceTypesAndVersions: any;
+	$appSession.registrationEnabled = baseSettings.registrationEnabled;
 	$appSession.ipv4 = baseSettings.ipv4;
 	$appSession.ipv6 = baseSettings.ipv6;
 	$appSession.version = baseSettings.version;
 	$appSession.whiteLabeled = baseSettings.whiteLabeled;
 	$appSession.whiteLabeledDetails.icon = baseSettings.whiteLabeledIcon;
+	$appSession.supportedServiceTypesAndVersions = supportedServiceTypesAndVersions;

 	export let userId: string;
 	export let teamId: string;
@@ -78,7 +81,6 @@
 	import '../tailwind.css';
 	import Cookies from 'js-cookie';
 	import { fade } from 'svelte/transition';
-	import { SvelteToast } from '@zerodevx/svelte-toast';
 	import { navigating, page } from '$app/stores';

 	import { get } from '$lib/api';
@@ -86,6 +88,8 @@
 	import PageLoader from '$lib/components/PageLoader.svelte';
 	import { errorNotification } from '$lib/common';
 	import { appSession } from '$lib/store';
+	import Toasts from '$lib/components/Toasts.svelte';
+	import Tooltip from '$lib/components/Tooltip.svelte';

 	if (userId) $appSession.userId = userId;
 	if (teamId) $appSession.teamId = teamId;
@@ -110,7 +114,7 @@
 		<link rel="icon" href={$appSession.whiteLabeledDetails.icon} />
 	{/if}
 </svelte:head>
-<SvelteToast options={{ intro: { y: -64 }, duration: 3000, pausable: true }} />
+<Toasts />
 {#if $navigating}
 	<div out:fade={{ delay: 100 }}>
 		<PageLoader />
@@ -120,20 +124,26 @@
 	<nav class="nav-main">
 		<div class="flex h-screen w-full flex-col items-center transition-all duration-100">
 			{#if !$appSession.whiteLabeled}
-				<div class="my-4 h-10 w-10"><img src="/favicon.png" alt="coolLabs logo" /></div>
+				<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 tooltip-right bg-coolgray-200 hover:text-white"
+					class="icons bg-coolgray-200 hover:text-white"
 					class:text-white={$page.url.pathname === '/'}
 					class:bg-coolgray-500={$page.url.pathname === '/'}
-					data-tooltip="Dashboard"
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
+						class="h-9 w-9"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
@@ -148,21 +158,22 @@
 						<path d="M16 15c-2.21 1.333 -5.792 1.333 -8 0" />
 					</svg>
 				</a>
-				<div class="border-t border-stone-700" />

+				<div class="border-t border-stone-700" />
 				<a
+					id="applications"
 					sveltekit:prefetch
 					href="/applications"
-					class="icons tooltip-green-500 tooltip-right bg-coolgray-200 hover:text-green-500"
-					class:text-green-500={$page.url.pathname.startsWith('/applications') ||
+					class="icons bg-coolgray-200"
+					class:text-applications={$page.url.pathname.startsWith('/applications') ||
 						$page.url.pathname.startsWith('/new/application')}
 					class:bg-coolgray-500={$page.url.pathname.startsWith('/applications') ||
 						$page.url.pathname.startsWith('/new/application')}
-					data-tooltip="Applications"
+					data-tip="Applications"
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
+						class="h-9 w-9"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentcolor"
@@ -178,19 +189,21 @@
 						<line x1="17" y1="4" x2="17" y2="10" />
 					</svg>
 				</a>
+
 				<a
+					id="sources"
 					sveltekit:prefetch
 					href="/sources"
-					class="icons tooltip-orange-500 tooltip-right bg-coolgray-200 hover:text-orange-500"
-					class:text-orange-500={$page.url.pathname.startsWith('/sources') ||
+					class="icons bg-coolgray-200"
+					class:text-sources={$page.url.pathname.startsWith('/sources') ||
 						$page.url.pathname.startsWith('/new/source')}
 					class:bg-coolgray-500={$page.url.pathname.startsWith('/sources') ||
 						$page.url.pathname.startsWith('/new/source')}
-					data-tooltip="Git Sources"
+					data-tip="Git Sources"
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
+						class="h-9 w-9"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
@@ -208,18 +221,19 @@
 					</svg>
 				</a>
 				<a
+					id="destinations"
 					sveltekit:prefetch
 					href="/destinations"
-					class="icons tooltip-sky-500 tooltip-right bg-coolgray-200 hover:text-sky-500"
-					class:text-sky-500={$page.url.pathname.startsWith('/destinations') ||
+					class="icons bg-coolgray-200"
+					class:text-destinations={$page.url.pathname.startsWith('/destinations') ||
 						$page.url.pathname.startsWith('/new/destination')}
 					class:bg-coolgray-500={$page.url.pathname.startsWith('/destinations') ||
 						$page.url.pathname.startsWith('/new/destination')}
-					data-tooltip="Destinations"
+					data-tip="Destinations"
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
+						class="h-9 w-9"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
@@ -243,18 +257,19 @@
 				</a>
 				<div class="border-t border-stone-700" />
 				<a
+					id="databases"
 					sveltekit:prefetch
 					href="/databases"
-					class="icons tooltip-purple-500 tooltip-right bg-coolgray-200 hover:text-purple-500"
-					class:text-purple-500={$page.url.pathname.startsWith('/databases') ||
+					class="icons  bg-coolgray-200"
+					class:text-databases={$page.url.pathname.startsWith('/databases') ||
 						$page.url.pathname.startsWith('/new/database')}
 					class:bg-coolgray-500={$page.url.pathname.startsWith('/databases') ||
 						$page.url.pathname.startsWith('/new/database')}
-					data-tooltip="Databases"
+					data-tip="Databases"
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
+						class="h-9 w-9"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
@@ -269,18 +284,19 @@
 					</svg>
 				</a>
 				<a
+					id="services"
 					sveltekit:prefetch
 					href="/services"
-					class="icons tooltip-pink-500 tooltip-right bg-coolgray-200 hover:text-pink-500"
-					class:text-pink-500={$page.url.pathname.startsWith('/services') ||
+					class="icons bg-coolgray-200"
+					class:text-services={$page.url.pathname.startsWith('/services') ||
 						$page.url.pathname.startsWith('/new/service')}
 					class:bg-coolgray-500={$page.url.pathname.startsWith('/services') ||
 						$page.url.pathname.startsWith('/new/service')}
-					data-tooltip="Services"
+					data-tip="Services"
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
+						class="h-9 w-9"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
@@ -298,16 +314,16 @@
 			<UpdateAvailable />
 			<div class="flex flex-col space-y-2 py-2">
 				<a
+					id="iam"
 					sveltekit:prefetch
 					href="/iam"
-					class="icons tooltip-fuchsia-500 tooltip-right bg-coolgray-200 hover:text-fuchsia-500"
-					class:text-fuchsia-500={$page.url.pathname.startsWith('/iam')}
+					class="icons bg-coolgray-200"
+					class:text-iam={$page.url.pathname.startsWith('/iam')}
 					class:bg-coolgray-500={$page.url.pathname.startsWith('/iam')}
-					data-tooltip="IAM"
 					><svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
 						viewBox="0 0 24 24"
+						class="h-9 w-9"
 						stroke-width="1.5"
 						stroke="currentColor"
 						fill="none"
@@ -322,17 +338,17 @@
 					</svg>
 				</a>
 				<a
+					id="settings"
 					sveltekit:prefetch
 					href={$appSession.teamId === '0' ? '/settings/global' : '/settings/ssh-keys'}
-					class="icons tooltip-yellow-500 tooltip-right bg-coolgray-200 hover:text-yellow-500"
-					class:text-yellow-500={$page.url.pathname.startsWith('/settings')}
+					class="icons bg-coolgray-200"
+					class:text-settings={$page.url.pathname.startsWith('/settings')}
 					class:bg-coolgray-500={$page.url.pathname.startsWith('/settings')}
-					data-tooltip="Settings"
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
 						viewBox="0 0 24 24"
+						class="h-9 w-9"
 						stroke-width="1.5"
 						stroke="currentColor"
 						fill="none"
@@ -348,13 +364,13 @@
 				</a>

 				<div
-					class="icons tooltip-red-500 tooltip-right bg-coolgray-200 hover:text-red-500"
-					data-tooltip="Logout"
+					id="logout"
+					class="icons bg-coolgray-200 hover:text-error"
 					on:click={logout}
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="ml-1 h-7 w-7"
+						class="ml-1 h-8 w-8"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
@@ -388,5 +404,20 @@
 	{/if}
 {/if}
 <main>
-	<slot />
+	<div class={$appSession.userId ? 'pl-14 lg:px-20' : null}>
+		<slot />
+	</div>
 </main>
+
+<Tooltip triggeredBy="#dashboard" placement="right">Dashboard</Tooltip>
+<Tooltip triggeredBy="#applications" placement="right" color="bg-applications">Applications</Tooltip
+>
+<Tooltip triggeredBy="#sources" placement="right" color="bg-sources">Git Sources</Tooltip>
+<Tooltip triggeredBy="#destinations" placement="right" color="bg-destinations">Destinations</Tooltip
+>
+<Tooltip triggeredBy="#databases" placement="right" color="bg-databases">Databases</Tooltip>
+<Tooltip triggeredBy="#services" placement="right" color="bg-services">Services</Tooltip>
+<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>
--- a/apps/ui/src/routes/applications/[id]/_Secret.svelte
+++ b/apps/ui/src/routes/applications/[id]/_Secret.svelte
@@ -12,8 +12,8 @@
 	import { del } 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 { toast } from '@zerodevx/svelte-toast';
 	import { createEventDispatcher } from 'svelte';
 	import { saveSecret } from './utils';

@@ -28,7 +28,10 @@
 				value = '';
 				isBuildSecret = false;
 			}
-			toast.push('Secret removed.');
+			addToast({
+				message: 'Secret removed.',
+				type: 'success'
+			});
 		} catch (error) {
 			return errorNotification(error);
 		}
@@ -36,6 +39,7 @@

 	async function createSecret(isNew: any) {
 		try {
+			if (!name || !value) return;
 			await saveSecret({
 				isNew,
 				name,
@@ -49,11 +53,18 @@
 				name = '';
 				value = '';
 				isBuildSecret = false;
+				addToast({
+					message: 'Secret added.',
+					type: 'success'
+				});
+			} else {
+				addToast({
+				message: 'Secret updated.',
+				type: 'success'
+			});
 			}
 			dispatch('refresh');
-			toast.push('Secret saved.');
 		} catch (error) {
-			console.log(error)
 			return errorNotification(error);
 		}
 	}
@@ -71,7 +82,10 @@
 					isNewSecret,
 					applicationId: id
 				});
-				toast.push('Secret saved.');
+				addToast({
+					message: 'Secret updated.',
+					type: 'success'
+				});
 			}
 		}
 	}
@@ -83,7 +97,6 @@
 		bind:value={name}
 		required
 		placeholder="EXAMPLE_VARIABLE"
-		class=" border border-dashed border-coolgray-300"
 		readonly={!isNewSecret}
 		class:bg-transparent={!isNewSecret}
 		class:cursor-not-allowed={!isNewSecret}
@@ -100,8 +113,7 @@
 	/>
 </td>
 <td class="text-center">
-	<div
-		type="button"
+	<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"
@@ -146,23 +158,25 @@
 				</svg>
 			</span>
 		</span>
-	</div>
+	</button>
 </td>
 <td>
 	{#if isNewSecret}
 		<div class="flex items-center justify-center">
-			<button class="bg-green-600 hover:bg-green-500" on:click={() => createSecret(true)}
+			<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="" on:click={() => createSecret(false)}>{$t('forms.set')}</button>
+				<button class="btn bg-application btn-sm" on:click={() => createSecret(false)}
+					>{$t('forms.set')}</button
+				>
 			</div>
 			{#if !isPRMRSecret}
 				<div class="flex justify-center items-end">
-					<button class="bg-red-600 hover:bg-red-500" on:click={removeSecret}
+					<button class="btn btn-sm bg-red-600 hover:bg-red-500" on:click={removeSecret}
 						>{$t('forms.remove')}</button
 					>
 				</div>
--- a/apps/ui/src/routes/applications/[id]/_Setting.svelte
+++ b/apps/ui/src/routes/applications/[id]/_Setting.svelte
@@ -1,73 +0,0 @@
-<script lang="ts">
-	import Explainer from '$lib/components/Explainer.svelte';
-
-	export let setting: any;
-	export let title: any;
-	export let description: any;
-	export let isCenter = true;
-	export let disabled = false;
-	export let dataTooltip: any = null;
-	export let loading = false;
-</script>
-
-<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}</div>
-		<Explainer text={description} />
-	</div>
-</div>
-<div
-	class:tooltip={dataTooltip}
-	class:text-center={isCenter}
-	data-tooltip={dataTooltip}
-	class="flex justify-center"
->
-	<div
-		type="button"
-		on:click
-		aria-pressed="false"
-		class="relative mx-20 inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out"
-		class:opacity-50={disabled || loading}
-		class:bg-green-600={!loading && setting}
-		class:bg-stone-700={!loading && !setting}
-		class:bg-yellow-500={loading}
-	>
-		<span class="sr-only">Use setting</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={setting}
-			class:translate-x-0={!setting}
-		>
-			<span
-				class=" absolute inset-0 flex h-full w-full items-center justify-center transition-opacity duration-200 ease-in"
-				class:opacity-0={setting}
-				class:opacity-100={!setting}
-				class:animate-spin={loading}
-				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={setting}
-				class:opacity-0={!setting}
-				class:animate-spin={loading}
-			>
-				<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>
-	</div>
-</div>
--- a/apps/ui/src/routes/applications/[id]/_Storage.svelte
+++ b/apps/ui/src/routes/applications/[id]/_Storage.svelte
@@ -8,9 +8,9 @@
 	import { page } from '$app/stores';
 	import { createEventDispatcher } from 'svelte';

-	import { toast } from '@zerodevx/svelte-toast';
 	import { t } from '$lib/translations';
 	import { errorNotification } from '$lib/common';
+	import { addToast } from '$lib/store';
 	const { id } = $page.params;

 	const dispatch = createEventDispatcher();
@@ -30,8 +30,17 @@
 				storage.path = null;
 				storage.id = null;
 			}
-			if (newStorage) toast.push($t('application.storage.storage_saved'));
-			else toast.push($t('application.storage.storage_updated'));
+			if (newStorage) {
+				addToast({
+					message: $t('application.storage.storage_saved'),
+					type: 'success'
+				});
+			} else {
+				addToast({
+					message: $t('application.storage.storage_updated'),
+					type: 'success'
+				});
+			}
 		} catch (error) {
 			return errorNotification(error);
 		}
@@ -40,7 +49,10 @@
 		try {
 			await del(`/applications/${id}/storages`, { path: storage.path });
 			dispatch('refresh');
-			toast.push($t('application.storage.storage_deleted'));
+			addToast({
+				message: $t('application.storage.storage_deleted'),
+				type: 'success'
+			});
 		} catch (error) {
 			return errorNotification(error);
 		}
@@ -52,23 +64,24 @@
 		bind:value={storage.path}
 		required
 		placeholder="eg: /sqlite.db"
-		class=" border border-dashed border-coolgray-300"
 	/>
 </td>
 <td>
 	{#if isNew}
 		<div class="flex items-center justify-center">
-			<button class="bg-green-600 hover:bg-green-500" on:click={() => saveStorage(true)}
+			<button class="btn btn-sm bg-applications" on:click={() => saveStorage(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="" on:click={() => saveStorage(false)}>{$t('forms.set')}</button>
+				<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="bg-red-600 hover:bg-red-500" on:click={removeStorage}
+				<button class="btn btn-sm bg-red-600 hover:bg-red-500" on:click={removeStorage}
 					>{$t('forms.remove')}</button
 				>
 			</div>
--- a/apps/ui/src/routes/applications/[id]/__layout.svelte
+++ b/apps/ui/src/routes/applications/[id]/__layout.svelte
@@ -16,7 +16,7 @@
 	export const load: Load = async ({ fetch, url, params }) => {
 		try {
 			const response = await get(`/applications/${params.id}`);
-			let { application, appId, settings, isQueueActive } = response;
+			let { application, appId, settings } = response;
 			if (!application || Object.entries(application).length === 0) {
 				return {
 					status: 302,
@@ -36,7 +36,8 @@

 			return {
 				props: {
-					application
+					application,
+					settings
 				},
 				stuff: {
 					application,
@@ -52,35 +53,42 @@

 <script lang="ts">
 	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 { toast } from '@zerodevx/svelte-toast';
 	import { onDestroy, onMount } from 'svelte';
 	import { t } from '$lib/translations';
-	import { appSession, disabledButton, status, location, setLocation } from '$lib/store';
+	import {
+		appSession,
+		status,
+		location,
+		setLocation,
+		addToast,
+		isDeploymentEnabled,
+		checkIfDeploymentEnabledApplications
+	} from '$lib/store';
 	import { errorNotification, handlerNotFoundLoad } from '$lib/common';
-	import Loading from '$lib/components/Loading.svelte';
+	import Tooltip from '$lib/components/Tooltip.svelte';

-	let loading = false;
 	let statusInterval: any;
-	let isQueueActive= false;
-	$disabledButton =
-		!$appSession.isAdmin ||
-		!application.fqdn ||
-		!application.gitSource ||
-		!application.repository ||
-		!application.destinationDocker ||
-		!application.buildPack;
-
+	let forceDelete = false;
 	const { id } = $page.params;

-	async function handleDeploySubmit() {
+	$isDeploymentEnabled = checkIfDeploymentEnabledApplications($appSession.isAdmin, application);
+
+	async function handleDeploySubmit(forceRebuild = false) {
+		if (!$isDeploymentEnabled) return;
 		try {
-			const { buildId } = await post(`/applications/${id}/deploy`, { ...application });
-			toast.push($t('application.deployment_queued'));
+			const { buildId } = await post(`/applications/${id}/deploy`, {
+				...application,
+				forceRebuild
+			});
+			addToast({
+				message: $t('application.deployment_queued'),
+				type: 'success'
+			});
 			if ($page.url.pathname.startsWith(`/applications/${id}/logs/build`)) {
 				return window.location.assign(`/applications/${id}/logs/build?buildId=${buildId}`);
 			} else {
@@ -93,49 +101,82 @@
 		}
 	}

-	async function deleteApplication(name: string) {
+	async function deleteApplication(name: string, force: boolean) {
 		const sure = confirm($t('application.confirm_to_delete', { name }));
 		if (sure) {
-			loading = true;
+			$status.application.initialLoading = true;
 			try {
-				await del(`/applications/${id}`, { id });
+				await del(`/applications/${id}`, { id, force });
 				return await goto(`/applications`);
 			} 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;
+			$status.application.loading = true;
+			await post(`/applications/${id}/restart`, {});
+			addToast({
+				type: 'success',
+				message: 'Restart successful.'
+			});
+		} catch (error) {
+			return errorNotification(error);
+		} finally {
+			$status.application.initialLoading = false;
+			$status.application.loading = false;
+			await getStatus();
+		}
+	}
 	async function stopApplication() {
 		try {
-			loading = true;
+			$status.application.initialLoading = true;
+			// $status.application.loading = true;
 			await post(`/applications/${id}/stop`, {});
-			return window.location.reload();
 		} catch (error) {
 			return errorNotification(error);
-		} 
+		} finally {
+			$status.application.initialLoading = false;
+			// $status.application.loading = false;
+			await getStatus();
+		}
 	}
 	async function getStatus() {
 		if ($status.application.loading) return;
 		$status.application.loading = true;
 		const data = await get(`/applications/${id}/status`);
-		isQueueActive = data.isQueueActive;
 		$status.application.isRunning = data.isRunning;
 		$status.application.isExited = data.isExited;
 		$status.application.loading = false;
 		$status.application.initialLoading = false;
 	}
+
 	onDestroy(() => {
 		$status.application.initialLoading = true;
-		$location = null;
-		clearInterval(statusInterval);
-	});
-	onMount(async () => {
-		setLocation(application);
-
 		$status.application.isRunning = false;
 		$status.application.isExited = false;
 		$status.application.loading = false;
-		if (application.gitSourceId && application.destinationDockerId && application.fqdn) {
+		$location = null;
+		$isDeploymentEnabled = false;
+		clearInterval(statusInterval);
+	});
+	onMount(async () => {
+		setLocation(application, settings);
+		$status.application.isRunning = false;
+		$status.application.isExited = false;
+		$status.application.loading = false;
+		if (
+			application.gitSourceId &&
+			application.destinationDockerId &&
+			(application.fqdn || application.settings.isBot)
+		) {
 			await getStatus();
 			statusInterval = setInterval(async () => {
 				await getStatus();
@@ -147,216 +188,138 @@
 </script>

 <nav class="nav-side">
-	{#if loading}
-		<Loading fullscreen cover />
-	{:else}
-		{#if $location}
-			<a
-				href={$location}
-				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 $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"
 			>
-		{/if}
+				<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 $status.application.isExited}
-			<a
-				href={!$disabledButton ? `/applications/${id}/logs` : null}
-				class=" icons bg-transparent tooltip-bottom text-sm flex items-center text-red-500 tooltip-red-500"
-				data-tooltip="Application exited with an error!"
-				sveltekit:prefetch
+	{/if}
+
+	{#if $status.application.isExited}
+		<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"
 			>
-				<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>
-		{/if}
-		{#if $status.application.initialLoading}
-			<button
-				class="icons tooltip-bottom flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out"
+				<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 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="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}
+				<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)}>
 			<button
-				on:click={stopApplication}
-				title="Stop application"
+				id="forceredeploy"
 				type="submit"
-				disabled={$disabledButton}
-				class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2 text-red-500"
-				data-tooltip={$appSession.isAdmin
-					? $t('application.stop_application')
-					: $t('application.permission_denied_stop_application')}
-			>
-				<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>
-			<form on:submit|preventDefault={handleDeploySubmit}>
-				<button
-					title="Rebuild application"
-					type="submit"
-					disabled={$disabledButton || !isQueueActive}
-					class:hover:text-green-500={isQueueActive}
-					class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2"
-					data-tooltip={$appSession.isAdmin
-						? isQueueActive
-							? 'Rebuild application'
-							: 'Autoupdate inprogress. Cannot rebuild application.'
-						: 'You do not have permission to rebuild application.'}
-				>
-					<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>
-			</form>
-		{:else}
-			<form on:submit|preventDefault={handleDeploySubmit}>
-				<button
-					title="Build and start application"
-					type="submit"
-					disabled={$disabledButton}
-					class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2 text-green-500"
-					data-tooltip={$appSession.isAdmin
-						? 'Build and start application'
-						: 'You do not have permission to Build and start application.'}
-				>
-					<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>
-			</form>
-		{/if}
-
-		<div class="border border-coolgray-500 h-8" />
-		<a
-			href={!$disabledButton ? `/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
-				title="Configurations"
-				disabled={$disabledButton}
-				class="icons bg-transparent tooltip-bottom text-sm"
-				data-tooltip="Configurations"
-			>
-				<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
-		>
-		<a
-			href={!$disabledButton ? `/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
-				title="Secret"
-				disabled={$disabledButton}
-				class="icons bg-transparent tooltip-bottom text-sm"
-				data-tooltip="Secret"
+				disabled={!$isDeploymentEnabled}
+				class="icons bg-transparent text-sm flex items-center space-x-2"
 			>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
@@ -370,25 +333,20 @@
 				>
 					<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="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)"
 					/>
-					<circle cx="12" cy="11" r="1" />
-					<line x1="12" y1="12" x2="12" y2="14.5" />
-				</svg></button
-			></a
-		>
-		<a
-			href={!$disabledButton ? `/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`}
-		>
+				</svg>
+			</button>
+			<Tooltip triggeredBy="#forceredeploy">Force redeploy (without cache)</Tooltip>
+		</form>
+	{:else}
+		<form on:submit|preventDefault={() => handleDeploySubmit(false)}>
 			<button
-				title="Persistent Storages"
-				disabled={$disabledButton}
-				class="icons bg-transparent tooltip-bottom text-sm"
-				data-tooltip="Persistent Storages"
+				id="deploy"
+				type="submit"
+				disabled={!$isDeploymentEnabled}
+				class="icons bg-transparent text-sm flex items-center space-x-2 text-success"
 			>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
@@ -401,25 +359,118 @@
 					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" />
+					<path d="M7 4v16l13 -8z" />
 				</svg>
-			</button></a
+			</button>
+			<Tooltip triggeredBy="#deploy">Deploy</Tooltip>
+		</form>
+	{/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={!$disabledButton ? `/applications/${id}/previews` : null}
+			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
-				title="Previews"
-				disabled={$disabledButton}
-				class="icons bg-transparent tooltip-bottom text-sm"
-				data-tooltip="Previews"
-			>
+			<button id="previews" disabled={!$isDeploymentEnabled} class="icons bg-transparent text-sm">
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
 					class="w-6 h-6"
@@ -439,89 +490,99 @@
 				</svg></button
 			></a
 		>
-		<div class="border border-coolgray-500 h-8" />
-		<a
-			href={!$disabledButton && $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
-				title={$t('application.logs')}
-				disabled={$disabledButton || !$status.application.isRunning}
-				class="icons bg-transparent tooltip-bottom text-sm"
-				data-tooltip={$t('application.logs')}
-			>
-				<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
-		>
-		<a
-			href={!$disabledButton ? `/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
-				title="Build Logs"
-				disabled={$disabledButton}
-				class="icons bg-transparent tooltip-bottom text-sm"
-				data-tooltip="Build Logs"
-			>
-				<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
-		>
-		<div class="border border-coolgray-500 h-8" />
-
+		<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
-			on:click={() => deleteApplication(application.name)}
-			title={$t('application.delete_application')}
+			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 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  tooltip-bottom text-sm"
-			data-tooltip={$appSession.isAdmin
-				? $t('application.delete_application')
-				: $t('application.permission_denied_delete_application')}
+			class="icons bg-transparent text-sm"
 		>
 			<DeleteIcon />
 		</button>
+		<Tooltip triggeredBy="#delete">Delete</Tooltip>
 	{/if}
 </nav>
 <slot />
--- a/apps/ui/src/routes/applications/[id]/configuration/_BuildPack.svelte
+++ b/apps/ui/src/routes/applications/[id]/configuration/_BuildPack.svelte
@@ -26,7 +26,7 @@
 			delete tempBuildPack.color;
 			delete tempBuildPack.hoverColor;

-			if (foundConfig.buildPack !== name) {
+			if (foundConfig?.buildPack !== name) {
 				await post(`/applications/${id}`, { ...tempBuildPack, buildPack: name });
 			}
 			await post(`/applications/${id}/configuration/buildpack`, { buildPack: name });
--- a/apps/ui/src/routes/applications/[id]/configuration/_GithubRepositories.svelte
+++ b/apps/ui/src/routes/applications/[id]/configuration/_GithubRepositories.svelte
@@ -95,19 +95,19 @@
 	async function isBranchAlreadyUsed(event: any) {
 		selected.branch = event.detail.value;
 		try {
-			const data = await get(
-				`/applications/${id}/configuration/repository?repository=${selected.repository}&branch=${selected.branch}`
-			);
-			if (data.used) {
-				const sure = confirm($t('application.configuration.branch_already_in_use'));
-				if (sure) {
-					selected.autodeploy = false;
-					showSave = true;
-					return true;
-				}
-				showSave = false;
-				return true;
-			}
+			// const data = await get(
+			// 	`/applications/${id}/configuration/repository?repository=${selected.repository}&branch=${selected.branch}`
+			// );
+			// if (data.used) {
+			// 	const sure = confirm($t('application.configuration.branch_already_in_use'));
+			// 	if (sure) {
+			// 		selected.autodeploy = false;
+			// 		showSave = true;
+			// 		return true;
+			// 	}
+			// 	showSave = false;
+			// 	return true;
+			// }
 			showSave = true;
 		} catch (error) {
 			showSave = false;
@@ -190,11 +190,11 @@
 		</div>
 		<div class="pt-5 flex-col flex justify-center items-center space-y-4">
 			<button
-				class="w-40"
+				class="btn btn-wide"
 				type="submit"
 				disabled={!showSave}
-				class:bg-orange-600={showSave}
-				class:hover:bg-orange-500={showSave}>{$t('forms.save')}</button
+				class:bg-applications={showSave}
+				>{$t('forms.save')}</button
 			>
 		</div>
 	</form>
--- a/apps/ui/src/routes/applications/[id]/configuration/_GitlabRepositories.svelte
+++ b/apps/ui/src/routes/applications/[id]/configuration/_GitlabRepositories.svelte
@@ -169,10 +169,6 @@
 			}
 		}
 	}
-	function selectBranch(event: any) {
-		selected.branch = event.detail;
-		isBranchAlreadyUsed();
-	}
 	async function loadBranches(page: number = 1) {
 		let perPage = 100;
 		//@ts-ignore
@@ -199,21 +195,22 @@
 		}
 	}

-	async function isBranchAlreadyUsed() {
+	async function isBranchAlreadyUsed(event) {
+		selected.branch = event.detail;
 		try {
-			const data = await get(
-				`/applications/${id}/configuration/repository?repository=${selected.project.path_with_namespace}&branch=${selected.branch.name}`
-			);
-			if (data.used) {
-				const sure = confirm($t('application.configuration.branch_already_in_use'));
-				if (sure) {
-					autodeploy = false;
-					showSave = true;
-					return true;
-				}
-				showSave = false;
-				return true;
-			}
+			// const data = await get(
+			// 	`/applications/${id}/configuration/repository?repository=${selected.project.path_with_namespace}&branch=${selected.branch.name}`
+			// );
+			// if (data.used) {
+			// 	const sure = confirm($t('application.configuration.branch_already_in_use'));
+			// 	if (sure) {
+			// 		autodeploy = false;
+			// 		showSave = true;
+			// 		return true;
+			// 	}
+			// 	showSave = false;
+			// 	return true;
+			// }
 			showSave = true;
 		} catch (error) {
 			return errorNotification(error);
@@ -227,9 +224,7 @@
 		}
 	}
 	async function setWebhook(url: any, webhookToken: any) {
-		const host = dev
-			? getWebhookUrl('gitlab')
-			: `${window.location.origin}/webhooks/gitlab/events`;
+		const host = dev ? getWebhookUrl('gitlab') : `${window.location.origin}/webhooks/gitlab/events`;
 		try {
 			await post(
 				url,
@@ -294,17 +289,15 @@
 			);
 			await post(updateDeployKeyIdUrl, { deployKeyId: id });
 		} catch (error) {
-			return errorNotification(error);
-		} finally {
 			loading.save = false;
+			return errorNotification(error);
 		}

 		try {
 			await setWebhook(webhookUrl, webhookToken);
 		} catch (error) {
-			return errorNotification(error);
-		} finally {
 			loading.save = false;
+			return errorNotification(error);
 		}

 		const url = `/applications/${id}/configuration/repository`;
@@ -317,11 +310,11 @@
 				autodeploy,
 				webhookToken
 			});
+			loading.save = false;
 			return await goto(from || `/applications/${id}/configuration/buildpack`);
 		} catch (error) {
-			return errorNotification(error);
-		} finally {
 			loading.save = false;
+			return errorNotification(error);
 		}
 	}
 	async function handleSubmit() {
@@ -396,7 +389,7 @@
 				showIndicator={!loading.branches}
 				isWaiting={loading.branches}
 				isDisabled={loading.branches || !selected.project}
-				on:select={selectBranch}
+				on:select={isBranchAlreadyUsed}
 				on:clear={() => {
 					showSave = false;
 					selected.branch = null;
@@ -413,11 +406,10 @@
 	<div class="flex flex-col items-center justify-center space-y-4 pt-5">
 		<button
 			on:click|preventDefault={save}
-			class="w-40"
+			class="btn btn-wide"
 			type="submit"
 			disabled={!showSave || loading.save}
-			class:bg-orange-600={showSave && !loading.save}
-			class:hover:bg-orange-500={showSave && !loading.save}
+			class:bg-applications={showSave && !loading.save}
 			>{loading.save ? $t('forms.saving') : $t('forms.save')}</button
 		>
 		{#if tryAgain}
@@ -426,7 +418,7 @@
 				configuration <a href={`/sources/${application.gitSource.id}`}>here.</a>
 			</div>
 			<button
-				class="w-40 bg-green-600"
+				class="btn btn-sm w-40 bg-green-600"
 				on:click|stopPropagation|preventDefault={() => window.location.reload()}
 			>
 				Try again
--- a/apps/ui/src/routes/applications/[id]/configuration/_PublicRepository.svelte
+++ b/apps/ui/src/routes/applications/[id]/configuration/_PublicRepository.svelte
@@ -0,0 +1,195 @@
+<script lang="ts">
+	import { get, post } from '$lib/api';
+	import { t } from '$lib/translations';
+	import { page } from '$app/stores';
+
+	import Select from 'svelte-select';
+	import { goto } from '$app/navigation';
+	import { errorNotification } from '$lib/common';
+
+	const { id } = $page.params;
+
+	let publicRepositoryLink: string;
+	let projectId: number;
+	let repositoryName: string;
+	let branchName: string;
+	let ownerName: string;
+	let type: string;
+	let branchSelectOptions: any = [];
+	let loading = {
+		branches: false
+	};
+	async function loadBranches() {
+		try {
+			loading.branches = true;
+			publicRepositoryLink = publicRepositoryLink.trim();
+			const protocol = publicRepositoryLink.split(':')[0];
+			const gitUrl = publicRepositoryLink.replace('http://', '').replace('https://', '');
+
+			let [host, ...path] = gitUrl.split('/');
+			const [owner, repository, ...branch] = path;
+
+			ownerName = owner;
+			repositoryName = repository;
+
+			if (host === 'github.com') {
+				host = 'api.github.com';
+				type = 'github';
+				if (branch[0] === 'tree' && branch[1]) {
+					branchName = branch[1];
+				}
+			}
+			if (host === 'gitlab.com') {
+				host = 'gitlab.com/api/v4';
+				type = 'gitlab';
+				if (branch[1] === 'tree' && branch[2]) {
+					branchName = branch[2];
+				}
+			}
+			const apiUrl = `${protocol}://${host}`;
+			if (type === 'github') {
+				const repositoryDetails = await get(`${apiUrl}/repos/${ownerName}/${repositoryName}`);
+				projectId = repositoryDetails.id.toString();
+			}
+			if (type === 'gitlab') {
+				const repositoryDetails = await get(`${apiUrl}/projects/${ownerName}%2F${repositoryName}`);
+				projectId = repositoryDetails.id.toString();
+			}
+			if (type === 'github' && branchName) {
+				try {
+					await get(`${apiUrl}/repos/${ownerName}/${repositoryName}/branches/${branchName}`);
+					await saveRepository();
+					loading.branches = false;
+					return;
+				} catch (error) {
+					errorNotification(error);
+				}
+			}
+			if (type === 'gitlab' && branchName) {
+				try {
+					await get(
+						`${apiUrl}/projects/${ownerName}%2F${repositoryName}/repository/branches/${branchName}`
+					);
+					await saveRepository();
+					loading.branches = false;
+					return;
+				} catch (error) {
+					errorNotification(error);
+				}
+			}
+			let branches: any[] = [];
+			let page = 1;
+			let branchCount = 0;
+			const loadedBranches = await loadBranchesByPage(
+				apiUrl,
+				ownerName,
+				repositoryName,
+				page,
+				type
+			);
+			branches = branches.concat(loadedBranches);
+			branchCount = branches.length;
+			if (branchCount === 100) {
+				while (branchCount === 100) {
+					page = page + 1;
+					const nextBranches = await loadBranchesByPage(
+						apiUrl,
+						ownerName,
+						repositoryName,
+						page,
+						type
+					);
+					branches = branches.concat(nextBranches);
+					branchCount = nextBranches.length;
+				}
+			}
+			loading.branches = false;
+			branchSelectOptions = branches.map((branch: any) => ({
+				value: branch.name,
+				label: branch.name
+			}));
+		} catch (error) {
+			return errorNotification(error);
+		} finally {
+			loading.branches = false;
+		}
+	}
+	async function loadBranchesByPage(
+		apiUrl: string,
+		owner: string,
+		repository: string,
+		page = 1,
+		type: string
+	) {
+		if (type === 'github') {
+			return await get(`${apiUrl}/repos/${owner}/${repository}/branches?per_page=100&page=${page}`);
+		}
+		if (type === 'gitlab') {
+			return await get(
+				`${apiUrl}/projects/${ownerName}%2F${repositoryName}/repository/branches?page=${page}`
+			);
+		}
+	}
+	async function saveRepository(event?: any) {
+		try {
+			if (event?.detail?.value) {
+				branchName = event.detail.value;
+			}
+			await post(`/applications/${id}/configuration/source`, {
+				gitSourceId: null,
+				forPublic: true,
+				type
+			});
+			await post(`/applications/${id}/configuration/repository`, {
+				repository: `${ownerName}/${repositoryName}`,
+				branch: branchName,
+				projectId,
+				autodeploy: false,
+				webhookToken: null,
+				isPublicRepository: true
+			});
+
+			return await goto(`/applications/${id}/configuration/destination`);
+		} catch (error) {
+			return errorNotification(error);
+		}
+	}
+</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>
+	</div>
+	
+</div>
--- a/apps/ui/src/routes/applications/[id]/configuration/buildpack.svelte
+++ b/apps/ui/src/routes/applications/[id]/configuration/buildpack.svelte
@@ -30,7 +30,6 @@
 	import { page } from '$app/stores';
 	import { get } from '$lib/api';
 	import { appSession } from '$lib/store';
-	import { browser } from '$app/env';
 	import { t } from '$lib/translations';
 	import { buildPacks, findBuildPack, scanningTemplates } from '$lib/templates';
 	import { errorNotification } from '$lib/common';
@@ -48,6 +47,7 @@
 	export let branch: any;
 	export let type: any;
 	export let application: any;
+	export let isPublicRepository: boolean;

 	function checkPackageJSONContents({ key, json }: { key: any; json: any }) {
 		return json?.dependencies?.hasOwnProperty(key) || json?.devDependencies?.hasOwnProperty(key);
@@ -237,7 +237,7 @@
 			if (error.message === 'Bad credentials') {
 				const { token } = await get(`/applications/${id}/configuration/githubToken`);
 				$appSession.tokens.github = token;
-				return await scanRepository()
+				return await scanRepository();
 			}
 			return errorNotification(error);
 		} finally {
@@ -246,7 +246,11 @@
 		}
 	}
 	onMount(async () => {
-		await scanRepository();
+		if (!isPublicRepository) {
+			await scanRepository();
+		} else {
+			scanning = false;
+		}
 	});
 </script>

@@ -263,11 +267,25 @@
 		</div>
 	</div>
 {:else}
-	<div class="max-w-7xl mx-auto flex flex-wrap justify-center">
-		{#each buildPacks as buildPack}
-			<div class="p-2">
-				<BuildPack {packageManager} {buildPack} {scanning} bind:foundConfig />
-			</div>
-		{/each}
+	<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="title pb-2">Other</div>
+		<div class="flex flex-wrap justify-center">
+			{#each buildPacks.filter((bp) => bp.isHerokuBuildPack === true) as buildPack}
+				<div class="p-2">
+					<BuildPack {packageManager} {buildPack} {scanning} bind:foundConfig />
+				</div>
+			{/each}
+		</div>
 	</div>
 {/if}
--- a/apps/ui/src/routes/applications/[id]/configuration/database.svelte
+++ b/apps/ui/src/routes/applications/[id]/configuration/database.svelte
@@ -0,0 +1,162 @@
+<script context="module" lang="ts">
+	import type { Load } from '@sveltejs/kit';
+	export const load: Load = async () => {
+		try {
+			const response = await get(`/databases`);
+			return {
+				props: {
+					...response
+				}
+			};
+		} catch (error: any) {
+			return {
+				status: 500,
+				error: new Error(error)
+			};
+		}
+	};
+</script>
+
+<script lang="ts">
+	export let databases: any = [];
+	import { get, post } from '$lib/api';
+	import { t } from '$lib/translations';
+	import { appSession } from '$lib/store';
+	import DatabaseIcons from '$lib/components/svg/databases/DatabaseIcons.svelte';
+	import { errorNotification } from '$lib/common';
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+
+	const from = $page.url.searchParams.get('from');
+
+	let remoteDatabase = {
+		name: null,
+		type: null,
+		host: null,
+		port: null,
+		user: null,
+		password: null,
+		database: null
+	};
+
+	const ownDatabases = databases.filter((database: any) => {
+		if (database.teams[0].id === $appSession.teamId) {
+			return database;
+		}
+	});
+	const otherDatabases = databases.filter((database: any) => {
+		if (database.teams[0].id !== $appSession.teamId) {
+			return database;
+		}
+	});
+
+	async function addCoolifyDatabase(database: any) {
+		try {
+			await post(`/applications/${$page.params.id}/configuration/database`, {
+				databaseId: database.id,
+				type: database.type
+			});
+			return window.location.assign(from || `/applications/${$page.params.id}/`);
+		} catch (error) {
+			return errorNotification(error);
+		}
+	}
+</script>
+
+<div class="flex space-x-1 p-6 font-bold">
+	<div class="mr-4 text-2xl tracking-tight">Select a Database</div>
+</div>
+
+<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
+	{#if !databases || ownDatabases.length === 0}
+		<div class="flex-col">
+			<div class="text-center text-xl font-bold">{$t('database.no_databases_found')}</div>
+		</div>
+	{/if}
+	{#if ownDatabases.length > 0 || otherDatabases.length > 0}
+		<div class="flex flex-col">
+			<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
+				{#each ownDatabases as database}
+					<button on:click={() => addCoolifyDatabase(database)} class="p-2 no-underline">
+						<div class="box-selection group relative hover:bg-purple-600">
+							<DatabaseIcons type={database.type} isAbsolute={true} />
+							<div class="truncate text-center text-xl font-bold">
+								{database.name}
+							</div>
+							{#if $appSession.teamId === '0' && otherDatabases.length > 0}
+								<div class="truncate text-center">{database.teams[0].name}</div>
+							{/if}
+							{#if database.destinationDocker?.name}
+								<div class="truncate text-center">{database.destinationDocker.name}</div>
+							{/if}
+							{#if !database.type}
+								<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
+									{$t('application.configuration.configuration_missing')}
+								</div>
+							{/if}
+						</div>
+					</button>
+				{/each}
+			</div>
+			{#if otherDatabases.length > 0 && $appSession.teamId === '0'}
+				<div class="px-6 pb-5 pt-10 text-2xl font-bold text-center">Other Databases</div>
+				<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
+					{#each otherDatabases as database}
+						<a href="/databases/{database.id}" class="p-2 no-underline">
+							<div class="box-selection group relative hover:bg-purple-600">
+								<DatabaseIcons type={database.type} isAbsolute={true} />
+								<div class="truncate text-center text-xl font-bold">
+									{database.name}
+								</div>
+								{#if $appSession.teamId === '0'}
+									<div class="truncate text-center">{database.teams[0].name}</div>
+								{/if}
+								{#if !database.type}
+									<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
+										Configuration missing
+									</div>
+								{:else}
+									<div class="text-center truncate">{database.type}</div>
+								{/if}
+							</div>
+						</a>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	{/if}
+
+	<div class="mx-auto max-w-4xl 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">
+				<label for="name" class="text-base font-bold text-stone-100">Name</label>
+				<input name="name" id="name" required bind:value={remoteDatabase.name} />
+			</div>
+			<div class="mt-2 grid grid-cols-2 items-center px-4">
+				<label for="type" class="text-base font-bold text-stone-100">Type</label>
+				<input name="type" id="type" required bind:value={remoteDatabase.type} />
+			</div>
+			<div class="mt-2 grid grid-cols-2 items-center px-4">
+				<label for="host" class="text-base font-bold text-stone-100">Host</label>
+				<input name="host" id="host" required bind:value={remoteDatabase.host} />
+			</div>
+			<div class="mt-2 grid grid-cols-2 items-center px-4">
+				<label for="port" class="text-base font-bold text-stone-100">Port</label>
+				<input name="port" id="port" required bind:value={remoteDatabase.port} />
+			</div>
+			<div class="mt-2 grid grid-cols-2 items-center px-4">
+				<label for="user" class="text-base font-bold text-stone-100">User</label>
+				<input name="user" id="user" required bind:value={remoteDatabase.user} />
+			</div>
+			<div class="mt-2 grid grid-cols-2 items-center px-4">
+				<label for="password" class="text-base font-bold text-stone-100">Password</label>
+				<input name="password" id="password" required bind:value={remoteDatabase.password} />
+			</div>
+			<div class="mt-2 grid grid-cols-2 items-center px-4">
+				<label for="database" class="text-base font-bold text-stone-100">Database Name</label>
+				<input name="database" id="database" required bind:value={remoteDatabase.database} />
+			</div>
+		</div>
+	</div>
+</div>
--- a/apps/ui/src/routes/applications/[id]/configuration/destination.svelte
+++ b/apps/ui/src/routes/applications/[id]/configuration/destination.svelte
@@ -31,6 +31,7 @@
 	import { t } from '$lib/translations';
 	import { appSession } from '$lib/store';
 	import { errorNotification } from '$lib/common';
+	import { onMount } from 'svelte';

 	const { id } = $page.params;
 	const from = $page.url.searchParams.get('from');
@@ -55,6 +56,11 @@
 			return errorNotification(error);
 		}
 	}
+	onMount(async () => {
+		if (destinations.length === 1) {
+			await handleSubmit(destinations[0].id);
+		}
+	});
 </script>

 <div class="flex space-x-1 p-6 font-bold">
@@ -65,7 +71,9 @@
 <div class="flex flex-col justify-center">
 	{#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="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">
 					<svg
--- a/apps/ui/src/routes/applications/[id]/configuration/repository.svelte
+++ b/apps/ui/src/routes/applications/[id]/configuration/repository.svelte
@@ -48,3 +48,4 @@
 		<GitlabRepositories {application} {appId} {settings} />
 	{/if}
 </div>
+
--- a/apps/ui/src/routes/applications/[id]/configuration/source.svelte
+++ b/apps/ui/src/routes/applications/[id]/configuration/source.svelte
@@ -31,6 +31,8 @@
 	import { t } from '$lib/translations';
 	import { errorNotification } from '$lib/common';
 	import { appSession } from '$lib/store';
+	import PublicRepository from './_PublicRepository.svelte';
+	import DocLink from '$lib/components/DocLink.svelte';

 	const { id } = $page.params;
 	const from = $page.url.searchParams.get('from');
@@ -71,120 +73,128 @@
 		{$t('application.configuration.select_a_git_source')}
 	</div>
 </div>
-<div class="flex flex-col justify-center">
-	{#if !filteredSources || ownSources.length === 0}
-		<div class="flex-col">
-			<div class="pb-2 text-center font-bold">
-				{$t('application.configuration.no_configurable_git')}
-			</div>
-			<div class="flex justify-center">
-				<a
-					href="/sources/new?from={$page.url.pathname}"
-					class="add-icon bg-orange-600 hover:bg-orange-500"
-				>
-					<svg
-						class="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
+<div class="max-w-5xl mx-auto ">
+	<div class="title pb-8">Git App</div>
+	<div class="flex flex-wrap justify-center">
+		{#if !filteredSources || ownSources.length === 0}
+			<div class="flex-col">
+				<div class="pb-2 text-center font-bold">
+					{$t('application.configuration.no_configurable_git')}
+				</div>
+				<div class="flex justify-center">
+					<a
+						href="/sources/new?from={$page.url.pathname}"
+						class="add-icon bg-orange-600 hover:bg-orange-500"
 					>
-				</a>
+						<svg
+							class="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
+						>
+					</a>
+				</div>
 			</div>
-		</div>
-	{:else}
-		<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row ">
-			{#each ownSources as source}
-				<div class="p-2 relative">
-					<div class="absolute -m-4">
-						{#if source?.type === 'gitlab'}
-							<svg viewBox="0 0 128 128" class="w-8">
-								<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 source?.type === 'github'}
-							<svg viewBox="0 0 128 128" class="w-8">
-								<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"
+		{:else}
+			<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row ">
+				{#each ownSources as source}
+					<div class="p-2 relative">
+						<div class="absolute -m-4">
+							{#if source?.type === 'gitlab'}
+								<svg viewBox="0 0 128 128" class="w-8">
+									<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
-										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}
+										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 source?.type === 'github'}
+								<svg viewBox="0 0 128 128" class="w-8">
+									<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}
+						</div>
+						<form on:submit|preventDefault={() => handleSubmit(source.id)}>
+							<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:border-red-500={source.gitlabApp && !source.gitlabAppId}
+								class:border-0={source.gitlabApp && !source.gitlabAppId}
+								class:border-l-4={source.gitlabApp && !source.gitlabAppId}
+							>
+								<div class="font-bold text-xl text-center truncate">{source.name}</div>
+								{#if source.gitlabApp && !source.gitlabAppId}
+									<div class="font-bold text-center truncate text-red-500 group-hover:text-white">
+										Configuration missing
+									</div>
+								{/if}
+							</button>
+						</form>
 					</div>
-					<form on:submit|preventDefault={() => handleSubmit(source.id)}>
-						<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:border-red-500={source.gitlabApp && !source.gitlabAppId}
-							class:border-0={source.gitlabApp && !source.gitlabAppId}
-							class:border-l-4={source.gitlabApp && !source.gitlabAppId}
-						>
-							<div class="font-bold text-xl text-center truncate">{source.name}</div>
-							{#if source.gitlabApp && !source.gitlabAppId}
-								<div class="font-bold text-center truncate text-red-500 group-hover:text-white">
-									Configuration missing
-								</div>
-							{/if}
-						</button>
-					</form>
-				</div>
-			{/each}
-		</div>
+				{/each}
+			</div>

-		{#if otherSources.length > 0 && $appSession.teamId === '0'}
-			<div class="px-6 pb-5 pt-10 text-xl font-bold">Other Sources</div>
+			{#if otherSources.length > 0 && $appSession.teamId === '0'}
+				<div class="px-6 pb-5 pt-10 text-xl font-bold">Other Sources</div>
+			{/if}
+			<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
+				{#each otherSources as source}
+					<div class="p-2">
+						<form on:submit|preventDefault={() => handleSubmit(source.id)}>
+							<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:border-red-500={source.gitlabApp && !source.gitlabAppId}
+								class:border-0={source.gitlabApp && !source.gitlabAppId}
+								class:border-l-4={source.gitlabApp && !source.gitlabAppId}
+							>
+								<div class="font-bold text-xl text-center truncate">{source.name}</div>
+								{#if source.gitlabApp && !source.gitlabAppId}
+									<div class="font-bold text-center truncate text-red-500 group-hover:text-white">
+										{$t('application.configuration.configuration_missing')}
+									</div>
+								{/if}
+							</button>
+						</form>
+					</div>
+				{/each}
+			</div>
 		{/if}
-		<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
-			{#each otherSources as source}
-				<div class="p-2">
-					<form on:submit|preventDefault={() => handleSubmit(source.id)}>
-						<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:border-red-500={source.gitlabApp && !source.gitlabAppId}
-							class:border-0={source.gitlabApp && !source.gitlabAppId}
-							class:border-l-4={source.gitlabApp && !source.gitlabAppId}
-						>
-							<div class="font-bold text-xl text-center truncate">{source.name}</div>
-							{#if source.gitlabApp && !source.gitlabAppId}
-								<div class="font-bold text-center truncate text-red-500 group-hover:text-white">
-									{$t('application.configuration.configuration_missing')}
-								</div>
-							{/if}
-						</button>
-					</form>
-				</div>
-			{/each}
-		</div>
-	{/if}
+	</div>
+	<div class="flex items-center">
+		<div class="title py-4">Public Repository</div>
+		<DocLink url="https://docs.coollabs.io/coolify/applications/#public-repository" />
+	</div>
+	<PublicRepository />
 </div>
--- a/apps/ui/src/routes/applications/[id]/index.svelte
+++ b/apps/ui/src/routes/applications/[id]/index.svelte
@@ -5,7 +5,8 @@
 			if (stuff?.application?.id) {
 				return {
 					props: {
-						application: stuff.application
+						application: stuff.application,
+						settings: stuff.settings
 					}
 				};
 			}
@@ -26,22 +27,32 @@

 <script lang="ts">
 	export let application: any;
+	export let settings: any;
 	import { page } from '$app/stores';
 	import { onDestroy, onMount } from 'svelte';
 	import Select from 'svelte-select';
-
-	import Explainer from '$lib/components/Explainer.svelte';
-	import { toast } from '@zerodevx/svelte-toast';
 	import { get, post } from '$lib/api';
 	import cuid from 'cuid';
-	import { browser } from '$app/env';
-	import { appSession, disabledButton, setLocation, status } from '$lib/store';
+	import {
+		addToast,
+		appSession,
+		checkIfDeploymentEnabledApplications,
+		setLocation,
+		status,
+		isDeploymentEnabled,
+		features
+	} from '$lib/store';
 	import { t } from '$lib/translations';
 	import { errorNotification, getDomain, notNodeDeployments, staticDeployments } from '$lib/common';
-	import Setting from './_Setting.svelte';
+	import Setting from '$lib/components/Setting.svelte';
+	import Tooltip from '$lib/components/Tooltip.svelte';
+	import Explainer from '$lib/components/Explainer.svelte';
+	import { goto } from '$app/navigation';
+
 	const { id } = $page.params;

-	$: isDisabled = !$appSession.isAdmin || $status.application.isRunning || $status.application.initialLoading;
+	$: isDisabled =
+		!$appSession.isAdmin || $status.application.isRunning || $status.application.initialLoading;

 	let domainEl: HTMLInputElement;

@@ -60,7 +71,10 @@
 	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;

+	let baseDatabaseBranch: any = application?.connectedDatabase?.hostedDatabaseDBName || null;
 	let nonWWWDomain = application.fqdn && getDomain(application.fqdn).replace(/^www\./, '');
 	let isNonWWWDomainOK = false;
 	let isWWWDomainOK = false;
@@ -80,7 +94,7 @@
 		}
 	];
 	function containerClass() {
-		return 'text-white border border-dashed border-coolgray-300 bg-transparent font-thin px-0';
+		return 'text-white bg-transparent font-thin px-0';
 	}

 	async function getUsage() {
@@ -99,7 +113,7 @@
 			application.fqdn = `http://${cuid()}.demo.coolify.io`;
 			await handleSubmit();
 		}
-		domainEl.focus();
+		// !isBot && domainEl.focus();
 		await getUsage();
 		usageInterval = setInterval(async () => {
 			await getUsage();
@@ -111,10 +125,33 @@
 			buildPack: application.buildPack,
 			deploymentType: application.deploymentType
 		});
-		application = {
-			...application,
-			...data
-		};
+		const baseImageCorrect = data.baseImages.filter(
+			(image: any) => image.value === application.baseImage
+		);
+		if (baseImageCorrect.length === 0) {
+			application.baseImage = data.baseImage;
+		}
+		application.baseImages = data.baseImages;
+
+		const baseBuildImageCorrect = data.baseBuildImages.filter(
+			(image: any) => image.value === application.baseBuildImage
+		);
+		if (baseBuildImageCorrect.length === 0) {
+			application.baseBuildImage = data.baseBuildImage;
+		}
+		application.baseBuildImages = data.baseBuildImages;
+		if (application.deploymentType === 'static' && application.port !== '80') {
+			application.port = data.port;
+		}
+		if (application.deploymentType === 'node' && application.port === '80') {
+			application.port = data.port;
+		}
+		if (application.deploymentType === 'static' && !application.publishDirectory) {
+			application.publishDirectory = data.publishDirectory;
+		}
+		if (application.deploymentType === 'node' && application.publishDirectory === 'out') {
+			application.publishDirectory = data.publishDirectory;
+		}
 	}
 	async function changeSettings(name: any) {
 		if (name === 'debug') {
@@ -129,16 +166,30 @@
 		if (name === 'autodeploy') {
 			autodeploy = !autodeploy;
 		}
+		if (name === 'isBot') {
+			if ($status.application.isRunning) return;
+			isBot = !isBot;
+			application.settings.isBot = isBot;
+			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 toast.push($t('application.settings_saved'));
+			return addToast({
+				message: $t('application.settings_saved'),
+				type: 'success'
+			});
 		} catch (error) {
 			if (name === 'debug') {
 				debug = !debug;
@@ -152,29 +203,43 @@
 			if (name === 'autodeploy') {
 				autodeploy = !autodeploy;
 			}
+			if (name === 'isBot') {
+				isBot = !isBot;
+			}
+			if (name === 'isDBBranching') {
+				isDBBranching = !isDBBranching;
+			}
 			return errorNotification(error);
+		} finally {
+			$isDeploymentEnabled = checkIfDeploymentEnabledApplications($appSession.isAdmin, application);
 		}
 	}
 	async function handleSubmit() {
-		if (loading || !application.fqdn) return;
+		if (loading) return;
 		loading = true;
 		try {
 			nonWWWDomain = application.fqdn && getDomain(application.fqdn).replace(/^www\./, '');
+			console.log({debug: nonWWWDomain})
 			if (application.deploymentType)
 				application.deploymentType = application.deploymentType.toLowerCase();
-			await post(`/applications/${id}/check`, {
-				fqdn: application.fqdn,
-				forceSave,
-				dualCerts,
-				exposePort: application.exposePort
-			});
-			await post(`/applications/${id}`, { ...application });
-			setLocation(application)
-			$disabledButton = false;
+			!isBot &&
+				(await post(`/applications/${id}/check`, {
+					fqdn: application.fqdn,
+					forceSave,
+					dualCerts,
+					exposePort: application.exposePort
+				}));
+			await post(`/applications/${id}`, { ...application, baseDatabaseBranch });
+			setLocation(application, settings);
+			$isDeploymentEnabled = checkIfDeploymentEnabledApplications($appSession.isAdmin, application);
+
 			forceSave = false;
-			return toast.push('Configurations saved.');
+
+			addToast({
+				message: 'Configuration saved.',
+				type: 'success'
+			});
 		} catch (error) {
-			console.log(error);
 			//@ts-ignore
 			if (error?.message.startsWith($t('application.dns_not_set_partial_error'))) {
 				forceSave = true;
@@ -215,7 +280,10 @@
 	async function isDNSValid(domain: any, isWWW: any) {
 		try {
 			await get(`/applications/${id}/check?domain=${domain}`);
-			toast.push('DNS configuration is valid.');
+			addToast({
+				message: 'DNS configuration is valid.',
+				type: 'success'
+			});
 			isWWW ? (isWWWDomainOK = true) : (isNonWWWDomainOK = true);
 			return true;
 		} catch (error) {
@@ -235,6 +303,7 @@
 	</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"
@@ -275,34 +344,27 @@
 				</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="mx-auto">
-		<dl class="relative mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
-			<div class="overflow-hidden rounded px-4 py-5 text-center sm:p-6 sm:text-left">
-				<dt class=" text-sm font-medium text-white">Used Memory / Memory Limit</dt>
-				<dd class="mt-1 text-xl font-semibold text-white">
-					{usage?.MemUsage}
-				</dd>
-			</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="overflow-hidden rounded px-4 py-5 text-center sm:p-6 sm:text-left">
-				<dt class="truncate text-sm font-medium text-white">Used CPU</dt>
-				<dd class="mt-1 text-xl font-semibold text-white ">
-					{usage?.CPUPerc}
-				</dd>
-			</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="overflow-hidden rounded px-4 py-5 text-center sm:p-6 sm:text-left">
-				<dt class="truncate text-sm font-medium text-white">Network IO</dt>
-				<dd class="mt-1 text-xl font-semibold text-white ">
-					{usage?.NetIO}
-				</dd>
-			</div>
-		</dl>
+		<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">
@@ -312,83 +374,83 @@
 			<div class="title">{$t('general')}</div>
 			{#if $appSession.isAdmin}
 				<button
+					class="btn btn-sm"
 					type="submit"
-					class:bg-green-600={!loading}
+					class:bg-applications={!loading}
+					class:loading
 					class:bg-orange-600={forceSave}
-					class:hover:bg-green-500={!loading}
 					class:hover:bg-orange-400={forceSave}
-					disabled={loading}
-					>{loading
-						? $t('forms.saving')
-						: forceSave
-						? $t('forms.confirm_continue')
-						: $t('forms.save')}</button
+					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
-				/>
+				<input name="name" id="name" bind:value={application.name} required />
 			</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
 				>
-				<a
-					href={!isDisabled
-						? `/applications/${id}/configuration/source?from=/applications/${id}`
-						: ''}
-					class="no-underline"
-					><input
+				{#if isDisabled || application.settings.isPublicRepository}
+					<input
+						disabled={isDisabled || application.settings.isPublicRepository}
 						value={application.gitSource.name}
-						id="gitSource"
-						disabled
-						class="cursor-pointer hover:bg-coolgray-500"
-					/></a
-				>
+					/>
+				{: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"
+						/></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
 				>
-				<a
-					href={!isDisabled
-						? `/applications/${id}/configuration/repository?from=/applications/${id}&to=/applications/${id}/configuration/buildpack`
-						: ''}
-					class="no-underline"
-					><input
+				{#if isDisabled || application.settings.isPublicRepository}
+					<input
+						disabled={isDisabled || application.settings.isPublicRepository}
 						value="{application.repository}/{application.branch}"
-						id="repository"
-						disabled
-						class="cursor-pointer hover:bg-coolgray-500"
-					/></a
-				>
+					/>
+				{: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
 				>
-				<a
-					href={!isDisabled
-						? `/applications/${id}/configuration/buildpack?from=/applications/${id}`
-						: ''}
-					class="no-underline "
-				>
-					<input
-						value={application.buildPack}
-						id="buildPack"
-						disabled
-						class="cursor-pointer hover:bg-coolgray-500"
-					/></a
-				>
+				{#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 pb-8">
+			<div class="grid grid-cols-2 items-center">
 				<label for="destination" class="text-base font-bold text-stone-100"
 					>{$t('application.destination')}</label
 				>
@@ -402,10 +464,15 @@
 				</div>
 			</div>
 			{#if application.buildCommand || application.buildPack === 'rust' || application.buildPack === 'laravel'}
-				<div class="grid grid-cols-2 items-center pb-8">
+				<div class="grid grid-cols-2 items-center">
 					<label for="baseBuildImage" class="text-base font-bold text-stone-100"
-						>{$t('application.base_build_image')}</label
-					>
+						>{$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
@@ -419,17 +486,13 @@
 							isClearable={false}
 						/>
 					</div>
-					{#if application.buildPack === 'laravel'}
-						<Explainer text="For building frontend assets with webpack." />
-					{:else}
-						<Explainer text={$t('application.base_build_image_explainer')} />
-					{/if}
 				</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')}</label
+						>{$t('application.base_image')}
+						<Explainer explanation={'Image that will be used for the deployment.'} /></label
 					>
 					<div class="custom-select-wrapper">
 						<Select
@@ -443,13 +506,15 @@
 							isClearable={false}
 						/>
 					</div>
-					<Explainer text={$t('application.base_image_explainer')} />
 				</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</label
+						>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
@@ -463,87 +528,131 @@
 							isClearable={false}
 						/>
 					</div>
-					<Explainer
-						text="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."
-					/>
 				</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" 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">
-				<div class="flex-col">
-					<label for="fqdn" class="pt-2 text-base font-bold text-stone-100"
-						>{$t('application.url_fqdn')}</label
-					>
-					{#if browser && window.location.hostname === 'demo.coolify.io'}
-						<Explainer
-							text="<span class='text-white font-bold'>You can use the predefined random url name or enter your own domain name.</span>"
-						/>
-					{/if}
-					<Explainer text={$t('application.https_explainer')} />
-				</div>
-				<div>
-					<input
-						readonly={isDisabled}
-						disabled={isDisabled}
-						bind:this={domainEl}
-						name="fqdn"
-						id="fqdn"
-						required
-						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="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="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="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="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 class="grid grid-cols-2 items-center pb-8">
+			<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={$t('application.ssl_explainer')}
+					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>
+						<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"
+						/>
+						{#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(`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>
+			{/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>
@@ -595,7 +704,10 @@
 			{/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')}</label>
+					<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}
@@ -606,8 +718,12 @@
 					/>
 				</div>
 			{/if}
-			<div class="grid grid-cols-2 items-center">
-				<label for="exposePort" class="text-base font-bold text-stone-100">Exposed Port</label>
+			<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}
@@ -616,12 +732,9 @@
 					bind:value={application.exposePort}
 					placeholder="12345"
 				/>
-				<Explainer
-					text={'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.'}
-				/>
 			</div>
 			{#if !notNodeDeployments.includes(application.buildPack)}
-				<div class="grid grid-cols-2 items-center pt-4">
+				<div class="grid grid-cols-2 items-center">
 					<label for="installCommand" class="text-base font-bold text-stone-100"
 						>{$t('application.install_command')}</label
 					>
@@ -647,7 +760,7 @@
 						placeholder="{$t('forms.default')}: yarn build"
 					/>
 				</div>
-				<div class="grid grid-cols-2 items-center">
+				<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
 					>
@@ -664,7 +777,9 @@
 			{#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</label
+						>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}
@@ -674,9 +789,6 @@
 						bind:value={application.dockerFileLocation}
 						placeholder="default: /Dockerfile"
 					/>
-					<Explainer
-						text="Should be absolute path, like <span class='text-green-500 font-bold'>/data/Dockerfile</span> or <span class='text-green-500 font-bold'>/Dockerfile.</span>"
-					/>
 				</div>
 			{/if}
 			{#if application.buildPack === 'deno'}
@@ -692,7 +804,11 @@
 					/>
 				</div>
 				<div class="grid grid-cols-2 items-center">
-					<label for="denoOptions" class="text-base font-bold text-stone-100">Arguments</label>
+					<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}
@@ -701,18 +817,17 @@
 						bind:value={application.denoOptions}
 						placeholder="eg: --allow-net --allow-hrtime --config path/to/file.json"
 					/>
-					<Explainer
-						text="List of arguments to pass to <span class='text-green-500 font-bold'>deno run</span> command. Could include permissions, configurations files, etc."
-					/>
 				</div>
 			{/if}
-			{#if application.buildPack !== 'laravel'}
+			{#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')}</label
+							>{$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
 						>
-						<Explainer text={$t('application.directory_to_use_explainer')} />
 					</div>
 					<input
 						disabled={isDisabled}
@@ -728,9 +843,11 @@
 				<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')}</label
+							>{$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
 						>
-						<Explainer text={$t('application.publish_directory_explainer')} />
 					</div>

 					<input
@@ -750,26 +867,33 @@
 		<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
-				isCenter={false}
-				bind:setting={autodeploy}
-				on:click={() => changeSettings('autodeploy')}
-				title={$t('application.enable_automatic_deployment')}
-				description={$t('application.enable_auto_deploy_webhooks')}
-			/>
-		</div>
-		<div class="grid grid-cols-2 items-center">
-			<Setting
-				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>
-		<div class="grid grid-cols-2 items-center">
-			<Setting
+				id="debug"
 				isCenter={false}
 				bind:setting={debug}
 				on:click={() => changeSettings('debug')}
--- a/apps/ui/src/routes/applications/[id]/logs/_BuildLog.svelte
+++ b/apps/ui/src/routes/applications/[id]/logs/_BuildLog.svelte
@@ -6,14 +6,13 @@

 	import { page } from '$app/stores';

-	import Loading from '$lib/components/Loading.svelte';
 	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';

 	let logs: any = [];
-	let loading = true;
 	let currentStatus: any;
 	let streamInterval: any;
 	let followingBuild: any;
@@ -46,7 +45,6 @@
 			logs = logs.concat(
 				responseLogs.map((log: any) => ({ ...log, line: cleanAnsiCodes(log.line) }))
 			);
-			loading = false;
 			streamInterval = setInterval(async () => {
 				if (status !== 'running' && status !== 'queued') {
 					clearInterval(streamInterval);
@@ -63,13 +61,12 @@
 					logs = logs.concat(
 						data.logs.map((log: any) => ({ ...log, line: cleanAnsiCodes(log.line) }))
 					);
-					dispatch('updateBuildStatus', { status });
+					dispatch('updateBuildStatus', { status, took: data.took });
 				} catch (error) {
 					return errorNotification(error);
 				}
 			}, 1000);
 		} catch (error) {
-			console.log(error);
 			return errorNotification(error);
 		}
 	}
@@ -82,7 +79,6 @@
 				applicationId: id
 			});
 		} catch (error) {
-			console.log(error);
 			return errorNotification(error);
 		}
 	}
@@ -96,84 +92,82 @@
 	});
 </script>

-{#if loading}
-	<Loading />
-{:else}
-	<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-1 mx-1">
+<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-linkhover:text-green-500 hover:bg-coolgray-500"
+				class:text-green-500={followingBuild}
+			>
+				<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
-					on:click={followBuild}
-					class="bg-transparent hover:text-green-500 hover:bg-coolgray-500"
-					data-tooltip="Follow logs"
-					class:text-green-500={followingBuild}
+					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"
 				>
-					<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>
+					{#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>
-				{#if currentStatus === 'running'}
-					<button
-						on:click={cancelBuild}
-						class:animation-spin={cancelInprogress}
-						class="bg-transparent hover:text-red-500 hover:bg-coolgray-500"
-						data-tooltip="Cancel build"
-					>
-						{#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>
-				{/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}
-				>
-					{#each logs as log}
-						<div>{log.line + '\n'}</div>
-					{/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>
+				<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}
+			>
+				{#each logs as log}
+					<div>{log.line + '\n'}</div>
+				{/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>
 		{/if}
-	</div>
-{/if}
+	{/if}
+</div>
--- a/apps/ui/src/routes/applications/[id]/logs/build.svelte
+++ b/apps/ui/src/routes/applications/[id]/logs/build.svelte
@@ -28,17 +28,20 @@
 	import { get } from '$lib/api';
 	import { t } from '$lib/translations';
 	import { changeQueryParams, dateOptions, errorNotification } from '$lib/common';
+	import Tooltip from '$lib/components/Tooltip.svelte';

 	let buildId: any;

 	let skip = 0;
 	let noMoreBuilds = buildCount < 5 || buildCount <= skip;
+
+	let buildTook = 0;
 	const { id } = $page.params;
 	let preselectedBuildId = $page.url.searchParams.get('buildId');
 	if (preselectedBuildId) buildId = preselectedBuildId;

 	async function updateBuildStatus({ detail }: { detail: any }) {
-		const { status } = detail;
+		const { status, took } = detail;
 		if (status !== 'running') {
 			try {
 				const data = await get(`/applications/${id}/logs/build?buildId=${buildId}`);
@@ -58,6 +61,7 @@
 				if (build.id === buildId) build.status = status;
 				return build;
 			});
+			buildTook = took;
 		}
 	}
 	async function loadMoreBuilds() {
@@ -137,19 +141,18 @@
 		<div class="top-4 md:sticky">
 			{#each builds as build, index (build.id)}
 				<div
-					data-tooltip={new Intl.DateTimeFormat('default', dateOptions).format(
-						new Date(build.createdAt)
-					) + `\n${build.status}`}
+					id={`building-${build.id}`}
 					on:click={() => loadBuild(build.id)}
 					class:rounded-tr={index === 0}
 					class:rounded-br={index === builds.length - 1}
-					class="tooltip-top flex cursor-pointer items-center justify-center border-l-2  py-4 no-underline transition-all duration-100 hover:bg-coolgray-400 hover:shadow-xl "
+					class="flex cursor-pointer items-center justify-center border-l-2 py-4 no-underline transition-all duration-100 hover:bg-coolgray-400 hover:shadow-xl"
 					class:bg-coolgray-400={buildId === build.id}
 					class:border-red-500={build.status === 'failed'}
+					class:border-orange-500={build.status === 'canceled'}
 					class:border-green-500={build.status === 'success'}
 					class:border-yellow-500={build.status === 'running'}
 				>
-					<div class="flex-col px-2">
+					<div class="flex-col px-2 text-center min-w-[10rem]">
 						<div class="text-sm font-bold">
 							{build.branch || application.branch}
 						</div>
@@ -157,11 +160,14 @@
 							{build.type}
 						</div>
 					</div>
-					<div class="flex-1" />

 					<div class="w-48 text-center text-xs">
 						{#if build.status === 'running'}
 							<div class="font-bold">{$t('application.build.running')}</div>
+							<div>
+								Elapsed
+								<span class="font-bold">{buildTook}s</span>
+							</div>
 						{:else if build.status === 'queued'}
 							<div class="font-bold">{$t('application.build.queued')}</div>
 						{:else}
@@ -172,12 +178,16 @@
 						{/if}
 					</div>
 				</div>
+				<Tooltip triggeredBy={`#building-${build.id}`}
+					>{new Intl.DateTimeFormat('default', dateOptions).format(new Date(build.createdAt)) +
+						`\n${build.status}`}</Tooltip
+				>
 			{/each}
 		</div>
 		{#if !noMoreBuilds}
 			{#if buildCount > 5}
 				<div class="flex space-x-2">
-					<button disabled={noMoreBuilds} class="w-full" on:click={loadMoreBuilds}
+					<button disabled={noMoreBuilds} class=" btn btn-sm w-full" on:click={loadMoreBuilds}
 						>{$t('application.build.load_more')}</button
 					>
 				</div>
--- a/apps/ui/src/routes/applications/[id]/logs/index.svelte
+++ b/apps/ui/src/routes/applications/[id]/logs/index.svelte
@@ -5,6 +5,7 @@
 	import { errorNotification } from '$lib/common';
 	import LoadingLogs from '$lib/components/LoadingLogs.svelte';
 	import { onMount, onDestroy } from 'svelte';
+	import Tooltip from '$lib/components/Tooltip.svelte';

 	let application: any = {};
 	let logsLoading = false;
@@ -38,7 +39,6 @@
 				logs = data.logs;
 			}
 		} catch (error) {
-			console.log(error);
 			return errorNotification(error);
 		} finally {
 			logsLoading = false;
@@ -146,9 +146,9 @@
 			{/if}
 			<div class="flex justify-end sticky top-0 p-1 mx-1">
 				<button
+					id="follow"
 					on:click={followBuild}
-					class="bg-transparent"
-					data-tooltip="Follow logs"
+					class="bg-transparent btn btn-sm btn-link"
 					class:text-green-500={followingLogs}
 				>
 					<svg
@@ -168,6 +168,7 @@
 						<line x1="16" y1="12" x2="12" y2="16" />
 					</svg>
 				</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"
--- a/apps/ui/src/routes/applications/[id]/previews.svelte
+++ b/apps/ui/src/routes/applications/[id]/previews.svelte
@@ -21,13 +21,13 @@
 	import Secret from './_Secret.svelte';
 	import { get, post } from '$lib/api';
 	import { page } from '$app/stores';
-	import Explainer from '$lib/components/Explainer.svelte';
-	import { toast } from '@zerodevx/svelte-toast';
 	import { t } from '$lib/translations';
 	import { goto } from '$app/navigation';
 	import { errorNotification, getDomain } from '$lib/common';
 	import { onMount } from 'svelte';
 	import Loading from '$lib/components/Loading.svelte';
+	import { addToast } from '$lib/store';
+	import SimpleExplainer from '$lib/components/SimpleExplainer.svelte';

 	const { id } = $page.params;

@@ -59,7 +59,10 @@
 				pullmergeRequestId: container.pullmergeRequestId,
 				branch: container.branch
 			});
-			toast.push('Deployment queued');
+			addToast({
+				message: 'Deployment queued',
+				type: 'success'
+			});
 			if ($page.url.pathname.startsWith(`/applications/${id}/logs/build`)) {
 				return window.location.assign(`/applications/${id}/logs/build?buildId=${buildId}`);
 			} else {
@@ -142,7 +145,7 @@
 {:else}
 	<div class="mx-auto max-w-6xl px-6 pt-4">
 		<div class="flex justify-center py-4 text-center">
-			<Explainer
+			<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."
@@ -191,12 +194,14 @@
 						</div>
 					</a>
 					<div class="flex items-center justify-center">
-						<button class="bg-coollabs hover:bg-coollabs-100" on:click={() => redeploy(container)}
-							>{$t('application.preview.redeploy')}</button
+						<button
+							class="btn btn-sm bg-coollabs hover:bg-coollabs-100"
+							on:click={() => redeploy(container)}>{$t('application.preview.redeploy')}</button
 						>
 					</div>
 					<div class="flex items-center justify-center">
 						<button
+							class="btn btn-sm"
 							class:bg-red-600={!loading.removing}
 							class:hover:bg-red-500={!loading.removing}
 							disabled={loading.removing}
--- a/apps/ui/src/routes/applications/[id]/secrets.svelte
+++ b/apps/ui/src/routes/applications/[id]/secrets.svelte
@@ -27,7 +27,7 @@
 	import { t } from '$lib/translations';
 	import { get } from '$lib/api';
 	import { saveSecret } from './utils';
-	import { toast } from '@zerodevx/svelte-toast';
+	import { addToast } from '$lib/store';

 	const limit = pLimit(1);
 	const { id } = $page.params;
@@ -43,7 +43,8 @@
 		const batchSecretsPairs = eachValuePair
 			.filter((secret) => !secret.startsWith('#') && secret)
 			.map((secret) => {
-				const [name, value] = secret.split('=');
+				const [name, ...rest] = secret.split('=');
+				const value = rest.join('=');
 				const cleanValue = value?.replaceAll('"', '') || '';
 				return {
 					name,
@@ -59,7 +60,10 @@
 		);
 		batchSecrets = '';
 		await refreshSecrets();
-		toast.push('Secrets saved.');
+		addToast({
+			message: 'Secrets saved.',
+			type: 'success'
+		});
 	}
 </script>

@@ -147,9 +151,6 @@
 	<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="bg-green-600 hover:bg-green-500 disabled:text-white disabled:opacity-40"
-			type="submit">Batch add secrets</button
-		>
+		<button class="btn btn-sm bg-applications" type="submit">Batch add secrets</button>
 	</form>
 </div>
--- a/apps/ui/src/routes/applications/[id]/storages.svelte
+++ b/apps/ui/src/routes/applications/[id]/storages.svelte
@@ -24,7 +24,7 @@
 	import { page } from '$app/stores';
 	import Storage from './_Storage.svelte';
 	import { get } from '$lib/api';
-	import Explainer from '$lib/components/Explainer.svelte';
+	import SimpleExplainer from '$lib/components/SimpleExplainer.svelte';
 	import { t } from '$lib/translations';

 	const { id } = $page.params;
@@ -88,7 +88,7 @@

 <div class="mx-auto max-w-6xl rounded-xl px-6 pt-4">
 	<div class="flex justify-center py-4 text-center">
-		<Explainer customClass="w-full" text={$t('application.storage.persistent_storage_explainer')} />
+		<SimpleExplainer customClass="w-full" text={$t('application.storage.persistent_storage_explainer')} />
 	</div>
 	<table class="mx-auto border-separate text-left">
 		<thead>
--- a/apps/ui/src/routes/applications/[id]/utils.ts
+++ b/apps/ui/src/routes/applications/[id]/utils.ts
@@ -1,4 +1,3 @@
-import { toast } from '@zerodevx/svelte-toast';
 import { post } from '$lib/api';
 import { t } from '$lib/translations';
 import { errorNotification } from '$lib/common';
--- a/apps/ui/src/routes/applications/index.svelte
+++ b/apps/ui/src/routes/applications/index.svelte
@@ -26,24 +26,8 @@
 	import { t } from '$lib/translations';
 	import { getDomain } from '$lib/common';
 	import { appSession } from '$lib/store';
+	import ApplicationsIcons from '$lib/components/svg/applications/ApplicationIcons.svelte';

-	import Rust from '$lib/components/svg/applications/Rust.svelte';
-	import Nodejs from '$lib/components/svg/applications/Nodejs.svelte';
-	import React from '$lib/components/svg/applications/React.svelte';
-	import Svelte from '$lib/components/svg/applications/Svelte.svelte';
-	import Vuejs from '$lib/components/svg/applications/Vuejs.svelte';
-	import PHP from '$lib/components/svg/applications/PHP.svelte';
-	import Python from '$lib/components/svg/applications/Python.svelte';
-	import Static from '$lib/components/svg/applications/Static.svelte';
-	import Nestjs from '$lib/components/svg/applications/Nestjs.svelte';
-	import Nuxtjs from '$lib/components/svg/applications/Nuxtjs.svelte';
-	import Nextjs from '$lib/components/svg/applications/Nextjs.svelte';
-	import Gatsby from '$lib/components/svg/applications/Gatsby.svelte';
-	import Docker from '$lib/components/svg/applications/Docker.svelte';
-	import Astro from '$lib/components/svg/applications/Astro.svelte';
-	import Eleventy from '$lib/components/svg/applications/Eleventy.svelte';
-	import Deno from '$lib/components/svg/applications/Deno.svelte';
-	import Laravel from '$lib/components/svg/applications/Laravel.svelte';
 	ownApplications = applications.filter((application) => {
 		if (application.teams[0].id === $appSession.teamId) {
 			return application;
@@ -61,14 +45,11 @@
 </script>

 <div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl ">{$t('index.applications')}</div>
+	<div class="mr-4 text-2xl">{$t('index.applications')}</div>
 	{#if $appSession.isAdmin}
-		<button
-			on:click={newApplication}
-			class="add-icon cursor-pointer bg-green-600 hover:bg-green-500"
-		>
+		<button on:click={newApplication} class="btn btn-square btn-sm bg-applications">
 			<svg
-				class="w-6"
+				class="h-6 w-6"
 				xmlns="http://www.w3.org/2000/svg"
 				fill="none"
 				viewBox="0 0 24 24"
@@ -83,7 +64,7 @@
 		</button>
 	{/if}
 </div>
-<div class="flex-col justify-center">
+<div class="flex-col justify-center mt-10 pb-12 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>
@@ -96,41 +77,7 @@
 					<a href="/applications/{application.id}" class="p-2 no-underline">
 						<div class="box-selection group relative hover:bg-green-600">
 							{#if application.buildPack}
-								{#if application.buildPack.toLowerCase() === 'rust'}
-									<Rust />
-								{:else if application.buildPack.toLowerCase() === 'node'}
-									<Nodejs />
-								{:else if application.buildPack.toLowerCase() === 'react'}
-									<React />
-								{:else if application.buildPack.toLowerCase() === 'svelte'}
-									<Svelte />
-								{:else if application.buildPack.toLowerCase() === 'vuejs'}
-									<Vuejs />
-								{:else if application.buildPack.toLowerCase() === 'php'}
-									<PHP />
-								{:else if application.buildPack.toLowerCase() === 'python'}
-									<Python />
-								{:else if application.buildPack.toLowerCase() === 'static'}
-									<Static />
-								{:else if application.buildPack.toLowerCase() === 'nestjs'}
-									<Nestjs />
-								{:else if application.buildPack.toLowerCase() === 'nuxtjs'}
-									<Nuxtjs />
-								{:else if application.buildPack.toLowerCase() === 'nextjs'}
-									<Nextjs />
-								{:else if application.buildPack.toLowerCase() === 'gatsby'}
-									<Gatsby />
-								{:else if application.buildPack.toLowerCase() === 'docker'}
-									<Docker />
-								{:else if application.buildPack.toLowerCase() === 'astro'}
-									<Astro />
-								{:else if application.buildPack.toLowerCase() === 'eleventy'}
-									<Eleventy />
-								{:else if application.buildPack.toLowerCase() === 'deno'}
-									<Deno />
-								{:else if application.buildPack.toLowerCase() === 'laravel'}
-									<Laravel />
-								{/if}
+								<ApplicationsIcons {application} />
 							{/if}

 							<div class="truncate text-center text-xl font-bold">{application.name}</div>
@@ -140,6 +87,9 @@
 							{#if application.fqdn}
 								<div class="truncate text-center">{getDomain(application.fqdn) || ''}</div>
 							{/if}
+							{#if application.settings.isBot}
+								<div class="truncate text-center">BOT</div>
+							{/if}
 							{#if application.destinationDocker?.name}
 								<div class="truncate text-center">{application.destinationDocker.name}</div>
 							{/if}
@@ -151,7 +101,7 @@
 								<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
 									Destination Missing
 								</div>
-							{:else if !application.fqdn}
+							{:else if !application.fqdn && !application.settings.isBot}
 								<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
 									URL Missing
 								</div>
@@ -167,41 +117,7 @@
 						<a href="/applications/{application.id}" class="p-2 no-underline">
 							<div class="box-selection group relative hover:bg-green-600">
 								{#if application.buildPack}
-									{#if application.buildPack.toLowerCase() === 'rust'}
-										<Rust />
-									{:else if application.buildPack.toLowerCase() === 'node'}
-										<Nodejs />
-									{:else if application.buildPack.toLowerCase() === 'react'}
-										<React />
-									{:else if application.buildPack.toLowerCase() === 'svelte'}
-										<Svelte />
-									{:else if application.buildPack.toLowerCase() === 'vuejs'}
-										<Vuejs />
-									{:else if application.buildPack.toLowerCase() === 'php'}
-										<PHP />
-									{:else if application.buildPack.toLowerCase() === 'python'}
-										<Python />
-									{:else if application.buildPack.toLowerCase() === 'static'}
-										<Static />
-									{:else if application.buildPack.toLowerCase() === 'nestjs'}
-										<Nestjs />
-									{:else if application.buildPack.toLowerCase() === 'nuxtjs'}
-										<Nuxtjs />
-									{:else if application.buildPack.toLowerCase() === 'nextjs'}
-										<Nextjs />
-									{:else if application.buildPack.toLowerCase() === 'gatsby'}
-										<Gatsby />
-									{:else if application.buildPack.toLowerCase() === 'docker'}
-										<Docker />
-									{:else if application.buildPack.toLowerCase() === 'astro'}
-										<Astro />
-									{:else if application.buildPack.toLowerCase() === 'eleventy'}
-										<Eleventy />
-									{:else if application.buildPack.toLowerCase() === 'deno'}
-										<Deno />
-									{:else if application.buildPack.toLowerCase() === 'laravel'}
-										<Laravel />
-									{/if}
+									<ApplicationsIcons {application} />
 								{/if}

 								<div class="truncate text-center text-xl font-bold">{application.name}</div>
--- a/apps/ui/src/routes/databases/[id]/_Databases/_Databases.svelte
+++ b/apps/ui/src/routes/databases/[id]/_Databases/_Databases.svelte
@@ -14,10 +14,9 @@
 	import CouchDb from './_CouchDb.svelte';
 	import EdgeDB from './_EdgeDB.svelte';
 	import { post } from '$lib/api';
-	import { toast } from '@zerodevx/svelte-toast';
 	import { t } from '$lib/translations';
 	import { errorNotification } from '$lib/common';
-	import { appSession, status } from '$lib/store';
+	import { addToast, appSession, status } from '$lib/store';
 	import Explainer from '$lib/components/Explainer.svelte';

 	const { id } = $page.params;
@@ -62,7 +61,9 @@
 	}

 	async function changeSettings(name: any) {
-		if (publicLoading || !$status.database.isRunning) return;
+		if (name !== 'appendOnly') {
+			if (publicLoading || !$status.database.isRunning) return;
+		}
 		publicLoading = true;
 		let data = {
 			isPublic,
@@ -95,7 +96,10 @@
 			loading = true;
 			await post(`/databases/${id}`, { ...database, isRunning: $status.database.isRunning });
 			generateDbDetails();
-			toast.push('Configuration saved.');
+			addToast({
+				message: 'Configuration saved.',
+				type: 'success'
+			});
 		} catch (error) {
 			return errorNotification(error);
 		} finally {
@@ -111,9 +115,10 @@
 			{#if $appSession.isAdmin}
 				<button
 					type="submit"
-					class:bg-purple-600={!loading}
-					class:hover:bg-purple-500={!loading}
-					disabled={loading}>{loading ? $t('forms.saving') : $t('forms.save')}</button
+					class="btn btn-sm"
+					class:loading
+					class:bg-databases={!loading}
+					disabled={loading}>{$t('forms.save')}</button
 				>
 			{/if}
 		</div>
@@ -209,13 +214,13 @@
 			<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')}</label
+						>{$t('database.connection_string')}
+						{#if !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
 					>
-					{#if !isPublic && database.destinationDocker.remoteEngine}
-						<Explainer
-							text="You can only access the database with this URL if your application is deployed to the same Destination."
-						/>
-					{/if}
 				</div>
 				<CopyPasswordField
 					textarea={true}
@@ -236,6 +241,7 @@
 	<div class="px-10 pb-10">
 		<div class="grid grid-cols-2 items-center">
 			<Setting
+				id="isPublic"
 				loading={publicLoading}
 				bind:setting={isPublic}
 				on:click={() => changeSettings('isPublic')}
@@ -247,6 +253,8 @@
 		{#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')}
--- a/apps/ui/src/routes/databases/[id]/_Databases/_MariaDB.svelte
+++ b/apps/ui/src/routes/databases/[id]/_Databases/_MariaDB.svelte
@@ -2,8 +2,8 @@
 	export let database: any;
 	import { status } from '$lib/store';
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
-	import Explainer from '$lib/components/Explainer.svelte';
 	import { t } from '$lib/translations';
+	import Explainer from '$lib/components/Explainer.svelte';
 </script>

 <div class="flex space-x-1 py-5 font-bold">
@@ -37,7 +37,8 @@
 	</div>
 	<div class="grid grid-cols-2 items-center">
 		<label for="dbUserPassword" class="text-base font-bold text-stone-100"
-			>{$t('forms.password')}</label
+			>{$t('forms.password')}
+			<Explainer explanation="Could be changed while the database is running." /></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}
@@ -48,7 +49,6 @@
 			name="dbUserPassword"
 			bind:value={database.dbUserPassword}
 		/>
-		<Explainer text="Could be changed while the database is running." />
 	</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>
@@ -63,7 +63,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
+			>{$t('forms.roots_password')} <Explainer explanation="Could be changed while the database is running." /></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}
@@ -74,6 +74,5 @@
 			name="rootUserPassword"
 			bind:value={database.rootUserPassword}
 		/>
-		<Explainer text="Could be changed while the database is running." />
 	</div>
 </div>
--- a/apps/ui/src/routes/databases/[id]/_Databases/_MongoDB.svelte
+++ b/apps/ui/src/routes/databases/[id]/_Databases/_MongoDB.svelte
@@ -2,8 +2,8 @@
 	export let database: any;
 	import { status } from '$lib/store';
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
-	import Explainer from '$lib/components/Explainer.svelte';
 	import { t } from '$lib/translations';
+	import Explainer from '$lib/components/Explainer.svelte';
 </script>

 <div class="flex space-x-1 py-5 font-bold">
@@ -23,7 +23,8 @@
 	</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
+			>{$t('forms.roots_password')}
+			<Explainer explanation="Could be changed while the database is running." /></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}
@@ -34,6 +35,5 @@
 			name="rootUserPassword"
 			bind:value={database.rootUserPassword}
 		/>
-		<Explainer text="Could be changed while the database is running." />
 	</div>
 </div>
--- a/apps/ui/src/routes/databases/[id]/_Databases/_MySQL.svelte
+++ b/apps/ui/src/routes/databases/[id]/_Databases/_MySQL.svelte
@@ -2,8 +2,8 @@
 	export let database: any;
 	import { status } from '$lib/store';
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
-	import Explainer from '$lib/components/Explainer.svelte';
 	import { t } from '$lib/translations';
+	import Explainer from '$lib/components/Explainer.svelte';
 </script>

 <div class="flex space-x-1 py-5 font-bold">
@@ -37,7 +37,8 @@
 	</div>
 	<div class="grid grid-cols-2 items-center">
 		<label for="dbUserPassword" class="text-base font-bold text-stone-100"
-			>{$t('forms.password')}</label
+			>{$t('forms.password')}
+			<Explainer explanation="Could be changed while the database is running." /></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}
@@ -48,7 +49,6 @@
 			name="dbUserPassword"
 			bind:value={database.dbUserPassword}
 		/>
-		<Explainer text="Could be changed while the database is running." />
 	</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>
@@ -63,7 +63,8 @@
 	</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
+			>{$t('forms.roots_password')}
+			<Explainer explanation="Could be changed while the database is running." /></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}
@@ -74,6 +75,5 @@
 			name="rootUserPassword"
 			bind:value={database.rootUserPassword}
 		/>
-		<Explainer text="Could be changed while the database is running." />
 	</div>
 </div>
--- a/apps/ui/src/routes/databases/[id]/_Databases/_PostgreSQL.svelte
+++ b/apps/ui/src/routes/databases/[id]/_Databases/_PostgreSQL.svelte
@@ -2,8 +2,8 @@
 	export let database: any;
 	import { status } from '$lib/store';
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
-	import Explainer from '$lib/components/Explainer.svelte';
 	import { t } from '$lib/translations';
+	import Explainer from '$lib/components/Explainer.svelte';
 </script>

 <div class="flex space-x-1 py-5 font-bold">
@@ -26,7 +26,9 @@
 	</div>
 	<div class="grid grid-cols-2 items-center">
 		<label for="rootUser" class="text-base font-bold text-stone-100"
-			>Root (postgres) User Password</label
+			>Postgres User Password <Explainer
+				explanation="Could be changed while the database is running."
+			/></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}
@@ -37,7 +39,6 @@
 			name="rootUserPassword"
 			bind:value={database.rootUserPassword}
 		/>
-		<Explainer text="Could be changed while the database is running." />
 	</div>
 	<div class="grid grid-cols-2 items-center">
 		<label for="dbUser" class="text-base font-bold text-stone-100">{$t('forms.user')}</label>
@@ -52,7 +53,8 @@
 	</div>
 	<div class="grid grid-cols-2 items-center">
 		<label for="dbUserPassword" class="text-base font-bold text-stone-100"
-			>{$t('forms.password')}</label
+			>{$t('forms.password')}
+			<Explainer explanation="Could be changed while the database is running." /></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}
@@ -63,6 +65,5 @@
 			name="dbUserPassword"
 			bind:value={database.dbUserPassword}
 		/>
-		<Explainer text="Could be changed while the database is running." />
 	</div>
 </div>
--- a/apps/ui/src/routes/databases/[id]/_Databases/_Redis.svelte
+++ b/apps/ui/src/routes/databases/[id]/_Databases/_Redis.svelte
@@ -2,8 +2,8 @@
 	export let database: any;
 	import { status } from '$lib/store';
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
-	import Explainer from '$lib/components/Explainer.svelte';
 	import { t } from '$lib/translations';
+	import Explainer from '$lib/components/Explainer.svelte';
 </script>

 <div class="flex space-x-1 py-5 font-bold">
@@ -12,7 +12,8 @@
 <div class="space-y-2 px-10">
 	<div class="grid grid-cols-2 items-center">
 		<label for="dbUserPassword" class="text-base font-bold text-stone-100"
-			>{$t('forms.password')}</label
+			>{$t('forms.password')}
+			<Explainer explanation="Could be changed while the database is running." /></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}
@@ -23,6 +24,5 @@
 			name="dbUserPassword"
 			bind:value={database.dbUserPassword}
 		/>
-		<Explainer text="Could be changed while the database is running." />
 	</div>
 </div>
--- a/apps/ui/src/routes/databases/[id]/__layout.svelte
+++ b/apps/ui/src/routes/databases/[id]/__layout.svelte
@@ -60,48 +60,56 @@
 	import { errorNotification, handlerNotFoundLoad } from '$lib/common';
 	import { appSession, status, disabledButton } from '$lib/store';
 	import DeleteIcon from '$lib/components/DeleteIcon.svelte';
-	import Loading from '$lib/components/Loading.svelte';
 	import { onDestroy, onMount } from 'svelte';
+	import Tooltip from '$lib/components/Tooltip.svelte';
 	const { id } = $page.params;

-	let loading = false;
 	let statusInterval: any = false;
+	let forceDelete = false;

 	$disabledButton = !$appSession.isAdmin;

-	async function deleteDatabase() {
+	async function deleteDatabase(force: boolean) {
 		const sure = confirm(`Are you sure you would like to delete '${database.name}'?`);
 		if (sure) {
-			loading = true;
+			$status.database.initialLoading = true;
 			try {
-				await del(`/databases/${database.id}`, { id: database.id });
+				await del(`/databases/${database.id}`, { id: database.id, force });
 				return await goto('/databases');
 			} catch (error) {
 				return errorNotification(error);
 			} finally {
-				loading = false;
+				$status.database.initialLoading = false;
 			}
 		}
 	}
 	async function stopDatabase() {
 		const sure = confirm($t('database.confirm_stop', { name: database.name }));
 		if (sure) {
-			loading = true;
+			$status.database.initialLoading = true;
+			$status.database.loading = true;
 			try {
 				await post(`/databases/${database.id}/stop`, {});
-				return window.location.reload();
 			} catch (error) {
 				return errorNotification(error);
+			} finally {
+				$status.database.initialLoading = false;
+				$status.database.loading = false;
+				await getStatus();
 			}
 		}
 	}
 	async function startDatabase() {
-		loading = true;
+		$status.database.initialLoading = true;
+		$status.database.loading = true;
 		try {
 			await post(`/databases/${database.id}/start`, {});
-			return window.location.reload();
 		} catch (error) {
 			return errorNotification(error);
+		} finally {
+			$status.database.initialLoading = false;
+			$status.database.loading = false;
+			await getStatus();
 		}
 	}
 	async function getStatus() {
@@ -114,6 +122,9 @@
 	}
 	onDestroy(() => {
 		$status.database.initialLoading = true;
+		$status.database.isRunning = false;
+		$status.database.isExited = false;
+		$status.database.loading = false;
 		clearInterval(statusInterval);
 	});
 	onMount(async () => {
@@ -137,123 +148,37 @@

 {#if id !== 'new'}
 	<nav class="nav-side">
-		{#if loading}
-			<Loading fullscreen cover />
-		{:else}
-			{#if database.type && database.destinationDockerId && database.version && database.defaultDatabase}
-				{#if $status.database.isExited}
-					<a
-						href={!$disabledButton ? `/databases/${id}/logs` : null}
-						class=" icons bg-transparent tooltip-bottom text-sm flex items-center text-red-500 tooltip-red-500"
-						data-tooltip="Service exited with an error!"
-						sveltekit:prefetch
+		{#if database.type && database.destinationDockerId && database.version && database.defaultDatabase}
+			{#if $status.database.isExited}
+				<a
+					id="exited"
+					href={!$disabledButton ? `/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"
 					>
-						<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>
-				{/if}
-				{#if $status.database.initialLoading}
-					<button
-						class="icons tooltip-bottom 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.database.isRunning}
-					<button
-						on:click={stopDatabase}
-						title={$t('database.stop_database')}
-						type="submit"
-						disabled={!$appSession.isAdmin}
-						class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2 text-red-500"
-						data-tooltip={$appSession.isAdmin
-							? $t('database.stop_database')
-							: $t('database.permission_denied_stop_database')}
-					>
-						<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>
-				{:else}
-					<button
-						on:click={startDatabase}
-						title={$t('database.start_database')}
-						type="submit"
-						disabled={!$appSession.isAdmin}
-						class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2 text-green-500"
-						data-tooltip={$appSession.isAdmin
-							? $t('database.start_database')
-							: $t('database.permission_denied_start_database')}
-						><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>
-				{/if}
+						<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}
-			<div class="border border-stone-700 h-8" />
-			<a
-				href="/databases/{id}"
-				sveltekit:prefetch
-				class="hover:text-yellow-500 rounded"
-				class:text-yellow-500={$page.url.pathname === `/databases/${id}`}
-				class:bg-coolgray-500={$page.url.pathname === `/databases/${id}`}
-			>
+			{#if $status.database.initialLoading}
 				<button
-					title={$t('application.configurations')}
-					class="icons bg-transparent tooltip-bottom text-sm disabled:text-red-500"
-					data-tooltip={$t('application.configurations')}
+					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"
@@ -266,35 +191,25 @@
 						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
-			>
-			<div class="border border-stone-700 h-8" />
-			<a
-				href={$status.database.isRunning ? `/databases/${id}/logs` : null}
-				sveltekit:prefetch
-				class="hover:text-pink-500 rounded"
-				class:text-pink-500={$page.url.pathname === `/databases/${id}/logs`}
-				class:bg-coolgray-500={$page.url.pathname === `/databases/${id}/logs`}
-			>
+						<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
-					title={$t('database.logs')}
-					disabled={!$status.database.isRunning}
-					class="icons bg-transparent tooltip-bottom text-sm"
-					data-tooltip={$t('database.logs')}
+					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="h-6 w-6"
+						class="w-6 h-6"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
@@ -303,26 +218,120 @@
 						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
-			>
+						<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
+			id="configuration"
+			href="/databases/{id}"
+			sveltekit:prefetch
+			class="hover:text-yellow-500 rounded"
+			class:text-yellow-500={$page.url.pathname === `/databases/${id}`}
+			class:bg-coolgray-500={$page.url.pathname === `/databases/${id}`}
+		>
+			<button class="icons bg-transparent m text-sm disabled:text-red-500">
+				<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>
+		<div class="border border-stone-700 h-8" />
+		<a
+			id="databaselogs"
+			href={$status.database.isRunning ? `/databases/${id}/logs` : null}
+			sveltekit:prefetch
+			class="hover:text-pink-500 rounded"
+			class:text-pink-500={$page.url.pathname === `/databases/${id}/logs`}
+			class:bg-coolgray-500={$page.url.pathname === `/databases/${id}/logs`}
+		>
+			<button disabled={!$status.database.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="#databaselogs">{'Logs'}</Tooltip>
+		{#if forceDelete}
 			<button
-				on:click={deleteDatabase}
-				title={$t('database.delete_database')}
+				on:click={() => deleteDatabase(true)}
 				type="submit"
 				disabled={!$appSession.isAdmin}
 				class:hover:text-red-500={$appSession.isAdmin}
-				class="icons bg-transparent tooltip-bottom text-sm"
-				data-tooltip={$appSession.isAdmin
-					? $t('database.delete_database')
-					: $t('database.permission_denied_delete_database')}><DeleteIcon /></button
+				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>
 	</nav>
 {/if}
 <slot />
--- a/apps/ui/src/routes/databases/[id]/configuration/destination.svelte
+++ b/apps/ui/src/routes/databases/[id]/configuration/destination.svelte
@@ -30,6 +30,7 @@
 	import { get, post } from '$lib/api';
 	import { t } from '$lib/translations';
 	import { errorNotification } from '$lib/common';
+	import { onMount } from 'svelte';

 	const { id } = $page.params;
 	const from = $page.url.searchParams.get('from');
@@ -45,6 +46,11 @@
 			return errorNotification(error);
 		}
 	}
+	onMount(async () => {
+		if (destinations.length === 1) {
+			await handleSubmit(destinations[0].id);
+		}
+	});
 </script>

 <div class="flex space-x-1 p-6 font-bold">
@@ -55,9 +61,11 @@
 <div class="flex justify-center">
 	{#if !destinations || destinations.length === 0}
 		<div class="flex-col">
-			<div class="pb-2 text-center font-bold">{$t('application.configuration.no_configurable_destination')}</div>
+			<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"
--- a/apps/ui/src/routes/databases/[id]/configuration/type.svelte
+++ b/apps/ui/src/routes/databases/[id]/configuration/type.svelte
@@ -31,19 +31,12 @@

 	const { id } = $page.params;
 	const from = $page.url.searchParams.get('from');
-
-	import Clickhouse from '$lib/components/svg/databases/Clickhouse.svelte';
-	import CouchDB from '$lib/components/svg/databases/CouchDB.svelte';
-	import MongoDB from '$lib/components/svg/databases/MongoDB.svelte';
-	import MariaDB from '$lib/components/svg/databases/MariaDB.svelte';
-	import MySQL from '$lib/components/svg/databases/MySQL.svelte';
-	import PostgreSQL from '$lib/components/svg/databases/PostgreSQL.svelte';
-	import Redis from '$lib/components/svg/databases/Redis.svelte';
-	import EdgeDb from '$lib/components/svg/databases/EdgeDB.svelte';
+  
 	import { goto } from '$app/navigation';
 	import { get, post } from '$lib/api';
 	import { t } from '$lib/translations';
 	import { errorNotification } from '$lib/common';
+	import DatabaseIcons from '$lib/components/svg/databases/DatabaseIcons.svelte';
 	async function handleSubmit(type: any) {
 		try {
 			await post(`/databases/${id}/configuration/type`, { type });
@@ -63,23 +56,8 @@
 		<div class="p-2">
 			<form on:submit|preventDefault={() => handleSubmit(type.name)}>
 				<button type="submit" class="box-selection relative text-xl font-bold hover:bg-purple-700">
-					{#if type.name === 'clickhouse'}
-						<Clickhouse isAbsolute />
-					{:else if type.name === 'couchdb'}
-						<CouchDB isAbsolute />
-					{:else if type.name === 'mongodb'}
-						<MongoDB isAbsolute />
-					{:else if type.name === 'mariadb'}
-						<MariaDB isAbsolute />
-					{:else if type.name === 'mysql'}
-						<MySQL isAbsolute />
-					{:else if type.name === 'postgresql'}
-						<PostgreSQL isAbsolute />
-					{:else if type.name === 'redis'}
-						<Redis isAbsolute />
-					{:else if type.name === 'edgedb'}
-						<EdgeDb isAbsolute />
-					{/if}{type.fancyName}
+          <DatabaseIcons type={type.name} isAbsolute={true} />
+					{type.fancyName}
 				</button>
 			</form>
 		</div>
--- a/apps/ui/src/routes/databases/[id]/index.svelte
+++ b/apps/ui/src/routes/databases/[id]/index.svelte
@@ -48,7 +48,7 @@
 	});
 </script>

-<div class="flex items-center space-x-2 p-6 text-2xl font-bold">
+<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
@@ -60,29 +60,21 @@

 <div class="mx-auto max-w-4xl px-6 py-4">
 	<div class="text-2xl font-bold">Database Usage</div>
-	<div class="mx-auto">
-		<dl class="relative mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
-			<div class="overflow-hidden rounded px-4 py-5 text-center sm:p-6 sm:text-left">
-				<dt class=" text-sm font-medium text-white">Used Memory / Memory Limit</dt>
-				<dd class="mt-1 text-xl font-semibold text-white">
-					{usage?.MemUsage}
-				</dd>
-			</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="overflow-hidden rounded px-4 py-5 text-center sm:p-6 sm:text-left">
-				<dt class="truncate text-sm font-medium text-white">Used CPU</dt>
-				<dd class="mt-1 text-xl font-semibold text-white ">
-					{usage?.CPUPerc}
-				</dd>
-			</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="overflow-hidden rounded px-4 py-5 text-center sm:p-6 sm:text-left">
-				<dt class="truncate text-sm font-medium text-white">Network IO</dt>
-				<dd class="mt-1 text-xl font-semibold text-white ">
-					{usage?.NetIO}
-				</dd>
-			</div>
-		</dl>
+		<div class="stat w-64">
+			<div class="stat-title">Network IO</div>
+			<div class="stat-value text-xl">{usage?.NetIO}</div>
+		</div>
 	</div>
 </div>
-<Databases bind:database {privatePort}/>
+<Databases bind:database {privatePort} />
--- a/apps/ui/src/routes/databases/[id]/logs/index.svelte
+++ b/apps/ui/src/routes/databases/[id]/logs/index.svelte
@@ -6,6 +6,7 @@
 	import { get } from '$lib/api';
 	import { t } from '$lib/translations';
 	import { errorNotification } from '$lib/common';
+	import Tooltip from '$lib/components/Tooltip.svelte';

 	const { id } = $page.params;

@@ -17,9 +18,13 @@
 	let logsEl: any;
 	let position = 0;
 	let loadingLogs = false;
-	let database: any = {};
+	let database = {
+		name: null
+	};

 	onMount(async () => {
+		const response = await get(`/databases/${id}`);
+		database = response.database;
 		const { logs: firstLogs } = await get(`/databases/${id}/logs`);
 		logs = firstLogs;
 		loadAllLogs();
@@ -40,7 +45,6 @@
 				logs = data.logs;
 			}
 		} catch (error) {
-			console.log(error);
 			return errorNotification(error);
 		} finally {
 			loadingLogs = false;
@@ -94,29 +98,6 @@
 		</div>
 		<span class="text-xs">{database.name}</span>
 	</div>
-
-	{#if database.fqdn}
-		<a
-			href={database.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}
 </div>
 <div class="flex flex-row justify-center space-x-2 px-10 pt-6">
 	{#if logs.length === 0}
@@ -129,9 +110,9 @@
 			{/if}
 			<div class="flex justify-end sticky top-0 p-1 mx-1">
 				<button
+					id="follow"
 					on:click={followBuild}
-					class="bg-transparent"
-					data-tooltip="Follow logs"
+					class="bg-transparent btn btn-sm"
 					class:text-green-500={followingLogs}
 				>
 					<svg
@@ -151,6 +132,7 @@
 						<line x1="16" y1="12" x2="12" y2="16" />
 					</svg>
 				</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"
--- a/apps/ui/src/routes/databases/index.svelte
+++ b/apps/ui/src/routes/databases/index.svelte
@@ -19,18 +19,11 @@

 <script lang="ts">
 	export let databases: any = [];
-	import Clickhouse from '$lib/components/svg/databases/Clickhouse.svelte';
-	import CouchDB from '$lib/components/svg/databases/CouchDB.svelte';
-	import MongoDB from '$lib/components/svg/databases/MongoDB.svelte';
-	import MariaDB from '$lib/components/svg/databases/MariaDB.svelte';
-	import MySQL from '$lib/components/svg/databases/MySQL.svelte';
-	import PostgreSQL from '$lib/components/svg/databases/PostgreSQL.svelte';
-	import Redis from '$lib/components/svg/databases/Redis.svelte';
-	import EdgeDb from '$lib/components/svg/databases/EdgeDB.svelte';
 	import { get, post } from '$lib/api';
 	import { t } from '$lib/translations';
 	import { appSession } from '$lib/store';
 	import { goto } from '$app/navigation';
+	import DatabaseIcons from '$lib/components/svg/databases/DatabaseIcons.svelte';

 	async function newDatabase() {
 		const { id } = await post('/databases/new', {});
@@ -51,9 +44,9 @@

 <div class="flex space-x-1 p-6 font-bold">
 	<div class="mr-4 text-2xl tracking-tight">{$t('index.databases')}</div>
-	<div on:click={newDatabase} class="add-icon cursor-pointer bg-purple-600 hover:bg-purple-500">
+	<button on:click={newDatabase} class="btn btn-square btn-sm bg-databases">
 		<svg
-			class="w-6"
+			class="h-6 w-6"
 			xmlns="http://www.w3.org/2000/svg"
 			fill="none"
 			viewBox="0 0 24 24"
@@ -65,10 +58,10 @@
 				d="M12 6v6m0 0v6m0-6h6m-6 0H6"
 			/></svg
 		>
-	</div>
+	</button>
 </div>

-<div class="flex-col justify-center">
+<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
 	{#if !databases || ownDatabases.length === 0}
 		<div class="flex-col">
 			<div class="text-center text-xl font-bold">{$t('database.no_databases_found')}</div>
@@ -80,23 +73,7 @@
 				{#each ownDatabases as database}
 					<a href="/databases/{database.id}" class="p-2 no-underline">
 						<div class="box-selection group relative hover:bg-purple-600">
-							{#if database.type === 'clickhouse'}
-								<Clickhouse isAbsolute />
-							{:else if database.type === 'couchdb'}
-								<CouchDB isAbsolute />
-							{:else if database.type === 'mongodb'}
-								<MongoDB isAbsolute />
-							{:else if database.type === 'mysql'}
-								<MySQL isAbsolute />
-							{:else if database.type === 'mariadb'}
-								<MariaDB isAbsolute />
-							{:else if database.type === 'postgresql'}
-								<PostgreSQL isAbsolute />
-							{:else if database.type === 'redis'}
-								<Redis isAbsolute />
-							{:else if database.type === 'edgedb'}
-								<EdgeDb isAbsolute />
-							{/if}
+              <DatabaseIcons type={database.type} isAbsolute={true} />
 							<div class="truncate text-center text-xl font-bold">
 								{database.name}
 							</div>
@@ -121,23 +98,7 @@
 					{#each otherDatabases as database}
 						<a href="/databases/{database.id}" class="p-2 no-underline">
 							<div class="box-selection group relative hover:bg-purple-600">
-								{#if database.type === 'clickhouse'}
-									<Clickhouse isAbsolute />
-								{:else if database.type === 'couchdb'}
-									<CouchDB isAbsolute />
-								{:else if database.type === 'mongodb'}
-									<MongoDB isAbsolute />
-								{:else if database.type === 'mariadb'}
-									<MariaDB isAbsolute />
-								{:else if database.type === 'mysql'}
-									<MySQL isAbsolute />
-								{:else if database.type === 'postgresql'}
-									<PostgreSQL isAbsolute />
-								{:else if database.type === 'redis'}
-									<Redis isAbsolute />
-								{:else if database.type === 'edgedb'}
-									<EdgeDb isAbsolute />
-								{/if}
+                <DatabaseIcons type={database.type} isAbsolute={true} />
 								<div class="truncate text-center text-xl font-bold">
 									{database.name}
 								</div>
--- a/apps/ui/src/routes/destinations/[id]/_LocalDocker.svelte
+++ b/apps/ui/src/routes/destinations/[id]/_LocalDocker.svelte
@@ -2,14 +2,13 @@
 	export let destination: any;
 	export let settings: any;

-	import { toast } from '@zerodevx/svelte-toast';
 	import { page } from '$app/stores';
 	import { get, post } from '$lib/api';
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
 	import { onMount } from 'svelte';
 	import { t } from '$lib/translations';
 	import { errorNotification } from '$lib/common';
-	import { appSession } from '$lib/store';
+	import { addToast, appSession } from '$lib/store';
 	import Setting from '$lib/components/Setting.svelte';

 	const { id } = $page.params;
@@ -24,7 +23,10 @@
 		loading.save = true;
 		try {
 			await post(`/destinations/${id}`, { ...destination });
-			toast.push('Configuration saved.');
+			addToast({
+				message: 'Configuration saved.',
+				type: 'success'
+			});
 		} catch (error) {
 			return errorNotification(error);
 		} finally {
@@ -96,7 +98,10 @@
 	async function stopProxy() {
 		try {
 			await post(`/destinations/${id}/stop`, { engine: destination.engine });
-			return toast.push($t('destination.coolify_proxy_stopped'));
+			return addToast({
+				message: $t('destination.coolify_proxy_stopped'),
+				type: 'success'
+			});
 		} catch (error) {
 			return errorNotification(error);
 		}
@@ -104,7 +109,10 @@
 	async function startProxy() {
 		try {
 			await post(`/destinations/${id}/start`, { engine: destination.engine });
-			return toast.push($t('destination.coolify_proxy_started'));
+			return addToast({
+				message: $t('destination.coolify_proxy_started'),
+				type: 'success'
+			});
 		} catch (error) {
 			return errorNotification(error);
 		}
@@ -114,7 +122,10 @@
 		if (sure) {
 			try {
 				loading.restart = true;
-				toast.push($t('destination.coolify_proxy_restarting'));
+				addToast({
+					message: $t('destination.coolify_proxy_restarting'),
+					type: 'success'
+				});
 				await post(`/destinations/${id}/restart`, {
 					engine: destination.engine,
 					fqdn: settings.fqdn
@@ -131,28 +142,27 @@
 </script>

 <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>
+	<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="bg-sky-600 hover:bg-sky-500"
-				class:bg-sky-600={!loading.save}
-				class:hover:bg-sky-500={!loading.save}
+				class="btn btn-sm"
+				class:bg-destinations={!loading.save}
+				class:loading={loading.save}
 				disabled={loading.save}
-				>{loading.save ? $t('forms.saving') : $t('forms.save')}
+				>{$t('forms.save')}
 			</button>
 			<button
-				class={loading.restart ? '' : 'bg-red-600 hover:bg-red-500'}
+				class="btn btn-sm"
+				class:loading={loading.restart}
+				class:bg-error={!loading.restart}
 				disabled={loading.restart}
-				on:click|preventDefault={forceRestartProxy}
-				>{loading.restart
-					? $t('destination.restarting_please_wait')
-					: $t('destination.force_restart_proxy')}</button
+				on:click|preventDefault={forceRestartProxy}>{$t('destination.force_restart_proxy')}</button
 			>
 		{/if}
 	</div>
-	<div class="grid grid-cols-2 items-center px-10 ">
+	<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>
 		<input
 			name="name"
@@ -163,7 +173,7 @@
 		/>
 	</div>

-	<div class="grid grid-cols-2 items-center px-10">
+	<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>
 		<CopyPasswordField
 			id="engine"
@@ -174,7 +184,7 @@
 			value={destination.engine}
 		/>
 	</div>
-	<div class="grid grid-cols-2 items-center px-10">
+	<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>
 		<CopyPasswordField
 			id="network"
@@ -186,14 +196,15 @@
 		/>
 	</div>
 	{#if $appSession.teamId === '0'}
-		<div class="grid grid-cols-2 items-center">
+		<div class="grid lg:grid-cols-2 items-center px-10">
 			<Setting
+				id="changeProxySetting"
 				loading={loading.proxy}
 				disabled={cannotDisable}
 				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. Databases will have their own proxy. <br><br>${
+				description={`This will install a proxy 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>'
 						: ''
--- a/apps/ui/src/routes/destinations/[id]/_New.svelte
+++ b/apps/ui/src/routes/destinations/[id]/_New.svelte
@@ -40,10 +40,10 @@
 <div class="flex-col space-y-2 pb-10 text-center">
 	<div class="text-xl font-bold text-white">{$t('destination.new.predefined_destinations')}</div>
 	<div class="flex justify-center space-x-2">
-		<button class="w-32" on:click={() => setPredefined('localDocker')}
+		<button class="btn btn-sm" on:click={() => setPredefined('localDocker')}
 			>{$t('sources.local_docker')}</button
 		>
-		<button class="w-32" on:click={() => setPredefined('remoteDocker')}>Remote Docker</button>
+		<button class="btn btn-sm" on:click={() => setPredefined('remoteDocker')}>Remote Docker</button>
 		<!-- <button class="w-32" on:click={() => setPredefined('kubernetes')}>Kubernetes</button> -->
 	</div>
 </div>
--- a/apps/ui/src/routes/destinations/[id]/_NewLocalDocker.svelte
+++ b/apps/ui/src/routes/destinations/[id]/_NewLocalDocker.svelte
@@ -33,11 +33,7 @@
 	<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="title font-bold">{$t('forms.configuration')}</div>
-			<button
-				type="submit"
-				class:bg-sky-600={!loading}
-				class:hover:bg-sky-500={!loading}
-				disabled={loading}
+			<button type="submit" class="btn btn-sm bg-destinations" class:loading disabled={loading}
 				>{loading
 					? payload.isCoolifyProxyUsed
 						? $t('destination.new.saving_and_configuring_proxy')
@@ -69,12 +65,13 @@
 			/>
 		</div>
 		{#if $appSession.teamId === '0'}
-			<div class="grid grid-cols-2 items-center">
+			<div class="grid grid-cols-2 items-center px-10">
 				<Setting
+					id="changeProxySetting"
 					bind:setting={payload.isCoolifyProxyUsed}
 					on:click={() => (payload.isCoolifyProxyUsed = !payload.isCoolifyProxyUsed)}
 					title={$t('destination.use_coolify_proxy')}
-					description={$t('destination.new.install_proxy')}
+					description={'This will install a proxy on the destination to allow you to access your applications and services without any manual configuration.'}
 				/>
 			</div>
 		{/if}
--- a/apps/ui/src/routes/destinations/[id]/_NewRemoteDocker.svelte
+++ b/apps/ui/src/routes/destinations/[id]/_NewRemoteDocker.svelte
@@ -5,7 +5,7 @@

 	import { post } from '$lib/api';
 	import { errorNotification } from '$lib/common';
-	import Explainer from '$lib/components/Explainer.svelte';
+	import SimpleExplainer from '$lib/components/SimpleExplainer.svelte';
 	import Setting from '$lib/components/Setting.svelte';
 	import { t } from '$lib/translations';

@@ -29,20 +29,18 @@
 </script>

 <div class="text-center flex justify-center">
-	<Explainer
+	<SimpleExplainer
 		customClass="max-w-[32rem]"
-		text="Remote Docker Engines are using <span class='text-white font-bold'>SSH connection</span> to initiate connection. You need to setup an <span class='text-white font-bold'>SSH key</span> in advance on the server and install Docker. <br>See <a class='text-white' href='https://docs.coollabs.io'>docs</a> for more details."
+		text="Remote Docker Engines are using <span class='text-white font-bold'>SSH</span> to communicate with the remote docker engine. 
+        You need to setup an <span class='text-white font-bold'>SSH key</span> in advance on the server and install Docker. 
+        <br>See <a class='text-white' href='https://docs.coollabs.io/coolify/destinations#remote-docker-engine' target='blank'>docs</a> for more details."
 	/>
 </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="title font-bold">{$t('forms.configuration')}</div>
-			<button
-				type="submit"
-				class:bg-sky-600={!loading}
-				class:hover:bg-sky-500={!loading}
-				disabled={loading}
+			<button type="submit" class="btn btn-sm bg-destinations" class:loading disabled={loading}
 				>{loading
 					? payload.isCoolifyProxyUsed
 						? $t('destination.new.saving_and_configuring_proxy')
@@ -95,12 +93,13 @@
 				bind:value={payload.network}
 			/>
 		</div>
-		<div class="grid grid-cols-2 items-center">
+		<div class="grid grid-cols-2 items-center px-10">
 			<Setting
+				id="isCoolifyProxyUsed"
 				bind:setting={payload.isCoolifyProxyUsed}
 				on:click={() => (payload.isCoolifyProxyUsed = !payload.isCoolifyProxyUsed)}
 				title={$t('destination.use_coolify_proxy')}
-				description={$t('destination.new.install_proxy')}
+				description={'This will install a proxy on the destination to allow you to access your applications and services without any manual configuration.'}
 			/>
 		</div>
 	</form>
--- a/apps/ui/src/routes/destinations/[id]/_RemoteDocker.svelte
+++ b/apps/ui/src/routes/destinations/[id]/_RemoteDocker.svelte
@@ -2,15 +2,14 @@
 	export let destination: any;
 	export let settings: any;

-	import { toast } from '@zerodevx/svelte-toast';
-	import { page, session } from '$app/stores';
+	import { page } from '$app/stores';
 	import Setting from '$lib/components/Setting.svelte';
 	import { get, post } from '$lib/api';
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
 	import { onMount } from 'svelte';
 	import { t } from '$lib/translations';
 	import { errorNotification } from '$lib/common';
-	import { appSession } from '$lib/store';
+	import { addToast, appSession } from '$lib/store';

 	const { id } = $page.params;

@@ -28,7 +27,10 @@
 		loading.save = true;
 		try {
 			await post(`/destinations/${id}`, { ...destination });
-			toast.push('Configuration saved.');
+			addToast({
+				message: 'Configuration saved.',
+				type: 'success'
+			});
 		} catch (error) {
 			return errorNotification(error);
 		} finally {
@@ -36,8 +38,8 @@
 		}
 	}
 	onMount(async () => {
-		loading.proxy = true;
 		if (destination.remoteEngine && destination.remoteVerified) {
+			loading.proxy = true;
 			const { isRunning } = await get(`/destinations/${id}/status`);
 			if (isRunning === false && destination.isCoolifyProxyUsed === true) {
 				destination.isCoolifyProxyUsed = !destination.isCoolifyProxyUsed;
@@ -67,6 +69,7 @@
 		loading.proxy = false;
 	});
 	async function changeProxySetting() {
+		if (!destination.remoteVerified) return
 		loading.proxy = true;
 		if (!cannotDisable) {
 			const isProxyActivated = destination.isCoolifyProxyUsed;
@@ -103,7 +106,10 @@
 	async function stopProxy() {
 		try {
 			await post(`/destinations/${id}/stop`, { engine: destination.engine });
-			return toast.push($t('destination.coolify_proxy_stopped'));
+			return addToast({
+				message: $t('destination.coolify_proxy_stopped'),
+				type: 'success'
+			});
 		} catch (error) {
 			return errorNotification(error);
 		}
@@ -111,7 +117,10 @@
 	async function startProxy() {
 		try {
 			await post(`/destinations/${id}/start`, { engine: destination.engine });
-			return toast.push($t('destination.coolify_proxy_started'));
+			return addToast({
+				message: $t('destination.coolify_proxy_started'),
+				type: 'success'
+			});
 		} catch (error) {
 			return errorNotification(error);
 		}
@@ -121,7 +130,10 @@
 		if (sure) {
 			try {
 				loading.restart = true;
-				toast.push($t('destination.coolify_proxy_restarting'));
+				addToast({
+					message: $t('destination.coolify_proxy_restarting'),
+					type: 'success'
+				});
 				await post(`/destinations/${id}/restart`, {
 					engine: destination.engine,
 					fqdn: settings.fqdn
@@ -140,8 +152,10 @@
 			loading.verify = true;
 			await post(`/destinations/${id}/verify`, {});
 			destination.remoteVerified = true;
-			toast.push('Remote Docker Engine verified!');
-			return;
+			return addToast({
+				message: 'Remote Docker Engine verified!',
+				type: 'success'
+			});
 		} catch (error) {
 			return errorNotification(error);
 		} finally {
@@ -156,26 +170,28 @@
 		{#if $appSession.isAdmin}
 			<button
 				type="submit"
-				class="bg-sky-600 hover:bg-sky-500"
-				class:bg-sky-600={!loading.save}
-				class:hover:bg-sky-500={!loading.save}
+				class="btn btn-sm"
+				class:loading={loading.save}
+				class:bg-destinations={!loading.save}
 				disabled={loading.save}
-				>{loading.save ? $t('forms.saving') : $t('forms.save')}
+				>{$t('forms.save')}
 			</button>
 			{#if !destination.remoteVerified}
 				<button
 					disabled={loading.verify}
+					class="btn btn-sm"
+					class:loading={loading.verify}
 					on:click|preventDefault|stopPropagation={verifyRemoteDocker}
-					>{loading.verify ? 'Verifying...' : 'Verify Remote Docker Engine'}</button
+					>Verify Remote Docker Engine</button
 				>
 			{:else}
 				<button
-					class={loading.restart ? '' : 'bg-red-600 hover:bg-red-500'}
+					class="btn btn-sm"
+					class:loading={loading.restart}
+					class:bg-error={!loading.restart}
 					disabled={loading.restart}
 					on:click|preventDefault={forceRestartProxy}
-					>{loading.restart
-						? $t('destination.restarting_please_wait')
-						: $t('destination.force_restart_proxy')}</button
+					>{$t('destination.force_restart_proxy')}</button
 				>
 			{/if}
 		{/if}
@@ -244,14 +260,15 @@
 			/></a
 		>
 	</div>
-	<div class="grid grid-cols-2 items-center">
+	<div class="grid grid-cols-2 items-center px-10">
 		<Setting
-			disabled={cannotDisable}
+			id="changeProxySetting"
+			disabled={cannotDisable || !destination.remoteVerified}
 			loading={loading.proxy}
 			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. Databases will have their own proxy. <br><br>${
+			description={`This will install a proxy 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>'
 					: ''
--- a/Show More
+++ b/Show More