diff --git a/web/app/docs/post-install/customization/page.tsx b/web/app/docs/post-install/customization/page.tsx
index b9d8a6a..1f66dbf 100644
--- a/web/app/docs/post-install/customization/page.tsx
+++ b/web/app/docs/post-install/customization/page.tsx
@@ -1,33 +1,5 @@
-import type { Metadata } from "next"
 import { Sliders } from "lucide-react"
-
-export const metadata: Metadata = {
-  title: "ProxMenux Post-Install: Customization Settings",
-  description:
-    "Guide to Customization Settings in the ProxMenux post-install script for configuring the Proxmox VE environment.",
-  openGraph: {
-    title: "ProxMenux Post-Install: Customization Settings",
-    description:
-      "Guide to Customization Settings in the ProxMenux post-install script for configuring the Proxmox VE environment.",
-    type: "article",
-    url: "https://macrimi.github.io/ProxMenux/docs/post-install/customization",
-    images: [
-      {
-        url: "https://macrimi.github.io/ProxMenux/customization-settings-image.png",
-        width: 1200,
-        height: 630,
-        alt: "ProxMenux Customization Settings",
-      },
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",
-    title: "ProxMenux Post-Install: Customization Settings",
-    description:
-      "Guide to Customization Settings in the ProxMenux post-install script for configuring the Proxmox VE environment.",
-    images: ["https://macrimi.github.io/ProxMenux/customization-settings-image.png"],
-  },
-}
+import CodeBlock from "./code-block"
 
 function StepNumber({ number }: { number: number }) {
   return (
@@ -71,9 +43,8 @@ export default function CustomizationSettingsPage() {
         </li>
       </ul>
       <p className="text-lg mb-2">This adjustment automates the following commands:</p>
-      <div className="bg-gray-800 text-white p-4 rounded-md overflow-x-auto mb-6">
-        <pre className="whitespace-pre-wrap">
-          {`# Modify .bashrc for root
+      <CodeBlock
+        code={`# Modify .bashrc for root
 cp /root/.bashrc /root/.bashrc.bak
 sed -i '/HISTTIMEFORMAT/d' /root/.bashrc
 sed -i '/PS1/d' /root/.bashrc
@@ -83,8 +54,7 @@ echo 'export HISTTIMEFORMAT="%d/%m/%y %T "' >> /root/.bashrc
 echo 'export PS1="\\u@\\h:\\W \\\$ "' >> /root/.bashrc
 echo "alias ll='ls -alF'" >> /root/.bashrc
 source /root/.bashrc`}
-        </pre>
-      </div>
+      />
 
       <h3 className="text-xl font-semibold mt-16 mb-4 flex items-center">
         <StepNumber number={2} />
@@ -92,14 +62,12 @@ source /root/.bashrc`}
       </h3>
       <p className="mb-4">This option customizes the MOTD to display a ProxMenux optimization message upon login.</p>
       <p className="text-lg mb-2">This adjustment automates the following commands:</p>
-      <div className="bg-gray-800 text-white p-4 rounded-md overflow-x-auto mb-6">
-        <pre className="whitespace-pre-wrap">
-          {`# Backup original MOTD
+      <CodeBlock
+        code={`# Backup original MOTD
 cp /etc/motd /etc/motd.bak
 
 echo "This system is optimized by: ProxMenux" | cat - /etc/motd > temp && mv temp /etc/motd`}
-        </pre>
-      </div>
+      />
 
       <h3 className="text-xl font-semibold mt-16 mb-4 flex items-center">
         <StepNumber number={3} />
@@ -117,15 +85,13 @@ echo "This system is optimized by: ProxMenux" | cat - /etc/motd > temp && mv tem
         <li>Configures APT to prevent nagging messages</li>
       </ul>
       <p className="text-lg mb-2">This adjustment automates the following commands:</p>
-      <div className="bg-gray-800 text-white p-4 rounded-md overflow-x-auto mb-6">
-        <pre className="whitespace-pre-wrap">
-          {`# Remove Proxmox subscription banner
+      <CodeBlock
+        code={`# Remove Proxmox subscription banner
 sed -i "s/data.status !== 'Active'/false/g" /usr/share/javascript/proxmox-widget-toolkit/proxmoxlib.js
 sed -i "s/checked_command: function(orig_cmd) {/checked_command: function() {} || function(orig_cmd) {/g" /usr/share/javascript/proxmox-widget-toolkit/proxmoxlib.js
 
 echo "DPkg::Post-Invoke { \\"dpkg -V proxmox-widget-toolkit | grep -q '/proxmoxlib\\\\.js$'; if [ $\\? -eq 1 ]; then { echo 'Removing subscription nag from UI...'; sed -i '/data.status/{s/\\!/\\!/;s/Active/NoMoreNagging/}' /usr/share/javascript/proxmox-widget-toolkit/proxmoxlib.js; }; fi\\"; };" > /etc/apt/apt.conf.d/xs-pve-no-nag`}
-        </pre>
-      </div>
+      />
 
       <section className="mt-12 p-4 bg-blue-100 rounded-md">
         <h2 className="text-xl font-semibold mb-2">Customization Application</h2>
diff --git a/web/components/code-block.tsx b/web/components/code-block.tsx
new file mode 100644
index 0000000..12908fc
--- /dev/null
+++ b/web/components/code-block.tsx
@@ -0,0 +1,36 @@
+"use client"
+
+interface CodeBlockProps {
+  code: string
+}
+
+export default function CodeBlock({ code }: CodeBlockProps) {
+  return (
+    <div className="relative bg-gray-100 text-gray-800 p-4 rounded-md overflow-x-auto mb-6 border border-gray-300">
+      <pre className="whitespace-pre-wrap text-sm">{code}</pre>
+      <button
+        className="absolute top-2 right-2 p-1 bg-white rounded-md shadow-sm hover:bg-gray-200 transition-colors"
+        onClick={() => {
+          navigator.clipboard.writeText(code)
+          // You could add a toast notification here
+        }}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-5 w-5 text-gray-600"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+          />
+        </svg>
+      </button>
+    </div>
+  )
+}
+