diff --git a/apps/ui/src/lib/components/DocLink.svelte b/apps/ui/src/lib/components/DocLink.svelte
index 407605df2..0646734be 100644
--- a/apps/ui/src/lib/components/DocLink.svelte
+++ b/apps/ui/src/lib/components/DocLink.svelte
@@ -1,37 +1,32 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
-
 	import Tooltip from './Tooltip.svelte';
-	export let isLink = false;
-	export let explanation = '';
-	let id: any;
-	let self: any;
-	onMount(() => {
-		id = `info-${self.offsetLeft}-${self.offsetTop}`;
-
-	});
+	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>
 
-<div {id} class="inline-block mx-2 text-pink-500 cursor-pointer" bind:this={self}>
+<a {id} href={url} target="_blank" class="icons inline-block text-pink-500 cursor-pointer text-xs">
 	<svg
-		fill="none"
-		height="18"
-		shape-rendering="geometricPrecision"
+		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"
-		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" />
+	>
+		<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>
-</div>
-{#if id}
-	{#if isLink}
-		LINK
-	{:else}
-		<Tooltip triggeredBy={`#${id}`}>{@html explanation}</Tooltip>
-	{/if}
-{/if}
+</a>
+<Tooltip triggeredBy={`#${id}`}>See details in the documentation</Tooltip>
diff --git a/apps/ui/src/lib/components/Explainer.svelte b/apps/ui/src/lib/components/Explainer.svelte
index 813220c67..e51934a58 100644
--- 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}
diff --git a/apps/ui/src/lib/components/Setting.svelte b/apps/ui/src/lib/components/Setting.svelte
index 339814921..b8aafbba8 100644
--- a/apps/ui/src/lib/components/Setting.svelte
+++ b/apps/ui/src/lib/components/Setting.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import DocLink from './DocLink.svelte';
+	import Explaner from './Explainer.svelte';
 	import Tooltip from './Tooltip.svelte';
 
 	export let id: any;
@@ -16,7 +16,7 @@
 <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}<DocLink explanation={description} />
+			{title}<Explaner explanation={description} />
 		</div>
 	</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 56b7fa5af..fee45aba5 100644
--- a/apps/ui/src/routes/applications/[id]/configuration/source.svelte
+++ b/apps/ui/src/routes/applications/[id]/configuration/source.svelte
@@ -32,6 +32,7 @@
 	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;
@@ -192,6 +193,9 @@
 			</div>
 		{/if}
 	</div>
-	<div class="title py-4">Public Repository <DocLink /></div>
+	<div class="flex items-center">
+		<div class="title py-4">Public Repository</div>
+		<DocLink url="https://docs.coollabs.io/coolify/applications/#public-repository" />
+	</div>
 	<PublicRepository />
 </div>
diff --git a/apps/ui/src/routes/applications/[id]/index.svelte b/apps/ui/src/routes/applications/[id]/index.svelte
index 6049a9021..9d908346d 100644
--- a/apps/ui/src/routes/applications/[id]/index.svelte
+++ b/apps/ui/src/routes/applications/[id]/index.svelte
@@ -41,7 +41,7 @@
 	import { errorNotification, getDomain, notNodeDeployments, staticDeployments } from '$lib/common';
 	import Setting from '$lib/components/Setting.svelte';
 	import Tooltip from '$lib/components/Tooltip.svelte';
-	import DocLink from '$lib/components/DocLink.svelte';
+	import Explaner from '$lib/components/Explainer.svelte';
 	const { id } = $page.params;
 
 	$: isDisabled =
@@ -447,7 +447,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')}
-						<DocLink
+						<Explaner
 							explanation={application.buildPack === 'laravel'
 								? 'For building frontend assets with webpack.'
 								: 'Image that will be used during the build process.'}
@@ -472,7 +472,7 @@
 				<div class="grid grid-cols-2 items-center">
 					<label for="baseImage" class="text-base font-bold text-stone-100"
 						>{$t('application.base_image')}
-						<DocLink explanation={'Image that will be used for the deployment.'} /></label
+						<Explaner explanation={'Image that will be used for the deployment.'} /></label
 					>
 					<div class="custom-select-wrapper">
 						<Select
@@ -492,7 +492,7 @@
 				<div class="grid grid-cols-2 items-center pb-8">
 					<label for="deploymentType" class="text-base font-bold text-stone-100"
 						>Deployment Type
-						<DocLink
+						<Explaner
 							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 +542,7 @@
 				<div class="grid grid-cols-2 items-center">
 					<label for="fqdn" class="text-base font-bold text-stone-100"
 						>{$t('application.url_fqdn')}
-						<DocLink
+						<Explaner
 							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>
@@ -648,7 +648,7 @@
 				<div class="grid grid-cols-2 items-center">
 					<label for="port" class="text-base font-bold text-stone-100"
 						>{$t('forms.port')}
-						<DocLink explanation={'The port your application listens on.'} /></label
+						<Explaner explanation={'The port your application listens on.'} /></label
 					>
 					<input
 						disabled={isDisabled}
@@ -662,7 +662,7 @@
 			{/if}
 			<div class="grid grid-cols-2 items-center">
 				<label for="exposePort" class="text-base font-bold text-stone-100"
-					>Exposed Port <DocLink
+					>Exposed Port <Explaner
 						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 +719,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 <DocLink
+						>Dockerfile Location <Explaner
 							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 +747,7 @@
 				</div>
 				<div class="grid grid-cols-2 items-center">
 					<label for="denoOptions" class="text-base font-bold text-stone-100"
-						>Arguments <DocLink
+						>Arguments <Explaner
 							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 +766,7 @@
 					<div class="flex-col">
 						<label for="baseDirectory" class="pt-2 text-base font-bold text-stone-100"
 							>{$t('forms.base_directory')}
-							<DocLink
+							<Explaner
 								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 +786,7 @@
 					<div class="flex-col">
 						<label for="publishDirectory" class="pt-2 text-base font-bold text-stone-100"
 							>{$t('forms.publish_directory')}
-							<DocLink
+							<Explaner
 								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
 						>
@@ -821,7 +821,7 @@
 				/>
 			</div>
 		{/if}
-		{#if !application.settings.isBot}
+		{#if !application.settings.isBot && !application.settings.isPublicRepository}
 			<div class="grid grid-cols-2 items-center">
 				<Setting
 					id="previews"
diff --git a/apps/ui/src/routes/databases/[id]/_Databases/_Databases.svelte b/apps/ui/src/routes/databases/[id]/_Databases/_Databases.svelte
index 42c835ddb..485ab63b2 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 DocLink from '$lib/components/DocLink.svelte';
+	import Explaner 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}
-							<DocLink
+							<Explaner
 								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 aeb39bc76..2f1599b98 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 DocLink from '$lib/components/DocLink.svelte';
+	import Explaner 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')}
-			<DocLink explanation="Could be changed while the database is running." /></label
+			<Explaner 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')} <DocLink explanation="Could be changed while the database is running." /></label
+			>{$t('forms.roots_password')} <Explaner 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 7cfab40a7..2ecc2cf91 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 DocLink from '$lib/components/DocLink.svelte';
+	import Explaner 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')}
-			<DocLink explanation="Could be changed while the database is running." /></label
+			<Explaner 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 57db96210..0c781d53e 100644
--- a/apps/ui/src/routes/databases/[id]/_Databases/_MySQL.svelte
+++ b/apps/ui/src/routes/databases/[id]/_Databases/_MySQL.svelte
@@ -4,7 +4,7 @@
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
 	import Explainer from '$lib/components/Explainer.svelte';
 	import { t } from '$lib/translations';
-import DocLink from '$lib/components/DocLink.svelte';
+import Explaner from '$lib/components/Explainer.svelte';
 </script>
 
 <div class="flex space-x-1 py-5 font-bold">
@@ -38,7 +38,7 @@ import DocLink from '$lib/components/DocLink.svelte';
 	</div>
 	<div class="grid grid-cols-2 items-center">
 		<label for="dbUserPassword" class="text-base font-bold text-stone-100"
-			>{$t('forms.password')} <DocLink explanation="Could be changed while the database is running." /></label
+			>{$t('forms.password')} <Explaner explanation="Could be changed while the database is running." /></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}
@@ -63,7 +63,7 @@ import DocLink from '$lib/components/DocLink.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')} <DocLink explanation="Could be changed while the database is running." /></label
+			>{$t('forms.roots_password')} <Explaner 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 adac28018..7f71e4d61 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 DocLink from '$lib/components/DocLink.svelte';
+	import Explaner 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 <DocLink
+			>Postgres User Password <Explaner
 				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')}
-			<DocLink explanation="Could be changed while the database is running." /></label
+			<Explaner 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 4538fa908..ba780a878 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 DocLink from '$lib/components/DocLink.svelte';
+	import Explaner 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')}
-			<DocLink explanation="Could be changed while the database is running." /></label
+			<Explaner explanation="Could be changed while the database is running." /></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}
diff --git a/apps/ui/src/routes/services/[id]/_Services/_Ghost.svelte b/apps/ui/src/routes/services/[id]/_Services/_Ghost.svelte
index 745955f1d..13372c936 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 DocLink from '$lib/components/DocLink.svelte';
+	import Explaner 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 <DocLink explanation="You can change these values in the Ghost admin panel." />
+		Ghost <Explaner 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 f704c039f..034c37903 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 DocLink from '$lib/components/DocLink.svelte';
+	import Explaner 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 <DocLink
+		>Script Name <Explaner
 			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 de53039a9..148b5d665 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 DocLink from '$lib/components/DocLink.svelte';
+	import Explaner 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 <DocLink explanation={$t('application.https_explainer')} /></label
+							>API URL <Explaner 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')}
-							<DocLink explanation={$t('application.https_explainer')} />
+							<Explaner explanation={$t('application.https_explainer')} />
 						</label>
 					</div>
 
@@ -366,7 +366,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 <DocLink
+					>Exposed Port <Explaner
 						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 74dc22152..86cb1b804 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 DocLink from '$lib/components/DocLink.svelte';
+	import Explaner 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 <DocLink
+		>Initial Admin Password <Explaner
 			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/settings/global.svelte b/apps/ui/src/routes/settings/global.svelte
index 263845d42..bebacd17e 100644
--- a/apps/ui/src/routes/settings/global.svelte
+++ b/apps/ui/src/routes/settings/global.svelte
@@ -26,7 +26,7 @@
 	import { addToast, appSession, features } from '$lib/store';
 	import { errorNotification, getDomain } from '$lib/common';
 	import Menu from './_Menu.svelte';
-	import DocLink from '$lib/components/DocLink.svelte';
+	import Explaner from '$lib/components/Explainer.svelte';
 
 	let isRegistrationEnabled = settings.isRegistrationEnabled;
 	let dualCerts = settings.dualCerts;
@@ -196,7 +196,7 @@
 						<div class="flex-col">
 							<div class="pt-2 text-base font-bold text-stone-100">
 								{$t('application.url_fqdn')}
-								<DocLink explanation={$t('setting.ssl_explainer')} />
+								<Explaner explanation={$t('setting.ssl_explainer')} />
 							</div>
 						</div>
 						<div class="justify-start text-left">
@@ -251,7 +251,7 @@
 						<div class="flex-col">
 							<div class="pt-2 text-base font-bold text-stone-100">
 								{$t('forms.public_port_range')}
-								<DocLink explanation={$t('forms.public_port_range_explainer')} />
+								<Explaner explanation={$t('forms.public_port_range_explainer')} />
 							</div>
 						</div>
 						<div class="mx-auto flex-row items-center justify-center space-y-2">
@@ -283,7 +283,7 @@
 					</div>
 					<div class="grid grid-cols-2 items-center">
 						<div class="text-base font-bold text-stone-100">
-							Custom DNS servers <DocLink
+							Custom DNS servers <Explaner
 								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 2639d87bd..b7474db74 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 DocLink from '$lib/components/DocLink.svelte';
+	import Explaner 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 <DocLink
+						>Custom SSH Port <Explaner
 							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
-							<DocLink
+							<Explaner
 								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 <DocLink
+							>Custom SSH Port <Explaner
 								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 a5329a777..889905da0 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 DocLink from '$lib/components/DocLink.svelte';
+	import Explaner 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 <DocLink
+						>Custom SSH Port <Explaner
 							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}
-							<DocLink explanation={$t('source.oauth_id_explainer')} />
+							<Explaner explanation={$t('source.oauth_id_explainer')} />
 						{/if}</label
 					>
 				</div>