diff --git a/web/app/docs/installation/page.tsx b/web/app/docs/installation/page.tsx
index dc15858..099d763 100644
--- a/web/app/docs/installation/page.tsx
+++ b/web/app/docs/installation/page.tsx
@@ -7,20 +7,26 @@ export default function InstallationPage() {
 
   return (
     <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8 text-gray-900">
-      <h1 className="text-3xl sm:text-4xl font-bold mb-6">Installing ProxMenux</h1>
+      <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold mb-6">Installing ProxMenux</h1>
 
-      <h2 className="text-2xl font-semibold mt-8 mb-4">Installation</h2>
-      <p className="mb-4">To install ProxMenux, simply run the following command in your Proxmox server terminal:</p>
-      <CopyableCode code={installationCode} className="w-full overflow-x-auto" />
+      <h2 className="text-xl sm:text-2xl font-semibold mt-8 mb-4">Installation</h2>
+      <p className="mb-4 text-sm sm:text-base">
+        To install ProxMenux, simply run the following command in your Proxmox server terminal:
+      </p>
+      <div className="w-full overflow-hidden mb-8">
+        <CopyableCode code={installationCode} className="w-full" />
+      </div>
 
-      <h2 className="text-2xl font-semibold mt-8 mb-4">How to Use</h2>
-      <p className="mb-4">
+      <h2 className="text-xl sm:text-2xl font-semibold mt-8 mb-4">How to Use</h2>
+      <p className="mb-4 text-sm sm:text-base">
         Once installed, launch <strong>ProxMenux</strong> by running:
       </p>
-      <CopyableCode code="menu" className="w-full overflow-x-auto" />
+      <div className="w-full overflow-hidden mb-8">
+        <CopyableCode code="menu" className="w-full" />
+      </div>
 
-      <h2 className="text-2xl font-semibold mt-8 mb-4">Troubleshooting</h2>
-      <p className="mb-4">
+      <h2 className="text-xl sm:text-2xl font-semibold mt-8 mb-4">Troubleshooting</h2>
+      <p className="mb-4 text-sm sm:text-base">
         If you encounter any issues during installation or usage, please check the{" "}
         <a href="https://github.com/MacRimi/ProxMenux/issues" className="text-blue-600 hover:underline">
           GitHub Issues
diff --git a/web/components/CopyableCode.tsx b/web/components/CopyableCode.tsx
index 26c939f..255a7fc 100644
--- a/web/components/CopyableCode.tsx
+++ b/web/components/CopyableCode.tsx
@@ -25,16 +25,27 @@ const CopyableCode: React.FC<CopyableCodeProps> = ({ code, language, className }
   }
 
   return (
-    <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) }} />
+    <div className={cn("relative w-full", className)}>
+      <pre
+        className={cn(
+          "bg-gray-100 p-2 sm:p-3 md:p-4 rounded-md overflow-x-auto",
+          "text-xs sm:text-sm md:text-base lg:text-lg",
+          "max-w-full",
+          language ? `language-${language}` : "",
+        )}
+      >
+        <code className="break-words whitespace-pre-wrap">{decodeURIComponent(code)}</code>
       </pre>
       <button
         onClick={copyToClipboard}
-        className="absolute top-2 right-2 p-2 bg-white rounded-md shadow-sm hover:bg-gray-100 transition-colors"
+        className="absolute top-1 right-1 sm:top-2 sm:right-2 p-1 sm:p-2 bg-white rounded-md shadow-sm hover:bg-gray-100 transition-colors"
         aria-label="Copy code"
       >
-        {isCopied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4 text-gray-500" />}
+        {isCopied ? (
+          <Check className="h-3 w-3 sm:h-4 sm:w-4 text-green-500" />
+        ) : (
+          <Copy className="h-3 w-3 sm:h-4 sm:w-4 text-gray-500" />
+        )}
       </button>
     </div>
   )