diff --git a/apps/ui/src/lib/components/Toast.svelte b/apps/ui/src/lib/components/Toast.svelte
index 493d09426..cdffbec4a 100644
--- a/apps/ui/src/lib/components/Toast.svelte
+++ b/apps/ui/src/lib/components/Toast.svelte
@@ -4,7 +4,7 @@
 	export let type = 'info';
 	function success() {
 		if (type === 'success') {
-			return 'bg-gradient-to-r from-coollabs to-pink-500';
+			return 'bg-gradient-to-r from-purple-500 via-pink-500 to-red-500';
 		}
 	}
 </script>
@@ -15,7 +15,7 @@
 	on:focus={() => dispatch('pause')}
 	on:mouseout={() => dispatch('resume')}
 	on:blur={() => dispatch('resume')}
-	class={`alert shadow-lg text-white hover:scale-105 transition-all duration-100 cursor-pointer rounded ${success()}`}
+	class={`flex flex-row alert shadow-lg text-white hover:scale-105 transition-all duration-100 cursor-pointer rounded ${success()}`}
 	class:alert-error={type === 'error'}
 	class:alert-info={type === 'info'}
 >
diff --git a/apps/ui/src/lib/components/UpdateAvailable.svelte b/apps/ui/src/lib/components/UpdateAvailable.svelte
index 983ebd3f1..cf95265b5 100644
--- a/apps/ui/src/lib/components/UpdateAvailable.svelte
+++ b/apps/ui/src/lib/components/UpdateAvailable.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
 	import { dev } from '$app/env';
 	import { get, post } from '$lib/api';
-	import { addToast, appSession, features } from '$lib/store';
+	import { addToast, appSession, features, updateLoading, isUpdateAvailable } from '$lib/store';
 	import { asyncSleep, errorNotification } from '$lib/common';
 	import { onMount } from 'svelte';
 	import Tooltip from './Tooltip.svelte';
 
-	let isUpdateAvailable = false;
 	let updateStatus: any = {
 		found: false,
 		loading: false,
@@ -58,37 +57,41 @@
 		if ($appSession.userId) {
 			const overrideVersion = $features.latestVersion;
 			if ($appSession.teamId === '0') {
+				if ($updateLoading === true) return;
 				try {
+					$updateLoading = true;
 					const data = await get(`/update`);
 					if (overrideVersion || data?.isUpdateAvailable) {
 						latestVersion = overrideVersion || data.latestVersion;
 						if (overrideVersion) {
-							isUpdateAvailable = true;
+							$isUpdateAvailable = true;
 						} else {
-							isUpdateAvailable = data.isUpdateAvailable;
+							$isUpdateAvailable = data.isUpdateAvailable;
 						}
 					}
 				} catch (error) {
 					return errorNotification(error);
+				} finally {
+					$updateLoading = false;
 				}
 			}
 		}
 	});
 </script>
 
-<div class="py-2">
+<div class="py-0 lg:py-2">
 	{#if $appSession.teamId === '0'}
-		{#if isUpdateAvailable}
+		{#if $isUpdateAvailable}
 			<button
 				id="update"
 				disabled={updateStatus.success === false}
 				on:click={update}
-				class="icons bg-gradient-to-r from-coollabs to-pink-500 text-white duration-75 hover:scale-105"
+				class="icons bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white duration-75 hover:scale-105  w-full"
 			>
 				{#if updateStatus.loading}
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="lds-heart h-9 w-8"
+						class="lds-heart h-8 w-8"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
@@ -102,24 +105,27 @@
 						/>
 					</svg>
 				{:else if updateStatus.success === null}
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-9 w-8"
-						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" />
-						<circle cx="12" cy="12" r="9" />
-						<line x1="12" y1="8" x2="8" y2="12" />
-						<line x1="12" y1="8" x2="12" y2="16" />
-						<line x1="16" y1="12" x2="12" y2="8" />
-					</svg>
+					<div class="flex items-center justify-center space-x-2">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-8 w-8"
+							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" />
+							<circle cx="12" cy="12" r="9" />
+							<line x1="12" y1="8" x2="8" y2="12" />
+							<line x1="12" y1="8" x2="12" y2="16" />
+							<line x1="16" y1="12" x2="12" y2="8" />
+						</svg>
+						<span class="flex lg:hidden">Update available</span>
+					</div>
 				{:else if updateStatus.success}
-					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="h-9 w-8"
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="h-8 w-8"
 						><path
 							fill="#DD2E44"
 							d="M11.626 7.488c-.112.112-.197.247-.268.395l-.008-.008L.134 33.141l.011.011c-.208.403.14 1.223.853 1.937.713.713 1.533 1.061 1.936.853l.01.01L28.21 24.735l-.008-.009c.147-.07.282-.155.395-.269 1.562-1.562-.971-6.627-5.656-11.313-4.687-4.686-9.752-7.218-11.315-5.656z"
@@ -184,7 +190,9 @@
 					>
 				{/if}
 			</button>
-			<Tooltip triggeredBy="#update" placement="right" color="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500">New Version Available!</Tooltip>
+			<Tooltip triggeredBy="#update" placement="right" color="bg-coolgray-200 text-white"
+				>New Version Available!</Tooltip
+			>
 		{/if}
 	{/if}
 </div>
diff --git a/apps/ui/src/lib/store.ts b/apps/ui/src/lib/store.ts
index 19ee6dfe9..4e8244e29 100644
--- a/apps/ui/src/lib/store.ts
+++ b/apps/ui/src/lib/store.ts
@@ -26,7 +26,8 @@ interface AddToast {
     message: string,
     timeout?: number | undefined
 }
-
+export const updateLoading: Writable<boolean> = writable(false);
+export const isUpdateAvailable: Writable<boolean> = writable(false);
 export const search: any = writable('')
 export const loginEmail: Writable<string | undefined> = writable()
 export const appSession: Writable<AppSession> = writable({
diff --git a/apps/ui/src/routes/__layout.svelte b/apps/ui/src/routes/__layout.svelte
index 1cdcd5d81..32fa383f1 100644
--- a/apps/ui/src/routes/__layout.svelte
+++ b/apps/ui/src/routes/__layout.svelte
@@ -195,8 +195,9 @@
 					<Tooltip triggeredBy="#dashboard" placement="right">Dashboard</Tooltip>
 					<Tooltip triggeredBy="#servers" placement="right">Servers</Tooltip>
 					<div class="flex-1" />
-
-					<UpdateAvailable />
+					<div class="lg:block hidden">
+						<UpdateAvailable />
+					</div>
 					<div class="flex flex-col space-y-2 py-2">
 						<a
 							id="iam"
@@ -301,7 +302,6 @@
 				{#if !$appSession.whiteLabeled}
 					<h3 class="mb-0 text-white">Coolify</h3>
 				{/if}
-				<UpdateAvailable />
 			</div>
 		</div>
 		<main>
@@ -416,6 +416,10 @@
 					Settings
 				</a>
 			</li>
+			<li class="flex-1 bg-transparent" />
+			<div class="block lg:hidden">
+				<UpdateAvailable />
+			</div>
 			<li>
 				<div class="no-underline icons hover:bg-error" on:click={logout}>
 					<svg
@@ -437,12 +441,11 @@
 					<div class="-ml-1">Logout</div>
 				</div>
 			</li>
-			<li class="flex-1 bg-transparent" />
-			<li class="w-full justify-center">
+			<li class="w-full">
 				<a
-					class="text-xs hover:bg-coolgray-200 no-underline hover:text-white"
+					class="text-xs hover:bg-coolgray-200 no-underline hover:text-white text-right"
 					href={`https://github.com/coollabsio/coolify/releases/tag/v${$appSession.version}`}
-					target="_blank">Changelog: v{$appSession.version}</a
+					target="_blank">v{$appSession.version}</a
 				>
 			</li>
 		</ul>
diff --git a/apps/ui/src/routes/applications/[id]/__layout.svelte b/apps/ui/src/routes/applications/[id]/__layout.svelte
index 9a65bfc00..2b7f18518 100644
--- a/apps/ui/src/routes/applications/[id]/__layout.svelte
+++ b/apps/ui/src/routes/applications/[id]/__layout.svelte
@@ -260,7 +260,7 @@
 		{/if}
 	</div>
 	<div class="lg:block hidden flex-1" />
-	<div class="flex flex-row flex-wrap space-x-3 justify-center lg:justify-start lg:py-0">
+	<div class="flex flex-row flex-wrap space-x-3 justify-center lg:justify-start lg:py-0 px-12 lg:px-0">
 		{#if $location}
 			<a id="open" href={$location} target="_blank" class="icons bg-transparent"
 				><svg
diff --git a/apps/ui/src/routes/applications/[id]/index.svelte b/apps/ui/src/routes/applications/[id]/index.svelte
index e25068aaa..12625e4e6 100644
--- a/apps/ui/src/routes/applications/[id]/index.svelte
+++ b/apps/ui/src/routes/applications/[id]/index.svelte
@@ -48,6 +48,7 @@
 	import Tooltip from '$lib/components/Tooltip.svelte';
 	import Explainer from '$lib/components/Explainer.svelte';
 	import { goto } from '$app/navigation';
+	import { fade } from 'svelte/transition';
 
 	const { id } = $page.params;
 
@@ -295,7 +296,7 @@
 </script>
 
 {#if $status.application.isRunning}
-	<div class="mx-auto max-w-6xl px-6 lg:my-0 my-4 lg:pt-0 pt-4 rounded">
+	<div class="mx-auto max-w-6xl px-6 lg:my-0 my-4 lg:pt-0 pt-4 rounded" in:fade>
 		<div class="text-center">
 			<div class="stat w-64">
 				<div class="stat-title">Used Memory / Memory Limit</div>
diff --git a/apps/ui/src/routes/servers/index.svelte b/apps/ui/src/routes/servers/index.svelte
index 1bf710fe4..dc8844ff0 100644
--- a/apps/ui/src/routes/servers/index.svelte
+++ b/apps/ui/src/routes/servers/index.svelte
@@ -32,7 +32,7 @@
 <div class="header">
 	<h1 class="text-2xl font-bold">Servers</h1>
 </div>
-<div class="container lg:mx-auto lg:p-0 px-8 p-5 lg:pt-20">
+<div class="container lg:mx-auto lg:p-0 px-8 p-5">
 	{#if servers.length > 0}
 		<div class="grid grid-col gap-8 auto-cols-max grid-cols-1  p-4">
 			{#each servers as server}
diff --git a/apps/ui/src/routes/settings/global.svelte b/apps/ui/src/routes/settings/global.svelte
index 0be1cc125..b9028a09e 100644
--- a/apps/ui/src/routes/settings/global.svelte
+++ b/apps/ui/src/routes/settings/global.svelte
@@ -200,13 +200,10 @@
 <div class="mx-auto w-full">
 	<div class="flex lg:flex-row flex-col">
 		<Menu />
-		<div class="mt-5">
 			<form on:submit|preventDefault={handleSubmit}>
-				<div
-					class="flex flex-col space-y-2 p-6 lg:p-0 lg:flex-row lg:space-y0 lg:space-x-4 w-full lg:justify-between lg:items-center mb-5"
-				>
+				<div class="flex flex-col lg:flex-row flex-wrap items-center space-x-3 justify-center lg:justify-start lg:py-0 px-4">
 					<div class="title font-bold">{$t('index.global_settings')}</div>
-					<div class="flex lg:flex-row lg:space-x-4 flex-col space-y-2 lg:space-y-0">
+					<div class="flex lg:flex-row lg:space-x-4 flex-col space-y-2 lg:space-y-0 py-4">
 						<button
 							class="btn btn-sm bg-settings text-black"
 							type="submit"
@@ -235,125 +232,142 @@
 						>
 					</div>
 				</div>
-				<div class="grid gap-4 grid-cols-2 auto-rows-max lg:px-10 p-6">
-					<div class="pt-2 text-base font-bold text-stone-100">
-						{$t('application.url_fqdn')}
-						<Explainer explanation={$t('setting.ssl_explainer')} />
-					</div>
-					<input
-						class="w-full"
-						bind:value={fqdn}
-						readonly={!$appSession.isAdmin || isFqdnSet}
-						disabled={!$appSession.isAdmin || isFqdnSet}
-						on:input={resetView}
-						name="fqdn"
-						id="fqdn"
-						pattern="^https?://([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{'{'}2,{'}'}$"
-						placeholder="{$t('forms.eg')}: https://coolify.io"
-					/>
+				<div class="grid grid-flow-row gap-2 lg:px-10 px-2 pr-5">
+					<div class="grid grid-cols-2 items-center">
+						<div>
+							{$t('application.url_fqdn')}
+							<Explainer explanation={$t('setting.ssl_explainer')} />
+						</div>
+						<input
+							class="w-full"
+							bind:value={fqdn}
+							readonly={!$appSession.isAdmin || isFqdnSet}
+							disabled={!$appSession.isAdmin || isFqdnSet}
+							on:input={resetView}
+							name="fqdn"
+							id="fqdn"
+							pattern="^https?://([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{'{'}2,{'}'}$"
+							placeholder="{$t('forms.eg')}: https://coolify.io"
+						/>
 
-					{#if forceSave}
-						<div class="flex-col space-y-2 pt-4 text-center">
-							{#if isNonWWWDomainOK}
-								<button
-									class="btn btn-sm bg-success"
-									on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
-									>DNS settings for {nonWWWDomain} is OK, click to recheck.</button
-								>
-							{:else}
-								<button
-									class="btn btn-sm bg-error"
-									on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
-									>DNS settings for {nonWWWDomain} is invalid, click to recheck.</button
-								>
-							{/if}
-							{#if dualCerts}
-								{#if isWWWDomainOK}
+						{#if forceSave}
+							<div class="flex-col space-y-2 pt-4 text-center">
+								{#if isNonWWWDomainOK}
 									<button
 										class="btn btn-sm bg-success"
-										on:click|preventDefault={() =>
-											isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
-										>DNS settings for www.{nonWWWDomain} is OK, click to recheck.</button
+										on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
+										>DNS settings for {nonWWWDomain} is OK, click to recheck.</button
 									>
 								{:else}
 									<button
 										class="btn btn-sm bg-error"
-										on:click|preventDefault={() =>
-											isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
-										>DNS settings for www.{nonWWWDomain} is invalid, click to recheck.</button
+										on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
+										>DNS settings for {nonWWWDomain} is invalid, click to recheck.</button
 									>
 								{/if}
-							{/if}
+								{#if dualCerts}
+									{#if isWWWDomainOK}
+										<button
+											class="btn btn-sm bg-success"
+											on:click|preventDefault={() =>
+												isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
+											>DNS settings for www.{nonWWWDomain} is OK, click to recheck.</button
+										>
+									{:else}
+										<button
+											class="btn btn-sm bg-error"
+											on:click|preventDefault={() =>
+												isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
+											>DNS settings for www.{nonWWWDomain} is invalid, click to recheck.</button
+										>
+									{/if}
+								{/if}
+							</div>
+						{/if}
+					</div>
+					<div class="grid grid-cols-2 items-center">
+						<div>
+							{$t('forms.public_port_range')}
+							<Explainer explanation={$t('forms.public_port_range_explainer')} />
+						</div>
+
+						<div class="flex flex-row items-center space-x-2">
+							<input
+								class=" w-full px-2"
+								type="number"
+								bind:value={minPort}
+								min="1024"
+								max={maxPort}
+							/>
+							<p>-</p>
+							<input
+								class="w-full px-2"
+								type="number"
+								bind:value={maxPort}
+								min={minPort}
+								max="65543"
+							/>
 						</div>
-					{/if}
-					<div class="pt-2 text-base font-bold text-stone-100">
-						{$t('forms.public_port_range')}
-						<Explainer explanation={$t('forms.public_port_range_explainer')} />
 					</div>
-					<div class="flex flex-row items-center space-x-2">
-						<input
-							class="h-8 w-full px-2"
-							type="number"
-							bind:value={minPort}
-							min="1024"
-							max={maxPort}
-						/>
-						<p>-</p>
-						<input
-							class="h-8 w-full px-2"
-							type="number"
-							bind:value={maxPort}
-							min={minPort}
-							max="65543"
-						/>
-					</div>
-					<Setting
-						id="isDNSCheckEnabled"
-						bind:setting={isDNSCheckEnabled}
-						title={$t('setting.is_dns_check_enabled')}
-						description={$t('setting.is_dns_check_enabled_explainer')}
-						on:click={() => changeSettings('isDNSCheckEnabled')}
-					/>
-					<div class="text-base font-bold text-stone-100">
-						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>
-					<input class="w-full" placeholder="1.1.1.1,8.8.8.8" bind:value={DNSServers} />
-					<Setting
-						id="dualCerts"
-						dataTooltip={$t('setting.must_remove_domain_before_changing')}
-						disabled={isFqdnSet}
-						bind:setting={dualCerts}
-						title={$t('application.ssl_www_and_non_www')}
-						description={$t('setting.generate_www_non_www_ssl')}
-						on:click={() => !isFqdnSet && changeSettings('dualCerts')}
-					/>
-					<Setting
-						id="isRegistrationEnabled"
-						bind:setting={isRegistrationEnabled}
-						title={$t('setting.registration_allowed')}
-						description={$t('setting.registration_allowed_explainer')}
-						on:click={() => changeSettings('isRegistrationEnabled')}
-					/>
-					<Setting
-						id="isAPIDebuggingEnabled"
-						bind:setting={isAPIDebuggingEnabled}
-						title="API Debugging"
-						description="Enable API debugging. This will log all API requests and responses.<br><br>You need to restart the Coolify for this to take effect."
-						on:click={() => changeSettings('isAPIDebuggingEnabled')}
-					/>
-					{#if browser && $features.beta}
+					<div class="grid grid-cols-2 items-center">
 						<Setting
-							id="isAutoUpdateEnabled"
-							bind:setting={isAutoUpdateEnabled}
-							title={$t('setting.auto_update_enabled')}
-							description={$t('setting.auto_update_enabled_explainer')}
-							on:click={() => changeSettings('isAutoUpdateEnabled')}
+							id="isDNSCheckEnabled"
+							bind:setting={isDNSCheckEnabled}
+							title={$t('setting.is_dns_check_enabled')}
+							description={$t('setting.is_dns_check_enabled_explainer')}
+							on:click={() => changeSettings('isDNSCheckEnabled')}
 						/>
+					</div>
+					<div class="grid grid-cols-2 items-center">
+						<div>
+							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>
+
+						<input class="w-full" placeholder="1.1.1.1,8.8.8.8" bind:value={DNSServers} />
+					</div>
+					<div class="grid grid-cols-2 items-center">
+						<Setting
+							id="dualCerts"
+							dataTooltip={$t('setting.must_remove_domain_before_changing')}
+							disabled={isFqdnSet}
+							bind:setting={dualCerts}
+							title={$t('application.ssl_www_and_non_www')}
+							description={$t('setting.generate_www_non_www_ssl')}
+							on:click={() => !isFqdnSet && changeSettings('dualCerts')}
+						/>
+					</div>
+					<div class="grid grid-cols-2 items-center">
+						<Setting
+							id="isRegistrationEnabled"
+							bind:setting={isRegistrationEnabled}
+							title={$t('setting.registration_allowed')}
+							description={$t('setting.registration_allowed_explainer')}
+							on:click={() => changeSettings('isRegistrationEnabled')}
+						/>
+					</div>
+					<div class="grid grid-cols-2 items-center">
+						<Setting
+							id="isAPIDebuggingEnabled"
+							bind:setting={isAPIDebuggingEnabled}
+							title="API Debugging"
+							description="Enable API debugging. This will log all API requests and responses.<br><br>You need to restart the Coolify for this to take effect."
+							on:click={() => changeSettings('isAPIDebuggingEnabled')}
+						/>
+					</div>
+					{#if browser && $features.beta}
+						<div class="grid grid-cols-2 items-center">
+							<Setting
+								id="isAutoUpdateEnabled"
+								bind:setting={isAutoUpdateEnabled}
+								title={$t('setting.auto_update_enabled')}
+								description={$t('setting.auto_update_enabled_explainer')}
+								on:click={() => changeSettings('isAutoUpdateEnabled')}
+							/>
+						</div>
 					{/if}
 				</div>
 			</form>
-		</div>
 	</div>
 </div>
diff --git a/apps/ui/src/routes/settings/ssh-keys.svelte b/apps/ui/src/routes/settings/ssh-keys.svelte
index 1efdea87f..d7d4dcbff 100644
--- a/apps/ui/src/routes/settings/ssh-keys.svelte
+++ b/apps/ui/src/routes/settings/ssh-keys.svelte
@@ -65,9 +65,9 @@
 		<Menu />
 		<div class="flex flex-col mt-5">
 			<div
-					class="flex flex-col space-y-2 p-6 lg:p-0 lg:flex-row lg:space-y0 lg:space-x-4 w-full lg:justify-between lg:items-center mb-5"
-					style="min-width: 83vw"
-				>
+				class="flex flex-col lg:flex-row flex-wrap items-center space-x-3 justify-center lg:justify-start lg:py-0 px-4 pb-4 lg:pb-4"
+				style="min-width: 83vw"
+			>
 				<div class="title font-bold">SSH Keys</div>
 				<button
 					on:click={() => (isModalActive = true)}