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/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': {