diff --git a/web/app/guides/[slug]/page.tsx b/web/app/guides/[slug]/page.tsx
index d2c2714..8436ceb 100644
--- a/web/app/guides/[slug]/page.tsx
+++ b/web/app/guides/[slug]/page.tsx
@@ -3,8 +3,6 @@ import path from "path"
 import { remark } from "remark"
 import html from "remark-html"
 import dynamic from "next/dynamic"
-import React from "react"
-
 
 const CopyableCode = dynamic(() => import("@/components/CopyableCode"), { ssr: false })
 
@@ -25,24 +23,23 @@ export async function generateStaticParams() {
 
 
 function wrapCodeBlocksWithCopyable(content: string) {
-  return content.split(/(<pre><code>[\s\S]*?<\/code><\/pre>)/g).map((segment, index) => {
-    const match = segment.match(/<pre><code>([\s\S]*?)<\/code><\/pre>/)
-    if (match) {
-      const codeContent = match[1].trim()
-      return React.createElement(CopyableCode, { code: codeContent, key: index })
-    }
-    return segment
-  })
+  return content.replace(
+    /<pre><code class="language-(.*?)">([\s\S]*?)<\/code><\/pre>/g,
+    (match, lang, code) =>
+      `<div class="copyable-code-container"><CopyableCode code="${encodeURIComponent(
+        code.trim()
+      )}" /></div>`
+  )
 }
 
 export default async function GuidePage({ params }: { params: { slug: string } }) {
-  const guideContent = await getGuideContent(params.slug)
-  const wrappedContent = wrapCodeBlocksWithCopyable(guideContent)
+  let guideContent = await getGuideContent(params.slug)
+  guideContent = wrapCodeBlocksWithCopyable(guideContent)
 
   return (
     <div className="min-h-screen bg-white text-gray-900">
       <div className="container mx-auto px-4 py-16 max-w-3xl">
-        <div className="prose max-w-none">{wrappedContent}</div>
+        <div className="prose max-w-none" dangerouslySetInnerHTML={{ __html: guideContent }} />
       </div>
     </div>
   )