diff --git a/apps/ui/src/lib/components/Setting.svelte b/apps/ui/src/lib/components/Setting.svelte
index c64759c86..30f45755b 100644
--- a/apps/ui/src/lib/components/Setting.svelte
+++ b/apps/ui/src/lib/components/Setting.svelte
@@ -18,6 +18,7 @@
 </div>
 <div
 	class:tooltip-right={dataTooltip}
+	class:tooltip-primary={dataTooltip}
 	class:tooltip={dataTooltip}
 	class:text-center={isCenter}
 	data-tip={dataTooltip}
diff --git a/apps/ui/src/lib/components/UpdateAvailable.svelte b/apps/ui/src/lib/components/UpdateAvailable.svelte
index 463f4278c..ba27d001b 100644
--- a/apps/ui/src/lib/components/UpdateAvailable.svelte
+++ b/apps/ui/src/lib/components/UpdateAvailable.svelte
@@ -82,7 +82,8 @@
 			<button
 				disabled={updateStatus.success === false}
 				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
diff --git a/apps/ui/src/routes/__layout.svelte b/apps/ui/src/routes/__layout.svelte
index b2f19e7b2..f05acc5b0 100644
--- a/apps/ui/src/routes/__layout.svelte
+++ b/apps/ui/src/routes/__layout.svelte
@@ -126,7 +126,7 @@
 				<a
 					sveltekit:prefetch
 					href="/"
-					class="icons tooltip tooltip-right bg-coolgray-200 hover:text-white"
+					class="icons tooltip tooltip-right tooltip-primary bg-coolgray-200 hover:text-white"
 					class:text-white={$page.url.pathname === '/'}
 					class:bg-coolgray-500={$page.url.pathname === '/'}
 					data-tip="Dashboard"
@@ -153,7 +153,7 @@
 				<a
 					sveltekit:prefetch
 					href="/applications"
-					class="icons tooltip  tooltip-right bg-coolgray-200"
+					class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200"
 					class:text-applications={$page.url.pathname.startsWith('/applications') ||
 						$page.url.pathname.startsWith('/new/application')}
 					class:bg-coolgray-500={$page.url.pathname.startsWith('/applications') ||
@@ -181,7 +181,7 @@
 				<a
 					sveltekit:prefetch
 					href="/sources"
-					class="icons tooltip  tooltip-right bg-coolgray-200"
+					class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200"
 					class:text-sources={$page.url.pathname.startsWith('/sources') ||
 						$page.url.pathname.startsWith('/new/source')}
 					class:bg-coolgray-500={$page.url.pathname.startsWith('/sources') ||
@@ -210,7 +210,7 @@
 				<a
 					sveltekit:prefetch
 					href="/destinations"
-					class="icons tooltip  tooltip-right bg-coolgray-200"
+					class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200"
 					class:text-destinations={$page.url.pathname.startsWith('/destinations') ||
 						$page.url.pathname.startsWith('/new/destination')}
 					class:bg-coolgray-500={$page.url.pathname.startsWith('/destinations') ||
@@ -245,7 +245,7 @@
 				<a
 					sveltekit:prefetch
 					href="/databases"
-					class="icons tooltip  tooltip-right bg-coolgray-200"
+					class="icons tooltip tooltip-primary  tooltip-right bg-coolgray-200"
 					class:text-databases={$page.url.pathname.startsWith('/databases') ||
 						$page.url.pathname.startsWith('/new/database')}
 					class:bg-coolgray-500={$page.url.pathname.startsWith('/databases') ||
@@ -271,7 +271,7 @@
 				<a
 					sveltekit:prefetch
 					href="/services"
-					class="icons tooltip  tooltip-right bg-coolgray-200"
+					class="icons tooltip tooltip-primary  tooltip-right bg-coolgray-200"
 					class:text-services={$page.url.pathname.startsWith('/services') ||
 						$page.url.pathname.startsWith('/new/service')}
 					class:bg-coolgray-500={$page.url.pathname.startsWith('/services') ||
@@ -300,7 +300,7 @@
 				<a
 					sveltekit:prefetch
 					href="/iam"
-					class="icons tooltip  tooltip-right bg-coolgray-200"
+					class="icons tooltip tooltip-primary  tooltip-right bg-coolgray-200"
 					class:text-iam={$page.url.pathname.startsWith('/iam')}
 					class:bg-coolgray-500={$page.url.pathname.startsWith('/iam')}
 					data-tip="IAM"
@@ -324,7 +324,7 @@
 				<a
 					sveltekit:prefetch
 					href={$appSession.teamId === '0' ? '/settings/global' : '/settings/ssh-keys'}
-					class="icons tooltip  tooltip-right bg-coolgray-200"
+					class="icons tooltip tooltip-primary  tooltip-right bg-coolgray-200"
 					class:text-settings={$page.url.pathname.startsWith('/settings')}
 					class:bg-coolgray-500={$page.url.pathname.startsWith('/settings')}
 					data-tip="Settings"
@@ -348,7 +348,7 @@
 				</a>
 
 				<div
-					class="icons tooltip  tooltip-right bg-coolgray-200 hover:text-error"
+					class="icons tooltip tooltip-primary  tooltip-right bg-coolgray-200 hover:text-error"
 					data-tip="Logout"
 					on:click={logout}
 				>
diff --git a/apps/ui/src/routes/applications/[id]/__layout.svelte b/apps/ui/src/routes/applications/[id]/__layout.svelte
index c91fe6307..9a165b635 100644
--- a/apps/ui/src/routes/applications/[id]/__layout.svelte
+++ b/apps/ui/src/routes/applications/[id]/__layout.svelte
@@ -179,7 +179,7 @@
 		{#if $status.application.isExited}
 			<a
 				href={!$disabledButton ? `/applications/${id}/logs` : null}
-				class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center text-error"
+				class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm flex items-center text-error"
 				data-tip="Application exited with an error!"
 				sveltekit:prefetch
 			>
@@ -230,7 +230,7 @@
 				on:click={stopApplication}
 				type="submit"
 				disabled={$disabledButton}
-				class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center space-x-2 text-error"
+				class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm flex items-center space-x-2 text-error"
 				data-tip={$appSession.isAdmin
 					? $t('application.stop_application')
 					: $t('application.permission_denied_stop_application')}
@@ -255,7 +255,7 @@
 					type="submit"
 					disabled={$disabledButton || !isQueueActive}
 					class:hover:text-green-500={isQueueActive}
-					class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center space-x-2"
+					class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm flex items-center space-x-2"
 					data-tip={$appSession.isAdmin
 						? isQueueActive
 							? 'Rebuild application'
@@ -285,7 +285,7 @@
 				<button
 					type="submit"
 					disabled={$disabledButton}
-					class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center space-x-2 text-success"
+					class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm flex items-center space-x-2 text-success"
 					data-tip={$appSession.isAdmin
 						? 'Deploy'
 						: 'You do not have permission to deploy application.'}
@@ -317,7 +317,7 @@
 		>
 			<button
 				disabled={$disabledButton}
-				class="icons bg-transparent tooltip tooltip-bottom text-sm"
+				class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm"
 				data-tip="Configurations"
 			>
 				<svg
@@ -383,7 +383,7 @@
 		>
 			<button
 				disabled={$disabledButton}
-				class="icons bg-transparent tooltip tooltip-bottom text-sm"
+				class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm"
 				data-tip="Persistent Storages"
 			>
 				<svg
@@ -412,7 +412,7 @@
 		>
 			<button
 				disabled={$disabledButton}
-				class="icons bg-transparent tooltip tooltip-bottom text-sm"
+				class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm"
 				data-tip="Previews"
 			>
 				<svg
@@ -444,7 +444,7 @@
 		>
 			<button
 				disabled={$disabledButton || !$status.application.isRunning}
-				class="icons bg-transparent tooltip tooltip-bottom text-sm"
+				class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm"
 				data-tip={$t('application.logs')}
 			>
 				<svg
@@ -475,7 +475,7 @@
 		>
 			<button
 				disabled={$disabledButton}
-				class="icons bg-transparent tooltip tooltip-bottom text-sm"
+				class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm"
 				data-tip="Build Logs"
 			>
 				<svg
diff --git a/apps/ui/src/routes/applications/[id]/logs/_BuildLog.svelte b/apps/ui/src/routes/applications/[id]/logs/_BuildLog.svelte
index 1fea3325a..cb0056b6b 100644
--- a/apps/ui/src/routes/applications/[id]/logs/_BuildLog.svelte
+++ b/apps/ui/src/routes/applications/[id]/logs/_BuildLog.svelte
@@ -109,7 +109,7 @@
 			<div class="flex justify-end sticky top-0 p-1 mx-1">
 				<button
 					on:click={followBuild}
-					class="bg-transparent tooltip tooltip-bottom hover:text-green-500 hover:bg-coolgray-500"
+					class="bg-transparent tooltip tooltip-primary tooltip-bottom hover:text-green-500 hover:bg-coolgray-500"
 					data-tip="Follow logs"
 					class:text-green-500={followingBuild}
 				>
@@ -134,7 +134,7 @@
 					<button
 						on:click={cancelBuild}
 						class:animation-spin={cancelInprogress}
-						class="bg-transparent hover:text-red-500 hover:bg-coolgray-500 tooltip tooltip-bottom"
+						class="bg-transparent hover:text-red-500 hover:bg-coolgray-500 tooltip tooltip-primary tooltip-bottom"
 						data-tip="Cancel build"
 					>
 						{#if cancelInprogress}
diff --git a/apps/ui/src/routes/applications/[id]/logs/build.svelte b/apps/ui/src/routes/applications/[id]/logs/build.svelte
index 3e4d584b6..7e2f6ff81 100644
--- a/apps/ui/src/routes/applications/[id]/logs/build.svelte
+++ b/apps/ui/src/routes/applications/[id]/logs/build.svelte
@@ -143,7 +143,7 @@
 					on:click={() => loadBuild(build.id)}
 					class:rounded-tr={index === 0}
 					class:rounded-br={index === builds.length - 1}
-					class="tooltip tooltip-top flex cursor-pointer items-center justify-center border-l-2 py-4 no-underline transition-all duration-100 hover:bg-coolgray-400 hover:shadow-xl"
+					class="tooltip tooltip-primary tooltip-top flex cursor-pointer items-center justify-center border-l-2 py-4 no-underline transition-all duration-100 hover:bg-coolgray-400 hover:shadow-xl"
 					class:bg-coolgray-400={buildId === build.id}
 					class:border-red-500={build.status === 'failed'}
 					class:border-green-500={build.status === 'success'}
diff --git a/apps/ui/src/routes/applications/[id]/logs/index.svelte b/apps/ui/src/routes/applications/[id]/logs/index.svelte
index 7a8af9390..ae19aba27 100644
--- a/apps/ui/src/routes/applications/[id]/logs/index.svelte
+++ b/apps/ui/src/routes/applications/[id]/logs/index.svelte
@@ -147,7 +147,7 @@
 			<div class="flex justify-end sticky top-0 p-1 mx-1">
 				<button
 					on:click={followBuild}
-					class="bg-transparent tooltip tooltip-bottom"
+					class="bg-transparent tooltip tooltip-primary tooltip-bottom"
 					data-tip="Follow logs"
 					class:text-green-500={followingLogs}
 				>
diff --git a/apps/ui/src/routes/databases/[id]/__layout.svelte b/apps/ui/src/routes/databases/[id]/__layout.svelte
index 0741a30a1..5337173fa 100644
--- a/apps/ui/src/routes/databases/[id]/__layout.svelte
+++ b/apps/ui/src/routes/databases/[id]/__layout.svelte
@@ -144,7 +144,7 @@
 				{#if $status.database.isExited}
 					<a
 						href={!$disabledButton ? `/databases/${id}/logs` : null}
-						class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center text-red-500 tooltip-error"
+						class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm flex items-center text-red-500 tooltip-error"
 						data-tip="Service exited with an error!"
 						sveltekit:prefetch
 					>
@@ -220,7 +220,7 @@
 						on:click={startDatabase}
 						type="submit"
 						disabled={!$appSession.isAdmin}
-						class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center space-x-2 text-green-500"
+						class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm flex items-center space-x-2 text-green-500"
 						data-tip={$appSession.isAdmin
 							? $t('database.start_database')
 							: $t('database.permission_denied_start_database')}
@@ -285,7 +285,7 @@
 			>
 				<button
 					disabled={!$status.database.isRunning}
-					class="icons bg-transparent tooltip tooltip-bottom text-sm"
+					class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm"
 					data-tip={$t('database.logs')}
 				>
 					<svg
@@ -312,7 +312,7 @@
 				type="submit"
 				disabled={!$appSession.isAdmin}
 				class:hover:text-red-500={$appSession.isAdmin}
-				class="icons bg-transparent tooltip tooltip-bottom text-sm"
+				class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm"
 				data-tip={$appSession.isAdmin
 					? $t('database.delete_database')
 					: $t('database.permission_denied_delete_database')}><DeleteIcon /></button
diff --git a/apps/ui/src/routes/databases/[id]/logs/index.svelte b/apps/ui/src/routes/databases/[id]/logs/index.svelte
index 624afad05..0fadb4cc6 100644
--- a/apps/ui/src/routes/databases/[id]/logs/index.svelte
+++ b/apps/ui/src/routes/databases/[id]/logs/index.svelte
@@ -130,7 +130,7 @@
 			<div class="flex justify-end sticky top-0 p-1 mx-1">
 				<button
 					on:click={followBuild}
-					class="bg-transparent tooltip tooltip-bottom"
+					class="bg-transparent tooltip tooltip-primary tooltip-bottom"
 					data-tip="Follow logs"
 					class:text-green-500={followingLogs}
 				>
diff --git a/apps/ui/src/routes/destinations/[id]/__layout.svelte b/apps/ui/src/routes/destinations/[id]/__layout.svelte
index 6a420ddb1..bf774266f 100644
--- a/apps/ui/src/routes/destinations/[id]/__layout.svelte
+++ b/apps/ui/src/routes/destinations/[id]/__layout.svelte
@@ -91,7 +91,7 @@
 			type="submit"
 			disabled={!$appSession.isAdmin && isDestinationDeletable}
 			class:hover:text-red-500={$appSession.isAdmin && isDestinationDeletable}
-			class="icons tooltip tooltip-left bg-transparent text-sm"
+			class="icons tooltip tooltip-primary tooltip-left bg-transparent text-sm"
 			class:text-stone-600={!isDestinationDeletable}
 			data-tip={deletable()}><DeleteIcon /></button
 		>
diff --git a/apps/ui/src/routes/iam/team/[id]/__layout.svelte b/apps/ui/src/routes/iam/team/[id]/__layout.svelte
index 32f8d9cbd..ff308d5db 100644
--- a/apps/ui/src/routes/iam/team/[id]/__layout.svelte
+++ b/apps/ui/src/routes/iam/team/[id]/__layout.svelte
@@ -52,7 +52,7 @@
 			type="submit"
 			disabled={!$appSession.isAdmin}
 			class:hover:text-red-500={$appSession.isAdmin}
-			class="icons tooltip tooltip-left bg-transparent text-sm"
+			class="icons tooltip tooltip-primary tooltip-left bg-transparent text-sm"
 			data-tip={$appSession.isAdmin
 				? 'Delete'
 				: $t('destination.permission_denied_delete_destination')}><DeleteIcon /></button
diff --git a/apps/ui/src/routes/services/[id]/__layout.svelte b/apps/ui/src/routes/services/[id]/__layout.svelte
index 3503c4568..d3ab9d1ae 100644
--- a/apps/ui/src/routes/services/[id]/__layout.svelte
+++ b/apps/ui/src/routes/services/[id]/__layout.svelte
@@ -177,7 +177,7 @@
 			{#if $status.service.isExited}
 				<a
 					href={!$disabledButton ? `/services/${id}/logs` : null}
-					class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center text-red-500 tooltip-error"
+					class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm flex items-center text-red-500 tooltip-error"
 					data-tip="Service exited with an error!"
 					sveltekit:prefetch
 				>
@@ -228,7 +228,7 @@
 					on:click={stopService}
 					type="submit"
 					disabled={$disabledButton}
-					class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center space-x-2 text-red-500"
+					class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm flex items-center space-x-2 text-red-500"
 					data-tip={$appSession.isAdmin
 						? $t('service.stop_service')
 						: $t('service.permission_denied_stop_service')}
@@ -253,7 +253,7 @@
 					on:click={startService}
 					type="submit"
 					disabled={$disabledButton}
-					class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center space-x-2 text-green-500"
+					class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm flex items-center space-x-2 text-green-500"
 					data-tip={$appSession.isAdmin
 						? $t('service.start_service')
 						: $t('service.permission_denied_start_service')}
@@ -283,7 +283,7 @@
 				class:bg-coolgray-500={$page.url.pathname === `/services/${id}`}
 			>
 				<button
-					class="icons bg-transparent tooltip tooltip-bottom text-sm disabled:text-red-500"
+					class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm disabled:text-red-500"
 					data-tip={$t('application.configurations')}
 				>
 					<svg
@@ -317,7 +317,7 @@
 				class:bg-coolgray-500={$page.url.pathname === `/services/${id}/secrets`}
 			>
 				<button
-					class="icons bg-transparent tooltip tooltip-bottom text-sm disabled:text-red-500"
+					class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm disabled:text-red-500"
 					data-tip={$t('application.secret')}
 				>
 					<svg
@@ -347,7 +347,7 @@
 				class:bg-coolgray-500={$page.url.pathname === `/services/${id}/storages`}
 			>
 				<button
-					class="icons bg-transparent tooltip tooltip-bottom text-sm disabled:text-red-500"
+					class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm disabled:text-red-500"
 					data-tip="Persistent Storage"
 				>
 					<svg
@@ -377,7 +377,7 @@
 			>
 				<button
 					disabled={!$status.service.isRunning}
-					class="icons bg-transparent tooltip tooltip-bottom text-sm"
+					class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm"
 					data-tip={$t('service.logs')}
 				>
 					<svg
@@ -405,7 +405,7 @@
 			type="submit"
 			disabled={!$appSession.isAdmin}
 			class:hover:text-red-500={$appSession.isAdmin}
-			class="icons bg-transparent tooltip tooltip-bottom text-sm"
+			class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm"
 			data-tip={$appSession.isAdmin
 				? $t('service.delete_service')
 				: $t('service.permission_denied_delete_service')}><DeleteIcon /></button
diff --git a/apps/ui/src/routes/services/[id]/logs/index.svelte b/apps/ui/src/routes/services/[id]/logs/index.svelte
index baded348b..d10a28d4f 100644
--- a/apps/ui/src/routes/services/[id]/logs/index.svelte
+++ b/apps/ui/src/routes/services/[id]/logs/index.svelte
@@ -127,7 +127,7 @@
 			<div class="flex justify-end sticky top-0 p-1 mx-1">
 				<button
 					on:click={followBuild}
-					class="bg-transparent tooltip tooltip-bottom"
+					class="bg-transparent tooltip tooltip-primary tooltip-bottom"
 					data-tip="Follow logs"
 					class:text-green-500={followingLogs}
 				>
diff --git a/apps/ui/src/routes/sources/[id]/__layout.svelte b/apps/ui/src/routes/sources/[id]/__layout.svelte
index 1a81b63a4..d92054bb8 100644
--- a/apps/ui/src/routes/sources/[id]/__layout.svelte
+++ b/apps/ui/src/routes/sources/[id]/__layout.svelte
@@ -59,7 +59,7 @@
 			type="submit"
 			disabled={!$appSession.isAdmin}
 			class:hover:text-red-500={$appSession.isAdmin}
-			class="icons tooltip tooltip-bottom bg-transparent text-sm"
+			class="icons tooltip tooltip-primary tooltip-bottom bg-transparent text-sm"
 			data-tip={$appSession.isAdmin
 				? $t('source.delete_git_source')
 				: $t('source.permission_denied')}><DeleteIcon /></button