diff --git a/apps/ui/src/lib/components/Beta.svelte b/apps/ui/src/lib/components/Beta.svelte
new file mode 100644
index 000000000..279401fcf
--- /dev/null
+++ b/apps/ui/src/lib/components/Beta.svelte
@@ -0,0 +1 @@
+<span class="badge bg-coollabs-gradient rounded text-white font-normal"> BETA </span>
\ No newline at end of file
diff --git a/apps/ui/src/lib/components/Setting.svelte b/apps/ui/src/lib/components/Setting.svelte
index 18404684d..ef5bab024 100644
--- a/apps/ui/src/lib/components/Setting.svelte
+++ b/apps/ui/src/lib/components/Setting.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Beta from './Beta.svelte';
 	import Explaner from './Explainer.svelte';
 	import Tooltip from './Tooltip.svelte';
 
@@ -6,6 +7,7 @@
 	export let customClass: any = null;
 	export let setting: any;
 	export let title: any;
+	export let isBeta: any = false;
 	export let description: any;
 	export let isCenter = true;
 	export let disabled = false;
@@ -19,6 +21,9 @@
 		<!-- svelte-ignore a11y-label-has-associated-control -->
 		<label>
 			{title}
+			{#if isBeta}
+				<Beta />
+			{/if}
 			{#if description && description !== ''}
 				<Explaner explanation={description} />
 			{/if}
diff --git a/apps/ui/src/lib/components/UpdateAvailable.svelte b/apps/ui/src/lib/components/UpdateAvailable.svelte
index a83c6cc90..9c4fda2be 100644
--- a/apps/ui/src/lib/components/UpdateAvailable.svelte
+++ b/apps/ui/src/lib/components/UpdateAvailable.svelte
@@ -86,7 +86,7 @@
 				id="update"
 				disabled={updateStatus.success === false}
 				on:click={update}
-				class="icons bg-coollabs-gradient text-white duration-75 hover:scale-105  w-full"
+				class="icons bg-coollabs-gradient text-white duration-75 hover:scale-105 w-full"
 			>
 				{#if updateStatus.loading}
 					<svg
diff --git a/apps/ui/src/lib/components/Usage.svelte b/apps/ui/src/lib/components/Usage.svelte
index 3ed48ee10..f7b0c7758 100644
--- a/apps/ui/src/lib/components/Usage.svelte
+++ b/apps/ui/src/lib/components/Usage.svelte
@@ -27,6 +27,7 @@
 	import { onDestroy, onMount } from 'svelte';
 	import { get, post } from '$lib/api';
 	import { errorNotification } from '$lib/common';
+	import Beta from './Beta.svelte';
 	async function getStatus() {
 		if (loading.usage) return;
 		loading.usage = true;
@@ -78,7 +79,7 @@
 			<h1 class="font-bold text-lg lg:text-xl truncate">
 				{server.name}
 				{#if server.remoteEngine}
-					<span class="badge bg-coollabs-gradient rounded text-white"> BETA </span>
+					<Beta />
 				{/if}
 			</h1>
 			<div class="text-xs">
diff --git a/apps/ui/src/routes/settings/certificates.svelte b/apps/ui/src/routes/settings/certificates.svelte
index 739a8b01a..c58994f38 100644
--- a/apps/ui/src/routes/settings/certificates.svelte
+++ b/apps/ui/src/routes/settings/certificates.svelte
@@ -20,6 +20,7 @@
 	export let certificates: any;
 	import { del, post } from '$lib/api';
 	import { errorNotification } from '$lib/common';
+	import Beta from '$lib/components/Beta.svelte';
 
 	let loading = {
 		save: false
@@ -55,40 +56,40 @@
 	}
 </script>
 
-	<div class="mx-auto w-full">
-		<div class="flex border-b border-coolgray-500 mb-6">
-			<div class="title font-bold pb-3 pr-4">SSL Certificates <span class="badge rounded bg-coollabs-gradient text-white">BETA</span></div>
-			<label for="my-modal" class="btn btn-sm btn-primary" on:click={() => (isModalActive = true)}
-				>Add SSL Certificate</label
-			>
-		</div>
-		{#if certificates.length > 0}
-			<table class="table w-full">
-				<thead>
-					<tr>
-						<th>Common Name</th>
-						<th>CreatedAt</th>
-						<th>Actions</th>
-					</tr>
-				</thead>
-				<tbody>
-					{#each certificates as cert}
-						<tr>
-							<td>{cert.commonName}</td>
-							<td>{cert.createdAt}</td>
-							<td
-								><button on:click={() => deleteCertificate(cert.id)} class="btn btn-sm btn-error"
-									>Delete</button
-								></td
-							>
-						</tr>
-					{/each}
-				</tbody>
-			</table>
-		{:else}
-			<div class="text-sm">No SSL Certificate found</div>
-		{/if}
+<div class="mx-auto w-full">
+	<div class="flex border-b border-coolgray-500 mb-6">
+		<div class="title font-bold pb-3 pr-4">SSL Certificates <Beta /></div>
+		<label for="my-modal" class="btn btn-sm btn-primary" on:click={() => (isModalActive = true)}
+			>Add SSL Certificate</label
+		>
 	</div>
+	{#if certificates.length > 0}
+		<table class="table w-full">
+			<thead>
+				<tr>
+					<th>Common Name</th>
+					<th>CreatedAt</th>
+					<th>Actions</th>
+				</tr>
+			</thead>
+			<tbody>
+				{#each certificates as cert}
+					<tr>
+						<td>{cert.commonName}</td>
+						<td>{cert.createdAt}</td>
+						<td
+							><button on:click={() => deleteCertificate(cert.id)} class="btn btn-sm btn-error"
+								>Delete</button
+							></td
+						>
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	{:else}
+		<div class="text-sm">No SSL Certificate found</div>
+	{/if}
+</div>
 
 {#if isModalActive}
 	<input type="checkbox" id="my-modal" class="modal-toggle" />
diff --git a/apps/ui/src/routes/sources/[id]/_Github.svelte b/apps/ui/src/routes/sources/[id]/_Github.svelte
index db42938d4..88821d393 100644
--- a/apps/ui/src/routes/sources/[id]/_Github.svelte
+++ b/apps/ui/src/routes/sources/[id]/_Github.svelte
@@ -152,6 +152,7 @@
 				/>
 				<Setting
 					customClass="pt-4"
+					isBeta={true}
 					id="autodeploy"
 					isCenter={false}
 					bind:setting={source.isSystemWide}
@@ -238,6 +239,7 @@
 				/>
 				<Setting
 					customClass="pt-4"
+					isBeta={true}
 					id="autodeploy"
 					isCenter={false}
 					disabled={$appSession.teamId !== '0'}