diff --git a/apps/ui/src/routes/applications/[id]/configuration/_GithubRepositories.svelte b/apps/ui/src/routes/applications/[id]/configuration/_GithubRepositories.svelte
index 4abf5787e..7f1f40f62 100644
--- a/apps/ui/src/routes/applications/[id]/configuration/_GithubRepositories.svelte
+++ b/apps/ui/src/routes/applications/[id]/configuration/_GithubRepositories.svelte
@@ -92,27 +92,9 @@
 			label: branch.name
 		}));
 	}
-	async function isBranchAlreadyUsed(event: any) {
+	async function selectBranch(event: any) {
 		selected.branch = event.detail.value;
-		try {
-			// const data = await get(
-			// 	`/applications/${id}/configuration/repository?repository=${selected.repository}&branch=${selected.branch}`
-			// );
-			// if (data.used) {
-			// 	const sure = confirm($t('application.configuration.branch_already_in_use'));
-			// 	if (sure) {
-			// 		selected.autodeploy = false;
-			// 		showSave = true;
-			// 		return true;
-			// 	}
-			// 	showSave = false;
-			// 	return true;
-			// }
-			showSave = true;
-		} catch (error) {
-			showSave = false;
-			return errorNotification(error);
-		}
+		showSave = true;
 	}
 
 	onMount(async () => {
@@ -178,7 +160,7 @@
 						isWaiting={loading.branches}
 						showIndicator={selected.repository && !loading.branches}
 						id="branches"
-						on:select={isBranchAlreadyUsed}
+						on:select={selectBranch}
 						items={branchSelectOptions}
 						isDisabled={loading.branches || !selected.repository}
 						isClearable={false}
@@ -186,10 +168,9 @@
 				</div></div>
 		<div class="pt-5 flex-col flex justify-center items-center space-y-4">
 			<button
-				class="btn btn-wide"
+				class="btn btn-wide btn-primary"
 				type="submit"
 				disabled={!showSave}
-				class:bg-applications={showSave}
 				>{$t('forms.save')}</button
 			>
 		</div>
diff --git a/apps/ui/src/routes/applications/[id]/configuration/_GitlabRepositories.svelte b/apps/ui/src/routes/applications/[id]/configuration/_GitlabRepositories.svelte
index 94fc11885..8f2c09ea0 100644
--- a/apps/ui/src/routes/applications/[id]/configuration/_GitlabRepositories.svelte
+++ b/apps/ui/src/routes/applications/[id]/configuration/_GitlabRepositories.svelte
@@ -195,27 +195,11 @@
 		}
 	}
 
-	async function isBranchAlreadyUsed(event) {
+	async function selectBranch(event: any) {
 		selected.branch = event.detail;
-		try {
-			// const data = await get(
-			// 	`/applications/${id}/configuration/repository?repository=${selected.project.path_with_namespace}&branch=${selected.branch.name}`
-			// );
-			// if (data.used) {
-			// 	const sure = confirm($t('application.configuration.branch_already_in_use'));
-			// 	if (sure) {
-			// 		autodeploy = false;
-			// 		showSave = true;
-			// 		return true;
-			// 	}
-			// 	showSave = false;
-			// 	return true;
-			// }
-			showSave = true;
-		} catch (error) {
-			return errorNotification(error);
-		}
+		showSave = true;
 	}
+
 	async function checkSSHKey(sshkeyUrl: any) {
 		try {
 			return await post(sshkeyUrl, {});
@@ -394,7 +378,7 @@
 				showIndicator={!loading.branches}
 				isWaiting={loading.branches}
 				isDisabled={loading.branches || !selected.project}
-				on:select={isBranchAlreadyUsed}
+				on:select={selectBranch}
 				on:clear={() => {
 					showSave = false;
 					selected.branch = null;
@@ -414,7 +398,6 @@
 			class="btn btn-wide"
 			type="submit"
 			disabled={!showSave || loading.save}
-			class:bg-applications={showSave && !loading.save}
 			>{loading.save ? $t('forms.saving') : $t('forms.save')}</button
 		>
 		{#if tryAgain}
@@ -423,7 +406,7 @@
 				configuration <a href={`/sources/${application.gitSource.id}`}>here.</a>
 			</div>
 			<button
-				class="btn btn-sm w-40 bg-green-600"
+				class="btn btn-sm w-40 btn-primary"
 				on:click|stopPropagation|preventDefault={() => window.location.reload()}
 			>
 				Try again
diff --git a/apps/ui/src/routes/applications/[id]/configuration/_PublicRepository.svelte b/apps/ui/src/routes/applications/[id]/configuration/_PublicRepository.svelte
index 49e8bcee5..f6468856f 100644
--- a/apps/ui/src/routes/applications/[id]/configuration/_PublicRepository.svelte
+++ b/apps/ui/src/routes/applications/[id]/configuration/_PublicRepository.svelte
@@ -171,7 +171,7 @@
 				placeholder="eg: https://github.com/coollabsio/nodejs-example/tree/main"
 				bind:value={publicRepositoryLink}
 			/>
-				<button class="btn bg-orange-600" disabled={loading.branches} type="submit" class:loading={loading.branches}>
+				<button class="btn btn-primary" disabled={loading.branches} type="submit" class:loading={loading.branches}>
 					Load Repository
 				</button>
 			</div>
diff --git a/apps/ui/src/routes/applications/[id]/configuration/destination.svelte b/apps/ui/src/routes/applications/[id]/configuration/destination.svelte
index 6209e851a..13e16e1ce 100644
--- a/apps/ui/src/routes/applications/[id]/configuration/destination.svelte
+++ b/apps/ui/src/routes/applications/[id]/configuration/destination.svelte
@@ -88,31 +88,111 @@
 			</div>
 		</div>
 	{:else}
-		<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row mx-auto">
+		<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row mx-auto gap-4">
 			{#each ownDestinations as destination}
-				<div class="p-2">
-					<form on:submit|preventDefault={() => handleSubmit(destination.id)}>
-						<button type="submit" class="box-selection hover:bg-sky-700 font-bold">
-							<div class="font-bold text-xl text-center truncate">{destination.name}</div>
-							<div class="text-center truncate">{destination.network}</div>
-						</button>
-					</form>
-				</div>
+				<button
+					on:click={() => handleSubmit(destination.id)}
+					class="box-selection hover:bg-primary font-bold relative"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="absolute top-0 left-0 -m-4 h-12 w-12 text-sky-500"
+						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="M22 12.54c-1.804 -.345 -2.701 -1.08 -3.523 -2.94c-.487 .696 -1.102 1.568 -.92 2.4c.028 .238 -.32 1.002 -.557 1h-14c0 5.208 3.164 7 6.196 7c4.124 .022 7.828 -1.376 9.854 -5c1.146 -.101 2.296 -1.505 2.95 -2.46z"
+						/>
+						<path d="M5 10h3v3h-3z" />
+						<path d="M8 10h3v3h-3z" />
+						<path d="M11 10h3v3h-3z" />
+						<path d="M8 7h3v3h-3z" />
+						<path d="M11 7h3v3h-3z" />
+						<path d="M11 4h3v3h-3z" />
+						<path d="M4.571 18c1.5 0 2.047 -.074 2.958 -.78" />
+						<line x1="10" y1="16" x2="10" y2="16.01" />
+					</svg>
+					{#if destination.remoteEngine}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="absolute top-0 left-9 -m-2 h-6 w-6 text-sky-500 rotate-45"
+							viewBox="0 0 24 24"
+							stroke-width="3"
+							stroke="currentColor"
+							fill="none"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+							<line x1="12" y1="18" x2="12.01" y2="18" />
+							<path d="M9.172 15.172a4 4 0 0 1 5.656 0" />
+							<path d="M6.343 12.343a8 8 0 0 1 11.314 0" />
+							<path d="M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0" />
+						</svg>
+					{/if}
+					<div class="font-bold text-xl text-center truncate">{destination.name}</div>
+					<div class="text-center truncate">{destination.network}</div>
+				</button>
 			{/each}
 		</div>
 		{#if otherDestinations.length > 0 && $appSession.teamId === '0'}
 			<div class="px-6 pb-5 pt-10 title">Other Destinations</div>
 		{/if}
-		<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row mx-auto">
+		<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row mx-auto gap-4">
 			{#each otherDestinations as destination}
-				<div class="p-2">
-					<form on:submit|preventDefault={() => handleSubmit(destination.id)}>
-						<button type="submit" class="box-selection hover:bg-sky-700 font-bold">
-							<div class="font-bold text-xl text-center truncate">{destination.name}</div>
-							<div class="text-center truncate">{destination.network}</div>
-						</button>
-					</form>
-				</div>
+				<button
+					class="box-selection hover:bg-sky-700 font-bold relative"
+					on:click={() => handleSubmit(destination.id)}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="absolute top-0 left-0 -m-4 h-12 w-12 text-sky-500"
+						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="M22 12.54c-1.804 -.345 -2.701 -1.08 -3.523 -2.94c-.487 .696 -1.102 1.568 -.92 2.4c.028 .238 -.32 1.002 -.557 1h-14c0 5.208 3.164 7 6.196 7c4.124 .022 7.828 -1.376 9.854 -5c1.146 -.101 2.296 -1.505 2.95 -2.46z"
+						/>
+						<path d="M5 10h3v3h-3z" />
+						<path d="M8 10h3v3h-3z" />
+						<path d="M11 10h3v3h-3z" />
+						<path d="M8 7h3v3h-3z" />
+						<path d="M11 7h3v3h-3z" />
+						<path d="M11 4h3v3h-3z" />
+						<path d="M4.571 18c1.5 0 2.047 -.074 2.958 -.78" />
+						<line x1="10" y1="16" x2="10" y2="16.01" />
+					</svg>
+					{#if destination.remoteEngine}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="absolute top-0 left-9 -m-2 h-6 w-6 text-sky-500 rotate-45"
+							viewBox="0 0 24 24"
+							stroke-width="3"
+							stroke="currentColor"
+							fill="none"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+							<line x1="12" y1="18" x2="12.01" y2="18" />
+							<path d="M9.172 15.172a4 4 0 0 1 5.656 0" />
+							<path d="M6.343 12.343a8 8 0 0 1 11.314 0" />
+							<path d="M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0" />
+						</svg>
+					{/if}
+					<div class="font-bold text-xl text-center truncate">{destination.name}</div>
+					<div class="text-center truncate">{destination.network}</div>
+				</button>
 			{/each}
 		</div>
 	{/if}
diff --git a/apps/ui/src/routes/applications/[id]/configuration/source.svelte b/apps/ui/src/routes/applications/[id]/configuration/source.svelte
index 4da394538..f29613198 100644
--- a/apps/ui/src/routes/applications/[id]/configuration/source.svelte
+++ b/apps/ui/src/routes/applications/[id]/configuration/source.svelte
@@ -78,10 +78,7 @@
 					{$t('application.configuration.no_configurable_git')}
 				</div>
 				<div class="flex justify-center">
-					<a
-						href="/sources/new?from={$page.url.pathname}"
-						class="add-icon bg-orange-600 hover:bg-orange-500"
-					>
+					<a href="/sources/new?from={$page.url.pathname}" class="add-icon">
 						<svg
 							class="w-6"
 							xmlns="http://www.w3.org/2000/svg"
@@ -143,7 +140,7 @@
 							<button
 								disabled={source.gitlabApp && !source.gitlabAppId}
 								type="submit"
-								class="disabled:opacity-95 bg-coolgray-200 disabled:text-white box-selection hover:bg-orange-700 group w-full lg:w-96"
+								class="disabled:opacity-95 disabled:text-white box-selection hover:btn-primary group w-full lg:w-96"
 								class:border-red-500={source.gitlabApp && !source.gitlabAppId}
 								class:border-0={source.gitlabApp && !source.gitlabAppId}
 								class:border-l-4={source.gitlabApp && !source.gitlabAppId}
diff --git a/apps/ui/src/routes/services/[id]/__layout.svelte b/apps/ui/src/routes/services/[id]/__layout.svelte
index 612a86abe..8c5988934 100644
--- a/apps/ui/src/routes/services/[id]/__layout.svelte
+++ b/apps/ui/src/routes/services/[id]/__layout.svelte
@@ -73,6 +73,7 @@
 	import { goto } from '$app/navigation';
 	import Menu from './_Menu.svelte';
 	import { saveForm } from './utils';
+	import { dev } from '$app/env';
 	const { id } = $page.params;
 
 	$isDeploymentEnabled = checkIfDeploymentEnabledServices($appSession.isAdmin, service);
@@ -254,7 +255,7 @@
 					Delete Service
 				</button>
 			{/if}
-			{#if $page.url.pathname === `/services/${id}/configuration/type`}
+			{#if $page.url.pathname === `/services/${id}/configuration/type` && dev}
 				<button
 					disabled={loading.refreshTemplates}
 					class:loading={loading.refreshTemplates}
diff --git a/apps/ui/src/routes/services/[id]/configuration/destination.svelte b/apps/ui/src/routes/services/[id]/configuration/destination.svelte
index 549a533c1..1651d3306 100644
--- a/apps/ui/src/routes/services/[id]/configuration/destination.svelte
+++ b/apps/ui/src/routes/services/[id]/configuration/destination.svelte
@@ -77,16 +77,57 @@
 			</div>
 		</div>
 	{:else}
-		<div class="flex flex-wrap justify-center">
+		<div class="flex flex-wrap justify-center gap-4">
 			{#each destinations as destination}
-				<div class="p-2">
-					<form on:submit|preventDefault={() => handleSubmit(destination.id)}>
-						<button type="submit" class="box-selection hover:bg-primary font-bold">
-							<div class="font-bold text-xl text-center truncate">{destination.name}</div>
-							<div class="text-center truncate">{destination.network}</div>
-						</button>
-					</form>
-				</div>
+				<button
+					type="submit"
+					class="box-selection hover:bg-primary font-bold relative"
+					on:click={() => handleSubmit(destination.id)}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="absolute top-0 left-0 -m-4 h-12 w-12 text-sky-500"
+						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="M22 12.54c-1.804 -.345 -2.701 -1.08 -3.523 -2.94c-.487 .696 -1.102 1.568 -.92 2.4c.028 .238 -.32 1.002 -.557 1h-14c0 5.208 3.164 7 6.196 7c4.124 .022 7.828 -1.376 9.854 -5c1.146 -.101 2.296 -1.505 2.95 -2.46z"
+						/>
+						<path d="M5 10h3v3h-3z" />
+						<path d="M8 10h3v3h-3z" />
+						<path d="M11 10h3v3h-3z" />
+						<path d="M8 7h3v3h-3z" />
+						<path d="M11 7h3v3h-3z" />
+						<path d="M11 4h3v3h-3z" />
+						<path d="M4.571 18c1.5 0 2.047 -.074 2.958 -.78" />
+						<line x1="10" y1="16" x2="10" y2="16.01" />
+					</svg>
+					{#if destination.remoteEngine}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="absolute top-0 left-9 -m-2 h-6 w-6 text-sky-500 rotate-45"
+							viewBox="0 0 24 24"
+							stroke-width="3"
+							stroke="currentColor"
+							fill="none"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+							<line x1="12" y1="18" x2="12.01" y2="18" />
+							<path d="M9.172 15.172a4 4 0 0 1 5.656 0" />
+							<path d="M6.343 12.343a8 8 0 0 1 11.314 0" />
+							<path d="M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0" />
+						</svg>
+					{/if}
+					<div class="font-bold text-xl text-center truncate">{destination.name}</div>
+					<div class="text-center truncate">{destination.network}</div>
+				</button>
 			{/each}
 		</div>
 	{/if}
diff --git a/apps/ui/src/tailwind.css b/apps/ui/src/tailwind.css
index cf9d74d9a..1aeb96abf 100644
--- a/apps/ui/src/tailwind.css
+++ b/apps/ui/src/tailwind.css
@@ -156,7 +156,7 @@ a {
 }
 
 .box-selection {
-	@apply justify-center rounded border-transparent bg-coolgray-200 p-6 hover:border-transparent hover:bg-coolgray-400;
+	@apply min-w-[16rem]  justify-center rounded border-transparent bg-coolgray-200 p-6 hover:border-transparent hover:bg-coolgray-400;
 }
 
 .lds-heart {