diff --git a/website/src/locales/en.json b/website/src/locales/en.json
index d524dfac..f34dd3a1 100644
--- a/website/src/locales/en.json
+++ b/website/src/locales/en.json
@@ -111,8 +111,9 @@
   "installation": {
     "title": "Get Started in Seconds",
     "npm": {
-      "step1": "1. Install Globally",
-      "step2": "2. Start Server"
+      "step1": "1. Start the Server",
+      "step2": "2. Start a Coding Session",
+      "step3": "3. Open the UI"
     }
   },
   "cta": {
diff --git a/website/src/locales/zh.json b/website/src/locales/zh.json
index 95f343ee..d1ea460c 100644
--- a/website/src/locales/zh.json
+++ b/website/src/locales/zh.json
@@ -111,8 +111,9 @@
   "installation": {
     "title": "几秒钟内开始",
     "npm": {
-      "step1": "1. 全局安装",
-      "step2": "2. 启动服务器"
+      "step1": "1. 启动服务器",
+      "step2": "2. 启动编码会话",
+      "step3": "3. 打开 UI"
     }
   },
   "cta": {
diff --git a/website/src/pages/Home.tsx b/website/src/pages/Home.tsx
index 1469df03..139e4ef8 100644
--- a/website/src/pages/Home.tsx
+++ b/website/src/pages/Home.tsx
@@ -2,7 +2,6 @@ import Layout from "@/components/Layout";
 import AppShowcase from "@/components/AppShowcase";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { ArrowRight, Check, Code2, Copy, Globe, Laptop, Lock, MessageSquare, Smartphone, Terminal, Zap, GitBranch, ShieldAlert, Coffee, Mountain, Footprints } from "lucide-react";
 import { useState } from "react";
 import { Link } from "wouter";
@@ -268,42 +267,45 @@ export default function Home() {
         <div className="container max-w-4xl">
           <h2 className="text-3xl md:text-4xl font-bold text-center mb-12">{t('installation.title')}</h2>
           
-          <Tabs defaultValue="npm" className="w-full">
-            <TabsList className="grid w-full grid-cols-1 mb-8 h-14 p-1 bg-muted border-2 border-border rounded-xl">
-              <TabsTrigger value="npm" className="text-lg font-bold rounded-lg data-[state=active]:bg-white data-[state=active]:text-primary data-[state=active]:shadow-sm">NPM</TabsTrigger>
-            </TabsList>
-            
-            <TabsContent value="npm">
-              <Card className="border-2 border-border shadow-hard bg-card">
-                <CardContent className="p-6 space-y-6">
-                  <div className="space-y-2">
-                    <div className="flex justify-between items-center">
-                      <h3 className="font-bold">{t('installation.npm.step1')}</h3>
-                    </div>
-                    <div className="bg-slate-950 text-slate-50 p-4 rounded-xl font-mono text-sm flex justify-between items-center border-2 border-slate-800">
-                      <code>npm install -g @twsxtd/hapi</code>
-                      <Button variant="ghost" size="icon" className="text-slate-400 hover:text-white hover:bg-slate-800" onClick={() => copyToClipboard("npm install -g @twsxtd/hapi", "install")}>
-                        {copied === "install" ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
-                      </Button>
-                    </div>
-                  </div>
-                  
-                  <div className="space-y-2">
-                    <div className="flex justify-between items-center">
-                      <h3 className="font-bold">{t('installation.npm.step2')}</h3>
-                    </div>
-                    <div className="bg-slate-950 text-slate-50 p-4 rounded-xl font-mono text-sm flex justify-between items-center border-2 border-slate-800">
-                      <code>hapi start</code>
-                      <Button variant="ghost" size="icon" className="text-slate-400 hover:text-white hover:bg-slate-800" onClick={() => copyToClipboard("hapi start", "start")}>
-                        {copied === "start" ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
-                      </Button>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            </TabsContent>
-            
-          </Tabs>
+          <Card className="border-2 border-border shadow-hard bg-card">
+            <CardContent className="p-6 space-y-6">
+              <div className="space-y-2">
+                <div className="flex justify-between items-center">
+                  <h3 className="font-bold">{t('installation.npm.step1')}</h3>
+                </div>
+                <div className="bg-slate-950 text-slate-50 p-4 rounded-xl font-mono text-sm flex justify-between items-center border-2 border-slate-800">
+                  <code>npx @twsxtd/hapi server</code>
+                  <Button variant="ghost" size="icon" className="text-slate-400 hover:text-white hover:bg-slate-800" onClick={() => copyToClipboard("npx @twsxtd/hapi server", "server")}>
+                    {copied === "server" ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+                  </Button>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <div className="flex justify-between items-center">
+                  <h3 className="font-bold">{t('installation.npm.step2')}</h3>
+                </div>
+                <div className="bg-slate-950 text-slate-50 p-4 rounded-xl font-mono text-sm flex justify-between items-center border-2 border-slate-800">
+                  <code>npx @twsxtd/hapi</code>
+                  <Button variant="ghost" size="icon" className="text-slate-400 hover:text-white hover:bg-slate-800" onClick={() => copyToClipboard("npx @twsxtd/hapi", "session")}>
+                    {copied === "session" ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+                  </Button>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <div className="flex justify-between items-center">
+                  <h3 className="font-bold">{t('installation.npm.step3')}</h3>
+                </div>
+                <div className="bg-slate-950 text-slate-50 p-4 rounded-xl font-mono text-sm flex justify-between items-center border-2 border-slate-800">
+                  <code>http://&lt;your-ip&gt;:3006</code>
+                  <Button variant="ghost" size="icon" className="text-slate-400 hover:text-white hover:bg-slate-800" onClick={() => copyToClipboard("http://localhost:3006", "ui")}>
+                    {copied === "ui" ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+                  </Button>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
         </div>
       </section>