diff --git a/web/bun.lockb b/web/bun.lockb
index bd05d75..f32eacf 100755
Binary files a/web/bun.lockb and b/web/bun.lockb differ
diff --git a/web/next.config.js b/web/next.config.js
index 2d23049..954fac0 100644
--- a/web/next.config.js
+++ b/web/next.config.js
@@ -3,9 +3,6 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
-  experimental: {
-    serverComponentsExternalPackages: ["shiki"],
-  },
 };
 
 module.exports = nextConfig;
diff --git a/web/package.json b/web/package.json
index b7d8df7..004cf35 100644
--- a/web/package.json
+++ b/web/package.json
@@ -43,7 +43,7 @@
     "react-dom": "^18",
     "react-hook-form": "^7.48.2",
     "react-use-websocket": "^4.5.0",
-    "shiki": "^0.14.6",
+    "shikiji": "^0.9.3",
     "sonner": "^1.2.4",
     "tailwind-merge": "^2.1.0",
     "tailwindcss-animate": "^1.0.7",
diff --git a/web/src/components/CodeBlock.tsx b/web/src/components/CodeBlock.tsx
index ac0bf4b..c00b7b2 100644
--- a/web/src/components/CodeBlock.tsx
+++ b/web/src/components/CodeBlock.tsx
@@ -1,10 +1,10 @@
 import { CopyButton } from "@/components/CopyButton";
-import type { Lang } from "shiki";
-import shiki from "shiki";
+import { getHighlighter, StringLiteralUnion  } from 'shikiji'
 
-export async function CodeBlock(props: { code: string; lang: Lang }) {
-  const highlighter = await shiki.getHighlighter({
-    theme: "one-dark-pro",
+export async function CodeBlock(props: { code: string; lang: StringLiteralUnion<string> }) {
+  const highlighter = await getHighlighter({
+    themes: ["one-dark-pro"],
+    langs: [props.lang]
   });
 
   return (
@@ -20,6 +20,7 @@ export async function CodeBlock(props: { code: string; lang: Lang }) {
         dangerouslySetInnerHTML={{
           __html: highlighter.codeToHtml(props.code.trim(), {
             lang: props.lang,
+            theme: "one-dark-pro",
           }),
         }}
       />