diff --git a/apps/api/src/jobs/infrastructure.ts b/apps/api/src/jobs/infrastructure.ts
index 19ab713aa..29ac8aa20 100644
--- a/apps/api/src/jobs/infrastructure.ts
+++ b/apps/api/src/jobs/infrastructure.ts
@@ -3,9 +3,6 @@ import axios from 'axios';
 import { compareVersions } from 'compare-versions';
 import { asyncExecShell, cleanupDockerStorage, executeDockerCmd, isDev, prisma, startTraefikTCPProxy, generateDatabaseConfiguration, startTraefikProxy, listSettings, version } from '../lib/common';
 
-async function disconnect() {
-    await prisma.$disconnect();
-}
 async function autoUpdater() {
     try {
         const currentVersion = version;
diff --git a/apps/ui/src/lib/components/SimpleExplainer.svelte b/apps/ui/src/lib/components/SimpleExplainer.svelte
new file mode 100644
index 000000000..6a3198c27
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/apps/ui/src/routes/applications/[id]/_Setting.svelte b/apps/ui/src/routes/applications/[id]/_Setting.svelte
deleted file mode 100644
index e1d5e79f8..000000000
--- a/apps/ui/src/routes/applications/[id]/_Setting.svelte
+++ /dev/null
@@ -1,72 +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-tip={dataTooltip}
-	class="flex justify-center"
->
-	<div
-		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>
diff --git a/apps/ui/src/routes/applications/[id]/configuration/source.svelte b/apps/ui/src/routes/applications/[id]/configuration/source.svelte
index fee45aba5..d1252c74f 100644
--- a/apps/ui/src/routes/applications/[id]/configuration/source.svelte
+++ b/apps/ui/src/routes/applications/[id]/configuration/source.svelte
@@ -32,7 +32,6 @@
 	import { errorNotification } from '$lib/common';
 	import { appSession } from '$lib/store';
 	import PublicRepository from './_PublicRepository.svelte';
-	import Explaner from '$lib/components/Explainer.svelte';
 	import DocLink from '$lib/components/DocLink.svelte';
 
 	const { id } = $page.params;
diff --git a/apps/ui/src/routes/applications/[id]/index.svelte b/apps/ui/src/routes/applications/[id]/index.svelte
index 9d908346d..c646171fc 100644
--- a/apps/ui/src/routes/applications/[id]/index.svelte
+++ b/apps/ui/src/routes/applications/[id]/index.svelte
@@ -32,16 +32,15 @@
 	import { onDestroy, onMount } from 'svelte';
 	import Select from 'svelte-select';
 
-	import Explainer from '$lib/components/Explainer.svelte';
 	import { get, post } from '$lib/api';
 	import cuid from 'cuid';
-	import { browser } from '$app/env';
 	import { addToast, appSession, disabledButton, setLocation, status } from '$lib/store';
 	import { t } from '$lib/translations';
 	import { errorNotification, getDomain, notNodeDeployments, staticDeployments } from '$lib/common';
 	import Setting from '$lib/components/Setting.svelte';
 	import Tooltip from '$lib/components/Tooltip.svelte';
-	import Explaner from '$lib/components/Explainer.svelte';
+	import Explainer from '$lib/components/Explainer.svelte';
+	
 	const { id } = $page.params;
 
 	$: isDisabled =
@@ -447,7 +446,7 @@
 				<div class="grid grid-cols-2 items-center">
 					<label for="baseBuildImage" class="text-base font-bold text-stone-100"
 						>{$t('application.base_build_image')}
-						<Explaner
+						<Explainer
 							explanation={application.buildPack === 'laravel'
 								? 'For building frontend assets with webpack.'
 								: 'Image that will be used during the build process.'}
@@ -472,7 +471,7 @@
 				<div class="grid grid-cols-2 items-center">
 					<label for="baseImage" class="text-base font-bold text-stone-100"
 						>{$t('application.base_image')}
-						<Explaner explanation={'Image that will be used for the deployment.'} /></label
+						<Explainer explanation={'Image that will be used for the deployment.'} /></label
 					>
 					<div class="custom-select-wrapper">
 						<Select
@@ -492,7 +491,7 @@
 				<div class="grid grid-cols-2 items-center pb-8">
 					<label for="deploymentType" class="text-base font-bold text-stone-100"
 						>Deployment Type
-						<Explaner
+						<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
 					>
@@ -542,7 +541,7 @@
 				<div class="grid grid-cols-2 items-center">
 					<label for="fqdn" class="text-base font-bold text-stone-100"
 						>{$t('application.url_fqdn')}
-						<Explaner
+						<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>
@@ -550,7 +549,6 @@
 						<input
 							readonly={isDisabled}
 							disabled={isDisabled}
-							bind:this={domainEl}
 							name="fqdn"
 							id="fqdn"
 							required
@@ -648,7 +646,7 @@
 				<div class="grid grid-cols-2 items-center">
 					<label for="port" class="text-base font-bold text-stone-100"
 						>{$t('forms.port')}
-						<Explaner explanation={'The port your application listens on.'} /></label
+						<Explainer explanation={'The port your application listens on.'} /></label
 					>
 					<input
 						disabled={isDisabled}
@@ -662,7 +660,7 @@
 			{/if}
 			<div class="grid grid-cols-2 items-center">
 				<label for="exposePort" class="text-base font-bold text-stone-100"
-					>Exposed Port <Explaner
+					>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
 				>
@@ -719,7 +717,7 @@
 			{#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 <Explaner
+						>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
 					>
@@ -747,7 +745,7 @@
 				</div>
 				<div class="grid grid-cols-2 items-center">
 					<label for="denoOptions" class="text-base font-bold text-stone-100"
-						>Arguments <Explaner
+						>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
 					>
@@ -766,7 +764,7 @@
 					<div class="flex-col">
 						<label for="baseDirectory" class="pt-2 text-base font-bold text-stone-100"
 							>{$t('forms.base_directory')}
-							<Explaner
+							<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
 						>
@@ -786,7 +784,7 @@
 					<div class="flex-col">
 						<label for="publishDirectory" class="pt-2 text-base font-bold text-stone-100"
 							>{$t('forms.publish_directory')}
-							<Explaner
+							<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
 						>
diff --git a/apps/ui/src/routes/applications/[id]/previews.svelte b/apps/ui/src/routes/applications/[id]/previews.svelte
index 6848a0d38..2942b2954 100644
--- 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 { 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;
 
@@ -145,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."
@@ -194,8 +194,9 @@
 						</div>
 					</a>
 					<div class="flex items-center justify-center">
-						<button class="btn btn-sm 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">
diff --git a/apps/ui/src/routes/applications/[id]/storages.svelte b/apps/ui/src/routes/applications/[id]/storages.svelte
index 96908fa89..c8847582d 100644
--- 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>
diff --git a/apps/ui/src/routes/databases/[id]/_Databases/_Databases.svelte b/apps/ui/src/routes/databases/[id]/_Databases/_Databases.svelte
index 5d80cb3db..5cfa6025e 100644
--- a/apps/ui/src/routes/databases/[id]/_Databases/_Databases.svelte
+++ b/apps/ui/src/routes/databases/[id]/_Databases/_Databases.svelte
@@ -16,7 +16,7 @@
 	import { t } from '$lib/translations';
 	import { errorNotification } from '$lib/common';
 	import { addToast, appSession, status } from '$lib/store';
-	import Explaner from '$lib/components/Explainer.svelte';
+	import Explainer from '$lib/components/Explainer.svelte';
 
 	const { id } = $page.params;
 
@@ -211,7 +211,7 @@
 					<label for="url" class="text-base font-bold text-stone-100"
 						>{$t('database.connection_string')}
 						{#if !isPublic && database.destinationDocker.remoteEngine}
-							<Explaner
+							<Explainer
 								explanation="You can only access the database with this URL if your application is deployed to the same Destination."
 							/>
 						{/if}</label
diff --git a/apps/ui/src/routes/databases/[id]/_Databases/_MariaDB.svelte b/apps/ui/src/routes/databases/[id]/_Databases/_MariaDB.svelte
index 2f1599b98..516e887e6 100644
--- a/apps/ui/src/routes/databases/[id]/_Databases/_MariaDB.svelte
+++ b/apps/ui/src/routes/databases/[id]/_Databases/_MariaDB.svelte
@@ -3,7 +3,7 @@
 	import { status } from '$lib/store';
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
 	import { t } from '$lib/translations';
-	import Explaner from '$lib/components/Explainer.svelte';
+	import Explainer from '$lib/components/Explainer.svelte';
 </script>
 
 <div class="flex space-x-1 py-5 font-bold">
@@ -38,7 +38,7 @@
 	<div class="grid grid-cols-2 items-center">
 		<label for="dbUserPassword" class="text-base font-bold text-stone-100"
 			>{$t('forms.password')}
-			<Explaner explanation="Could be changed while the database is running." /></label
+			<Explainer explanation="Could be changed while the database is running." /></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}
@@ -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')} <Explaner explanation="Could be changed while the database is running." /></label
+			>{$t('forms.roots_password')} <Explainer explanation="Could be changed while the database is running." /></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}
diff --git a/apps/ui/src/routes/databases/[id]/_Databases/_MongoDB.svelte b/apps/ui/src/routes/databases/[id]/_Databases/_MongoDB.svelte
index 2ecc2cf91..b93c10bf5 100644
--- a/apps/ui/src/routes/databases/[id]/_Databases/_MongoDB.svelte
+++ b/apps/ui/src/routes/databases/[id]/_Databases/_MongoDB.svelte
@@ -3,7 +3,7 @@
 	import { status } from '$lib/store';
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
 	import { t } from '$lib/translations';
-	import Explaner from '$lib/components/Explainer.svelte';
+	import Explainer from '$lib/components/Explainer.svelte';
 </script>
 
 <div class="flex space-x-1 py-5 font-bold">
@@ -24,7 +24,7 @@
 	<div class="grid grid-cols-2 items-center">
 		<label for="rootUserPassword" class="text-base font-bold text-stone-100"
 			>{$t('forms.roots_password')}
-			<Explaner explanation="Could be changed while the database is running." /></label
+			<Explainer explanation="Could be changed while the database is running." /></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}
diff --git a/apps/ui/src/routes/databases/[id]/_Databases/_MySQL.svelte b/apps/ui/src/routes/databases/[id]/_Databases/_MySQL.svelte
index 0c781d53e..3405bd125 100644
--- a/apps/ui/src/routes/databases/[id]/_Databases/_MySQL.svelte
+++ b/apps/ui/src/routes/databases/[id]/_Databases/_MySQL.svelte
@@ -2,9 +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 Explaner from '$lib/components/Explainer.svelte';
+	import Explainer from '$lib/components/Explainer.svelte';
 </script>
 
 <div class="flex space-x-1 py-5 font-bold">
@@ -38,7 +37,8 @@ import Explaner from '$lib/components/Explainer.svelte';
 	</div>
 	<div class="grid grid-cols-2 items-center">
 		<label for="dbUserPassword" class="text-base font-bold text-stone-100"
-			>{$t('forms.password')} <Explaner explanation="Could be changed while the database is running." /></label
+			>{$t('forms.password')}
+			<Explainer explanation="Could be changed while the database is running." /></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}
@@ -63,7 +63,8 @@ import Explaner from '$lib/components/Explainer.svelte';
 	</div>
 	<div class="grid grid-cols-2 items-center">
 		<label for="rootUserPassword" class="text-base font-bold text-stone-100"
-			>{$t('forms.roots_password')} <Explaner explanation="Could be changed while the database is running." /></label
+			>{$t('forms.roots_password')}
+			<Explainer explanation="Could be changed while the database is running." /></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}
diff --git a/apps/ui/src/routes/databases/[id]/_Databases/_PostgreSQL.svelte b/apps/ui/src/routes/databases/[id]/_Databases/_PostgreSQL.svelte
index 7f71e4d61..715ca3e1a 100644
--- a/apps/ui/src/routes/databases/[id]/_Databases/_PostgreSQL.svelte
+++ b/apps/ui/src/routes/databases/[id]/_Databases/_PostgreSQL.svelte
@@ -3,7 +3,7 @@
 	import { status } from '$lib/store';
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
 	import { t } from '$lib/translations';
-	import Explaner from '$lib/components/Explainer.svelte';
+	import Explainer from '$lib/components/Explainer.svelte';
 </script>
 
 <div class="flex space-x-1 py-5 font-bold">
@@ -26,7 +26,7 @@
 	</div>
 	<div class="grid grid-cols-2 items-center">
 		<label for="rootUser" class="text-base font-bold text-stone-100"
-			>Postgres User Password <Explaner
+			>Postgres User Password <Explainer
 				explanation="Could be changed while the database is running."
 			/></label
 		>
@@ -54,7 +54,7 @@
 	<div class="grid grid-cols-2 items-center">
 		<label for="dbUserPassword" class="text-base font-bold text-stone-100"
 			>{$t('forms.password')}
-			<Explaner explanation="Could be changed while the database is running." /></label
+			<Explainer explanation="Could be changed while the database is running." /></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}
diff --git a/apps/ui/src/routes/databases/[id]/_Databases/_Redis.svelte b/apps/ui/src/routes/databases/[id]/_Databases/_Redis.svelte
index ba780a878..5e47684d0 100644
--- a/apps/ui/src/routes/databases/[id]/_Databases/_Redis.svelte
+++ b/apps/ui/src/routes/databases/[id]/_Databases/_Redis.svelte
@@ -3,7 +3,7 @@
 	import { status } from '$lib/store';
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
 	import { t } from '$lib/translations';
-	import Explaner from '$lib/components/Explainer.svelte';
+	import Explainer from '$lib/components/Explainer.svelte';
 </script>
 
 <div class="flex space-x-1 py-5 font-bold">
@@ -13,7 +13,7 @@
 	<div class="grid grid-cols-2 items-center">
 		<label for="dbUserPassword" class="text-base font-bold text-stone-100"
 			>{$t('forms.password')}
-			<Explaner explanation="Could be changed while the database is running." /></label
+			<Explainer explanation="Could be changed while the database is running." /></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}
diff --git a/apps/ui/src/routes/destinations/[id]/_NewRemoteDocker.svelte b/apps/ui/src/routes/destinations/[id]/_NewRemoteDocker.svelte
index 5e4135d83..89ad07f3a 100644
--- 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,7 +29,7 @@
 </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</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. 
diff --git a/apps/ui/src/routes/iam/team/[id]/index.svelte b/apps/ui/src/routes/iam/team/[id]/index.svelte
index 723a62a53..37fe1b798 100644
--- a/apps/ui/src/routes/iam/team/[id]/index.svelte
+++ b/apps/ui/src/routes/iam/team/[id]/index.svelte
@@ -12,7 +12,7 @@
 	export let team: any;
 	export let invitations: any[];
 	import { page } from '$app/stores';
-	import Explainer from '$lib/components/Explainer.svelte';
+	import SimpleExplainer from '$lib/components/SimpleExplainer.svelte';
 	import { post } from '$lib/api';
 	import { t } from '$lib/translations';
 	import { errorNotification } from '$lib/common';
@@ -98,7 +98,7 @@
 				<div class="flex-col">
 					<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
 					{#if team.id === '0'}
-						<Explainer customClass="w-full" text={$t('team.root_team_explainer')} />
+						<SimpleExplainer customClass="w-full" text={$t('team.root_team_explainer')} />
 					{/if}
 				</div>
 				<input id="name" name="name" placeholder="name" bind:value={team.name} />
@@ -179,7 +179,7 @@
 					>
 				</div>
 			</div>
-			<Explainer text={$t('team.invite_only_register_explainer')} />
+			<SimpleExplainer text={$t('team.invite_only_register_explainer')} />
 			<div class="flex-col space-y-2 px-4 pt-5 sm:px-6">
 				<div class="flex space-x-0">
 					<input
diff --git a/apps/ui/src/routes/services/[id]/_Services/_Ghost.svelte b/apps/ui/src/routes/services/[id]/_Services/_Ghost.svelte
index 13372c936..7af0c8e1d 100644
--- a/apps/ui/src/routes/services/[id]/_Services/_Ghost.svelte
+++ b/apps/ui/src/routes/services/[id]/_Services/_Ghost.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
-	import Explaner from '$lib/components/Explainer.svelte';
+	import Explainer from '$lib/components/Explainer.svelte';
 	import { t } from '$lib/translations';
 	export let readOnly: any;
 	export let service: any;
@@ -8,7 +8,7 @@
 
 <div class="flex space-x-1 py-5">
 	<div class="title">
-		Ghost <Explaner explanation="You can change these values in the Ghost admin panel." />
+		Ghost <Explainer explanation="You can change these values in the Ghost admin panel." />
 	</div>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
diff --git a/apps/ui/src/routes/services/[id]/_Services/_PlausibleAnalytics.svelte b/apps/ui/src/routes/services/[id]/_Services/_PlausibleAnalytics.svelte
index 034c37903..e1992f56d 100644
--- a/apps/ui/src/routes/services/[id]/_Services/_PlausibleAnalytics.svelte
+++ b/apps/ui/src/routes/services/[id]/_Services/_PlausibleAnalytics.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
-	import Explaner from '$lib/components/Explainer.svelte';
+	import Explainer from '$lib/components/Explainer.svelte';
 	import { appSession, status } from '$lib/store';
 	import { t } from '$lib/translations';
 	export let service: any;
@@ -12,7 +12,7 @@
 </div>
 <div class="grid grid-cols-2 items-center px-10">
 	<label for="scriptName"
-		>Script Name <Explaner
+		>Script Name <Explainer
 			explanation="Useful if you would like to rename the collector script to prevent it blocked by AdBlockers."
 		/></label
 	>
diff --git a/apps/ui/src/routes/services/[id]/_Services/_Services.svelte b/apps/ui/src/routes/services/[id]/_Services/_Services.svelte
index b36303d49..39d0aa3e1 100644
--- a/apps/ui/src/routes/services/[id]/_Services/_Services.svelte
+++ b/apps/ui/src/routes/services/[id]/_Services/_Services.svelte
@@ -30,7 +30,7 @@
 	import Moodle from './_Moodle.svelte';
 	import Searxng from './_Searxng.svelte';
 	import Weblate from './_Weblate.svelte';
-	import Explaner from '$lib/components/Explainer.svelte';
+	import Explainer from '$lib/components/Explainer.svelte';
 
 	const { id } = $page.params;
 	$: isDisabled =
@@ -284,7 +284,7 @@
 				<div class="grid grid-cols-2 px-10">
 					<div class="flex-col ">
 						<label for="apiFqdn" class="pt-2 text-base font-bold text-stone-100"
-							>API URL <Explaner explanation={$t('application.https_explainer')} /></label
+							>API URL <Explainer explanation={$t('application.https_explainer')} /></label
 						>
 					</div>
 
@@ -304,7 +304,7 @@
 					<div class="flex-col ">
 						<label for="fqdn" class="pt-2 text-base font-bold text-stone-100"
 							>{$t('application.url_fqdn')}
-							<Explaner explanation={$t('application.https_explainer')} />
+							<Explainer explanation={$t('application.https_explainer')} />
 						</label>
 					</div>
 
@@ -367,7 +367,7 @@
 			</div>
 			<div class="grid grid-cols-2 items-center px-10">
 				<label for="exposePort" class="text-base font-bold text-stone-100"
-					>Exposed Port <Explaner
+					>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
 				>
diff --git a/apps/ui/src/routes/services/[id]/_Services/_Umami.svelte b/apps/ui/src/routes/services/[id]/_Services/_Umami.svelte
index 86cb1b804..9e6d065a1 100644
--- a/apps/ui/src/routes/services/[id]/_Services/_Umami.svelte
+++ b/apps/ui/src/routes/services/[id]/_Services/_Umami.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
-	import Explaner from '$lib/components/Explainer.svelte';
+	import Explainer from '$lib/components/Explainer.svelte';
 	export let service: any;
 </script>
 
@@ -13,7 +13,7 @@
 </div>
 <div class="grid grid-cols-2 items-center px-10">
 	<label for="umamiAdminPassword"
-		>Initial Admin Password <Explaner
+		>Initial Admin Password <Explainer
 			explanation="It could be changed in Umami. <br>This is just the password set initially after the first start."
 		/></label
 	>
diff --git a/apps/ui/src/routes/services/[id]/storages.svelte b/apps/ui/src/routes/services/[id]/storages.svelte
index 1965878e0..ee95583a5 100644
--- a/apps/ui/src/routes/services/[id]/storages.svelte
+++ b/apps/ui/src/routes/services/[id]/storages.svelte
@@ -25,7 +25,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 ServiceLinks from './_ServiceLinks.svelte';
 
 	const { id } = $page.params;
@@ -74,7 +74,7 @@
 
 <div class="mx-auto max-w-6xl rounded-xl px-6 pt-4">
 	<div class="flex justify-center py-4 text-center">
-		<Explainer
+		<SimpleExplainer
 			customClass="w-full"
 			text={'You can specify any folder that you want to be persistent across restarts. <br>This is useful for storing data for VSCode server or WordPress.'}
 		/>
diff --git a/apps/ui/src/routes/settings/global.svelte b/apps/ui/src/routes/settings/global.svelte
index db2013979..9b71109e6 100644
--- a/apps/ui/src/routes/settings/global.svelte
+++ b/apps/ui/src/routes/settings/global.svelte
@@ -19,14 +19,13 @@
 <script lang="ts">
 	export let settings: any;
 	import Setting from '$lib/components/Setting.svelte';
-	import Explainer from '$lib/components/Explainer.svelte';
 	import { del, get, post } from '$lib/api';
 	import { browser } from '$app/env';
 	import { t } from '$lib/translations';
 	import { addToast, appSession, features } from '$lib/store';
 	import { errorNotification, getDomain } from '$lib/common';
 	import Menu from './_Menu.svelte';
-	import Explaner from '$lib/components/Explainer.svelte';
+	import Explainer from '$lib/components/Explainer.svelte';
 
 	let isRegistrationEnabled = settings.isRegistrationEnabled;
 	let dualCerts = settings.dualCerts;
@@ -196,7 +195,7 @@
 						<div class="flex-col">
 							<div class="pt-2 text-base font-bold text-stone-100">
 								{$t('application.url_fqdn')}
-								<Explaner explanation={$t('setting.ssl_explainer')} />
+								<Explainer explanation={$t('setting.ssl_explainer')} />
 							</div>
 						</div>
 						<div class="justify-start text-left">
@@ -251,7 +250,7 @@
 						<div class="flex-col">
 							<div class="pt-2 text-base font-bold text-stone-100">
 								{$t('forms.public_port_range')}
-								<Explaner explanation={$t('forms.public_port_range_explainer')} />
+								<Explainer explanation={$t('forms.public_port_range_explainer')} />
 							</div>
 						</div>
 						<div class="mx-auto flex-row items-center justify-center space-y-2">
@@ -283,7 +282,7 @@
 					</div>
 					<div class="grid grid-cols-2 items-center">
 						<div class="text-base font-bold text-stone-100">
-							Custom DNS servers <Explaner
+							Custom DNS servers <Explainer
 								explanation="You can specify a custom DNS server to verify your domains all over Coolify.<br><br>By default, the OS defined DNS servers are used."
 							/>
 						</div>
diff --git a/apps/ui/src/routes/sources/[id]/_Github.svelte b/apps/ui/src/routes/sources/[id]/_Github.svelte
index b7474db74..e9b229290 100644
--- a/apps/ui/src/routes/sources/[id]/_Github.svelte
+++ b/apps/ui/src/routes/sources/[id]/_Github.svelte
@@ -7,7 +7,7 @@
 	import { dashify, errorNotification, getDomain } from '$lib/common';
 	import { addToast, appSession } from '$lib/store';
 	import { dev } from '$app/env';
-	import Explaner from '$lib/components/Explainer.svelte';
+	import Explainer from '$lib/components/Explainer.svelte';
 
 	const { id } = $page.params;
 
@@ -116,7 +116,7 @@
 				</div>
 				<div class="grid lg:grid-cols-2 items-center">
 					<label for="customPort" class="text-base font-bold text-stone-100"
-						>Custom SSH Port <Explaner
+						>Custom SSH Port <Explainer
 							explanation={'If you use a self-hosted version of Git, you can provide custom port for all the Git related actions.'}
 						/></label
 					>
@@ -133,7 +133,7 @@
 					<div class="flex flex-col">
 						<label for="organization" class="pt-2 text-base font-bold text-stone-100"
 							>Organization
-							<Explaner
+							<Explainer
 								explanation={"Fill it if you would like to use an organization's as your Git Source. Otherwise your user will be used."}
 							/></label
 						>
@@ -197,7 +197,7 @@
 				{#if selfHosted}
 					<div class="grid lg:grid-cols-2 items-center">
 						<label for="customPort" class="text-base font-bold text-stone-100"
-							>Custom SSH Port <Explaner
+							>Custom SSH Port <Explainer
 								explanation="If you use a self-hosted version of Git, you can provide custom port for all the Git related actions."
 							/></label
 						>
diff --git a/apps/ui/src/routes/sources/[id]/_Gitlab.svelte b/apps/ui/src/routes/sources/[id]/_Gitlab.svelte
index 889905da0..221d8f66a 100644
--- a/apps/ui/src/routes/sources/[id]/_Gitlab.svelte
+++ b/apps/ui/src/routes/sources/[id]/_Gitlab.svelte
@@ -11,7 +11,7 @@
 	import { t } from '$lib/translations';
 	import { errorNotification } from '$lib/common';
 	import { addToast, appSession } from '$lib/store';
-	import Explaner from '$lib/components/Explainer.svelte';
+	import Explainer from '$lib/components/Explainer.svelte';
 	const { id } = $page.params;
 
 	let url = settings.fqdn ? settings.fqdn : window.location.origin;
@@ -241,7 +241,7 @@
 			{#if selfHosted}
 				<div class="grid grid-cols-2 items-center">
 					<label for="customPort" class="text-base font-bold text-stone-100"
-						>Custom SSH Port <Explaner
+						>Custom SSH Port <Explainer
 							explanation={'If you use a self-hosted version of Git, you can provide custom port for all the Git related actions.'}
 						/></label
 					>
@@ -260,7 +260,7 @@
 					<label for="oauthId" class="pt-2 text-base font-bold text-stone-100"
 						>{$t('source.oauth_id')}
 						{#if !source.gitlabAppId}
-							<Explaner explanation={$t('source.oauth_id_explainer')} />
+							<Explainer explanation={$t('source.oauth_id_explainer')} />
 						{/if}</label
 					>
 				</div>