diff --git a/apps/ui/src/routes/services/[id]/index.svelte b/apps/ui/src/routes/services/[id]/index.svelte
index 60c475545..dd9e2e10d 100644
--- a/apps/ui/src/routes/services/[id]/index.svelte
+++ b/apps/ui/src/routes/services/[id]/index.svelte
@@ -38,6 +38,11 @@
 	import Wordpress from './_Services/wordpress.svelte';
 
 	const { id } = $page.params;
+	let hostPorts = Object.keys(template).filter((key) => {
+		if (template[key]?.hostPorts?.length > 0) {
+			return true;
+		}
+	});
 	$: isDisabled =
 		!$appSession.isAdmin ||
 		$status.service.overallStatus === 'degraded' ||
@@ -389,22 +394,24 @@
 					on:click={() => !$status.service.isRunning && changeSettings('dualCerts')}
 				/>
 			</div>
-			<div class="grid grid-cols-2 items-center">
-				<label for="exposePort"
-					>Exposed Port <Explainer
-						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
-				>
-				<input
-					class="w-full"
-					readonly={isDisabled}
-					disabled={isDisabled}
-					name="exposePort"
-					id="exposePort"
-					bind:value={service.exposePort}
-					placeholder="12345"
-				/>
-			</div>
+			{#if hostPorts.length === 0}
+				<div class="grid grid-cols-2 items-center">
+					<label for="exposePort"
+						>Exposed Port <Explainer
+							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
+					>
+					<input
+						class="w-full"
+						readonly={isDisabled}
+						disabled={isDisabled}
+						name="exposePort"
+						id="exposePort"
+						bind:value={service.exposePort}
+						placeholder="12345"
+					/>
+				</div>
+			{/if}
 		</div>
 		<div class="pt-6">
 			{#each Object.keys(template) as oneService}