diff --git a/app/components/Terminal/Execute.vue b/app/components/Terminal/Execute.vue
index c2ee26ac64..c9106d0126 100644
--- a/app/components/Terminal/Execute.vue
+++ b/app/components/Terminal/Execute.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { JsrPackageInfo } from '#shared/types/jsr'
 import type { PackageManagerId } from '~/utils/install-command'
+import { getPackageManagerConfig } from '~/utils/install-command'
 
 /**
  * A terminal-style execute command display for binary-only packages.
- * Renders all package manager variants with CSS-based visibility.
+ * Renders the currently selected package manager command.
  */
 
 const props = defineProps<{
@@ -14,6 +15,7 @@ const props = defineProps<{
 }>()
 
 const selectedPM = useSelectedPackageManager()
+const selectedPackageManagerConfig = computed(() => getPackageManagerConfig(selectedPM.value))
 
 // Generate execute command parts for a specific package manager
 function getExecutePartsForPM(pmId: PackageManagerId) {
@@ -52,17 +54,14 @@ const copyExecuteCommand = () => copyExecute(getFullExecuteCommand())
         <span class="w-2.5 h-2.5 rounded-full bg-fg-subtle" />
       </div>
       <div class="px-3 pt-2 pb-3 sm:px-4 sm:pt-3 sm:pb-4 space-y-1">
-        <!-- Execute command - render all PM variants, CSS controls visibility -->
         <div
-          v-for="pm in packageManagers"
-          :key="`execute-${pm.id}`"
-          :data-pm-cmd="pm.id"
+          :data-pm-cmd="selectedPackageManagerConfig.id"
           class="flex items-center gap-2 group/executecmd"
         >
           <span class="text-fg-subtle font-mono text-sm select-none">$</span>
           <code class="font-mono text-sm"
             ><span
-              v-for="(part, i) in getExecutePartsForPM(pm.id)"
+              v-for="(part, i) in getExecutePartsForPM(selectedPackageManagerConfig.id)"
               :key="i"
               :class="i === 0 ? 'text-fg' : 'text-fg-muted'"
               >{{ i > 0 ? ' ' : '' }}{{ part }}</span
@@ -81,27 +80,3 @@ const copyExecuteCommand = () => copyExecute(getFullExecuteCommand())
     </div>
   </div>
 </template>
-
-<style>
-/* Hide all variants by default when preference is set */
-:root[data-pm] [data-pm-cmd] {
-  display: none;
-}
-
-/* Show only the matching package manager command */
-:root[data-pm='npm'] [data-pm-cmd='npm'],
-:root[data-pm='pnpm'] [data-pm-cmd='pnpm'],
-:root[data-pm='yarn'] [data-pm-cmd='yarn'],
-:root[data-pm='bun'] [data-pm-cmd='bun'],
-:root[data-pm='deno'] [data-pm-cmd='deno'],
-:root[data-pm='vlt'] [data-pm-cmd='vlt'],
-:root[data-pm='vp'] [data-pm-cmd='vp'],
-:root[data-pm='nub'] [data-pm-cmd='nub'] {
-  display: flex;
-}
-
-/* Fallback: when no data-pm is set (SSR initial), show npm as default */
-:root:not([data-pm]) [data-pm-cmd]:not([data-pm-cmd='npm']) {
-  display: none;
-}
-</style>
diff --git a/app/components/Terminal/Install.vue b/app/components/Terminal/Install.vue
index acf9ddda5c..5382001504 100644
--- a/app/components/Terminal/Install.vue
+++ b/app/components/Terminal/Install.vue
@@ -3,6 +3,7 @@ import type { JsrPackageInfo } from '#shared/types/jsr'
 import type { DevDependencySuggestion } from '#shared/utils/dev-dependency'
 import type { PackageManagerId } from '~/utils/install-command'
 import type { CommandPaletteContextCommandInput } from '~/types/command-palette'
+import { getPackageManagerConfig } from '~/utils/install-command'
 
 const props = defineProps<{
   packageName: string
@@ -111,6 +112,7 @@ const { copied: createCopied, copy: copyCreate } = useClipboard({ copiedDuring:
 const copyCreateCommand = () => copyCreate(getFullCreateCommand())
 
 const { copied: devInstallCopied, copy: copyDevInstall } = useClipboard({ copiedDuring: 2000 })
+const selectedPackageManagerConfig = computed(() => getPackageManagerConfig(selectedPM.value))
 const copyDevInstallCommand = () =>
   copyDevInstall(
     getInstallCommand({
@@ -219,17 +221,14 @@ useCommandPaletteContextCommands(
         <span class="w-2.5 h-2.5 rounded-full bg-fg-subtle" />
       </div>
       <div class="px-3 pt-2 pb-3 sm:px-4 sm:pt-3 sm:pb-4 space-y-1 overflow-x-auto" dir="ltr">
-        <!-- Install command - render all PM variants, CSS controls visibility -->
         <div
-          v-for="pm in packageManagers"
-          :key="`install-${pm.id}`"
-          :data-pm-cmd="pm.id"
+          :data-pm-cmd="selectedPackageManagerConfig.id"
           class="flex items-center gap-2 group/installcmd min-w-0"
         >
           <span class="self-start text-fg-subtle font-mono text-sm select-none shrink-0">$</span>
           <code class="font-mono text-sm min-w-0"
             ><span
-              v-for="(part, i) in getInstallPartsForPM(pm.id)"
+              v-for="(part, i) in getInstallPartsForPM(selectedPackageManagerConfig.id)"
               :key="i"
               :class="i === 0 ? 'text-fg' : 'text-fg-muted'"
               >{{ i > 0 ? ' ' : '' }}{{ part }}</span
@@ -253,15 +252,13 @@ useCommandPaletteContextCommands(
             >
           </div>
           <div
-            v-for="pm in packageManagers"
-            :key="`install-dev-${pm.id}`"
-            :data-pm-cmd="pm.id"
+            :data-pm-cmd="selectedPackageManagerConfig.id"
             class="flex items-center gap-2 group/devinstallcmd min-w-0"
           >
             <span class="text-fg-subtle font-mono text-sm select-none shrink-0">$</span>
             <code class="font-mono text-sm min-w-0"
               ><span
-                v-for="(part, i) in getDevInstallPartsForPM(pm.id)"
+                v-for="(part, i) in getDevInstallPartsForPM(selectedPackageManagerConfig.id)"
                 :key="i"
                 :class="i === 0 ? 'text-fg' : 'text-fg-muted'"
                 >{{ i > 0 ? ' ' : '' }}{{ part }}</span
@@ -284,15 +281,13 @@ useCommandPaletteContextCommands(
         <!-- @types package install - render all PM variants when types package exists -->
         <template v-if="typesPackageName && showTypesInInstall">
           <div
-            v-for="pm in packageManagers"
-            :key="`types-${pm.id}`"
-            :data-pm-cmd="pm.id"
+            :data-pm-cmd="selectedPackageManagerConfig.id"
             class="flex items-center gap-2 min-w-0"
           >
             <span class="self-start text-fg-subtle font-mono text-sm select-none shrink-0">$</span>
             <code class="font-mono text-sm min-w-0"
               ><span
-                v-for="(part, i) in getTypesInstallPartsForPM(pm.id)"
+                v-for="(part, i) in getTypesInstallPartsForPM(selectedPackageManagerConfig.id)"
                 :key="i"
                 :class="i === 0 ? 'text-fg' : 'text-fg-muted'"
                 >{{ i > 0 ? ' ' : '' }}{{ part }}</span
@@ -319,15 +314,16 @@ useCommandPaletteContextCommands(
           </div>
 
           <div
-            v-for="pm in packageManagers"
-            :key="`run-${pm.id}`"
-            :data-pm-cmd="pm.id"
+            :data-pm-cmd="selectedPackageManagerConfig.id"
             class="flex items-center gap-2 group/runcmd"
           >
             <span class="self-start text-fg-subtle font-mono text-sm select-none">$</span>
             <code class="font-mono text-sm"
               ><span
-                v-for="(part, i) in getRunPartsForPM(pm.id, executableInfo?.primaryCommand)"
+                v-for="(part, i) in getRunPartsForPM(
+                  selectedPackageManagerConfig.id,
+                  executableInfo?.primaryCommand,
+                )"
                 :key="i"
                 :class="i === 0 ? 'text-fg' : 'text-fg-muted'"
                 >{{ i > 0 ? ' ' : '' }}{{ part }}</span
@@ -364,15 +360,13 @@ useCommandPaletteContextCommands(
           </div>
 
           <div
-            v-for="pm in packageManagers"
-            :key="`create-${pm.id}`"
-            :data-pm-cmd="pm.id"
+            :data-pm-cmd="selectedPackageManagerConfig.id"
             class="flex items-center gap-2 group/createcmd"
           >
             <span class="self-start text-fg-subtle font-mono text-sm select-none">$</span>
             <code class="font-mono text-sm"
               ><span
-                v-for="(part, i) in getCreatePartsForPM(pm.id)"
+                v-for="(part, i) in getCreatePartsForPM(selectedPackageManagerConfig.id)"
                 :key="i"
                 :class="i === 0 ? 'text-fg' : 'text-fg-muted'"
                 >{{ i > 0 ? ' ' : '' }}{{ part }}</span
@@ -394,32 +388,3 @@ useCommandPaletteContextCommands(
     </div>
   </div>
 </template>
-
-<style>
-/*
- * Package manager command visibility based on data-pm attribute on <html>.
- * All variants are rendered; CSS shows only the selected one.
- */
-
-/* Hide all variants by default when preference is set */
-:root[data-pm] [data-pm-cmd] {
-  display: none;
-}
-
-/* Show only the matching package manager command */
-:root[data-pm='npm'] [data-pm-cmd='npm'],
-:root[data-pm='pnpm'] [data-pm-cmd='pnpm'],
-:root[data-pm='yarn'] [data-pm-cmd='yarn'],
-:root[data-pm='bun'] [data-pm-cmd='bun'],
-:root[data-pm='deno'] [data-pm-cmd='deno'],
-:root[data-pm='vlt'] [data-pm-cmd='vlt'],
-:root[data-pm='vp'] [data-pm-cmd='vp'],
-:root[data-pm='nub'] [data-pm-cmd='nub'] {
-  display: flex;
-}
-
-/* Fallback: when no data-pm is set (SSR initial), show npm as default */
-:root:not([data-pm]) [data-pm-cmd]:not([data-pm-cmd='npm']) {
-  display: none;
-}
-</style>
diff --git a/app/composables/useInstallCommand.ts b/app/composables/useInstallCommand.ts
index 827ac89f46..657b8db668 100644
--- a/app/composables/useInstallCommand.ts
+++ b/app/composables/useInstallCommand.ts
@@ -1,4 +1,5 @@
 import type { JsrPackageInfo } from '#shared/types/jsr'
+import { getPackageManagerConfig } from '~/utils/install-command'
 
 /**
  * Composable for generating install commands with support for
@@ -53,12 +54,11 @@ export function useInstallCommand(
   const typesInstallCommandParts = computed(() => {
     const types = toValue(typesPackageName)
     if (!types) return []
-    const pm = packageManagers.find(p => p.id === selectedPM.value)
-    if (!pm) return []
+    const packageManagerConfig = getPackageManagerConfig(selectedPM.value)
 
     const pkgSpec = selectedPM.value === 'deno' ? `npm:${types}` : types
 
-    return [pm.label, pm.action, devFlag.value, pkgSpec]
+    return [packageManagerConfig.label, packageManagerConfig.action, devFlag.value, pkgSpec]
   })
 
   // Full install command including @types (for copying)
@@ -69,13 +69,12 @@ export function useInstallCommand(
       return installCommand.value
     }
 
-    const pm = packageManagers.find(p => p.id === selectedPM.value)
-    if (!pm) return installCommand.value
+    const packageManagerConfig = getPackageManagerConfig(selectedPM.value)
 
     const pkgSpec = selectedPM.value === 'deno' ? `npm:${types}` : types
 
     // Use semicolon to separate commands
-    return `${installCommand.value}; ${pm.label} ${pm.action} ${devFlag.value} ${pkgSpec}`
+    return `${installCommand.value}; ${packageManagerConfig.label} ${packageManagerConfig.action} ${devFlag.value} ${pkgSpec}`
   })
 
   // Copy state
diff --git a/app/utils/install-command.ts b/app/utils/install-command.ts
index 6c87e30511..90d537c713 100644
--- a/app/utils/install-command.ts
+++ b/app/utils/install-command.ts
@@ -81,6 +81,20 @@ export const packageManagers = [
 
 export type PackageManagerId = (typeof packageManagers)[number]['id']
 
+export function getPackageManagerConfig(packageManager: PackageManagerId) {
+  const selectedPackageManager = packageManagers.find(pm => pm.id === packageManager)
+  if (selectedPackageManager) {
+    return selectedPackageManager
+  }
+
+  const defaultPackageManager = packageManagers.find(pm => pm.id === 'npm')
+  if (!defaultPackageManager) {
+    throw new Error('Default package manager configuration is missing.')
+  }
+
+  return defaultPackageManager
+}
+
 export interface InstallCommandOptions {
   packageName: string
   packageManager: PackageManagerId
diff --git a/test/nuxt/components/Terminal.spec.ts b/test/nuxt/components/Terminal.spec.ts
new file mode 100644
index 0000000000..e95b3bf68e
--- /dev/null
+++ b/test/nuxt/components/Terminal.spec.ts
@@ -0,0 +1,53 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import TerminalExecute from '~/components/Terminal/Execute.vue'
+import TerminalInstall from '~/components/Terminal/Install.vue'
+
+describe('Terminal components', () => {
+  beforeEach(() => {
+    localStorage.clear()
+    const selectedPackageManager = useSelectedPackageManager()
+    selectedPackageManager.value = 'npm'
+  })
+
+  it('renders only the selected package manager in TerminalExecute', async () => {
+    const selectedPackageManager = useSelectedPackageManager()
+    selectedPackageManager.value = 'nub'
+
+    const component = await mountSuspended(TerminalExecute, {
+      props: { packageName: 'create-vite' },
+    })
+
+    const renderedCommands = component.findAll('[data-pm-cmd]')
+
+    expect(renderedCommands).toHaveLength(1)
+    expect(renderedCommands[0]?.attributes('data-pm-cmd')).toBe('nub')
+    expect(component.text()).toContain('nubx create-vite')
+  })
+
+  it('renders only the selected package manager across all TerminalInstall sections', async () => {
+    const selectedPackageManager = useSelectedPackageManager()
+    selectedPackageManager.value = 'nub'
+
+    const component = await mountSuspended(TerminalInstall, {
+      props: {
+        packageName: 'vue',
+        typesPackageName: '@types/vue',
+        devDependencySuggestion: { recommended: true },
+        executableInfo: { hasExecutable: true, primaryCommand: 'vue' },
+        createPackageInfo: { packageName: 'create-vue' },
+      },
+    })
+
+    const renderedCommands = component.findAll('[data-pm-cmd]')
+
+    expect(renderedCommands).toHaveLength(5)
+    expect(renderedCommands.every(command => command.attributes('data-pm-cmd') === 'nub')).toBe(
+      true,
+    )
+    expect(component.text()).toContain('nub add vue')
+    expect(component.text()).toContain('nub add -D @types/vue')
+    expect(component.text()).toContain('nubx vue')
+    expect(component.text()).toContain('nub create vue')
+  })
+})