diff --git a/src/mdx/Npm.astro b/src/mdx/Npm.astro
index 15e13e22d..de071965c 100644
--- a/src/mdx/Npm.astro
+++ b/src/mdx/Npm.astro
@@ -1,7 +1,7 @@
 ---
-const items = ["npm", "yarn", "pnpm", "bun"];
+const items = ["npm", "yarn", "pnpm", "bun", "deno"];
 const html = await Astro.slots.render("default");
-const installCommands = ["npm i", "yarn add", "pnpm add", "bun add"];
+const installCommands = ["npm i", "yarn add", "pnpm add", "bun add", "deno add"];
 const installLines = html.replaceAll(/<\/?p>/g, "").replaceAll('—', '--').split("\n");
 
 const getCopyButton = (index: number) => {
diff --git a/src/mdx/Npx.astro b/src/mdx/Npx.astro
index dcecc1f5d..a523539b8 100644
--- a/src/mdx/Npx.astro
+++ b/src/mdx/Npx.astro
@@ -1,7 +1,7 @@
 ---
-const items = ["npm", "yarn", "pnpm", "bun"];
+const items = ["npm", "yarn", "pnpm", "bun", "deno"];
 const html = await Astro.slots.render("default");
-const installCommands = ["npx", "yarn", "pnpm", "bunx"];
+const installCommands = ["npx", "yarn", "pnpm", "bunx", "deno x"];
 const installLines = html
   .replaceAll(/<\/?p>/g, "")
   .replaceAll("—", "--")
diff --git a/src/mdx/NpxCompact.astro b/src/mdx/NpxCompact.astro
index d262ad463..aa8497360 100644
--- a/src/mdx/NpxCompact.astro
+++ b/src/mdx/NpxCompact.astro
@@ -1,6 +1,6 @@
 ---
 const html = await Astro.slots.render("default");
-const installCommands = ["npx", "yarn", "pnpm", "bun"];
+const installCommands = ["npx", "yarn", "pnpm", "bun", "deno x"];
 const installLines = html.replaceAll(/<\/?p>/g, "").replaceAll('—', '--').split("\n");
 const getInstallCommands = () =>
   installLines
diff --git a/src/ui/CenteredLayout.astro b/src/ui/CenteredLayout.astro
index bccbfcd38..2a2b59b3c 100644
--- a/src/ui/CenteredLayout.astro
+++ b/src/ui/CenteredLayout.astro
@@ -137,7 +137,7 @@ const { title, tree } = await getContentTree({
     </script>
     <script is:inline>
       const changeNpmTab = () => {
-        const packageManagers = ["npm", "yarn", "pnpm", "bun"];
+        const packageManagers = ["npm", "yarn", "pnpm", "bun", "deno"];
         // @ts-nocheck
         let packageManagerIndex = packageManagers.indexOf(packageManager);
 
@@ -154,7 +154,7 @@ const { title, tree } = await getContentTree({
           });
 
           npxSelectResizer.querySelector(".line span").innerText =
-            packageManagers[index];
+            npxSelects[0]?.children[index]?.innerText ?? packageManagers[index];
 
           npxSelects.forEach((element) => {
             element.value = index;
@@ -250,7 +250,7 @@ const { title, tree } = await getContentTree({
         const npxSelectResizer = document.querySelector<HTMLDivElement>(
           ".npx-select-resizer",
         );
-        const packageManagers: string[] = ["npm", "yarn", "pnpm", "bun"];
+        const packageManagers: string[] = ["npm", "yarn", "pnpm", "bun", "deno"];
         let packageManager: string =
           localStorage.getItem("package-manager") || "npm";
         let packageManagerIndex: number =
@@ -274,7 +274,7 @@ const { title, tree } = await getContentTree({
           const lineSpan =
             npxSelectResizer?.querySelector<HTMLSpanElement>(".line span");
           if (lineSpan) {
-            lineSpan.innerText = packageManagers[index];
+            lineSpan.innerText = (npxSelects[0]?.children[index] as HTMLElement)?.innerText ?? packageManagers[index];
           }
 
           npxSelects.forEach((element) => {
diff --git a/src/ui/DocsLayout.astro b/src/ui/DocsLayout.astro
index a63fe12b2..dac451dcb 100644
--- a/src/ui/DocsLayout.astro
+++ b/src/ui/DocsLayout.astro
@@ -208,7 +208,7 @@ const pageHasDialects = Object.keys(dialects).includes(
     </script>
     <script is:inline>
       const changeNpmTab = () => {
-        const packageManagers = ["npm", "yarn", "pnpm", "bun"];
+        const packageManagers = ["npm", "yarn", "pnpm", "bun", "deno"];
 
         let packageManagerIndex = packageManagers.indexOf(packageManager);
 
@@ -225,7 +225,7 @@ const pageHasDialects = Object.keys(dialects).includes(
           });
 
           npxSelectResizer.querySelector(".line span").innerText =
-            packageManagers[index];
+            npxSelects[0]?.children[index]?.innerText ?? packageManagers[index];
 
           npxSelects.forEach((element) => {
             element.value = index;
@@ -446,7 +446,7 @@ const pageHasDialects = Object.keys(dialects).includes(
         const npxSelectResizer = document.querySelector<HTMLDivElement>(
           ".npx-select-resizer",
         );
-        const packageManagers: string[] = ["npm", "yarn", "pnpm", "bun"];
+        const packageManagers: string[] = ["npm", "yarn", "pnpm", "bun", "deno"];
         let packageManager: string =
           localStorage.getItem("package-manager") || "npm";
         let packageManagerIndex: number =
@@ -470,7 +470,7 @@ const pageHasDialects = Object.keys(dialects).includes(
           const lineSpan =
             npxSelectResizer?.querySelector<HTMLSpanElement>(".line span");
           if (lineSpan) {
-            lineSpan.innerText = packageManagers[index];
+            lineSpan.innerText = (npxSelects[0]?.children[index] as HTMLElement)?.innerText ?? packageManagers[index];
           }
 
           npxSelects.forEach((element) => {