diff --git a/app/app.vue b/app/app.vue
index 12a38a8..2db94ce 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -37,3 +37,17 @@ provide('navigation', navigation)
 
   <UNotifications />
 </template>
+
+<style>
+code.shiki {
+  background-color: transparent !important;
+}
+
+html.dark .shiki,
+html.dark .shiki span {
+  color: var(--shiki-dark) !important;
+  font-style: var(--shiki-dark-font-style) !important;
+  font-weight: var(--shiki-dark-font-weight) !important;
+  text-decoration: var(--shiki-dark-text-decoration) !important;
+}
+</style>
diff --git a/app/components/global/Pm-Install.vue b/app/components/global/Pm-Install.vue
index 211e722..5967e5e 100644
--- a/app/components/global/Pm-Install.vue
+++ b/app/components/global/Pm-Install.vue
@@ -28,7 +28,7 @@ onMounted(() => {
 <template>
   <CodeGroup ref="codeGroup">
     <ProseCode v-for="(codeBlock, index) in codeBlocks" :key="index" v-bind="codeBlock">
-      <pre><code>{{ codeBlock.code }}</code></pre>
+      <Shiki :code="codeBlock.code" language="bash" />
     </ProseCode>
   </CodeGroup>
 </template>
diff --git a/app/components/global/Pm-Run.vue b/app/components/global/Pm-Run.vue
index 76717da..1fa6b58 100644
--- a/app/components/global/Pm-Run.vue
+++ b/app/components/global/Pm-Run.vue
@@ -22,7 +22,7 @@ onMounted(() => {
 <template>
   <CodeGroup ref="codeGroup">
     <ProseCode v-for="(codeBlock, index) in codeBlocks" :key="index" v-bind="codeBlock">
-      <pre><code>{{ codeBlock.code }}</code></pre>
+      <Shiki :code="codeBlock.code" language="bash" />
     </ProseCode>
   </CodeGroup>
 </template>
diff --git a/app/components/global/Pm-x.vue b/app/components/global/Pm-x.vue
index 65dacf9..87cc8ce 100644
--- a/app/components/global/Pm-x.vue
+++ b/app/components/global/Pm-x.vue
@@ -22,7 +22,7 @@ onMounted(() => {
 <template>
   <CodeGroup ref="codeGroup">
     <ProseCode v-for="(codeBlock, index) in codeBlocks" :key="index" v-bind="codeBlock">
-      <pre><code>{{ codeBlock.code }}</code></pre>
+      <Shiki :code="codeBlock.code" language="bash" />
     </ProseCode>
   </CodeGroup>
 </template>
diff --git a/app/nuxt.config.ts b/app/nuxt.config.ts
index f4f4d71..e7b8d31 100644
--- a/app/nuxt.config.ts
+++ b/app/nuxt.config.ts
@@ -9,7 +9,7 @@ const ssr = Boolean(isProd || process.env.NUXT_DOCS_SSR)
 
 export default defineNuxtConfig({
   ssr,
-  modules: ['@nuxt/fonts', '@nuxt/content', '@nuxtjs/seo', isProd && '@nuxtjs/plausible', '@nuxt/ui'],
+  modules: ['nuxt-shiki', '@nuxt/fonts', '@nuxt/content', '@nuxtjs/seo', isProd && '@nuxtjs/plausible', '@nuxt/ui'],
   ui: {
     icons: [],
   },
@@ -45,7 +45,14 @@ export default defineNuxtConfig({
       '\\.(js|mjs|ts)$',
     ],
     highlight: {
-      langs: ['json5', 'jsonc', 'toml', 'yaml', 'html', 'sh', 'shell', 'bash', 'mdc', 'markdown', 'md'],
+      langs: ['json5', 'jsonc', 'toml', 'yaml', 'html', 'sh', 'shell', 'bash', 'mdc', 'markdown', 'md', 'docker'],
+    },
+  },
+  shiki: {
+    bundledLangs: ['json5', 'jsonc', 'toml', 'yaml', 'html', 'sh', 'shell', 'bash', 'mdc', 'markdown', 'md', 'docker'],
+    defaultTheme: {
+      dark: 'material-theme-palenight',
+      light: 'material-theme-lighter',
     },
   },
   routeRules: {
diff --git a/bun.lockb b/bun.lockb
index a40a971..5409bdb 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 07b1bee..6d20df4 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "nuxi": "^3.10.1",
     "nuxt": "^3.10.3",
     "nuxt-build-cache": "^0.1.1",
+    "nuxt-shiki": "^0.2.1",
     "pkg-types": "^1.0.3",
     "scule": "^1.3.0",
     "tailwindcss": "^3.4.1",