diff --git a/apps/api/src/lib.ts b/apps/api/src/lib.ts
index 01bdfd2a9..796146c66 100644
--- a/apps/api/src/lib.ts
+++ b/apps/api/src/lib.ts
@@ -10,7 +10,7 @@ export async function migrateServicesToNewTemplate() {
             if (service.type === 'plausibleanalytics' && service.plausibleAnalytics) await plausibleAnalytics(service)
             if (service.type === 'fider' && service.fider) await fider(service)
             if (service.type === 'minio' && service.minio) await minio(service)
-            if (service.type === 'vscode' && service.vscodeserver) await vscodeserver(service)
+            if (service.type === 'vscodeserver' && service.vscodeserver) await vscodeserver(service)
         }
     } catch (error) {
         console.log(error)
@@ -19,7 +19,7 @@ export async function migrateServicesToNewTemplate() {
 }
 
 async function vscodeserver(service: any) {
-    const { password } = service.minio
+    const { password } = service.vscodeserver
 
     const secrets = [
         `PASSWORD@@@${password}`,
diff --git a/apps/api/src/lib/templates.ts b/apps/api/src/lib/templates.ts
index 51084662e..2a842bf02 100644
--- a/apps/api/src/lib/templates.ts
+++ b/apps/api/src/lib/templates.ts
@@ -2,12 +2,12 @@ export default [
     {
         "templateVersion": "1.0.0",
         "serviceDefaultVersion": "4.7.1",
-        "name": "codeserver",
-        "displayName": "Code Server",
-        "description": "code-server by Coder is VS Code running on a remote server, accessible through the browser.",
+        "name": "vscodeserver",
+        "displayName": "VSCode Server",
+        "description": "vscode-server by Coder is VS Code running on a remote server, accessible through the browser.",
         "services": {
             "$$id": {
-                "name": "Code Server",
+                "name": "VSCode Server",
                 "documentation": "Taken from https://github.com/coder/code-server/. ",
                 "depends_on": [],
                 "image": "codercom/code-server:$$core_version",
@@ -32,7 +32,10 @@ export default [
                 "name": "PASSWORD",
                 "label": "Password",
                 "defaultValue": "$$generate_password",
-                "description": ""
+                "description": "",
+                "extras": {
+                    "isVisibleOnUI": true,
+                }
             }
         ]
     },
diff --git a/apps/api/src/routes/api/v1/services/handlers.ts b/apps/api/src/routes/api/v1/services/handlers.ts
index e65c4cb5c..903f48c52 100644
--- a/apps/api/src/routes/api/v1/services/handlers.ts
+++ b/apps/api/src/routes/api/v1/services/handlers.ts
@@ -129,7 +129,7 @@ export async function parseAndFindServiceTemplates(service: any, workdir?: strin
                         const description = foundTemplate.variables.find(v => v.name === envKey)?.description
                         const defaultValue = foundTemplate.variables.find(v => v.name === envKey)?.defaultValue
                         const extras = foundTemplate.variables.find(v => v.name === envKey)?.extras
-                        if (envValue.startsWith('$$config')) {
+                        if (envValue.startsWith('$$config') || extras?.isVisibleOnUI) {
                             parsedTemplate[realKey].environment.push(
                                 { name: envKey, value: envValue, label, description, defaultValue, extras }
                             )
diff --git a/apps/ui/src/routes/services/[id]/__layout.svelte b/apps/ui/src/routes/services/[id]/__layout.svelte
index b57dafdaf..944f3f9c2 100644
--- a/apps/ui/src/routes/services/[id]/__layout.svelte
+++ b/apps/ui/src/routes/services/[id]/__layout.svelte
@@ -323,25 +323,10 @@
 		{:else if $status.service.overallStatus === 'stopped'}
 			<button
 				class="btn btn-sm gap-2"
-				class:btn-primary={$status.application.overallStatus !== 'degraded'}
 				disabled={!$isDeploymentEnabled}
 				on:click={() => startService()}
 			>
-				{#if $status.application.overallStatus !== 'degraded'}
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="w-6 h-6"
-						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="M7 4v16l13 -8z" />
-					</svg>
-				{:else}
+				{#if $status.application.overallStatus === 'degraded'}
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						class="w-6 h-6"
@@ -358,12 +343,23 @@
 							transform="rotate(-45 12 12)"
 						/>
 					</svg>
+					{$status.application.statuses.length === 1 ? 'Force Redeploy' : 'Redeploy Stack'}
+				{:else if $status.application.overallStatus === 'stopped'}
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="w-6 h-6 text-pink-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="M7 4v16l13 -8z" />
+					</svg>
+					Deploy
 				{/if}
-				{$status.application.overallStatus === 'degraded'
-					? $status.application.statuses.length === 1
-						? 'Force Redeploy'
-						: 'Redeploy Stack'
-					: 'Deploy'}
 			</button>
 		{/if}
 	</div>