diff --git a/web/app/docs/installation/page.tsx b/web/app/docs/installation/page.tsx
index daf8fe2..dc15858 100644
--- a/web/app/docs/installation/page.tsx
+++ b/web/app/docs/installation/page.tsx
@@ -30,3 +30,4 @@ export default function InstallationPage() {
     </div>
   )
 }
+
diff --git a/web/components/CopyableCode.tsx b/web/components/CopyableCode.tsx
index 9baee04..26c939f 100644
--- a/web/components/CopyableCode.tsx
+++ b/web/components/CopyableCode.tsx
@@ -3,17 +3,20 @@
 import type React from "react"
 import { useState } from "react"
 import { Copy, Check } from "lucide-react"
+import { cn } from "@/lib/utils"
 
 interface CopyableCodeProps {
   code: string
+  language?: string
+  className?: string
 }
 
-const CopyableCode: React.FC<CopyableCodeProps> = ({ code }) => {
+const CopyableCode: React.FC<CopyableCodeProps> = ({ code, language, className }) => {
   const [isCopied, setIsCopied] = useState(false)
 
   const copyToClipboard = async () => {
     try {
-      await navigator.clipboard.writeText(code)
+      await navigator.clipboard.writeText(decodeURIComponent(code))
       setIsCopied(true)
       setTimeout(() => setIsCopied(false), 2000)
     } catch (err) {
@@ -22,16 +25,16 @@ const CopyableCode: React.FC<CopyableCodeProps> = ({ code }) => {
   }
 
   return (
-    <div className="relative my-4">
-      <pre className="bg-gray-100 text-gray-800 p-4 rounded-md overflow-x-auto">
-        <code className="text-sm">{code}</code>
+    <div className={cn("relative", className)}>
+      <pre className={`bg-gray-100 p-4 rounded-md overflow-x-auto ${language ? `language-${language}` : ""}`}>
+        <code dangerouslySetInnerHTML={{ __html: decodeURIComponent(code) }} />
       </pre>
       <button
         onClick={copyToClipboard}
-        className="absolute top-2 right-2 p-2 bg-white rounded-md shadow-sm hover:bg-gray-200 transition-colors"
-        aria-label="Copy to clipboard"
+        className="absolute top-2 right-2 p-2 bg-white rounded-md shadow-sm hover:bg-gray-100 transition-colors"
+        aria-label="Copy code"
       >
-        {isCopied ? <Check className="h-5 w-5 text-green-500" /> : <Copy className="h-5 w-5 text-gray-500" />}
+        {isCopied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4 text-gray-500" />}
       </button>
     </div>
   )
@@ -39,4 +42,3 @@ const CopyableCode: React.FC<CopyableCodeProps> = ({ code }) => {
 
 export default CopyableCode
 
-