diff --git a/docs/client-guide.md b/docs/client-guide.md
index d94e1da..21745f9 100644
--- a/docs/client-guide.md
+++ b/docs/client-guide.md
@@ -19,6 +19,15 @@ Your audience is already sharing. Give them a button worth clicking.
 
 ## How to Get Started
 
+### 1. By AI-Agent
+
+> **Using GitHub Copilot?**
+> Open the chat, type `@workspace`, then copy the public prompt from:
+> https://github.com/AOSSIE-Org/SocialShareButton/blob/main/.github/copilot/integrate-social-share-button.prompt.md
+> Copilot will walk through each step for your exact framework automatically.
+
+### 2. Manually
+
 You have exactly **three steps** between you and a live share button.
 
 ```text
@@ -29,10 +38,6 @@ You have exactly **three steps** between you and a live share button.
 
 That's it. No accounts. No API keys. No configuration files.
 
-> **Using GitHub Copilot?**
-> Open the chat, type `@workspace`, then copy the public prompt from:
-> https://github.com/AOSSIE-Org/SocialShareButton/blob/main/.github/copilot/integrate-social-share-button.prompt.md
-> Copilot will walk through each step for your exact framework automatically.
 
 ---
 
diff --git a/landing-page/src/app/docs/page.tsx b/landing-page/src/app/docs/page.tsx
index b9eb9d7..27fc311 100644
--- a/landing-page/src/app/docs/page.tsx
+++ b/landing-page/src/app/docs/page.tsx
@@ -132,23 +132,9 @@ export default function Docs() {
                     How to Get Started
                   </h2>
 
-                  <p className="text-base sm:text-lg md:text-xl mb-6 sm:mb-8">
-                    You have exactly <span className="font-bold text-[#00C853]">three steps</span> between you and a live share button.
-                  </p>
+                  <h3 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6">1. By AI-Agent</h3>
 
-                  <div className="bg-[#00C853]/10 dark:bg-[#00C853]/5 rounded-2xl p-4 sm:p-6 mb-6 sm:mb-8 border-l-4 border-[#00C853]">
-                    <pre className="text-sm sm:text-base md:text-lg font-mono whitespace-pre-wrap">
-                      1.  Load the library   →   one line in your HTML or package install
-                      2.  Drop a div         →   place it wherever you want the button
-                      3.  Initialize         →   one line of JavaScript
-                    </pre>
-                  </div>
-
-                  <p className="text-base sm:text-lg text-muted-foreground mb-6 sm:mb-8">
-                    That's it. No accounts. No API keys. No configuration files.
-                  </p>
-
-                  <div className="bg-[#FFCC00]/10 dark:bg-[#FFCC00]/5 rounded-2xl p-4 sm:p-6 border-2 border-[#FFCC00]">
+                  <div className="bg-[#FFCC00]/10 dark:bg-[#FFCC00]/5 rounded-2xl p-4 sm:p-6 mb-6 sm:mb-8 border-2 border-[#FFCC00]">
                     <p className="text-xs sm:text-sm font-bold text-[#FFCC00] mb-2">Using GitHub Copilot?</p>
                     <p className="text-sm sm:text-base mb-4">
                       Open the chat, type <code className="bg-black dark:bg-white text-white dark:text-black px-2 py-1 rounded text-sm">@workspace</code>, then copy the public prompt from:
@@ -165,6 +151,24 @@ export default function Docs() {
                       Copilot will walk through each step for your exact framework automatically.
                     </p>
                   </div>
+
+                  <h3 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6">2. Manually</h3>
+
+                  <p className="text-base sm:text-lg md:text-xl mb-6 sm:mb-8">
+                    You have exactly <span className="font-bold text-[#00C853]">three steps</span> between you and a live share button.
+                  </p>
+
+                  <div className="bg-[#00C853]/10 dark:bg-[#00C853]/5 rounded-2xl p-4 sm:p-6 mb-6 sm:mb-8 border-l-4 border-[#00C853]">
+                    <pre className="text-sm sm:text-base md:text-lg font-mono whitespace-pre-wrap">
+                      1.  Load the library   →   one line in your HTML or package install
+                      2.  Drop a div         →   place it wherever you want the button
+                      3.  Initialize         →   one line of JavaScript
+                    </pre>
+                  </div>
+
+                  <p className="text-base sm:text-lg text-muted-foreground mb-6 sm:mb-8">
+                    That's it. No accounts. No API keys. No configuration files.
+                  </p>
                 </div>
               </div>