diff --git a/web/package-lock.json b/web/package-lock.json
index 9885244..dafb6a3 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -62,7 +62,6 @@
       "integrity": "sha512-H3mcG6ZDLTlYfaSNi0iOKkigqMFvkTKlGUYlD8GW7nNOYRrevuA46iTypPyv+06V3fEmvvazfntkBU34L0azAw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.28.6",
         "@babel/generator": "^7.28.6",
@@ -1020,7 +1019,6 @@
       "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.0.tgz",
       "integrity": "sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==",
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": ">=8.0.0"
       }
@@ -2044,7 +2042,6 @@
       "integrity": "sha512-3MbSL37jEchWZz2p2mjntRZtPt837ij10ApxKfgmXCTuHWagYg7iA5bqPw6C8BMPfwidlvfPI/fxOc42HLhcyg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -2111,7 +2108,6 @@
       "integrity": "sha512-npiaib8XzbjtzS2N4HlqPvlpxpmZ14FjSJrteZpPxGUaYPlvhzlzUZ4mZyABo0EFrOWnvyd0Xxroq//hKhtAWg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.53.0",
         "@typescript-eslint/types": "8.53.0",
@@ -2363,7 +2359,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2469,7 +2464,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -2734,7 +2728,6 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3728,7 +3721,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -3851,7 +3843,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
       "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4085,7 +4076,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -4171,7 +4161,6 @@
       "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -4298,7 +4287,6 @@
       "integrity": "sha512-k7Nwx6vuWx1IJ9Bjuf4Zt1PEllcwe7cls3VNzm4CQ1/hgtFUK2bRNG3rvnpPUhFjmqJKAKtjV576KnUkHocg/g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/web/src/components/Installation.tsx b/web/src/components/Installation.tsx
index c841341..9eb8e0a 100644
--- a/web/src/components/Installation.tsx
+++ b/web/src/components/Installation.tsx
@@ -1,12 +1,12 @@
 import { useState } from "react";
 
 export function Installation() {
-  const [copied, setCopied] = useState(false);
+  const [copiedId, setCopiedId] = useState<string | null>(null);
 
-  const handleCopy = () => {
-    navigator.clipboard.writeText("npm install -g envii-cli");
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
+  const handleCopy = (text: string, id: string) => {
+    navigator.clipboard.writeText(text);
+    setCopiedId(id);
+    setTimeout(() => setCopiedId(null), 2000);
   };
 
   return (
@@ -36,10 +36,10 @@ export function Installation() {
             <div className="flex items-center justify-between px-4 py-3 bg-zinc-900 border-b border-zinc-800">
               <span className="text-sm text-zinc-500 font-mono">npm</span>
               <button
-                onClick={handleCopy}
-                className="text-xs text-zinc-500 hover:text-white transition-colors px-2 py-1 border border-zinc-700 hover:border-zinc-500"
+                onClick={() => handleCopy("npm install -g envii-cli", "npm")}
+                className="text-xs text-zinc-500 cursor-pointer hover:text-white transition-colors px-2 py-1 border border-zinc-700 hover:border-zinc-500"
               >
-                {copied ? "Copied!" : "Copy"}
+                {copiedId === "npm" ? "Copied!" : "Copy"}
               </button>
             </div>
             <div className="p-4 font-mono text-lg">
@@ -50,18 +50,39 @@ export function Installation() {
           </div>
         </div>
 
-        <div className="mt-6 grid md:grid-cols-2 gap-px bg-zinc-800">
-          <div className="bg-zinc-950 p-4">
-            <div className="text-xs text-zinc-600 mb-2 font-mono">pnpm</div>
-            <code className="text-zinc-300 font-mono text-sm">
-              pnpm add -g envii-cli
-            </code>
+        <div className="mt-6 grid md:grid-cols-2 gap-4">
+          <div className="border border-zinc-800 bg-zinc-950">
+            <div className="flex items-center justify-between px-4 py-3 bg-zinc-900 border-b border-zinc-800">
+              <span className="text-sm text-zinc-500 font-mono">pnpm</span>
+              <button
+                onClick={() => handleCopy("pnpm add -g envii-cli", "pnpm")}
+                className="text-xs text-zinc-500 cursor-pointer hover:text-white transition-colors px-2 py-1 border border-zinc-700 hover:border-zinc-500"
+              >
+                {copiedId === "pnpm" ? "Copied!" : "Copy"}
+              </button>
+            </div>
+            <div className="p-4 font-mono text-sm">
+              <span className="text-zinc-500">$</span>{" "}
+              <span className="text-emerald-400">pnpm</span>{" "}
+              <span className="text-zinc-100">add -g envii-cli</span>
+            </div>
           </div>
-          <div className="bg-zinc-950 p-4">
-            <div className="text-xs text-zinc-600 mb-2 font-mono">yarn</div>
-            <code className="text-zinc-300 font-mono text-sm">
-              yarn global add envii-cli
-            </code>
+
+          <div className="border border-zinc-800 bg-zinc-950">
+            <div className="flex items-center justify-between px-4 py-3 bg-zinc-900 border-b border-zinc-800">
+              <span className="text-sm text-zinc-500 font-mono">yarn</span>
+              <button
+                onClick={() => handleCopy("yarn global add envii-cli", "yarn")}
+                className="text-xs text-zinc-500 cursor-pointer hover:text-white transition-colors px-2 py-1 border border-zinc-700 hover:border-zinc-500"
+              >
+                {copiedId === "yarn" ? "Copied!" : "Copy"}
+              </button>
+            </div>
+            <div className="p-4 font-mono text-sm">
+              <span className="text-zinc-500">$</span>{" "}
+              <span className="text-emerald-400">yarn</span>{" "}
+              <span className="text-zinc-100">global add envii-cli</span>
+            </div>
           </div>
         </div>
 
diff --git a/web/src/index.css b/web/src/index.css
index 0ef1936..18afe37 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -4,6 +4,10 @@
   --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 @keyframes shimmer {
   0% {
     background-position: 200% 0;